veryfront 0.1.128 → 0.1.129

package/src/src/errors/logging.ts

@@ -22,6 +22,24 @@ export interface ErrorLogEntry {
   context?: Record<string, unknown>;
 }
 
+function toContextRecord(value: unknown): Record<string, unknown> | undefined {
+  return value && typeof value === "object" && !Array.isArray(value)
+    ? value as Record<string, unknown>
+    : undefined;
+}
+
+function mergeContext(
+  errorContext: unknown,
+  extraContext?: Record<string, unknown>,
+): Record<string, unknown> | undefined {
+  const baseContext = toContextRecord(errorContext);
+
+  if (!baseContext) return extraContext;
+  if (!extraContext) return baseContext;
+
+  return { ...baseContext, ...extraContext };
+}
+
 /**
  * Log a VeryfrontError with structured formatting
  *
@@ -35,6 +53,7 @@ export function logError(
   error: VeryfrontError,
   context?: Record<string, unknown>,
 ): void {
+  const mergedContext = mergeContext(error.context, context);
   const entry: ErrorLogEntry = {
     level: "error",
     slug: error.slug,
@@ -43,11 +62,9 @@ export function logError(
     detail: error.detail,
     suggestion: error.suggestion,
     status: error.status,
-    docs: `https://veryfront.com/docs/errors/${error.slug}`,
+    docs: error.getDocsUrl(),
     timestamp: new Date().toISOString(),
-    context: context
-      ? { ...(error.context as Record<string, unknown> ?? {}), ...context }
-      : error.context as Record<string, unknown> | undefined,
+    context: mergedContext,
   };
 
   if (isProduction()) {
@@ -64,9 +81,6 @@ export function logError(
       serverLogger.error(`  💡 Suggestion: ${error.suggestion}`);
     }
     serverLogger.error(`  📚 Docs: ${entry.docs}`);
-    const mergedContext = context
-      ? { ...(error.context as Record<string, unknown> ?? {}), ...context }
-      : error.context;
     if (mergedContext) {
       serverLogger.error(`  Context: ${JSON.stringify(mergedContext, null, 2)}`);
     }

package/src/src/errors/user-friendly/error-formatter.ts

@@ -5,31 +5,30 @@ import { identifyError } from "./error-identifier.js";
 
 const errorColor = "\x1b[38;2;239;68;68m"; // Red
 
-function buildSolutionLines(solution: (typeof ERROR_SOLUTIONS)[string]): string[] {
+function buildSolutionDetailsLines(
+  solution: (typeof ERROR_SOLUTIONS)[string],
+  options?: {
+    exampleLabel?: string;
+  },
+): string[] {
   const lines: string[] = [];
 
-  if (solution.message) {
-    lines.push(yellow("Problem: ") + solution.message, "");
-  }
-
   if (solution.steps?.length) {
-    lines.push(cyan("How to fix:"));
+    lines.push("", cyan("How to fix:"));
     for (const [i, step] of solution.steps.entries()) {
       lines.push(`  ${dim(`${i + 1}.`)} ${step}`);
     }
-    lines.push("");
   }
 
   if (solution.example) {
-    lines.push(cyan("Example:"), "");
+    lines.push("", options?.exampleLabel ?? cyan("Example:"));
     for (const line of solution.example.split("\n")) {
       lines.push(`  ${dim(line)}`);
     }
-    lines.push("");
   }
 
   if (solution.docs) {
-    lines.push(dim("Learn more: ") + cyan(solution.docs), "");
+    lines.push("", dim("Learn more: ") + cyan(solution.docs));
   }
 
   return lines;
@@ -50,24 +49,7 @@ export function formatErrorBox(error: Error): string {
     if (solution.message) {
       content.push("", dim(solution.message));
     }
-
-    if (solution.steps?.length) {
-      content.push("", cyan("How to fix:"));
-      for (const [i, step] of solution.steps.entries()) {
-        content.push(`  ${dim(`${i + 1}.`)} ${step}`);
-      }
-    }
-
-    if (solution.example) {
-      content.push("", dim("Example:"));
-      for (const line of solution.example.split("\n")) {
-        content.push(`  ${dim(line)}`);
-      }
-    }
-
-    if (solution.docs) {
-      content.push("", dim("Learn more: ") + cyan(solution.docs));
-    }
+    content.push(...buildSolutionDetailsLines(solution, { exampleLabel: dim("Example:") }));
   }
 
   return box(content.join("\n"), {
@@ -90,7 +72,10 @@ export function formatUserError(error: Error): string {
   const solution = ERROR_SOLUTIONS[errorKey];
 
   if (solution) {
-    output.push(...buildSolutionLines(solution));
+    if (solution.message) {
+      output.push(yellow("Problem: ") + solution.message);
+    }
+    output.push(...buildSolutionDetailsLines(solution), "");
     return output.join("\n");
   }
 

package/src/src/fs/index.ts

@@ -1,11 +1,11 @@
 /**
- * Filesystem operations and path utilities.
+ * Public filesystem, path, and cwd utilities.
  *
  * @module fs
  *
  * @example File operations
  * ```ts
- * import { readTextFile, writeTextFile, mkdir, exists } from "veryfront/fs";
+ * import { exists, mkdir, readTextFile, writeTextFile } from "veryfront/fs";
  *
  * const content = await readTextFile("./data/config.json");
  * await writeTextFile("./output/result.json", JSON.stringify(data));
@@ -19,42 +19,33 @@
  * const filePath = join("src", "pages", "index.tsx");
  * const dir = dirname(filePath); // "src/pages"
  * ```
+ *
+ * @example Working directory
+ * ```ts
+ * import { cwd, resolve } from "veryfront/fs";
+ *
+ * const configPath = resolve(cwd(), "veryfront.config.ts");
+ * ```
  */
