@reckona/mreact-router 0.0.87 → 0.0.89

package/src/client.ts

@@ -29,6 +29,10 @@ import {
   type RouterBundleAssetOutput,
   type RouterBundleChunkOutput,
 } from "./bundle-pipeline.js";
+import {
+  resolveClientConsolePureFunctions,
+  type AppRouterProductionOptions,
+} from "./config.js";
 import type { AppRoute } from "./routes.js";
 import { existingRouteShellCandidates } from "./route-shells.js";
 import {
@@ -65,6 +69,8 @@ export interface BuildClientRouteOutputOptions {
   clientBoundaryImports?: readonly string[] | undefined;
   clientReferenceImports?: readonly ClientReferenceImport[] | undefined;
   clientReferenceManifest?: readonly ClientReferenceMetadata[] | undefined;
+  dropClientConsole?: AppRouterProductionOptions["dropClientConsole"] | undefined;
+  dropConsoleFunctions?: readonly string[] | undefined;
   filename: string;
   minify?: boolean | undefined;
   routePath: string;
@@ -1422,6 +1428,7 @@ export async function buildClientRouteBundle(options: {
 
 export async function buildNavigationRuntimeBundle(
   options: {
+    dropConsoleFunctions?: readonly string[] | undefined;
     minify?: boolean;
     sourceMap?: boolean;
   } = {},
@@ -1431,6 +1438,9 @@ export async function buildNavigationRuntimeBundle(
     filename: "__mreact_navigation_runtime.tsx",
     routePath: "/__mreact_navigation_runtime",
     clientNavigation: true,
+    ...(options.dropConsoleFunctions === undefined
+      ? {}
+      : { dropConsoleFunctions: options.dropConsoleFunctions }),
     ...(options.minify === undefined ? {} : { minify: options.minify }),
     ...(options.sourceMap === undefined ? {} : { sourceMap: options.sourceMap }),
   });
@@ -1440,12 +1450,15 @@ export async function buildClientRouteOutput(
   options: BuildClientRouteOutputOptions,
 ): Promise<{ code: string; map?: string }> {
   const entry = await buildClientRouteEntrySource(options);
+  const dropConsoleFunctions =
+    options.dropConsoleFunctions ?? resolveClientConsolePureFunctions(options.dropClientConsole);
   const bundled = await bundleRouterModule({
     code: entry.code,
     define: {
       __MREACT_CLIENT_DEVTOOLS__: "false",
     },
     filename: options.filename,
+    dropConsoleFunctions,
     minify: options.minify === true,
     platform: "browser",
     preserveExports: true,
@@ -1462,6 +1475,7 @@ export async function buildClientRouteOutput(
 
 export async function buildClientRouteBatchOutput(options: {
   assetBaseUrl?: string | undefined;
+  dropConsoleFunctions?: readonly string[] | undefined;
   minify?: boolean;
   projectRoot?: string | undefined;
   routes: readonly BuildClientRouteOutputOptions[];
@@ -1496,6 +1510,7 @@ export async function buildClientRouteBatchOutput(options: {
     plugins: [workspaceRuntimePlugin({ routeFiles: entries.map((entry) => entry.filename) })],
     root: options.projectRoot,
     sourceMap: options.sourceMap,
+    dropConsoleFunctions: options.dropConsoleFunctions,
     vitePlugins: options.vitePlugins,
   });
   const entryChunks = new Map(
@@ -2239,7 +2254,10 @@ function __mreactApplyNavigationHtml(html, url) {
 
   __mreactMarkRouteHydrating();
   __mreactSyncHeadMetadata(template.content, html);
-  __mreactResumeNode(currentMarker, nextMarker);
+  if (!__mreactApplyNavigationShellHtml(currentMarker, nextMarker)) {
+    __mreactUnmountCompatBoundaries(currentMarker);
+    __mreactResumeNode(currentMarker, nextMarker);
+  }
 ${routeCleanupNavigationDispose}  __mreactSyncRouteDataScripts(template.content, currentRouteId, nextRouteId);
 
   const script = template.content.querySelector('script[type="module"][src]')?.getAttribute("src");
@@ -2255,6 +2273,111 @@ ${routeCleanupNavigationDispose}  __mreactSyncRouteDataScripts(template.content,
   return true;
 }
 
+function __mreactApplyNavigationShellHtml(currentMarker, nextMarker) {
+  const target = __mreactNavigationShellSyncTarget(currentMarker, nextMarker);
+
+  if (target === null) {
+    return false;
+  }
+
+  __mreactUnmountCompatBoundaries(target.current);
+  __mreactResumeNode(target.current, target.next);
+  return true;
+}
+
+function __mreactNavigationShellSyncTarget(currentMarker, nextMarker) {
+  const currentShells = __mreactMarkerShellAncestors(currentMarker);
+  const nextShells = __mreactMarkerShellAncestors(nextMarker);
+  const commonLength = Math.min(currentShells.length, nextShells.length);
+  let commonIndex = -1;
+
+  for (let index = 0; index < commonLength; index += 1) {
+    if (!__mreactSameNavigationShellBoundary(currentShells[index], nextShells[index])) {
+      break;
+    }
+
+    commonIndex = index;
+  }
+
+  if (commonIndex >= 0) {
+    return __mreactNavigationShellDomTarget(currentShells[commonIndex], nextShells[commonIndex]);
+  }
+
+  if (currentShells.length === 0 || nextShells.length === 0) {
+    return null;
+  }
+
+  const currentRoot = currentShells[0];
+  const nextRoot = nextShells[0];
+
+  if (currentRoot.tagName !== nextRoot.tagName) {
+    return null;
+  }
+
+  return __mreactNavigationShellDomTarget(currentRoot, nextRoot);
+}
+
+function __mreactMarkerShellAncestors(marker) {
+  const shells = [];
+  let current = marker.parentElement;
+
+  while (current !== null) {
+    if (__mreactIsNavigationShellBoundary(current)) {
+      shells.push(current);
+    }
+
+    current = current.parentElement;
+  }
+
+  shells.reverse();
+  return shells;
+}
+
+function __mreactIsNavigationShellBoundary(element) {
+  return element.hasAttribute("data-mreact-layout-boundary") ||
+    element.hasAttribute("data-mreact-template-boundary");
+}
+
+function __mreactSameNavigationShellBoundary(current, next) {
+  const currentKind = __mreactNavigationShellBoundaryKind(current);
+  const nextKind = __mreactNavigationShellBoundaryKind(next);
+
+  if (currentKind === null || currentKind !== nextKind || current.tagName !== next.tagName) {
+    return false;
+  }
+
+  const attribute = currentKind === "layout"
+    ? "data-mreact-layout-boundary"
+    : "data-mreact-template-boundary";
+
+  return current.getAttribute(attribute) === next.getAttribute(attribute);
+}
+
+function __mreactNavigationShellBoundaryKind(element) {
+  if (element.hasAttribute("data-mreact-layout-boundary")) {
+    return "layout";
+  }
+
+  if (element.hasAttribute("data-mreact-template-boundary")) {
+    return "template";
+  }
+
+  return null;
+}
+
+function __mreactNavigationShellDomTarget(currentShell, nextShell) {
+  if (currentShell.tagName === "HTML" && nextShell.tagName === "HTML") {
+    const currentBody = currentShell.querySelector("body");
+    const nextBody = nextShell.querySelector("body");
+
+    if (currentBody !== null && nextBody !== null) {
+      return { current: currentBody, next: nextBody };
+    }
+  }
+
+  return { current: currentShell, next: nextShell };
+}
+
 function __mreactSyncHeadMetadata(root, html) {
   __mreactSyncHtmlLang(root, html);
 
@@ -2778,12 +2901,19 @@ function __mreactHydrateClientBoundaries(marker, references, components) {
       : JSON.parse(propsElement.textContent);
 
     if (compat) {
-      const container = document.createElement("span");
+      const parentContainer = __mreactClientBoundaryParentContainer(placeholder, propsElement);
+      const container = parentContainer ?? document.createElement("span");
       container.setAttribute("data-mreact-compat-boundary", name ?? "");
-      container.style.display = "contents";
-      placeholder.replaceWith(container);
-      __mreactCompatCreateRoot(container).render(__mreactCompatCreateElement(component, props));
+      if (parentContainer === null) {
+        container.style.display = "contents";
+        placeholder.replaceWith(container);
+      } else {
+        placeholder.remove();
+      }
       propsElement?.remove();
+      const root = __mreactCompatCreateRoot(container);
+      container.__mreactCompatRoot = root;
+      root.render(__mreactCompatCreateElement(component, props));
       continue;
     }
 
@@ -2796,6 +2926,54 @@ function __mreactHydrateClientBoundaries(marker, references, components) {
   return true;
 }
 
+function __mreactClientBoundaryParentContainer(placeholder, propsElement) {
+  const parent = placeholder.parentElement;
+
+  if (parent === null) {
+    return null;
+  }
+
+  for (const node of Array.from(parent.childNodes)) {
+    if (node === placeholder || node === propsElement) {
+      continue;
+    }
+
+    if (node.nodeType === Node.TEXT_NODE && (node.textContent ?? "").trim() === "") {
+      continue;
+    }
+
+    return null;
+  }
+
+  return parent;
+}
+
+function __mreactUnmountCompatBoundaries(root) {
+  const containers = [];
+
+  if (
+    root.nodeType === Node.ELEMENT_NODE &&
+    root.hasAttribute("data-mreact-compat-boundary")
+  ) {
+    containers.push(root);
+  }
+
+  if (typeof root.querySelectorAll === "function") {
+    containers.push(...root.querySelectorAll("[data-mreact-compat-boundary]"));
+  }
+
+  for (const container of containers) {
+    const compatRoot = container.__mreactCompatRoot;
+
+    if (compatRoot === undefined || typeof compatRoot.unmount !== "function") {
+      continue;
+    }
+
+    compatRoot.unmount();
+    container.__mreactCompatRoot = undefined;
+  }
+}
+
 function __mreactHasNonSerializableClientBoundaries(marker) {
   return marker.querySelector(
     'template[data-mreact-client-boundary][data-mreact-client-boundary-nonserializable="true"]',
@@ -2902,6 +3080,7 @@ function __mreactResumeNode(current, next) {
   }
 
   if (__mreactShouldReplaceNode(current, next)) {
+    __mreactUnmountCompatBoundaries(current);
     current.replaceWith(next);
     return;
   }
@@ -2914,6 +3093,7 @@ function __mreactResumeNode(current, next) {
   }
 
   if (current.nodeType !== Node.ELEMENT_NODE || next.nodeType !== Node.ELEMENT_NODE) {
+    __mreactUnmountCompatBoundaries(current);
     current.replaceWith(next);
     return;
   }
@@ -3194,7 +3374,12 @@ function __mreactResumeChildren(current, next) {
   }
 
   while (current.childNodes.length > nextChildren.length) {
-    current.lastChild?.remove();
+    const lastChild = current.lastChild;
+    if (lastChild === null) {
+      break;
+    }
+    __mreactUnmountCompatBoundaries(lastChild);
+    lastChild.remove();
   }
 }
 `;

package/src/config.ts

@@ -1,9 +1,14 @@
 import { isAbsolute, relative, resolve } from "node:path";
 
 export type AppRouterBuildTarget = "node" | "cloudflare" | "aws-lambda";
+export type AppRouterClientConsoleMethod = "debug" | "error" | "info" | "log" | "trace" | "warn";
 export type AppRouterClientSourceMapMode = "none" | "hidden" | "linked";
 export type AppRouterClientSourceMapOption = boolean | AppRouterClientSourceMapMode;
 
+export interface AppRouterProductionOptions {
+  dropClientConsole?: boolean | readonly AppRouterClientConsoleMethod[] | undefined;
+}
+
 export interface AppRouterProjectOptions {
   assetBaseUrl?: string | undefined;
   buildTargets?: readonly AppRouterBuildTarget[] | undefined;
@@ -19,6 +24,7 @@ export interface AppRouterProjectOptions {
   appDir?: string | undefined;
   allowedSourceDirs?: readonly string[] | undefined;
   projectRoot?: string | undefined;
+  production?: AppRouterProductionOptions | undefined;
   publicDir?: string | undefined;
   publicAssetBaseUrl?: string | undefined;
   routesDir?: string | undefined;
@@ -29,6 +35,7 @@ export interface ResolvedAppRouterProject {
   assetBaseUrl?: string | undefined;
   buildTargets: readonly AppRouterBuildTarget[];
   clientSourceMaps: AppRouterClientSourceMapMode;
+  clientConsolePureFunctions?: readonly string[] | undefined;
   projectRoot: string;
   publicAssetBaseUrl?: string | undefined;
   publicDir: string;
@@ -38,6 +45,10 @@ export interface ResolvedAppRouterProject {
 export function resolveAppRouterProjectOptions(
   options: AppRouterProjectOptions,
 ): ResolvedAppRouterProject {
+  const clientConsolePureFunctions = resolveClientConsolePureFunctions(
+    options.production?.dropClientConsole,
+  );
+
   if (
     options.appDir !== undefined &&
     options.projectRoot === undefined &&
@@ -52,6 +63,7 @@ export function resolveAppRouterProjectOptions(
       ...(options.assetBaseUrl === undefined ? {} : { assetBaseUrl: options.assetBaseUrl }),
       buildTargets: resolveBuildTargets(options.buildTargets),
       clientSourceMaps: resolveClientSourceMapMode(options.clientSourceMaps),
+      ...(clientConsolePureFunctions === undefined ? {} : { clientConsolePureFunctions }),
       projectRoot: appDir,
       ...(options.publicAssetBaseUrl === undefined
         ? {}
@@ -70,6 +82,7 @@ export function resolveAppRouterProjectOptions(
     ...(options.assetBaseUrl === undefined ? {} : { assetBaseUrl: options.assetBaseUrl }),
     buildTargets: resolveBuildTargets(options.buildTargets),
     clientSourceMaps: resolveClientSourceMapMode(options.clientSourceMaps),
+    ...(clientConsolePureFunctions === undefined ? {} : { clientConsolePureFunctions }),
     projectRoot,
     ...(options.publicAssetBaseUrl === undefined
       ? {}
@@ -79,6 +92,39 @@ export function resolveAppRouterProjectOptions(
   };
 }
 
+const defaultDroppedClientConsoleMethods = ["debug", "info", "log"] as const;
+const supportedClientConsoleMethods = new Set<AppRouterClientConsoleMethod>([
+  "debug",
+  "error",
+  "info",
+  "log",
+  "trace",
+  "warn",
+]);
+
+export function resolveClientConsolePureFunctions(
+  value: AppRouterProductionOptions["dropClientConsole"],
+): readonly string[] | undefined {
+  if (value === undefined || value === false) {
+    return undefined;
+  }
+
+  const methods = value === true ? defaultDroppedClientConsoleMethods : value;
+  const uniqueMethods = [...new Set(methods)];
+
+  for (const method of uniqueMethods) {
+    if (!supportedClientConsoleMethods.has(method)) {
+      throw new Error(
+        `Unsupported mreactRouter production.dropClientConsole method ${JSON.stringify(method)}. Expected "debug", "error", "info", "log", "trace", or "warn".`,
+      );
+    }
+  }
+
+  return uniqueMethods.length === 0
+    ? undefined
+    : uniqueMethods.map((method) => `console.${method}`);
+}
+
 export function resolveClientSourceMapMode(
   value: AppRouterClientSourceMapOption | undefined,
 ): AppRouterClientSourceMapMode {

package/src/index.ts

@@ -105,8 +105,10 @@ export type {
 } from "./types.js";
 export type {
   AppRouterBuildTarget,
+  AppRouterClientConsoleMethod,
   AppRouterClientSourceMapMode,
   AppRouterClientSourceMapOption,
+  AppRouterProductionOptions,
 } from "./config.js";
 export type {
   AssetHelperOptions,