veryfront 0.0.86 → 0.0.89

package/src/src/transforms/esm/package-registry.ts

@@ -9,23 +9,35 @@
 export const DEFAULT_REACT_VERSION = "19.1.1";
 export const TAILWIND_VERSION = "4.1.8";
 
-/** Cached React version from project config */
-let configuredReactVersion: string | null = null;
+/**
+ * Validate React version format (semver: X.Y.Z).
+ * Returns true if valid, false otherwise.
+ */
+export function isValidReactVersion(version: string): boolean {
+  return /^\d+\.\d+\.\d+$/.test(version);
+}
 
 /**
- * Set the React version from project configuration.
- * Call this during project initialization if a custom version is specified.
+ * Validate and normalize React version.
+ * Returns the version if valid, or DEFAULT_REACT_VERSION if invalid.
+ * Logs a warning if the version is invalid.
  */
-export function setReactVersion(version: string): void {
-  configuredReactVersion = version;
+export function normalizeReactVersion(version: string | undefined): string {
+  if (!version) return DEFAULT_REACT_VERSION;
+  if (isValidReactVersion(version)) return version;
+  console.warn(
+    `[VERYFRONT] Invalid React version format "${version}" (expected X.Y.Z). Using default: ${DEFAULT_REACT_VERSION}`,
+  );
+  return DEFAULT_REACT_VERSION;
 }
 
 /**
- * Get the current React version.
- * Returns configured version if set, otherwise the default.
+ * @deprecated Global React version is no longer supported.
+ * Use config.react.version passed through TransformOptions instead.
+ * This function now always returns DEFAULT_REACT_VERSION.
  */
 export function getReactVersion(): string {
-  return configuredReactVersion ?? DEFAULT_REACT_VERSION;
+  return DEFAULT_REACT_VERSION;
 }
 
 /** @deprecated Use DEFAULT_REACT_VERSION or getReactVersion() */
@@ -50,8 +62,15 @@ export const REACT_VERSION = DEFAULT_REACT_VERSION;
  */
 export const TRANSFORM_CACHE_VERSION = 12;
 
-function esmSh(pkg: string, version: string, path = "", query = "target=es2022"): string {
-  return `https://esm.sh/${pkg}@${version}${path}?${query}`;
+/** csstype version - must match deno.json for type consistency */
+const CSSTYPE_VERSION = "3.2.3";
+
+/** Build esm.sh URL with deps=csstype for React packages (ensures type consistency) */
+function esmShReact(pkg: string, version: string, path = "", external = false): string {
+  const params = external
+    ? [`external=react`, `target=es2022`, `deps=csstype@${CSSTYPE_VERSION}`]
+    : [`target=es2022`, `deps=csstype@${CSSTYPE_VERSION}`];
+  return `https://esm.sh/${pkg}@${version}${path}?${params.join("&")}`;
 }
 
 /**
@@ -78,12 +97,12 @@ export function getEsmShUrl(pkg: string, version: string, external?: readonly st
 export function getReactUrls(version?: string): Record<string, string> {
   const v = version ?? getReactVersion();
   return {
-    react: esmSh("react", v),
-    "react-dom": esmSh("react-dom", v, "", "external=react&target=es2022"),
-    "react-dom/client": esmSh("react-dom", v, "/client", "external=react&target=es2022"),
-    "react-dom/server": esmSh("react-dom", v, "/server", "external=react&target=es2022"),
-    "react/jsx-runtime": esmSh("react", v, "/jsx-runtime", "external=react&target=es2022"),
-    "react/jsx-dev-runtime": esmSh("react", v, "/jsx-dev-runtime", "external=react&target=es2022"),
+    react: esmShReact("react", v),
+    "react-dom": esmShReact("react-dom", v, "", true),
+    "react-dom/client": esmShReact("react-dom", v, "/client", true),
+    "react-dom/server": esmShReact("react-dom", v, "/server", true),
+    "react/jsx-runtime": esmShReact("react", v, "/jsx-runtime", true),
+    "react/jsx-dev-runtime": esmShReact("react", v, "/jsx-dev-runtime", true),
   };
 }
 
@@ -102,30 +121,25 @@ export function getReactImportMap(version?: string): Record<string, string> {
   return {
     ...getReactUrls(v),
     // Prefix match for any react/* subpath imports
-    "react/": esmSh("react", v, "/", "external=react&target=es2022"),
+    "react/": esmShReact("react", v, "/", true),
   };
 }
 
 /**
- * Get React npm specifiers for Deno SSR.
- * Uses npm: protocol which Deno handles natively with automatic deduplication.
- * See: https://deno.com/blog/not-using-npm-specifiers-doing-it-wrong
- *
- * Benefits over esm.sh:
- * - Automatic semantic version deduplication (like Node's node_modules)
- * - No manual external= flags or shared-*.ts wrapper files needed
- * - Native support in Deno 2+
+ * Get React esm.sh URLs for Deno SSR.
+ * Uses esm.sh for both SSR and browser to ensure identical React instances.
+ * All sub-packages use external=react to share the same React instance.
  *
  * @param version - React version to use (defaults to REACT_VERSION)
  */
 export function getDenoNpmReactMap(version?: string): Record<string, string> {
   const v = version ?? getReactVersion();
   return {
-    "react": `npm:react@${v}`,
-    "react-dom": `npm:react-dom@${v}`,
-    "react-dom/client": `npm:react-dom@${v}/client`,
-    "react-dom/server": `npm:react-dom@${v}/server`,
-    "react/jsx-runtime": `npm:react@${v}/jsx-runtime`,
-    "react/jsx-dev-runtime": `npm:react@${v}/jsx-dev-runtime`,
+    "react": esmShReact("react", v),
+    "react-dom": esmShReact("react-dom", v, "", true),
+    "react-dom/client": esmShReact("react-dom", v, "/client", true),
+    "react-dom/server": esmShReact("react-dom", v, "/server", true),
+    "react/jsx-runtime": esmShReact("react", v, "/jsx-runtime", true),
+    "react/jsx-dev-runtime": esmShReact("react", v, "/jsx-dev-runtime", true),
   };
 }

package/src/src/transforms/esm/react-imports.ts

@@ -1,7 +1,5 @@
 import { replaceSpecifiers } from "./lexer.js";
-import { getDenoNpmReactMap, getReactImportMap, REACT_VERSION } from "./package-registry.js";
-import { isDeno } from "../../platform/compat/runtime.js";
-import { getLocalReactPaths } from "../../platform/compat/react-paths.js";
+import { getReactImportMap, REACT_VERSION } from "./package-registry.js";
 
 const srcDir = new URL(".", import.meta.url).pathname.replace(
   /\/(build|src)\/transforms\/esm\/?$/,
@@ -28,12 +26,10 @@ export async function resolveReactImports(
     return replaceSpecifiers(code, (specifier) => reactImports[specifier] ?? null);
   }
 
-  // For Deno SSR: Use npm: specifiers (auto-deduplicated by Deno's npm cache)
-  // For Node/Bun SSR: Use local node_modules paths (auto-deduplicated by Node)
-  // See: https://deno.com/blog/not-using-npm-specifiers-doing-it-wrong
+  // For SSR: Use esm.sh URLs consistently (NO npm: specifiers per plan requirements)
   const ssrImports: Record<string, string> = {
     ...getVeryfrontModulePaths(),
-    ...(isDeno ? getDenoNpmReactMap(reactVersion) : getLocalReactPaths()),
+    ...reactImports,
   };
 
   return replaceSpecifiers(code, (specifier) => ssrImports[specifier] ?? null);

package/src/src/transforms/esm/types.ts

@@ -9,6 +9,8 @@ export interface TransformOptions {
   ssr?: boolean;
   apiBaseUrl?: string;
   studioEmbed?: boolean;
+  /** React version for transforms (from project config, defaults to DEFAULT_REACT_VERSION) */
+  reactVersion?: string;
 }
 
 export interface TransformContext {

package/src/src/transforms/mdx/esm-module-loader/cache/index.ts

@@ -14,6 +14,7 @@ import {
   type FileSystem,
   isNotFoundError,
 } from "../../../../platform/compat/fs.js";
+import { TRANSFORM_CACHE_VERSION } from "../../../esm/package-registry.js";
 import { LOG_PREFIX_MDX_LOADER } from "../constants.js";
 
 // Local filesystem for cache operations (not project's FSAdapter which may be remote/read-only)
@@ -150,3 +151,86 @@ export async function clearESMDiskCache(): Promise<void> {
     }
   }
 }
+
+/**
+ * Convert a project-relative file path to MDX-ESM cache key format.
+ *
+ * @param filePath - Project-relative path like "lib/ChatContext.tsx" or absolute path
+ * @param projectDir - Project directory to strip from absolute paths
+ * @returns Cache key like "v10:_vf_modules/lib/ChatContext.js"
+ */
+function toMdxEsmCacheKey(filePath: string, projectDir?: string): string {
+  // Strip project directory prefix if present
+  let relativePath = filePath;
+  if (projectDir && filePath.startsWith(projectDir)) {
+    relativePath = filePath.slice(projectDir.length).replace(/^\/+/, "");
+  }
+  // Strip leading slashes
+  relativePath = relativePath.replace(/^\/+/, "");
+
+  // Convert extension to .js
+  const jsPath = relativePath.replace(/\.(tsx?|jsx|mdx)$/, ".js");
+
+  // Build the versioned key in MDX-ESM format
+  return `v${TRANSFORM_CACHE_VERSION}:_vf_modules/${jsPath}`;
+}
+
+/**
+ * Look up a module in the MDX-ESM cache.
+ *
+ * This allows other loaders (like SSR loader) to reuse modules that
+ * MDX-ESM has already transformed and cached, preventing duplicate
+ * module instances (which breaks React context, etc.).
+ *
+ * @param filePath - Project-relative file path like "lib/ChatContext.tsx"
+ * @param cacheDir - The MDX-ESM cache directory for this project/contentSource
+ * @param projectDir - Project directory to strip from absolute paths
+ * @param contentHash - Optional content hash to validate cached file freshness
+ * @returns The cached file path if found and valid, null otherwise
+ */
+export async function lookupMdxEsmCache(
+  filePath: string,
+  cacheDir: string,
+  projectDir?: string,
+  contentHash?: string,
+): Promise<string | null> {
+  const cache = await getModulePathCache(cacheDir);
+  const cacheKey = toMdxEsmCacheKey(filePath, projectDir);
+
+  const cachedPath = cache.get(cacheKey);
+  if (!cachedPath) {
+    return null;
+  }
+
+  // Verify the cached file still exists
+  try {
+    const stat = await getLocalFs().stat(cachedPath);
+    if (!stat?.isFile) {
+      cache.delete(cacheKey);
+      return null;
+    }
+
+    // If contentHash provided, validate the cached file contains matching hash
+    // The cached filename includes the content hash (e.g., module.abc123.js)
+    if (contentHash) {
+      const filename = cachedPath.split("/").pop() ?? "";
+      if (!filename.includes(contentHash.slice(0, 8))) {
+        logger.debug(
+          `${LOG_PREFIX_MDX_LOADER} Cache hash mismatch, invalidating: ${filePath}`,
+        );
+        cache.delete(cacheKey);
+        return null;
+      }
+    }
+
+    logger.debug(
+      `${LOG_PREFIX_MDX_LOADER} SSR reusing MDX-ESM cache: ${filePath} -> ${cachedPath}`,
+    );
+    return cachedPath;
+  } catch {
+    // File no longer exists, remove stale entry
+    cache.delete(cacheKey);
+  }
+
+  return null;
+}

package/src/src/transforms/mdx/esm-module-loader/loader.ts

@@ -201,6 +201,7 @@ async function processVfModuleImports(
     adapter,
     projectDir,
     context.projectId,
+    { reactVersion: context.reactVersion },
   );
 
   const fetchStart = performance.now();

package/src/src/transforms/mdx/esm-module-loader/module-fetcher/index.ts

@@ -568,6 +568,7 @@ async function doFetchAndCacheModule(
           projectId,
           dev: true,
           ssr: true,
+          reactVersion: context.reactVersion,
         });
       } catch (transformError) {
         logger.error(`${LOG_PREFIX_MDX_LOADER} Transform failed for module`, {
@@ -685,7 +686,7 @@ export function createModuleFetcherContext(
   adapter: RuntimeAdapter,
   projectDir: string,
   projectId: string,
-  options?: { isLocalDev?: boolean; projectSlug?: string },
+  options?: { isLocalDev?: boolean; projectSlug?: string; reactVersion?: string },
 ): ModuleFetcherContext {
   return {
     esmCacheDir,

package/src/src/transforms/mdx/esm-module-loader/types.ts

@@ -10,6 +10,8 @@ export interface ESMLoaderContext {
   projectDir?: string;
   projectSlug?: string;
   contentSourceId?: string;
+  /** React version for transforms (from project config) */
+  reactVersion?: string;
 }
 
 export interface FSAdapter {
@@ -51,6 +53,8 @@ export interface ModuleFetcherContext {
    * This prevents infinite recursion when A imports B which imports A.
    */
   inFlightModules?: Map<string, Promise<string | null>>;
+  /** React version for transforms (from project config) */
+  reactVersion?: string;
 }
 
 export interface JSXTransform {

package/src/src/transforms/pipeline/context.ts

@@ -1,4 +1,3 @@
-import * as dntShim from "../../../_dnt.shims.js";
 import { computeShortContentHash } from "../esm/transform-utils.js";
 import { REACT_VERSION } from "../esm/package-registry.js";
 import type {
@@ -8,20 +7,12 @@ import type {
   TransformTarget,
 } from "./types.js";
 
-async function detectProjectReactVersion(projectDir: string): Promise<string> {
-  try {
-    const content = await dntShim.Deno.readTextFile(`${projectDir}/package.json`);
-    const pkg = JSON.parse(content) as {
-      dependencies?: Record<string, string>;
-      devDependencies?: Record<string, string>;
-    };
-
-    const reactVersion = { ...pkg.dependencies, ...pkg.devDependencies }?.react;
-    if (reactVersion) return reactVersion.replace(/^[\^~]/, "");
-  } catch {
-    // Project doesn't have package.json or no React dependency
-  }
-
+/**
+ * Get React version for transforms.
+ * Uses REACT_VERSION constant - the centralized version from package-registry.
+ * Prefer passing reactVersion through TransformOptions for per-project versions.
+ */
+function getDefaultReactVersion(): string {
   return REACT_VERSION;
 }
 
@@ -64,9 +55,7 @@ export async function createTransformContext(
 ): Promise<TransformContext> {
   const [contentHash, reactVersion] = await Promise.all([
     computeShortContentHash(source),
-    options.reactVersion
-      ? Promise.resolve(options.reactVersion)
-      : detectProjectReactVersion(projectDir),
+    Promise.resolve(options.reactVersion ?? getDefaultReactVersion()),
   ]);
 
   return buildContext(source, filePath, projectDir, contentHash, options, reactVersion);

package/src/src/transforms/pipeline/stages/finalize.ts

@@ -10,7 +10,12 @@ export const finalizePlugin: TransformPlugin = {
   async transform(ctx: TransformContext): Promise<string> {
     if (!isSSR(ctx)) return ctx.code;
 
-    const result = bundleHttpImports(ctx.code, getHttpBundleCacheDir(), ctx.contentHash);
+    const result = bundleHttpImports(
+      ctx.code,
+      getHttpBundleCacheDir(),
+      ctx.contentHash,
+      ctx.reactVersion,
+    );
     return result instanceof Promise ? await result : result;
   },
 };

package/src/src/transforms/plugins/babel-node-positions.ts

@@ -141,7 +141,7 @@ export function injectNodePositions(source: string, _options: TransformOptions):
 
     let nodeCounter = 0;
 
-    traverse(ast, {
+    traverse(ast as t.Node, {
       JSXElement: {
         enter(path: BabelNodePath<t.JSXElement>) {
           const openingElement = path.node.openingElement;
@@ -184,7 +184,7 @@ export function injectNodePositions(source: string, _options: TransformOptions):
       },
     });
 
-    const output = generate(ast, {
+    const output = generate(ast as t.Node, {
       retainLines: true,
       compact: false,
     });

package/src/src/utils/constants/cdn.ts

@@ -10,36 +10,45 @@ export const REACT_VERSION_19 = "19.1.1";
 
 export const REACT_DEFAULT_VERSION = REACT_VERSION_19;
 
-function getReactBase(version: string = REACT_DEFAULT_VERSION): string {
-  return `${ESM_CDN_BASE}/react@${version}`;
-}
-
-function getReactDOMBase(version: string = REACT_DEFAULT_VERSION): string {
-  return `${ESM_CDN_BASE}/react-dom@${version}`;
+/**
+ * esm.sh URL builder with consistent query params.
+ *
+ * For React packages (react-dom, jsx-runtime), we only need external=react:
+ * - react-dom depends on react → external=react makes it import "react" as bare specifier
+ * - react-dom doesn't need external=react-dom because it IS react-dom
+ * - jsx-runtime depends on react core → external=react
+ *
+ * Third-party packages (e.g., @tanstack/react-query) need external=react,react-dom
+ * because they may depend on BOTH. That's handled by bundleHttpImports() separately.
+ */
+function esmSh(pkg: string, version: string, path = "", external = false): string {
+  const params = ["target=es2022"];
+  if (external) params.push("external=react");
+  return `${ESM_CDN_BASE}/${pkg}@${version}${path}?${params.join("&")}`;
 }
 
 export function getReactCDNUrl(version: string = REACT_DEFAULT_VERSION): string {
-  return getReactBase(version);
+  return esmSh("react", version);
 }
 
 export function getReactDOMCDNUrl(version: string = REACT_DEFAULT_VERSION): string {
-  return getReactDOMBase(version);
+  return esmSh("react-dom", version, "", true);
 }
 
 export function getReactDOMClientCDNUrl(version: string = REACT_DEFAULT_VERSION): string {
-  return `${getReactDOMBase(version)}/client`;
+  return esmSh("react-dom", version, "/client", true);
 }
 
 export function getReactDOMServerCDNUrl(version: string = REACT_DEFAULT_VERSION): string {
-  return `${getReactDOMBase(version)}/server`;
+  return esmSh("react-dom", version, "/server", true);
 }
 
 export function getReactJSXRuntimeCDNUrl(version: string = REACT_DEFAULT_VERSION): string {
-  return `${getReactBase(version)}/jsx-runtime`;
+  return esmSh("react", version, "/jsx-runtime", true);
 }
 
 export function getReactJSXDevRuntimeCDNUrl(version: string = REACT_DEFAULT_VERSION): string {
-  return `${getReactBase(version)}/jsx-dev-runtime`;
+  return esmSh("react", version, "/jsx-dev-runtime", true);
 }
 
 export function getReactImportMap(version: string = REACT_DEFAULT_VERSION): Record<string, string> {

package/src/src/utils/hash-utils.ts

@@ -34,6 +34,11 @@ export function simpleHash(str: string): number {
   return Math.abs(hash);
 }
 
+/** Hash string to hex (base 16) - used for module filenames */
+export function hashCodeHex(str: string): string {
+  return simpleHash(str).toString(16);
+}
+
 export async function shortHash(content: string): Promise<string> {
   const fullHash = await computeHash(content);
   return fullHash.slice(0, 8);