@wasp.sh/wasp-cli-darwin-arm64-unknown 0.21.1 → 0.22.0-rc2

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

@@ -1,19 +1,17 @@
-import { type Plugin } from 'vite'
+import { type Plugin } from "vite";
 
-import { loadEnvVars } from './envFile.js'
 import {
+  formatZodEnvError,
   getValidatedEnvOrError,
-  formatZodEnvErrors,
-} from '../../../env/validation.js'
-import { clientEnvSchema } from '../../env/schema.js'
-import { getColorizedConsoleFormatString } from '../../../universal/ansiColors.js'
-
-const redColorFormatString = getColorizedConsoleFormatString('red');
+} from "../../../env/validation.js";
+import { colorize } from "../../../universal/ansiColors.js";
+import { getClientEnvSchema } from "../../env/schema.js";
+import { loadEnvVars } from "./envFile.js";
 
 export function validateEnv(): Plugin {
-  let validationResult: ReturnType<typeof getValidatedEnvOrError> | null = null
+  let validationResult: ReturnType<typeof getValidatedEnvOrError> | null = null;
   return {
-    name: 'wasp:validate-env',
+    name: "wasp:validate-env",
     async configResolved(config) {
       const env = await loadEnvVars({
         rootDir: config.root,
@@ -23,33 +21,34 @@ export function validateEnv(): Plugin {
         // We load the env file variables only in development,
         // when building for production, users are expected to
         // provide the environment variables inline.
-        loadDotEnvFile: config.command === 'serve',
-      })
-      validationResult = getValidatedEnvOrError(env, clientEnvSchema)
+        loadDotEnvFile: config.command === "serve",
+      });
+      const schema = getClientEnvSchema(config.mode);
+      validationResult = getValidatedEnvOrError(env, schema);
 
       // Exit if we are in build mode, because we can't show the error in the browser.
-      if (config.command === 'build' && !validationResult.success) {
-        const message = formatZodEnvErrors(validationResult.error.issues)
-        console.error(`${redColorFormatString}${message}`)
-        process.exit(1)
+      if (config.command === "build" && !validationResult.success) {
+        const validationErrorMessage = formatZodEnvError(validationResult.error);
+        console.error(colorize("red", validationErrorMessage));
+        process.exit(1);
       }
     },
     configureServer: (server) => {
       if (validationResult === null || validationResult.success) {
-        return
+        return;
       }
 
       // Send the error to the browser.
-      const message = formatZodEnvErrors(validationResult.error.issues)
-      server.ws.on('connection', () => {
+      const validationErrorMessage = formatZodEnvError(validationResult.error);
+      server.ws.on("connection", () => {
         server.ws.send({
-          type: 'error',
+          type: "error",
           err: {
-            message,
-            stack: '',
+            message: validationErrorMessage,
+            stack: "",
           },
-        })
-      })
+        });
+      });
     },
-  }
+  };
 }

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

@@ -1,14 +1,16 @@
 {{={= =}=}}
 import { type Plugin } from "vite";
 import {
-  getIndexTsxContent,
+  getClientEntryTsxContent,
   getRoutesTsxContent,
+  getSsrEntryTsxContent,
 } from "../virtual-files/index.js";
 import { makeVirtualFilesResolver, type VirtualFiles } from "../virtual-files/resolver.js";
 
 const resolveVirtualFiles = makeVirtualFilesResolver([
-  { id: "{= clientEntryPointPath =}", load: getIndexTsxContent },
+  { id: "{= clientEntryPointPath =}", load: getClientEntryTsxContent },
   { id: "{= routesEntryPointPath =}", load: getRoutesTsxContent },
+  { id: "{= ssrEntryPointPath =}", load: getSsrEntryTsxContent },
 ]);
 
 export function waspVirtualModules(): Plugin {

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

@@ -1,11 +1,11 @@
+{{={= =}=}}
 import { type PluginOption } from "vite";
 import react, { type Options as ReactOptions } from "@vitejs/plugin-react";
+import ssr from "@wasp.sh/lib-vite-ssr";
 import { validateEnv } from "./validateEnv.js";
 import { envFile } from "./envFile.js";
 import { detectServerImports } from "./detectServerImports.js";
 import { waspVirtualModules } from "./virtualModules.js";
-import { waspHtmlDev } from "./html/dev.js";
-import { waspHtmlBuild } from "./html/build.js";
 import { typescriptCheck } from "./typescriptCheck.js";
 import { waspConfig } from "./waspConfig.js";
 
@@ -28,9 +28,13 @@ export function wasp(options?: WaspPluginOptions): PluginOption {
      * Plugins running after core Vite plugins.
      */
     typescriptCheck(),
-    waspHtmlDev(),
-    waspHtmlBuild(),
     validateEnv(),
     react(options?.reactOptions),
+    ssr({
+      clientEntrySrc: "{= clientEntryPointPath =}",
+      ssrEntrySrc: "{= ssrEntryPointPath =}",
+      ssrPaths: [],
+      ssrFallbackFile: "{= ssrFallbackFile =}",
+    }),
   ];
 }

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

