@reckona/mreact-router 0.0.31 → 0.0.32

package/dist/client.js

@@ -1,12 +1,19 @@
 import { createHash } from "node:crypto";
 import { readFile, stat } from "node:fs/promises";
-import { dirname, extname, join } from "node:path";
-import { collectIdentifierReferenceNames, collectJsxComponentRootNames, collectStaticExportReferences, collectStaticImportReferences, formatDiagnostic, hasClientRuntimeSyntax, transform, } from "@reckona/mreact-compiler";
+import { builtinModules } from "node:module";
+import { dirname, join, relative, sep } from "node:path";
+import { collectClientRouteModuleAnalysis, formatDiagnostic, } from "@reckona/mreact-compiler";
+import { collectClientRouteModuleAnalysisFromContext, createCompilerModuleContext, transformCompilerModuleContext, } from "@reckona/mreact-compiler/internal";
 import { assetPath } from "./assets.js";
 import { bundleRouterModule } from "./bundle-pipeline.js";
+import { existingRouteShellCandidates } from "./route-shells.js";
 import { stripRouteClientOnlyExports } from "./route-source.js";
+import { sourceModuleCandidates } from "./source-modules.js";
 import { escapeHtmlQuotedAttribute as escapeHtmlAttribute } from "@reckona/mreact-shared/html-escape";
 import { workspacePackageFile } from "./workspace-packages.js";
