@reckona/mreact-router 0.0.86 → 0.0.88

package/src/client.ts

@@ -938,14 +938,7 @@ function isStyleModuleSpecifier(source: string): boolean {
   return styleModuleExtensions.has(extname(pathname));
 }
 
-const styleModuleExtensions = new Set([
-  ".css",
-  ".less",
-  ".sass",
-  ".scss",
-  ".styl",
-  ".stylus",
-]);
+const styleModuleExtensions = new Set([".css", ".less", ".sass", ".scss", ".styl", ".stylus"]);
 
 function renderedImportedExportNames(
   reference: ClientRouteStaticImportReference,
@@ -1272,13 +1265,10 @@ function hasViteTransformHook(plugin: Plugin): boolean {
   return viteTransformHookHandler(plugin) !== undefined;
 }
 
-function viteTransformHookHandler(plugin: Plugin):
-  | ((
-      this: unknown,
-      code: string,
-      id: string,
-      options?: { ssr?: boolean | undefined },
-    ) => unknown)
+function viteTransformHookHandler(
+  plugin: Plugin,
+):
+  | ((this: unknown, code: string, id: string, options?: { ssr?: boolean | undefined }) => unknown)
   | undefined {
   const transform = plugin.transform as unknown;
 
@@ -1580,8 +1570,7 @@ export async function buildClientRouteEntrySource(
     routeSourceAnalysis,
     options.filename,
   );
-  const routeHasEventBindings =
-    (compiled.metadata.eventHydrationManifest?.events.length ?? 0) > 0;
+  const routeHasEventBindings = (compiled.metadata.eventHydrationManifest?.events.length ?? 0) > 0;
   const routeRequiresFullHydration =
     routeExplicitlyRequiresHydration ||
     routeUsesCells ||
@@ -1695,8 +1684,9 @@ __mreactGlobal.__mreactRouteCell = (nativeCell, initial) => {
 `
     : "";
   const routeCellHydrationIndent = routeUsesCells ? "      " : "  ";
-  const routeCleanupHydrationStart = routeUsesCleanupScope && !routeUsesCells
-    ? `  __mreactDisposeRoute(__mreactRouteId);
+  const routeCleanupHydrationStart =
+    routeUsesCleanupScope && !routeUsesCells
+      ? `  __mreactDisposeRoute(__mreactRouteId);
   const __mreactRouteEffectDisposers = new Set();
   __mreactRouteDisposers.set(__mreactRouteId, () => {
     for (const __mreactDispose of Array.from(__mreactRouteEffectDisposers)) {
@@ -1705,7 +1695,7 @@ __mreactGlobal.__mreactRouteCell = (nativeCell, initial) => {
     __mreactRouteEffectDisposers.clear();
   });
 `
-    : "";
+      : "";
   const routeCellDropFunction = routeUsesCells
     ? `
 function __mreactDropMismatchedRouteState(previousState, nextState) {
@@ -2249,6 +2239,7 @@ function __mreactApplyNavigationHtml(html, url) {
 
   __mreactMarkRouteHydrating();
   __mreactSyncHeadMetadata(template.content, html);
+  __mreactUnmountCompatBoundaries(currentMarker);
   __mreactResumeNode(currentMarker, nextMarker);
 ${routeCleanupNavigationDispose}  __mreactSyncRouteDataScripts(template.content, currentRouteId, nextRouteId);
 
@@ -2788,12 +2779,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;
     }
 
@@ -2806,6 +2804,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"]',
@@ -2912,6 +2958,7 @@ function __mreactResumeNode(current, next) {
   }
 
   if (__mreactShouldReplaceNode(current, next)) {
+    __mreactUnmountCompatBoundaries(current);
     current.replaceWith(next);
     return;
   }
@@ -2924,6 +2971,7 @@ function __mreactResumeNode(current, next) {
   }
 
   if (current.nodeType !== Node.ELEMENT_NODE || next.nodeType !== Node.ELEMENT_NODE) {
+    __mreactUnmountCompatBoundaries(current);
     current.replaceWith(next);
     return;
   }
@@ -3204,7 +3252,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();
   }
 }
 `;
@@ -3235,6 +3288,15 @@ function workspaceRuntimePlugin(options: { routeFiles: readonly string[] }) {
     "@reckona/mreact-compat",
   ];
   const runtimePaths = new Map([
+    ["react", reactCompatPath],
+    ["react-dom", reactCompatPath],
+    ["react-dom/client", reactCompatPath],
+    ["react-dom/server", reactCompatPath],
+    [
+      "react/jsx-dev-runtime",
+      packageFile("react-compat", "@reckona/mreact-compat", "jsx-dev-runtime"),
+    ],
+    ["react/jsx-runtime", packageFile("react-compat", "@reckona/mreact-compat", "jsx-runtime")],
     [
       "@reckona/mreact-reactive-core/internal",
       packageFile("reactive-core", "@reckona/mreact-reactive-core", "internal"),
@@ -3264,10 +3326,7 @@ function workspaceRuntimePlugin(options: { routeFiles: readonly string[] }) {
       "@reckona/mreact-compat/scheduler",
       packageFile("react-compat", "@reckona/mreact-compat", "scheduler"),
     ],
-    [
-      "@reckona/mreact-reactive-dom",
-      reactiveDomPath,
-    ],
+    ["@reckona/mreact-reactive-dom", reactiveDomPath],
   ]);
 
   return {
@@ -3295,7 +3354,7 @@ function workspaceRuntimePlugin(options: { routeFiles: readonly string[] }) {
       buildApi.onResolve(
         {
           filter:
-            /^@reckona\/mreact-(?:compat|reactive-core|reactive-dom)(?:\/(?:event-priority|flight|internal|jsx-dev-runtime|jsx-runtime|scheduler))?$/,
+            /^(?:react(?:\/jsx-(?:dev-)?runtime)?|react-dom(?:\/(?:client|server))?|@reckona\/mreact-(?:compat|reactive-core|reactive-dom)(?:\/(?:event-priority|flight|internal|jsx-dev-runtime|jsx-runtime|scheduler))?)$/,
         },
         (args) => {
           const path = runtimePaths.get(args.path);
@@ -3381,9 +3440,7 @@ function importerInRuntimePackage(
   const normalizedImporter = importer.split(/[\\/]+/).join("/");
   return (
     directories.some((directory) => importer.startsWith(`${directory}${sep}`)) ||
-    packageNames.some((packageName) =>
-      normalizedImporter.includes(`/node_modules/${packageName}/`),
-    )
+    packageNames.some((packageName) => normalizedImporter.includes(`/node_modules/${packageName}/`))
   );
 }
 
@@ -3421,10 +3478,7 @@ function detectRouteCellStateHint(code: string): boolean {
 }
 
 function detectRouteReactiveEffectHint(code: string): boolean {
-  return (
-    /from\s+["']@reckona\/mreact-reactive-core["']/.test(code) &&
-    /\beffect\s*\(/.test(code)
-  );
+  return /from\s+["']@reckona\/mreact-reactive-core["']/.test(code) && /\beffect\s*\(/.test(code);
 }
 
 async function inferClientReferenceManifestForBundle(options: {