@reckona/mreact-router 0.0.54 → 0.0.56

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;
@@ -297,6 +320,7 @@ async function inferClientRouteModuleSource(options) {
                 continue;
             }
             const resolved = await resolveAppLocalModule({
+                allowExplicitNonSource: options.sourceTransform !== undefined,
                 cache: options.cache,
                 importer: options.filename,
                 specifier: reference.source,
@@ -304,7 +328,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 +344,7 @@ async function inferClientRouteModuleSource(options) {
                 }),
                 root: false,
                 seen: options.seen,
+                sourceTransform: options.sourceTransform,
             });
             diagnostics.push(...imported.diagnostics);
             if (!imported.client) {
@@ -364,6 +393,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 +401,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 +417,7 @@ async function inferClientRouteModuleSource(options) {
                     }),
                     root: false,
                     seen: options.seen,
+                    sourceTransform: options.sourceTransform,
                 });
                 diagnostics.push(...exported.diagnostics);
                 if (exported.clientBoundaryModule) {
@@ -562,19 +597,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 +651,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 +848,7 @@ export async function buildClientRouteOutput(options) {
     });
     const compiled = transformCompilerModuleContext({
         code: options.code,
+        clientBoundaryImports: options.clientBoundaryImports ?? [],
         filename: options.filename,
         moduleContext,
         target: "client",
@@ -697,13 +861,16 @@ 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);
+    const routeUsesReactiveEffect = detectRouteReactiveEffectHint(compiled.code);
+    const routeUsesCleanupScope = routeUsesCells || routeUsesReactiveEffect;
     const routeHasEventBindings = (compiled.metadata.eventHydrationManifest?.events.length ?? 0) > 0;
-    const routeRequiresFullHydration = routeUsesCells || routeHasEventBindings;
+    const routeRequiresFullHydration = routeUsesCells || routeUsesReactiveEffect || routeHasEventBindings;
     const routeUsesOnlyClientReferenceBoundaries = !routeRequiresFullHydration &&
         clientReferenceManifest.length > 0 &&
         (options.clientReferenceImports?.length ?? 0) > 0;
@@ -715,6 +882,9 @@ export async function buildClientRouteOutput(options) {
     const routeCellEffectImport = routeUsesCells
         ? `import { effect as __mreactRouteEffect } from "@reckona/mreact-reactive-core";\n`
         : "";
+    const routeCleanupScopeImport = routeUsesCleanupScope
+        ? `import { withCleanupScope as __mreactWithCleanupScope } from "@reckona/mreact-reactive-core/internal";\n`
+        : "";
     const navigationStateDeclaration = clientNavigation
         ? `const __mreactNavigationState = __mreactGlobal.__mreactNavigationState ??= {
   cache: new Map(),
@@ -737,6 +907,9 @@ export async function buildClientRouteOutput(options) {
 let __mreactActiveCellRecords = undefined;
 let __mreactActiveCellIndex = 0;`
         : "";
+    const routeCleanupStateDeclaration = routeUsesCleanupScope
+        ? `const __mreactRouteDisposers = __mreactGlobal.__mreactRouteDisposers ??= new Map();`
+        : "";
     const routeCellHook = routeUsesCells
         ? `
 __mreactGlobal.__mreactRouteCell = (nativeCell, initial) => {
@@ -778,8 +951,10 @@ __mreactGlobal.__mreactRouteCell = (nativeCell, initial) => {
   __mreactState.dispose?.();
 
   __mreactState.dispose = __mreactRouteEffect(() => {
+    const __mreactRouteEffectDisposers = new Set();
     __mreactActiveCellRecords = __mreactState.cells;
     __mreactActiveCellIndex = 0;
+    __mreactRouteDisposers.set(__mreactRouteId, () => __mreactState.dispose?.());
 
     try {
 `
@@ -789,10 +964,27 @@ __mreactGlobal.__mreactRouteCell = (nativeCell, initial) => {
       __mreactActiveCellRecords = undefined;
       __mreactActiveCellIndex = 0;
     }
+    return () => {
+      for (const __mreactDispose of Array.from(__mreactRouteEffectDisposers)) {
+        __mreactDispose();
+      }
+      __mreactRouteEffectDisposers.clear();
+    };
   });
 `
         : "";
     const routeCellHydrationIndent = routeUsesCells ? "      " : "  ";
+    const routeCleanupHydrationStart = routeUsesCleanupScope && !routeUsesCells
+        ? `  __mreactDisposeRoute(__mreactRouteId);
+  const __mreactRouteEffectDisposers = new Set();
+  __mreactRouteDisposers.set(__mreactRouteId, () => {
+    for (const __mreactDispose of Array.from(__mreactRouteEffectDisposers)) {
+      __mreactDispose();
+    }
+    __mreactRouteEffectDisposers.clear();
+  });
+`
+        : "";
     const routeCellDropFunction = routeUsesCells
         ? `
 function __mreactDropMismatchedRouteState(previousState, nextState) {
@@ -804,6 +996,24 @@ function __mreactDropMismatchedRouteState(previousState, nextState) {
     console.warn("mreact: dropping stale route state after route cell signature changed");
   }
 }