+const nodeBuiltinPackages = new Set(builtinModules.flatMap((name) => [name, `node:${name}`]));
+const clientBoundaryInferenceServerOnlyReferenceCode = "MR_CLIENT_BOUNDARY_INFERENCE_SERVER_ONLY_REFERENCE";
+const clientBoundaryInferenceUnsupportedReferenceCode = "MR_CLIENT_BOUNDARY_INFERENCE_UNSUPPORTED_REFERENCE";
 export async function routeToClientManifestEntry(route) {
     if (route.kind === "server") {
         return { path: route.path, kind: route.kind, client: false };
@@ -29,8 +36,8 @@ export async function routeToClientManifestEntry(route) {
 }
 export function createClientRouteInferenceCache() {
     return {
-        exportsByFile: new Map(),
-        importsByFile: new Map(),
+        moduleAnalysisByFile: new Map(),
+        moduleContextByFile: new Map(),
         resolvedByImport: new Map(),
         sourceByFile: new Map(),
     };
@@ -41,42 +48,244 @@ export async function isClientRouteModule(options) {
 export async function inferClientRouteModule(options) {
     const cache = options.cache ?? createClientRouteInferenceCache();
     try {
-        return await inferClientRouteModuleSource({
+        const routeInference = await inferClientRouteModuleSource({
             cache,
             code: options.code,
             filename: options.filename,
+            moduleContext: options.moduleContext,
             root: true,
             seen: new Set(),
         });
+        if (options.appDir === undefined) {
+            return routeInference;
+        }
+        const shellInferences = await inferClientRouteShellModules({
+            appDir: options.appDir,
+            cache,
+            filename: options.filename,
+        });
+        return {
+            client: routeInference.client || shellInferences.some((inference) => inference.client),
+            clientBoundaryImports: routeInference.clientBoundaryImports,
+            diagnostics: [
+                ...routeInference.diagnostics,
+                ...shellInferences.flatMap((inference) => inference.diagnostics),
+            ],
+        };
     }
     catch (error) {
         throw new Error(`Failed to infer client route for ${options.routePath ?? "<unknown>"} (${options.filename}).\n${errorMessage(error)}`, { cause: error });
     }
 }
+export async function collectClientRouteReferences(options) {
+    const cache = options.cache ?? createClientRouteInferenceCache();
+    const routeModuleContext = await compilerModuleContextForSource({
+        cache,
+        code: options.code,
+        filename: options.filename,
+    });
+    const routeInference = await inferClientRouteModuleSource({
+        cache,
+        code: options.code,
+        filename: options.filename,
+        moduleContext: routeModuleContext,
+        root: true,
+        seen: new Set(),
+    });
+    const sources = [];
+    const seenSourceFiles = new Set();
+    const addSource = async (sourceOptions) => {
+        if (seenSourceFiles.has(sourceOptions.filename)) {
+            return;
+        }
+        seenSourceFiles.add(sourceOptions.filename);
+        const moduleContext = sourceOptions.moduleContext ??
+            await compilerModuleContextForSource({
+                cache,
+                code: sourceOptions.code,
+                filename: sourceOptions.filename,
+            });
+        const inference = sourceOptions.inference ??
+            (await inferClientRouteModuleSource({
+                cache,
+                code: sourceOptions.code,
+                filename: sourceOptions.filename,
+                moduleContext,
+                root: true,
+                seen: new Set(),
+            }));
+        sources.push({
+            code: sourceOptions.code,
+            filename: sourceOptions.filename,
+            inference,
+            moduleContext,
+        });
+        for (const referenceFile of inference.clientReferenceSourceFiles) {
+            const code = stripRouteClientOnlyExports(await readCachedFile(cache, referenceFile));
+            await addSource({ code, filename: referenceFile });
+        }
+    };
+    await addSource({
+        code: options.code,
+        filename: options.filename,
+        inference: routeInference,
+        moduleContext: routeModuleContext,
+    });
+    if (options.appDir !== undefined) {
+        for (const shell of await clientShellFilesForPage(options.appDir, options.filename)) {
+            const code = stripRouteClientOnlyExports(await readCachedFile(cache, shell));
+            const moduleContext = await compilerModuleContextForSource({
+                cache,
+                code,
+                filename: shell,
+            });
+            await addSource({
+                code,
+                filename: shell,
+                inference: await inferClientRouteModuleSource({
+                    cache,
+                    code,
+                    filename: shell,
+                    moduleContext,
+                    root: true,
+                    seen: new Set(),
+                }),
+                moduleContext,
+            });
+        }
+    }
+    const clientReferenceManifest = [];
+    const clientReferenceImports = [];
+    const seenReferences = new Set();
+    for (const source of sources) {
+        const output = transformCompilerModuleContext({
+            code: source.code,
+            clientBoundaryImports: source.inference.clientBoundaryImports,
+            dev: false,
+            filename: source.filename,
+            moduleContext: source.moduleContext,
+            target: "server",
+        });
+        const fatalDiagnostics = output.diagnostics.filter((diagnostic) => diagnostic.code !== "MR_UNSUPPORTED_SERVER_EVENT_HANDLER" &&
+            diagnostic.code !== "MR_UNSUPPORTED_AWAIT_INNER_COMPONENT");
+        if (fatalDiagnostics.length > 0) {
+            throw new Error(fatalDiagnostics.map((diagnostic) => formatDiagnostic(source.filename, diagnostic)).join("\n"));
+        }
+        for (const reference of output.metadata.clientReferenceManifest ?? []) {
+            const key = `${reference.name}\0${reference.moduleId}\0${reference.exportName}`;
+            if (seenReferences.has(key)) {
+                continue;
+            }
+            seenReferences.add(key);
+            clientReferenceManifest.push(reference);
+            clientReferenceImports.push({
+                exportName: reference.exportName,
+                importSource: clientReferenceImportSource({
+                    moduleId: reference.moduleId,
+                    routeFile: options.filename,
+                    sourceFile: source.filename,
+                }),
+                name: reference.name,
+            });
+        }
+    }
+    return {
+        client: routeInference.client ||
+            sources.some((source) => source.filename !== options.filename && source.inference.client),
+        clientBoundaryImports: routeInference.clientBoundaryImports,
+        clientReferenceImports,
+        clientReferenceManifest,
+        diagnostics: sources.flatMap((source) => source.inference.diagnostics),
+    };
+}
+async function inferClientRouteShellModules(options) {
+    return Promise.all((await clientShellFilesForPage(options.appDir, options.filename)).map(async (shell) => {
+        const code = stripRouteClientOnlyExports(await readCachedFile(options.cache, shell));
+        return await inferClientRouteModuleSource({
+            cache: options.cache,
+            code,
+            filename: shell,
+            root: true,
+            seen: new Set(),
+        });
+    }));
+}
+async function clientShellFilesForPage(appDir, pageFile) {
+    const existing = await existingRouteShellCandidates(appDir, pageFile, async (file) => file !== pageFile && await isFile(file));
+    return existing.map((candidate) => candidate.file);
+}
+function clientReferenceImportSource(options) {
+    if (!options.moduleId.startsWith(".")) {
+        return options.moduleId;
+    }
+    const absolute = join(dirname(options.sourceFile), options.moduleId);
+    const relativeImport = relative(dirname(options.routeFile), absolute).replaceAll(sep, "/");
+    return relativeImport.startsWith(".") ? relativeImport : `./${relativeImport}`;
+}
 export function isClientRouteSource(code) {
-    return hasClientRuntimeSyntax({ code });
+    const analysis = collectClientRouteModuleAnalysis({ code });
+    return (analysis.hasUseClientDirective ||
+        (!analysis.hasUseServerDirective && analysis.clientRuntime));
+}
+function isExplicitClientRouteSource(analysis, filename) {
+    return analysis.hasUseClientDirective || isClientBoundaryFilename(filename);
+}
+function isClientBoundaryFilename(filename) {
+    return /\.client(?:\.mreact)?\.[cm]?[jt]sx?$/.test(filename);
+}
+function isServerOnlyClientRouteSource(analysis) {
+    return analysis.hasUseServerDirective;
+}
+function isServerOnlyImportSource(source) {
+    return nodeBuiltinPackages.has(source);
+}
+function hasServerOnlyImports(analysis) {
+    return analysis.staticImports.some((reference) => isServerOnlyImportSource(reference.source));
 }
 async function inferClientRouteModuleSource(options) {
-    if (isClientRouteSource(options.code)) {
-        return { client: true, clientBoundaryImports: [], diagnostics: [] };
+    const analysis = await clientRouteModuleAnalysisForSource(options);
+    if (isServerOnlyClientRouteSource(analysis)) {
+        return emptyClientRouteModuleInferenceResult({
+            serverOnly: true,
+            serverOnlyClientRuntime: analysis.clientRuntime,
+        });
+    }
+    if (isExplicitClientRouteSource(analysis, options.filename)) {
+        return emptyClientRouteModuleInferenceResult({
+            client: true,
+            clientBoundaryModule: true,
+        });
     }
     if (options.seen.has(options.filename)) {
-        return { client: false, clientBoundaryImports: [], diagnostics: [] };
+        return emptyClientRouteModuleInferenceResult();
     }
     options.seen.add(options.filename);
     try {
         const clientBoundaryImports = [];
+        const clientBoundaryExportNames = new Set();
+        const nestedClientExportNames = new Set();
+        const clientReferenceSourceFiles = [];
         const diagnostics = [];
         let clientProxy = false;
-        const jsxComponentRoots = new Set(collectJsxComponentRootNames({
-            code: options.code,
-            filename: options.filename,
-        }));
-        const identifierReferences = new Set(collectIdentifierReferenceNames({
-            code: options.code,
-            filename: options.filename,
-        }));
-        for (const reference of await staticImportReferencesForSource(options)) {
+        let nestedClient = false;
+        const exportInfo = analysis.topLevelExportRenderInfo;
+        const implicitModuleClient = exportInfo.length === 0 &&
+            analysis.clientRuntime;
+        for (const info of exportInfo) {
+            if (info.clientRuntime) {
+                clientBoundaryExportNames.add(info.name);
+            }
+        }
+        if (hasServerOnlyImports(analysis) &&
+            (implicitModuleClient || clientBoundaryExportNames.size > 0)) {
+            return emptyClientRouteModuleInferenceResult({
+                serverOnly: true,
+                serverOnlyClientRuntime: true,
+            });
+        }
+        const jsxComponentRoots = new Set(analysis.jsxComponentRoots);
+        const identifierReferences = new Set(analysis.identifierReferences);
+        for (const reference of analysis.staticImports) {
             const rendered = isRenderedImportReference(reference, jsxComponentRoots);
             const referenced = isReferencedImportReference(reference, identifierReferences);
             if (!rendered &&
@@ -96,14 +305,43 @@ async function inferClientRouteModuleSource(options) {
                 cache: options.cache,
                 code: source,
                 filename: resolved,
+                moduleContext: await compilerModuleContextForSource({
+                    cache: options.cache,
+                    code: source,
+                    filename: resolved,
+                }),
                 root: false,
                 seen: options.seen,
             });
             diagnostics.push(...imported.diagnostics);
             if (!imported.client) {
+                if (imported.serverOnlyClientRuntime && rendered) {
+                    diagnostics.push(serverOnlyClientImportReferenceDiagnostic({
+                        filename: options.filename,
+                        reference,
+                    }));
+                }
                 continue;
             }
             if (rendered) {
+                const importedExportNames = renderedImportedExportNames(reference, jsxComponentRoots);
+                const renderedExportNames = renderedLocalExportNames(reference, exportInfo);
+                const importedBoundary = imported.clientBoundaryModule ||
+                    matchesInferredExportNames(importedExportNames, imported.clientBoundaryExportNames);
+                const importedNested = matchesInferredExportNames(importedExportNames, imported.nestedClientExportNames);
+                if (!importedBoundary && !importedNested) {
+                    continue;
+                }
+                nestedClient = true;
+                for (const exportName of renderedExportNames) {
+                    if (importedBoundary || importedNested) {
+                        nestedClientExportNames.add(exportName);
+                    }
+                }
+                if (!importedBoundary) {
+                    clientReferenceSourceFiles.push(resolved);
+                    continue;
+                }
                 clientBoundaryImports.push(reference.source);
                 continue;
             }
@@ -117,7 +355,7 @@ async function inferClientRouteModuleSource(options) {
             }
         }
         if (!options.root) {
-            for (const reference of await staticExportReferencesForSource(options)) {
+            for (const reference of analysis.staticExports) {
                 const resolved = await resolveAppLocalModule({
                     cache: options.cache,
                     importer: options.filename,
@@ -131,48 +369,98 @@ async function inferClientRouteModuleSource(options) {
                     cache: options.cache,
                     code: source,
                     filename: resolved,
+                    moduleContext: await compilerModuleContextForSource({
+                        cache: options.cache,
+                        code: source,
+                        filename: resolved,
+                    }),
                     root: false,
                     seen: options.seen,
                 });
                 diagnostics.push(...exported.diagnostics);
-                if (exported.client) {
+                if (exported.clientBoundaryModule) {
                     clientProxy = true;
                 }
+                else if (exported.clientBoundaryExportNames.length > 0) {
+                    for (const exportName of reference.exportedNames) {
+                        if (exported.clientBoundaryExportNames.includes(exportName)) {
+                            clientBoundaryExportNames.add(exportName);
+                        }
+                    }
+                }
+                else if (exported.client) {
+                    nestedClient = true;
+                    clientReferenceSourceFiles.push(resolved);
+                }
             }
         }
         return {
-            client: clientBoundaryImports.length > 0 || clientProxy,
+            client: clientBoundaryImports.length > 0 ||
+                clientBoundaryExportNames.size > 0 ||
+                implicitModuleClient ||
+                clientProxy ||
+                nestedClient,
             clientBoundaryImports,
+            clientBoundaryExportNames: Array.from(clientBoundaryExportNames),
+            clientBoundaryModule: clientProxy || implicitModuleClient,
+            nestedClientExportNames: Array.from(nestedClientExportNames),
+            clientReferenceSourceFiles: Array.from(new Set(clientReferenceSourceFiles)),
             diagnostics,
+            serverOnly: false,
+            serverOnlyClientRuntime: false,
         };
     }
     finally {
         options.seen.delete(options.filename);
     }
 }
-async function staticImportReferencesForSource(options) {
-    const cached = options.cache.importsByFile.get(options.filename);
+function emptyClientRouteModuleInferenceResult(overrides = {}) {
+    return {
+        client: false,
+        clientBoundaryImports: [],
+        clientBoundaryExportNames: [],
+        clientBoundaryModule: false,
+        nestedClientExportNames: [],
+        clientReferenceSourceFiles: [],
+        diagnostics: [],
+        serverOnly: false,
+        serverOnlyClientRuntime: false,
+        ...overrides,
+    };
+}
+async function clientRouteModuleAnalysisForSource(options) {
+    const cacheKey = sourceAnalysisCacheKey(options.filename, options.code);
+    const cached = options.cache.moduleAnalysisByFile.get(cacheKey);
     if (cached !== undefined) {
         return cached;
     }
-    const imports = Promise.resolve().then(() => collectStaticImportReferences({
-        code: options.code,
-        filename: options.filename,
-    }));
-    options.cache.importsByFile.set(options.filename, imports);
-    return imports;
+    const analysis = Promise.resolve().then(async () => collectClientRouteModuleAnalysisFromContext(options.moduleContext ??
+        await compilerModuleContextForSource({
+            cache: options.cache,
+            code: options.code,
+            filename: options.filename,
+        })));
+    options.cache.moduleAnalysisByFile.set(cacheKey, analysis);
+    return analysis;
 }
-async function staticExportReferencesForSource(options) {
-    const cached = options.cache.exportsByFile.get(options.filename);
+export async function compilerModuleContextForSource(options) {
+    const cacheKey = sourceAnalysisCacheKey(options.filename, options.code);
+    const cached = options.cache.moduleContextByFile.get(cacheKey);
     if (cached !== undefined) {
         return cached;
     }
-    const exports = Promise.resolve().then(() => collectStaticExportReferences({
+    const context = Promise.resolve().then(() => createCompilerModuleContext({
         code: options.code,
         filename: options.filename,
     }));
-    options.cache.exportsByFile.set(options.filename, exports);
-    return exports;
+    options.cache.moduleContextByFile.set(cacheKey, context);
+    return context;
+}
+function sourceAnalysisCacheKey(filename, code) {
+    return `${filename}\0${hashSourceText(code)}`;
+}
+function hashSourceText(text) {
+    return createHash("sha256").update(text).digest("hex");
 }
 function isRenderedImportReference(reference, jsxComponentRoots) {
     return (reference.sideEffect ||
@@ -184,8 +472,51 @@ function isReferencedImportReference(reference, identifierReferences) {
 }
 function hasPotentialClientBoundaryReference(reference, identifierReferences) {
     return (reference.sideEffect ||
+        reference.specifiers.some((specifier) => specifier.kind === "namespace" && identifierReferences.has(specifier.localName)) ||
         reference.localNames.some((localName) => identifierReferences.has(localName) && startsUppercase(localName)));
 }
+function renderedImportedExportNames(reference, jsxComponentRoots) {
+    if (reference.sideEffect) {
+        return undefined;
+    }
+    const names = new Set();
+    for (const specifier of reference.specifiers) {
+        if (!jsxComponentRoots.has(specifier.localName)) {
+            continue;
+        }
+        if (specifier.kind === "namespace") {
+            return undefined;
+        }
+        names.add(specifier.importedName);
+    }
+    return Array.from(names);
+}
+function renderedLocalExportNames(reference, exportInfo) {
+    const localNames = new Set(reference.localNames);
+    const rendered = exportInfo
+        .filter((info) => info.renderedComponentRoots.some((root) => localNames.has(root)))
+        .map((info) => info.name);
+    return rendered.length === 0 ? ["default"] : rendered;
+}
+function matchesInferredExportNames(importedExportNames, inferredExportNames) {
+    if (importedExportNames === undefined) {
+        return inferredExportNames.length > 0;
+    }
+    return importedExportNames.some((name) => inferredExportNames.includes(name));
+}
+function serverOnlyClientImportReferenceDiagnostic(options) {
+    return {
+        code: clientBoundaryInferenceServerOnlyReferenceCode,
+        filename: options.filename,
+        level: "warn",
+        localNames: options.reference.localNames,
+        message: `${options.filename}: server-only component import ${JSON.stringify(options.reference.source)} ` +
+            "uses client runtime syntax but is marked with server-only semantics. Automatic client " +
+            "boundary detection skipped it. Move the interactive UI behind a .client module or add an " +
+            "explicit clientBoundaryImports entry.",
+        source: options.reference.source,
+    };
+}
 function unsupportedClientImportReferenceDiagnostic(options) {
     if (options.reference.sideEffect) {
         return undefined;
@@ -195,7 +526,7 @@ function unsupportedClientImportReferenceDiagnostic(options) {
         return undefined;
     }
     return {
-        code: "MR_CLIENT_BOUNDARY_INFERENCE_UNSUPPORTED_REFERENCE",
+        code: clientBoundaryInferenceUnsupportedReferenceCode,
         filename: options.filename,
         level: "warn",
         localNames,
@@ -241,52 +572,6 @@ async function resolveAppLocalModuleUncached(importer, specifier) {
     }
     throw new Error(`${importer}: could not resolve app-local import ${JSON.stringify(specifier)}.`);
 }
-function sourceModuleCandidates(base) {
-    if (hasSourceModuleExtension(base)) {
-        return [base, ...typescriptSourceModuleCandidates(base)];
-    }
-    if (extname(base) !== "") {
-        return [];
-    }
-    return [
-        `${base}.ts`,
-        `${base}.tsx`,
-        `${base}.mreact.tsx`,
-        `${base}.js`,
-        `${base}.jsx`,
-        `${base}.mjs`,
-        `${base}.mts`,
-        `${base}.cjs`,
-        `${base}.cts`,
-        join(base, "index.ts"),
-        join(base, "index.tsx"),
-        join(base, "index.mreact.tsx"),
-        join(base, "index.js"),
-        join(base, "index.jsx"),
-        join(base, "index.mjs"),
-        join(base, "index.mts"),
-        join(base, "index.cjs"),
-        join(base, "index.cts"),
-    ];
-}
-function hasSourceModuleExtension(path) {
-    return /\.(?:mreact\.tsx|tsx?|jsx?|mjs|mts|cjs|cts)$/.test(path);
-}
-function typescriptSourceModuleCandidates(path) {
-    if (path.endsWith(".js")) {
-        return [`${path.slice(0, -3)}.ts`, `${path.slice(0, -3)}.tsx`];
-    }
-    if (path.endsWith(".jsx")) {
-        return [`${path.slice(0, -4)}.tsx`];
-    }
-    if (path.endsWith(".mjs")) {
-        return [`${path.slice(0, -4)}.mts`];
-    }
-    if (path.endsWith(".cjs")) {
-        return [`${path.slice(0, -4)}.cts`];
-    }
-    return [];
-}
 async function isFile(path) {
     try {
         return (await stat(path)).isFile();
@@ -295,14 +580,25 @@ async function isFile(path) {
         return false;
     }
 }
-function readCachedFile(cache, filename) {
+async function readCachedFile(cache, filename) {
+    const signature = await sourceFileSignature(filename);
     const cached = cache.sourceByFile.get(filename);
     if (cached !== undefined) {
-        return cached;
+        const source = await cached;
+        if (source.signature === signature) {
+            return source.source;
+        }
     }
-    const source = readFile(filename, "utf8");
+    const source = readFile(filename, "utf8").then((value) => ({
+        signature,
+        source: value,
+    }));
     cache.sourceByFile.set(filename, source);
-    return source;
+    return (await source).source;
+}
+async function sourceFileSignature(filename) {
+    const stats = await stat(filename);
+    return `${stats.mtimeMs}\0${stats.size}`;
 }
 export function routeIdForPath(path) {
     if (path === "/") {
@@ -371,9 +667,14 @@ export async function buildNavigationRuntimeBundle(options = {}) {
     });
 }
 export async function buildClientRouteOutput(options) {
-    const compiled = transform({
+    const moduleContext = createCompilerModuleContext({
+        code: options.code,
+        filename: options.filename,
+    });
+    const compiled = transformCompilerModuleContext({
         code: options.code,
         filename: options.filename,
+        moduleContext,
         target: "client",
         dev: options.minify !== true,
     });
@@ -384,7 +685,8 @@ export async function buildClientRouteOutput(options) {
     }
     const clientNavigation = options.clientNavigation ?? detectClientNavigationHint(options.code);
     const clientReferenceManifest = options.clientReferenceManifest ?? (await inferClientReferenceManifestForBundle(options));
-    const clientReferenceRegistry = emitClientReferenceRegistry(clientReferenceManifest);
+    const clientReferenceImportBlock = emitClientReferenceImportBlock(options.clientReferenceImports ?? []);
+    const clientReferenceRegistry = emitClientReferenceRegistry(clientReferenceManifest, options.clientReferenceImports ?? []);
     const routeComponentExpression = routeComponentExpressionForComponents(compiled.metadata.components);
     const routeId = routeIdForPath(options.routePath);
     const routeUsesCells = detectRouteCellStateHint(compiled.code);
@@ -476,7 +778,7 @@ function __mreactDropMismatchedRouteState(previousState, nextState) {
 }
 `
         : "";
-    const entry = `${compiled.code}
+    const entry = `${clientReferenceImportBlock}${compiled.code}
 
 const __mreactRouteId = ${JSON.stringify(routeId)};
 const __mreactRouteStateSignature = ${JSON.stringify(routeStateSignature)};
@@ -504,7 +806,7 @@ export function __mreactHydrateRoute() {
   if (__mreactMarker === null || __mreactComponent === undefined) {
     return;
   }
-${routeCellHydrationStart}${routeCellHydrationIndent}if (__mreactHydrateClientBoundaries(__mreactMarker, __mreactClientReferences, __mreactClientReferenceComponents)) {
+${routeCellHydrationStart}${routeCellHydrationIndent}if (__mreactHydrateClientBoundaries(document, __mreactClientReferences, __mreactClientReferenceComponents)) {
 ${routeCellHydrationIndent}  __mreactMarker.setAttribute("data-mreact-hydrated", "true");
 ${routeCellHydrationIndent}  return;
 ${routeCellHydrationIndent}}
@@ -1267,7 +1569,7 @@ function __mreactApplyOutOfOrderFragments(root) {
 }
 
 function __mreactHydrateClientBoundaries(marker, references, components) {
-  if (!Array.isArray(references) || references.length === 0) {
+  if (components.size === 0 && (!Array.isArray(references) || references.length === 0)) {
     return false;
   }
 
@@ -1754,10 +2056,15 @@ export function currentDevtoolsEmitter() { return undefined; }`,
                     return undefined;
                 }
                 const source = await readFile(args.path, "utf8");
-                const output = transform({
+                const moduleContext = createCompilerModuleContext({
+                    code: source,
+                    filename: args.path,
+                });
+                const output = transformCompilerModuleContext({
                     code: source,
                     dev: true,
                     filename: args.path,
+                    moduleContext,
                     target: "client",
                 });
                 if (output.diagnostics.length > 0) {
@@ -1803,32 +2110,61 @@ function detectRouteCellStateHint(code) {
         : new RegExp(`(?:${callExpression})\\s*\\(`).test(code);
 }
 async function inferClientReferenceManifestForBundle(options) {
+    const cache = createClientRouteInferenceCache();
+    const moduleContext = await compilerModuleContextForSource({
+        cache,
+        code: options.code,
+        filename: options.filename,
+    });
     const inference = await inferClientRouteModule({
+        cache,
         code: options.code,
         filename: options.filename,
+        moduleContext,
         routePath: options.routePath,
     });
     if (inference.clientBoundaryImports.length === 0) {
         return [];
     }
-    const output = transform({
+    const output = transformCompilerModuleContext({
         code: options.code,
         clientBoundaryImports: inference.clientBoundaryImports,
         dev: true,
         filename: options.filename,
+        moduleContext,
         target: "server",
     });
     return output.metadata.clientReferenceManifest ?? [];
 }
-function emitClientReferenceRegistry(manifest) {
+function emitClientReferenceImportBlock(imports) {
+    if (imports.length === 0) {
+        return "";
+    }
+    return `${imports.map((reference, index) => {
+        const localName = clientReferenceLocalName(index);
+        return isIdentifierName(reference.exportName)
+            ? `import { ${reference.exportName} as ${localName} } from ${JSON.stringify(reference.importSource)};`
+            : `import * as ${localName} from ${JSON.stringify(reference.importSource)};`;
+    }).join("\n")}\n`;
+}
+function emitClientReferenceRegistry(manifest, imports) {
+    const importedExpressions = new Map(imports.map((reference, index) => [
+        reference.name,
+        isIdentifierName(reference.exportName)
+            ? clientReferenceLocalName(index)
+            : `${clientReferenceLocalName(index)}[${JSON.stringify(reference.exportName)}]`,
+    ]));
     const entries = manifest.flatMap((reference) => {
-        const expression = clientReferenceExpression(reference.name);
+        const expression = importedExpressions.get(reference.name) ?? clientReferenceExpression(reference.name);
         return expression === undefined
             ? []
             : [`  [${JSON.stringify(reference.name)}, ${expression}],`];
     });
     return ["const __mreactClientReferenceComponents = new Map([", ...entries, "]);"].join("\n");
 }
+function clientReferenceLocalName(index) {
+    return `__mreactClientReference${index}`;
+}
 function clientReferenceExpression(name) {
     return /^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*)*$/.test(name) ? name : undefined;
 }