@reckona/mreact-router 0.0.4 → 0.0.6

package/dist/client.js

@@ -1,12 +1,12 @@
 import { createHash } from "node:crypto";
 import { readFile, stat } from "node:fs/promises";
 import { dirname, extname, join } from "node:path";
-import { fileURLToPath } from "node:url";
 import { collectIdentifierReferenceNames, collectJsxComponentRootNames, collectStaticExportReferences, collectStaticImportReferences, formatDiagnostic, hasClientRuntimeSyntax, transform, } from "@reckona/mreact-compiler";
 import { build } from "esbuild";
 import { assetPath } from "./assets.js";
 import { stripRouteClientOnlyExports } from "./route-source.js";
 import { escapeHtmlQuotedAttribute as escapeHtmlAttribute } from "@reckona/mreact-shared/html-escape";
+import { workspacePackageFile } from "./workspace-packages.js";
 export async function routeToClientManifestEntry(route) {
     if (route.kind === "server") {
         return { path: route.path, kind: route.kind, client: false };
@@ -77,6 +77,11 @@ async function inferClientRouteModuleSource(options) {
             filename: options.filename,
         }));
         for (const reference of await staticImportReferencesForSource(options)) {
+            const rendered = isRenderedImportReference(reference, jsxComponentRoots);
+            const referenced = isReferencedImportReference(reference, identifierReferences);
+            if (!rendered && !referenced) {
+                continue;
+            }
             const resolved = await resolveAppLocalModule({
                 cache: options.cache,
                 importer: options.filename,
@@ -97,7 +102,7 @@ async function inferClientRouteModuleSource(options) {
             if (!imported.client) {
                 continue;
             }
-            if (isRenderedImportReference(reference, jsxComponentRoots)) {
+            if (rendered) {
                 clientBoundaryImports.push(reference.source);
                 continue;
             }
@@ -172,6 +177,10 @@ function isRenderedImportReference(reference, jsxComponentRoots) {
     return (reference.sideEffect ||
         reference.localNames.some((localName) => jsxComponentRoots.has(localName)));
 }
+function isReferencedImportReference(reference, identifierReferences) {
+    return (reference.sideEffect ||
+        reference.localNames.some((localName) => identifierReferences.has(localName)));
+}
 function unsupportedClientImportReferenceDiagnostic(options) {
     if (options.reference.sideEffect) {
         return undefined;
@@ -353,13 +362,25 @@ export async function buildClientRouteOutput(options) {
     const clientNavigation = options.clientNavigation ?? detectClientNavigationHint(options.code);
     const clientReferenceManifest = options.clientReferenceManifest ?? await inferClientReferenceManifestForBundle(options);
     const clientReferenceRegistry = emitClientReferenceRegistry(clientReferenceManifest);
+    const routeComponentExpression = routeComponentExpressionForComponents(compiled.metadata.components);
     const routeId = routeIdForPath(options.routePath);
     const routeUsesCells = detectRouteCellStateHint(compiled.code);
     const routeStateSignature = routeUsesCells ? routeStateSignatureForSource(compiled.code) : "";
     const navigationStateDeclaration = clientNavigation
         ? `const __mreactNavigationState = __mreactGlobal.__mreactNavigationState ??= {
   cache: new Map(),
+  current: {
+    from: null,
+    pending: false,
+    to: null,
+    type: null,
+  },
   installed: false,
+  prefetchedScripts: new Set(),
+  routePrefetchManifest: undefined,
+  routePrefetchManifestText: undefined,
+  viewportAnchors: new WeakSet(),
+  viewportObserver: undefined,
 };`
         : "";
     const routeCellStateDeclaration = routeUsesCells
@@ -455,11 +476,7 @@ export function __mreactHydrateRoute() {
     : JSON.parse(__mreactClientReferencesElement.textContent);
   const __mreactClientReferenceManifests = __mreactGlobal.__mreactClientReferenceManifests ??= new Map();
   __mreactClientReferenceManifests.set(__mreactRouteId, __mreactClientReferences);
-  const __mreactComponent = typeof Page === "function"
-    ? Page
-    : typeof DefaultExport === "function"
-      ? DefaultExport
-      : undefined;
+  const __mreactComponent = ${routeComponentExpression};
 
   if (__mreactMarker === null || __mreactComponent === undefined) {
     return;
@@ -478,7 +495,7 @@ __mreactHydrateRoute();
 ${clientNavigation ? "__mreactInstallNavigation();" : ""}
 
 ${clientNavigation
-        ? `export function __mreactNavigateToHtml(html, url) {
+        ? `export function __mreactNavigateToHtml(html, url, options = {}) {
   __mreactSaveCurrentHistoryState();
   const applied = __mreactApplyNavigationHtml(html, url);
 
@@ -487,50 +504,189 @@ ${clientNavigation
   }
 
   __mreactPushHistoryState(url);
-  __mreactScrollTo(0, 0);
+  if (options.scroll !== "preserve") {
+    __mreactScrollTo(0, 0);
+  }
   return true;
 }
 
 export async function __mreactPrefetch(url) {
-  const href = __mreactNormalizeNavigationUrl(url);
+  if (!__mreactCanPrefetch()) {
+    return false;
+  }
+
+  const script = __mreactRouteScriptForNavigationUrl(url);
+
+  if (script === undefined) {
+    return false;
+  }
+
+  return __mreactPrefetchRouteScript(script);
+}
+
+function __mreactPrefetchRouteScript(script) {
+  if (typeof document === "undefined") {
+    return false;
+  }
+
+  const href = __mreactNormalizeAssetUrl(script);
 
   if (href === undefined) {
     return false;
   }
 
-  if (__mreactNavigationState.cache.has(href)) {
+  if (__mreactNavigationState.prefetchedScripts.has(href)) {
     return true;
   }
 
-  const response = await fetch(href, {
-    headers: { "x-mreact-navigation": "1" },
-  });
-  __mreactApplyRevalidationHeader(response);
-  const html = await response.text();
-  __mreactNavigationState.cache.set(href, html);
+  for (const link of Array.from(document.querySelectorAll('link[rel="modulepreload"][href]'))) {
+    if (link.href === href) {
+      __mreactNavigationState.prefetchedScripts.add(href);
+      return true;
+    }
+  }
+
+  const link = document.createElement("link");
+  link.rel = "modulepreload";
+  link.href = href;
+  document.head.appendChild(link);
+  __mreactNavigationState.prefetchedScripts.add(href);
   return true;
 }
 
-export async function __mreactNavigate(url) {
+export async function __mreactNavigate(url, options = {}) {
   const href = __mreactNormalizeNavigationUrl(url);
 
   if (href === undefined) {
     return false;
   }
 
-  document.documentElement.setAttribute("data-mreact-navigation-pending", "true");
+  __mreactSetNavigationState(__mreactPendingNavigationState(href, options.type ?? "push"));
 
   try {
     const cachedHtml = __mreactNavigationState.cache.get(href);
     const html = cachedHtml ?? await __mreactFetchNavigationHtml(href);
 
     __mreactNavigationState.cache.set(href, html);
-    return __mreactNavigateToHtml(html, href);
+    return await __mreactApplyNavigationHtmlWithOptionalTransition(html, href, options);
   } finally {
-    document.documentElement.removeAttribute("data-mreact-navigation-pending");
+    __mreactSetNavigationState(__mreactIdleNavigationState());
+  }
+}
+
+export function __mreactGetNavigationState() {
+  return __mreactNavigationStateSnapshot(__mreactNavigationState.current);
+}
+
+function __mreactPendingNavigationState(to, type) {
+  return {
+    from: typeof location === "undefined" ? null : location.href,
+    pending: true,
+    to,
+    type: __mreactNavigationType(type),
+  };
+}
+
+function __mreactIdleNavigationState() {
+  return {
+    from: null,
+    pending: false,
+    to: null,
+    type: null,
+  };
+}
+
+function __mreactSetNavigationState(state) {
+  const snapshot = __mreactNavigationStateSnapshot(state);
+  __mreactNavigationState.current = snapshot;
+  __mreactApplyNavigationStateAttributes(snapshot);
+  __mreactDispatchNavigationStateChange(snapshot);
+}
+
+function __mreactNavigationStateSnapshot(state) {
+  return {
+    from: typeof state?.from === "string" ? state.from : null,
+    pending: state?.pending === true,
+    to: typeof state?.to === "string" ? state.to : null,
+    type: __mreactNavigationType(state?.type),
+  };
+}
+
+function __mreactNavigationType(type) {
+  return type === "push" || type === "replace" || type === "pop" || type === "refresh"
+    ? type
+    : null;
+}
+
+function __mreactApplyNavigationStateAttributes(state) {
+  if (typeof document === "undefined") {
+    return;
+  }
+
+  const root = document.documentElement;
+
+  if (state.pending !== true) {
+    root.removeAttribute("data-mreact-navigation-pending");
+    root.removeAttribute("data-mreact-navigation-from");
+    root.removeAttribute("data-mreact-navigation-to");
+    root.removeAttribute("data-mreact-navigation-type");
+    return;
+  }
+
+  root.setAttribute("data-mreact-navigation-pending", "true");
+
+  if (state.from === null) {
+    root.removeAttribute("data-mreact-navigation-from");
+  } else {
+    root.setAttribute("data-mreact-navigation-from", state.from);
+  }
+
+  if (state.to === null) {
+    root.removeAttribute("data-mreact-navigation-to");
+  } else {
+    root.setAttribute("data-mreact-navigation-to", state.to);
+  }
+
+  if (state.type === null) {
+    root.removeAttribute("data-mreact-navigation-type");
+  } else {
+    root.setAttribute("data-mreact-navigation-type", state.type);
   }
 }
 
+function __mreactDispatchNavigationStateChange(state) {
+  if (typeof window === "undefined" || typeof CustomEvent !== "function") {
+    return;
+  }
+
+  window.dispatchEvent(new CustomEvent("mreact:navigation-state-change", {
+    detail: state,
+  }));
+}
+
+async function __mreactApplyNavigationHtmlWithOptionalTransition(html, href, options) {
+  if (
+    options.transition !== "auto" ||
+    typeof document === "undefined" ||
+    typeof document.startViewTransition !== "function"
+  ) {
+    return __mreactNavigateToHtml(html, href, options);
+  }
+
+  let navigated = false;
+  const transition = document.startViewTransition(() => {
+    navigated = __mreactNavigateToHtml(html, href, options);
+  });
+
+  try {
+    await transition.updateCallbackDone;
+  } catch {
+    return navigated;
+  }
+
+  return navigated;
+}
+
 export function __mreactInvalidateNavigationCache(path) {
   const normalizedPath = __mreactNormalizeNavigationPath(path);
 
@@ -607,15 +763,12 @@ function __mreactApplyNavigationHtml(html, url) {
     return false;
   }
 
-  __mreactResumeNode(currentMarker, nextMarker);
-
-  for (const propsElement of Array.from(document.querySelectorAll('script[type="application/json"][id^="mreact-props-"], script[type="application/json"][id^="mreact-client-references-"]'))) {
-    propsElement.remove();
-  }
+  const currentRouteId = currentMarker.getAttribute("data-mreact-route-id");
+  const nextRouteId = nextMarker.getAttribute("data-mreact-route-id");
 
-  for (const propsElement of Array.from(template.content.querySelectorAll('script[type="application/json"][id^="mreact-props-"], script[type="application/json"][id^="mreact-client-references-"]'))) {
-    document.body.appendChild(propsElement);
-  }
+  __mreactSyncHeadMetadata(template.content, html);
+  __mreactResumeNode(currentMarker, nextMarker);
+  __mreactSyncRouteDataScripts(template.content, currentRouteId, nextRouteId);
 
   const script = template.content.querySelector('script[type="module"][src]')?.getAttribute("src");
   if (script !== null && script !== undefined) {
@@ -623,10 +776,85 @@ function __mreactApplyNavigationHtml(html, url) {
   }
 
   __mreactApplyOutOfOrderFragments(document);
+  __mreactObserveViewportPrefetchAnchors(document);
 
   return true;
 }
 
+function __mreactSyncHeadMetadata(root, html) {
+  const nextHead = root.querySelector("head");
+
+  if ((nextHead === null && !/<head(?:\\s[^>]*)?>/i.test(html)) || document.head === null) {
+    return;
+  }
+
+  const metadataRoot = nextHead ?? root;
+  const selector = __mreactManagedHeadMetadataSelector();
+
+  for (const element of Array.from(document.head.querySelectorAll(selector))) {
+    element.remove();
+  }
+
+  for (const element of Array.from(metadataRoot.querySelectorAll(selector))) {
+    document.head.appendChild(element);
+  }
+}
+
+function __mreactManagedHeadMetadataSelector() {
+  return [
+    "title",
+    'meta[name="description"]',
+    'link[rel="canonical"]',
+    'meta[property="og:title"]',
+    'meta[property="og:description"]',
+    'meta[property="og:image"]',
+    'link[rel="icon"]',
+    'link[rel="apple-touch-icon"]',
+    'meta[name="robots"]',
+    'meta[name="theme-color"]',
+    'meta[name="viewport"]',
+  ].join(",");
+}
+
+function __mreactSyncRouteDataScripts(root, currentRouteId, nextRouteId) {
+  const managedIds = __mreactRouteDataScriptIds(currentRouteId, nextRouteId);
+
+  if (managedIds.size === 0) {
+    return;
+  }
+
+  for (const element of Array.from(document.querySelectorAll(__mreactRouteDataScriptSelector()))) {
+    if (managedIds.has(element.id)) {
+      element.remove();
+    }
+  }
+
+  for (const element of Array.from(root.querySelectorAll(__mreactRouteDataScriptSelector()))) {
+    if (managedIds.has(element.id)) {
+      document.body.appendChild(element);
+    }
+  }
+}
+
+function __mreactRouteDataScriptIds(...routeIds) {
+  const ids = new Set();
+
+  for (const routeId of routeIds) {
+    if (typeof routeId !== "string" || routeId === "") {
+      continue;
+    }
+
+    ids.add(\`mreact-props-\${routeId}\`);
+    ids.add(\`mreact-client-references-\${routeId}\`);
+  }
+
+  return ids;
+}
+
+function __mreactRouteDataScriptSelector() {
+  return 'script[type="application/json"][id^="mreact-props-"], script[type="application/json"][id^="mreact-client-references-"]';
+}
+
 function __mreactCurrentHistoryState(url) {
   return {
     __mreact: true,
@@ -661,6 +889,18 @@ function __mreactSaveCurrentHistoryState() {
   }
 }
 
+function __mreactEnableManualScrollRestoration() {
+  if (typeof history === "undefined" || !("scrollRestoration" in history)) {
+    return;
+  }
+
+  try {
+    history.scrollRestoration = "manual";
+  } catch {
+    // Ignore read-only history implementations in non-browser runtimes.
+  }
+}
+
 function __mreactNormalizeNavigationUrl(url) {
   if (typeof location === "undefined") {
     return typeof url === "string" ? url : undefined;
@@ -673,20 +913,156 @@ function __mreactNormalizeNavigationUrl(url) {
   }
 }
 
+function __mreactNormalizeAssetUrl(url) {
+  if (typeof location === "undefined") {
+    return typeof url === "string" ? url : undefined;
+  }
+
+  try {
+    return new URL(url, location.href).href;
+  } catch {
+    return undefined;
+  }
+}
+
+function __mreactRouteScriptForNavigationUrl(url) {
+  const href = __mreactNormalizeNavigationUrl(url);
+
+  if (href === undefined || typeof location === "undefined") {
+    return undefined;
+  }
+
+  let nextUrl;
+
+  try {
+    nextUrl = new URL(href, location.href);
+  } catch {
+    return undefined;
+  }
+
+  if (nextUrl.origin !== location.origin) {
+    return undefined;
+  }
+
+  for (const route of __mreactClientRoutePrefetchManifest()) {
+    if (__mreactRoutePathMatches(route.path, nextUrl.pathname)) {
+      return route.script;
+    }
+  }
+
+  return undefined;
+}
+
+function __mreactClientRoutePrefetchManifest() {
+  const element = typeof document === "undefined"
+    ? null
+    : document.getElementById("mreact-route-prefetch-manifest");
+  const text = element?.textContent ?? "";
+
+  if (
+    __mreactNavigationState.routePrefetchManifest !== undefined &&
+    __mreactNavigationState.routePrefetchManifestText === text
+  ) {
+    return __mreactNavigationState.routePrefetchManifest;
+  }
+
+  __mreactNavigationState.routePrefetchManifestText = text;
+
+  if (element === null) {
+    __mreactNavigationState.routePrefetchManifest = [];
+    return __mreactNavigationState.routePrefetchManifest;
+  }
+
+  try {
+    const parsed = JSON.parse(text);
+    __mreactNavigationState.routePrefetchManifest = Array.isArray(parsed)
+      ? parsed.filter((route) =>
+          route !== null &&
+          typeof route === "object" &&
+          typeof route.path === "string" &&
+          typeof route.script === "string"
+        )
+      : [];
+  } catch {
+    __mreactNavigationState.routePrefetchManifest = [];
+  }
+
+  return __mreactNavigationState.routePrefetchManifest;
+}
+
+function __mreactRoutePathMatches(routePath, pathname) {
+  const routeSegments = __mreactNormalizeRoutePath(routePath);
+  const pathSegments = __mreactNormalizeRoutePath(pathname);
+
+  if (routeSegments.length === 0) {
+    return pathSegments.length === 0;
+  }
+
+  for (const [index, segment] of routeSegments.entries()) {
+    const value = pathSegments[index];
+
+    if (segment.startsWith(":...")) {
+      return pathSegments.length >= index + 1;
+    }
+
+    if (value === undefined) {
+      return false;
+    }
+
+    if (!segment.startsWith(":") && segment !== value) {
+      return false;
+    }
+  }
+
+  return routeSegments.length === pathSegments.length;
+}
+
+function __mreactNormalizeRoutePath(path) {
+  const normalized = path.length > 1 ? path.replace(/\\/+$/, "") : path;
+  return normalized === "/" || normalized === "" ? [] : normalized.replace(/^\\/+/, "").split("/");
+}
+
+function __mreactCanPrefetch() {
+  if (typeof navigator === "undefined") {
+    return true;
+  }
+
+  const connection = navigator.connection ?? navigator.mozConnection ?? navigator.webkitConnection;
+  const effectiveType = typeof connection?.effectiveType === "string"
+    ? connection.effectiveType.toLowerCase()
+    : "";
+
+  return connection?.saveData !== true && effectiveType !== "slow-2g" && effectiveType !== "2g";
+}
+
 function __mreactScrollTo(x, y) {
   if (typeof scrollTo === "function") {
     scrollTo(x, y);
   }
 }
 
+function __mreactIsHashOnlyNavigation(nextUrl) {
+  if (typeof location === "undefined") {
+    return false;
+  }
+
+  return nextUrl.origin === location.origin &&
+    nextUrl.pathname === location.pathname &&
+    nextUrl.search === location.search &&
+    nextUrl.hash !== "" &&
+    nextUrl.hash !== location.hash;
+}
+
 function __mreactInstallNavigation() {
   if (__mreactNavigationState.installed || typeof document === "undefined") {
     return;
   }
 
   __mreactNavigationState.installed = true;
+  __mreactEnableManualScrollRestoration();
   __mreactSaveCurrentHistoryState();
   addEventListener("popstate", (event) => {
+    __mreactSaveCurrentHistoryState();
     if (!__mreactRestoreHistoryState(event.state)) {
       location.reload();
     }
@@ -694,17 +1070,25 @@ function __mreactInstallNavigation() {
   document.addEventListener("pointerenter", (event) => {
     const anchor = __mreactAnchorFromEvent(event);
 
-    if (anchor !== null && anchor.dataset.mreactPrefetch !== "false") {
+    if (anchor !== null && __mreactAnchorPrefetchMode(anchor) === "intent") {
+      void __mreactPrefetch(anchor.href);
+    }
+  }, true);
+  document.addEventListener("pointerdown", (event) => {
+    const anchor = __mreactAnchorFromEvent(event);
+
+    if (anchor !== null && __mreactAnchorPrefetchMode(anchor) === "intent") {
       void __mreactPrefetch(anchor.href);
     }
   }, true);
   document.addEventListener("focusin", (event) => {
     const anchor = __mreactAnchorFromEvent(event);
 
-    if (anchor !== null && anchor.dataset.mreactPrefetch !== "false") {
+    if (anchor !== null && __mreactAnchorPrefetchMode(anchor) === "intent") {
       void __mreactPrefetch(anchor.href);
     }
   });
+  __mreactObserveViewportPrefetchAnchors(document);
   document.addEventListener("click", (event) => {
     if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
       return;
@@ -716,14 +1100,25 @@ function __mreactInstallNavigation() {
       return;
     }
 
+    if (anchor.dataset.mreactReload === "true") {
+      return;
+    }
+
     const nextUrl = new URL(anchor.href, location.href);
 
     if (nextUrl.origin !== location.origin) {
       return;
     }
 
+    if (__mreactIsHashOnlyNavigation(nextUrl)) {
+      return;
+    }
+
     event.preventDefault();
-    void __mreactNavigate(nextUrl.href)
+    void __mreactNavigate(nextUrl.href, {
+      scroll: __mreactAnchorScrollMode(anchor),
+      transition: __mreactAnchorTransitionMode(anchor),
+    })
       .then((navigated) => {
         if (!navigated) {
           location.href = nextUrl.href;
@@ -744,6 +1139,52 @@ function __mreactAnchorFromEvent(event) {
 
   return anchor;
 }
+
+function __mreactAnchorPrefetchMode(anchor) {
+  const value = anchor.dataset.mreactPrefetch;
+
+  if (value === "false" || value === "none") {
+    return "none";
+  }
+
+  return value === "viewport" ? "viewport" : "intent";
+}
+
+function __mreactAnchorScrollMode(anchor) {
+  return anchor.dataset.mreactScroll === "preserve" ? "preserve" : "top";
+}
+
+function __mreactAnchorTransitionMode(anchor) {
+  return anchor.dataset.mreactTransition === "auto" ? "auto" : "none";
+}
+
+function __mreactObserveViewportPrefetchAnchors(root) {
+  if (typeof IntersectionObserver === "undefined") {
+    return;
+  }
+
+  if (__mreactNavigationState.viewportObserver === undefined) {
+    __mreactNavigationState.viewportObserver = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        if (!entry.isIntersecting || !(entry.target instanceof HTMLAnchorElement)) {
+          continue;
+        }
+
+        __mreactNavigationState.viewportObserver?.unobserve(entry.target);
+        void __mreactPrefetch(entry.target.href);
+      }
+    });
+  }
+
+  for (const anchor of Array.from(root.querySelectorAll('a[href][data-mreact-prefetch="viewport"]'))) {
+    if (!(anchor instanceof HTMLAnchorElement) || __mreactNavigationState.viewportAnchors.has(anchor)) {
+      continue;
+    }
+
+    __mreactNavigationState.viewportAnchors.add(anchor);
+    __mreactNavigationState.viewportObserver.observe(anchor);
+  }
+}
 `
         : ""}
 
@@ -1051,24 +1492,47 @@ function __mreactResumeChildren(current, next) {
     };
 }
 function workspaceRuntimePlugin(options) {
-    const rootDir = join(dirname(fileURLToPath(import.meta.url)), "../../..");
     const routeDir = dirname(options.routeFile);
-    const reactiveCorePath = join(rootDir, "packages/reactive-core/src/index.ts");
-    const packageFile = (packageName, basename) => join(rootDir, "packages", packageName, "src", `${basename}.ts`);
+    const packageFile = (monorepoDir, packageName, entry) => workspacePackageFile({
+        currentFileUrl: import.meta.url,
+        entry,
+        monorepoDir,
+        packageName,
+    });
+    const reactiveCorePath = packageFile("reactive-core", "@reckona/mreact-reactive-core", "index");
+    const reactiveCoreDir = dirname(reactiveCorePath);
     const runtimePaths = new Map([
-        ["@reckona/mreact-compat", packageFile("react-compat", "index")],
-        ["@reckona/mreact-compat/event-priority", packageFile("react-compat", "event-priority")],
-        ["@reckona/mreact-compat/flight", packageFile("react-compat", "flight")],
-        ["@reckona/mreact-compat/internal", packageFile("react-compat", "internal")],
-        ["@reckona/mreact-compat/jsx-dev-runtime", packageFile("react-compat", "jsx-dev-runtime")],
-        ["@reckona/mreact-compat/jsx-runtime", packageFile("react-compat", "jsx-runtime")],
-        ["@reckona/mreact-compat/scheduler", packageFile("react-compat", "scheduler")],
-        ["@reckona/mreact-reactive-dom", join(rootDir, "packages/reactive-dom/src/index.ts")],
+        ["@reckona/mreact-compat", packageFile("react-compat", "@reckona/mreact-compat", "index")],
+        [
+            "@reckona/mreact-compat/event-priority",
+            packageFile("react-compat", "@reckona/mreact-compat", "event-priority"),
+        ],
+        ["@reckona/mreact-compat/flight", packageFile("react-compat", "@reckona/mreact-compat", "flight")],
+        [
+            "@reckona/mreact-compat/internal",
+            packageFile("react-compat", "@reckona/mreact-compat", "internal"),
+        ],
+        [
+            "@reckona/mreact-compat/jsx-dev-runtime",
+            packageFile("react-compat", "@reckona/mreact-compat", "jsx-dev-runtime"),
+        ],
+        [
+            "@reckona/mreact-compat/jsx-runtime",
+            packageFile("react-compat", "@reckona/mreact-compat", "jsx-runtime"),
+        ],
+        [
+            "@reckona/mreact-compat/scheduler",
+            packageFile("react-compat", "@reckona/mreact-compat", "scheduler"),
+        ],
+        [
+            "@reckona/mreact-reactive-dom",
+            packageFile("reactive-dom", "@reckona/mreact-reactive-dom", "index"),
+        ],
     ]);
     return {
         name: "mreact-workspace-runtime",
         setup(buildApi) {
-            buildApi.onResolve({ filter: /^\.\/devtools\.js$/ }, (args) => args.importer?.startsWith(join(rootDir, "packages/reactive-core/src/")) === true
+            buildApi.onResolve({ filter: /^\.\/devtools\.js$/ }, (args) => args.importer?.startsWith(reactiveCoreDir) === true
                 ? { namespace: "mreact-devtools-stub", path: "devtools" }
                 : undefined);
             buildApi.onResolve({ filter: /^@reckona\/mreact-reactive-core$/ }, () => ({
@@ -1089,7 +1553,7 @@ export function cell(initial) {
   return typeof routeCell === "function" ? routeCell(nativeCell, initial) : nativeCell(initial);
 }`,
                 loader: "ts",
-                resolveDir: rootDir,
+                resolveDir: reactiveCoreDir,
             }));
             buildApi.onLoad({ filter: /^devtools$/, namespace: "mreact-devtools-stub" }, () => ({
                 contents: `export function emitReactiveDevtoolsEvent() {}
@@ -1180,6 +1644,22 @@ function emitClientReferenceRegistry(manifest) {
 function clientReferenceExpression(name) {
     return /^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*)*$/.test(name) ? name : undefined;
 }
+function routeComponentExpressionForComponents(components) {
+    const candidates = uniqueStrings([
+        ...components
+            .filter((component) => component.exportName === "default")
+            .map((component) => component.name),
+        "Page",
+        "DefaultExport",
+    ]).filter(isIdentifierName);
+    return candidates.reduceRight((next, name) => `typeof ${name} === "function" ? ${name} : ${next}`, "undefined");
+}
+function uniqueStrings(values) {
+    return Array.from(new Set(values));
+}
+function isIdentifierName(value) {
+    return /^[A-Za-z_$][\w$]*$/.test(value);
+}
 function routeStateSignatureForSource(code) {
     const callExpression = routeCellCallExpressionSource(code);
     const callsitePattern = callExpression === undefined