@solidjs/router 2.0.0-next.29 → 2.0.0-next.31

package/README.md

@@ -850,7 +850,7 @@ const isRouting = useIsRouting();
 return <div classList={{ "grey-out": isRouting() }}>...</div>;
 ```
 
-In Solid's dev and observe builds the router also declares every navigation to the attribution engine (`solid-js/attribution`): holds and re-runs caused by a navigation are named after the route pattern (`navigation to /users/:id`), timed from the user event that started it, and redirect hops fold onto the navigation they belong to. `attribution.navigations()` and `feedback().navigations` list them; nothing of this exists in production builds.
+In Solid's dev and observe builds the router also declares every navigation to the attribution engine (`solid-js/attribution`): holds and re-runs caused by a navigation are named after the route pattern (`navigation to /users/:id`), timed from the user event that started it, and redirect hops fold onto the navigation they belong to. `attribution.history("navigation")` and `feedback().navigations` list them; nothing of this exists in production builds.
 
 ### useMatch
 

package/dist/data/action.js

@@ -29,9 +29,10 @@ export const actions = /* #__PURE__ */ new Map();
 export function handleFormAction(evt, router, actionBase) {
     if (evt.defaultPrevented)
         return;
+    const form = evt.target;
     let actionRef = evt.submitter && evt.submitter.hasAttribute("formaction")
         ? evt.submitter.getAttribute("formaction")
-        : evt.target.getAttribute("action");
+        : form.getAttribute("action");
     if (!actionRef)
         return;
     const serverAction = !actionRef.startsWith("https://action/");
@@ -42,7 +43,7 @@ export function handleFormAction(evt, router, actionBase) {
         if (!actionRef.startsWith(actionBase))
             return;
     }
-    if (evt.target.method.toUpperCase() !== "POST")
+    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
@@ -54,10 +55,8 @@ export 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);
-        handler.call({ r: router, f: evt.target }, evt.target.enctype === "multipart/form-data"
-            ? data
-            : new URLSearchParams(data));
+        const data = new FormData(form, evt.submitter);
+        handler.call({ r: router, f: form }, form.enctype === "multipart/form-data" ? data : new URLSearchParams(data));
     }
 }
 /**
@@ -159,18 +158,22 @@ function actionImpl(fn, options = {}) {
         const runMutation = () => fn(...variables);
         const run = createSolidAction(async function* (context) {
             context.optimistic?.();
+            let value;
+            let error = false;
             try {
-                const value = await context.call();
-                yield;
-                return { error: false, value };
+                value = await context.call();
             }
-            catch (error) {
-                yield;
-                return { error: true, value: error };
+            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
@@ -180,7 +183,7 @@ 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
                     ? () => {
@@ -189,7 +192,6 @@ function actionImpl(fn, options = {}) {
                     }
                     : undefined
             }));
-            response = await handleResponse(settled.value, settled.error, router.navigatorFactory(), flightApplications !== flightApplicationsBefore);
         }
         finally {
             form && setFormBusy(form, -1);
@@ -198,8 +200,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));
             },
@@ -244,8 +246,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");
@@ -362,8 +363,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
@@ -371,7 +374,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;
@@ -397,6 +400,12 @@ async function handleResponse(response, error, navigate, metadataHandled) {
         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/data/events.js

@@ -32,7 +32,7 @@ export function setupNativeEvents({ preload = true, explicitLinks = false, actio
             if (target || (!href && !a.hasAttribute("state")))
                 return;
             const rel = (a.getAttribute("rel") || "").split(/\s+/);
-            if (a.hasAttribute("download") || (rel && rel.includes("external")))
+            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

package/dist/data/query.js

@@ -156,10 +156,7 @@ export 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(() => { });
@@ -225,12 +222,8 @@ export function query(fn, name) {
             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 &&
@@ -241,6 +234,12 @@ export function query(fn, name) {
             (!e || !e.serverOnly) && sharedConfig.context.serialize(key, res);
         }
         return res;
+        // a settled read: the response handling applied to the value or the promise
+        function settle(v) {
+            return "then" in v
+                ? v.then(handleResponse(false), handleResponse(true))
+                : handleResponse(false)(v);
+        }
         function handleResponse(error) {
             return async (v) => {
                 let enveloped;

package/dist/fs.d.ts

@@ -35,7 +35,7 @@ export type FileRouteConfig<S extends string = string, T = unknown, F = undefine
  * `matchFilters` are validated against the pattern's params, and their
  * types (and any `search` schema) flow through the manifest into `paths`.
  */
-export declare function defineFileRoute<S extends string, T = unknown, const F = DefinedRouteFilters<S>, Sch extends StandardSchemaV1<any, any> | undefined = undefined>(path: S, config: {
+export declare function defineFileRoute<S extends string, T = unknown, const F = DefinedRouteFilters<S>, Sch extends StandardSchemaV1<any, any> | undefined = undefined>(path: S, config?: {
     matchFilters?: (F & ValidFilters<F, S>) | undefined;
     preload?: ((args: RoutePreloadFuncArgs<RouteParams<S>>) => T) | undefined;
     /** Standard Schema validator for this route's search params; its input type flows into the typed path proxy. */

package/dist/fs.js

@@ -20,7 +20,7 @@ import * as server from "./fsServer.js";
  * `matchFilters` are validated against the pattern's params, and their
  * types (and any `search` schema) flow through the manifest into `paths`.
  */
-export function defineFileRoute(path, config) {
+export function defineFileRoute(path, config = {}) {
     return config;
 }
 /**

package/dist/index.js

@@ -1,4 +1,4 @@
-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 { getOwner, runWithOwner, createMemo, createRenderEffect, onCleanup, untrack, createContext, createSignal, useContext, NotReadyError, DEV, isPending, 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 { REDIRECT_HEADER, decodeRedirectHeaderValue, subscribeFlightData, decodeResponsePayload, parseServerFunctionActionUrl, createServerReference } from '@solidjs/web/server-functions';
 
@@ -72,13 +72,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 +87,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 +96,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 +328,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 +502,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}`);
       }
     });