-
-// veryfront/fs — Filesystem operations + path utilities
-//
-// Slim public surface for file I/O, path manipulation, and
-// project context (cwd). Re-exports from the platform compat layer.
-
-// ---------------------------------------------------------------------------
-// Filesystem
-// ---------------------------------------------------------------------------
 import "../../_dnt.polyfills.js";
 
 
-export { createFileSystem } from "../platform/compat/fs.js";
-export { readTextFile } from "../platform/compat/fs.js";
-export { writeTextFile } from "../platform/compat/fs.js";
-export { mkdir } from "../platform/compat/fs.js";
-export { exists } from "../platform/compat/fs.js";
-export { remove } from "../platform/compat/fs.js";
-export { readDir } from "../platform/compat/fs.js";
-export type { FileSystem } from "../platform/compat/fs.js";
-
-// ---------------------------------------------------------------------------
-// Path utilities
-// ---------------------------------------------------------------------------
-
+export {
+  createFileSystem,
+  exists,
+  type FileSystem,
+  mkdir,
+  readDir,
+  readTextFile,
+  remove,
+  writeTextFile,
+} from "../platform/compat/fs.js";
 export {
   basename,
   dirname,
   extname,
   join,
-} from "../platform/compat/path/basic-operations.js";
-export { resolve } from "../platform/compat/path/resolution.js";
-
-// ---------------------------------------------------------------------------
-// Project context
-// ---------------------------------------------------------------------------
+  resolve,
+} from "../platform/compat/path/index.js";
 
 export { cwd } from "../platform/compat/process.js";

package/src/src/html/dev-scripts.ts

@@ -1,11 +1,11 @@
-import { escapeHtml } from "./html-escape.js";
+import { buildNonceAttribute } from "./html-escape.js";
 
 export function getPreviewStylesheetLink(): string {
   return `<link id="vf-tailwind-css" rel="stylesheet" href="/_vf_styles/styles.css?t=${Date.now()}">`;
 }
 
 export function getDevStyles(nonce?: string): string {
-  const nonceAttr = nonce ? ` nonce="${escapeHtml(nonce)}"` : "";
+  const nonceAttr = buildNonceAttribute(nonce);
 
   return `
   <style${nonceAttr}>
@@ -37,12 +37,8 @@ export function getDevStyles(nonce?: string): string {
   </style>`;
 }
 