@@ -1,25 +1,46 @@
 {{={= =}=}}
-import { type PluginOption, mergeConfig } from "vite";
+/// <reference types="vitest/config" />
+import { type PluginOption } from "vite";
 import { defaultExclude } from "vitest/config"
 
+// Vite merges `userConfig` and our `waspConfig` returned from the plugin.
+// In that merge, primitive values from waspConfig take precedence, and
+// arrays are concatenated.
+//
+// This allows us to treat config values differently:
+//  - Forced: hardcoded in the return object so they always win. If the
+//    user set one of these in their vite.config.ts, we throw an error.
+//  - Overridable: we read the user's value and use it or fall back to
+//    our default.
+//  - Additive (arrays): we only return Wasp's entries; Vite's merge
+//    appends them to whatever the user already has.
+
+const forcedOptions = {
+  'base': "{= baseDir =}",
+  'envPrefix': "REACT_APP_",
+  'build.outDir': "{= clientBuildDirPath =}",
+} as const;
+
 export function waspConfig(): PluginOption {
   return {
     name: "wasp:config",
     enforce: 'pre',
     config(config) {
-      return mergeConfig({
-        base: "{= baseDir =}",
+      throwIfOverridingForcedOptions(config);
+
+      // Returned config is merged with the user's config by Vite (mergeConfig).
+      return {
+        base: forcedOptions['base'],
         optimizeDeps: {
           exclude: {=& depsExcludedFromOptimization =}
         },
         server: {
-          port: {= defaultClientPort =},
-          host: "0.0.0.0",
-          open: true,
+          port: useUserValue(config.server?.port, {= defaultClientPort =}),
+          host: useUserValue(config.server?.host, "0.0.0.0"),
         },
-        envPrefix: "REACT_APP_",
+        envPrefix: forcedOptions['envPrefix'],
         build: {
-          outDir: "{= clientBuildDirPath =}",
+          outDir: forcedOptions['build.outDir'],
         },
         resolve: {
           // These packages rely on a single instance per page. Not deduping them
@@ -42,15 +63,40 @@ export function waspConfig(): PluginOption {
           ],
         },
         test: {
-          globals: true,
-          environment: "jsdom",
+          globals: useUserValue(config.test?.globals, true),
+          environment: useUserValue(config.test?.environment, "jsdom"),
           setupFiles: {=& vitest.setupFilesArray =},
           exclude: [
             ...defaultExclude,
             "{= vitest.excludeWaspArtefactsPattern =}",
           ]
         },
-      }, config);
+      };
     }
   };
 }
+
+function useUserValue<T>(userValue: T | undefined, defaultValue: T): T {
+  return userValue ?? defaultValue;
+}
+
+function throwIfOverridingForcedOptions(config: Record<string, any>): void {
+  const conflicts: string[] = [];
+  for (const [path, forcedValue] of Object.entries(forcedOptions)) {
+    const userValue = getByPath(config, path);
+    if (userValue !== undefined && userValue !== forcedValue) {
+      conflicts.push(
+        `  - "${path}" is set to ${JSON.stringify(userValue)}, but Wasp requires ${JSON.stringify(forcedValue)}`
+      );
+    }
+  }
+  if (conflicts.length > 0) {
+    throw new Error(
+      `Your vite.config.ts sets options that Wasp controls:\n${conflicts.join('\n')}\n\nRemove these from your Vite config, Wasp sets them automatically.`
+    );
+  }
+}
+
+function getByPath(obj: Record<string, any>, path: string): unknown {
+  return path.split('.').reduce<any>((node, segment) => node?.[segment], obj);
+}

package/data/Generator/templates/sdk/wasp/client/vite/virtual-files/files/client-entry.tsx

