@reckona/mreact-router 0.0.194 → 0.0.196

package/src/client.ts

@@ -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,
@@ -68,6 +68,7 @@ export interface ClientRouteManifestEntry {
 export interface BuildClientRouteOutputOptions {
   cacheDir?: string | undefined;
   code: string;
+  debugLabels?: boolean | undefined;
   clientBoundaryImports?: readonly string[] | undefined;
   clientReferenceImports?: readonly ClientReferenceImport[] | undefined;
   clientReferenceManifest?: readonly ClientReferenceMetadata[] | undefined;
@@ -2104,6 +2105,13 @@ export async function buildClientRouteOutput(
   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,
@@ -2115,7 +2123,8 @@ export async function buildClientRouteOutput(
     minify: options.minify === true,
     platform: "browser",
     preserveExports: true,
-    plugins: [workspaceRuntimePlugin({ routeFiles: [options.filename] })],
+    sourceRegionModulePaths,
+    plugins: [runtimePlugin],
     sourceMap: options.sourceMap,
     vitePlugins: options.vitePlugins,
   });
@@ -2149,6 +2158,15 @@ export async function buildClientRouteBatchOutput(options: {
       }),
     })),
   );
+  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,
@@ -2162,7 +2180,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,
@@ -2199,13 +2218,22 @@ export async function buildClientRouteEntrySource(
     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) {
@@ -2238,7 +2266,12 @@ export async function buildClientRouteEntrySource(
   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,
@@ -2254,6 +2287,7 @@ export async function buildClientRouteEntrySource(
     routeExplicitlyRequiresHydration ||
     routeUsesCells ||
     routeUsesReactiveEffect ||
+    routeUsesDomRefs ||
     routeHasEventBindings;
   const routeUsesOnlyClientReferenceBoundaries =
     !routeRequiresFullHydration &&
@@ -2276,7 +2310,7 @@ export async function buildClientRouteEntrySource(
     ? `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 ??= {
@@ -2552,9 +2586,10 @@ __mreactGlobal.__mreactRouteCell = (nativeCell, initial) => {
       __mreactActiveCellIndex = 0;
     }
     return () => {
-      for (const __mreactDispose of Array.from(__mreactRouteEffectDisposers)) {
-        __mreactDispose();
-      }
+      __mreactRunLifecycleTasks(
+        Array.from(__mreactRouteEffectDisposers),
+        (__mreactDispose) => __mreactDispose(),
+      );
       __mreactRouteEffectDisposers.clear();
     };
   });
@@ -2566,13 +2601,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) {
@@ -2598,12 +2653,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) {
@@ -2642,9 +2703,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;
@@ -2673,14 +2732,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
     ? ""
@@ -2740,6 +2811,7 @@ ${routeCellHydrationIndent}__mreactMarker.setAttribute(__mreactRouteHydratedAttr
 ${routeCellHydrationIndent}__mreactMarkRouteHydrated();
 ${routeCellHydrationEnd}}
 ${routeCellDropFunction}
+${routeLifecycleFunctions}
 ${routeCleanupFunction}
 
 function __mreactMarkRouteHydrated() {
@@ -3327,13 +3399,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) {
@@ -4150,13 +4223,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;
@@ -4190,6 +4265,7 @@ function __mreactHydrateClientBoundaries(marker, references, components) {
       const root = __mreactCompatCreateRoot(container);
       container.__mreactCompatRoot = root;
       root.render(__mreactCompatCreateElement(component, props));
+      hydrated = true;
       continue;
     }
 
@@ -4197,9 +4273,8 @@ function __mreactHydrateClientBoundaries(marker, references, components) {
 
     placeholder.replaceWith(node);
     propsElement?.remove();
+    hydrated = true;
   }
-
-  return true;
 }
 
 function __mreactClientBoundaryParentContainer(placeholder, propsElement) {
@@ -4276,6 +4351,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;
 
@@ -4292,6 +4369,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;
   }
@@ -4299,6 +4383,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);
@@ -4314,12 +4472,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();
   }
 }
 
@@ -4395,6 +4564,7 @@ function __mreactResumeNode(current, next) {
   }
 
   __mreactSyncEventBindings(current, next);
+  __mreactSyncDomRefBindings(current, next);
   __mreactSyncAttributes(current, next);
   __mreactSyncPropBindings(current, next);
   __mreactResumeChildren(current, next);
@@ -4417,6 +4587,7 @@ function __mreactShouldReplaceNode(current, next) {
 }
 
 ${routeEventBindingSyncFunction}
+${routeDomRefBindingSyncFunction}
 
 function __mreactSyncAttributes(current, next) {
   for (const attribute of Array.from(current.attributes)) {
@@ -4436,9 +4607,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;
@@ -4454,9 +4623,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) {
@@ -4509,7 +4676,11 @@ function __mreactResumeChildren(current, next) {
   };
 }
 
-function workspaceRuntimePlugin(options: { routeFiles: readonly string[] }) {
+function workspaceRuntimePlugin(options: {
+  debugLabels: boolean;
+  routeFiles: readonly string[];
+  sourceRegionModulePaths?: Set<string> | undefined;
+}) {
   const routeFiles = new Set(options.routeFiles);
   const packageFile = (monorepoDir: string, packageName: string, entry: string): string =>
     workspacePackageFile({
@@ -4637,15 +4808,31 @@ 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)) {
@@ -4654,8 +4841,8 @@ export function prepareReactiveEffectRunDevtoolsEvent() { 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",

package/src/vite.ts

@@ -848,6 +848,7 @@ async function renderAppRouterClientRouteDevModule(
     clientReferenceImports: references.clientReferenceImports,
     clientReferenceManifest: references.clientReferenceManifest,
     clientNavigation: navigation || detectAnchorElementUsage(clientSource, route.file),
+    debugLabels: true,
     filename: route.file,
     routeMayUseOutOfOrderFragments: true,
     routePath: route.path,