-function getNonceAttr(nonce?: string): string {
-  return nonce ? ` nonce="${escapeHtml(nonce)}"` : "";
-}
-
 export function getDevScripts(_hmrPort?: number, nonce?: string): string {
-  const nonceAttr = getNonceAttr(nonce);
+  const nonceAttr = buildNonceAttribute(nonce);
 
   return `
   <script type="module" src="/_veryfront/rsc/client.js"${nonceAttr}></script>
@@ -50,7 +46,7 @@ export function getDevScripts(_hmrPort?: number, nonce?: string): string {
 }
 
 export function getProdScripts(slug: string, nonce?: string): string {
-  const nonceAttr = getNonceAttr(nonce);
+  const nonceAttr = buildNonceAttribute(nonce);
   const encodedSlug = encodeURIComponent(slug);
 
   return `
@@ -72,7 +68,7 @@ interface StudioScriptOptions {
 }
 
 export function getStudioScripts(options: StudioScriptOptions): string {
-  const nonceAttr = getNonceAttr(options.nonce);
+  const nonceAttr = buildNonceAttribute(options.nonce);
 
   const bridgeConfig: Record<string, unknown> = {
     projectId: options.projectId,

package/src/src/html/html-escape.ts

@@ -14,3 +14,7 @@ export function buildAttributes(attrs: Record<string, string>): string {
     .map(([key, value]) => `${key}="${escapeHTML(value)}"`)
     .join(" ");
 }
+
+export function buildNonceAttribute(nonce?: string): string {
+  return nonce ? ` nonce="${escapeHTML(nonce)}"` : "";
+}

package/src/src/html/html-injection.ts

@@ -7,7 +7,7 @@ import {
   generateScriptTags,
   generateStyleTags,
 } from "./tag-generators.js";
-import { escapeHtml } from "./html-escape.js";
+import { buildNonceAttribute } from "./html-escape.js";
 import {
   getDevScripts,
   getDevStyles,
@@ -90,7 +90,7 @@ export function injectHTMLContent(
 
   // Inject import map into <head> for ESM module resolution (must be before any module scripts)
   if (options.importMapJson && /<\/head>/i.test(html)) {
-    const nonceAttr = options.nonce ? ` nonce="${escapeHtml(options.nonce)}"` : "";
+    const nonceAttr = buildNonceAttribute(options.nonce);
     const importMapTag =
       `<script type="importmap"${nonceAttr}>\n${options.importMapJson}\n</script>`;
     html = html.replace(/<\/head>/i, `${importMapTag}\n</head>`);

package/src/src/html/html-shell-generator.ts

@@ -2,21 +2,27 @@ import type { ComponentProps, RenderMetadata } from "../types/index.js";
 import { resolveRelativePath } from "../modules/react-loader/path-resolver.js";
 import { withSpan } from "../observability/tracing/otlp-setup.js";
 import { SpanNames } from "../observability/tracing/span-names.js";
+import { profilePhase } from "../observability/request-profiler.js";
 import { serverLogger } from "../utils/logger/logger.js";
 import { isMarkdownPreview as checkMarkdownPreview } from "../transforms/md/utils.js";
 import {
   generateModulePreloadHintsFromManifest,
   getRouteManifest,
 } from "../modules/manifest/route-module-manifest.js";
-import { escapeHTML } from "./html-escape.js";
+import { buildNonceAttribute, escapeHTML } from "./html-escape.js";
 import {
   generateHydrationData,
   getDevScripts,
   getProdScripts,
+  PROD_HYDRATION_MODULE_PATH,
 } from "./hydration-script-builder/index.js";
 import { getPreviewStylesheetLink, getStudioScripts } from "./dev-scripts.js";
 import { processMetadata } from "./metadata-builder.js";
-import { extractCandidates, getDevStyles, getProjectCSS } from "./styles-builder/index.js";
+import {
+  extractCandidates,
+  getDevStyles as getErrorOverlayStyles,
+  getProjectCSS,
+} from "./styles-builder/index.js";
 import type { HTMLGenerationOptions } from "./types.js";
 import { buildImportMapJson, buildRootAttributes, shouldDisableLayout } from "./utils.js";
 
@@ -43,6 +49,15 @@ function getRelativePagePath(
   return resolveRelativePath(normalized, projectDir);
 }
 
+type ProjectCSSResult = Awaited<ReturnType<typeof getProjectCSS>> | null;
+
+function resolveProjectCSSScope(
+  options: HTMLGenerationOptions,
+  metaSlug?: string,
+): string {
+  return options.projectSlug || options.projectId || metaSlug || "default";
+}
+
 function generateModulePreloadHints(options: HTMLGenerationOptions): string {
   const hints: string[] = [];
   const addedUrls = new Set<string>();
@@ -75,7 +90,7 @@ function generateModulePreloadHints(options: HTMLGenerationOptions): string {
     return hints.join("\n  ");
   }
 
-  const projectSlug = options.projectId;
+  const projectSlug = options.projectSlug ?? options.projectId;
   const route = options.pagePath
     ? getRelativePagePath(options.pagePath, projectDir)
       .replace(/\.(tsx|ts|jsx|mdx)$/, "")
@@ -102,10 +117,19 @@ export function generateHTMLShellParts(
   params?: Record<string, string | string[]>,
   props?: ComponentProps,
   contentForTailwind?: string,
+  projectCSSPromise?: Promise<ProjectCSSResult>,
 ): Promise<{ start: string; end: string }> {
   return withSpan(
     SpanNames.HTML_GENERATE_SHELL_PARTS,
-    () => generateHTMLShellPartsImpl(meta, options, params, props, contentForTailwind),
+    () =>
+      generateHTMLShellPartsImpl(
+        meta,
+        options,
+        params,
+        props,
+        contentForTailwind,
+        projectCSSPromise,
+      ),
     {
       "html.slug": meta.slug || "",
       "html.has_content": !!contentForTailwind,
@@ -121,6 +145,7 @@ async function generateHTMLShellPartsImpl(
   params?: Record<string, string | string[]>,
   props?: ComponentProps,
   contentForTailwind?: string,
+  prefetchedProjectCSSPromise?: Promise<ProjectCSSResult>,
 ): Promise<{ start: string; end: string }> {
   const stylesheetContent = options.globalCSS;
 
@@ -134,18 +159,15 @@ async function generateHTMLShellPartsImpl(
     for (const cls of extractCandidates(contentForTailwind)) candidates.add(cls);
   }
 
-  const projectSlug = options.projectId || meta.slug || "default";
-  let cssHash = "";
-
-  // Only generate CSS for production mode (dev/preview uses link tag to StylesCSSHandler)
-  if (useProductionCSS && projectSlug !== "default") {
-    const projectCSS = await getProjectCSS(projectSlug, stylesheetContent, candidates, {
-      minify: true,
-      environment: options.environment,
-      buildMode: options.mode,
-    });
-    cssHash = projectCSS.hash;
-  }
+  const projectSlug = resolveProjectCSSScope(options, meta.slug);
+  const projectCSSPromise = prefetchedProjectCSSPromise ??
+    (useProductionCSS && projectSlug !== "default"
+      ? getProjectCSS(projectSlug, stylesheetContent, candidates, {
+        minify: true,
+        environment: options.environment,
+        buildMode: options.mode,
+      })
+      : Promise.resolve(null));
 
   const {
     effectiveTitle,
@@ -166,10 +188,18 @@ async function generateHTMLShellPartsImpl(
     meta.ssrHash,
   );
 
-  const importMapJson = await buildImportMapJson({
+  const skipDevHMR = isPreviewMode || options.noHmr;
+  // Error logger endpoint only enabled in local dev (returns 404 in preview/prod)
+  const skipErrorLogger = isPreviewMode;
+  // Enable dev scripts for local dev OR preview mode (for HMR support in Studio),
+  // unless a caller explicitly forces production client scripts for fair benchmarking.
+  const useDevScripts = !options.forceProductionScripts && (isLocalProject || isPreviewMode);
+
+  const importMapJsonPromise = buildImportMapJson({
     projectDir: options.projectDir,
     config: options.config,
     customImports: options.importMap,
+    pretty: useDevScripts,
   });
 
   const hydrationDataJson = generateHydrationData(
@@ -177,16 +207,11 @@ async function generateHTMLShellPartsImpl(
     params ?? {},
     props ?? {},
     options,
+    { pretty: useDevScripts },
   );
 
   const nonce = options.nonce ?? "";
 
-  const skipDevHMR = isPreviewMode || options.noHmr;
-  // Error logger endpoint only enabled in local dev (returns 404 in preview/prod)
-  const skipErrorLogger = isPreviewMode;
-  // Enable dev scripts for local dev OR preview mode (for HMR support in Studio)
-  const useDevScripts = isLocalProject || isPreviewMode;
-
   const modeScripts = useDevScripts
     ? getDevScripts(meta.slug || "", options.config, params, props, nonce, {
       skipDevHMR,
@@ -194,9 +219,10 @@ async function generateHTMLShellPartsImpl(
     })
     : getProdScripts(meta.slug || "", params, props, nonce);
 
-  const modeStyles = useDevScripts ? getDevStyles(nonce) : "";
+  const modeStyles = useDevScripts ? getErrorOverlayStyles(nonce) : "";
 
   const modulePreloadHints = generateModulePreloadHints(options);
+  const importMapJson = await profilePhase("html.import_map", () => importMapJsonPromise);
 
   // Preload critical React dependencies to avoid waterfall delays.
   // jsx-runtime is discovered late (only when modules execute), adding ~500ms latency.
@@ -205,8 +231,11 @@ async function generateHTMLShellPartsImpl(
   const criticalDepsPreload = jsxRuntimeUrl
     ? `<link rel="modulepreload" href="${jsxRuntimeUrl}">`
     : "";
+  const prodHydrationModulePreload = useDevScripts
+    ? ""
+    : `<link rel="modulepreload" href="${PROD_HYDRATION_MODULE_PATH}">`;
 
-  const nonceAttr = nonce ? ` nonce="${escapeHTML(nonce)}"` : "";
+  const nonceAttr = buildNonceAttribute(nonce);
 
   // Expose project slug for runtime error overlay "Fix in Veryfront" button
   const overlaySlug = options.projectId || meta.slug;
@@ -256,6 +285,8 @@ async function generateHTMLShellPartsImpl(
 
   let tailwindCSSBlock = "";
   if (useProductionCSS) {
+    const projectCSS = await profilePhase("html.project_css", () => projectCSSPromise);
+    const cssHash = projectCSS?.hash ?? "";
     if (cssHash) {
       tailwindCSSBlock = `<link rel="stylesheet" href="/_vf/css/${cssHash}.css">`;
     } else {
@@ -300,6 +331,7 @@ async function generateHTMLShellPartsImpl(
   <!-- Modulepreload hints for faster cold start -->
   ${modulePreloadHints}
   ${criticalDepsPreload}
+  ${prodHydrationModulePreload}
 
   <!-- Tailwind CSS: Server-side JIT compiled -->
   ${tailwindCSSBlock}
@@ -324,7 +356,7 @@ async function generateHTMLShellPartsImpl(
     })
     : "";
 
-  const previewHMRScript = isPreviewMode
+  const previewHMRScript = isPreviewMode && !options.forceProductionScripts
     ? `<script src="/_veryfront/preview-hmr.js"${nonceAttr}></script>`
     : "";
 
@@ -371,6 +403,7 @@ export function wrapInHTMLShell(
   options: HTMLGenerationOptions,
   params?: Record<string, string | string[]>,
   props?: ComponentProps,
+  projectCSSPromise?: Promise<ProjectCSSResult>,
 ): Promise<string> {
   return withSpan(
     SpanNames.HTML_WRAP_IN_SHELL,
@@ -382,6 +415,7 @@ export function wrapInHTMLShell(
         params,
         props,
         cleanedContent,
+        projectCSSPromise,
       );
       return `${start}${cleanedContent}${end}`;
     },

package/src/src/html/hydration-script-builder/dev-client-renderer.ts

@@ -1,8 +1,8 @@
 import { getLoaderScript, getRendererScript, getRouterScript } from "./templates/index.js";
-import { escapeHtml } from "../html-escape.js";
+import { buildNonceAttribute } from "../html-escape.js";
 
 export function generateDevClientRendererScript(nonce?: string): string {
-  const nonceAttr = nonce ? ` nonce="${escapeHtml(nonce)}"` : "";
+  const nonceAttr = buildNonceAttribute(nonce);
 
   return `
   <script type="module"${nonceAttr}>

package/src/src/html/hydration-script-builder/dev-component-manifest.ts

@@ -1,11 +1,11 @@
 import type { VeryfrontConfig } from "../../config/index.js";
-import { escapeHtml } from "../html-escape.js";
+import { buildNonceAttribute } from "../html-escape.js";
 
 export function generateDevComponentManifestScript(
   config: VeryfrontConfig,
   nonce?: string,
 ): string {
-  const nonceAttr = nonce ? ` nonce="${escapeHtml(nonce)}"` : "";
+  const nonceAttr = buildNonceAttribute(nonce);
   const components = config.dev?.components ?? [];
 
   return `

package/src/src/html/hydration-script-builder/dev-error-logger.ts

@@ -1,15 +1,9 @@
-import { escapeHtml } from "../html-escape.js";
-
-function getOpenScriptTag(nonce?: string): string {
-  return nonce ? `<script nonce="${escapeHtml(nonce)}">` : "<script>";
-}
+import { buildNonceAttribute } from "../html-escape.js";
 
 export function generateDevErrorLoggerScript(nonce?: string): string {
-  const openScriptTag = getOpenScriptTag(nonce);
-
   return `
   <!-- Client-side error logger -->
-  ${openScriptTag}
+  <script${buildNonceAttribute(nonce)}>
     (function() {
       const logToServer = (level, message, details) => {
         try {

package/src/src/html/hydration-script-builder/dev-scripts.ts

@@ -1,6 +1,6 @@
 import type { ComponentProps } from "../../types/index.js";
 import type { VeryfrontConfig } from "../../config/index.js";
-import { escapeHtml } from "../html-escape.js";
+import { buildNonceAttribute } from "../html-escape.js";
 import { generateDevErrorLoggerScript } from "./dev-error-logger.js";
 import { generateDevComponentManifestScript } from "./dev-component-manifest.js";
 import { generateDevClientRendererScript } from "./dev-client-renderer.js";
@@ -13,7 +13,7 @@ function generateHMRScript(
   // Skip dev HMR script when preview-hmr.js will be used instead
   if (skipDevHMR || !config.dev?.hmr) return "";
 
-  const nonceAttr = nonce ? ` nonce="${escapeHtml(nonce)}"` : "";
+  const nonceAttr = buildNonceAttribute(nonce);
   return `<script type="module" src="/_veryfront/hmr.js"${nonceAttr}></script>`;
 }
 

package/src/src/html/hydration-script-builder/hydration-data-generator.ts

@@ -32,6 +32,7 @@ export function generateHydrationData(
   params: Record<string, string | string[]>,
   props: ComponentProps,
   options: HTMLGenerationOptions,
+  serializeOptions?: { pretty?: boolean },
 ): string {
   const layouts = (options.nestedLayouts ?? [])
     .map((layout) => {
@@ -74,5 +75,5 @@ export function generateHydrationData(
     studioEmbed: options.studioEmbed,
   };
 
-  return JSON.stringify(data, null, 2);
+  return JSON.stringify(data, null, serializeOptions?.pretty ?? true ? 2 : undefined);
 }

package/src/src/html/hydration-script-builder/index.ts

@@ -13,5 +13,9 @@ export { generateDevErrorLoggerScript } from "./dev-error-logger.js";
 export { generateDevComponentManifestScript } from "./dev-component-manifest.js";
 export { generateDevClientRendererScript } from "./dev-client-renderer.js";
 
-export { getProdScripts } from "./prod-scripts.js";
+export {
+  generateProdHydrationModule,
+  getProdScripts,
+  PROD_HYDRATION_MODULE_PATH,
+} from "./prod-scripts.js";
 export { generateProdHydrationScript } from "./prod-hydration.js";

package/src/src/html/hydration-script-builder/prod-hydration.ts

@@ -1,5 +1,5 @@
 import type { ComponentProps } from "../../types/index.js";
-import { escapeHtml } from "../html-escape.js";
+import { buildNonceAttribute } from "../html-escape.js";
 
 export function generateProdHydrationScript(
   slug: string,
@@ -7,7 +7,7 @@ export function generateProdHydrationScript(
   props?: ComponentProps,
   nonce?: string,
 ): string {
-  const nonceAttr = nonce ? ` nonce="${escapeHtml(nonce)}"` : "";
+  const nonceAttr = buildNonceAttribute(nonce);
   const pageProps = JSON.stringify(props ?? {});
 
   return `

package/src/src/html/hydration-script-builder/prod-scripts.ts

@@ -1,5 +1,18 @@
 import { getLoaderScript, getRendererScript, getRouterScript } from "./templates/index.js";
-import { escapeHtml } from "../html-escape.js";
+import { buildNonceAttribute } from "../html-escape.js";
+
+export const PROD_HYDRATION_MODULE_PATH = "/_veryfront/hydration-runtime.js";
+
+export function generateProdHydrationModule(): string {
+  return [
+    `import * as React from 'react';`,
+    `import { RouterProvider, useRouter as useRouterFromModule } from 'veryfront/router';`,
+    `import { PageContextProvider } from 'veryfront/context';`,
+    getRouterScript().trim(),
+    getLoaderScript().trim(),
+    getRendererScript().trim(),
+  ].join("\n\n");
+}
 
 export function getProdScripts(
   _slug: string,
@@ -7,18 +20,6 @@ export function getProdScripts(
   _props?: Record<string, unknown>,
   nonce?: string,
 ): string {
-  const nonceAttr = nonce ? ` nonce="${escapeHtml(nonce)}"` : "";
-
-  return `
-  <script type="module"${nonceAttr}>
-    import * as React from 'react';
-    import { RouterProvider, useRouter as useRouterFromModule } from 'veryfront/router';
-    import { PageContextProvider } from 'veryfront/context';
-
-    ${getRouterScript()}
-
-    ${getLoaderScript()}
-
-    ${getRendererScript()}
-  </script>`;
+  const nonceAttr = buildNonceAttribute(nonce);
+  return `\n  <script type="module" src="${PROD_HYDRATION_MODULE_PATH}"${nonceAttr}></script>`;
 }

package/src/src/html/schemas/html.schema.ts

@@ -30,6 +30,7 @@ export const HTMLGenerationOptionsSchema = z.object({
   layoutProps: z.record(z.string(), z.record(z.string(), z.unknown())).optional(),
   studioEmbed: z.boolean().optional(),
   projectId: z.string().optional(),
+  projectSlug: z.string().optional(),
   pageId: z.string().optional(),
   sourceHash: z.string().optional(),
   colorScheme: colorSchemeSchema.optional(),
@@ -48,6 +49,7 @@ export const HTMLGenerationOptionsSchema = z.object({
   projectClasses: z.set(z.string()).optional(),
   isLocalProject: z.boolean().optional(),
   noHmr: z.boolean().optional(),
+  forceProductionScripts: z.boolean().optional(),
 });
 
 export const HydrationDataSchema = z.object({