veryfront 0.1.111 → 0.1.113

package/src/src/modules/react-loader/ssr-module-loader/http-bundle-helpers.ts

@@ -36,50 +36,28 @@ function extractVfModulePaths(code: string): string[] {
 }
 
 /**
- * Recursively extract all HTTP bundle paths from code and any VF modules it imports.
- * This ensures transitive HTTP bundle dependencies through VF modules are discovered.
+ * Visit VF module code blocks imported by the given module, including nested VF modules.
+ * The visitor receives both the module code and the absolute vfmod file path.
  */
-export async function extractAllHttpBundlePathsRecursive(
+export async function visitImportedVfModules(
   code: string,
-): Promise<Array<{ path: string; hash: string }>> {
-  const allBundles: Array<{ path: string; hash: string }> = [];
-  const seenHashes = new Set<string>();
+  visitor: (vfModuleCode: string, vfModulePath?: string) => void | Promise<void>,
+): Promise<void> {
   const seenVfModules = new Set<string>();
-  const fs = createFileSystem();
-
-  // Helper to add bundles without duplicates
-  const addBundles = (bundles: Array<{ path: string; hash: string }>) => {
-    for (const bundle of bundles) {
-      if (!seenHashes.has(bundle.hash)) {
-        seenHashes.add(bundle.hash);
-        allBundles.push(bundle);
-      }
-    }
-  };
-
-  // Process initial code
-  const directBundles = extractHttpBundlePaths(code);
-  addBundles(directBundles);
-
-  // Process VF module imports recursively
   const pendingVfModules = extractVfModulePaths(code);
+  const fs = createFileSystem();
 
   while (pendingVfModules.length > 0) {
     const vfModulePath = pendingVfModules.pop()!;
     if (seenVfModules.has(vfModulePath)) continue;
     seenVfModules.add(vfModulePath);
 
-    // Check if the VF module exists locally
     if (!(await exists(vfModulePath))) continue;
 
     try {
       const vfModuleCode = await fs.readTextFile(vfModulePath);
+      await visitor(vfModuleCode, vfModulePath);
 
-      // Extract HTTP bundles from this VF module
-      const vfBundles = extractHttpBundlePaths(vfModuleCode);
-      addBundles(vfBundles);
-
-      // Extract more VF modules for recursive processing
       const nestedVfModules = extractVfModulePaths(vfModuleCode);
       for (const nestedPath of nestedVfModules) {
         if (!seenVfModules.has(nestedPath)) {
@@ -90,6 +68,37 @@ export async function extractAllHttpBundlePathsRecursive(
       /* expected: VF module file may fail to read */
     }
   }
+}
+
+/**
+ * Recursively extract all HTTP bundle paths from code and any VF modules it imports.
+ * This ensures transitive HTTP bundle dependencies through VF modules are discovered.
+ */
+export async function extractAllHttpBundlePathsRecursive(
+  code: string,
+): Promise<Array<{ path: string; hash: string }>> {
+  const allBundles: Array<{ path: string; hash: string }> = [];
+  const seenHashes = new Set<string>();
+
+  // Helper to add bundles without duplicates
+  const addBundles = (bundles: Array<{ path: string; hash: string }>) => {
+    for (const bundle of bundles) {
+      if (!seenHashes.has(bundle.hash)) {
+        seenHashes.add(bundle.hash);
+        allBundles.push(bundle);
+      }
+    }
+  };
+
+  // Process initial code
+  const directBundles = extractHttpBundlePaths(code);
+  addBundles(directBundles);
+
+  await visitImportedVfModules(code, (vfModuleCode) => {
+    // Extract HTTP bundles from this VF module
+    const vfBundles = extractHttpBundlePaths(vfModuleCode);
+    addBundles(vfBundles);
+  });
 
   return allBundles;
 }
@@ -134,14 +143,14 @@ export function extractHttpBundlePaths(code: string): Array<{ path: string; hash
  */
 export function extractAllFilePaths(code: string): string[] {
   // Create regex per call to avoid shared lastIndex state across concurrent calls.
-  const allFilePathsPattern = /file:\/\/([^"'\s]+\.(?:mjs|js))/gi;
+  const allFilePathsPattern = /file:\/\/([^"'\s]+\.(?:mjs|js|tsx|ts|jsx)(?:\?[^"'\s]*)?)/gi;
 
   const paths: string[] = [];
   const seen = new Set<string>();
 
   let match: RegExpExecArray | null;
   while ((match = allFilePathsPattern.exec(code)) !== null) {
-    const path = match[1];
+    const path = match[1]?.replace(/\?.*$/, "");
 
     if (!path || seen.has(path)) continue;
 
@@ -152,6 +161,31 @@ export function extractAllFilePaths(code: string): string[] {
   return paths;
 }
 
+/**
+ * Extract all file:// paths from cached code and any transitively imported VF modules.
+ * This catches stale pod-local paths that only appear in nested vfmod dependencies.
+ */
+export async function extractAllFilePathsRecursive(code: string): Promise<string[]> {
+  const paths: string[] = [];
+  const seen = new Set<string>();
+
+  const addPaths = (entries: string[]) => {
+    for (const path of entries) {
+      if (seen.has(path)) continue;
+      seen.add(path);
+      paths.push(path);
+    }
+  };
+
+  addPaths(extractAllFilePaths(code));
+
+  await visitImportedVfModules(code, (vfModuleCode) => {
+    addPaths(extractAllFilePaths(vfModuleCode));
+  });
+
+  return paths;
+}
+
 /**
  * Track modules whose HTTP bundles have been verified, keyed by tempPath:contentHash.
  * Bounded LRU to prevent unbounded memory growth in long-running pods.

package/src/src/modules/react-loader/ssr-module-loader/loader.ts

@@ -460,6 +460,7 @@ export class SSRModuleLoader {
           projectId: this.options.projectId,
           contentSourceId: this.options.contentSourceId,
         },
+        this.options.reactVersion,
       );
 
       if (mdxCacheResult.status === "hit") {

package/src/src/modules/react-loader/ssr-module-loader/ssr-cache-manager.ts

@@ -20,8 +20,8 @@ import { ensureHttpBundlesExist } from "../../../transforms/esm/http-cache.js";
 import { getHttpBundleCacheDir, getMdxEsmCacheDir } from "../../../utils/cache-dir.js";
 import { globalModuleCache, globalTmpDirs } from "./cache/index.js";
 import {
-  extractAllFilePaths,
-  extractHttpBundlePaths,
+  extractAllFilePathsRecursive,
+  extractAllHttpBundlePathsRecursive,
   verifiedHttpBundlePaths,
 } from "./http-bundle-helpers.js";
 import { buildTempModulePath, buildTmpDirPath, getTmpDirCacheKey } from "./tmp-paths.js";
@@ -219,7 +219,7 @@ export class SSRCacheManager {
     filePath: string,
     source: "memory-cache" | "redis-cache",
   ): Promise<boolean> {
-    const bundlePaths = extractHttpBundlePaths(code);
+    const bundlePaths = await extractAllHttpBundlePathsRecursive(code);
     if (bundlePaths.length === 0) return false;
 
     const cacheDir = getHttpBundleCacheDir();
@@ -237,7 +237,7 @@ export class SSRCacheManager {
   }
 
   private async hasMissingLocalPaths(code: string, filePath: string): Promise<boolean> {
-    const allPaths = extractAllFilePaths(code);
+    const allPaths = await extractAllFilePathsRecursive(code);
     let hasMissingPath = false;
 
     for (const path of allPaths) {

package/src/src/rendering/orchestrator/html.ts

@@ -19,6 +19,7 @@ import type {
   PageBundle,
 } from "../../types/index.js";
 import { DEFAULT_DASHBOARD_PORT, rendererLogger } from "../../utils/index.js";
+import { escapeHtml } from "../../utils/html-escape.js";
 import type { RenderOptions } from "./types.js";
 import { injectElementSelectors } from "../../studio/element-selector-injector.js";
 import { computeSourceHash } from "../../studio/hash-utils.js";
@@ -36,6 +37,108 @@ import type { ResolvedContentContext } from "../../platform/adapters/fs/veryfron
 
 const logger = rendererLogger.component("html-generator");
 
+function findTagEnd(html: string, start: number): number {
+  let activeQuote: '"' | "'" | null = null;
+
+  for (let index = start + 1; index < html.length; index++) {
+    const char = html[index];
+
+    if (activeQuote) {
+      if (char === activeQuote) activeQuote = null;
+      continue;
+    }
+
+    if (char === '"' || char === "'") {
+      activeQuote = char;
+      continue;
+    }
+
+    if (char === ">") return index;
+  }
+
+  return -1;
+}
+
+function getOpeningTagName(tag: string): "script" | "style" | undefined {
+  const match = /^<\s*([a-zA-Z][\w:-]*)/u.exec(tag);
+  const tagName = match?.[1]?.toLowerCase();
+  if (tagName === "script" || tagName === "style") return tagName;
+  return undefined;
+}
+
+function injectNonceIntoOpeningTag(tag: string, escapedNonce: string): string {
+  if (/\bnonce\s*=/iu.test(tag)) return tag;
+
+  const closeIndex = tag.lastIndexOf(">");
+  if (closeIndex === -1) return tag;
+
+  const insertAt = /\/\s*>$/u.test(tag) ? closeIndex - 1 : closeIndex;
+  return `${tag.slice(0, insertAt)} nonce="${escapedNonce}"${tag.slice(insertAt)}`;
+}
+
+function addNonceToRenderedTags(html: string, nonce?: string): string {
+  if (!nonce) return html;
+
+  const escapedNonce = escapeHtml(nonce);
+  const lowerHtml = html.toLowerCase();
+  let result = "";
+  let index = 0;
+  let rawTextTag: "script" | "style" | null = null;
+
+  while (index < html.length) {
+    if (rawTextTag) {
+      const closingIndex = lowerHtml.indexOf(`</${rawTextTag}`, index);
+      if (closingIndex === -1) {
+        result += html.slice(index);
+        break;
+      }
+
+      result += html.slice(index, closingIndex);
+      index = closingIndex;
+      rawTextTag = null;
+      continue;
+    }
+
+    if (html.startsWith("<!--", index)) {
+      const commentEnd = html.indexOf("-->", index + 4);
+      const endIndex = commentEnd === -1 ? html.length : commentEnd + 3;
+      result += html.slice(index, endIndex);
+      index = endIndex;
+      continue;
+    }
+
+    if (html[index] !== "<") {
+      result += html[index];
+      index++;
+      continue;
+    }
+
+    const tagEnd = findTagEnd(html, index);
+    if (tagEnd === -1) {
+      result += html.slice(index);
+      break;
+    }
+
+    const tag = html.slice(index, tagEnd + 1);
+    const tagName = getOpeningTagName(tag);
+
+    if (!tagName) {
+      result += tag;
+      index = tagEnd + 1;
+      continue;
+    }
+
+    result += injectNonceIntoOpeningTag(tag, escapedNonce);
+    index = tagEnd + 1;
+
+    if (!/\/\s*>$/u.test(tag)) {
+      rawTextTag = tagName;
+    }
+  }
+
+  return result;
+}
+
 export interface HTMLGeneratorConfig {
   projectDir: string;
   adapter: RuntimeAdapter;
@@ -69,11 +172,13 @@ export class HTMLGenerator {
     const html = isFullHTMLDocument(context.html)
       ? await this.handleFullHTMLDocument(context)
       : await this.wrapHTMLFragment(context);
+    const finalHtml = context.options?.studioEmbed ? injectElementSelectors(html) : html;
 
-    if (!context.options?.studioEmbed) return html;
+    if (context.options?.studioEmbed) {
+      logger.debug("Injected element selectors for Studio");
+    }
 
-    logger.debug("Injected element selectors for Studio");
-    return injectElementSelectors(html);
+    return addNonceToRenderedTags(finalHtml, context.options?.nonce);
   }
 
   async generateHTMLStream(
@@ -104,7 +209,10 @@ export class HTMLGenerator {
     );
 
     const encoder = new TextEncoder();
-    const fullHtml = `${start}${reactContent}${end}`;
+    const fullHtml = addNonceToRenderedTags(
+      `${start}${reactContent}${end}`,
+      context.options?.nonce,
+    );
 
     return new ReadableStream({
       start(controller) {
@@ -135,6 +243,7 @@ export class HTMLGenerator {
       devPort: this.config.config?.dev?.port || DEFAULT_DASHBOARD_PORT,
       pagePath,
       isClientPage,
+      nonce: context.options?.nonce,
       importMapJson,
     });
 

package/src/src/rendering/orchestrator/module-loader/index.ts

@@ -234,6 +234,7 @@ export async function transformModuleWithDeps(
           contentSourceId,
         }
         : undefined,
+      config.reactVersion,
     );
     if (mdxCacheResult.status === "hit") {
       moduleCache.set(cacheKey, mdxCacheResult.path);
@@ -466,7 +467,7 @@ export async function transformModuleWithDeps(
 
   if (contentSourceId) {
     const normalizedPath = `_vf_modules/${relativePath.replace(/\.(tsx?|jsx|mdx)$/, ".js")}`;
-    const mdxCacheKey = buildMdxEsmPathCacheKey(normalizedPath);
+    const mdxCacheKey = buildMdxEsmPathCacheKey(normalizedPath, config.reactVersion);
     const cache = await getModulePathCache(tmpDir);
     cache.set(mdxCacheKey, tempFilePath);
 

package/src/src/rendering/snippet-renderer.ts

@@ -329,7 +329,7 @@ export function renderSnippet(
 function generateErrorHTML(error: unknown, options: SnippetRenderOptions): string {
   const message = error instanceof Error ? error.message : String(error);
   const stack = error instanceof Error ? error.stack : undefined;
-  const nonce = options.nonce ? ` nonce="${options.nonce}"` : "";
+  const nonce = options.nonce ? ` nonce="${escapeHtml(options.nonce)}"` : "";
   const stackHtml = options.mode === "development" && stack
     ? `<div class="error-stack">${escapeHtml(stack)}</div>`
     : "";

package/src/src/security/http/response/security-handler.ts

@@ -21,8 +21,8 @@ export function generateNonce(): string {
  * - Scripts: nonce-based + cdn.jsdelivr.net (Scalar API docs, html2canvas,
  *   React UMD, browser inference)
  * - Styles: 'self' + 'unsafe-inline' + nonce + Google Fonts + cdn.veryfront.com
- *   (CSS-in-JS needs unsafe-inline; nonce as migration path; veryfront CDN for
- *   markdown rendering styles)
+ *   plus style-src-attr 'unsafe-inline' so React style="" attributes remain
+ *   compatible while inline <style> tags continue to use the nonce
  * - Images/media/fonts: 'self' + data: + https: + cdn.veryfront.com
  * - Connections: 'self' + wss: + https: (WebSocket for HMR/live reload, API calls)
  * - Objects: 'none' (block Flash/plugins)
@@ -36,6 +36,7 @@ function buildDefaultCSP(nonce: string): string {
     `default-src 'self'`,
     `script-src 'self' 'nonce-${nonce}' https://cdn.jsdelivr.net`,
     `style-src 'self' 'unsafe-inline' 'nonce-${nonce}' https://fonts.googleapis.com https://cdn.veryfront.com`,
+    `style-src-attr 'unsafe-inline'`,
     `img-src 'self' data: https:`,
     `font-src 'self' data: https://fonts.gstatic.com https://cdn.veryfront.com`,
     `connect-src 'self' wss: https:`,

package/src/src/server/dev-server/error-overlay/html-template.ts

@@ -212,6 +212,7 @@ export function generateErrorHTML(
   errorInfo: ErrorInfo,
   suggestion?: string,
   projectSlug?: string,
+  nonce?: string,
 ): string {
   const errorType = escapeHtml(formatErrorType(errorInfo.type));
   const errorName = escapeHtml(errorInfo.error.name);
@@ -221,6 +222,7 @@ export function generateErrorHTML(
   const errorColumn = errorInfo.column ? escapeHtml(String(errorInfo.column)) : "";
   const errorSuggestion = suggestion ? escapeHtml(suggestion) : "";
   const errorStack = errorInfo.error.stack ? escapeHtml(errorInfo.error.stack) : "";
+  const nonceAttr = nonce ? ` nonce="${escapeHtml(nonce)}"` : "";
 
   const fileSection = errorFile
     ? `
@@ -258,7 +260,7 @@ export function generateErrorHTML(
 <head>
   <meta charset="UTF-8">
   <title>${errorType} Error - Veryfront</title>
-  <style>
+  <style${nonceAttr}>
     body {
       margin: 0;
       padding: 20px;
@@ -365,7 +367,7 @@ export function generateErrorHTML(
     </div>
     ${fixButtonHtml}
   </div>
-  <script>${
+  <script${nonceAttr}>${
     projectSlug
       ? `
     (function() {

package/src/src/server/dev-server/error-overlay/overlay-renderer.ts

@@ -4,11 +4,12 @@ import { generateErrorHTML, generateRuntimeScript } from "./html-template.js";
 export const ErrorOverlay = {
   getRuntime: generateRuntimeScript,
   getSuggestion,
-  createHTML(errorInfo: ErrorInfo, projectSlug?: string): string {
+  createHTML(errorInfo: ErrorInfo, projectSlug?: string, nonce?: string): string {
     return generateErrorHTML(
       errorInfo,
       errorInfo.suggestion ?? getSuggestion(errorInfo.error),
       projectSlug,
+      nonce,
     );
   },
 };

package/src/src/server/services/rendering/ssr.service.ts

@@ -205,7 +205,7 @@ export class SSRService implements SSRServiceLike {
       };
     } catch (error) {
       endRenderSession(renderSessionId);
-      return this.handleRenderError(error, ctx, slug, request);
+      return this.handleRenderError(error, ctx, slug, request, nonce);
     }
   }
 
@@ -214,6 +214,7 @@ export class SSRService implements SSRServiceLike {
     ctx: HandlerContext,
     slug: string,
     request: dntShim.Request,
+    nonce?: string,
   ): SSRRenderResult {
     const errorObj = error instanceof Error ? error : new Error(String(error));
     const isDev = ctx.isLocalProject || ctx.requestContext?.mode === "preview";
@@ -275,12 +276,16 @@ export class SSRService implements SSRServiceLike {
       const location = sourceFile ? parseErrorLocation(errorObj, sourceFile) : {};
       return {
         status: HTTP_INTERNAL_SERVER_ERROR,
-        html: ErrorOverlay.createHTML({
-          error: errorObj,
-          type: "runtime",
-          ...(sourceFile ? { file: sourceFile } : {}),
-          ...location,
-        }, ctx.projectSlug),
+        html: ErrorOverlay.createHTML(
+          {
+            error: errorObj,
+            type: "runtime",
+            ...(sourceFile ? { file: sourceFile } : {}),
+            ...location,
+          },
+          ctx.projectSlug,
+          nonce,
+        ),
         isStreaming: false,
         cacheStrategy: "no-cache",
         error: errorObj,