@solidjs/router 2.0.0-next.30 → 2.0.0-next.32

package/dist/index.js

@@ -1,5 +1,5 @@
-import { getOwner, runWithOwner, createMemo, createRenderEffect, onCleanup, untrack, createContext, createSignal, useContext, NotReadyError, isPending, DEV, latest, createComponent, createRoot, Show, createEffect, sharedConfig, OBSERVE, onSettled, getObserver, $TRACK, action as action$1 } from 'solid-js';
-import { registerElementClaim, delegateEvents, isServer, getRequestEvent, hasFlashCookie, clearFlashCookie, createComponent as createComponent$1, memo, dynamic, isServerFunction, getServerFunctionMetadata, getServerFunctionRPC, isResponseEnvelope, REVALIDATE_HEADER } from '@solidjs/web';
+import { getOwner, runWithOwner, createMemo, createRenderEffect, onCleanup, untrack, createContext, createSignal, useContext, NotReadyError, DEV, isPending, latest, createComponent, createRoot, Show, createEffect, OBSERVE, onSettled, getObserver, isHydratable, $TRACK, action as action$1 } from 'solid-js';
+import { registerElementClaim, delegateEvents, isServer, getRequestEvent, hasFlashCookie, clearFlashCookie, createComponent as createComponent$1, memo, dynamic, isServerFunction, getServerFunctionMetadata, getServerFunctionRPC, takeHydrationValue, isResponseEnvelope, REVALIDATE_HEADER, getHydrationWriter } from '@solidjs/web';
 import { REDIRECT_HEADER, decodeRedirectHeaderValue, subscribeFlightData, decodeResponsePayload, parseServerFunctionActionUrl, createServerReference } from '@solidjs/web/server-functions';
 
 const hasSchemeRegex = /^(?:[a-z0-9]+:)?\/\//i;