@@ -553,7 +541,6 @@ function serverRouteOf(component) {
  */
 function serverRouteArgs(route, params, query) {
   const schema = route.key?.search;
-  let search;
   if (schema) {
     const raw = {
       ...query
@@ -561,13 +548,22 @@ function serverRouteArgs(route, params, query) {
     const outcome = validateSearch(schema, raw);
     // Issues leave the raw values in place, matching useSearchParams: search
     // strings are user input, so defaults belong in the schema itself.
-    search = outcome.issues ? raw : outcome.value;
+    return {
+      params: {
+        ...params
+      },
+      search: outcome.issues ? raw : outcome.value
+    };
   }
+  // No schema: leave the key out rather than carrying `search: undefined` —
+  // the args are sent as plain JSON by default and the runtime's JSON-safety
+  // check rejects explicit `undefined` (#615). Destructuring on the server
+  // reads the same either way, and the args-memo equality treats an absent
+  // key and undefined alike.
   return {
     params: {
       ...params
-    },
-    search
+    }
   };
 }
 const shallowEqual = (a, b) => a === b || !!a && !!b && typeof a === "object" && typeof b === "object" && Object.keys(a).length === Object.keys(b).length && Object.keys(a).every(k => a[k] === b[k]);
@@ -1015,9 +1011,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,
@@ -1108,13 +1102,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;
@@ -1125,7 +1118,6 @@ 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()));
   return {
     get pathname() {
@@ -1141,7 +1133,7 @@ function createLocation(path, state, queryWrapper) {
       return state();
     },
     get key() {
-      return key();
+      return "";
     },
     query: queryWrapper ? queryWrapper(queryFn) : createMemoObject(queryFn)
   };
@@ -1307,7 +1299,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);
@@ -1340,7 +1332,7 @@ function createRouterContext(integration, branches, getContext, options = {}) {
       }
     }
     return m;
-  }, {
+  }, DEV && {
     name: "matches"
   });
   const routingPending = createMemo(() => isPending(() => {
@@ -1351,7 +1343,7 @@ function createRouterContext(integration, branches, getContext, options = {}) {
     }
     location.search;
     location.hash;
-  }), {
+  }), DEV && {
     name: "routingPending"
   });
   const isRouting = () => routingPending() || isPending(source);
@@ -1557,11 +1549,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;
@@ -1625,7 +1617,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,
@@ -1752,9 +1744,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;
@@ -1843,13 +1833,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 {
@@ -1893,11 +1884,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 = {};
@@ -2125,7 +2115,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();
     }
   };
