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

package/data/Cli/starters/skeleton/gitignore

@@ -0,0 +1,11 @@
+.wasp/
+node_modules/
+
+# Ignore all dotenv files by default to prevent accidentally committing any secrets.
+# To include specific dotenv files, use the `!` operator or adjust these rules.
+.env
+.env.*
+
+# Don't ignore example dotenv files.
+!.env.example
+!.env.*.example

package/data/Cli/starters/ts-minimal/main.wasp.ts

@@ -0,0 +1,15 @@
+import { App } from "wasp-config";
+
+const app = new App("__waspAppName__", {
+  title: "__waspProjectName__",
+  wasp: { version: "__waspVersion__" },
+  head: ["<link rel='icon' href='/favicon.ico' />"],
+});
+
+const mainPage = app.page("MainPage", {
+  component: { import: "MainPage", from: "@src/MainPage" },
+});
+
+app.route("RootRoute", { path: "/", to: mainPage });
+
+export default app;

package/data/Cli/starters/ts-minimal/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "__waspAppName__",
+  "type": "module",
+  "workspaces": [".wasp/out/*", ".wasp/out/sdk/wasp"],
+  "dependencies": {
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "react-router": "^7.12.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "prisma": "5.19.1",
+    "typescript": "5.8.2",
+    "vite": "^7.0.6",
+    "wasp-config": "__waspConfigPackageSpecifier__"
+  }
+}

package/data/Cli/starters/ts-minimal/schema.prisma

@@ -0,0 +1,10 @@
+datasource db {
+  provider = "sqlite"
+  // Wasp requires that the url is set to the DATABASE_URL environment variable.
+  url      = env("DATABASE_URL")
+}
+
+// Wasp requires the `prisma-client-js` generator to be present.
+generator client {
+  provider = "prisma-client-js"
+}

package/data/Cli/starters/ts-minimal/src/Main.css

@@ -0,0 +1,103 @@
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
+    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+}
+
+#root {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.container {
+  margin: 3rem 3rem 10rem 3rem;
+  max-width: 726px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.logo {
+  max-height: 200px;
+  margin-bottom: 1rem;
+}
+
+.title {
+  font-size: 4rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+}
+
+.content {
+  font-size: 1.2rem;
+  font-weight: 400;
+  line-height: 2;
+  margin-bottom: 3rem;
+}
+
+.buttons {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+}
+
+.button {
+  font-size: 1.2rem;
+  font-weight: 700;
+  text-decoration: none;
+  padding: 1.2rem 1.5rem;
+  border-radius: 10px;
+}
+
+.button-filled {
+  color: black;
+  background-color: #ffcc00;
+  border: 2px solid #ffcc00;
+
+  transition: all 0.2s ease-in-out;
+}
+
+.button-filled:hover {
+  filter: brightness(0.95);
+}
+
+.button-outlined {
+  color: black;
+  background-color: transparent;
+  border: 2px solid #ffcc00;
+
+  transition: all 0.2s ease-in-out;
+}
+
+.button-outlined:hover {
+  filter: brightness(0.95);
+}
+
+code {
+  border-radius: 5px;
+  border: 1px solid #ffcc00;
+  padding: 0.2rem;
+  background: #ffcc0044;
+  font-family:
+    Menlo,
+    Monaco,
+    Lucida Console,
+    Liberation Mono,
+    DejaVu Sans Mono,
+    Bitstream Vera Sans Mono,
+    Courier New,
+    monospace;
+}

package/data/Cli/starters/ts-minimal/src/MainPage.tsx

@@ -0,0 +1,37 @@
+import Logo from "./assets/logo.svg";
+import "./Main.css";
+
+export function MainPage() {
+  return (
+    <main className="container">
+      <img className="logo" src={Logo} alt="wasp" />
+
+      <h2 className="title">Welcome to Wasp!</h2>
+
+      <p className="content">
+        This is page <code>MainPage</code> located at route <code>/</code>.
+        <br />
+        Open <code>src/MainPage.tsx</code> to edit it.
+      </p>
+
+      <div className="buttons">
+        <a
+          className="button button-filled"
+          href="https://wasp.sh/docs/tutorial/create"
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          Take the Tutorial
+        </a>
+        <a
+          className="button button-outlined"
+          href="https://discord.com/invite/rzdnErX"
+          target="_blank"
+          rel="noreferrer noopener"
+        >
+          Chat on Discord
+        </a>
+      </div>
+    </main>
+  );
+}

