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

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

@@ -0,0 +1,112 @@
+{{={= =}=}}
+import { type Plugin, type UserConfig } from 'vite'
+import { resolve } from 'node:path'
+import { readFile, access, constants } from 'node:fs/promises'
+import { parse as parseDotenv } from 'dotenv'
+import { expand, type DotenvPopulateInput } from 'dotenv-expand'
+
+const envFileName = '{= clientEnvFileName =}'
+
+export function envFile(): Plugin {
+  let envFilePath!: string
+  return {
+    name: 'wasp:env-file',
+    enforce: 'pre',
+    async config(config, env) {
+      const rootDir = config.root || process.cwd()
+      const envVars = await loadEnvVars({
+        rootDir,
+        // We are sure that `envPrefix` is defined because
+        // we defined it in an earlier plugin.
+        envPrefix: config.envPrefix!,
+        // We load the env file variables only in development,
+        // when building for production, users are expected to
+        // provide the environment variables inline.
+        loadDotEnvFile: env.command === 'serve',
+      })
+      envFilePath = resolve(rootDir, envFileName)
+
+      const prefixedVars = Object.entries(envVars)
+        .reduce((acc, [key, value]) => {
+          acc[`import.meta.env.${key}`] = JSON.stringify(value)
+          return acc
+        }, {} as Record<string, string>)
+
+      return {
+        // Disable Vite's default .env loading.
+        envDir: false,
+        define: prefixedVars,
+      }
+    },
+    configureServer(server) {
+      const reloadServerOnEnvFileEvent = (path: string) => {
+        if (path === envFilePath) {
+          server.restart()
+        }
+      }
+
+      server.watcher.on('add', reloadServerOnEnvFileEvent)
+      server.watcher.on('change', reloadServerOnEnvFileEvent)
+      server.watcher.on('unlink', reloadServerOnEnvFileEvent)
+    },
+    async buildStart() {
+      this.addWatchFile(envFilePath)
+    },
+  }
+}
+
+// Based on: https://github.com/vitejs/vite/blob/8bb32036792a6f522f5c947112f3d688add755a0/packages/vite/src/node/env.ts
+export async function loadEnvVars({
+  rootDir,
+  envPrefix,
+  loadDotEnvFile,
+}: {
+  rootDir: string
+  envPrefix: NonNullable<UserConfig['envPrefix']>
+  loadDotEnvFile: boolean
+}): Promise<Record<string, string>> {
+  const envPrefixNormalized = Array.isArray(envPrefix) ? envPrefix : [envPrefix]
+  const env: Record<string, string> = {}
+
+  if (loadDotEnvFile) {
+    const envFilePath = resolve(rootDir, envFileName)
+    const parsed = await parseEnvFile(envFilePath)
+
+    // Let environment variables use each other. Make a copy of `process.env` so that `dotenv-expand`
+    // doesn't re-assign the expanded values to the global `process.env`.
+    const processEnv = { ...process.env } as DotenvPopulateInput
+    expand({ parsed, processEnv })
+
+    // Only keys that start with prefix are exposed to client.
+    for (const [key, value] of Object.entries(parsed)) {
+      if (envPrefixNormalized.some(prefix => key.startsWith(prefix))) {
+        env[key] = value
+      }
+    }
+  }
+
+  // Make sure that inline env variables are prioritized over env file variables.
+  // Follows the logic Vite uses for env variables.
+  for (const key in process.env) {
+    if (envPrefixNormalized.some(prefix => key.startsWith(prefix))) {
+      env[key] = process.env[key] as string
+    }
+  }
+
+  return env
+}
+
+async function parseEnvFile(envFilePath: string): Promise<Record<string, string>> {
+  try {
+    await access(envFilePath, constants.R_OK)
+  } catch {
+    return {}
+  }
+
+  try {
+    return parseDotenv(await readFile(envFilePath, 'utf-8'))
+  } catch (error) {
+    console.error(`Error parsing ${envFileName}:`, error)
+    throw error
+  }
+}

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

