@reckona/mreact-router 0.0.55 → 0.0.57

package/dist/client.js

@@ -1,7 +1,7 @@
 import { createHash } from "node:crypto";
 import { readFile, stat } from "node:fs/promises";
 import { builtinModules } from "node:module";
-import { dirname, join, relative, sep } from "node:path";
+import { dirname, extname, 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";
@@ -40,6 +40,7 @@ export function createClientRouteInferenceCache() {
         moduleContextByFile: new Map(),
         resolvedByImport: new Map(),
         sourceByFile: new Map(),
+        transformedSourceByFile: new Map(),
     };
 }
 export async function isClientRouteModule(options) {
@@ -47,14 +48,21 @@ export async function isClientRouteModule(options) {
 }
 export async function inferClientRouteModule(options) {
     const cache = options.cache ?? createClientRouteInferenceCache();
+    const sourceTransform = clientRouteSourceTransformForVitePlugins(options.vitePlugins);
+    const code = await transformClientRouteSource({
+        code: options.code,
+        filename: options.filename,
+        sourceTransform,
+    });
     try {
         const routeInference = await inferClientRouteModuleSource({
             cache,
-            code: options.code,
+            code,
             filename: options.filename,
-            moduleContext: options.moduleContext,
+            ...(sourceTransform === undefined ? { moduleContext: options.moduleContext } : {}),
             root: true,
             seen: new Set(),
+            sourceTransform,
         });
         if (options.appDir === undefined) {
             return routeInference;
@@ -63,6 +71,7 @@ export async function inferClientRouteModule(options) {
             appDir: options.appDir,
             cache,
             filename: options.filename,
+            sourceTransform,
         });
         return {
             client: routeInference.client || shellInferences.some((inference) => inference.client),
@@ -79,18 +88,25 @@ export async function inferClientRouteModule(options) {
 }
 export async function collectClientRouteReferences(options) {
     const cache = options.cache ?? createClientRouteInferenceCache();
+    const sourceTransform = clientRouteSourceTransformForVitePlugins(options.vitePlugins);
+    const code = await transformClientRouteSource({
+        code: options.code,
+        filename: options.filename,
+        sourceTransform,
+    });
     const routeModuleContext = await compilerModuleContextForSource({
         cache,
-        code: options.code,
+        code,
         filename: options.filename,
     });
     const routeInference = await inferClientRouteModuleSource({
         cache,
-        code: options.code,
+        code,
         filename: options.filename,
         moduleContext: routeModuleContext,
         root: true,
         seen: new Set(),
+        sourceTransform,
     });
     const sources = [];
     const seenSourceFiles = new Set();
@@ -113,6 +129,7 @@ export async function collectClientRouteReferences(options) {
                 moduleContext,
                 root: true,
                 seen: new Set(),
+                sourceTransform,
             }));
         sources.push({
             code: sourceOptions.code,
@@ -121,19 +138,19 @@ export async function collectClientRouteReferences(options) {
             moduleContext,
         });
         for (const referenceFile of inference.clientReferenceSourceFiles) {
-            const code = stripRouteClientOnlyExports(await readCachedFile(cache, referenceFile));
+            const code = stripRouteClientOnlyExports(await readClientRouteSource({ cache, filename: referenceFile, sourceTransform }));
             await addSource({ code, filename: referenceFile });
         }
     };
     await addSource({
-        code: options.code,
+        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 code = stripRouteClientOnlyExports(await readClientRouteSource({ cache, filename: shell, sourceTransform }));
             const moduleContext = await compilerModuleContextForSource({
                 cache,
                 code,
@@ -149,6 +166,7 @@ export async function collectClientRouteReferences(options) {
                     moduleContext,
                     root: true,
                     seen: new Set(),
+                    sourceTransform,
                 }),
                 moduleContext,
             });
@@ -202,13 +220,18 @@ export async function collectClientRouteReferences(options) {
 }
 async function inferClientRouteShellModules(options) {
     return Promise.all((await clientShellFilesForPage(options.appDir, options.filename)).map(async (shell) => {
-        const code = stripRouteClientOnlyExports(await readCachedFile(options.cache, shell));
+        const code = stripRouteClientOnlyExports(await readClientRouteSource({
+            cache: options.cache,
+            filename: shell,
+            sourceTransform: options.sourceTransform,
+        }));
         return await inferClientRouteModuleSource({
             cache: options.cache,
             code,
             filename: shell,
             root: true,
             seen: new Set(),
+            sourceTransform: options.sourceTransform,
         });
     }));
 }
@@ -232,7 +255,7 @@ function isExplicitClientRouteSource(analysis, filename) {
     return analysis.hasUseClientDirective || isClientBoundaryFilename(filename);
 }
 function isClientBoundaryFilename(filename) {
-    return /\.client(?:\.mreact)?\.[cm]?[jt]sx?$/.test(filename);
+    return /\.(?:client|compat)(?:\.mreact)?\.[cm]?[jt]sx?$/.test(filename);
 }
 function isServerOnlyClientRouteSource(analysis) {
     return analysis.hasUseServerDirective;
@@ -296,7 +319,11 @@ async function inferClientRouteModuleSource(options) {
                 (!referenced || !hasPotentialClientBoundaryReference(reference, identifierReferences))) {
                 continue;
             }
+            if (reference.sideEffect && isStyleModuleSpecifier(reference.source)) {
+                continue;
+            }
             const resolved = await resolveAppLocalModule({
+                allowExplicitNonSource: options.sourceTransform !== undefined,
                 cache: options.cache,
                 importer: options.filename,
                 specifier: reference.source,
@@ -304,7 +331,11 @@ async function inferClientRouteModuleSource(options) {
             if (resolved === undefined) {
                 continue;
             }
-            const source = await readCachedFile(options.cache, resolved);
+            const source = await readClientRouteSource({
+                cache: options.cache,
+                filename: resolved,
+                sourceTransform: options.sourceTransform,
+            });
             const imported = await inferClientRouteModuleSource({
                 cache: options.cache,
                 code: source,
@@ -316,6 +347,7 @@ async function inferClientRouteModuleSource(options) {
                 }),
                 root: false,
                 seen: options.seen,
+                sourceTransform: options.sourceTransform,
             });
             diagnostics.push(...imported.diagnostics);
             if (!imported.client) {
@@ -364,6 +396,7 @@ async function inferClientRouteModuleSource(options) {
         if (!options.root) {
             for (const reference of analysis.staticExports) {
                 const resolved = await resolveAppLocalModule({
+                    allowExplicitNonSource: options.sourceTransform !== undefined,
                     cache: options.cache,
                     importer: options.filename,
                     specifier: reference.source,
@@ -371,7 +404,11 @@ async function inferClientRouteModuleSource(options) {
                 if (resolved === undefined) {
                     continue;
                 }
-                const source = await readCachedFile(options.cache, resolved);
+                const source = await readClientRouteSource({
+                    cache: options.cache,
+                    filename: resolved,
+                    sourceTransform: options.sourceTransform,
+                });
                 const exported = await inferClientRouteModuleSource({
                     cache: options.cache,
                     code: source,
@@ -383,6 +420,7 @@ async function inferClientRouteModuleSource(options) {
                     }),
                     root: false,
                     seen: options.seen,
+                    sourceTransform: options.sourceTransform,
                 });
                 diagnostics.push(...exported.diagnostics);
                 if (exported.clientBoundaryModule) {
@@ -481,6 +519,18 @@ function hasPotentialClientBoundaryReference(reference, identifierReferences) {
         reference.specifiers.some((specifier) => specifier.kind === "namespace" && identifierReferences.has(specifier.localName)) ||
         reference.localNames.some((localName) => identifierReferences.has(localName) && startsUppercase(localName)));
 }
+function isStyleModuleSpecifier(source) {
+    const pathname = source.split(/[?#]/u, 1)[0] ?? source;
+    return styleModuleExtensions.has(extname(pathname));
+}
+const styleModuleExtensions = new Set([
+    ".css",
+    ".less",
+    ".sass",
+    ".scss",
+    ".styl",
+    ".stylus",
+]);
 function renderedImportedExportNames(reference, componentRoots) {
     if (reference.sideEffect) {
         return undefined;
@@ -562,19 +612,27 @@ async function resolveAppLocalModule(options) {
     if (!options.specifier.startsWith(".")) {
         return undefined;
     }
-    const cacheKey = `${options.importer}\0${options.specifier}`;
+    const cacheKey = `${options.importer}\0${options.specifier}\0${options.allowExplicitNonSource === true ? "explicit" : "source"}`;
     const cached = options.cache.resolvedByImport.get(cacheKey);
     if (cached !== undefined) {
         return cached;
     }
-    const resolved = resolveAppLocalModuleUncached(options.importer, options.specifier);
+    const resolved = resolveAppLocalModuleUncached({
+        allowExplicitNonSource: options.allowExplicitNonSource === true,
+        importer: options.importer,
+        specifier: options.specifier,
+    });
     options.cache.resolvedByImport.set(cacheKey, resolved);
     return resolved;
 }
-async function resolveAppLocalModuleUncached(importer, specifier) {
+async function resolveAppLocalModuleUncached(options) {
+    const { importer, specifier } = options;
     const base = join(dirname(importer), specifier);
     const candidates = sourceModuleCandidates(base);
     if (candidates.length === 0) {
+        if (options.allowExplicitNonSource && extname(base) !== "" && (await isFile(base))) {
+            return base;
+        }
         return undefined;
     }
     for (const candidate of candidates) {
@@ -608,6 +666,126 @@ async function readCachedFile(cache, filename) {
     cache.sourceByFile.set(filename, source);
     return (await source).source;
 }
+async function readClientRouteSource(options) {
+    if (options.sourceTransform === undefined) {
+        return readCachedFile(options.cache, options.filename);
+    }
+    const signature = await sourceFileSignature(options.filename);
+    const cacheKey = `${options.filename}\0${options.sourceTransform.cacheKey}`;
+    const cached = options.cache.transformedSourceByFile.get(cacheKey);
+    if (cached !== undefined) {
+        const source = await cached;
+        if (source.signature === signature) {
+            return source.source;
+        }
+    }
+    const source = readCachedFile(options.cache, options.filename).then(async (code) => ({
+        signature,
+        source: await options.sourceTransform.transform(options.filename, code),
+    }));
+    options.cache.transformedSourceByFile.set(cacheKey, source);
+    return (await source).source;
+}
+async function transformClientRouteSource(options) {
+    return options.sourceTransform === undefined
+        ? options.code
+        : await options.sourceTransform.transform(options.filename, options.code);
+}
+function clientRouteSourceTransformForVitePlugins(pluginOptions) {
+    const plugins = orderVitePlugins(flattenVitePlugins(pluginOptions)).filter((plugin) => hasViteTransformHook(plugin));
+    if (plugins.length === 0) {
+        return undefined;
+    }
+    return {
+        cacheKey: plugins.map((plugin, index) => `${index}:${plugin.name}`).join("\0"),
+        async transform(filename, code) {
+            let nextCode = code;
+            for (const plugin of plugins) {
+                const handler = viteTransformHookHandler(plugin);
+                if (handler === undefined) {
+                    continue;
+                }
+                const result = await handler.call(createClientRouteViteTransformContext(plugin.name), nextCode, filename, { ssr: false });
+                if (typeof result === "string") {
+                    nextCode = result;
+                }
+                else if (result !== null && result !== undefined && typeof result === "object") {
+                    const codeResult = result.code;
+                    if (typeof codeResult === "string") {
+                        nextCode = codeResult;
+                    }
+                }
+            }
+            return nextCode;
+        },
+    };
+}
+function flattenVitePlugins(pluginOptions) {
+    const plugins = [];
+    const visit = (option) => {
+        if (option === false || option === null || option === undefined) {
+            return;
+        }
+        if (Array.isArray(option)) {
+            for (const child of option) {
+                visit(child);
+            }
+            return;
+        }
+        if (typeof option === "object" && "then" in option) {
+            return;
+        }
+        plugins.push(option);
+    };
+    for (const option of pluginOptions ?? []) {
+        visit(option);
+    }
+    return plugins;
+}
+function orderVitePlugins(plugins) {
+    return [
+        ...plugins.filter((plugin) => plugin.enforce === "pre"),
+        ...plugins.filter((plugin) => plugin.enforce !== "pre" && plugin.enforce !== "post"),
+        ...plugins.filter((plugin) => plugin.enforce === "post"),
+    ];
+}
+function hasViteTransformHook(plugin) {
+    return viteTransformHookHandler(plugin) !== undefined;
+}
+function viteTransformHookHandler(plugin) {
+    const transform = plugin.transform;
+    if (typeof transform === "function") {
+        return transform;
+    }
+    if (transform !== null && typeof transform === "object") {
+        const handler = transform.handler;
+        if (typeof handler === "function") {
+            return handler;
+        }
+    }
+    return undefined;
+}
+function createClientRouteViteTransformContext(pluginName) {
+    return {
+        addWatchFile() { },
+        async resolve() {
+            return null;
+        },
+        error(error) {
+            if (error instanceof Error) {
+                throw error;
+            }
+            throw new Error(String(error));
+        },
+        warn() { },
+        getCombinedSourcemap() {
+            return null;
+        },
+        parse() {
+            throw new Error(`${pluginName}: client route import analysis cannot provide Rollup parser context.`);
+        },
+    };
+}
 async function sourceFileSignature(filename) {
     const stats = await stat(filename);
     return `${stats.mtimeMs}\0${stats.size}`;
@@ -685,6 +863,7 @@ export async function buildClientRouteOutput(options) {
     });
     const compiled = transformCompilerModuleContext({
         code: options.code,
+        clientBoundaryImports: options.clientBoundaryImports ?? [],
         filename: options.filename,
         moduleContext,
         target: "client",
@@ -697,8 +876,9 @@ export async function buildClientRouteOutput(options) {
     }
     const clientNavigation = options.clientNavigation ?? detectClientNavigationHint(options.code);
     const clientReferenceManifest = options.clientReferenceManifest ?? (await inferClientReferenceManifestForBundle(options));
+    const compatClientReferenceNames = compatClientReferenceComponentNames(clientReferenceManifest);
     const clientReferenceImportBlock = emitClientReferenceImportBlock(options.clientReferenceImports ?? []);
-    const clientReferenceRegistry = emitClientReferenceRegistry(clientReferenceManifest, options.clientReferenceImports ?? []);
+    const clientReferenceRegistry = emitClientReferenceRegistry(clientReferenceManifest, options.clientReferenceImports ?? [], compatClientReferenceNames);
     const routeComponentExpression = routeComponentExpressionForComponents(compiled.metadata.components);
     const routeId = routeIdForPath(options.routePath);
     const routeUsesCells = detectRouteCellStateHint(compiled.code);
@@ -892,7 +1072,7 @@ ${routeCellHydrationIndent}}
 ${routeCellHydrationIndent}  return;
 ${routeCellHydrationIndent}}
 `;
-    const entry = `${routeCellEffectImport}${routeCleanupScopeImport}${clientReferenceImportBlock}${routeHydrationCode}
+    const entry = `${routeCellEffectImport}${routeCleanupScopeImport}${emitCompatClientReferenceImportBlock(compatClientReferenceNames)}${clientReferenceImportBlock}${routeHydrationCode}
 
 const __mreactRouteId = ${JSON.stringify(routeId)};
 const __mreactRouteStateSignature = ${JSON.stringify(routeStateSignature)};
@@ -924,6 +1104,7 @@ export function __mreactHydrateRoute() {
   }
 ${routeCellHydrationStart}${routeCleanupHydrationStart}${boundaryOnlyHydrationBlock}${routeComponentGuard}${routeCellHydrationIndent}const __mreactNode = ${routeNodeExpression};
 ${routeCellHydrationIndent}__mreactResumeRoute(__mreactMarker, __mreactNode);
+${routeCellHydrationIndent}__mreactHydrateClientBoundaries(__mreactMarker, __mreactClientReferences, __mreactClientReferenceComponents);
 ${routeCellHydrationIndent}__mreactMarker.setAttribute("data-mreact-hydrated", "true");
 ${routeCellHydrationEnd}}
 ${routeCellDropFunction}
@@ -1798,7 +1979,9 @@ function __mreactHydrateClientBoundaries(marker, references, components) {
 
   for (const placeholder of placeholders) {
     const name = placeholder.getAttribute("data-mreact-client-boundary");
-    const component = name === null ? undefined : components.get(name);
+    const entry = name === null ? undefined : components.get(name);
+    const component = typeof entry === "function" ? entry : entry?.component;
+    const compat = entry?.compat === true;
 
     if (typeof component !== "function") {
       return false;
@@ -1808,6 +1991,17 @@ function __mreactHydrateClientBoundaries(marker, references, components) {
     const props = propsElement?.textContent === undefined || propsElement.textContent === ""
       ? {}
       : JSON.parse(propsElement.textContent);
+
+    if (compat) {
+      const container = document.createElement("span");
+      container.setAttribute("data-mreact-compat-boundary", name ?? "");
+      container.style.display = "contents";
+      placeholder.replaceWith(container);
+      __mreactCompatCreateRoot(container).render(__mreactCompatCreateElement(component, props));
+      propsElement?.remove();
+      continue;
+    }
+
     const node = component(props);
 
     placeholder.replaceWith(node);
@@ -2230,6 +2424,7 @@ function __mreactResumeChildren(current, next) {
         preserveExports: true,
         plugins: [workspaceRuntimePlugin({ routeFile: options.filename })],
         sourceMap: options.sourceMap,
+        vitePlugins: options.vitePlugins,
     });
     return {
         code: bundled.code,
@@ -2325,6 +2520,7 @@ export function currentDevtoolsEmitter() { return undefined; }`,
                     code: source,
                     dev: true,
                     filename: args.path,
+                    mode: isCompatSourcePath(args.path) ? "compat" : "reactive",
                     moduleContext,
                     target: "client",
                 });
@@ -2345,6 +2541,9 @@ export function currentDevtoolsEmitter() { return undefined; }`,
 function isRouteClientDependencySourcePath(path, routeFile) {
     return path !== routeFile && !path.includes(`${sep}node_modules${sep}`);
 }
+function isCompatSourcePath(path) {
+    return /\.compat(?:\.mreact)?(?:\.[cm]?[jt]sx?)?$/.test(path);
+}
 /**
  * Detects the `export const clientNavigation = false` hint in a page module
  * source. Returns the hinted value, or `true` when no hint is present (i.e.,
@@ -2414,7 +2613,7 @@ function emitClientReferenceImportBlock(imports) {
     })
         .join("\n")}\n`;
 }
-function emitClientReferenceRegistry(manifest, imports) {
+function emitClientReferenceRegistry(manifest, imports, compatNames) {
     const importedExpressions = new Map(imports.map((reference, index) => [
         reference.name,
         isIdentifierName(reference.exportName)
@@ -2425,10 +2624,24 @@ function emitClientReferenceRegistry(manifest, imports) {
         const expression = importedExpressions.get(reference.name) ?? clientReferenceExpression(reference.name);
         return expression === undefined
             ? []
-            : [`  [${JSON.stringify(reference.name)}, ${expression}],`];
+            : [
+                compatNames.has(reference.name)
+                    ? `  [${JSON.stringify(reference.name)}, { component: ${expression}, compat: true }],`
+                    : `  [${JSON.stringify(reference.name)}, ${expression}],`,
+            ];
     });
     return ["const __mreactClientReferenceComponents = new Map([", ...entries, "]);"].join("\n");
 }
+function compatClientReferenceComponentNames(manifest) {
+    return new Set(manifest
+        .filter((reference) => isCompatSourcePath(reference.moduleId))
+        .map((reference) => reference.name));
+}
+function emitCompatClientReferenceImportBlock(compatNames) {
+    return compatNames.size === 0
+        ? ""
+        : 'import { createElement as __mreactCompatCreateElement, createRoot as __mreactCompatCreateRoot } from "@reckona/mreact-compat";\n';
+}
 function clientReferenceLocalName(index) {
     return `__mreactClientReference${index}`;
 }