@wasp.sh/wasp-cli-darwin-arm64-unknown 0.20.2 → 0.21.0-rc.1

package/data/Generator/templates/Dockerfile

@@ -29,27 +29,28 @@ FROM base AS server-builder
 # `python3` fixes the issue.
 RUN apk add --no-cache python3 build-base libtool autoconf automake
 WORKDIR /app
-# Since the framwork code in /.wasp/build/server imports the user code in /src
+# Since the framwork code in /.wasp/out/server imports the user code in /src
 # using relative imports, we must mirror the same directory structure in the
 # Docker image.
 COPY src ./src
 COPY package.json .
 COPY package-lock.json .
 COPY tsconfig*.json .
-COPY server .wasp/build/server
+COPY server .wasp/out/server
 COPY sdk .wasp/out/sdk
+COPY libs .wasp/out/libs
 # Install npm packages, resulting in node_modules/.
-RUN npm install && cd .wasp/build/server && npm install
+RUN npm install && cd .wasp/out/server && npm install
 {=# usingPrisma =}
-COPY db/schema.prisma .wasp/build/db/
-RUN cd .wasp/build/server && npx prisma generate --schema='{= dbSchemaFileFromServerDir =}'
+COPY db/schema.prisma .wasp/out/db/
+RUN cd .wasp/out/server && npx prisma generate --schema='{= dbSchemaFileFromServerDir =}'
 {=/ usingPrisma =}
 # Building the server should come after Prisma generation.
-RUN cd .wasp/build/server && npm run bundle
+RUN cd .wasp/out/server && npm run bundle
 
 # Depending on `npm`'s dependency resolution, this folder may or may not exist.
 # We ensure they are created so that the COPY instruction later does not fail.
-RUN mkdir -p ./.wasp/build/server/node_modules
+RUN mkdir -p ./.wasp/out/server/node_modules
 
 
 # TODO: Use pm2?
@@ -65,12 +66,12 @@ COPY --from=server-builder /app/node_modules ./node_modules
 # Copying 'server/node_modules' because we require dotenv package to
 # load environment variables
 # TODO: replace dotenv with native Node.js environment variable loading
-COPY --from=server-builder /app/.wasp/build/server/node_modules .wasp/build/server/node_modules
-COPY --from=server-builder /app/.wasp/build/server/bundle .wasp/build/server/bundle
-COPY --from=server-builder /app/.wasp/build/server/package*.json .wasp/build/server/
-COPY db/ .wasp/build/db/
+COPY --from=server-builder /app/.wasp/out/server/node_modules .wasp/out/server/node_modules
+COPY --from=server-builder /app/.wasp/out/server/bundle .wasp/out/server/bundle
+COPY --from=server-builder /app/.wasp/out/server/package*.json .wasp/out/server/
+COPY db/ .wasp/out/db/
 EXPOSE ${PORT}
-WORKDIR /app/.wasp/build/server
+WORKDIR /app/.wasp/out/server
 ENTRYPOINT ["npm", "run", "start-production"]
 
 

package/data/Generator/templates/sdk/wasp/auth/forms/Auth.tsx

@@ -1,14 +1,13 @@
 {{={= =}=}}
-import { useState, createContext, useMemo } from 'react'
+import { useState, useMemo } from 'react'
+import { AuthContext, type ErrorMessage } from '@wasp.sh/lib-auth/browser'
 import styles from './Auth.module.css'
 import './internal/auth-styles.css'
 import { tokenObjToCSSVars } from "./internal/util"
-import { CSSProperties } from "react"
 
 import {
   type State,
   type CustomizationOptions,
-  type ErrorMessage,
   type AdditionalSignupFields,
 } from './types'
 import { LoginSignupForm } from './internal/common/LoginSignupForm'
@@ -24,14 +23,6 @@ const logoStyle = {
 }
 
 
-// PRIVATE API
-export const AuthContext = createContext({
-  isLoading: false,
-  setIsLoading: (isLoading: boolean) => {},
-  setErrorMessage: (errorMessage: ErrorMessage | null) => {},
-  setSuccessMessage: (successMessage: string | null) => {},
-})
-
 function Auth ({ state, appearance, logo, socialLayout = 'horizontal', additionalSignupFields }: {
     state: State;
 } & CustomizationOptions & {

package/data/Generator/templates/sdk/wasp/auth/forms/internal/common/LoginSignupForm.tsx

@@ -1,12 +1,11 @@
 {{={= =}=}}
-import { useContext } from 'react'
 import { useForm, UseFormReturn } from 'react-hook-form'
 import styles from './LoginSignupForm.module.css'
 import '../auth-styles.css'
 import { config } from 'wasp/client'
 import { clsx } from '../util'
 
-import { AuthContext } from '../../Auth'
+import { useAuthContext } from '@wasp.sh/lib-auth/browser'
 import {
   Form,
   FormInput,
@@ -27,7 +26,7 @@ import * as SocialIcons from '../social/SocialIcons'
 import { SocialButton } from '../social/SocialButton'
 {=/ isSocialAuthEnabled =}
 {=# isAnyPasswordBasedAuthEnabled =}
-import { useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router'
 {=/ isAnyPasswordBasedAuthEnabled =}
 {=# enabledProviders.isUsernameAndPasswordAuthEnabled =}
 import { useUsernameAndPassword } from '../usernameAndPassword/useUsernameAndPassword'
@@ -55,6 +54,9 @@ const keycloakSignInUrl = `${config.apiUrl}{= keycloakSignInPath =}`
 {=# enabledProviders.isGitHubAuthEnabled =}
 const gitHubSignInUrl = `${config.apiUrl}{= gitHubSignInPath =}`
 {=/ enabledProviders.isGitHubAuthEnabled =}
+{=# enabledProviders.isMicrosoftAuthEnabled =}
+const microsoftSignInUrl = `${config.apiUrl}{= microsoftSignInPath =}`
+{=/ enabledProviders.isMicrosoftAuthEnabled =}
 
 {=!
 // Since we allow users to add additional fields to the signup form, we don't
@@ -81,7 +83,7 @@ export const LoginSignupForm = ({
     setErrorMessage,
     setSuccessMessage,
     setIsLoading,
-  } = useContext(AuthContext)
+  } = useAuthContext();
   const isLogin = state === 'login'
   const cta = isLogin ? 'Log in' : 'Sign up';
   {=# isAnyPasswordBasedAuthEnabled =}
@@ -151,6 +153,10 @@ export const LoginSignupForm = ({
             {=# enabledProviders.isGitHubAuthEnabled =}
               <SocialButton href={gitHubSignInUrl}><SocialIcons.GitHub/></SocialButton>
             {=/ enabledProviders.isGitHubAuthEnabled =}
+
+            {=# enabledProviders.isMicrosoftAuthEnabled =}
+              <SocialButton href={microsoftSignInUrl}><SocialIcons.Microsoft/></SocialButton>
+            {=/ enabledProviders.isMicrosoftAuthEnabled =}
           </div>
         </div>
       {=/ isSocialAuthEnabled =}

package/data/Generator/templates/sdk/wasp/auth/forms/internal/email/ForgotPasswordForm.tsx

@@ -1,13 +1,14 @@
-import { useContext } from 'react'
 import { useForm } from 'react-hook-form'
+import { useAuthContext } from '@wasp.sh/lib-auth/browser'
+
 import { requestPasswordReset } from '../../../email/actions/passwordReset.js'
 import { Form, FormItemGroup, FormLabel, FormInput, SubmitButton, FormError } from '../Form'
-import { AuthContext } from '../../Auth'
+
 
 // PRIVATE API
 export const ForgotPasswordForm = () => {
   const { register, handleSubmit, reset, formState: { errors } } = useForm<{ email: string }>()
-  const { isLoading, setErrorMessage, setSuccessMessage, setIsLoading } = useContext(AuthContext)
+  const { isLoading, setErrorMessage, setSuccessMessage, setIsLoading } = useAuthContext()
 
   const onSubmit = async (data) => {
     setIsLoading(true)

package/data/Generator/templates/sdk/wasp/auth/forms/internal/email/ResetPasswordForm.tsx

@@ -1,14 +1,14 @@
-import { useContext } from 'react'
 import { useForm } from 'react-hook-form'
+import { useLocation } from 'react-router'
+import { useAuthContext } from '@wasp.sh/lib-auth/browser'
+
 import { resetPassword } from '../../../email/actions/passwordReset.js'
-import { useLocation } from 'react-router-dom'
 import { Form, FormItemGroup, FormLabel, FormInput, SubmitButton, FormError } from '../Form'
-import { AuthContext } from '../../Auth'
 
 // PRIVATE API
 export const ResetPasswordForm = () => {
   const { register, handleSubmit, reset, formState: { errors } } = useForm<{ password: string; passwordConfirmation: string }>()
-  const { isLoading, setErrorMessage, setSuccessMessage, setIsLoading } = useContext(AuthContext)
+  const { isLoading, setErrorMessage, setSuccessMessage, setIsLoading } = useAuthContext()
   const location = useLocation()
   const token = new URLSearchParams(location.search).get('token')
   const onSubmit = async (data) => {

package/data/Generator/templates/sdk/wasp/auth/forms/internal/email/VerifyEmailForm.tsx

@@ -1,13 +1,12 @@
-import { useContext } from 'react'
-import { useLocation } from 'react-router-dom'
+import { useLocation } from 'react-router'
+import { useAuthContext } from '@wasp.sh/lib-auth/browser'
 import { verifyEmail } from '../../../email/actions/verifyEmail.js'
 import { Message } from '../Message'
-import { AuthContext } from '../../Auth'
 import { useEffectOnce } from '../../../../client/hooks.js'
 
 // PRIVATE API
 export const VerifyEmailForm = () => {
-  const { isLoading, setErrorMessage, setSuccessMessage, setIsLoading } = useContext(AuthContext)
+  const { isLoading, setErrorMessage, setSuccessMessage, setIsLoading } = useAuthContext()
   const location = useLocation()
   const token = new URLSearchParams(location.search).get('token')
 

package/data/Generator/templates/sdk/wasp/auth/forms/internal/social/SocialIcons.tsx

@@ -72,3 +72,14 @@ export const Slack = () => (
     <path d="M13 10C13 11.1046 13.8954 12 15 12C16.1046 12 17 11.1046 17 10V5C17 3.89543 16.1046 3 15 3C13.8954 3 13 3.89543 13 5V10ZM5 8C3.89543 8 3 8.89543 3 10C3 11.1046 3.89543 12 5 12H10C11.1046 12 12 11.1046 12 10C12 8.89543 11.1046 8 10 8H5ZM15 13C13.8954 13 13 13.8954 13 15C13 16.1046 13.8954 17 15 17H20C21.1046 17 22 16.1046 22 15C22 13.8954 21.1046 13 20 13H15ZM10 22C8.89543 22 8 21.1046 8 20L8 15C8 13.8954 8.89543 13 10 13C11.1046 13 12 13.8954 12 15V20C12 21.1046 11.1046 22 10 22ZM8 5C8 3.89543 8.89543 3 10 3C11.1046 3 12 3.89543 12 5V7H10C8.89543 7 8 6.10457 8 5ZM3 15C3 16.1046 3.89543 17 5 17C6.10457 17 7 16.1046 7 15V13H5C3.89543 13 3 13.8954 3 15ZM17 20C17 21.1046 16.1046 22 15 22C13.8954 22 13 21.1046 13 20V18H15C16.1046 18 17 18.8954 17 20ZM22 10C22 8.89543 21.1046 8 20 8C18.8954 8 18 8.89543 18 10V12H20C21.1046 12 22 11.1046 22 10Z" />
   </svg>
 )
+
+export const Microsoft = () => (
+  <svg
+    className={styles.icon}
+    aria-hidden="true"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+  >
+    <path d="M2 3h9v9H2zm9 19H2v-9h9zM21 3v9h-9V3zm0 19h-9v-9h9z" />
+  </svg>
+)

package/data/Generator/templates/sdk/wasp/auth/forms/types.ts

@@ -46,12 +46,6 @@ export type CustomizationOptions = {
   }
 }
 
-// PRIVATE API
-export type ErrorMessage = {
-  title: string
-  description?: string
-}
-
 // PRIVATE API
 export type FormState = {
   isLoading: boolean

package/data/Generator/templates/sdk/wasp/auth/jwt.ts

@@ -1,22 +1,15 @@
-import * as jwt from 'oslo/jwt'
-import { config } from 'wasp/server'
+import { createJWTHelpers } from "@wasp.sh/lib-auth/node";
 
-const JWT_SECRET = new TextEncoder().encode(config.auth.jwtSecret)
-const JWT_ALGORITHM = 'HS256'
+import { config } from "wasp/server";
 
-// PRIVATE API
-export function createJWT(
-  data: Parameters<typeof jwt.createJWT>[2],
-  options: Parameters<typeof jwt.createJWT>[3],
-): Promise<string> {
-  return jwt.createJWT(JWT_ALGORITHM, JWT_SECRET, data, options)
-}
+const JWT_SECRET = new TextEncoder().encode(config.auth.jwtSecret);
+const JWT_ALGORITHM = "HS256";
 
 // PRIVATE API
-export async function validateJWT<Payload>(token: string): Promise<Payload> {
-  const { payload } = await jwt.validateJWT(JWT_ALGORITHM, JWT_SECRET, token)
-  return payload as Payload
-}
+export const { createJWT, validateJWT } = createJWTHelpers(
+  JWT_SECRET,
+  JWT_ALGORITHM,
+);
 
 // PRIVATE API
-export { TimeSpan } from 'oslo'
+export { TimeSpan } from "@wasp.sh/lib-auth/node";

package/data/Generator/templates/sdk/wasp/auth/password.ts

@@ -1,36 +1 @@
-import { hash, verify, Version, type Options } from "@node-rs/argon2";
-
-// The options are the same as the ones used in the oslo/password library
-const hashingOptions: Options = {
-  memoryCost: 19456,
-  timeCost: 2,
-  outputLen: 32,
-  parallelism: 1,
-  version: Version.V0x13,
-};
-
-// PRIVATE API
-export async function hashPassword(password: string): Promise<string> {
-  return hash(normalizePassword(password), hashingOptions);
-}
-
-// PRIVATE API
-export async function verifyPassword(
-  hashedPassword: string,
-  password: string
-): Promise<void> {
-  const validPassword = await verify(
-    hashedPassword,
-    normalizePassword(password),
-    hashingOptions
-  );
-  if (!validPassword) {
-    throw new Error("Invalid password");
-  }
-}
-
-// We are normalising the password to ensure that the password is always hashed in the same way
-// We have the same normalising process as oslo/password did in the past
-function normalizePassword(password: string): string {
-  return password.normalize("NFKC");
-}
+export { hashPassword, verifyPassword } from "@wasp.sh/lib-auth/node";

package/data/Generator/templates/sdk/wasp/auth/utils.ts

@@ -45,6 +45,7 @@ export type PossibleProviderData = {
   google: OAuthProviderData;
   keycloak: OAuthProviderData;
   github: OAuthProviderData;
+  microsoft: OAuthProviderData;
 }
 
 // PUBLIC API
@@ -97,6 +98,7 @@ export function normalizeProviderUserId(providerName: ProviderName, providerUser
     case 'discord':
     case 'keycloak':
     case 'slack':
+    case 'microsoft':
       return providerUserId;
     /*
       Why the default case?

package/data/Generator/templates/{react-app/src → sdk/wasp/client/app}/components/DefaultRootErrorBoundary.tsx

@@ -1,4 +1,4 @@
-import { useRouteError } from 'react-router-dom'
+import { useRouteError } from 'react-router'
 
 import { FullPageWrapper } from './FullPageWrapper'
 

package/data/Generator/templates/sdk/wasp/client/app/components/WaspApp.tsx

@@ -0,0 +1,45 @@
+{{={= =}=}}
+import * as React from 'react'
+import { QueryClientProvider } from '@tanstack/react-query'
+
+import { getRouter } from '../router/router'
+import { queryClientInitialized } from '../../operations/index'
+
+{=# areWebSocketsUsed =}
+import { WebSocketProvider } from '../../webSocket/WebSocketProvider'
+{=/ areWebSocketsUsed =}
+
+export type WaspAppProps = {
+  rootElement?: React.ReactNode;
+  routesMapping: Record<string, React.ComponentType>;
+}
+
+export function WaspApp({ rootElement, routesMapping }: Required<WaspAppProps>) {
+  const [queryClient, setQueryClient] = React.useState<any>(null)
+
+  React.useEffect(() => {
+    queryClientInitialized.then(setQueryClient)
+  }, [])
+
+  if (!queryClient) {
+    return null
+  }
+
+  const router = getRouter({
+    rootElement,
+    routesMapping,
+  })
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {=# areWebSocketsUsed =}
+      <WebSocketProvider>
+        {router}
+      </WebSocketProvider>
+      {=/ areWebSocketsUsed =}
+      {=^ areWebSocketsUsed =}
+      {router}
+      {=/ areWebSocketsUsed =}
+    </QueryClientProvider>
+  )
+}

package/data/Generator/templates/sdk/wasp/client/app/index.tsx

@@ -0,0 +1,26 @@
+{{={= =}=}}
+import { Outlet } from 'react-router'
+import { initializeQueryClient } from '../operations'
+import { WaspApp, type WaspAppProps } from './components/WaspApp'
+
+const DefaultRootComponent = () => <Outlet />
+
+let isAppInitialized = false
+
+// PRIVATE API (web-app)
+export function getWaspApp({
+  rootElement = <DefaultRootComponent />,
+  routesMapping,
+}: WaspAppProps): React.ReactNode {
+  if (!isAppInitialized) {
+    initializeQueryClient()
+    isAppInitialized = true
+  }
+
+  return <WaspApp rootElement={rootElement} routesMapping={routesMapping} />
+}
+
+{=# isAuthEnabled =}
+// PRIVATE API (web-app)
+export { createAuthRequiredPage } from './pages/createAuthRequiredPage'
+{=/ isAuthEnabled =}

package/data/Generator/templates/{react-app/src/auth → sdk/wasp/client/app}/pages/OAuthCallback.tsx

@@ -1,13 +1,13 @@
 {{={= =}=}}
 import { useState } from "react";
 import { type AxiosResponse } from "axios";
-import { Navigate, useLocation } from 'react-router-dom'
-import { useAuth } from 'wasp/client/auth'
-import { api } from 'wasp/client/api'
-import { initSession } from 'wasp/auth/helpers/user'
-import { useEffectOnce } from 'wasp/client/hooks'
-import { MessageLoading, MessageError } from "../../components/Message";
-import { FullPageWrapper } from "../../components/FullPageWrapper";
+import { Navigate, useLocation } from 'react-router'
+import { useAuth } from "../../auth";
+import { api } from "../../../api";
+import { initSession } from "../../../auth/helpers/user";
+import { useEffectOnce } from "../../hooks";
+import { MessageLoading, MessageError } from "../components/Message";
+import { FullPageWrapper } from "../components/FullPageWrapper";
 
 const oAuthCallbackWrapperClassName = "wasp-oauth-callback-wrapper";
 
@@ -89,5 +89,6 @@ async function exchangeOAuthCodeForToken(data: {
 function isResponseWithSessionId(
   response: AxiosResponse<unknown>
 ): response is AxiosResponse<{ sessionId: string }> {
-  return response.data && typeof (response.data as any).sessionId === 'string'
+  const data = response.data as any;
+  return !!data && typeof data.sessionId === 'string'
 }

package/data/Generator/templates/{react-app/src/auth → sdk/wasp/client/app}/pages/createAuthRequiredPage.jsx

@@ -1,14 +1,14 @@
 {{={= =}=}}
-import React from 'react'
+import * as React from 'react'
 
-import { Navigate } from 'react-router-dom'
-import { useAuth } from 'wasp/client/auth'
+import { Navigate } from 'react-router'
+import { useAuth } from '../../auth'
 
-import { Loader } from '../../components/Loader'
-import { MessageError } from '../../components/Message'
-import { FullPageWrapper } from '../../components/FullPageWrapper'
+import { Loader } from '../components/Loader'
+import { MessageError } from '../components/Message'
+import { FullPageWrapper } from '../components/FullPageWrapper'
 
-const createAuthRequiredPage = (Page) => {
+export const createAuthRequiredPage = (Page) => {
   return (props) => {
     const { data: user, status, error } = useAuth()
 
@@ -36,5 +36,3 @@ const createAuthRequiredPage = (Page) => {
     }
   }
 }
-
-export default createAuthRequiredPage

package/data/Generator/templates/sdk/wasp/client/app/router/router.tsx

@@ -0,0 +1,47 @@
+{{={= =}=}}
+import * as React from 'react'
+import { createBrowserRouter, RouterProvider } from 'react-router'
+
+{=# isExternalAuthEnabled =}
+import { OAuthCallbackPage } from "../pages/OAuthCallback"
+{=/ isExternalAuthEnabled =}
+
+import { DefaultRootErrorBoundary } from '../components/DefaultRootErrorBoundary'
+
+import { routes } from '../../router/index'
+
+export function getRouter({
+  routesMapping,
+  rootElement,
+}: {
+  routesMapping: Record<string, React.ComponentType>,
+  rootElement: React.ReactNode,
+}) {
+  const waspDefinedRoutes = [
+    {=# isExternalAuthEnabled =}
+    {
+      path: "{= oAuthCallbackPath =}",
+      Component: OAuthCallbackPage,
+    },
+    {=/ isExternalAuthEnabled =}
+  ]
+  const userDefinedRoutes = Object.entries(routes).map(([routeKey, route]) => {
+    return {
+      path: route.to,
+      Component: routesMapping[routeKey],
+    }
+  })
+
+  const browserRouter = createBrowserRouter([{
+    path: '/',
+    element: rootElement,
+    ErrorBoundary: DefaultRootErrorBoundary,
+    children: [
+      ...waspDefinedRoutes,
+      ...userDefinedRoutes,
+    ],
+  }], {
+    basename: '{= baseDir =}',
+  })
+  return <RouterProvider router={browserRouter} />;
+}

package/data/Generator/templates/sdk/wasp/client/auth/index.ts

@@ -21,6 +21,9 @@ export * from './keycloak'
 {=# isGitHubAuthEnabled =}
 export * from './github'
 {=/ isGitHubAuthEnabled =}
+{=# isMicrosoftAuthEnabled =}
+export * from './microsoft'
+{=/ isMicrosoftAuthEnabled =}
 export {
   default as useAuth,
   getMe,

package/data/Generator/templates/sdk/wasp/client/auth/microsoft.ts

@@ -0,0 +1,2 @@
+// PUBLIC API
+export { signInUrl as microsoftSignInUrl } from '../../auth/helpers/Microsoft'

package/data/Generator/templates/sdk/wasp/client/auth/ui.ts

@@ -23,6 +23,9 @@ export { SignInButton as KeycloakSignInButton } from '../../auth/helpers/Keycloa
 {=# isGitHubAuthEnabled =}
 export { SignInButton as GitHubSignInButton } from '../../auth/helpers/GitHub'
 {=/ isGitHubAuthEnabled =}
+{=# isMicrosoftAuthEnabled =}
+export { SignInButton as MicrosoftSignInButton } from '../../auth/helpers/Microsoft'
+{=/ isMicrosoftAuthEnabled =}
 export {
   FormError,
   FormInput,

package/data/Generator/templates/sdk/wasp/client/router/Link.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react'
-import { Link as RouterLink } from 'react-router-dom'
+import { Link as RouterLink } from 'react-router'
 import { interpolatePath } from './linkHelpers'
 import { type Routes } from './index'
 
@@ -16,6 +16,6 @@ export function Link(
 ): React.JSX.Element {
   const toPropWithParams = useMemo(() => {
     return interpolatePath(to, params, search, hash)
-  }, [to, params])
+  }, [to, params, search, hash])
   return <RouterLink to={toPropWithParams} {...restOfProps} />
 }

package/data/Generator/templates/sdk/wasp/client/test/vitest/helpers.tsx

@@ -1,7 +1,7 @@
 import { ReactElement, ReactNode } from 'react'
-import { rest, type ResponseResolver, type RestContext } from 'msw'
+import { http, type HttpResponseResolver, type RequestHandler } from 'msw'
 import { setupServer, type SetupServer } from 'msw/node'
-import { BrowserRouter as Router } from 'react-router-dom'
+import { BrowserRouter as Router } from 'react-router'
 import { render, RenderResult, cleanup } from '@testing-library/react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { beforeAll, afterEach, afterAll } from 'vitest'
@@ -57,13 +57,11 @@ export function mockServer(): {
 
   const mockQuery: MockQuery = (query, mockData) => {
     const route = (query as unknown as { route: Route }).route
-    mockRoute(server, route, (_req, res, ctx) =>
-      res(ctx.json(serialize(mockData)))
-    )
+    mockRoute(server, route, () => Response.json(serialize(mockData)))
   }
 
   const mockApi: MockApi = (route, mockData) => {
-    mockRoute(server, route, (_req, res, ctx) => res(ctx.json(mockData)))
+    mockRoute(server, route, () => Response.json(mockData))
   }
 
   return { server, mockQuery, mockApi }
@@ -72,7 +70,7 @@ export function mockServer(): {
 function mockRoute(
   server: SetupServer,
   route: Route,
-  responseHandler: ResponseResolver<any, RestContext, any>
+  responseHandler: HttpResponseResolver
 ) {
   if (!Object.values(HttpMethod).includes(route.method)) {
     throw new Error(
@@ -84,11 +82,11 @@ function mockRoute(
 
   const url = `${config.apiUrl}${route.path}`
 
-  const handlers: Record<HttpMethod, Parameters<typeof server.use>[0]> = {
-    [HttpMethod.Get]: rest.get(url, responseHandler),
-    [HttpMethod.Post]: rest.post(url, responseHandler),
-    [HttpMethod.Put]: rest.put(url, responseHandler),
-    [HttpMethod.Delete]: rest.delete(url, responseHandler),
+  const handlers: Record<HttpMethod, RequestHandler> = {
+    [HttpMethod.Get]: http.get(url, responseHandler),
+    [HttpMethod.Post]: http.post(url, responseHandler),
+    [HttpMethod.Put]: http.put(url, responseHandler),
+    [HttpMethod.Delete]: http.delete(url, responseHandler),
   }
 
   server.use(handlers[route.method])

package/data/Generator/templates/sdk/wasp/client/vite/index.ts

@@ -0,0 +1 @@
+export { type WaspPluginOptions, wasp } from "./plugins/wasp.js";

package/data/Generator/templates/sdk/wasp/client/vite/plugins/detectServerImports.ts

@@ -0,0 +1,50 @@
+{{={= =}=}}
+import { type Plugin } from 'vite'
+import path from 'path'
+
+export function detectServerImports(): Plugin {
+  let parsePathToUserCode!: ParsePathToUserCodeFn
+  return {
+    name: 'wasp:detect-server-imports',
+    enforce: 'pre',
+    configResolved(config) {
+      parsePathToUserCode = createPathToUserCodeParser(config.root)
+    },
+    resolveId(source, importer) {
+      if (!importer) {
+        return
+      }
+
+      const pathToUserCode = parsePathToUserCode(importer)
+      if (!pathToUserCode) {
+        return
+      }
+
+      if (isServerImport(source)) {
+        throw new Error(
+          `Server code cannot be imported in the client code. Import from "${source}" in "${pathToUserCode}" is not allowed.`
+        )
+      }
+    },
+  }
+}
+
+function isServerImport(moduleName: string): boolean {
+  return moduleName.startsWith('wasp/server')
+}
+
+type RelativePathToUserCode = string & { _brand: 'relativePathToUserCode' }
+
+type ParsePathToUserCodeFn = (importerPath: string) => RelativePathToUserCode | null;
+
+function createPathToUserCodeParser(waspProjectDirPath: string): ParsePathToUserCodeFn {
+  return (importerPath: string): RelativePathToUserCode | null => {
+    const importerPathRelativeToWaspProjectDir = path.relative(
+      waspProjectDirPath,
+      importerPath
+    )
+    return importerPathRelativeToWaspProjectDir.startsWith('{= srcDirInWaspProjectDir =}')
+      ? (importerPathRelativeToWaspProjectDir as RelativePathToUserCode)
+      : null
+  }
+}