@reckona/mreact-router 0.0.84 → 0.0.86

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reckona/mreact-router",
-  "version": "0.0.84",
+  "version": "0.0.86",
   "description": "File-system app router, SSR, actions, and deployment adapters for mreact.",
   "keywords": [
     "jsx",
@@ -105,20 +105,20 @@
   },
   "dependencies": {
     "typescript": "^6.0.3",
-    "@reckona/mreact-compat": "0.0.84",
-    "@reckona/mreact": "0.0.84",
-    "@reckona/mreact-devtools": "0.0.84",
-    "@reckona/mreact-query": "0.0.84",
-    "@reckona/mreact-reactive-core": "0.0.84",
-    "@reckona/mreact-compiler": "0.0.84",
-    "@reckona/mreact-reactive-dom": "0.0.84",
-    "@reckona/mreact-shared": "0.0.84",
-    "@reckona/mreact-server": "0.0.84"
+    "@reckona/mreact-compat": "0.0.86",
+    "@reckona/mreact": "0.0.86",
+    "@reckona/mreact-compiler": "0.0.86",
+    "@reckona/mreact-query": "0.0.86",
+    "@reckona/mreact-devtools": "0.0.86",
+    "@reckona/mreact-reactive-core": "0.0.86",
+    "@reckona/mreact-reactive-dom": "0.0.86",
+    "@reckona/mreact-server": "0.0.86",
+    "@reckona/mreact-shared": "0.0.86"
   },
   "peerDependencies": {
     "vite": ">=8 <9"
   },
   "optionalDependencies": {
-    "@reckona/mreact-router-native": "0.0.84"
+    "@reckona/mreact-router-native": "0.0.86"
   }
 }

package/src/client.ts

@@ -1611,8 +1611,10 @@ export async function buildClientRouteEntrySource(
     to: null,
     type: null,
   },
+  fetchRevalidationInstalled: false,
   installed: false,
   prefetchedScripts: new Set(),
+  reloadNextNavigationFetch: false,
   routePrefetchManifest: undefined,
   routePrefetchManifestText: undefined,
   viewportAnchors: new WeakSet(),