package/data/Cli/starters/ts-minimal/src/assets/logo.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 161 161"><defs><style>.cls-1{fill:#f5cc05;}.cls-2{fill-rule:evenodd;}</style></defs><g id="Page-1"><g id="Group-23"><circle id="Oval" class="cls-1" cx="80.5" cy="80.5" r="79"/><g id="Group-36"><g id="_" data-name="}"><path id="path-2" class="cls-2" d="M88.67,114.33h2.91q6,0,7.87-1.89c1.22-1.25,1.83-3.9,1.83-7.93V93.89c0-4.46.65-7.7,1.93-9.73s3.51-3.43,6.67-4.2q-4.69-1.08-6.65-4.12c-1.3-2-2-5.28-2-9.77V55.44q0-6-1.83-7.93t-7.87-1.88H88.67V39.5h2.65q10.65,0,14.24,3.15t3.59,12.62V65.56c0,4.28.77,7.24,2.29,8.87s4.3,2.44,8.32,2.44h2.74V83h-2.74q-6,0-8.32,2.49c-1.52,1.65-2.29,4.64-2.29,9v10.25q0,9.47-3.59,12.64T91.32,120.5H88.67Z"/><path id="path-2-2" data-name="path-2" class="cls-2" d="M88.67,114.33h2.91q6,0,7.87-1.89c1.22-1.25,1.83-3.9,1.83-7.93V93.89c0-4.46.65-7.7,1.93-9.73s3.51-3.43,6.67-4.2q-4.69-1.08-6.65-4.12c-1.3-2-2-5.28-2-9.77V55.44q0-6-1.83-7.93t-7.87-1.88H88.67V39.5h2.65q10.65,0,14.24,3.15t3.59,12.62V65.56c0,4.28.77,7.24,2.29,8.87s4.3,2.44,8.32,2.44h2.74V83h-2.74q-6,0-8.32,2.49c-1.52,1.65-2.29,4.64-2.29,9v10.25q0,9.47-3.59,12.64T91.32,120.5H88.67Z"/></g><g id="text831"><g id="_2" data-name="="><path id="path-3" class="cls-2" d="M38.5,85.15H75.83v7.58H38.5Zm0-17.88H75.83v7.49H38.5Z"/><path id="path-3-2" data-name="path-3" class="cls-2" d="M38.5,85.15H75.83v7.58H38.5Zm0-17.88H75.83v7.49H38.5Z"/></g></g></g></g></g></svg>

package/data/Cli/starters/ts-minimal/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.src.json" },
+    { "path": "./tsconfig.wasp.json" }
+  ]
+}

package/data/Cli/starters/ts-minimal/tsconfig.src.json

@@ -0,0 +1,28 @@
+// =============================== IMPORTANT =================================
+// This file is mainly used for Wasp IDE support.
+//
+// Wasp will compile your code with slightly different (less strict) compilerOptions.
+// You can increase the configuration's strictness (e.g., by adding
+// "noUncheckedIndexedAccess": true), but you shouldn't reduce it (e.g., by
+// adding "strict": false). Just keep in mind that this will only affect your
+// IDE support, not the actual compilation.
+//
+// Full TypeScript configurability is coming very soon :)
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "composite": true,
+    "target": "esnext",
+    "moduleResolution": "bundler",
+    "jsx": "preserve",
+    "strict": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "skipLibCheck": true,
+    "allowJs": true,
+    "outDir": ".wasp/out/user"
+  },
+  "include": ["src"]
+}

package/data/Cli/starters/ts-minimal/tsconfig.wasp.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "skipLibCheck": true,
+    "target": "ES2022",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "module": "NodeNext",
+    "noEmit": true,
+    "lib": ["ES2023"]
+  },
+  "include": ["main.wasp.ts"]
+}

package/data/Cli/starters/ts-minimal/vite.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "vite";
+import { wasp } from "wasp/client/vite";
+
+export default defineConfig({
+  plugins: [wasp()],
+  server: {
+    open: true,
+  },
+});

package/data/Generator/templates/Dockerfile

@@ -3,9 +3,7 @@
 #   Because if not, we had situations where it would use the different version
 #   locally and on Github CI. This way we ensure exact version is used,
 #   and also have control over updating it (instead of update surprising us).
