@reckona/mreact-router 0.0.97 → 0.0.99

package/dist/client.js

@@ -16,6 +16,7 @@ import { escapeHtmlQuotedAttribute as escapeHtmlAttribute } from "@reckona/mreac
 import { workspacePackageFile } from "./workspace-packages.js";
 const nodeBuiltinPackages = new Set(builtinModules.flatMap((name) => [name, `node:${name}`]));
 const clientBoundaryInferenceServerOnlyReferenceCode = "MR_CLIENT_BOUNDARY_INFERENCE_SERVER_ONLY_REFERENCE";
+const clientBoundaryInferenceFunctionCallInteractiveCode = "MR_CLIENT_BOUNDARY_INFERENCE_FUNCTION_CALL_INTERACTIVE";
 const clientBoundaryInferenceUnsupportedReferenceCode = "MR_CLIENT_BOUNDARY_INFERENCE_UNSUPPORTED_REFERENCE";
 export async function routeToClientManifestEntry(route) {
     if (route.kind !== "page") {
@@ -76,7 +77,7 @@ export async function inferClientRouteModule(options) {
             }))
             : routeInference;
         if (options.appDir === undefined) {
-            return mergedRouteInference;
+            return withClientRouteDiagnosticPath(mergedRouteInference, options.routePath);
         }
         const shellInferences = await inferClientRouteShellModules({
             appDir: options.appDir,
@@ -84,14 +85,14 @@ export async function inferClientRouteModule(options) {
             filename: options.filename,
             sourceTransform,
         });
-        return {
+        return withClientRouteDiagnosticPath({
             client: mergedRouteInference.client || shellInferences.some((inference) => inference.client),
             clientBoundaryImports: mergedRouteInference.clientBoundaryImports,
             diagnostics: [
                 ...mergedRouteInference.diagnostics,
                 ...shellInferences.flatMap((inference) => inference.diagnostics),
             ],
-        };
+        }, options.routePath);
     }
     catch (error) {
         throw new Error(`Failed to infer client route for ${options.routePath ?? "<unknown>"} (${options.filename}).\n${errorMessage(error)}`, { cause: error });
@@ -272,7 +273,9 @@ export async function collectClientRouteReferences(options) {
         clientBoundaryImports: routeInference.clientBoundaryImports,
         clientReferenceImports,
         clientReferenceManifest,
-        diagnostics: sources.flatMap((source) => source.inference.diagnostics),
+        diagnostics: sources
+            .flatMap((source) => source.inference.diagnostics)
+            .map((diagnostic) => withClientRouteDiagnosticPath(diagnostic, options.routePath)),
         usesNavigationLink: routeInference.usesNavigationLink ||
             sources.some((source) => source.filename !== options.filename && source.inference.usesNavigationLink),
     };
@@ -495,6 +498,10 @@ async function inferClientRouteModuleSource(options) {
                     }
                 }
                 if (renderedByCall && !renderedByJsx) {
+                    diagnostics.push(functionCallInteractiveImportDiagnostic({
+                        filename: options.filename,
+                        reference,
+                    }));
                     continue;
                 }
                 if (!importedBoundary) {
@@ -735,6 +742,22 @@ function serverOnlyClientImportReferenceDiagnostic(options) {
         source: options.reference.source,
     };
 }