+`
+        : "";
+    const routeCleanupFunction = routeUsesCleanupScope
+        ? `
+function __mreactDisposeRoute(routeId) {
+  const __mreactDispose = __mreactRouteDisposers.get(routeId);
+  if (__mreactDispose === undefined) {
+    return;
+  }
+  __mreactRouteDisposers.delete(routeId);
+  __mreactDispose();
+}
+`
+        : "";
+    const routeCleanupNavigationDispose = routeUsesCleanupScope
+        ? `  if (currentRouteId !== nextRouteId) {
+    __mreactDisposeRoute(currentRouteId);
+  }
 `
         : "";
     const routeNodeResolver = routeUsesCells
@@ -830,9 +1040,12 @@ function __mreactResolveRouteNode(value) {
 }
 `
         : "";
-    const routeNodeExpression = routeUsesCells
-        ? "__mreactResolveRouteNode(__mreactComponent(__mreactProps))"
+    const routeComponentCallExpression = routeUsesCleanupScope
+        ? "__mreactWithCleanupScope((__mreactDispose) => __mreactRouteEffectDisposers.add(__mreactDispose), () => __mreactComponent(__mreactProps))"
         : "__mreactComponent(__mreactProps)";
+    const routeNodeExpression = routeUsesCells
+        ? `__mreactResolveRouteNode(${routeComponentCallExpression})`
+        : routeComponentCallExpression;
     const boundaryOnlyHydrationBlock = routeRequiresFullHydration
         ? ""
         : `${routeCellHydrationIndent}if (!__mreactHasNonSerializableClientBoundaries(__mreactMarker) && __mreactHydrateClientBoundaries(document, __mreactClientReferences, __mreactClientReferenceComponents)) {
@@ -844,13 +1057,14 @@ ${routeCellHydrationIndent}}
 ${routeCellHydrationIndent}  return;
 ${routeCellHydrationIndent}}
 `;
-    const entry = `${routeCellEffectImport}${clientReferenceImportBlock}${routeHydrationCode}
+    const entry = `${routeCellEffectImport}${routeCleanupScopeImport}${emitCompatClientReferenceImportBlock(compatClientReferenceNames)}${clientReferenceImportBlock}${routeHydrationCode}
 
 const __mreactRouteId = ${JSON.stringify(routeId)};
 const __mreactRouteStateSignature = ${JSON.stringify(routeStateSignature)};
 const __mreactGlobal = globalThis;
 ${navigationStateDeclaration}
 ${routeCellStateDeclaration}
+${routeCleanupStateDeclaration}
 ${routeCellHook}
 ${clientReferenceRegistry}
 ${routeNodeResolver}
