@reckona/mreact-router 0.0.183 → 0.0.185

package/src/client.ts

@@ -79,6 +79,7 @@ export interface BuildClientRouteOutputOptions {
   sourceMap?: boolean | undefined;
   vitePlugins?: readonly PluginOption[] | undefined;
   clientNavigation?: boolean | undefined;
+  forceInlineNavigationRuntime?: boolean | undefined;
 }
 
 export interface BuildClientRouteBatchOutput {
@@ -2085,6 +2086,7 @@ export async function buildNavigationRuntimeBundle(
     filename: "__mreact_navigation_runtime.tsx",
     routePath: "/__mreact_navigation_runtime",
     clientNavigation: true,
+    forceInlineNavigationRuntime: true,
     ...(options.dropConsoleFunctions === undefined
       ? {}
       : { dropConsoleFunctions: options.dropConsoleFunctions }),
@@ -2212,6 +2214,9 @@ export async function buildClientRouteEntrySource(
   }
 
   const clientNavigation = options.clientNavigation ?? detectClientNavigationHint(options.code);
+  const inlineClientNavigation =
+    clientNavigation && (options.forceInlineNavigationRuntime === true || options.minify !== true);
+  const deferredClientNavigation = clientNavigation && !inlineClientNavigation;
   const clientReferenceManifest =
     options.clientReferenceManifest ?? (await inferClientReferenceManifestForBundle(options));
   const compatClientReferenceNames = compatClientReferenceComponentNames(clientReferenceManifest);
@@ -2259,7 +2264,7 @@ export async function buildClientRouteEntrySource(
   const routeReactiveDomMetadataImport = !routeUsesOnlyClientReferenceBoundaries
     ? `import { withEventBindingMetadata as __mreactWithEventBindingMetadata, withPropBindingMetadata as __mreactWithPropBindingMetadata } from "@reckona/mreact-reactive-dom";\n`
     : "";
-  const navigationStateDeclaration = clientNavigation
+  const navigationStateDeclaration = inlineClientNavigation
     ? `const __mreactNavigationState = __mreactGlobal.__mreactNavigationState ??= {
   cache: new Map(),
   current: {
@@ -2280,6 +2285,188 @@ export async function buildClientRouteEntrySource(
   viewportObserver: undefined,
 };`
     : "";
+  const deferredNavigationRuntime = deferredClientNavigation
+    ? `
+let __mreactDeferredNavigationRuntime = undefined;
+
+function __mreactNavigationRuntimeScript() {
+  if (typeof document === "undefined") {
+    return undefined;
+  }
+
+  const element = document.getElementById("mreact-navigation-runtime");
+  const text = element?.textContent;
+
+  if (text === undefined || text === "") {
+    return undefined;
+  }
+
+  try {
+    const parsed = JSON.parse(text);
+    return typeof parsed?.script === "string" ? parsed.script : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+function __mreactLoadNavigationRuntime() {
+  const script = __mreactNavigationRuntimeScript();
+  if (script === undefined) {
+    return Promise.resolve(undefined);
+  }
+
+  if (__mreactDeferredNavigationRuntime !== undefined) {
+    return __mreactDeferredNavigationRuntime;
+  }
+
+  __mreactDeferredNavigationRuntime = import(/* @vite-ignore */ script).catch(() => undefined);
+  return __mreactDeferredNavigationRuntime;
+}
+
+function __mreactDeferredAnchorFromEvent(event) {
+  const target = event.target;
+  const anchor = target instanceof Element ? target.closest("a[href]") : null;
+
+  return anchor instanceof HTMLAnchorElement ? anchor : null;
+}
+
+function __mreactDeferredAnchorScrollMode(anchor) {
+  return anchor.dataset.mreactScroll === "preserve" ? false : true;
+}
+
+function __mreactDeferredAnchorTransitionMode(anchor) {
+  return anchor.dataset.mreactTransition === "auto" ? "auto" : false;
+}
+
+function __mreactDeferredIsHashOnlyNavigation(nextUrl) {
+  return nextUrl.origin === location.origin &&
+    nextUrl.pathname === location.pathname &&
+    nextUrl.search === location.search &&
+    nextUrl.hash !== "" &&
+    nextUrl.hash !== location.hash;
+}
+
+function __mreactDeferredIsCurrentLocationNavigation(nextUrl) {
+  return nextUrl.origin === location.origin &&
+    nextUrl.pathname === location.pathname &&
+    nextUrl.search === location.search;
+}
+
+function __mreactDeferredHandleClick(event) {
+  if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+    return;
+  }
+
+  const anchor = __mreactDeferredAnchorFromEvent(event);
+
+  if (anchor === null || anchor.dataset.mreactReload === "true") {
+    return;
+  }
+
+  const nextUrl = new URL(anchor.href, location.href);
+
+  if (nextUrl.origin !== location.origin || __mreactDeferredIsHashOnlyNavigation(nextUrl)) {
+    return;
+  }
+
+  if (__mreactNavigationRuntimeScript() === undefined) {
+    return;
+  }
+
+  if (__mreactDeferredIsCurrentLocationNavigation(nextUrl)) {
+    event.preventDefault();
+
+    if (__mreactDeferredAnchorScrollMode(anchor) !== false && nextUrl.hash === "") {
+      scrollTo(0, 0);
+    }
+
+    return;
+  }
+
+  event.preventDefault();
+  void __mreactLoadNavigationRuntime()
+    .then((runtime) =>
+      typeof runtime?.__mreactNavigate === "function"
+        ? runtime.__mreactNavigate(nextUrl.href, {
+            scroll: __mreactDeferredAnchorScrollMode(anchor),
+            transition: __mreactDeferredAnchorTransitionMode(anchor),
+          })
+        : false,
+    )
+    .then((navigated) => {
+      if (!navigated) {
+        location.href = nextUrl.href;
+      }
+    })
+    .catch(() => {
+      location.href = nextUrl.href;
+    });
+}
+
+function __mreactInstallNavigation() {
+  if (typeof document === "undefined") {
+    return;
+  }
+
+  const load = () => {
+    void __mreactLoadNavigationRuntime();
+  };
+  const loadFromAnchorEvent = (event) => {
+    const target = event.target;
+    const anchor = target instanceof Element ? target.closest("a[href]") : null;
+
+    if (anchor instanceof HTMLAnchorElement && anchor.origin === location.origin) {
+      load();
+    }
+  };
+
+  if (typeof requestIdleCallback === "function") {
+    requestIdleCallback(load);
+  } else {
+    setTimeout(load, 0);
+  }
+
+  addEventListener("popstate", load);
+  document.addEventListener("pointerover", loadFromAnchorEvent, true);
+  document.addEventListener("pointerdown", loadFromAnchorEvent, true);
+  document.addEventListener("click", __mreactDeferredHandleClick, true);
+  document.addEventListener("focusin", loadFromAnchorEvent);
+}
+
+export async function __mreactNavigate(url, options = {}) {
+  const runtime = await __mreactLoadNavigationRuntime();
+  return typeof runtime?.__mreactNavigate === "function"
+    ? runtime.__mreactNavigate(url, options)
+    : false;
+}
+
+export async function __mreactPrefetch(url) {
+  const runtime = await __mreactLoadNavigationRuntime();
+  return typeof runtime?.__mreactPrefetch === "function"
+    ? runtime.__mreactPrefetch(url)
+    : false;
+}
+
+export async function __mreactInvalidateNavigationCache(path) {
+  const runtime = await __mreactLoadNavigationRuntime();
+  runtime?.__mreactInvalidateNavigationCache?.(path);
+}
+
+export async function __mreactRestoreHistoryState(state) {
+  const runtime = await __mreactLoadNavigationRuntime();
+  return typeof runtime?.__mreactRestoreHistoryState === "function"
+    ? runtime.__mreactRestoreHistoryState(state)
+    : false;
+}
+
+export async function __mreactGetNavigationState() {
+  const runtime = await __mreactLoadNavigationRuntime();
+  return typeof runtime?.__mreactGetNavigationState === "function"
+    ? runtime.__mreactGetNavigationState()
+    : { from: null, pending: false, to: null, type: null };
+}
+`
+    : "";
   const routeCellStateDeclaration = routeUsesCells
     ? `const __mreactRouteStates = __mreactGlobal.__mreactRouteStates ??= new Map();
 let __mreactActiveCellRecords = undefined;
@@ -2451,6 +2638,7 @@ const __mreactRouteId = ${JSON.stringify(routeId)};
   const __mreactPropsScriptPrefix = ${JSON.stringify(routeHydrationContract.propsScriptPrefix)};
   const __mreactClientReferencesScriptPrefix = ${JSON.stringify(routeHydrationContract.clientReferencesScriptPrefix)};
   const __mreactGlobal = globalThis;
+  __mreactGlobal.__mreactHydrateRoute;
 ${navigationStateDeclaration}
 ${routeCellStateDeclaration}
 ${routeCleanupStateDeclaration}
@@ -2548,11 +2736,12 @@ function __mreactRunRouteHydration(factory) {
   }
 }
 
+${deferredNavigationRuntime}
 __mreactRunRouteHydration(() => __mreactHydrateRoute());
 ${clientNavigation ? "__mreactInstallNavigation();" : ""}
 
 ${
-  clientNavigation
+  inlineClientNavigation
     ? `export function __mreactNavigateToHtml(html, url, options = {}) {
   __mreactSaveCurrentHistoryState();
   const applied = __mreactApplyNavigationHtml(html, url);
@@ -4492,6 +4681,10 @@ function workspaceRuntimePlugin(options: { routeFiles: readonly string[] }) {
       "@reckona/mreact-compat/scheduler",
       packageFile("react-compat", "@reckona/mreact-compat", "scheduler"),
     ],
+    [
+      "@reckona/mreact-compat/server",
+      packageFile("react-compat", "@reckona/mreact-compat", "server"),
+    ],
     ["@reckona/mreact-reactive-dom", reactiveDomPath],
   ]);
 

package/src/module-runner.ts

@@ -296,6 +296,7 @@ const compatVendorSpecifierEntries = new Map<string, string>([
   ["@reckona/mreact-compat/jsx-dev-runtime", "jsx-dev-runtime"],
   ["@reckona/mreact-compat/jsx-runtime", "jsx-runtime"],
   ["@reckona/mreact-compat/scheduler", "scheduler"],
+  ["@reckona/mreact-compat/server", "server"],
 ]);
 
 const compatVendorEntrySpecifiers = new Map<string, string>([
@@ -307,6 +308,7 @@ const compatVendorEntrySpecifiers = new Map<string, string>([
   ["event-priority", "@reckona/mreact-compat/event-priority"],
   ["flight", "@reckona/mreact-compat/flight"],
   ["internal", "@reckona/mreact-compat/internal"],
+  ["server", "@reckona/mreact-compat/server"],
 ]);
 
 export function compatVendorEntryNames(): readonly string[] {
@@ -580,7 +582,185 @@ function withFileImportMetaUrl(source: string, filename: string): string {
     return source;
   }
 
-  return source.replaceAll("import.meta.url", JSON.stringify(pathToFileURL(filename).href));
+  return replaceImportMetaUrlExpressions(source, JSON.stringify(pathToFileURL(filename).href));
+}
+
+function replaceImportMetaUrlExpressions(source: string, replacement: string): string {
+  return replaceImportMetaUrlInCode(source, 0, source.length, replacement, false).text;
+}
+
+function replaceImportMetaUrlInCode(
+  source: string,
+  start: number,
+  end: number,
+  replacement: string,
+  stopAtTemplateExpressionEnd: boolean,
+): { next: number; text: string } {
+  let output = "";
+  let copyStart = start;
+  let index = start;
+  let braceDepth = 0;
+
+  while (index < end) {
+    const char = source[index];
+
+    if (stopAtTemplateExpressionEnd && char === "}") {
+      if (braceDepth === 0) {
+        break;
+      }
+      braceDepth -= 1;
+      index += 1;
+      continue;
+    }
+
+    if (isImportMetaUrlToken(source, index)) {
+      output += source.slice(copyStart, index);
+      output += replacement;
+      index += "import.meta.url".length;
+      copyStart = index;
+      continue;
+    }
+
+    if (char === '"' || char === "'") {
+      index = skipQuotedString(source, index, char);
+      continue;
+    }
+
+    if (char === "`") {
+      const template = replaceImportMetaUrlInTemplate(source, index, replacement);
+      output += source.slice(copyStart, index);
+      output += template.text;
+      index = template.next;
+      copyStart = index;
+      continue;
+    }
+
+    if (char === "/" && source[index + 1] === "/") {
+      index = skipLineComment(source, index + 2);
+      continue;
+    }
+
+    if (char === "/" && source[index + 1] === "*") {
+      index = skipBlockComment(source, index + 2);
+      continue;
+    }
+
+    if (stopAtTemplateExpressionEnd && char === "{") {
+      braceDepth += 1;
+    }
+
+    index += 1;
+  }
+
+  return {
+    next: index,
+    text: output + source.slice(copyStart, index),
+  };
+}
+
+function replaceImportMetaUrlInTemplate(
+  source: string,
+  start: number,
+  replacement: string,
+): { next: number; text: string } {
+  let output = "`";
+  let copyStart = start + 1;
+  let index = start + 1;
+
+  while (index < source.length) {
+    const char = source[index];
+
+    if (char === "\\") {
+      index += 2;
+      continue;
+    }
+
+    if (char === "`") {
+      return {
+        next: index + 1,
+        text: output + source.slice(copyStart, index + 1),
+      };
+    }
+
+    if (char === "$" && source[index + 1] === "{") {
+      output += source.slice(copyStart, index + 2);
+      const expression = replaceImportMetaUrlInCode(
+        source,
+        index + 2,
+        source.length,
+        replacement,
+        true,
+      );
+      output += expression.text;
+      index = expression.next;
+
+      if (source[index] === "}") {
+        output += "}";
+        index += 1;
+      }
+
+      copyStart = index;
+      continue;
+    }
+
+    index += 1;
+  }
+
+  return {
+    next: index,
+    text: output + source.slice(copyStart, index),
+  };
+}
+
+function isImportMetaUrlToken(source: string, index: number): boolean {
+  return (
+    source.startsWith("import.meta.url", index) &&
+    !isIdentifierPartCode(source.charCodeAt(index - 1)) &&
+    !isIdentifierPartCode(source.charCodeAt(index + "import.meta.url".length))
+  );
+}
+
+function isIdentifierPartCode(code: number): boolean {
+  return (
+    (code >= 48 && code <= 57) ||
+    (code >= 65 && code <= 90) ||
+    (code >= 97 && code <= 122) ||
+    code === 36 ||
+    code === 95
+  );
+}
+
+function skipQuotedString(source: string, start: number, quote: string): number {
+  let index = start + 1;
+
+  while (index < source.length) {
+    const char = source[index];
+
+    if (char === "\\") {
+      index += 2;
+      continue;
+    }
+
+    if (char === quote) {
+      return index + 1;
+    }
+
+    index += 1;
+  }
+
+  return index;
+}
+
+function skipLineComment(source: string, start: number): number {
+  const end = source.indexOf("\n", start);
+
+  return end === -1 ? source.length : end + 1;
+}
+
+function skipBlockComment(source: string, start: number): number {
+  const end = source.indexOf("*/", start);
+
+  return end === -1 ? source.length : end + 2;
 }
 
 function withNodeRequireShimForEsmBundle(options: {
@@ -1181,6 +1361,10 @@ function workspacePackageResolutionPlugin() {
       "@reckona/mreact-compat/scheduler",
       { entry: "scheduler", monorepoDir: "react-compat", packageName: "@reckona/mreact-compat" },
     ],
+    [
+      "@reckona/mreact-compat/server",
+      { entry: "server", monorepoDir: "react-compat", packageName: "@reckona/mreact-compat" },
+    ],
     [
       "@reckona/mreact-reactive-core",
       {

package/src/render.ts

@@ -1275,7 +1275,7 @@ async function renderAppRequestInternal(
                 assetBaseUrl: options.assetBaseUrl,
                 currentStyleSheets: clientStyleSheets,
                 currentScript: clientRoute ? clientScript : undefined,
-                currentNavigationScript: clientRoute ? undefined : navigationScript,
+                currentNavigationScript: navigationScript,
                 routeScripts: options.clientScripts,
               })}${html}`,
               preparedActions.htmlReplacements,
@@ -1562,7 +1562,7 @@ async function renderAppRequestInternal(
             assetBaseUrl: options.assetBaseUrl,
             currentStyleSheets: clientStyleSheets,
             currentScript: clientRoute ? clientScript : undefined,
-            currentNavigationScript: clientRoute ? undefined : navigationScript,
+            currentNavigationScript: navigationScript,
             routeScripts: options.clientScripts,
           })}${html}`,
           preparedActions.htmlReplacements,
@@ -1772,11 +1772,15 @@ function navigationRuntimeScriptTag(
   script: string | undefined,
   assetBaseUrl: string | undefined,
 ): string {
-  return script === undefined
-    ? ""
-    : `<script type="module" src="${escapeHtmlAttribute(
-        assetPath(script, assetBaseUrl ?? "/_mreact/client/"),
-      )}"></script>`;
+  if (script === undefined) {
+    return "";
+  }
+
+  const json = JSON.stringify({
+    script: assetPath(script, assetBaseUrl ?? "/_mreact/client/"),
+  }).replaceAll("<", "\\u003c");
+
+  return `<script type="application/json" id="mreact-navigation-runtime">${json}</script>`;
 }
 
 function routePrefetchManifestScript(

package/src/vite.ts

@@ -178,6 +178,10 @@ export function createAppRouterVitePlugin(options: AppRouterVitePluginOptions):
       "@reckona/mreact-compat/scheduler",
       packageFile("react-compat", "@reckona/mreact-compat", "scheduler"),
     ],
+    [
+      "@reckona/mreact-compat/server",
+      packageFile("react-compat", "@reckona/mreact-compat", "server"),
+    ],
     ["@reckona/mreact-router/link", packageFile("router", "@reckona/mreact-router", "link")],
     [
       "@reckona/mreact-router/navigation-state",