@reckona/mreact-router 0.0.195 → 0.0.196

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, extname, join, relative, sep } from "node:path";
+import { basename, dirname, extname, isAbsolute, join, relative, sep } from "node:path";
 import { analyzeBoundaryGraph, collectClientRouteModuleAnalysis, formatDiagnostic, } from "@reckona/mreact-compiler";
 import { collectClientRouteModuleAnalysisFromContext, createCompilerModuleContext, hasUnguardedBrowserGlobalReference, readTopLevelBooleanExport, readTopLevelBooleanExportFromContext, stripTypeScriptWithOxc, transformCompilerModuleContext, } from "@reckona/mreact-compiler/internal";
 import { assetPath } from "./assets.js";
@@ -1318,6 +1318,12 @@ export async function buildNavigationRuntimeBundle(options = {}) {
 export async function buildClientRouteOutput(options) {
     const entry = await buildClientRouteEntrySource(options);
     const dropConsoleFunctions = options.dropConsoleFunctions ?? resolveClientConsolePureFunctions(options.dropClientConsole);
+    const sourceRegionModulePaths = options.debugLabels === true ? undefined : new Set([options.filename]);
+    const runtimePlugin = workspaceRuntimePlugin({
+        debugLabels: options.debugLabels === true,
+        routeFiles: [options.filename],
+        sourceRegionModulePaths,
+    });
     const bundled = await bundleRouterModule({
         code: entry.code,
         cacheDir: options.cacheDir,
@@ -1329,7 +1335,8 @@ export async function buildClientRouteOutput(options) {
         minify: options.minify === true,
         platform: "browser",
         preserveExports: true,
-        plugins: [workspaceRuntimePlugin({ routeFiles: [options.filename] })],
+        sourceRegionModulePaths,
+        plugins: [runtimePlugin],
         sourceMap: options.sourceMap,
         vitePlugins: options.vitePlugins,
     });
@@ -1350,6 +1357,15 @@ export async function buildClientRouteBatchOutput(options) {
             vitePlugins: options.vitePlugins ?? route.vitePlugins,
         }),
     })));
+    const debugLabels = options.routes.some((route) => route.debugLabels === true);
+    const sourceRegionModulePaths = debugLabels
+        ? undefined
+        : new Set(entries.map((entry) => entry.filename));
+    const runtimePlugin = workspaceRuntimePlugin({
+        debugLabels,
+        routeFiles: entries.map((entry) => entry.filename),
+        sourceRegionModulePaths,
+    });
     const bundled = await bundleRouterModules({
         base: options.assetBaseUrl ?? "/_mreact/client/",
         cacheDir: options.cacheDir,
@@ -1363,7 +1379,8 @@ export async function buildClientRouteBatchOutput(options) {
         })),
         minify: options.minify === true,
         platform: "browser",
-        plugins: [workspaceRuntimePlugin({ routeFiles: entries.map((entry) => entry.filename) })],
+        sourceRegionModulePaths,
+        plugins: [runtimePlugin],
         root: options.projectRoot,
         sourceMap: options.sourceMap,
         dropConsoleFunctions: options.dropConsoleFunctions,
@@ -1392,13 +1409,20 @@ export async function buildClientRouteEntrySource(options) {
         filename: options.filename,
     });
     const routeSourceAnalysis = collectClientRouteModuleAnalysisFromContext(moduleContext);