-{=! TODO: Upgrade this to the latest Alpine version once we update Prisma #2504 =}
-{=! (Alpine 3.21 at time of writing) =}
-FROM node:{= nodeVersion =}-alpine3.20 AS node
+FROM node:{= nodeVersion =}-alpine3.23 AS node
 
 
 # We split Dockerfile into base, server-builder and server-production.
@@ -18,6 +16,10 @@ FROM node:{= nodeVersion =}-alpine3.20 AS node
 
 FROM node AS base
 RUN apk --no-cache -U upgrade # To ensure any potential security patches are applied.
+# Alpine 3.21+ no longer includes openssl as a transitive dependency of the
+# Node.js image. Prisma's native engine needs libssl at both build and runtime.
+# TODO: Revisit once we upgrade to Prisma 6 (https://github.com/wasp-lang/wasp/issues/2504).
+RUN apk add --no-cache openssl
 
 
 # Todo: The 'server-builder' image stays on disk under <none>:<none> and is

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

@@ -9,9 +9,15 @@ import { queryClientInitialized } from '../../operations/index'
 import { WebSocketProvider } from '../../webSocket/WebSocketProvider'
 {=/ areWebSocketsUsed =}
 
+export type RouteMapping = Record<
+  string,
+  | { lazy: () => Promise<{ Component: React.ComponentType }> }
+  | { Component: React.ComponentType }
+>;
+
 export type WaspAppProps = {
   rootElement?: React.ReactNode;
-  routesMapping: Record<string, React.ComponentType>;
+  routesMapping: RouteMapping;
 }
 
 export function WaspApp({ rootElement, routesMapping }: Required<WaspAppProps>) {

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

@@ -8,13 +8,14 @@ import { OAuthCallbackPage } from "../pages/OAuthCallback"
 
 import { DefaultRootErrorBoundary } from '../components/DefaultRootErrorBoundary'
 
+import type { RouteMapping } from '../components/WaspApp'
 import { routes } from '../../router/index'
 
 export function getRouter({
   routesMapping,
   rootElement,
 }: {
-  routesMapping: Record<string, React.ComponentType>,
+  routesMapping: RouteMapping,
   rootElement: React.ReactNode,
 }) {
   const waspDefinedRoutes = [
@@ -28,7 +29,7 @@ export function getRouter({
   const userDefinedRoutes = Object.entries(routes).map(([routeKey, route]) => {
     return {
       path: route.to,
-      Component: routesMapping[routeKey],
+      ...routesMapping[routeKey],
     }
   })
 

package/data/Generator/templates/sdk/wasp/client/env/schema.ts

@@ -1,22 +1,39 @@
 {{={= =}=}}
-import * as z from 'zod'
+import * as z from "zod"
 
 {=# envValidationSchema.isDefined =}
 {=& envValidationSchema.importStatement =}
-const userClientEnvSchema = {= envValidationSchema.importIdentifier =}
+const userClientEnvSchema = {= envValidationSchema.importIdentifier =};
 {=/ envValidationSchema.isDefined =}
 {=^ envValidationSchema.isDefined =}
-const userClientEnvSchema = z.object({})
+const userClientEnvSchema = z.object({});
 {=/ envValidationSchema.isDefined =}
 
-const waspClientEnvSchema = z.object({
-  "{= serverUrlEnvVarName =}": z
-  .string()
-  .url({
-    message: '{= serverUrlEnvVarName =} must be a valid URL',
+const serverUrlSchema =
+  z.string({
+    error: '{= serverUrlEnvVarName =} is required',
   })
-  .default('{= defaultServerUrl =}'),
-})
+  .pipe(
+    z.url({
+      error: '{= serverUrlEnvVarName =} must be a valid URL',
+    })
+  )
+
+const waspDevClientEnvSchema = z.object({
+  "{= serverUrlEnvVarName =}": serverUrlSchema
+    .default("{= defaultServerUrl =}"),
+});
+
+const waspProdClientEnvSchema = z.object({
+  "{= serverUrlEnvVarName =}": serverUrlSchema,
+});
 
 // PRIVATE API (sdk, Vite config)
-export const clientEnvSchema = userClientEnvSchema.merge(waspClientEnvSchema)
+// TODO(franjo): Remove passing mode as param when this is no longer a plugin.
+//               See: https://github.com/wasp-lang/wasp/issues/3875.
+export function getClientEnvSchema(mode: string) {
+  const waspClientEnvSchema = mode === "production"
+    ? waspProdClientEnvSchema
+    : waspDevClientEnvSchema;
+  return z.object({ ...userClientEnvSchema.shape, ...waspClientEnvSchema.shape })
+}

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

@@ -1,5 +1,8 @@
-import { clientEnvSchema } from './env/schema.js'
-import { ensureEnvSchema } from '../env/validation.js'
+import { ensureEnvSchema } from "../env/validation.js";
+import { getClientEnvSchema } from "./env/schema.js";
 
 // PUBLIC API
-export const env = ensureEnvSchema(import.meta.env, clientEnvSchema)
+export const env = ensureEnvSchema(
+  import.meta.env,
+  getClientEnvSchema(import.meta.env.MODE),
+);

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/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/routes.tsx

@@ -3,15 +3,34 @@
 {=# 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 =}
+{=# routes =}
+{=^ isLazy =}
+{=& import.importStatement =}
+{=/ isLazy =}
+{=/ routes =}
 
 export 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;

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