@@ -0,0 +1,38 @@
+import type { Plugin } from "vite";
+import { getIndexHtmlContent } from "../../virtual-files/index.js";
+import { makeVirtualFilesResolver, type VirtualFiles } from "../../virtual-files/resolver.js";
+
+const INDEX_HTML_FILE_NAME = "index.html";
+
+const resolveVirtualFiles = makeVirtualFilesResolver([
+  { id: INDEX_HTML_FILE_NAME, load: getIndexHtmlContent },
+]);
+
+export function waspHtmlBuild(): Plugin {
+  let virtualFiles!: VirtualFiles;
+
+  return {
+    name: "wasp:html-build",
+    apply: "build",
+    config() {
+      return {
+        build: {
+          rollupOptions: {
+            // Vite tries to find the entry file on disk (which doesn't exist)
+            // so the build fails. We tell Vite/Rollup to use `index.html` even
+            // though it doesn't exist on the disk.
+            input: INDEX_HTML_FILE_NAME,
+          },
+        },
+      };
+    },
+    configResolved(config) {
+      virtualFiles = resolveVirtualFiles(config.root);
+    },
+    resolveId: (id) => virtualFiles.ids.get(id),
+    load(id) {
+      const loader = virtualFiles.loaders.get(id);
+      return loader?.();
+    },
+  };
+}

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

@@ -0,0 +1,35 @@
+import type { Plugin } from "vite";
+import { getIndexHtmlContent } from "../../virtual-files/index.js";
+
+export function waspHtmlDev(): Plugin {
+  return {
+    name: "wasp:html-dev",
+    apply: "serve",
+    configureServer(server) {
+      return () => {
+        // Post middleware: runs after Vite's built-in SPA fallback
+        // middleware which resolves routes to `/index.html` which
+        // we pick up here and return the virtual `index.html` content.
+        server.middlewares.use(async (req, res, next) => {
+          if (req.url === "/" || req.url === `/index.html`) {
+            try {
+              const html = getIndexHtmlContent();
+              const transformedHtml = await server.transformIndexHtml(
+                req.url,
+                html
+              );
+
+              res.setHeader("Content-Type", "text/html");
+              res.end(transformedHtml);
+              return;
+            } catch (e) {
+              return next(e);
+            }
+          }
+
+          next();
+        });
+      };
+    },
+  };
+}

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

@@ -0,0 +1,32 @@
+import { type Plugin } from 'vite'
+import { spawn } from 'node:child_process'
+
+export function typescriptCheck(): Plugin {
+  return {
+    name: 'wasp:typescript-check',
+    apply: 'build',
+    async buildStart() {
+      await runTsc()
+    },
+  }
+}
+
+function runTsc(): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const child = spawn(
+      'tsc',
+      ['--build', '--noEmit'],
+      {
+        stdio: 'inherit',
+        shell: process.platform === 'win32',
+      }
+    )
+
+    child.once('error', reject)
+    child.once('close', (code) =>
+      code === 0
+        ? resolve()
+        : reject(new Error(`TypeScript check failed (exit ${code})`))
+    )
+  })
+}

package/data/Generator/templates/{react-app/vite → sdk/wasp/client/vite/plugins}/validateEnv.ts

@@ -1,20 +1,30 @@
-import { type Plugin, loadEnv } from 'vite'
+import { type Plugin } from 'vite'
 