@@ -45,13 +45,16 @@ function validateSearch(schema, raw) {
   return outcome;
 }
 function extractSearchParams(url) {
-  const params = {};
+  const params = Object.create(null);
   url.searchParams.forEach((value, key) => {
     if (key in params) {
       if (Array.isArray(params[key])) params[key].push(value);else params[key] = [params[key], value];
     } else params[key] = value;
   });
-  return params;
+  // Keep __proto__ as an own property on the plain object returned to callers.
+  return {
+    ...params
+  };
 }
 function createMatcher(path, partial, matchFilters) {
   const [pattern, splat] = path.split("/*", 2);
@@ -72,13 +75,13 @@ function createMatcher(path, partial, matchFilters) {
       path: len ? "" : "/",
       params: {}
     };
-    const matchFilter = s => matchFilters === undefined ? undefined : matchFilters[s];
+    const filters = matchFilters;
     for (let i = 0; i < len; i++) {
       const segment = segments[i];
       const dynamic = segment[0] === ":";
       const locSegment = dynamic ? locSegments[i] : locSegments[i].toLowerCase();
       const key = dynamic ? segment.slice(1) : segment.toLowerCase();
-      if (dynamic && matchSegment(locSegment, matchFilter(key))) {
+      if (dynamic && matchSegment(locSegment, filters?.[key])) {
         match.params[key] = locSegment;
       } else if (dynamic || !matchSegment(locSegment, key)) {
         return null;
@@ -87,7 +90,7 @@ function createMatcher(path, partial, matchFilters) {
     }
     if (splat) {
       const remainder = lenDiff ? locSegments.slice(-lenDiff).join("/") : "";
-      if (matchSegment(remainder, matchFilter(splat))) {
+      if (matchSegment(remainder, filters?.[splat])) {
         match.params[splat] = remainder;
       } else {
         return null;
@@ -96,21 +99,9 @@ function createMatcher(path, partial, matchFilters) {
     return match;
   };
 }
-function matchSegment(input, filter) {
-  const isEqual = s => s === input;
-  if (filter === undefined) {
-    return true;
-  } else if (typeof filter === "string") {
-    return isEqual(filter);
-  } else if (typeof filter === "function") {
-    return filter(input);
-  } else if (Array.isArray(filter)) {
-    return filter.some(isEqual);
-  } else if (filter instanceof RegExp) {
-    return filter.test(input);
-  }
-  return false;
-}
+
+// a string filter is the segment itself; anything else not listed never matches
+const matchSegment = (input, filter) => filter === undefined || (typeof filter === "function" ? filter(input) : Array.isArray(filter) ? filter.includes(input) : filter instanceof RegExp ? filter.test(input) : filter === input);
 function scoreRoute(route) {
   const [pattern, splat] = route.pattern.split("/*", 2);
   const segments = pattern.split("/").filter(Boolean);
@@ -340,7 +331,7 @@ function setupNativeEvents({
       const target = svg ? a.target.baseVal : a.target;
       if (target || !href && !a.hasAttribute("state")) return;
       const rel = (a.getAttribute("rel") || "").split(/\s+/);
-      if (a.hasAttribute("download") || rel && rel.includes("external")) return;
+      if (a.hasAttribute("download") || rel.includes("external")) return;
       const url = svg ? new URL(href, document.baseURI) : new URL(href);
       // Skip non-http(s) schemes (blob:, mailto:, tel:, data:, ...). blob: URLs
       // inherit the page origin, so the origin check below won't reject them. #382
@@ -514,8 +505,8 @@ function createPathsProxy(renderPath = p => p, base = "") {
     };
     return new Proxy(build, {
       get(_, prop) {
-        if (prop === "toString") return () => toHref(pathname);
-        if (typeof prop === "symbol") return prop === Symbol.toPrimitive ? () => toHref(pathname) : prop === HREF ? pathname || "/" : undefined;
+        if (prop === "toString" || prop === Symbol.toPrimitive) return () => toHref(pathname);
+        if (typeof prop === "symbol") return prop === HREF ? pathname || "/" : undefined;
         return node(`${pathname}/${prop}`);
       }
     });
@@ -1023,9 +1014,7 @@ function createRoutes(routeDef, base = "") {
     for (const expandedPath of expandOptionals(originalPath)) {
       const path = joinPaths(base, expandedPath);
       let pattern = isLeaf ? path : path.split("/*", 1)[0];
-      pattern = pattern.split("/").map(s => {
-        return s.startsWith(":") || s.startsWith("*") ? s : encodeSegment(s);
-      }).join("/");
+      pattern = pattern.split("/").map(s => /^[:*]/.test(s) ? s : encodeSegment(s)).join("/");
       acc.push({
         ...shared,
         originalPath,
@@ -1116,13 +1105,12 @@ function mergeParams(matches) {
   return params;
 }
 function createLocation(path, state, queryWrapper) {
-  const origin = new URL(mockBase);
-  const url = createMemo((prev = origin) => {
+  const url = createMemo((prev = new URL(mockBase)) => {
     const path_ = path();
     try {
       // anchor rooted paths against the origin explicitly - a path with
       // doubled leading slashes would otherwise parse as protocol-relative
-      return new URL(path_[0] === "/" ? mockBase + path_ : path_, origin);
+      return new URL(path_[0] === "/" ? mockBase + path_ : path_, mockBase);
     } catch (err) {
       DEV && console.error(`Invalid path ${path_}`);
       return prev;
@@ -1133,8 +1121,8 @@ function createLocation(path, state, queryWrapper) {
   const pathname = createMemo(() => url().pathname);
   const search = createMemo(() => url().search);
   const hash = createMemo(() => url().hash);
-  const key = () => "";
-  const queryFn = createMemo(() => extractSearchParams(url()));
+  // Pathname and hash changes do not affect the query.
+  const queryFn = createMemo(() => extractSearchParams(new URL(search(), mockBase)));
   return {
     get pathname() {
       return pathname();
@@ -1149,7 +1137,7 @@ function createLocation(path, state, queryWrapper) {
       return state();
     },
     get key() {
-      return key();
+      return "";
     },
     query: queryWrapper ? queryWrapper(queryFn) : createMemoObject(queryFn)
   };
@@ -1315,7 +1303,7 @@ function createRouterContext(integration, branches, getContext, options = {}) {
       read = runWithOwner(routerOwner, () => createMemo(() => {
         const result = resolveLazySubtree(record);
         return result instanceof Promise ? result.then(() => undefined) : undefined;
-      }, {
+      }, DEV && {
         name: "lazyRoutes"
       }));
       lazyReaders.set(record, read);
@@ -1348,7 +1336,7 @@ function createRouterContext(integration, branches, getContext, options = {}) {
       }
     }
     return m;
-  }, {
+  }, DEV && {
     name: "matches"
   });
   const routingPending = createMemo(() => isPending(() => {
@@ -1359,7 +1347,7 @@ function createRouterContext(integration, branches, getContext, options = {}) {
     }
     location.search;
     location.hash;
-  }), {
+  }), DEV && {
     name: "routingPending"
   });
   const isRouting = () => routingPending() || isPending(source);
@@ -1565,11 +1553,11 @@ function createRouterContext(integration, branches, getContext, options = {}) {
         route,
         params
       } = next[match];
-      route.component && route.component.preload && route.component.preload();
       const {
         preload,
         component
       } = route;
+      component?.preload?.();
       const now = current && current[match];
       const unchanged = now && now.route.key === route.key && serverRouteArgsEqual(inputs(params, query, url.search, route), inputs(now.params, location.query, location.search, route));
       inPreloadFn = true;
@@ -1633,7 +1621,7 @@ function createRouteContext(router, parent, outlet, match, matches = () => [matc
   // its last valid value while this route is being torn down, so outgoing
   // components and preloads never observe another route's params.
   const params = wrapParams(() => mergeParams(matches()));
-  component && component.preload && component.preload();
+  component?.preload?.();
   inPreloadFn = true;
   const data = preload ? preload({
     params,
@@ -1760,9 +1748,7 @@ function Routes(props) {
         next[i] = prev[i];
       } else {
         equal = false;
-        if (disposers[i]) {
-          disposers[i]();
-        }
+        disposers[i]?.();
         runWithOwner(owner, () => createRoot(dispose => {
           disposers[i] = dispose;
           const routeKey = nextMatch.route.key;
@@ -1851,13 +1837,14 @@ function bindEvent(target, type, handler) {
 
 let depth;
 function saveCurrentDepth() {
-  if (!window.history.state || window.history.state._depth == null) {
-    window.history.replaceState({
-      ...window.history.state,
-      _depth: window.history.length - 1
+  const h = window.history;
+  if (!h.state || h.state._depth == null) {
+    h.replaceState({
+      ...h.state,
+      _depth: h.length - 1
     }, "");
   }
-  depth = window.history.state._depth;
+  depth = h.state?._depth ?? h.length - 1;
 }
 function keepDepth(state) {
   return {
@@ -1901,11 +1888,10 @@ function scrollToHash(hash, fallbackTop) {
 
 function browserHistory() {
   const getSource = () => {
-    const url = window.location.pathname + window.location.search;
-    const state = window.history.state && window.history.state._depth && Object.keys(window.history.state).length === 1 ? undefined : window.history.state;
+    const s = window.history.state;
     return {
-      value: url + window.location.hash,
-      state
+      value: window.location.pathname + window.location.search + window.location.hash,
+      state: s && s._depth && Object.keys(s).length === 1 ? undefined : s
     };
   };
   const beforeLeave = {};
@@ -2133,7 +2119,7 @@ function createScrollRestoration() {
       // reload/back_forward document loads land on an existing entry (a fresh
       // navigation starts a new one and belongs at the top); the effect's
       // initial run performs the restore after first render
-      const [nav] = performance.getEntriesByType && performance.getEntriesByType("navigation");
+      const [nav] = performance.getEntriesByType?.("navigation");
       if (nav && nav.type !== "navigate") pending = depth();
     }
   };
@@ -2229,7 +2215,6 @@ function describeNavigation(match, next, written, from) {
     const t = to();
     return t === undefined ? undefined : new URL(t, mockBase).pathname;
   };
-  const matches = pathname => untrack(() => match(pathname));
   const ref = {
     kind: "navigation",
     get to() {
@@ -2237,21 +2222,62 @@ function describeNavigation(match, next, written, from) {
     },
     from,
     get name() {
-      const p = pathname();
-      if (p === undefined) return undefined;
-      const m = matches(p);
-      return m.length ? m[m.length - 1].route.pattern || "/" : p;
+      return routeName(match, pathname());
     },
     get params() {
-      const p = pathname();
-      const m = p === undefined ? [] : matches(p);
-      return m.length ? mergeParams(m) : undefined;
+      return routeParams(match, pathname());
     }
   };
   if (next._navigation !== undefined && next._navigation > 1) ref.redirect = next._navigation - 1;
   return ref;
 }
 
+/** The parametrized route `pathname` matches — the last match's pattern, `/` for the root; the pathname itself when nothing matched. */
+function routeName(match, pathname) {
+  if (pathname === undefined) return undefined;
+  const m = untrack(() => match(pathname));
+  return m.length ? m[m.length - 1].route.pattern || "/" : pathname;
+}
+
+/** The params the matched chain bound, merged; `undefined` when nothing matched. */
+function routeParams(match, pathname) {
+  if (pathname === undefined) return undefined;
+  const m = untrack(() => match(pathname));
+  return m.length ? mergeParams(m) : undefined;
+}
+
+/**
+ * The route the document arrived on, for solid's observe tier: the same
+ * declaration as a navigation's, around the work that establishes the
+ * router's initial match — building its context — since a fresh document has
+ * no location write to wrap. On the client the engine opens it at the time
+ * origin and settles it as the context is built (the first `"navigation"`
+ * record, `initial: true`); on the server the same call names the request's
+ * `"render"` record (`RenderEvent.route`). Every field is a getter read at
+ * settle, as for a navigation: `to` is the location as the router then holds
+ * it — the arrival normalized onto the base path when it came in empty, a
+ * write the frame itself took (see the setter) — and `name`/`params` match
+ * it then, so a lazy subtree that resolved while the server rendered names
+ * the exact route.
+ */
+function describeInitial(match, location) {
+  const to = () => untrack(location).value;
+  const pathname = () => new URL(to(), mockBase).pathname;
+  return {
+    kind: "navigation",
+    initial: true,
+    get to() {
+      return to();
+    },
+    get name() {
+      return routeName(match, pathname());
+    },
+    get params() {
+      return routeParams(match, pathname());
+    }
+  };
+}
+
 /** Wraps a history adapter in the integration signal the router core consumes. Must run under a reactive owner. */
 function createIntegration(history, match) {
   let committing = false;
@@ -2266,7 +2292,6 @@ function createIntegration(history, match) {
     name: "location"
   });
   const signal = [read, next => {
-    if (sharedConfig.registry && !sharedConfig.done) sharedConfig.done = true;
     // What the write resolved to, or undefined when there was nothing to
     // write (see `resolveLocationWrite`).
     let written;
@@ -2299,7 +2324,14 @@ function createIntegration(history, match) {
     // while a navigation is pending, which is the `from` a hop wants too.
     // A write the no-op rule drops is still declared: the engine settles a
     // navigation whose write "did not survive the equality gate" on the spot.
-    OBSERVE ? OBSERVE.attribution.withOrigin(describeNavigation(match, next, () => written, untrack(read).value), commit) : commit();
+    // A write from NO location is not a navigation: it is the arrival being
+    // normalized (`createRouterContext` moving an empty location — a hash
+    // history with no hash, a memory history seeded with "" — onto the base
+    // path), and the arrival is already declared by the initial frame open
+    // around the context build (`describeInitial`), which this write then
+    // stamps. The location is never empty again after that first write.
+    const from = untrack(read).value;
+    OBSERVE && from ? OBSERVE.attribution.withOrigin(describeNavigation(match, next, () => written, from), commit) : commit();
   }];
   history.init && onCleanup(history.init((value = history.get()) => {
     if (committing) return;
@@ -2380,11 +2412,14 @@ function createRouter(config) {
     }
     const integration = isServer ? staticIntegration(props.url, config.history && config.history.utils) : createIntegration(history || browserHistory(), matchPath);
     let context;
-    const routerState = createRouterContext(integration, branches, () => context, {
+    const buildContext = () => createRouterContext(integration, branches, () => context, {
       base: basePath,
       singleFlight: config.singleFlight,
       transformUrl: config.transformUrl
     });
+    // The route the document arrived on, declared around the initial match
+    // (see `describeInitial`); folded out of shipped bundles with `OBSERVE`.
+    const routerState = OBSERVE ? OBSERVE.attribution.withOrigin(describeInitial(matchPath, integration.signal[0]), buildContext) : buildContext();
     if (!isServer) {
       setupNativeEvents({
         preload: config.preloadLinks,
@@ -2432,11 +2467,10 @@ function createRouter(config) {
       }));
     },
     keysFor(url) {
-      const pathname = typeof url === "string" ? new URL(url, mockBase).pathname : url[HREF];
       const keys = [];
       for (const {
         route
-      } of matchPath(pathname)) {
+      } of matchPath(pathnameOf(url))) {
         const key = serverRouteOf(route.component)?.call?.key;
         typeof key === "string" && key && !keys.includes(key) && keys.push(key);
       }
@@ -2623,10 +2657,22 @@ source) {
 const LocationHeader = "Location";
 const PRELOAD_TIMEOUT$1 = 5000;
 const CACHE_TIMEOUT = 180000;
-// When this client booted. Flight-registry entries (sharedConfig.has/load)
+const responseBodyHeaders = /* #__PURE__ */new Set(["content-type", "content-length", "content-encoding", "transfer-encoding", "content-disposition", "content-language", "content-location", "content-range", "accept-ranges", "etag", "last-modified"]);
+const forwardedCookies = /* #__PURE__ */new WeakMap();
+// When this client booted. Flight-registry entries (takeHydrationValue)
 // hold values the server computed while rendering THIS page, so their age is
 // anchored here — not at whenever a late query() call happens to consume one.
 const bootTime = Date.now();
+
+// Every hydratable read ships its entry: the writer keeps the first write
+// per key, so a read skipped in a NoHydration zone never hides the entry
+// from an island that reads the same key later.
+function serializeForHydration(key, res) {
+  const writer = getHydrationWriter();
+  if (!writer || !writer.async || !isHydratable()) return;
+  const e = getRequestEvent();
+  (!e || !e.serverOnly) && writer.write(key, res);
+}
 let cacheMap = new Map();
 
 // cleanup forward/back cache
@@ -2751,10 +2797,11 @@ function query(fn, name) {
       }
       let res = cached[1];
       if (intent !== "preload") {
-        res = "then" in cached[1] ? cached[1].then(handleResponse(false), handleResponse(true)) : handleResponse(false)(cached[1]);
+        res = settle(res);
         !isServer && intent === "navigate" && cached[4][1](cached[0]); // update version
       }
       inPreloadFn && "then" in res && res.catch(() => {});
+      isServer && serializeForHydration(key, res);
       return res;
     }
     let res;
@@ -2771,13 +2818,11 @@ function query(fn, name) {
     // active navigation (or its preload) accepts the payload only while a
     // real preload of the same age would still satisfy it — anything older
     // refetches instead of serving a minutes-old value on a fresh navigation.
-    if (!isServer && sharedConfig.has && sharedConfig.has(key)) {
-      const payloadAge = now - bootTime;
-      if (!intent || payloadAge < (intent === "native" ? CACHE_TIMEOUT : PRELOAD_TIMEOUT$1)) {
+    if (!isServer && (!intent || now - bootTime < (intent === "native" ? CACHE_TIMEOUT : PRELOAD_TIMEOUT$1))) {
+      const entry = takeHydrationValue(key); // hydrating
+      if (entry) {
         adopted = true;
-        res = sharedConfig.load(key); // hydrating
-        // @ts-ignore at least until we add a delete method to sharedConfig
-        delete globalThis._$HY.r[key];
+        res = entry.status === "pending" ? entry.promise : entry.status === "resolved" ? Promise.resolve(entry.value) : Promise.reject(entry.error);
       }
       // A payload too old for this intent stays in the registry: it is
       // inert while the refetched entry below lives, but a later claim
@@ -2793,6 +2838,7 @@ function query(fn, name) {
     // it would for a preload performed when the server fetched the data.
     const stamp = adopted ? bootTime : now;
     if (cached) {
+      isServer && forwardedCookies.delete(cached);
       cached[0] = stamp;
       cached[1] = res;
       cached[3] = intent;
@@ -2811,17 +2857,18 @@ function query(fn, name) {
       const e = getRequestEvent();
       if (e && e.router.dataOnly) return e.router.data[key] = res;
     }
-    if (intent !== "preload") {
-      res = "then" in res ? res.then(handleResponse(false), handleResponse(true)) : handleResponse(false)(res);
-    }
+    if (intent !== "preload") res = settle(res);
     inPreloadFn && "then" in res && res.catch(() => {});
-    // serialize on server
-    if (isServer && sharedConfig.context && sharedConfig.context.async && !sharedConfig.context.noHydrate) {
-      const e = getRequestEvent();
-      (!e || !e.serverOnly) && sharedConfig.context.serialize(key, res);
-    }
+    isServer && serializeForHydration(key, res);
     return res;
-    function handleResponse(error) {
+
+    // a settled read: the response handling applied to the value or the promise
+    function settle(v) {
+      let cookies = isServer ? forwardedCookies.get(cached) : undefined;
+      if (isServer && !cookies) forwardedCookies.set(cached, cookies = new WeakSet());
+      return "then" in v ? v.then(handleResponse(false, cookies), handleResponse(true, cookies)) : handleResponse(false, cookies)(v);
+    }
+    function handleResponse(error, cookies) {
       return async v => {
         let enveloped;
         let hasEnveloped = false;
@@ -2834,8 +2881,18 @@ function query(fn, name) {
         if (v instanceof Response) {
           const e = getRequestEvent();
           if (e) {
+            const headers = e.response.headers;
+            const skipCookies = cookies?.has(headers);
             for (const [key, value] of v.headers) {
-              if (key == "set-cookie") e.response.headers.append("set-cookie", value);else e.response.headers.set(key, value);
+              // Keep metadata for the query's body off the document response.
+              if (responseBodyHeaders.has(key)) continue;
+              if (key === "set-cookie") {
+                if (!skipCookies) headers.append(key, value);
+              } else if (headers.get(key) !== value) headers.set(key, value);
+            }
+            // Each cached result contributes its cookies once per document.
+            if (!skipCookies && v.headers.has("set-cookie")) {
+              cookies?.add(headers);
             }
           }
           let url = v.headers.get(LocationHeader);
@@ -2918,6 +2975,7 @@ query.set = (key, value) => {
   const now = Date.now();
   let cached = cache.get(key);
   if (cached) {
+    isServer && forwardedCookies.delete(cached);
     cached[0] = now;
     cached[1] = Promise.resolve(value);
     cached[2] = value;
@@ -2965,7 +3023,7 @@ function hashKey(args) {
   return JSON.stringify(args, (_, val) => isPlainObject(val) ? Object.keys(val).sort().reduce((result, key) => {
     result[key] = val[key];
     return result;
-  }, {}) : val);
+  }, Object.create(null)) : val);
 }
 function isPlainObject(obj) {
   let proto;
@@ -2997,7 +3055,8 @@ const actions = /* #__PURE__ */new Map();
  */
 function handleFormAction(evt, router, actionBase) {
   if (evt.defaultPrevented) return;
-  let actionRef = evt.submitter && evt.submitter.hasAttribute("formaction") ? evt.submitter.getAttribute("formaction") : evt.target.getAttribute("action");
+  const form = evt.target;
+  let actionRef = evt.submitter && evt.submitter.hasAttribute("formaction") ? evt.submitter.getAttribute("formaction") : form.getAttribute("action");
   if (!actionRef) return;
   const serverAction = !actionRef.startsWith("https://action/");
   if (serverAction) {
@@ -3006,7 +3065,7 @@ function handleFormAction(evt, router, actionBase) {
     actionRef = router.parsePath(url.pathname + url.search);
     if (!actionRef.startsWith(actionBase)) return;
   }
-  if (evt.target.method.toUpperCase() !== "POST") throw new Error("Only POST forms are supported for Actions");
+  if (form.method.toUpperCase() !== "POST") throw new Error("Only POST forms are supported for Actions");
   // A registry miss on a server-action url is a direct bind whose module
   // never loaded client-side (server components): the url is self-describing
   // (the id in the path, bound `?args` in the query), so a generic invocation
@@ -3017,11 +3076,11 @@ function handleFormAction(evt, router, actionBase) {
   const handler = actions.get(actionRef) || serverAction && createServerFormAction(actionRef);
   if (handler) {
     evt.preventDefault();
-    const data = new FormData(evt.target, evt.submitter);
+    const data = new FormData(form, evt.submitter);
     handler.call({
       r: router,
-      f: evt.target
-    }, evt.target.enctype === "multipart/form-data" ? data : new URLSearchParams(data));
+      f: form
+    }, form.enctype === "multipart/form-data" ? data : new URLSearchParams(data));
   }
 }
 
@@ -3128,23 +3187,21 @@ function actionImpl(fn, options = {}) {
     const runMutation = () => fn(...variables);
     const run = action$1(async function* (context) {
       context.optimistic?.();
+      let value;
+      let error = false;
       try {
-        const value = await context.call();
-        yield;
-        return {
-          error: false,
-          value
-        };
-      } catch (error) {
-        yield;
-        return {
-          error: true,
-          value: error
-        };
+        value = await context.call();
+      } catch (e) {
+        value = e;
+        error = true;
       }
+      const read = await readResponse(value, error);
+      yield;
+      // Apply inside the transition so the default revalidation's refetch and
+      // the release of the caller's optimistic writes commit as one frame (#619).
+      return applyResponse(read, router.navigatorFactory(), flightApplications !== flightApplicationsBefore);
     });
     form && setFormBusy(form, 1);
-    let settled;
     let response;
     // The transport consumer is awaited before a single-flight mutation
     // resolves, so a counter delta over the call tells whether this action's
@@ -3154,13 +3211,12 @@ function actionImpl(fn, options = {}) {
     // which misses every response the server returned without flight data.
     const flightApplicationsBefore = flightApplications;
     try {
-      settled = await settleActionResult(run({
+      response = await settleActionResult(run({
         call: runMutation,
         optimistic: submitHooks.size ? () => {
           for (const hook of submitHooks.values()) hook(...variables);
         } : undefined
       }));
-      response = await handleResponse(settled.value, settled.error, router.navigatorFactory(), flightApplications !== flightApplicationsBefore);
     } finally {
       form && setFormBusy(form, -1);
     }
@@ -3168,8 +3224,8 @@ function actionImpl(fn, options = {}) {
     submission = {
       input: variables,
       url,
-      result: response && response.data,
-      error: response && response.error,
+      result: response?.data,
+      error: response?.error,
       clear() {
         router.submissions[1](entries => entries.filter(entry => entry !== submission));
       },
@@ -3215,8 +3271,7 @@ function toAction(invoke, url, boundArgs = [], base = url, submitHooks = new Map
   fn.with = function (...args) {
     const uri = new URL(url, mockBase);
     uri.searchParams.set("args", hashKey(args));
-    const next = toAction(invoke, (uri.origin === "https://action" ? uri.origin : "") + uri.pathname + uri.search, [...boundArgs, ...args], base, submitHooks, settledHooks);
-    return next;
+    return toAction(invoke, (uri.origin === "https://action" ? uri.origin : "") + uri.pathname + uri.search, [...boundArgs, ...args], base, submitHooks, settledHooks);
   };
   fn.onSubmit = function (hook) {
     const id = Symbol("actionOnSubmitHook");
@@ -3335,8 +3390,10 @@ function applyResponseMetadata(metadata, navigate, flightData) {
   cacheKeyOp(keys, entry => entry[0] = 0);
   // set cache — and fan the payload out to other keyed stores (live query
   // channels adopt delivered values instead of reconnecting)
-  flightData && Object.keys(flightData).forEach(k => query.set(k, flightData[k]));
-  flightData && deliverFlightData(flightData);
+  if (flightData) {
+    Object.keys(flightData).forEach(k => query.set(k, flightData[k]));
+    deliverFlightData(flightData);
+  }
   // trigger revalidation inside the same transition as the navigation, so
   // the redirect commits atomically with fresh data: surviving consumers
   // (shared layouts) the flight payload didn't seed refetch and hold the
@@ -3344,7 +3401,7 @@ function applyResponseMetadata(metadata, navigate, flightData) {
   // are fresh again by now, so the sweep re-reads them from cache.
   revalidate(keys, false);
 }
-async function handleResponse(response, error, navigate, metadataHandled) {
+async function readResponse(response, error) {
   let data;
   let flightData;
   let metadata;
@@ -3367,6 +3424,19 @@ async function handleResponse(response, error, navigate, metadataHandled) {
   } else if (error) return {
     error: response
   };else data = response;
+  return {
+    data,
+    flightData,
+    metadata
+  };
+}
+function applyResponse(read, navigate, metadataHandled) {
+  if ("error" in read) return read;
+  const {
+    data,
+    flightData,
+    metadata
+  } = read;
   // The transport consumer applies metadata before returning a server
   // function's unwrapped value. Do not treat that value as a second plain
   // action response and invalidate the freshly seeded query cache again.

package/dist/paths.js

@@ -37,14 +37,10 @@ export function createPathsProxy(renderPath = p => p, base = "") {
         };
         return new Proxy(build, {
             get(_, prop) {
-                if (prop === "toString")
+                if (prop === "toString" || prop === Symbol.toPrimitive)
                     return () => toHref(pathname);
                 if (typeof prop === "symbol")
-                    return prop === Symbol.toPrimitive
-                        ? () => toHref(pathname)
-                        : prop === HREF
-                            ? pathname || "/"
-                            : undefined;
+                    return prop === HREF ? pathname || "/" : undefined;
                 return node(`${pathname}/${prop}`);
             }
         });

package/dist/routers/components.jsx

@@ -74,9 +74,7 @@ export function Routes(props) {
             }
             else {
                 equal = false;
-                if (disposers[i]) {
-                    disposers[i]();
-                }
+                disposers[i]?.();
                 runWithOwner(owner, () => createRoot(dispose => {
                     disposers[i] = dispose;
                     const routeKey = nextMatch.route.key;