Migrating Waspleau to 0.12 (#1824)

examples/waspleau/.gitignore

@@ -1,3 +1,16 @@
+.wasp/
+node_modules/
+**/.DS_Store
+
+# We ignore env files recognized and used by Wasp.
+.env.server
+.env.client
+
+# To be extra safe, we by default ignore any files with `.env` extension in them.
+# If this is too agressive for you, consider allowing specific files with `!` operator,
+# or modify/delete these two lines.
+*.env
+*.env.*
 /.wasp/
 /.env.server
 /.env.client

examples/waspleau/.waspignore

@@ -1,3 +1,4 @@
 # Ignore editor tmp files
 **/*~
 **/#*#
+.DS_Store

examples/waspleau/main.wasp

@@ -1,25 +1,21 @@
 app waspleau {
   wasp: {
-    version: "^0.11.0"
+    version: "^0.12.0"
   },
 
   title: "Waspleau",
 
   server: {
-    setupFn: import serverSetup from "@server/serverSetup.js"
+    setupFn: import serverSetup from "@src/serverSetup"
   },
 
-  db: { system: PostgreSQL },
-
-  dependencies: [
-    ("axios", "^1.4.0")
-  ]
+  db: { system: PostgreSQL }
 }
 
 job github {
   executor: PgBoss,
   perform: {
-    fn: import { workerFunction } from "@server/workers/github.js"
+    fn: import { workerFunction } from "@src/workers/github"
   },
   schedule: {
     cron: "*/10 * * * *"
@@ -30,7 +26,7 @@ job github {
 job loadTime {
   executor: PgBoss,
   perform: {
-    fn: import { workerFunction } from "@server/workers/loadTime.js"
+    fn: import { workerFunction } from "@src/workers/loadTime"
   },
   schedule: {
     cron: "*/5 * * * *",
@@ -51,10 +47,10 @@ psl=}
 
 route RootsRoute { path: "/", to: MainPage }
 page MainPage {
-  component: import Main from "@client/MainPage.jsx"
+  component: import Main from "@src/MainPage"
 }
 
 query dashboard {
-  fn: import { refreshDashboardData } from "@server/dashboard.js",
+  fn: import { refreshDashboardData } from "@src/dashboard",
   entities: [Datum]
 }

examples/waspleau/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "waspleau",
+  "dependencies": {
+    "axios": "^1.4.0",
+    "wasp": "file:.wasp/out/sdk/wasp",
+    "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.1.0",
+    "vite": "^4.3.9",
+    "@types/react": "^18.0.37",
+    "prisma": "4.16.2"
+  }
+}

examples/waspleau/src/MainPage.jsx

@@ -1,11 +1,9 @@
 import React from 'react'
-
-import refreshDashboardData from '@wasp/queries/dashboard'
-import { useQuery } from '@wasp/queries'
-
 import './style.css'
 import addWaspSourceHeader from './addWaspSourceHeader'
 
+import { useQuery, dashboard as refreshDashboardData } from "wasp/client/operations";
+
 const MainPage = () => {
   const { data: dashboardData, isFetching, error } = useQuery(refreshDashboardData, null, { refetchInterval: 60 * 1000 })
 

examples/waspleau/src/client/jsconfig.json

@@ -1,27 +0,0 @@
-{
-  "compilerOptions": {
-    // The following settings enable IDE support in user-provided source files.
-    // Editing them might break features like import autocompletion and
-    // definition lookup. Don't change them unless you know what you're doing.
-    //
-    // The relative path to the generated web app's root directory. This must be
-    // set to define the "paths" option.
-    "baseUrl": "../../.wasp/out/web-app/",
-    "paths": {
-      // Resolve all "@wasp" imports to the generated source code.
-      "@wasp/*": [
-        "src/*"
-      ],
-      // Resolve all non-relative imports to the correct node module. Source:
-      // https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping
-      "*": [
-        // Start by looking for the definiton inside the node modules root
-        // directory...
-        "node_modules/*",
-        // ... If that fails, try to find it inside definitely-typed type
-        // definitions.
-        "node_modules/@types/*"
-      ]
-    }
-  }
-}

examples/waspleau/src/server/jsconfig.json

@@ -1,27 +0,0 @@
-{
-  "compilerOptions": {
-    // The following settings enable IDE support in user-provided source files. 
-    // Editing them might break features like import autocompletion and
-    // definition lookup. Don't change them unless you know what you're doing.
-    //
-    // The relative path to the generated web app's root directory. This must be
-    // set to define the "paths" option.
-    "baseUrl": "../../.wasp/out/server/",
-    "paths": {
-      // Resolve all "@wasp" imports to the generated source code.
-      "@wasp/*": [
-        "src/*"
-      ],
-      // Resolve all non-relative imports to the correct node module. Source:
-      // https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping
-      "*": [
-        // Start by looking for the definiton inside the node modules root
-        // directory...
-        "node_modules/*",
-        // ... If that fails, Try to find it inside definitely-typed type
-        // definitions.
-        "node_modules/@types/*"
-      ]
-    }
-  }
-}

examples/waspleau/src/server/serverSetup.js

@@ -1,15 +0,0 @@
-/**
- * These Jobs are automatically scheduled by Wasp.
- * However, let's kick them off on server setup to ensure we have data right away.
- */
-
-import { github } from '@wasp/jobs/github.js'
-import { loadTime } from '@wasp/jobs/loadTime.js'
-
-export default async function () {
-  await github.submit()
-  await loadTime.submit({
-    url: "https://wasp-lang.dev",
-    name: "wasp-lang.dev Load Time"
-  })
-}

examples/waspleau/src/serverSetup.js

@@ -0,0 +1,9 @@
+import { github, loadTime } from "wasp/server/jobs";
+
+export default async function () {
+  await github.submit()
+  await loadTime.submit({
+    url: "https://wasp-lang.dev",
+    name: "wasp-lang.dev Load Time"
+  })
+}

examples/waspleau/src/shared/jsconfig.json

@@ -1,23 +0,0 @@
-{
-  "compilerOptions": {
-    // The following settings enable IDE support in user-provided source files. 
-    // Editing them might break features like import autocompletion and
-    // definition lookup. Don't change them unless you know what you're doing.
-    //
-    // The relative path to the generated web app's root directory. This must be
-    // set to define the "paths" option.
-    "baseUrl": "../../.wasp/out/server",
-    "paths": {
-      // Resolve all non-relative imports to the correct node module. Source:
-      // https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping
-      "*": [
-        // Start by looking for the definiton inside the node modules root
-        // directory...
-        "node_modules/*",
-        // ... If that fails, try to find it inside definitely-typed type
-        // definitions.
-        "node_modules/@types/*"
-      ]
-    }
-  }
-}

examples/waspleau/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

examples/waspleau/tsconfig.json

@@ -0,0 +1,36 @@
+// =============================== IMPORTANT =================================
+//
+// This file is only used for Wasp IDE support. You can change it to configure
+// your IDE checks, but none of these options will affect the TypeScript
+// compiler. Proper TS compiler configuration in Wasp is coming soon :)
+{
+  "compilerOptions": {
+    // JSX support
+    "jsx": "preserve",
+    "strict": true,
+    // Allow default imports.
+    "esModuleInterop": true,
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "typeRoots": [
+      // This is needed to properly support Vitest testing with jest-dom matchers.
+      // Types for jest-dom are not recognized automatically and Typescript complains
+      // about missing types e.g. when using `toBeInTheDocument` and other matchers.
+      "node_modules/@testing-library",
+      // Specifying type roots overrides the default behavior of looking at the
+      // node_modules/@types folder so we had to list it explicitly.
+      // Source 1: https://www.typescriptlang.org/tsconfig#typeRoots 
+      // Source 2: https://github.com/testing-library/jest-dom/issues/546#issuecomment-1889884843
+      "node_modules/@types"
+    ],
+    // Since this TS config is used only for IDE support and not for
+    // compilation, the following directory doesn't exist. We need to specify
+    // it to prevent this error:
+    // https://stackoverflow.com/questions/42609768/typescript-error-cannot-write-file-because-it-would-overwrite-input-file
+    "outDir": ".wasp/phantom"
+  }
+}

examples/waspleau/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  server: {
+    open: true,
+  },
+})