+    const compilerFilename = options.debugLabels === true ? basename(options.filename) : options.filename;
+    const compilerModuleContext = compilerFilename === options.filename
+        ? moduleContext
+        : createCompilerModuleContext({
+            code: options.code,
+            filename: compilerFilename,
+        });
     const compiled = transformCompilerModuleContext({
         code: options.code,
         clientBoundaryImports: options.clientBoundaryImports ?? [],
-        filename: options.filename,
-        moduleContext,
+        filename: compilerFilename,
+        moduleContext: compilerModuleContext,
         target: "client",
-        dev: options.minify !== true,
+        dev: options.debugLabels === true,
     });
     if (compiled.diagnostics.length > 0) {
         throw new Error(compiled.diagnostics
@@ -1416,7 +1440,9 @@ export async function buildClientRouteEntrySource(options) {
     const routeId = routeIdForPath(options.routePath);
     const routeUsesCells = detectRouteCellStateHint(compiled.code);
     const routeUsesReactiveEffect = detectRouteReactiveEffectHint(compiled.code);
-    const routeUsesCleanupScope = routeUsesCells || routeUsesReactiveEffect;
+    const routeUsesDomRefs = compiled.metadata.imports.some((entry) => entry.source === "@reckona/mreact-reactive-dom" &&
+        entry.specifiers.includes("bindDomRef"));
+    const routeUsesCleanupScope = routeUsesCells || routeUsesReactiveEffect || routeUsesDomRefs;
     const routeExplicitlyRequiresHydration = isExplicitClientRouteSource(routeSourceAnalysis, options.filename);
     const routeHasEventBindings = (compiled.metadata.eventHydrationManifest?.events.length ?? 0) > 0;
     const routeCapturesEventBindings = compiled.code.includes("__mreactEventBindings");
@@ -1427,6 +1453,7 @@ export async function buildClientRouteEntrySource(options) {
     const routeRequiresFullHydration = routeExplicitlyRequiresHydration ||
         routeUsesCells ||
         routeUsesReactiveEffect ||
+        routeUsesDomRefs ||
         routeHasEventBindings;
     const routeUsesOnlyClientReferenceBoundaries = !routeRequiresFullHydration &&
         clientReferenceManifest.length > 0 &&
@@ -1447,7 +1474,7 @@ export async function buildClientRouteEntrySource(options) {
         ? `import { bindCapturedEvent as __mreactBindCapturedEvent } from "@reckona/mreact-reactive-dom/internal";\n`
         : "";
     const routeReactiveDomMetadataImport = !routeUsesOnlyClientReferenceBoundaries
-        ? `${routeCapturedEventImport}import { withEventBindingMetadata as __mreactWithEventBindingMetadata, withPropBindingMetadata as __mreactWithPropBindingMetadata } from "@reckona/mreact-reactive-dom";\n`
+        ? `${routeCapturedEventImport}import { ${routeUsesDomRefs ? "getDomRefBindings as __mreactGetDomRefBindings, " : ""}withEventBindingMetadata as __mreactWithEventBindingMetadata, withPropBindingMetadata as __mreactWithPropBindingMetadata } from "@reckona/mreact-reactive-dom";\n`
         : "";
     const navigationStateDeclaration = inlineClientNavigation
         ? `const __mreactNavigationState = __mreactGlobal.__mreactNavigationState ??= {
@@ -1723,9 +1750,10 @@ __mreactGlobal.__mreactRouteCell = (nativeCell, initial) => {
       __mreactActiveCellIndex = 0;
     }
     return () => {
-      for (const __mreactDispose of Array.from(__mreactRouteEffectDisposers)) {
-        __mreactDispose();
-      }
+      __mreactRunLifecycleTasks(
+        Array.from(__mreactRouteEffectDisposers),
+        (__mreactDispose) => __mreactDispose(),
+      );
       __mreactRouteEffectDisposers.clear();
     };
   });
@@ -1736,13 +1764,33 @@ __mreactGlobal.__mreactRouteCell = (nativeCell, initial) => {
         ? `  __mreactDisposeRoute(__mreactRouteId);
   const __mreactRouteEffectDisposers = new Set();
   __mreactRouteDisposers.set(__mreactRouteId, () => {
-    for (const __mreactDispose of Array.from(__mreactRouteEffectDisposers)) {
-      __mreactDispose();
-    }
+    __mreactRunLifecycleTasks(
+      Array.from(__mreactRouteEffectDisposers),
+      (__mreactDispose) => __mreactDispose(),
+    );
     __mreactRouteEffectDisposers.clear();
   });
 `
         : "";
+    const routeLifecycleFunctions = `
+function __mreactRunLifecycleTasks(values, run) {
+  let firstError;
+
+  for (const value of values) {
+    try {
+      run(value);
+    } catch (error) {
+      firstError ??= error;
+    }
+  }
+
+  if (firstError !== undefined) {
+    queueMicrotask(() => {
+      throw firstError;
+    });
+  }
+}
+`;
     const routeCellDropFunction = routeUsesCells
         ? `
 function __mreactDropMismatchedRouteState(previousState, nextState) {
@@ -1768,12 +1816,18 @@ function __mreactDisposeRoute(routeId) {
 }
 `
         : "";
-    const routeCleanupNavigationDispose = routeUsesCleanupScope
-        ? `  if (currentRouteId !== nextRouteId) {
-    __mreactDisposeRoute(currentRouteId);
+    const routeCleanupNavigationDispose = `  if (currentRouteId !== nextRouteId) {
+    const __mreactRegisteredRouteDisposers = __mreactGlobal.__mreactRouteDisposers;
+    const __mreactRegisteredRouteDispose = __mreactRegisteredRouteDisposers?.get(currentRouteId);
+    if (__mreactRegisteredRouteDispose !== undefined) {
+      __mreactRegisteredRouteDisposers.delete(currentRouteId);
+      __mreactRunLifecycleTasks(
+        [__mreactRegisteredRouteDispose],
+        (__mreactDispose) => __mreactDispose(),
+      );
+    }
   }
-`
-        : "";
+`;
     const routeNodeResolver = routeUsesCells
         ? `
 function __mreactResolveRouteNode(value) {
@@ -1812,9 +1866,7 @@ function __mreactResolveRouteNode(value) {
   const previousDisposers = current.__mreactEventDisposers;
 
   if (Array.isArray(previousDisposers)) {
-    for (const dispose of previousDisposers) {
-      dispose();
-    }
+    __mreactRunLifecycleTasks(previousDisposers, (dispose) => dispose());
   }
 
   const rawBindings = next.__mreactEventBindings;
@@ -1843,14 +1895,26 @@ function __mreactResolveRouteNode(value) {
   const previousDisposers = current.__mreactEventDisposers;
 
   if (Array.isArray(previousDisposers)) {
-    for (const dispose of previousDisposers) {
-      dispose();
-    }
+    __mreactRunLifecycleTasks(previousDisposers, (dispose) => dispose());
   }
 
   current.__mreactEventDisposers = [];
   current.__mreactHasEvents = false;
 }
+`;
+    const routeDomRefBindingSyncFunction = routeUsesDomRefs
+        ? `function __mreactSyncDomRefBindings(current, next) {
+  __mreactRunLifecycleTasks(
+    Array.from(__mreactGetDomRefBindings(current)),
+    (binding) => binding.dispose(),
+  );
+  __mreactRunLifecycleTasks(
+    Array.from(__mreactGetDomRefBindings(next)),
+    (binding) => binding.retarget(current),
+  );
+}
+`
+        : `function __mreactSyncDomRefBindings() {}
 `;
     const boundaryOnlyHydrationBlock = routeRequiresFullHydration
         ? ""
@@ -1909,6 +1973,7 @@ ${routeCellHydrationIndent}__mreactMarker.setAttribute(__mreactRouteHydratedAttr
 ${routeCellHydrationIndent}__mreactMarkRouteHydrated();
 ${routeCellHydrationEnd}}
 ${routeCellDropFunction}
+${routeLifecycleFunctions}
 ${routeCleanupFunction}
 
 function __mreactMarkRouteHydrated() {
@@ -2495,13 +2560,14 @@ function __mreactApplyNavigationHtml(html, url) {
   const currentRouteId = currentMarker.getAttribute("${routeHydrationContract.routeMarkerAttribute}");
   const nextRouteId = nextMarker.getAttribute("${routeHydrationContract.routeMarkerAttribute}");
 
+${routeCleanupNavigationDispose}
   __mreactMarkRouteHydrating();
   __mreactSyncHeadMetadata(template.content, html);
   if (!__mreactApplyNavigationShellHtml(currentMarker, nextMarker)) {
     __mreactUnmountCompatBoundaries(currentMarker);
     __mreactResumeNode(currentMarker, nextMarker);
   }
-${routeCleanupNavigationDispose}  __mreactSyncRouteDataScripts(template.content, currentRouteId, nextRouteId);
+  __mreactSyncRouteDataScripts(template.content, currentRouteId, nextRouteId);
 
   const script = template.content.querySelector('script[type="module"][src]')?.getAttribute("src");
   if (script !== null && script !== undefined) {
@@ -3658,6 +3724,7 @@ function __mreactResumeNode(current, next) {
   }
 
   __mreactSyncEventBindings(current, next);
+  __mreactSyncDomRefBindings(current, next);
   __mreactSyncAttributes(current, next);
   __mreactSyncPropBindings(current, next);
   __mreactResumeChildren(current, next);
@@ -3680,6 +3747,7 @@ function __mreactShouldReplaceNode(current, next) {
 }
 
 ${routeEventBindingSyncFunction}
+${routeDomRefBindingSyncFunction}
 
 function __mreactSyncAttributes(current, next) {
   for (const attribute of Array.from(current.attributes)) {
@@ -3699,9 +3767,7 @@ function __mreactSyncPropBindings(current, next) {
   const previousBindings = current.__mreactPropBindings;
 
   if (Array.isArray(previousBindings)) {
-    for (const binding of previousBindings) {
-      binding.dispose?.();
-    }
+    __mreactRunLifecycleTasks(previousBindings, (binding) => binding.dispose?.());
   }
 
   const bindings = next.__mreactPropBindings;
@@ -3717,9 +3783,7 @@ function __mreactSyncPropBindings(current, next) {
   next.__mreactPropBindings = [];
   next.__mreactHasReactiveProps = false;
 
-  for (const binding of bindings) {
-    binding.retarget?.(current);
-  }
+  __mreactRunLifecycleTasks(bindings, (binding) => binding.retarget?.(current));
 }
 
 function __mreactResumeChildren(current, next) {
@@ -3885,22 +3949,33 @@ export function invalidateReactiveDevtoolsCache() {}
 export function prepareReactiveEffectRunDevtoolsEvent() { return undefined; }`,
                 loader: "ts",
             }));
+            if (options.sourceRegionModulePaths !== undefined) {
+                buildApi.onLoad({ filter: /.*/ }, (args) => {
+                    if (isAbsolute(args.path) &&
+                        isRouteClientDependencySourcePath(args.path, routeFiles) &&
+                        !runtimePackageDirs.some((runtimePackageDir) => args.path.startsWith(`${runtimePackageDir}${sep}`))) {
+                        options.sourceRegionModulePaths?.add(args.path);
+                    }
+                    return undefined;
+                });
+            }
             buildApi.onLoad({ filter: /\.(?:mreact\.)?[cm]?[jt]sx$/ }, async (args) => {
                 if (!isRouteClientDependencySourcePath(args.path, routeFiles)) {
                     return undefined;
                 }
                 const source = await readFile(args.path, "utf8");
+                const compilerFilename = options.debugLabels ? basename(args.path) : args.path;
                 const moduleContext = createCompilerModuleContext({
                     code: source,
-                    filename: args.path,
+                    filename: compilerFilename,
                 });
                 if (!hasJsxSyntax(moduleContext.program)) {
                     return undefined;
                 }
                 const output = transformCompilerModuleContext({
                     code: source,
-                    dev: true,
-                    filename: args.path,
+                    dev: options.debugLabels,
+                    filename: compilerFilename,
                     mode: isCompatSourcePath(args.path) ? "compat" : "reactive",
                     moduleContext,
                     target: "client",