@@ -0,0 +1,33 @@
+{{={= =}=}}
+import { startTransition } from "react";
+import { hydrateRoot } from "react-dom/client";
+import { createBrowserRouter, type HydrationState } from "react-router";
+import { RouterProvider } from "react-router/dom";
+import { Layout } from "wasp/client/app/layout";
+import { WaspApp } from "wasp/client/app";
+
+{=& routeObjects.importStatement =}
+
+// React Router will put hydration data on this property of the `window` object.
+// https://reactrouter.com/7.13.1/start/data/custom#4-hydrate-in-the-browser
+const hydrationData = (window as any).__staticRouterHydrationData as HydrationState | undefined;
+
+const router = createBrowserRouter({= routeObjects.importIdentifier =}, {
+  basename: "{= baseDir =}",
+  hydrationData,
+})
+
+function App({ isFallbackPage }: { isFallbackPage: boolean }) {
+  return (
+    <Layout isFallbackPage={isFallbackPage}>
+      <WaspApp>
+        <RouterProvider router={router} />
+      </WaspApp>
+    </Layout>
+  );
+}
+
+startTransition(() => {
+  const isFallbackpage = hydrationData == null;
+  hydrateRoot(document, <App isFallbackPage={isFallbackpage} />);
+});

package/data/Generator/templates/sdk/wasp/client/vite/virtual-files/files/routes.tsx

@@ -1,17 +1,66 @@
 {{={= =}=}}