+function functionCallInteractiveImportDiagnostic(options) {
+    const localNames = options.reference.localNames.filter(startsUppercase);
+    const component = localNames[0] ?? options.reference.localNames[0] ?? options.reference.source;
+    const componentUsage = startsUppercase(component) ? `<${component} />` : "JSX";
+    return {
+        code: clientBoundaryInferenceFunctionCallInteractiveCode,
+        filename: options.filename,
+        level: "warn",
+        localNames: localNames.length === 0 ? options.reference.localNames : localNames,
+        message: `${options.filename}: interactive component import ${JSON.stringify(options.reference.source)} ` +
+            `is rendered through a function call as ${component}(), so its event handlers or cell() state ` +
+            "will not hydrate as a client boundary. Render it through JSX such as " +
+            `${componentUsage}, or move the call behind an explicit client boundary.`,
+        source: options.reference.source,
+    };
+}
 function unsupportedClientImportReferenceDiagnostic(options) {
     if (options.reference.sideEffect) {
         return undefined;
@@ -762,7 +785,23 @@ function startsUppercase(value) {
     return /^[A-Z]/.test(value);
 }
 export function formatClientRouteInferenceDiagnostic(diagnostic) {
-    return `${diagnostic.code}: ${diagnostic.message}`;
+    const route = diagnostic.routePath === undefined ? "" : ` on route ${JSON.stringify(diagnostic.routePath)}`;
+    return `${diagnostic.code}: ${diagnostic.message}${route}`;
+}
+function withClientRouteDiagnosticPath(value, routePath) {
+    if (routePath === undefined) {
+        return value;
+    }
+    if ("diagnostics" in value) {
+        return {
+            ...value,
+            diagnostics: value.diagnostics.map((diagnostic) => withClientRouteDiagnosticPath(diagnostic, routePath)),
+        };
+    }
+    return {
+        ...value,
+        routePath: value.routePath ?? routePath,
+    };
 }
 async function resolveAppLocalModule(options) {
     if (!options.specifier.startsWith(".")) {
@@ -1021,6 +1060,7 @@ export async function buildClientRouteOutput(options) {
     const dropConsoleFunctions = options.dropConsoleFunctions ?? resolveClientConsolePureFunctions(options.dropClientConsole);
     const bundled = await bundleRouterModule({
         code: entry.code,
+        cacheDir: options.cacheDir,
         define: {
             __MREACT_CLIENT_DEVTOOLS__: "false",
         },
@@ -1052,6 +1092,7 @@ export async function buildClientRouteBatchOutput(options) {
     })));
     const bundled = await bundleRouterModules({
         base: options.assetBaseUrl ?? "/_mreact/client/",
+        cacheDir: options.cacheDir,
         define: {
             __MREACT_CLIENT_DEVTOOLS__: "false",
         },
@@ -1492,6 +1533,10 @@ export async function __mreactPrefetch(url) {
     return false;
   }
 
+  if (__mreactIsCurrentLocationNavigationHref(href)) {
+    return false;
+  }
+
   const script = __mreactRouteScriptForNavigationUrl(href);
 
   if (script === undefined) {
@@ -1511,11 +1556,43 @@ function __mreactPrefetchNavigationHtml(href) {
       return false;
     }
 
-    __mreactNavigationState.cache.set(href, html);
+    __mreactRememberNavigationHtml(href, html);
     return true;
   }).catch(() => false);
 }
 
+const __mreactNavigationHtmlCacheMaxEntries = 64;
+
+function __mreactCachedNavigationHtml(href) {
+  const html = __mreactNavigationState.cache.get(href);
+
+  if (html === undefined) {
+    return undefined;
+  }
+
+  __mreactNavigationState.cache.delete(href);
+  __mreactNavigationState.cache.set(href, html);
+  return html;
+}
+
+function __mreactRememberNavigationHtml(href, html) {
+  if (__mreactNavigationState.cache.has(href)) {
+    __mreactNavigationState.cache.delete(href);
+  }
+
+  __mreactNavigationState.cache.set(href, html);
+
+  while (__mreactNavigationState.cache.size > __mreactNavigationHtmlCacheMaxEntries) {
+    const oldestHref = __mreactNavigationState.cache.keys().next().value;
+
+    if (oldestHref === undefined) {
+      return;
+    }
+
+    __mreactNavigationState.cache.delete(oldestHref);
+  }
+}
+
 function __mreactPrefetchRouteScript(script) {
   if (typeof document === "undefined") {
     return false;
@@ -1556,14 +1633,14 @@ export async function __mreactNavigate(url, options = {}) {
   __mreactSetNavigationState(__mreactPendingNavigationState(href, options.type ?? "push"));
 
   try {
-    const cachedHtml = __mreactNavigationState.cache.get(href);
+    const cachedHtml = __mreactCachedNavigationHtml(href);
     const html = cachedHtml ?? await __mreactFetchNavigationHtml(href);
 
     if (typeof html !== "string") {
       return false;
     }
 
-    __mreactNavigationState.cache.set(href, html);
+    __mreactRememberNavigationHtml(href, html);
     return await __mreactApplyNavigationHtmlWithOptionalTransition(html, href, options);
   } finally {
     __mreactSetNavigationState(__mreactIdleNavigationState());
@@ -2229,6 +2306,24 @@ function __mreactIsHashOnlyNavigation(nextUrl) {
     nextUrl.hash !== location.hash;
 }
 
+function __mreactIsCurrentLocationNavigationHref(href) {
+  if (typeof location === "undefined") {
+    return false;
+  }
+
+  return __mreactIsCurrentLocationNavigation(new URL(href, location.href));
+}
+
+function __mreactIsCurrentLocationNavigation(nextUrl) {
+  if (typeof location === "undefined") {
+    return false;
+  }
+
+  return nextUrl.origin === location.origin &&
+    nextUrl.pathname === location.pathname &&
+    nextUrl.search === location.search;
+}
+
 function __mreactInstallNavigation() {
   if (__mreactNavigationState.installed || typeof document === "undefined") {
     return;
@@ -2291,6 +2386,16 @@ function __mreactInstallNavigation() {
       return;
     }
 
+    if (__mreactIsCurrentLocationNavigation(nextUrl)) {
+      event.preventDefault();
+
+      if (__mreactAnchorScrollMode(anchor) !== false && nextUrl.hash === "") {
+        __mreactScrollTo(0, 0);
+      }
+
+      return;
+    }
+
     event.preventDefault();
     void __mreactNavigate(nextUrl.href, {
       scroll: __mreactAnchorScrollMode(anchor),