@reckona/mreact-router 0.0.194 → 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) {
@@ -3317,13 +3383,15 @@ function __mreactHydrateClientBoundaries(marker, references, components) {
     return false;
   }
 
-  const placeholders = Array.from(marker.querySelectorAll("template[data-mreact-client-boundary]"));
+  let hydrated = false;
 
-  if (placeholders.length === 0) {
-    return false;
-  }
+  while (true) {
+    const placeholder = marker.querySelector("template[data-mreact-client-boundary]");
+
+    if (placeholder === null) {
+      return hydrated;
+    }
 
-  for (const placeholder of placeholders) {
     const name = placeholder.getAttribute("data-mreact-client-boundary");
     const entry = name === null ? undefined : components.get(name);
     const component = typeof entry === "function" ? entry : entry?.component;
@@ -3357,6 +3425,7 @@ function __mreactHydrateClientBoundaries(marker, references, components) {
       const root = __mreactCompatCreateRoot(container);
       container.__mreactCompatRoot = root;
       root.render(__mreactCompatCreateElement(component, props));
+      hydrated = true;
       continue;
     }
 
@@ -3364,9 +3433,8 @@ function __mreactHydrateClientBoundaries(marker, references, components) {
 
     placeholder.replaceWith(node);
     propsElement?.remove();
+    hydrated = true;
   }
-
-  return true;
 }
 
 function __mreactClientBoundaryParentContainer(placeholder, propsElement) {
@@ -3443,6 +3511,8 @@ function __mreactClientBoundaryPropsElement(placeholder, name) {
 }
 
 function __mreactClientBoundaryFallbackChildren(placeholder, propsElement) {
+  const componentFallback =
+    placeholder.getAttribute("data-mreact-client-boundary-fallback") === "component";
   const nodes = [];
   let next = placeholder.nextSibling;
 
@@ -3459,6 +3529,13 @@ function __mreactClientBoundaryFallbackChildren(placeholder, propsElement) {
     nodes.push(current);
   }
 
+  if (componentFallback) {
+    return __mreactExtractClientBoundaryChildren(
+      nodes,
+      placeholder.getAttribute("data-mreact-client-boundary"),
+    );
+  }
+
   if (nodes.length === 0) {
     return undefined;
   }
@@ -3466,6 +3543,80 @@ function __mreactClientBoundaryFallbackChildren(placeholder, propsElement) {
   return nodes.length === 1 ? nodes[0] : nodes;
 }
 
+function __mreactExtractClientBoundaryChildren(nodes, name) {
+  const startMarker = "mreact-client-boundary-children-start";
+  const endMarker = "mreact-client-boundary-children-end";
+  const archive = nodes.find(
+    (node) =>
+      node.nodeType === Node.ELEMENT_NODE &&
+      node.tagName === "TEMPLATE" &&
+      node.getAttribute("data-mreact-client-boundary-children") === name,
+  );
+
+  const roots = archive === undefined ? nodes : Array.from(archive.content.childNodes);
+  const markers = [];
+  const visit = (node) => {
+    if (
+      node.nodeType === Node.COMMENT_NODE &&
+      (node.nodeValue === startMarker || node.nodeValue === endMarker)
+    ) {
+      markers.push(node);
+    }
+
+    for (const child of Array.from(node.childNodes ?? [])) {
+      visit(child);
+    }
+  };
+
+  for (const root of roots) {
+    visit(root);
+  }
+
+  let start;
+  let depth = 0;
+
+  for (const marker of markers) {
+    if (marker.nodeValue === startMarker) {
+      if (depth === 0) {
+        start = marker;
+      }
+      depth += 1;
+      continue;
+    }
+
+    if (depth === 0 || start === undefined) {
+      continue;
+    }
+
+    depth -= 1;
+
+    if (depth !== 0) {
+      continue;
+    }
+
+    if (start.parentNode !== marker.parentNode) {
+      start = undefined;
+      continue;
+    }
+
+    const children = [];
+    let current = start.nextSibling;
+
+    while (current !== null && current !== marker) {
+      const next = current.nextSibling;
+      current.remove();
+      children.push(current);
+      current = next;
+    }
+
+    start.remove();
+    marker.remove();
+    return children.length === 0 ? "" : children.length === 1 ? children[0] : children;
+  }
+
+  return undefined;
+}
+
 function __mreactResumeRoute(marker, nextNode) {
   if (nextNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
     marker.replaceChildren(nextNode);
@@ -3481,12 +3632,23 @@ function __mreactResumeRoute(marker, nextNode) {
 
   __mreactResumeNode(current, nextNode);
 
-  if (current.parentNode !== marker) {
+  const active = current.parentNode === marker
+    ? current
+    : nextNode.parentNode === marker
+      ? nextNode
+      : null;
+
+  if (active === null) {
     return;
   }
 
-  while (marker.childNodes.length > 1) {
-    marker.lastChild?.remove();
+  for (const child of Array.from(marker.childNodes)) {
+    if (child === active) {
+      continue;
+    }
+
+    __mreactUnmountCompatBoundaries(child);
+    child.remove();
   }
 }
 
@@ -3562,6 +3724,7 @@ function __mreactResumeNode(current, next) {
   }
 
   __mreactSyncEventBindings(current, next);
+  __mreactSyncDomRefBindings(current, next);
   __mreactSyncAttributes(current, next);
   __mreactSyncPropBindings(current, next);
   __mreactResumeChildren(current, next);
@@ -3584,6 +3747,7 @@ function __mreactShouldReplaceNode(current, next) {
 }
 
 ${routeEventBindingSyncFunction}
+${routeDomRefBindingSyncFunction}
 
 function __mreactSyncAttributes(current, next) {
   for (const attribute of Array.from(current.attributes)) {
@@ -3603,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;
@@ -3621,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) {
@@ -3789,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",