Migrates CRUD testing example app (#1904)

waspc/examples/crud-testing/.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
+/.env.client

waspc/examples/crud-testing/.waspignore

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

waspc/examples/crud-testing/main.wasp

@@ -10,41 +10,38 @@ app crudTesting {
     userEntity: User,
     methods: {
       usernameAndPassword: {
-        userSignupFields: import { userSignupFields } from "@server/auth.js",
+        userSignupFields: import { userSignupFields } from "@src/auth.js",
       },
     },
     onAuthFailedRedirectTo: "/login",
   },
-  dependencies: [
-    ("zod", "^3.22.2")
-  ],
   db: {
     system: PostgreSQL,
     seeds: [
-      import { migrateAuth } from "@server/seeds/migrateAuth.js"
+      import { migrateAuth } from "@src/seeds/migrateAuth.js"
     ]
   }
 }
 
 route RootRoute { path: "/", to: MainPage }
 page MainPage {
-  component: import Main from "@client/MainPage.tsx",
+  component: import Main from "@src/MainPage.tsx",
   authRequired: true,
 }
 
 route LoginRoute { path: "/login", to: LoginPage }
 page LoginPage {
-  component: import { LoginPage } from "@client/LoginPage.tsx",
+  component: import { LoginPage } from "@src/LoginPage.tsx",
 }
 
 route SignupRoute { path: "/signup", to: SignupPage }
 page SignupPage {
-  component: import { SignupPage } from "@client/SignupPage.tsx",
+  component: import { SignupPage } from "@src/SignupPage.tsx",
 }
 
 route DetailRoute { path: "/:id/:something?", to: DetailPage }
 page DetailPage {
-  component: import Main from "@client/DetailPage.tsx",
+  component: import Main from "@src/DetailPage.tsx",
   authRequired: true,
 }
 
@@ -68,10 +65,10 @@ crud tasks {
   operations: {
     get: {},
     getAll: {
-      overrideFn: import { getAllTasks } from "@server/tasks.js",
+      overrideFn: import { getAllTasks } from "@src/tasks.js",
     },
     create: {
-      overrideFn: import { createTask } from "@server/tasks.js",
+      overrideFn: import { createTask } from "@src/tasks.js",
     },
     update: {},
     delete: {},
@@ -84,11 +81,11 @@ job simplePrintJob {
     cron: "* * * * *",
   },
   perform: {
-    fn: import { simplePrint } from "@server/jobs.js",
+    fn: import { simplePrint } from "@src/jobs.js",
   },
   entities: [Task]
 }
 
 action customSignup {
-  fn: import { signup } from "@server/auth.js",
+  fn: import { signup } from "@src/auth.js",
 }

waspc/examples/crud-testing/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "crudTesting",
+  "dependencies": {
+    "zod": "^3.22.2",
+    "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"
+  }
+}

waspc/examples/crud-testing/src/CustomSignupPage.tsx

@@ -1,13 +1,9 @@
+import { FormError, FormInput, FormItemGroup, FormLabel } from "wasp/client/auth";
+import { customSignup as customSubmit } from "wasp/client/operations";
 import { useState } from 'react'
-import {
-  FormError,
-  FormInput,
-  FormItemGroup,
-  FormLabel,
-  SubmitButton,
-} from '@wasp/auth/forms/internal/Form'
+// Missing SubmitButton export
+// import { SubmitButton } from 'wasp/client/auth'
 import { useForm } from 'react-hook-form'
