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

package/dist/data/action.js

@@ -52,13 +52,40 @@ export function handleFormAction(evt, router, actionBase) {
     // stays a no-JS fallback.
     // Client-only actions (`https://action/`) are their module's JS by
     // definition, so a miss there falls through to native submission.
-    const handler = actions.get(actionRef) || (serverAction && createServerFormAction(actionRef));
+    const handler = findAction(actionRef) || (serverAction && createServerFormAction(actionRef));
     if (handler) {
         evt.preventDefault();
         const data = new FormData(form, evt.submitter);
         handler.call({ r: router, f: form }, form.enctype === "multipart/form-data" ? data : new URLSearchParams(data));
     }
 }
+/**
+ * Looks a rendered action url up in the registry. A server-rendered
+ * `.with()` url is only registered if this client made the same binding
+ * itself; otherwise its base action (the url without `?args`) is rebound to
+ * the rendered arguments, so the submission runs through that action's
+ * submit and settled hooks and is recorded under its base.
+ */
+function findAction(url) {
+    const handler = actions.get(url);
+    if (handler)
+        return handler;
+    const query = url.indexOf("?");
+    if (query < 0)
+        return undefined;
+    const base = actions.get(url.slice(0, query));
+    const args = new URLSearchParams(url.slice(query)).get("args");
+    if (!base || args === null)
+        return undefined;
+    let bound;
+    try {
+        bound = JSON.parse(args);
+    }
+    catch {
+        return undefined;
+    }
+    return Array.isArray(bound) ? base.with(...bound) : undefined;
+}
 /**
  * Synthesizes a router action for a server-rendered action url. The url
  * carries everything an invocation needs — the function id in the path
@@ -90,7 +117,7 @@ function createServerFormAction(url) {
  * the enctype conversion and the generic invocation happen here.
  */
 export function submitServerForm(router, url, form, data) {
-    const handler = actions.get(url) || createServerFormAction(url);
+    const handler = findAction(url) || createServerFormAction(url);
     // not an address (`<endpoint>/<id>`) — not the server function convention;
     // nothing can run it, resubmit natively (submit() bypasses the delegated
     // handler)
@@ -244,9 +271,12 @@ function toAction(invoke, url, boundArgs = [], base = url, submitHooks = new Map
         return url;
     };
     fn.with = function (...args) {
+        const bound = [...boundArgs, ...args];
         const uri = new URL(url, mockBase);
-        uri.searchParams.set("args", hashKey(args));
-        return toAction(invoke, (uri.origin === "https://action" ? uri.origin : "") + uri.pathname + uri.search, [...boundArgs, ...args], base, submitHooks, settledHooks);
+        // the server prepends `args` to the submitted arguments, so it must carry
+        // the whole binding, not just this call's part of a chain
+        uri.searchParams.set("args", hashKey(bound));
+        return toAction(invoke, (uri.origin === "https://action" ? uri.origin : "") + uri.pathname + uri.search, bound, base, submitHooks, settledHooks);
     };
     fn.onSubmit = function (hook) {
         const id = Symbol("actionOnSubmitHook");

package/dist/data/query.js

@@ -1,4 +1,4 @@
-import { createSignal, getObserver, getOwner, isHydratable, onCleanup, untrack } from "solid-js";
+import { createSignal, getObserver, getOwner, isHydratable, isHydrating, onCleanup, untrack } from "solid-js";
 // Everything server-function-shaped comes off the CORE entry: detection
 // (isServerFunction/getServerFunctionMetadata, registered-symbol reads) and
 // the late-bound RPC seam (getServerFunctionRPC). The transport itself —
@@ -37,6 +37,13 @@ const forwardedCookies = /* #__PURE__ */ new WeakMap();
 // 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();
+// Captured at module load: a hydrating client runs a serialized node's
+// compute once as a dependency trace with the global `Promise` swapped for a
+// never-settling mock, and a query() read inside that trace still consumes
+// and caches its flight entry. Wrapped with the global there, a settled
+// entry would cache a promise that never resolves, hanging every navigation
+// that reuses it.
+const NativePromise = Promise;
 // 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.
@@ -165,11 +172,18 @@ export function query(fn, name) {
             tracking = true;
             onCleanup(() => cached[4].count--);
         }
+        // A read with no navigation in flight while hydrating is claiming server
+        // DOM, so it takes the cached entry at any age — the rule adoption below
+        // applies to flight entries. It can come from a boundary resuming long
+        // after boot, once the entry was adopted and its first reader disposed;
+        // refetching there would run inside Solid's hydration trace, where fetch
+        // and Promise never settle, and cache that.
         if (cached &&
             cached[0] &&
             (isServer ||
                 intent === "native" ||
                 cached[4].count ||
+                (!intent && isHydrating()) ||
                 Date.now() - cached[0] < PRELOAD_TIMEOUT)) {
             if (tracking) {
                 cached[4].count++;
@@ -210,8 +224,8 @@ export function query(fn, name) {
                     entry.status === "pending"
                         ? entry.promise
                         : entry.status === "resolved"
-                            ? Promise.resolve(entry.value)
-                            : Promise.reject(entry.error);
+                            ? NativePromise.resolve(entry.value)
+                            : NativePromise.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
@@ -220,11 +234,10 @@ export function query(fn, name) {
         if (!adopted)
             res = fn(...args);
         // Adopted entries are stamped at boot — when their data was actually
-        // fetched — not at consumption. The hydration render burst still dedups
-        // through the normal window/count reuse above (it happens within
-        // milliseconds of boot), while a navigation that comes along later sees
-        // the payload's true age and refetches past PRELOAD_TIMEOUT, exactly as
-        // it would for a preload performed when the server fetched the data.
+        // fetched — not at consumption. Later hydration reads still reuse them
+        // through the claim rule above, while a navigation that comes along later
+        // sees the payload's true age and refetches past PRELOAD_TIMEOUT, exactly
+        // as it would for a preload performed when the server fetched the data.
         const stamp = adopted ? bootTime : now;
         if (cached) {
             isServer && forwardedCookies.delete(cached);

package/dist/index.js

@@ -1,4 +1,4 @@
-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 { getOwner, runWithOwner, createMemo, createRenderEffect, onCleanup, untrack, createContext, createSignal, useContext, NotReadyError, DEV, isPending, latest, createComponent, createRoot, Show, createEffect, OBSERVE, onSettled, getObserver, isHydrating, 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';
 
@@ -1190,6 +1190,17 @@ let flashDecoder;
 function provideFlashDecoder(decoder) {
   flashDecoder || (flashDecoder = decoder);
 }
+
+/**
+ * A request's flash cookie and its decode, shared by every router created
+ * for that request. A server render can re-create the router — a suspension
+ * under `<Errored>` retries from the nearest hole above it, which may sit
+ * above the router — so state kept on one router instance would restart the
+ * decode with every re-creation and the seeding read would never settle.
+ * Keyed by the request event, so it lives exactly as long as the request.
+ */
+
+const flashStates = new WeakMap();
 let preloadIntent;
 function getIntent() {
   return preloadIntent || useOptionalContext(RouterContextObj)?.intent?.();
@@ -1228,63 +1239,68 @@ function createRouterContext(integration, branches, getContext, options = {}) {
   // unread outcome must not haunt a later request's render. Only detection
   // and clearing happen here (the runtime's isomorphic half); the raw header
   // is stashed and decoding waits for the action-provided codec, read when
-  // the lazily allocated submissions signal below first initializes.
-  let flashCookieHeader;
+  // the lazily allocated submissions signal below first initializes. Both
+  // happen once per request: a router re-created for the same request finds
+  // the request's flash state (see `flashStates`) and neither clears again
+  // nor decodes again.
+  let flash;
   if (isServer) {
     const e = getRequestEvent();
     if (e && !(e.router && e.router.submission)) {
-      const cookieHeader = e.request.headers.get("cookie");
-      if (hasFlashCookie(cookieHeader)) {
-        flashCookieHeader = cookieHeader;
-        // one-shot: clear it even when unreadable so it can't haunt later renders
-        if (e.response && e.response.headers) e.response.headers.append("Set-Cookie", clearFlashCookie());
+      flash = flashStates.get(e);
+      if (!flash) {
+        const cookieHeader = e.request.headers.get("cookie");
+        if (hasFlashCookie(cookieHeader)) {
+          flashStates.set(e, flash = {
+            cookieHeader
+          });
+          // one-shot: clear it even when unreadable so it can't haunt later renders
+          if (e.response && e.response.headers) e.response.headers.append("Set-Cookie", clearFlashCookie());
+        }
       }
     }
   }
 
-  // The decode, at most once per request: the decoder may answer with a
-  // Promise (the cookie is encrypted; the runtime's decodeFlashCookie is
-  // async), and this cache is what keeps the parked read's rerun from
-  // restarting it — resumption finds the settled outcome and just reads it.
-  // A decoder that rejects reads as "no flash", matching the runtime's own
-  // malformed-cookie semantics.
-  let flashDecode;
-
   // The seeding read, as a memo: NotReadyError must surface from a reactive
   // node the graph can park and retry — never from router setup, which no
-  // boundary guards — and the memo bounds the recompute to this function;
-  // a parked reader resumes into the settled cache above, never a second
-  // decode. Created only when a flash cookie actually arrived (server-only
-  // by construction: flashCookieHeader is only ever set there), and
+  // boundary guards — and the memo bounds the recompute to this function.
+  // The decode runs at most once per request: the decoder may answer with a
+  // Promise (the cookie is encrypted; the runtime's decodeFlashCookie is
+  // async), and the request's cached state is what keeps a parked read's
+  // rerun — or a re-created router's first read — from restarting it. A
+  // decoder that rejects reads as "no flash", matching the runtime's own
+  // malformed-cookie semantics. Created only when a flash cookie actually
+  // arrived (server-only by construction: `flash` is only ever set there), and
   //   - `lazy`: server memos compute eagerly by default — deferred to first
   //     read, a request whose submissions are never read never decodes;
   //   - `transparent`: the memo exists on the server only, so its owner
   //     must not consume a hydration-id slot — the client, which seeds
   //     submissions as [] without ever creating this memo, would miss it
   //     and every sibling id would shift.
-  const flashSubmission = flashCookieHeader !== undefined ? createMemo(() => {
+  const flashSubmission = flash !== undefined ? createMemo(() => {
+    const state = flash;
     if (!flashDecoder) return undefined;
-    if (!flashDecode) {
-      const promise = flashDecoder(flashCookieHeader).then(value => {
-        flashDecode = {
+    if (!state.decode) {
+      const promise = flashDecoder(state.cookieHeader).then(value => {
+        state.decode = {
           done: true,
           value
         };
       }, () => {
-        flashDecode = {
+        state.decode = {
           done: true,
           value: undefined
         };
       });
-      flashDecode = {
+      state.decode = {
         done: false,
         promise
       };
     }
     // SSR carries the Promise through NotReadyError so the parked
     // reader can resume, exactly like the lazy matches above.
-    if (!flashDecode.done) throw new NotReadyError(flashDecode.promise);
-    return flashDecode.value;
+    if (!state.decode.done) throw new NotReadyError(state.decode.promise);
+    return state.decode.value;
   }, {
     lazy: true,
     transparent: true
@@ -2663,6 +2679,13 @@ const forwardedCookies = /* #__PURE__ */new WeakMap();
 // 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();
+// Captured at module load: a hydrating client runs a serialized node's
+// compute once as a dependency trace with the global `Promise` swapped for a
+// never-settling mock, and a query() read inside that trace still consumes
+// and caches its flight entry. Wrapped with the global there, a settled
+// entry would cache a promise that never resolves, hanging every navigation
+// that reuses it.
+const NativePromise = Promise;
 
 // 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
@@ -2787,7 +2810,14 @@ function query(fn, name) {
       tracking = true;
       onCleanup(() => cached[4].count--);
     }
-    if (cached && cached[0] && (isServer || intent === "native" || cached[4].count || Date.now() - cached[0] < PRELOAD_TIMEOUT$1)) {
+
+    // A read with no navigation in flight while hydrating is claiming server
+    // DOM, so it takes the cached entry at any age — the rule adoption below
+    // applies to flight entries. It can come from a boundary resuming long
+    // after boot, once the entry was adopted and its first reader disposed;
+    // refetching there would run inside Solid's hydration trace, where fetch
+    // and Promise never settle, and cache that.
+    if (cached && cached[0] && (isServer || intent === "native" || cached[4].count || !intent && isHydrating() || Date.now() - cached[0] < PRELOAD_TIMEOUT$1)) {
       if (tracking) {
         cached[4].count++;
         cached[4][0](); // track
@@ -2822,7 +2852,7 @@ function query(fn, name) {
       const entry = takeHydrationValue(key); // hydrating
       if (entry) {
         adopted = true;
-        res = entry.status === "pending" ? entry.promise : entry.status === "resolved" ? Promise.resolve(entry.value) : Promise.reject(entry.error);
+        res = entry.status === "pending" ? entry.promise : entry.status === "resolved" ? NativePromise.resolve(entry.value) : NativePromise.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
@@ -2831,11 +2861,10 @@ function query(fn, name) {
     if (!adopted) res = fn(...args);
 
     // Adopted entries are stamped at boot — when their data was actually
-    // fetched — not at consumption. The hydration render burst still dedups
-    // through the normal window/count reuse above (it happens within
-    // milliseconds of boot), while a navigation that comes along later sees
-    // the payload's true age and refetches past PRELOAD_TIMEOUT, exactly as
-    // it would for a preload performed when the server fetched the data.
+    // fetched — not at consumption. Later hydration reads still reuse them
+    // through the claim rule above, while a navigation that comes along later
+    // sees the payload's true age and refetches past PRELOAD_TIMEOUT, exactly
+    // as it would for a preload performed when the server fetched the data.
     const stamp = adopted ? bootTime : now;
     if (cached) {
       isServer && forwardedCookies.delete(cached);
@@ -3073,7 +3102,7 @@ function handleFormAction(evt, router, actionBase) {
   // stays a no-JS fallback.
   // Client-only actions (`https://action/`) are their module's JS by
   // definition, so a miss there falls through to native submission.
-  const handler = actions.get(actionRef) || serverAction && createServerFormAction(actionRef);
+  const handler = findAction(actionRef) || serverAction && createServerFormAction(actionRef);
   if (handler) {
     evt.preventDefault();
     const data = new FormData(form, evt.submitter);
@@ -3084,6 +3113,30 @@ function handleFormAction(evt, router, actionBase) {
   }
 }
 
+/**
+ * Looks a rendered action url up in the registry. A server-rendered
+ * `.with()` url is only registered if this client made the same binding
+ * itself; otherwise its base action (the url without `?args`) is rebound to
+ * the rendered arguments, so the submission runs through that action's
+ * submit and settled hooks and is recorded under its base.
+ */
+function findAction(url) {
+  const handler = actions.get(url);
+  if (handler) return handler;
+  const query = url.indexOf("?");
+  if (query < 0) return undefined;
+  const base = actions.get(url.slice(0, query));
+  const args = new URLSearchParams(url.slice(query)).get("args");
+  if (!base || args === null) return undefined;
+  let bound;
+  try {
+    bound = JSON.parse(args);
+  } catch {
+    return undefined;
+  }
+  return Array.isArray(bound) ? base.with(...bound) : undefined;
+}
+
 /**
  * Synthesizes a router action for a server-rendered action url. The url
  * carries everything an invocation needs — the function id in the path
@@ -3117,7 +3170,7 @@ function createServerFormAction(url) {
  * the enctype conversion and the generic invocation happen here.
  */
 function submitServerForm(router, url, form, data) {
-  const handler = actions.get(url) || createServerFormAction(url);
+  const handler = findAction(url) || createServerFormAction(url);
   // not an address (`<endpoint>/<id>`) — not the server function convention;
   // nothing can run it, resubmit natively (submit() bypasses the delegated
   // handler)
@@ -3269,9 +3322,12 @@ function toAction(invoke, url, boundArgs = [], base = url, submitHooks = new Map
     return url;
   };
   fn.with = function (...args) {
+    const bound = [...boundArgs, ...args];
     const uri = new URL(url, mockBase);
-    uri.searchParams.set("args", hashKey(args));
-    return toAction(invoke, (uri.origin === "https://action" ? uri.origin : "") + uri.pathname + uri.search, [...boundArgs, ...args], base, submitHooks, settledHooks);
+    // the server prepends `args` to the submitted arguments, so it must carry
+    // the whole binding, not just this call's part of a chain
+    uri.searchParams.set("args", hashKey(bound));
+    return toAction(invoke, (uri.origin === "https://action" ? uri.origin : "") + uri.pathname + uri.search, bound, base, submitHooks, settledHooks);
   };
   fn.onSubmit = function (hook) {
     const id = Symbol("actionOnSubmitHook");

package/dist/routing.js

@@ -556,6 +556,7 @@ let flashDecoder;
 export function provideFlashDecoder(decoder) {
     flashDecoder || (flashDecoder = decoder);
 }
+const flashStates = new WeakMap();
 let preloadIntent;
 export function getIntent() {
     return preloadIntent || useOptionalContext(RouterContextObj)?.intent?.();
@@ -592,56 +593,60 @@ export function createRouterContext(integration, branches, getContext, options =
     // unread outcome must not haunt a later request's render. Only detection
     // and clearing happen here (the runtime's isomorphic half); the raw header
     // is stashed and decoding waits for the action-provided codec, read when
-    // the lazily allocated submissions signal below first initializes.
-    let flashCookieHeader;
+    // the lazily allocated submissions signal below first initializes. Both
+    // happen once per request: a router re-created for the same request finds
+    // the request's flash state (see `flashStates`) and neither clears again
+    // nor decodes again.
+    let flash;
     if (isServer) {
         const e = getRequestEvent();
         if (e && !(e.router && e.router.submission)) {
-            const cookieHeader = e.request.headers.get("cookie");
-            if (hasFlashCookie(cookieHeader)) {
-                flashCookieHeader = cookieHeader;
-                // one-shot: clear it even when unreadable so it can't haunt later renders
-                if (e.response && e.response.headers)
-                    e.response.headers.append("Set-Cookie", clearFlashCookie());
+            flash = flashStates.get(e);
+            if (!flash) {
+                const cookieHeader = e.request.headers.get("cookie");
+                if (hasFlashCookie(cookieHeader)) {
+                    flashStates.set(e, (flash = { cookieHeader }));
+                    // one-shot: clear it even when unreadable so it can't haunt later renders
+                    if (e.response && e.response.headers)
+                        e.response.headers.append("Set-Cookie", clearFlashCookie());
+                }
             }
         }
     }
-    // The decode, at most once per request: the decoder may answer with a
-    // Promise (the cookie is encrypted; the runtime's decodeFlashCookie is
-    // async), and this cache is what keeps the parked read's rerun from
-    // restarting it — resumption finds the settled outcome and just reads it.
-    // A decoder that rejects reads as "no flash", matching the runtime's own
-    // malformed-cookie semantics.
-    let flashDecode;
     // The seeding read, as a memo: NotReadyError must surface from a reactive
     // node the graph can park and retry — never from router setup, which no
-    // boundary guards — and the memo bounds the recompute to this function;
-    // a parked reader resumes into the settled cache above, never a second
-    // decode. Created only when a flash cookie actually arrived (server-only
-    // by construction: flashCookieHeader is only ever set there), and
+    // boundary guards — and the memo bounds the recompute to this function.
+    // The decode runs at most once per request: the decoder may answer with a
+    // Promise (the cookie is encrypted; the runtime's decodeFlashCookie is
+    // async), and the request's cached state is what keeps a parked read's
+    // rerun — or a re-created router's first read — from restarting it. A
+    // decoder that rejects reads as "no flash", matching the runtime's own
+    // malformed-cookie semantics. Created only when a flash cookie actually
+    // arrived (server-only by construction: `flash` is only ever set there), and
     //   - `lazy`: server memos compute eagerly by default — deferred to first
     //     read, a request whose submissions are never read never decodes;
     //   - `transparent`: the memo exists on the server only, so its owner
     //     must not consume a hydration-id slot — the client, which seeds
     //     submissions as [] without ever creating this memo, would miss it
     //     and every sibling id would shift.
-    const flashSubmission = flashCookieHeader !== undefined
+    const flashSubmission = flash !== undefined
         ? createMemo(() => {
+            const state = flash;
             if (!flashDecoder)
                 return undefined;
-            if (!flashDecode) {
-                const promise = flashDecoder(flashCookieHeader).then(value => {
-                    flashDecode = { done: true, value };
+            if (!state.decode) {
+                const promise = flashDecoder(state.cookieHeader).then(value => {
+                    state.decode = { done: true, value };
                 }, () => {
-                    flashDecode = { done: true, value: undefined };
+                    state.decode = { done: true, value: undefined };
                 });
-                flashDecode = { done: false, promise };
+                state.decode = { done: false, promise };
             }
             // SSR carries the Promise through NotReadyError so the parked
             // reader can resume, exactly like the lazy matches above.
-            if (!flashDecode.done)
-                throw new NotReadyError(flashDecode.promise);
-            return flashDecode.value;
+            if (!state.decode.done)
+                throw new NotReadyError(state.decode.promise);
+            return state.decode.value;
         }, { lazy: true, transparent: true })
         : undefined;
     let submissions;

package/package.json

@@ -6,7 +6,7 @@
     "Ryan Turnquist"
   ],
   "license": "MIT",
-  "version": "2.0.0-next.32",
+  "version": "2.0.0-next.34",
   "homepage": "https://github.com/solidjs/solid-router#readme",
   "repository": {
     "type": "git",