@@ -2424,11 +2414,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);
       }
@@ -2743,7 +2732,7 @@ 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(() => {});
@@ -2803,9 +2792,7 @@ 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) {
@@ -2813,6 +2800,11 @@ function query(fn, name) {
       (!e || !e.serverOnly) && sharedConfig.context.serialize(key, res);
     }
     return res;
+
+    // a settled read: the response handling applied to the value or the promise
+    function settle(v) {
+      return "then" in v ? v.then(handleResponse(false), handleResponse(true)) : handleResponse(false)(v);
+    }
     function handleResponse(error) {
       return async v => {
         let enveloped;
@@ -2989,7 +2981,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) {
@@ -2998,7 +2991,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
@@ -3009,11 +3002,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));
   }
 }
 
@@ -3120,23 +3113,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
@@ -3146,13 +3137,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);
     }
@@ -3160,8 +3150,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));
       },
@@ -3207,8 +3197,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");
@@ -3327,8 +3316,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
@@ -3336,7 +3327,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;
@@ -3359,6 +3350,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;

package/dist/routers/factory.jsx

@@ -247,9 +247,8 @@ export 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)) {
+            for (const { route } of matchPath(pathnameOf(url))) {
                 const key = serverRouteOf(route.component)?.call?.key;
                 typeof key === "string" && key && !keys.includes(key) && keys.push(key);
             }

package/dist/routers/history.js

@@ -9,10 +9,11 @@ export function bindEvent(target, type, handler) {
 // guard machinery itself lives behind the lazy `beforeLeave` slot.
 let depth;
 export 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 {
@@ -50,15 +51,10 @@ function scrollToHash(hash, fallbackTop) {
 }
 export 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 = {};

package/dist/routers/scrollRestoration.js

@@ -105,8 +105,7 @@ export 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();
         }

package/dist/routing.js

@@ -391,9 +391,7 @@ export function createRoutes(routeDef, base = "") {
             let pattern = isLeaf ? path : path.split("/*", 1)[0];
             pattern = pattern
                 .split("/")
-                .map((s) => {
-                return s.startsWith(":") || s.startsWith("*") ? s : encodeSegment(s);
-            })
+                .map(s => (/^[:*]/.test(s) ? s : encodeSegment(s)))
                 .join("/");
             acc.push({
                 ...shared,
@@ -487,13 +485,12 @@ export 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_}`);
@@ -505,7 +502,6 @@ 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()));
     return {
         get pathname() {
@@ -521,7 +517,7 @@ function createLocation(path, state, queryWrapper) {
             return state();
         },
         get key() {
-            return key();
+            return "";
         },
         query: queryWrapper ? queryWrapper(queryFn) : createMemoObject(queryFn)
     };
@@ -660,7 +656,7 @@ export function createRouterContext(integration, branches, getContext, options =
             read = runWithOwner(routerOwner, () => createMemo(() => {
                 const result = resolveLazySubtree(record);
                 return result instanceof Promise ? result.then(() => undefined) : undefined;
-            }, { name: "lazyRoutes" }));
+            }, DEV && { name: "lazyRoutes" }));
             lazyReaders.set(record, read);
         }
         return read();
@@ -695,7 +691,7 @@ export function createRouterContext(integration, branches, getContext, options =
             }
         }
         return m;
-    }, { name: "matches" });
+    }, DEV && { name: "matches" });
     const routingPending = createMemo(() => isPending(() => {
         try {
             matches();
@@ -706,7 +702,7 @@ export function createRouterContext(integration, branches, getContext, options =
         }
         location.search;
         location.hash;
-    }), { name: "routingPending" });
+    }), DEV && { name: "routingPending" });
     const isRouting = () => routingPending() || isPending(source);
     const transitionIntent = () => {
         if (!isPending(source))
@@ -912,10 +908,8 @@ export function createRouterContext(integration, branches, getContext, options =
         preloadIntent = "preload";
         for (let match in next) {
             const { 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 &&
@@ -978,9 +972,7 @@ export function createRouteContext(router, parent, outlet, match, matches = () =
     // 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, location, intent: router.intent?.() || "initial" })

package/dist/serverRouteShared.js

@@ -12,15 +12,19 @@ export function serverRouteOf(component) {
  */
 export function serverRouteArgs(route, params, query) {
     const schema = route.key?.search;
-    let search;
     if (schema) {
         const raw = { ...query };
         const outcome = validateSearch(schema, raw);
         // Issues leave the raw values in place, matching useSearchParams: search
         // strings are user input, so defaults belong in the schema itself.
-        search = outcome.issues ? raw : outcome.value;
+        return { params: { ...params }, search: outcome.issues ? raw : outcome.value };
     }
-    return { params: { ...params }, search };
+    // No schema: leave the key out rather than carrying `search: undefined` —
+    // the args are sent as plain JSON by default and the runtime's JSON-safety
+    // check rejects explicit `undefined` (#615). Destructuring on the server
+    // reads the same either way, and the args-memo equality treats an absent
+    // key and undefined alike.
+    return { params: { ...params } };
 }
 const shallowEqual = (a, b) => a === b ||
     (!!a &&

package/dist/types.d.ts

@@ -144,12 +144,21 @@ export type RouteSectionComponent<T = unknown, P extends Params = Params> = Comp
 /**
  * What a server component route is called with (experimental): the params
  * the route's pattern (and its ancestors') declares, plus — only when the
- * route declares a `search` schema — that schema's validated output.
+ * route declares a `search` schema — that schema's validated output. Without
+ * a schema the `search` key is ABSENT, not `undefined`: the args travel as
+ * plain JSON by default, and the runtime's JSON-safety check rejects
+ * explicit `undefined` (#615). The type mirrors that — optional exactly when
+ * the search type admits undefined, required when a schema narrows it.
  */
-export interface ServerRouteArgs<P extends Params | TypedRouteConfig = Params, S = undefined> {
+export type ServerRouteArgs<P extends Params | TypedRouteConfig = Params, S = undefined> = {
     params: ServerRouteParams<P>;
-    search: P extends TypedRouteConfig ? SearchOutputOf<P> : S;
-}
+} & (undefined extends ServerRouteSearch<P, S> ? {
+    search?: ServerRouteSearch<P, S>;
+} : {
+    search: ServerRouteSearch<P, S>;
+});
+/** The search half of {@link ServerRouteArgs}: schema output when declared. */
+export type ServerRouteSearch<P, S> = P extends TypedRouteConfig ? SearchOutputOf<P> : S;
 /**
  * `ServerRouteArgs<typeof route>`: a `defineFileRoute` config is a witness —
  * params from its pattern, search from its schema — the way

package/dist/utils.js

@@ -78,13 +78,13 @@ export 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)) {
@@ -94,7 +94,7 @@ export 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 {
@@ -104,25 +104,15 @@ export 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);
 export function scoreRoute(route) {
     const [pattern, splat] = route.pattern.split("/*", 2);
     const segments = pattern.split("/").filter(Boolean);

package/package.json

@@ -6,7 +6,7 @@
     "Ryan Turnquist"
   ],
   "license": "MIT",
-  "version": "2.0.0-next.29",
+  "version": "2.0.0-next.31",
   "homepage": "https://github.com/solidjs/solid-router#readme",
   "repository": {
     "type": "git",
@@ -38,22 +38,22 @@
     "@rollup/plugin-node-resolve": "15.3.0",
     "@rollup/plugin-terser": "0.4.4",
     "@solidjs/vite-plugin": "3.0.0-next.35",
-    "@solidjs/web": "^2.0.0-rc.9",
+    "@solidjs/web": "^2.0.0-rc.11",
     "@types/jest": "^29.5.14",
     "@types/node": "^22.10.0",
     "babel-preset-solid": "^2.0.0-rc.2",
     "jsdom": "^25.0.1",
     "prettier": "^3.4.1",
     "rollup": "^4.27.4",
-    "solid-js": "^2.0.0-rc.9",
+    "solid-js": "^2.0.0-rc.11",
     "typescript": "^5.7.2",
     "vite": "^8.2.2",
     "vitest": "^4.1.11"
   },
   "peerDependencies": {
-    "@solidjs/web": "^2.0.0-rc.9",
+    "@solidjs/web": "^2.0.0-rc.10",
     "filesystem-routing": ">=0.4.0",
-    "solid-js": "^2.0.0-rc.9"
+    "solid-js": "^2.0.0-rc.10"
   },
   "peerDependenciesMeta": {
     "filesystem-routing": {