-import customSubmit from '@wasp/actions/customSignup'
 
 export const SignupPage = () => {
   const {
@@ -77,7 +73,7 @@ export const SignupPage = () => {
           <FormInput {...register('address')} />
           <FormError>{errors.address?.message}</FormError>
         </FormItemGroup>
-        <SubmitButton type="submit">Signup</SubmitButton>
+        <button type="submit">Signup</button>
       </form>
     </>
   )

waspc/examples/crud-testing/src/DetailPage.tsx

@@ -1,10 +1,9 @@
 import "./Main.css";
-
 import React from "react";
 import { useParams } from "react-router-dom";
-import { Link } from "@wasp/router";
+import { Link } from "wasp/client/router";
 
-import { tasks as tasksCrud } from "@wasp/crud/tasks";
+import { tasks as tasksCrud } from "wasp/client/crud";
 
 const DetailPage = () => {
   const { id } = useParams<{ id: string }>();

waspc/examples/crud-testing/src/LoginPage.tsx

@@ -1,5 +1,5 @@
-import { LoginForm } from "@wasp/auth/forms/Login";
-import { Link } from "@wasp/router";
+import { Link } from "wasp/client/router";
+import { LoginForm } from "wasp/client/auth";
 
 export const LoginPage = () => {
   return (

waspc/examples/crud-testing/src/MainPage.tsx

@@ -1,18 +1,15 @@
+import { Link, routes } from "wasp/client/router";
+import { logout } from "wasp/client/auth";
+import { getUsername } from "wasp/auth";
+
 import './Main.css'
 
 import React, { useState } from 'react'
-import { Link, routes } from '@wasp/router'
-import logout from '@wasp/auth/logout'
-import { getUsername } from '@wasp/auth/user'
-
-import { tasks as tasksCrud } from '@wasp/crud/tasks'
-import { User } from '@wasp/entities'
+import { tasks as tasksCrud } from 'wasp/client/crud'
 
 const MainPage = () => {
   const { data: tasks, isLoading } = tasksCrud.getAll.useQuery()
 
-  type Task = NonNullable<typeof tasks>[number]
-
   const createTask = tasksCrud.create.useAction()
   const deleteTask = tasksCrud.delete.useAction()
   const updateTask = tasksCrud.update.useAction()

waspc/examples/crud-testing/src/SignupPage.tsx

@@ -1,10 +1,4 @@
-import { SignupForm } from '@wasp/auth/forms/Signup'
-import {
-  FormError,
-  FormInput,
-  FormItemGroup,
-  FormLabel,
-} from '@wasp/auth/forms/internal/Form'
+import { SignupForm } from "wasp/client/auth";
 
 export const SignupPage = () => {
   return (

waspc/examples/crud-testing/src/auth.ts

@@ -1,13 +1,14 @@
-import * as z from 'zod'
-import { defineUserSignupFields } from '@wasp/auth/index.js'
 import {
+  defineUserSignupFields,
   ensurePasswordIsPresent,
   ensureValidPassword,
   ensureValidUsername,
-} from '@wasp/auth/validation.js'
-import prisma from '@wasp/dbClient.js'
-import { CustomSignup } from '@wasp/actions/types'
-import { sanitizeAndSerializeProviderData } from '@wasp/auth/utils.js'
+  sanitizeAndSerializeProviderData,
+} from "wasp/server/auth";
+
+import { type CustomSignup } from "wasp/server/operations";
+import { prisma } from "wasp/server";
+import * as z from 'zod'
 
 export const userSignupFields = defineUserSignupFields({
   address: (data) => {

waspc/examples/crud-testing/src/client/tsconfig.json

@@ -1,55 +0,0 @@
-// =============================== 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,
-    // Wasp needs the following settings enable IDE support in your 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/*"
-      ]
-    },
-    // Correctly resolve types: https://www.typescriptlang.org/tsconfig#typeRoots
-    "typeRoots": [
-      "../../.wasp/out/web-app/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": "phantom"
-  },
-  "exclude": [
-    "phantom"
-  ],
-}

waspc/examples/crud-testing/src/client/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="../../.wasp/out/web-app/node_modules/vite/client" />

waspc/examples/crud-testing/src/jobs.ts

@@ -1,5 +1,5 @@
-import { SimplePrintJob } from "@wasp/jobs/simplePrintJob";
-import { Task } from "@wasp/entities";
+import { SimplePrintJob } from "wasp/server/jobs";
+import { type Task } from "wasp/entities";
 
 export const simplePrint: SimplePrintJob<
   {

waspc/examples/crud-testing/src/seeds/migrateAuth.ts

@@ -1,5 +1,5 @@
-import { sanitizeAndSerializeProviderData } from '@wasp/auth/utils'
-import prisma from '@wasp/dbClient.js'
+import { sanitizeAndSerializeProviderData } from "wasp/server/auth";
+import { prisma } from "wasp/server";
 
 export async function migrateAuth(db: typeof prisma) {
   // 0. Update to the latest version of Wasp and run `wasp db migrate-dev`

waspc/examples/crud-testing/src/server/tsconfig.json

@@ -1,48 +0,0 @@
-// =============================== 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": {
-    // Allows default imports.
-    "esModuleInterop": true,
-    "allowJs": true,
-    "strict": true,
-    // Wasp needs the following settings enable IDE support in your 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/*"
-      ]
-    },
-    // Correctly resolve types: https://www.typescriptlang.org/tsconfig#typeRoots
-    "typeRoots": [
-      "../../.wasp/out/server/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": "phantom",
-  },
-  "exclude": [
-    "phantom"
-  ],
-}

waspc/examples/crud-testing/src/shared/tsconfig.json

@@ -1,28 +0,0 @@
-{
-  "compilerOptions": {
-    // Enable default imports in TypeScript.
-    "esModuleInterop": true,
-    "allowJs": true,
-    // 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/*"
-      ]
-    },
-    // Correctly resolve types: https://www.typescriptlang.org/tsconfig#typeRoots
-    "typeRoots": ["../../.wasp/out/server/node_modules/@types"]
-  }
-}

waspc/examples/crud-testing/src/tasks.ts

@@ -1,6 +1,6 @@
-import HttpError from '@wasp/core/HttpError.js'
-import type { GetQuery, GetAllQuery, CreateAction } from '@wasp/crud/tasks'
-import { Task } from '@wasp/entities'
+import { type Task } from "wasp/entities";
+import { HttpError } from "wasp/server";
+import { tasks } from 'wasp/server/crud'
 
 export const getTask = (async (args, context) => {
   return context.entities.Task.findUnique({
@@ -15,7 +15,7 @@ export const getTask = (async (args, context) => {
       },
     },
   })
-}) satisfies GetQuery<{ id: Task['id'] }, {}>
+}) satisfies tasks.GetQuery<{ id: Task['id'] }, {}>
 
 export const getAllTasks = (async (args, context) => {
   return context.entities.Task.findMany({
@@ -34,7 +34,7 @@ export const getAllTasks = (async (args, context) => {
       },
     },
   })
-}) satisfies GetAllQuery<{}, {}>
+}) satisfies tasks.GetAllQuery<{}, {}>
 
 export const createTask = (async (args, context) => {
   if (!context.user) {
@@ -53,4 +53,4 @@ export const createTask = (async (args, context) => {
       },
     },
   })
-}) satisfies CreateAction<{ title: Task['title'] }, Task>
+}) satisfies tasks.CreateAction<{ title: Task['title'] }, Task>

waspc/examples/crud-testing/src/vite-env.d.ts

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

waspc/examples/crud-testing/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"
+  }
+}

waspc/examples/crud-testing/vite.config.ts

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