@@ -1656,11 +1658,13 @@ __mreactGlobal.__mreactRouteCell = (nativeCell, initial) => {
   const routeCellHydrationStart = routeUsesCells
     ? `  const __mreactPreviousState = __mreactRouteStates.get(__mreactRouteId);
   const __mreactState = __mreactPreviousState?.marker === __mreactMarker &&
-    __mreactPreviousState?.signature === __mreactRouteStateSignature
+    __mreactPreviousState?.signature === __mreactRouteStateSignature &&
+    __mreactPreviousState?.propsText === (__mreactPropsText ?? "")
     ? __mreactPreviousState
     : {
         cells: new Map(),
         marker: __mreactMarker,
+        propsText: __mreactPropsText ?? "",
         signature: __mreactRouteStateSignature,
       };
   __mreactDropMismatchedRouteState(__mreactPreviousState, __mreactState);
@@ -1767,6 +1771,7 @@ function __mreactResolveRouteNode(value) {
     ? ""
     : `${routeCellHydrationIndent}if (!__mreactHasNonSerializableClientBoundaries(__mreactMarker) && __mreactHydrateClientBoundaries(document, __mreactClientReferences, __mreactClientReferenceComponents)) {
 ${routeCellHydrationIndent}  __mreactMarker.setAttribute(${JSON.stringify(routeHydrationContract.hydratedAttribute)}, "true");
+${routeCellHydrationIndent}  __mreactMarkRouteHydrated();
 ${routeCellHydrationIndent}  return;
 ${routeCellHydrationIndent}}
 `;
@@ -1795,9 +1800,10 @@ export function __mreactHydrateRoute() {
   const __mreactMarker = document.querySelector(\`[\${__mreactRouteMarkerAttribute}="\${__mreactRouteId}"]\`);
   const __mreactPropsElement = document.getElementById(\`\${__mreactPropsScriptPrefix}\${__mreactRouteId}\`);
   const __mreactClientReferencesElement = document.getElementById(\`\${__mreactClientReferencesScriptPrefix}\${__mreactRouteId}\`);
-  const __mreactProps = __mreactPropsElement?.textContent === undefined
+  const __mreactPropsText = __mreactPropsElement?.textContent;
+  const __mreactProps = __mreactPropsText === undefined
     ? {}
-    : JSON.parse(__mreactPropsElement.textContent);
+    : JSON.parse(__mreactPropsText);
   const __mreactClientReferences = __mreactClientReferencesElement?.textContent === undefined
     ? []
     : JSON.parse(__mreactClientReferencesElement.textContent);
@@ -1812,10 +1818,31 @@ ${routeCellHydrationStart}${routeCleanupHydrationStart}${boundaryOnlyHydrationBl
 ${routeCellHydrationIndent}__mreactResumeRoute(__mreactMarker, __mreactNode);
 ${routeCellHydrationIndent}__mreactHydrateClientBoundaries(document, __mreactClientReferences, __mreactClientReferenceComponents);
 ${routeCellHydrationIndent}__mreactMarker.setAttribute(__mreactRouteHydratedAttribute, "true");
+${routeCellHydrationIndent}__mreactMarkRouteHydrated();
 ${routeCellHydrationEnd}}
 ${routeCellDropFunction}
 ${routeCleanupFunction}
 
+function __mreactMarkRouteHydrated() {
+  if (typeof document !== "undefined") {
+    document.documentElement.setAttribute(__mreactRouteHydratedAttribute, "true");
+  }
+
+  if (typeof window !== "undefined" && typeof CustomEvent === "function") {
+    window.dispatchEvent(new CustomEvent("mreact:hydrated", {
+      detail: { routeId: __mreactRouteId },
+    }));
+  }
+}
+
+function __mreactMarkRouteHydrating() {
+  if (typeof document === "undefined") {
+    return;
+  }
+
+  document.documentElement.removeAttribute(__mreactRouteHydratedAttribute);
+}
+
 __mreactHydrateRoute();
 ${clientNavigation ? "__mreactInstallNavigation();" : ""}
 
@@ -2135,9 +2162,19 @@ export function __mreactInvalidateNavigationCache(path) {
   }
 }
 
+function __mreactInvalidateAllNavigationCache() {
+  __mreactNavigationState.cache.clear();
+}
+
 function __mreactFetchNavigationHtml(href) {
+  const reloadRouteCache = __mreactNavigationState.reloadNextNavigationFetch === true;
+  __mreactNavigationState.reloadNextNavigationFetch = false;
+  const headers = reloadRouteCache
+    ? { "x-mreact-navigation": "1", "x-mreact-navigation-cache": "reload" }
+    : { "x-mreact-navigation": "1" };
+
   return fetch(href, {
-    headers: { "x-mreact-navigation": "1" },
+    headers,
   }).then((response) => {
     __mreactApplyRevalidationHeader(response);
     if (__mreactNavigationResponseRequiresDocumentReload(response)) {
@@ -2153,7 +2190,9 @@ function __mreactNavigationResponseRequiresDocumentReload(response) {
 }
 
 function __mreactApplyRevalidationHeader(response) {
-  const header = response.headers.get("x-mreact-revalidate");
+  const header = typeof response?.headers?.get === "function"
+    ? response.headers.get("x-mreact-revalidate")
+    : null;
 
   if (header === null || header.trim() === "") {
     return;
@@ -2208,6 +2247,7 @@ function __mreactApplyNavigationHtml(html, url) {
   const currentRouteId = currentMarker.getAttribute("${routeHydrationContract.routeMarkerAttribute}");
   const nextRouteId = nextMarker.getAttribute("${routeHydrationContract.routeMarkerAttribute}");
 
+  __mreactMarkRouteHydrating();
   __mreactSyncHeadMetadata(template.content, html);
   __mreactResumeNode(currentMarker, nextMarker);
 ${routeCleanupNavigationDispose}  __mreactSyncRouteDataScripts(template.content, currentRouteId, nextRouteId);
@@ -2215,6 +2255,8 @@ ${routeCleanupNavigationDispose}  __mreactSyncRouteDataScripts(template.content,
   const script = template.content.querySelector('script[type="module"][src]')?.getAttribute("src");
   if (script !== null && script !== undefined) {
     void import(/* @vite-ignore */ script).then((module) => module.${routeHydrationContract.routeHydrateExport}?.());
+  } else {
+    __mreactMarkRouteHydrated();
   }
 
   __mreactApplyOutOfOrderFragments(document);
@@ -2522,6 +2564,7 @@ function __mreactInstallNavigation() {
   }
 
   __mreactNavigationState.installed = true;
+  __mreactInstallNavigationFetchRevalidation();
   __mreactEnableManualScrollRestoration();
   __mreactSaveCurrentHistoryState();
   addEventListener("popstate", (event) => {
@@ -2592,6 +2635,50 @@ function __mreactInstallNavigation() {
   });
 }
 
+function __mreactInstallNavigationFetchRevalidation() {
+  if (
+    __mreactNavigationState.fetchRevalidationInstalled ||
+    typeof globalThis.fetch !== "function"
+  ) {
+    return;
+  }
+
+  __mreactNavigationState.fetchRevalidationInstalled = true;
+  const fetchImpl = globalThis.fetch;
+  globalThis.fetch = function(input, init) {
+    const mutating = __mreactIsMutatingFetchRequest(input, init);
+
+    return Promise.resolve(fetchImpl.call(this, input, init)).then((response) => {
+      __mreactApplyRevalidationHeader(response);
+
+      if (mutating) {
+        __mreactInvalidateAllNavigationCache();
+        __mreactNavigationState.reloadNextNavigationFetch = true;
+      }
+
+      return response;
+    });
+  };
+}
+
+function __mreactIsMutatingFetchRequest(input, init) {
+  const method = __mreactFetchRequestMethod(input, init);
+
+  return method !== "GET" && method !== "HEAD";
+}
+
+function __mreactFetchRequestMethod(input, init) {
+  if (typeof init?.method === "string" && init.method !== "") {
+    return init.method.toUpperCase();
+  }
+
+  if (typeof Request !== "undefined" && input instanceof Request) {
+    return input.method.toUpperCase();
+  }
+
+  return "GET";
+}
+
 function __mreactAnchorFromEvent(event) {
   const target = event.target;
   const anchor = target instanceof Element ? target.closest("a[href]") : null;

package/src/render.ts

@@ -912,8 +912,9 @@ async function renderAppRequestInternal(options: RenderAppRequestOptions): Promi
       cachePolicy === undefined
         ? originalAnalysis.usesRuntimeCacheControl
         : cachePolicy.revalidateSeconds !== 0;
+    const reloadRouteCache = isNavigationRouteCacheReloadRequest(options.request);
     phaseStartedAt = renderTimingPhaseStartedAt(timing);
-    const cachedResponse = !mayUseRouteCache
+    const cachedResponse = !mayUseRouteCache || reloadRouteCache
       ? undefined
       : await cachedRouteResponse({
           cache: options.routeCache,
@@ -1593,6 +1594,10 @@ function isNavigationRequest(request: Request): boolean {
   return request.headers.get("x-mreact-navigation") === "1";
 }
 
+function isNavigationRouteCacheReloadRequest(request: Request): boolean {
+  return isNavigationRequest(request) && request.headers.get("x-mreact-navigation-cache") === "reload";
+}
+
 async function nearestBoundaryFileForPage(options: {
   appDir: string;
   filename: string;