@@ -873,11 +1087,13 @@ export function __mreactHydrateRoute() {
   if (__mreactMarker === null) {
     return;
   }
-${routeCellHydrationStart}${boundaryOnlyHydrationBlock}${routeComponentGuard}${routeCellHydrationIndent}const __mreactNode = ${routeNodeExpression};
+${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}
+${routeCleanupFunction}
 
 __mreactHydrateRoute();
 ${clientNavigation ? "__mreactInstallNavigation();" : ""}
@@ -1272,7 +1488,7 @@ function __mreactApplyNavigationHtml(html, url) {
 
   __mreactSyncHeadMetadata(template.content, html);
   __mreactResumeNode(currentMarker, nextMarker);
-  __mreactSyncRouteDataScripts(template.content, currentRouteId, nextRouteId);
+${routeCleanupNavigationDispose}  __mreactSyncRouteDataScripts(template.content, currentRouteId, nextRouteId);
 
   const script = template.content.querySelector('script[type="module"][src]')?.getAttribute("src");
   if (script !== null && script !== undefined) {
@@ -1748,7 +1964,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;
@@ -1758,6 +1976,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);
@@ -2180,6 +2409,7 @@ function __mreactResumeChildren(current, next) {
         preserveExports: true,
         plugins: [workspaceRuntimePlugin({ routeFile: options.filename })],
         sourceMap: options.sourceMap,
+        vitePlugins: options.vitePlugins,
     });
     return {
         code: bundled.code,
@@ -2196,6 +2426,10 @@ function workspaceRuntimePlugin(options) {
     const reactiveCorePath = packageFile("reactive-core", "@reckona/mreact-reactive-core", "index");
     const reactiveCoreDir = dirname(reactiveCorePath);
     const runtimePaths = new Map([
+        [
+            "@reckona/mreact-reactive-core/internal",
+            packageFile("reactive-core", "@reckona/mreact-reactive-core", "internal"),
+        ],
         ["@reckona/mreact-compat", packageFile("react-compat", "@reckona/mreact-compat", "index")],
         [
             "@reckona/mreact-compat/event-priority",
@@ -2237,7 +2471,7 @@ function workspaceRuntimePlugin(options) {
                 path: "reactive-core",
             }));
             buildApi.onResolve({
-                filter: /^@reckona\/mreact-(?:compat|reactive-dom)(?:\/(?:event-priority|flight|internal|jsx-dev-runtime|jsx-runtime|scheduler))?$/,
+                filter: /^@reckona\/mreact-(?:compat|reactive-core|reactive-dom)(?:\/(?:event-priority|flight|internal|jsx-dev-runtime|jsx-runtime|scheduler))?$/,
             }, (args) => {
                 const path = runtimePaths.get(args.path);
                 return path === undefined ? undefined : { path };
@@ -2271,6 +2505,7 @@ export function currentDevtoolsEmitter() { return undefined; }`,
                     code: source,
                     dev: true,
                     filename: args.path,
+                    mode: isCompatSourcePath(args.path) ? "compat" : "reactive",
                     moduleContext,
                     target: "client",
                 });
@@ -2291,6 +2526,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.,
@@ -2316,6 +2554,10 @@ function detectRouteCellStateHint(code) {
         ? /\bcell\d*\s*\(/.test(code)
         : new RegExp(`(?:${callExpression})\\s*\\(`).test(code);
 }
+function detectRouteReactiveEffectHint(code) {
+    return (/from\s+["']@reckona\/mreact-reactive-core["']/.test(code) &&
+        /\beffect\s*\(/.test(code));
+}
 async function inferClientReferenceManifestForBundle(options) {
     const cache = createClientRouteInferenceCache();
     const moduleContext = await compilerModuleContextForSource({
@@ -2356,7 +2598,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)
@@ -2367,10 +2609,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}`;
 }