-// @ts-nocheck
+import { getRouteObjects } from "wasp/client/app/router";
+import { initializeQueryClient } from "wasp/client/operations";
+
 {=# isAuthEnabled =}
 import { createAuthRequiredPage } from "wasp/client/app"
 {=/ isAuthEnabled =}
 
-// These files are used from user-land and the import paths below are relative to the
-// user's project dir, and not the SDK:
-{=# pagesToImport =}
-{=& importStatement =}
-{=/ pagesToImport =}
+{=# rootComponent.isDefined =}
+{=& rootComponent.importStatement =}
+{=/ rootComponent.isDefined =}
+
+{=# setupFn.isDefined =}
+{=& setupFn.importStatement =}
+{=/ setupFn.isDefined =}
 
-export const routesMapping = {
+{=# routes =}
+{=^ isLazy =}
+{=& import.importStatement =}
+{=/ isLazy =}
+{=/ routes =}
+
+const routesMapping = {
   {=# routes =}
-  {= name =}: {= targetComponent =},
+  {=# isLazy =}
+  {= name =}: { lazy: async () => {
+    const Component = await {=& import.dynamicImportExpression =}
+    {=# isAuthRequired =}
+    return { Component: createAuthRequiredPage(Component) }
+    {=/ isAuthRequired =}
+    {=^ isAuthRequired =}
+    return { Component }
+    {=/ isAuthRequired =}
+  }},
+  {=/ isLazy =}
+  {=^ isLazy =}
+  {= name =}: {
+    {=# isAuthRequired =}
+    Component: createAuthRequiredPage({= import.importIdentifier =}),
+    {=/ isAuthRequired =}
+    {=^ isAuthRequired =}
+    Component: {= import.importIdentifier =},
+    {=/ isAuthRequired =}
+  },
+  {=/ isLazy =}
   {=/ routes =}
 } as const;
+
+{=# setupFn.isDefined =}
+await {= setupFn.importIdentifier =}()
+{=/ setupFn.isDefined =}
+
+initializeQueryClient()
+
+const rootElement =
+  {=# rootComponent.isDefined =}
+  <{= rootComponent.importIdentifier =} />
+  {=/ rootComponent.isDefined =}
+  {=^ rootComponent.isDefined =}
+  undefined
+  {=/ rootComponent.isDefined =}
+
+export const routeObjects = getRouteObjects({
+  routesMapping,
+  rootElement,
+})

package/data/Generator/templates/sdk/wasp/client/vite/virtual-files/files/ssr-entry.tsx

@@ -0,0 +1,64 @@
+{{={= =}=}}
+import type { PrerenderContext, PrerenderFn } from "@wasp.sh/lib-vite-ssr/types";
+import * as streamConsumers from "node:stream/consumers";
+import assert from "node:assert/strict";
+import type { ReactNode } from "react";
+import { prerenderToNodeStream as reactPrerender } from "react-dom/static";
+import {
+  createStaticHandler,
+  createStaticRouter,
+  RouterProvider,
+} from "react-router";
+import { Layout } from "wasp/client/app/layout";
+import { WaspApp } from "wasp/client/app";
+
+{=& routeObjects.importStatement =}
+
+const FALLBACK_FILE = "{= ssrFallbackFile =}";
+
+const prerenderApp: PrerenderFn = async (route, ctx) => {
+  const isFallbackPage = route === FALLBACK_FILE;
+
+  if (isFallbackPage) {
+     return await appToHtml({ isFallbackPage: true, children: null }, ctx);
+  } else {
+    const { query, dataRoutes } = createStaticHandler({= routeObjects.importIdentifier =}, {
+      basename: "{= baseDir =}",
+    });
+
+    const req = new Request(new URL(route, "http://localhost"));
+
+    const context = await query(req);
+    assert (!(context instanceof Response), "Expected no redirect responses from static handler");
+
+    const router = createStaticRouter(dataRoutes, context);
+
+    return await appToHtml(
+      { isFallbackPage: false, children: <RouterProvider router={router} /> },
+      ctx,
+    );
+  }
+}
+
+export default prerenderApp;
+
+async function appToHtml(
+  {
+    isFallbackPage,
+    children,
+  }: { isFallbackPage: boolean; children?: ReactNode },
+  { clientEntrySrc }: PrerenderContext,
+) {
+  const app = (
+    <Layout isFallbackPage={isFallbackPage} clientEntrySrc={clientEntrySrc}>
+      <WaspApp>
+        {children}
+      </WaspApp>
+    </Layout>
+  );
+
+  const html = await reactPrerender(app)
+    .then((result) => streamConsumers.text(result.prelude))
+
+  return html;
+};

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

@@ -1,15 +1,15 @@
 import fs from "node:fs";
 
-export function getIndexTsxContent(): string {
-  return getFileContentFromRelativePath("./files/index.tsx");
+export function getClientEntryTsxContent(): string {
+  return getFileContentFromRelativePath("./files/client-entry.tsx");
 }
 
 export function getRoutesTsxContent(): string {
   return getFileContentFromRelativePath("./files/routes.tsx");
 }
 
-export function getIndexHtmlContent(): string {
-  return getFileContentFromRelativePath("./files/index.html");
+export function getSsrEntryTsxContent(): string {
+  return getFileContentFromRelativePath("./files/ssr-entry.tsx");
 }
 
 function getFileContentFromRelativePath(relativePath: string): string {

package/data/Generator/templates/sdk/wasp/client/webSocket/WebSocketProvider.tsx

@@ -20,7 +20,7 @@ export const socket: Socket<ServerToClientEvents, ClientToServerEvents> = io(
   config.apiUrl,
   {
     transports: ['websocket'],
-    autoConnect: {= autoConnect =},
+    autoConnect: {= autoConnect =} && !import.meta.env.SSR,
   }
 )
 

package/data/Generator/templates/sdk/wasp/core/storage.ts

@@ -1,50 +1,73 @@
 export type DataStore = {
-  getPrefixedKey(key: string): string
-  set(key: string, value: unknown): void
-  get(key: string): unknown
-  remove(key: string): void
-  clear(): void
+  getPrefixedKey(key: string): string;
+  set(key: string, value: unknown): void;
+  get(key: string): unknown;
+  remove(key: string): void;
+  clear(): void;
+};
+
+const createStorage =
+  typeof window === "undefined" || !window.localStorage
+    ? createMemoryDataStore
+    : createLocalStorageDataStore
+
+export const storage = createStorage("wasp");
+
+function createMemoryDataStore(prefix: string): DataStore {
+  const store: Map<string, unknown> = new Map();
+
+  function getPrefixedKey(key: string): string {
+    return `${prefix}:${key}`;
+  }
+
+  return {
+    getPrefixedKey,
+    set(key, value) {
+      store.set(getPrefixedKey(key), value);
+    },
+    get(key) {
+      return store.get(getPrefixedKey(key));
+    },
+    remove(key) {
+      store.delete(getPrefixedKey(key));
+    },
+    clear() {
+      store.clear();
+    },
+  };
 }
 
 function createLocalStorageDataStore(prefix: string): DataStore {
+  if (!window.localStorage) {
+    throw new Error("Local storage is not available.");
+  }
+
   function getPrefixedKey(key: string): string {
-    return `${prefix}:${key}`
+    return `${prefix}:${key}`;
   }
 
   return {
     getPrefixedKey,
     set(key, value) {
-      ensureLocalStorageIsAvailable()
-      localStorage.setItem(getPrefixedKey(key), JSON.stringify(value))
+      localStorage.setItem(getPrefixedKey(key), JSON.stringify(value));
     },
     get(key) {
-      ensureLocalStorageIsAvailable()
-      const value = localStorage.getItem(getPrefixedKey(key))
+      const value = localStorage.getItem(getPrefixedKey(key));
       try {
-        return value ? JSON.parse(value) : undefined
+        return value ? JSON.parse(value) : undefined;
       } catch (e: any) {
-        return undefined
+        return undefined;
       }
     },
     remove(key) {
-      ensureLocalStorageIsAvailable()
-      localStorage.removeItem(getPrefixedKey(key))
+      localStorage.removeItem(getPrefixedKey(key));
     },
     clear() {
-      ensureLocalStorageIsAvailable()
       Object.keys(localStorage).forEach((key) => {
         if (key.startsWith(prefix)) {
-          localStorage.removeItem(key)
+          localStorage.removeItem(key);
         }
-      })
+      });
     },
-  }
-}
-
-export const storage = createLocalStorageDataStore('wasp')
-
-function ensureLocalStorageIsAvailable(): void {
-  if (!window.localStorage) {
-    throw new Error('Local storage is not available.')
-  }
+  };
 }

package/data/Generator/templates/sdk/wasp/env/index.ts

@@ -1,7 +1,7 @@
 import * as z from 'zod'
 
 // PUBLIC API
-export function defineEnvValidationSchema<Schema extends z.ZodObject<any>>(
+export function defineEnvValidationSchema<Schema extends z.ZodObject>(
   schema: Schema,
 ): Schema {
   return schema

package/data/Generator/templates/sdk/wasp/env/validation.ts

@@ -1,38 +1,44 @@
-import * as z from 'zod'
+import * as z from "zod";
 
-import { getColorizedConsoleFormatString } from 'wasp/universal/ansiColors'
-
-const redColorFormatString = getColorizedConsoleFormatString('red');
+import { colorize } from "wasp/universal/ansiColors";
 
 // PRIVATE API (SDK)
-export function ensureEnvSchema<Schema extends z.ZodTypeAny>(
+export function ensureEnvSchema<Schema extends z.ZodType>(
   data: unknown,
-  schema: Schema
+  schema: Schema,
 ): z.infer<Schema> {
-  const result = getValidatedEnvOrError(data, schema)
+  const result = getValidatedEnvOrError(data, schema);
   if (result.success) {
-    return result.data
+    return result.data;
   } else {
-    console.error(`${redColorFormatString}${formatZodEnvErrors(result.error.issues)}`)
-    throw new Error('Error parsing environment variables')
+    console.error(colorize("red", formatZodEnvError(result.error)));
+    throw new Error("Error parsing environment variables");
   }
 }
 
 // PRIVATE API (SDK, Vite config)
-export function getValidatedEnvOrError<Schema extends z.ZodTypeAny>(
+export function getValidatedEnvOrError<Schema extends z.ZodType>(
   env: unknown,
-  schema: Schema
-): z.SafeParseReturnType<unknown, z.infer<Schema>> {
-  return schema.safeParse(env)
+  schema: Schema,
+): z.ZodSafeParseResult<z.infer<Schema>> {
+  return schema.safeParse(env);
 }
 
 // PRIVATE API (SDK, Vite config)
-export function formatZodEnvErrors(issues: z.ZodIssue[]): string {
-  const errorOutput = ['', '══ Env vars validation failed ══', '']
-  for (const error of issues) {
-    errorOutput.push(` - ${error.message}`)
-  }
-  errorOutput.push('')
-  errorOutput.push('════════════════════════════════')
-  return errorOutput.join('\n')
+export function formatZodEnvError(error: z.ZodError): string {
+  const flattenedIssues = z.flattenError(error);
+
+  return [
+    "══ Env vars validation failed ══",
+    "",
+    // Top-level errors
+    ...flattenedIssues.formErrors,
+    "",
+    // Errors per field
+    ...Object.entries(flattenedIssues.fieldErrors).map(
+      ([prop, error]) => `${prop} - ${error}`,
+    ),
+    "",
+    "════════════════════════════════",
+  ].join("\n");
 }

package/data/Generator/templates/sdk/wasp/package.json

@@ -121,6 +121,8 @@
       "./client/env/schema": "./dist/client/env/schema.js",
       {=! Private: [client] =}
       "./client/app": "./dist/client/app/index.jsx",
+      "./client/app/layout": "./dist/client/app/layout.jsx",
+      "./client/app/router": "./dist/client/app/router.jsx",
       {=! Private: [client] =}
       "./client/vite": "./dist/client/vite/index.js",