+import { loadEnvVars } from './envFile.js'
 import {
   getValidatedEnvOrError,
   formatZodEnvErrors,
-} from 'wasp/env/validation'
-import { clientEnvSchema } from 'wasp/client/env/schema'
-import { getColorizedConsoleFormatString } from 'wasp/universal/ansiColors'
+} from '../../../env/validation.js'
+import { clientEnvSchema } from '../../env/schema.js'
+import { getColorizedConsoleFormatString } from '../../../universal/ansiColors.js'
 
 const redColorFormatString = getColorizedConsoleFormatString('red');
 
 export function validateEnv(): Plugin {
   let validationResult: ReturnType<typeof getValidatedEnvOrError> | null = null
   return {
-    name: 'wasp-validate-env',
-    configResolved: (config) => {
-      const env = loadEnv(config.mode, process.cwd(), config.envPrefix)
+    name: 'wasp:validate-env',
+    async configResolved(config) {
+      const env = await loadEnvVars({
+        rootDir: config.root,
+        // We are sure that `envPrefix` is defined because
+        // we defined it in an earlier plugin.
+        envPrefix: config.envPrefix!,
+        // 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)
 
       // Exit if we are in build mode, because we can't show the error in the browser.

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

@@ -0,0 +1,29 @@
+{{={= =}=}}
+import { type Plugin } from "vite";
+import {
+  getIndexTsxContent,
+  getRoutesTsxContent,
+} from "../virtual-files/index.js";
+import { makeVirtualFilesResolver, type VirtualFiles } from "../virtual-files/resolver.js";
+
+const resolveVirtualFiles = makeVirtualFilesResolver([
+  { id: "{= clientEntryPointPath =}", load: getIndexTsxContent },
+  { id: "{= routesEntryPointPath =}", load: getRoutesTsxContent },
+]);
+
+export function waspVirtualModules(): Plugin {
+  let virtualFiles!: VirtualFiles;
+
+  return {
+    name: "wasp:virtual-modules",
+    enforce: "pre",
+    configResolved(config) {
+      virtualFiles = resolveVirtualFiles(config.root);
+    },
+    resolveId: (id) => virtualFiles.ids.get(id),
+    load(id) {
+      const loader = virtualFiles.loaders.get(id);
+      return loader?.();
+    },
+  };
+}

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

@@ -0,0 +1,36 @@
+import { type PluginOption } from "vite";
+import react, { type Options as ReactOptions } from "@vitejs/plugin-react";
+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";
+
+export interface WaspPluginOptions {
+  reactOptions?: ReactOptions;
+}
+
+export function wasp(options?: WaspPluginOptions): PluginOption {
+  return [
+    /**
+    * Plugins running before core plugins (enforce: 'pre').
+    */
+    // The `wasp:config` plugin must come first because
+    // other plugins may depend on its configuration.
+    waspConfig(),
+    waspVirtualModules(),
+    envFile(),
+    detectServerImports(),
+    /**
+     * Plugins running after core Vite plugins.
+     */
+    typescriptCheck(),
+    waspHtmlDev(),
+    waspHtmlBuild(),
+    validateEnv(),
+    react(options?.reactOptions),
+  ];
+}

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

@@ -0,0 +1,56 @@
+{{={= =}=}}
+import { type PluginOption, mergeConfig } from "vite";
+import { defaultExclude } from "vitest/config"
+
+export function waspConfig(): PluginOption {
+  return {
+    name: "wasp:config",
+    enforce: 'pre',
+    config(config) {
+      return mergeConfig({
+        base: "{= baseDir =}",
+        optimizeDeps: {
+          exclude: {=& depsExcludedFromOptimization =}
+        },
+        server: {
+          port: {= defaultClientPort =},
+          host: "0.0.0.0",
+          open: true,
+        },
+        envPrefix: "REACT_APP_",
+        build: {
+          outDir: "{= clientBuildDirPath =}",
+        },
+        resolve: {
+          // These packages rely on a single instance per page. Not deduping them
+          // causes runtime errors (e.g., hook rule violation in react, QueryClient
+          // instance error in react-query, Invariant Error in react-router).
+          dedupe: ["react", "react-dom", "@tanstack/react-query", "react-router"],
+          alias: [
+            {
+              // Vite doesn't look for `.prisma/client` imports in the `node_modules`
+              // folder. We point it to the correct place here.
+              // TODO: Check if we can remove when updating Prisma (#2504)
+              find: /^\.prisma\/client\/(.+)$/,
+              replacement: "node_modules/.prisma/client/$1.js",
+            },
+            {
+              // Handle bare .prisma/client import
+              find: /^\.prisma\/client$/,
+              replacement: "node_modules/.prisma/client",
+            },
+          ],
+        },
+        test: {
+          globals: true,
+          environment: "jsdom",
+          setupFiles: {=& vitest.setupFilesArray =},
+          exclude: [
+            ...defaultExclude,
+            "{= vitest.excludeWaspArtefactsPattern =}",
+          ]
+        },
+      }, config);
+    }
+  };
+}

package/data/Generator/templates/{react-app → sdk/wasp/client/vite/virtual-files/files}/index.html

@@ -7,7 +7,6 @@
             name="viewport"
             content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
         />
-        <link rel="manifest" href="/manifest.json" />
 
         {=& head =}
 
@@ -17,6 +16,6 @@
     <body>
         <noscript>You need to enable JavaScript to run this app.</noscript>
         <div id="root"></div>
-        <script type="module" src="/src/index.tsx"></script>
+        <script type="module" src="{= clientEntryPointPath =}"></script>
     </body>
 </html>

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

@@ -0,0 +1,34 @@
+{{={= =}=}}
+// @ts-nocheck
+import * as React from "react";
+import * as ReactDOM from "react-dom/client";
+import { getWaspApp } from "wasp/client/app";
+{=!
+  // NOTE: We are not inlining routes mapping into this file becuase once we
+  // allow users to override the `index.tsx` entry point they can use the existing
+  // routes mapping.
+=}
+{=& routesMapping.importStatement =}
+
+{=# rootComponent.isDefined =}
+{=& rootComponent.importStatement =}
+{=/ rootComponent.isDefined =}
+
+{=# setupFn.isDefined =}
+{=& setupFn.importStatement =}
+{=/ setupFn.isDefined =}
+
+{=# setupFn.isDefined =}
+await {= setupFn.importIdentifier =}()
+{=/ setupFn.isDefined =}
+
+const app = getWaspApp({
+  {=# rootComponent.isDefined =}
+  rootElement: <{= rootComponent.importIdentifier =} />,
+  {=/ rootComponent.isDefined =}
+  routesMapping: {= routesMapping.importIdentifier =},
+});
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>{app}</React.StrictMode>,
+);

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

@@ -0,0 +1,17 @@
+{{={= =}=}}
+// @ts-nocheck
+{=# 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 =}
+
+export const routesMapping = {
+  {=# routes =}
+  {= name =}: {= targetComponent =},
+  {=/ routes =}
+} as const;

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

@@ -0,0 +1,20 @@
+import fs from "node:fs";
+
+export function getIndexTsxContent(): string {
+  return getFileContentFromRelativePath("./files/index.tsx");
+}
+
+export function getRoutesTsxContent(): string {
+  return getFileContentFromRelativePath("./files/routes.tsx");
+}
+
+export function getIndexHtmlContent(): string {
+  return getFileContentFromRelativePath("./files/index.html");
+}
+
+function getFileContentFromRelativePath(relativePath: string): string {
+  return fs.readFileSync(
+    new URL(relativePath, import.meta.url),
+    "utf-8"
+  );
+}

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

@@ -0,0 +1,28 @@
+import * as path from "node:path";
+
+export type VirtualFiles = {
+  ids: ReadonlyMap<string, string>;
+  loaders: ReadonlyMap<string, () => Promise<string> | string>;
+};
+
+type VirtualFilesDefinition = {
+  id: string;
+  load: () => Promise<string> | string;
+};
+
+export const makeVirtualFilesResolver =
+  (files: VirtualFilesDefinition[]) =>
+  (rootPath: string): VirtualFiles => {
+    const filesWithAbsPath = files.map((d) => ({
+      ...d,
+      absPath: path.resolve(rootPath, path.basename(d.id)),
+    }));
+
+    const ids = new Map(filesWithAbsPath.map((d) => [d.id, d.absPath]));
+
+    const loaders = new Map(
+      filesWithAbsPath.map((d) => [d.absPath, d.load]),
+    );
+
+    return { ids, loaders };
+  };

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

@@ -1,6 +1,6 @@
 {{={= =}=}}
 {
-  "name": "wasp",
+  "name": "{= sdkPackageName =}",
   "version": "1.0.0",
   "private": true,
   "type": "module",
@@ -64,8 +64,6 @@
       {=!  Used by our code, undocumented (but accessible) for users. =}
       "./server/auth/email": "./dist/server/auth/email/index.js",
       {=!  Used by our code, undocumented (but accessible) for users. =}
-      "./client/test/*": "./dist/client/test/*.js",
-      {=!  Used by our code, undocumented (but accessible) for users. =}
       "./server/crud/*": "./dist/server/crud/*.js",
       {=!  Used by our code, undocumented (but accessible) for users. =}
       "./server/email/core/types": "./dist/server/email/core/types.js",
@@ -113,14 +111,18 @@
       "./server/operations": "./dist/server/operations/index.js",
       "./client/router": "./dist/client/router/index.js",
       "./client/test": "./dist/client/test/index.js",
+      "./client/test/setup": "./dist/client/test/setup.js",
       "./client/hooks": "./dist/client/hooks.js",
       "./client": "./dist/client/index.js",
-      "./dev": "./dist/dev/index.js",
       "./env": "./dist/env/index.js",
       {=! Private: [client] =}
       "./env/validation": "./dist/env/validation.js",
       {=! Private: [client, sdk] =}
       "./client/env/schema": "./dist/client/env/schema.js",
+      {=! Private: [client] =}
+      "./client/app": "./dist/client/app/index.jsx",
+      {=! Private: [client] =}
+      "./client/vite": "./dist/client/vite/index.js",
 
       {=! todo(filip): Fixes below are for type errors in 0.13.1, remove ASAP =}
       {=! Used by our code (SDK for full-stack type safety), undocumented (but accessible) for users. =}

package/data/Generator/templates/sdk/wasp/scripts/copy-assets.js

@@ -1,14 +1,74 @@
 import * as fs from "node:fs/promises"
 import * as path from "node:path"
 
-const base = path.resolve(import.meta.dirname, "..");
+const base = path.resolve(import.meta.dirname, "..")
 
-const globs = ["./auth/forms/**/*.css"];
+await copyAssets([
+  "./auth/forms/**/*.css",
+  "./client/app/components/**/*.css",
+  "./client/vite/virtual-files/files/**/*.*",
+])
 
-for await (const file of fs.glob(globs, { cwd: base })) {
-  const src = path.join(base, file);
-  const dest = path.join(base, "dist", file);
+async function copyAssets(globs) {
+  const sourceFiles = await Array.fromAsync(fs.glob(globs, { cwd: base }))
+  const { copied, skipped } = await copyChangedFiles(sourceFiles)
+  console.log(`[copy-assets] ${copied} copied, ${skipped} skipped`)
+}
+
+async function copyChangedFiles(sourceFiles) {
+  let copied = 0
+  let skipped = 0
+
+  for (const file of sourceFiles) {
+    const sourcePath = getSourcePath(file)
+    const destPath = getDestinationPath(file)
+    try {
+      if (await shouldCopyFile(sourcePath, destPath)) {
+        await copyFile(sourcePath, destPath)
+        copied++
+      } else {
+        skipped++
+      }
+    } catch (error) {
+      console.error(`[copy-assets] Error processing ${file}:`, error.message)
+      throw error
+    }
+  }
+
+  return { copied, skipped }
+}
+
+/**
+ * File should be copied if:
+ * - It doesn't exist in the destination directory.
+ * - Its modification time is newer than the destination file.
+ *
+ * We want to avoid needless copying of files to avoid triggering
+ * Vite's file watcher which can cause full page reloads when not
+ * necessary.
+ */
+async function shouldCopyFile(sourcePath, destPath) {
+  try {
+    const [sourceStat, destStat] = await Promise.all([
+      fs.stat(sourcePath),
+      fs.stat(destPath),
+    ])
+    return sourceStat.mtimeMs > destStat.mtimeMs
+  } catch {
+    // Most likely the destination doesn't exist, so we should copy the file.
+    return true
+  }
+}
+
+async function copyFile(sourcePath, destPath) {
+  await fs.mkdir(path.dirname(destPath), { recursive: true })
+  await fs.copyFile(sourcePath, destPath)
+}
+
+function getSourcePath(file) {
+  return path.join(base, file)
+}
 
-  await fs.mkdir(path.dirname(dest), { recursive: true });
-  await fs.copyFile(src, dest);
+function getDestinationPath(file) {
+  return path.join(base, "dist", file)
 }

package/data/Generator/templates/sdk/wasp/server/auth/hooks.ts

@@ -184,5 +184,8 @@ export type OAuthData = {
   {=# enabledProviders.isKeycloakAuthEnabled =}
   | { providerName: 'keycloak'; tokens: import('arctic').KeycloakTokens }
   {=/ enabledProviders.isKeycloakAuthEnabled =}
+  {=# enabledProviders.isMicrosoftAuthEnabled =}
+  | { providerName: 'microsoft'; tokens: import('arctic').MicrosoftEntraIdTokens }
+  {=/ enabledProviders.isMicrosoftAuthEnabled =}
   | never
 )

package/data/Generator/templates/sdk/wasp/server/auth/oauth/index.ts

@@ -22,6 +22,10 @@ export { github } from './providers/github.js';
 // PUBLIC API
 export { keycloak } from './providers/keycloak.js';
 {=/ enabledProviders.isKeycloakAuthEnabled =}
+{=# enabledProviders.isMicrosoftAuthEnabled =}
+// PUBLIC API
+export { microsoft } from './providers/microsoft.js';
+{=/ enabledProviders.isMicrosoftAuthEnabled =}
 
 // PRIVATE API
 export {

package/data/Generator/templates/sdk/wasp/server/auth/oauth/providers/microsoft.ts

@@ -0,0 +1,23 @@
+{{={= =}=}}
+import { MicrosoftEntraId } from 'arctic';
+
+import { getRedirectUriForCallback } from '../redirect.js';
+import { defineProvider } from '../provider.js';
+import { env } from '../../../env.js';
+
+const id = '{= providerId =}';
+const displayName = '{= displayName =}';
+
+const oAuthClient = new MicrosoftEntraId(
+  env.MICROSOFT_TENANT_ID,
+  env.MICROSOFT_CLIENT_ID,
+  env.MICROSOFT_CLIENT_SECRET,
+  getRedirectUriForCallback(id).toString(),
+);
+
+// PUBLIC API
+export const microsoft = defineProvider({
+  id,
+  displayName,
+  oAuthClient,
+});