Migrates internal Todo app to 0.12 (#1781)

waspc/examples/todoApp/.gitignore

@@ -1,3 +1,4 @@
 /.wasp/
 /.env.server
 /.env.client
+/node_modules

waspc/examples/todoApp/main.wasp

@@ -4,40 +4,36 @@ app todoApp {
   },
   title: "ToDo App",
   // head: [],
-  dependencies: [
-    ("@tailwindcss/forms", "^0.5.3"),
-    ("@tailwindcss/typography", "^0.5.7")
-  ],
   webSocket: {
-    fn: import { webSocketFn } from "@server/webSocket.js",
+    fn: import { webSocketFn } from "@src/webSocket.js",
     // autoConnect: false
   },
   auth: {
     userEntity: User,
     methods: {
       // usernameAndPassword: {
-      //  userSignupFields: import { userSignupFields } from "@server/auth/github.js",
+      //  userSignupFields: import { userSignupFields } from "@src/auth/github.js",
       // },
       google: {
-        configFn: import { config } from "@server/auth/google.js",
-        userSignupFields: import { userSignupFields } from "@server/auth/google.js"
+        configFn: import { config } from "@src/auth/google.js",
+        userSignupFields: import { userSignupFields } from "@src/auth/google.js"
       },
       // gitHub: {
-      //   // configFn: import { config } from "@server/auth/github.js",
-      //   // userSignupFields: import { getUserFields } from "@server/auth/github.js"
+      //   // configFn: import { config } from "@src/auth/github.js",
+      //   // userSignupFields: import { getUserFields } from "@src/auth/github.js"
       // },
       email: {
-        userSignupFields: import { userSignupFields } from "@server/auth/email.js",
+        userSignupFields: import { userSignupFields } from "@src/auth/email.js",
         fromField: {
           name: "ToDO App",
           email: "mihovil@ilakovac.com"
         },
         emailVerification: {
-          getEmailContentFn: import { getVerificationEmailContent } from "@server/auth/email.js",
+          getEmailContentFn: import { getVerificationEmailContent } from "@src/auth/email.js",
           clientRoute: EmailVerificationRoute,
         },
         passwordReset: {
-          getEmailContentFn: import { getPasswordResetEmailContent } from "@server/auth/email.js",
+          getEmailContentFn: import { getPasswordResetEmailContent } from "@src/auth/email.js",
           clientRoute: PasswordResetRoute
         },
       },
@@ -46,18 +42,18 @@ app todoApp {
     onAuthSucceededRedirectTo: "/profile"
   },
   server: {
-    setupFn: import setup from "@server/serverSetup.js",
-    middlewareConfigFn: import { serverMiddlewareFn } from "@server/serverSetup.js",
+    setupFn: import setup from "@src/serverSetup.js",
+    middlewareConfigFn: import { serverMiddlewareFn } from "@src/serverSetup.js",
   },
   client: {
-    rootComponent: import { App } from "@client/App.tsx",
-    setupFn: import setup from "@client/clientSetup.js"
+    rootComponent: import { App } from "@src/App.tsx",
+    setupFn: import setup from "@src/clientSetup.js"
   },
   db: {
     system: PostgreSQL,
     seeds: [
-      import { devSeedSimple } from "@server/dbSeeds.js",
-      import { prodSeed } from "@server/dbSeeds.js"
+      import { devSeedSimple } from "@src/dbSeeds.js",
+      import { prodSeed } from "@src/dbSeeds.js"
     ]
   },
   emailSender: {
@@ -85,44 +81,44 @@ psl=}
 
 route SignupRoute { path: "/signup", to: SignupPage }
 page SignupPage {
-  component: import Signup from "@client/pages/auth/Signup.tsx"
+  component: import Signup from "@src/pages/auth/Signup.tsx"
 }
 
 route LoginRoute { path: "/login", to: LoginPage }
 page LoginPage {
-  component: import Login from "@client/pages/auth/Login.tsx"
+  component: import Login from "@src/pages/auth/Login.tsx"
 }
 
 route PasswordResetRoute { path: "/password-reset", to: PasswordResetPage }
 page PasswordResetPage {
-  component: import { PasswordReset } from "@client/pages/auth/PasswordReset.tsx",
+  component: import { PasswordReset } from "@src/pages/auth/PasswordReset.tsx",
 }
 
 route EmailVerificationRoute { path: "/email-verification-", to: EmailVerificationPage }
 page EmailVerificationPage {
-  component: import { EmailVerification } from "@client/pages/auth/EmailVerification.tsx",
+  component: import { EmailVerification } from "@src/pages/auth/EmailVerification.tsx",
 }
 
 route RequestPasswordResetRoute { path: "/request-password-reset", to: RequestPasswordResetPage }
 page RequestPasswordResetPage {
-  component: import { RequestPasswordReset } from "@client/pages/auth/RequestPasswordReset.tsx",
+  component: import { RequestPasswordReset } from "@src/pages/auth/RequestPasswordReset.tsx",
 }
 
 route HomeRoute { path: "/", to: MainPage }
 page MainPage {
   authRequired: true,
-  component: import Main from "@client/pages/Main.jsx"
+  component: import Main from "@src/pages/Main.jsx"
 }
 
 route AboutRoute { path: "/about", to: AboutPage }
 page AboutPage {
-  component: import About from "@client/pages/About.jsx"
+  component: import About from "@src/pages/About.jsx"
 }
 
 route ProfileRoute { path: "/profile", to: ProfilePage }
 page ProfilePage {
   authRequired: true,
-  component: import { ProfilePage } from "@client/pages/ProfilePage.tsx"
+  component: import { ProfilePage } from "@src/pages/ProfilePage.tsx"
 }
 
 // Page for viewing a specific task
@@ -130,84 +126,84 @@ page ProfilePage {
 route TaskRoute { path: "/task/:id", to: TaskPage }
 page TaskPage {
   authRequired: true,
-  component: import Task from "@client/pages/Task.tsx"
+  component: import Task from "@src/pages/Task.tsx"
 }
 
 // --------- Queries --------- //
 
 query getTasks {
-  fn: import { getTasks } from "@server/queries.js",
+  fn: import { getTasks } from "@src/queries.js",
   entities: [Task]
 }
 
 api fooBar {
-  fn: import { fooBar } from "@server/apis.js",
-  middlewareConfigFn: import { fooBarMiddlewareFn } from "@server/apis.js",
+  fn: import { fooBar } from "@src/apis.js",
+  middlewareConfigFn: import { fooBarMiddlewareFn } from "@src/apis.js",
   entities: [Task],
   // ALL here let's our CORS work. If we did GET, we would need an apiNamespace over it with CORS.
   httpRoute: (ALL, "/foo/bar")
 }
 
 apiNamespace bar {
-  middlewareConfigFn: import { barNamespaceMiddlewareFn } from "@server/apis.js",
+  middlewareConfigFn: import { barNamespaceMiddlewareFn } from "@src/apis.js",
   path: "/bar"
 }
 
 api barBaz {
-  fn: import { barBaz } from "@server/apis.js",
+  fn: import { barBaz } from "@src/apis.js",
   auth: false,
   entities: [Task],
   httpRoute: (GET, "/bar/baz")
 }
 
 api webhookCallback {
-  fn: import { webhookCallback } from "@server/apis.js",
-  middlewareConfigFn: import { webhookCallbackMiddlewareFn } from "@server/apis.js",
+  fn: import { webhookCallback } from "@src/apis.js",
+  middlewareConfigFn: import { webhookCallbackMiddlewareFn } from "@src/apis.js",
   httpRoute: (POST, "/webhook/callback"),
   auth: false
 }
 
 query getNumTasks {
-  fn: import { getNumTasks } from "@server/queries.js",
+  fn: import { getNumTasks } from "@src/queries.js",
   entities: [Task],
   auth: false
 }
 
 query getTask {
-  fn: import { getTask } from "@server/queries.js",
+  fn: import { getTask } from "@src/queries.js",
   entities: [Task]
 }
 
 query getDate {
-  fn: import { getDate } from "@server/queries.js"
+  fn: import { getDate } from "@src/queries.js"
 }
 
 // --------- Actions --------- //
 
 action createTask {
-  fn: import { createTask } from "@server/actions.js",
+  fn: import { createTask } from "@src/actions.js",
   entities: [Task]
 }
 
 action updateTaskIsDone {
-  fn: import { updateTaskIsDone } from "@server/actions.js",
+  fn: import { updateTaskIsDone } from "@src/actions.js",
   entities: [Task]
 }
 
 action deleteCompletedTasks {
-  fn: import { deleteCompletedTasks } from "@server/actions.js",
+  fn: import { deleteCompletedTasks } from "@src/actions.js",
   entities: [Task]
 }
 
 action toggleAllTasks {
-  fn: import { toggleAllTasks } from "@server/actions.js",
+  fn: import { toggleAllTasks } from "@src/actions.js",
   entities: [Task]
 }
 
 job mySpecialJob {
   executor: PgBoss,
   perform: {
-    fn: import { foo } from "@server/jobs/bar.js",
+    fn: import { foo } from "@src/jobs/bar.js",
     executorOptions: {
       pgBoss: {=json { "retryLimit": 1 } json=}
     }
@@ -218,7 +214,7 @@ job mySpecialJob {
 job mySpecialScheduledJob {
   executor: PgBoss,
   perform: {
-    fn: import { foo } from "@server/jobs/bar.js"
+    fn: import { foo } from "@src/jobs/bar.js"
   },
   schedule: {
     cron: "0 * * * *",

waspc/examples/todoApp/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "todoApp",
+  "dependencies": {
+    "@tailwindcss/forms": "^0.5.3",
+    "@tailwindcss/typography": "^0.5.7",
+    "react": "^18.2.0",
+    "wasp": "file:.wasp/out/sdk/wasp"
+  },
+  "devDependencies": {
+    "@types/express": "^4.17.13",
+    "@types/react": "^18.0.37",
+    "prisma": "4.16.2",
+    "typescript": "^5.1.0",
+    "vite": "^4.3.9"
+  }
+}

waspc/examples/todoApp/src/App.tsx

@@ -1,10 +1,7 @@
-import { Link } from '@wasp/router'
-
-import logout from '@wasp/auth/logout'
-import useAuth from '@wasp/auth/useAuth'
-import { useQuery } from '@wasp/queries'
-import getDate from '@wasp/queries/getDate'
-import { useSocket } from '@wasp/webSocket'
+import { useSocket } from "wasp/client/webSocket";
+import { Link } from "wasp/client/router";
+import { logout, useAuth } from "wasp/client/auth";
+import { useQuery, getDate } from "wasp/client/operations";
 
 import './Main.css'
 import { getName } from './user'

waspc/examples/todoApp/src/Todo.test.tsx

@@ -1,13 +1,12 @@
+import { type AuthUser as User } from 'wasp/auth'
+import { mockServer, renderInContext } from 'wasp/client/test'
+import { getTasks, getDate } from 'wasp/client/operations'
 import { test, expect } from 'vitest'
 import { screen } from '@testing-library/react'
 
-import { mockServer, renderInContext } from '@wasp/test'
-import getTasks from '@wasp/queries/getTasks'
-import getDate from '@wasp/queries/getDate'
 import Todo, { areThereAnyTasks } from './Todo'
 import { App } from './App'
-import { getMe } from '@wasp/auth/useAuth'
-import type { User } from '@wasp/auth/types'
+import { getMe } from 'wasp/client/auth'
 
 test('areThereAnyTasks', () => {
   expect(areThereAnyTasks([])).toBe(false)

waspc/examples/todoApp/src/Todo.tsx

@@ -1,14 +1,18 @@
-import React, { useState, FormEventHandler, ChangeEventHandler } from 'react'
-import { Link } from '@wasp/router'
+import { Link } from "wasp/client/router";
+import { type Task } from "wasp/entities";
 
-import { useQuery } from '@wasp/queries'
-import { OptimisticUpdateDefinition, useAction } from '@wasp/actions'
-import getTasks from '@wasp/queries/getTasks.js'
-import createTask from '@wasp/actions/createTask.js'
-import updateTaskIsDone from '@wasp/actions/updateTaskIsDone.js'
-import deleteCompletedTasks from '@wasp/actions/deleteCompletedTasks.js'
-import toggleAllTasks from '@wasp/actions/toggleAllTasks.js'
-import { Task } from '@wasp/entities'
+import {
+  useAction,
+  type OptimisticUpdateDefinition,
+  createTask,
+  updateTaskIsDone,
+  deleteCompletedTasks,
+  toggleAllTasks,
+  useQuery,
+  getTasks,
+} from "wasp/client/operations";
+
+import React, { useState, FormEventHandler, ChangeEventHandler } from 'react'
 
 type NonEmptyArray<T> = [T, ...T[]]
 

waspc/examples/todoApp/src/actions.ts

@@ -1,12 +1,12 @@
-import HttpError from '@wasp/core/HttpError.js'
-import { getSomeResource } from './serverSetup.js'
-import { Task } from '@wasp/entities'
+import { type Task } from "wasp/entities";
+import { HttpError } from "wasp/server";
 import {
-  CreateTask,
-  DeleteCompletedTasks,
-  ToggleAllTasks,
-  UpdateTaskIsDone,
-} from '@wasp/actions/types'
+  type CreateTask,
+  type DeleteCompletedTasks,
+  type ToggleAllTasks,
+  type UpdateTaskIsDone,
+} from "wasp/server/operations";
+import { getSomeResource } from './serverSetup.js'
 
 export const createTask: CreateTask<Pick<Task, 'description'>> = async (
   task,

waspc/examples/todoApp/src/apis.ts

@@ -1,7 +1,7 @@
-import { BarBaz, FooBar, WebhookCallback } from '@wasp/apis/types'
+import { getFirstProviderUserId } from "wasp/auth";
+import { type MiddlewareConfigFn } from "wasp/server";
+import { type BarBaz, type FooBar, type WebhookCallback } from "wasp/server/api";
 import express from 'express'
-import { MiddlewareConfigFn } from '@wasp/middleware'
-import { getFirstProviderUserId } from '@wasp/auth/user.js'
 
 export const fooBar: FooBar = (_req, res, context) => {
   const username = getFirstProviderUserId(context?.user) ?? 'Anonymous'

waspc/examples/todoApp/src/auth/email.ts

@@ -1,8 +1,8 @@
 import {
-  GetPasswordResetEmailContentFn,
-  GetVerificationEmailContentFn,
-} from '@wasp/types'
-import { defineUserSignupFields } from '@wasp/auth/index.js'
+  type GetVerificationEmailContentFn,
+  type GetPasswordResetEmailContentFn,
+  defineUserSignupFields,
+} from "wasp/server/auth";
 
 export const getPasswordResetEmailContent: GetPasswordResetEmailContentFn = ({
   passwordResetLink,

waspc/examples/todoApp/src/auth/signup.ts

@@ -1,4 +1,4 @@
-import { defineUserSignupFields } from '@wasp/auth/index.js'
+import { defineUserSignupFields } from "wasp/server/auth";
 
 export const userSignupFields = defineUserSignupFields({
   address: (data) => {

waspc/examples/todoApp/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/todoApp/src/client/vite-env.d.ts

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

waspc/examples/todoApp/src/clientSetup.js

@@ -1,4 +1,4 @@
-import { sayHi } from '../shared/util'
+import { sayHi } from './util'
 
 export default function setup() {
   console.log("This was called from the client setup function")

waspc/examples/todoApp/src/dbSeeds.ts

@@ -1,7 +1,7 @@
-import { createTask } from './actions.js'
-import type { DbSeedFn } from '@wasp/dbSeed/types.js'
 import { PrismaClient } from '@prisma/client/index.js'
-import { hashPassword } from '@wasp/auth/password.js'
+import { type DbSeedFn } from "wasp/server";
+import { sanitizeAndSerializeProviderData } from 'wasp/server/auth'
+import { createTask } from './actions.js'
 
 async function createUser(prismaClient: PrismaClient, data: any) {
   const newUser = await prismaClient.user.create({
@@ -12,8 +12,8 @@ async function createUser(prismaClient: PrismaClient, data: any) {
             create: {
               providerName: 'username',
               providerUserId: data.username,
-              providerData: JSON.stringify({
-                password: hashPassword(data.password),
+              providerData: await sanitizeAndSerializeProviderData<'username'>({
+                hashedPassword: data.password,
               }),
             },
           },

waspc/examples/todoApp/src/jobs/bar.js

@@ -1,7 +1,9 @@
-import { sleep } from '@wasp/utils.js'
-
 export async function foo(args, context) {
   console.log("Inside Job bar's callback foo: ", args, context)
   await sleep(4000)
   return { hello: "world" }
 }
+
+async function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms))
+}

waspc/examples/todoApp/src/pages/About.jsx

@@ -1,6 +1,6 @@
-import React from 'react'
+import { Link } from "wasp/client/router";
 
-import { Link } from '@wasp/router'
+import React from 'react'
 
 const About = () => {
   return (

waspc/examples/todoApp/src/pages/ProfilePage.tsx

@@ -1,12 +1,8 @@
+import { type AuthUser as User } from "wasp/auth";
+import { type ServerToClientPayload, useSocket, useSocketListener } from "wasp/client/webSocket";
+import { Link, routes } from "wasp/client/router";
+import { api } from "wasp/client/api";
 import React, { useEffect, useRef, useState } from 'react'
-import { Link, routes } from '@wasp/router'
-import { User } from '@wasp/auth/types'
-import api from '@wasp/api'
-import {
-  useSocket,
-  useSocketListener,
-  ServerToClientPayload,
-} from '@wasp/webSocket'
 import { getName, getProviderData } from '../user'
 
 async function fetchCustomRoute() {

waspc/examples/todoApp/src/pages/Task.tsx

@@ -1,12 +1,16 @@
-import React from 'react'
-import { Link } from '@wasp/router'
+import { Link } from "wasp/client/router";
+import { type Task } from "wasp/entities";
 
-import { useQuery } from '@wasp/queries'
-import { OptimisticUpdateDefinition, useAction } from '@wasp/actions'
-import updateTaskIsDone from '@wasp/actions/updateTaskIsDone'
-import getTask from '@wasp/queries/getTask.js'
-import getTasks from '@wasp/queries/getTasks.js'
-import { Task } from '@wasp/entities'
+import {
+  useAction,
+  type OptimisticUpdateDefinition,
+  updateTaskIsDone,
+  useQuery,
+  getTask,
+  getTasks,
+} from "wasp/client/operations";
+
+import React from 'react'
 
 type TaskPayload = Pick<Task, 'id' | 'isDone'>
 

waspc/examples/todoApp/src/pages/auth/EmailVerification.tsx

@@ -1,6 +1,6 @@
-import { Link } from '@wasp/router'
+import { Link } from "wasp/client/router";
 
-import { VerifyEmailForm } from '@wasp/auth/forms/VerifyEmail'
+import { VerifyEmailForm } from "wasp/client/auth";
 import appearance from './appearance'
 import todoLogo from '../../todoLogo.png'
 

waspc/examples/todoApp/src/pages/auth/Login.tsx

@@ -1,6 +1,6 @@
-import { Link } from '@wasp/router'
+import { Link } from "wasp/client/router";
 
-import { LoginForm } from '@wasp/auth/forms/Login'
+import { LoginForm } from "wasp/client/auth";
 
 import appearance from './appearance'
 import todoLogo from '../../todoLogo.png'

waspc/examples/todoApp/src/pages/auth/PasswordReset.tsx

@@ -1,6 +1,6 @@
-import { Link } from '@wasp/router'
+import { Link } from "wasp/client/router";
 
-import { ResetPasswordForm } from '@wasp/auth/forms/ResetPassword'
+import { ResetPasswordForm } from "wasp/client/auth";
 import appearance from './appearance'
 import todoLogo from '../../todoLogo.png'
 

waspc/examples/todoApp/src/pages/auth/RequestPasswordReset.tsx

@@ -1,4 +1,4 @@
-import { ForgotPasswordForm } from '@wasp/auth/forms/ForgotPassword'
+import { ForgotPasswordForm } from "wasp/client/auth";
 import appearance from './appearance'
 import todoLogo from '../../todoLogo.png'
 

waspc/examples/todoApp/src/pages/auth/Signup.tsx

@@ -1,13 +1,10 @@
-import { Link } from '@wasp/router'
-
-import { SignupForm } from '@wasp/auth/forms/Signup'
-import getNumTasks from '@wasp/queries/getNumTasks'
-import { useQuery } from '@wasp/queries'
+import { Link } from "wasp/client/router";
+import { SignupForm, FormItemGroup } from "wasp/client/auth";
+import { useQuery, getNumTasks } from "wasp/client/operations";
 import { getTotalTaskCountMessage } from './helpers'
 
 import appearance from './appearance'
 import todoLogo from '../../todoLogo.png'
-import { FormItemGroup } from '@wasp/auth/forms/internal/Form'
 
 const Signup = () => {
   const { data: numTasks } = useQuery(getNumTasks)

waspc/examples/todoApp/src/queries.ts

@@ -1,11 +1,6 @@
-import HttpError from '@wasp/core/HttpError.js'
-import { Task } from '@wasp/entities'
-import {
-  GetNumTasks,
-  GetTask,
-  GetTasks,
-  GetDate,
-} from '@wasp/queries/types'
+import { type Task } from "wasp/entities";
+import { HttpError } from "wasp/server";
+import { type GetNumTasks, type GetTask, type GetTasks, type GetDate } from "wasp/server/operations";
 
 export const getTasks: GetTasks<void, Task[]> = async (_args, context) => {
   if (!context.user) {

waspc/examples/todoApp/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/todoApp/src/serverSetup.ts

@@ -1,9 +1,8 @@
-import { mySpecialJob } from '@wasp/jobs/mySpecialJob.js'
-import { sayHi } from '../shared/util.js'
-import { ServerSetupFn, Application } from '@wasp/types'
-import { MiddlewareConfigFn } from '@wasp/middleware'
+import { type Application } from "express";
+import { mySpecialJob } from "wasp/server/jobs";
+import { config, type MiddlewareConfigFn, type ServerSetupFn } from "wasp/server";
+import { sayHi } from './util.js'
 import cors from 'cors'
-import config from '@wasp/config.js'
 
 let someResource: string | undefined = undefined
 

waspc/examples/todoApp/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/todoApp/src/user.ts

@@ -1,5 +1,4 @@
-import { User } from '@wasp/auth/types'
-import { findUserIdentity, getEmail } from '@wasp/auth/user'
+import { getEmail, findUserIdentity, type AuthUser as User } from "wasp/auth";
 
 export function getName(user?: User) {
   if (!user) {

waspc/examples/todoApp/src/vite-env.d.ts

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

waspc/examples/todoApp/src/webSocket.ts

@@ -1,6 +1,6 @@
+import { getFirstProviderUserId } from "wasp/auth";
+import { type WebSocketDefinition } from "wasp/server/webSocket";
 import { v4 as uuidv4 } from 'uuid'
-import { WebSocketDefinition } from '@wasp/webSocket'
-import { getFirstProviderUserId } from '@wasp/auth/user.js'
 
 export const webSocketFn: WebSocketDefinition<
   ClientToServerEvents,

waspc/examples/todoApp/tsconfig.json

@@ -0,0 +1,34 @@
+// =============================== 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,
+    "types": [
+      // 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.
+      "@testing-library/jest-dom"
+    ],
+    // 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/todoApp/vite.config.ts

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