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

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/api/index.ts

@@ -1,4 +1,4 @@
-import axios, { type AxiosInstance, type AxiosError } from 'axios'
+import axios, { type AxiosError, type AxiosInstance } from 'axios'
 
 import { config } from 'wasp/client'
 import { storage } from 'wasp/core/storage'
@@ -75,20 +75,24 @@ api.interceptors.response.use(undefined, (error) => {
   return Promise.reject(error)
 })
 
-// This handler will run on other tabs (not the active one calling API functions),
-// and will ensure they know about auth session ID changes.
-// Ref: https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event
-// "Note: This won't work on the same page that is making the changes — it is really a way
-// for other pages on the domain using the storage to sync any changes that are made."
-window.addEventListener('storage', (event) => {
-  if (event.key === storage.getPrefixedKey(WASP_APP_AUTH_SESSION_ID_NAME)) {
-    if (!!event.newValue) {
-      apiEventsEmitter.emit('sessionId.set')
-    } else {
-      apiEventsEmitter.emit('sessionId.clear')
+// This makes sure that the following handler won't try to run in a non-browser
+// environment (e.g. during SSR), where `window` is not defined.
+if (typeof window !== 'undefined') {
+  // This handler will run on other tabs (not the active one calling API functions),
+  // and will ensure they know about auth session ID changes.
+  // Ref: https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event
+  // "Note: This won't work on the same page that is making the changes — it is really a way
+  // for other pages on the domain using the storage to sync any changes that are made."
+  window.addEventListener('storage', (event) => {
+    if (event.key === storage.getPrefixedKey(WASP_APP_AUTH_SESSION_ID_NAME)) {
+      if (!!event.newValue) {
+        apiEventsEmitter.emit('sessionId.set')
+      } else {
+        apiEventsEmitter.emit('sessionId.clear')
+      }
     }
-  }
-})
+  })
+}
 
 // PRIVATE API (sdk)
 /**

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

@@ -1,44 +1,25 @@
 {{={= =}=}}
-import * as React from 'react'
+import { use, type ReactNode } 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,
-  })
+export function WaspApp({ children }: { children: ReactNode }) {
+  const queryClient = use(queryClientInitialized)
 
   return (
     <QueryClientProvider client={queryClient}>
       {=# areWebSocketsUsed =}
       <WebSocketProvider>
-        {router}
+        {children}
       </WebSocketProvider>
       {=/ areWebSocketsUsed =}
       {=^ areWebSocketsUsed =}
-      {router}
+      {children}
       {=/ areWebSocketsUsed =}
     </QueryClientProvider>
   )

package/data/Generator/templates/sdk/wasp/client/app/hooks/useIsClient.ts

@@ -0,0 +1,22 @@
+import { useSyncExternalStore } from "react"
+
+/**
+ * Returns `true` if the component is running on the client (browser) and
+ * `false` if on the server (SSR). Doesn't cause hydration mismatches, so it is
+ * safe to use for conditional rendering.
+ */
+export function useIsClient() {
+  // We use `useSyncExternalStore` to get a value that is `true` on the client
+  // and `false` on the server, while avoiding hydration mismatches. It looks
+  // like a hack, but it conforms to the semantics of `useSyncExternalStore`,
+  // with *the environment* being the "external store" in this case. We just
+  // don't have any real subscription logic, since the value is static.
+  return useSyncExternalStore(emptySubscribe, getClientValue, getServerValue)
+}
+
+// These functions are just to satisfy the API of `useSyncExternalStore` in
+// `useIsClient`, and defined outside the hook so they are stable references.
+function emptySubscribe() { return emptyUnsubscribe }
+function emptyUnsubscribe() {}
+function getClientValue() { return true }
+function getServerValue() { return false }

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

@@ -1,24 +1,6 @@
 {{={= =}=}}
-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} />
-}
+export { WaspApp } from './components/WaspApp'
 
 {=# isAuthEnabled =}
 // PRIVATE API (web-app)

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

@@ -0,0 +1,92 @@
+{{={= =}=}}
+import { StrictMode, type ReactNode } from "react";
+import { useIsClient } from "./hooks/useIsClient.js"
+
+export function Layout({
+  children,
+  isFallbackPage = false,
+  clientEntrySrc,
+}: {
+  children?: ReactNode;
+  isFallbackPage?: boolean;
+  clientEntrySrc?: string;
+}) {
+  const isClient = useIsClient()
+
+  /*
+    From the Vite SSR plugin, we inherit the concept of a "prerendered page" vs.
+    a "fallback page".
+    - A prerendered page is a page that is rendered on the server, and then
+      hydrated on the client.
+    - A fallback page is a page which only prerenders the common HTML structure
+      on the server, and then renders the actual page content on the client.
+
+    To use an analogy, a fallback page is a pluripotent stem cell that can turn
+    into any page in the client; while a prerendered page is already specialized
+    and can only render its specific content.
+
+    So, if we are prerendering a fallback page, we want to avoid rendering the
+    actual page content, so that it can turn into anything. If we're
+    prerendering a non-fallback page, we'll give it its content.
+
+    But, if we're already in the client, we always want to render the page
+    content. Whether prerendered as a fallback or not, now it's showtime, so we
+    must show the user the content.
+
+    Thus, we end up with the line below:
+  */
+  const shouldRenderChildren = isClient || !isFallbackPage
+
+  return (
+    <StrictMode>
+      <html lang="en">
+        <head>
+          <meta charSet="utf-8" />
+          <meta
+            name="viewport"
+            content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
+          />
+
+          {=& head =}
+
+          <title>{= title =}</title>
+        </head>
+        <body>
+          <noscript>You need to enable JavaScript to run this app.</noscript>
+
+          {
+            // We don't really need to wrap the app in a div nor name it "root",
+            // but we keep it for backwards compatibility with older Wasp
+            // versions.
+          }
+          <div id="root">
+              {shouldRenderChildren ? children : null}
+          </div>
+
+          {
+            // We pass that argument in SSR builds and not in client builds.
+            // This would usually cause a hydration mismatch, but React has an
+            // exception for `<script>` tags, for this specific usecase, so it
+            // will work fine.
+            clientEntrySrc ? (
+              // We'd usually use React prerender's `bootstrapModules` options for
+              // injecting this script, but it would also add a `<link
+              // rel="modulepreload">` tag that Vite doesn't handle correctly. So
+              // we just add the script ourselves in the regular way.
+              //
+              // https://react.dev/reference/react-dom/static/prerenderToNodeStream
+              <script
+                type="module"
+                src={clientEntrySrc}
+                // We make it `async` to decouple the tag's position from its
+                // execution phase. This way Vite can move it anywhere in the
+                // document to optimize loading performance.
+                async
+              />
+            ) : null
+          }
+        </body>
+      </html>
+    </StrictMode>
+  );
+}

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

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

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),
+);