@solidjs/router 2.0.0-next.33 → 2.0.0-next.35

package/dist/index.js

@@ -10,8 +10,57 @@ function normalizePath(path, omitSlash = false) {
   return s ? omitSlash || /^[?#]/.test(s) ? s : "/" + s : "";
 }
 
-/** Pathname stripped of search/hash and trailing slash, lowercased — the form link matching compares. */
-const comparablePath = path => normalizePath(path.split(/[?#]/, 1)[0]).toLowerCase().replace(/\/$/, "");
+/**
+ * Pathname stripped of search/hash and trailing slash, percent-encoded the
+ * way `URL` (and so `location.pathname`) reports it, lowercased — the form
+ * link matching compares. Raw and encoded spellings (`/café`, `/caf%C3%A9`)
+ * meet; escapes are never decoded, so `%2F` is not a path separator.
+ */
+const comparablePath = path => new URL(mockBase + normalizePath(path.split(/[?#]/, 1)[0])).pathname.toLowerCase().replace(/\/$/, "");
+
+/**
+ * Whether a URL pathname is the router's base path or under it, on a segment
+ * boundary: base `/app` covers `/app`, `/app/` and `/app/x`, not `/apple`.
+ * Case-insensitive; no base (`""` or `/`) covers every path.
+ */
+function isUnderBase(pathname, base) {
+  const b = base.toLowerCase().replace(/\/+$/, "");
+  const p = pathname.toLowerCase();
+  return !b || !p || p === b || p.startsWith(b + "/");
+}
+
+/** A query string as an order-independent comparable string. */
+const comparableQuery = search => {
+  const params = new URLSearchParams(search);
+  params.sort();
+  return params.toString();
+};
+
+/**
+ * The link-state rule shared by claimed anchors and `useLinkState`, given
+ * the location and a link's already-resolved target (path, optional query
+ * and hash):
+ *
+ * - `current` — same pathname and same query (parameter order and hash aside)
+ * - `active` — same pathname or one under it; the router's root (`base`, or
+ *   `/` without one) only matches exactly, since it is a prefix of every
+ *   page. `end` makes every link exact-only.
+ */
+function matchLink(location, target, base, end) {
+  if (target === undefined) return {
+    active: false,
+    current: false
+  };
+  const loc = comparablePath(location.pathname);
+  const path = comparablePath(target);
+  const exact = loc === path;
+  const hashless = target.split("#", 1)[0];
+  const q = hashless.indexOf("?");
+  return {
+    active: exact || !end && path !== "" && path !== comparablePath(base) && loc.startsWith(path + "/"),
+    current: exact && comparableQuery(location.search) === comparableQuery(q < 0 ? "" : hashless.slice(q))
+  };
+}
 function resolvePath(base, path, from) {
   if (hasSchemeRegex.test(path)) {
     return undefined;
@@ -179,15 +228,33 @@ function setFunctionName(obj, value) {
 }
 
 /**
- * The compiler claims every `a[href]` (and `form[action]`, which this handler
- * ignores) at creation, and the runtime re-claims on `href` writes. This
- * consumer gives each router-managed anchor the link-state vocabulary without
- * a wrapper component:
+ * Claimed forms are handed to this slot instead of the claims importing the
+ * action module: the action side installs it on first action creation (see
+ * data/action.ts), where form `aria-busy` state lives, so an app that never
+ * creates an action never pulls the data layer in through its claims.
+ */
+let formClaim;
+function setFormClaimHandler(handler) {
+  formClaim = handler;
+}
+
+/**
+ * The compiler claims every `a[href]` and `form[action]` at creation, and the
+ * runtime re-claims on `href`/`action` writes and after a server-component
+ * morph changes the element. Forms go to the action layer's slot above, which
+ * re-applies `aria-busy` while their action is in flight. This consumer gives each router-managed anchor the link-state
+ * vocabulary without a wrapper component:
  *
- * - `aria-current="page"` — the location matches the link exactly
- * - `data-active` — exact or prefix match
+ * - `aria-current="page"` — the location matches the link exactly, query
+ *   included (parameter order aside)
+ * - `data-active` — pathname exact or prefix match (the router's root, its
+ *   base path, exact only)
  * - `data-pending` — the link is the target of an in-flight navigation
  *
+ * The matching rule is `matchLink`, shared with `useLinkState`. The router
+ * only touches an `aria-current` it wrote itself: one the author set (a
+ * stepper's `"step"`, a static `"page"`) is left in place, current or not.
+ *
  * Elements are claimed at creation, so late mounts (`<Show>`, `<For>`,
  * portals) are correct immediately. One render effect (owned by the router)
  * subscribes to the location and sweeps a registry of claimed anchors —
@@ -199,16 +266,16 @@ function setFunctionName(obj, value) {
  */
 function setupLinkClaims(router, explicitLinks) {
   const basePath = router.base.path();
-  // per-element record; `current` remembers whether we set `aria-current`,
-  // so user-authored values (steppers, breadcrumbs) are never stripped
+  // per-element record; `owned` is whether the `aria-current` on the element
+  // is the router's, so it never writes over or removes an authored one
   const claimed = new WeakMap();
   const registry = new Set();
   function isSvg(el) {
     return el.namespaceURI === "http://www.w3.org/2000/svg";
   }
 
-  /** The comparable pathname when the router manages this anchor, else `undefined`. */
-  function managedPath(a) {
+  /** The anchor's resolved URL when the router manages it, else `undefined`. */
+  function managedUrl(a) {
     if (explicitLinks && !a.hasAttribute("link")) return;
     const svg = isSvg(a);
     // claims fire at creation while the element is still in the template's
@@ -225,38 +292,55 @@ function setupLinkClaims(router, explicitLinks) {
     } catch {
       return;
     }
-    if (url.origin !== window.location.origin || basePath && url.pathname && !url.pathname.toLowerCase().startsWith(basePath.toLowerCase())) return;
-    return comparablePath(url.pathname);
+    if (url.origin !== window.location.origin || !isUnderBase(url.pathname, basePath)) return;
+    return url;
   }
   function linkState(a) {
     // read reactive sources unconditionally so the owning effect stays
     // subscribed even while the anchor is not router-managed
-    const loc = decodeURI(comparablePath(router.location.pathname));
+    const location = router.location;
     const routing = router.isRouting();
-    const path = managedPath(a);
-    // the root path is a prefix of everything, so it only matches exactly —
-    // there is no per-anchor `end` opt-out like useLinkState has
-    const matches = target => path !== undefined && (target === path || path !== "" && target.startsWith(path + "/"));
+    const url = managedUrl(a);
+    const target = url && url.pathname + url.search;
+    // no per-anchor `end` opt-out like useLinkState has
+    const {
+      active,
+      current
+    } = matchLink(location, target, basePath);
     // effects observe the committed location during a transition, so the
     // in-flight target comes from pendingTarget — readable here because the
     // isRouting write flushes after the target is assigned
-    const pending = routing && !!router.pendingTarget && matches(decodeURI(comparablePath(router.pendingTarget.value)));
+    const pending = routing && !!router.pendingTarget && matchLink({
+      pathname: router.pendingTarget.value,
+      search: ""
+    }, target, basePath).active;
     return {
-      active: matches(loc),
+      active,
       pending,
-      exact: path !== undefined && loc === path
+      current
     };
   }
   function apply(a, rec, {
     active,
     pending,
-    exact
+    current
   }) {
     active ? a.setAttribute("data-active", "") : a.removeAttribute("data-active");
     pending ? a.setAttribute("data-pending", "") : a.removeAttribute("data-pending");
-    if (exact !== rec.current) {
-      exact ? a.setAttribute("aria-current", "page") : a.removeAttribute("aria-current");
-      rec.current = exact;
+    // Ownership is read against the element, not just the record. A
+    // server-component morph resets attributes to the server HTML, which
+    // never carries router link state, then re-claims: an owned value that
+    // went missing is re-applied, while a value the morph restored from the
+    // server HTML (or the author wrote since) is authored and left alone.
+    const value = a.getAttribute("aria-current");
+    if (rec.owned && value !== null && value !== "page") rec.owned = false;else if (current) {
+      if (value === null) {
+        a.setAttribute("aria-current", "page");
+        rec.owned = true;
+      }
+    } else if (rec.owned) {
+      if (value !== null) a.removeAttribute("aria-current");
+      rec.owned = false;
     }
   }
   const refresh = (a, rec) => untrack(() => apply(a, rec, linkState(a)));
@@ -272,18 +356,20 @@ function setupLinkClaims(router, explicitLinks) {
   // slot — lazy-route lookups miss and hydration leaves server nodes
   // unclaimed. (The option is honored by the runtime but missing from the
   // published EffectOptions type, hence the cast.)
-  createRenderEffect(() => (router.location.pathname, router.isRouting()), () => registry.forEach(a => refresh(a, claimed.get(a))), {
+  createRenderEffect(() => (router.location.pathname, router.location.search, router.isRouting()), () => registry.forEach(a => refresh(a, claimed.get(a))), {
     transparent: true
   });
   onCleanup(registerElementClaim(node => {
-    if (node.nodeName.toUpperCase() !== "A") return;
+    const name = node.nodeName.toUpperCase();
+    if (name === "FORM") return formClaim && formClaim(node);
+    if (name !== "A") return;
     const a = node;
     // re-claim (href changed): the claiming write runs inside another
     // effect, so refresh without leaking subscriptions into it
     const existing = claimed.get(a);
     if (existing) return refresh(a, existing);
     const rec = {
-      current: false
+      owned: false
     };
     claimed.set(a, rec);
     // claims fire during component setup, so an owner is present in
@@ -336,7 +422,7 @@ function setupNativeEvents({
       // 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
       if (url.protocol !== "https:" && url.protocol !== "http:") return;
-      if (url.origin !== window.location.origin || basePath && url.pathname && !url.pathname.toLowerCase().startsWith(basePath.toLowerCase())) return;
+      if (url.origin !== window.location.origin || !isUnderBase(url.pathname, basePath)) return;
       return [a, url];
     }
     function handleAnchorClick(evt) {
@@ -855,27 +941,20 @@ const useLinkState = (href, options = {}) => {
   const router = useRouter();
   const location = router.location;
   const to = useResolvedPath(() => String(href()));
-  // trailing slashes are ignored so `/route` and `/route/` share state
-  const path = createMemo(() => {
-    const to_ = to();
-    return to_ === undefined ? undefined : comparablePath(to_);
-  });
-  const matches = loc => {
-    const path_ = path();
-    if (path_ === undefined) return [false, false];
-    const exact = loc === path_;
-    return [exact || !options.end && loc.startsWith(path_ + "/"), exact];
-  };
-  const state = createMemo(() => matches(decodeURI(comparablePath(location.pathname))));
+  const base = router.base.path();
+  const state = createMemo(() => matchLink(location, to(), base, options.end));
   return {
-    active: () => state()[0],
-    current: () => state()[1],
+    active: createMemo(() => state().active),
+    current: createMemo(() => state().current),
     // match the in-flight target explicitly (rather than active-while-routing)
     // so the answer is the same from pure reads and from effects, which
     // observe the committed location during a transition
     pending: createMemo(() => {
       state(); // location dependency: mid-flight target swaps recompute
-      return router.isRouting() && !!router.pendingTarget && matches(decodeURI(comparablePath(router.pendingTarget.value)))[0];
+      return router.isRouting() && !!router.pendingTarget && matchLink({
+        pathname: router.pendingTarget.value,
+        search: ""
+      }, to(), base, options.end).active;
     })
   };
 };
@@ -1190,6 +1269,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 +1318,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
@@ -3047,16 +3142,74 @@ const submitHooksSymbol = Symbol("routerActionSubmitHooks");
 const settledHooksSymbol = Symbol("routerActionSettledHooks");
 const invokeSymbol = Symbol("routerActionInvoke");
 
-// Forms submitted through delegation are marked `aria-busy` while their
-// action is in flight — the form half of the attribute vocabulary links get
-// (`data-active`/`data-pending`). Style with `form[aria-busy] button { ... }`.
-// A counter (not a boolean) keeps the attribute through overlapping
-// submissions from the same form.
-const busyForms = /* #__PURE__ */new WeakMap();
-function setFormBusy(form, delta) {
-  const count = (busyForms.get(form) || 0) + delta;
-  busyForms.set(form, count);
-  count > 0 ? form.setAttribute("aria-busy", "true") : form.removeAttribute("aria-busy");
+// Forms submitted through delegation are marked `aria-busy` from submit until
+// the action's transition commits — the form half of the attribute vocabulary
+// links get (`data-active`/`data-pending`). Style with
+// `form[aria-busy] button { ... }`. A counter (not a boolean) keeps the
+// attribute through overlapping submissions.
+//
+// Busy state is keyed by the form's resolved `action` URL rather than the
+// element: a server-component morph strips the attribute, and a re-render can
+// replace the element, and the claim of either (claimBusyForm) re-applies it
+// from here. A form without an `action` (submitted through a button's
+// `formaction`) is never claimed, so it is keyed by the element itself.
+
+const busyForms = /* #__PURE__ */new Map();
+// forms whose `aria-busy` the router wrote — an authored one is never
+// overwritten or removed (the same ownership rule as claimed `aria-current`)
+const ownedBusy = /* #__PURE__ */new WeakSet();
+function busyKey(form) {
+  const action = form.getAttribute("action");
+  if (action) {
+    try {
+      return new URL(action, document.baseURI).href;
+    } catch {}
+  }
+  return form;
+}
+function showBusy(form) {
+  const busy = busyForms.has(busyKey(form));
+  // Ownership is read against the element: an owned value a morph stripped
+  // is re-applied, one the author has rewritten since is theirs.
+  const value = form.getAttribute("aria-busy");
+  const owned = ownedBusy.has(form);
+  if (owned && value !== null && value !== "true") ownedBusy.delete(form);else if (busy) {
+    if (value === null) {
+      form.setAttribute("aria-busy", "true");
+      ownedBusy.add(form);
+    }
+  } else if (owned) {
+    if (value !== null) form.removeAttribute("aria-busy");
+    ownedBusy.delete(form);
+  }
+}
+
+/** Marks the form busy; the returned release is one-shot. */
+function markFormBusy(form) {
+  const key = busyKey(form);
+  let entry = busyForms.get(key);
+  if (!entry) busyForms.set(key, entry = {
+    count: 0,
+    forms: new Set()
+  });
+  entry.count++;
+  entry.forms.add(form);
+  showBusy(form);
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    if (--entry.count > 0) return;
+    busyForms.delete(key);
+    entry.forms.forEach(showBusy);
+  };
+}
+
+/** The claims' form slot: a (re-)claimed form whose action is busy shows it. */
+function claimBusyForm(form) {
+  const entry = busyForms.get(busyKey(form));
+  if (entry) entry.forms.add(form);
+  showBusy(form);
 }
 const actions = /* #__PURE__ */new Map();
 
@@ -3086,7 +3239,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);
@@ -3097,6 +3250,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
@@ -3130,7 +3307,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)
@@ -3166,6 +3343,7 @@ function installRouterIntegrations() {
     provideFlashDecoder(cookieHeader => import('@solidjs/web/server-functions/server').then(m => m.decodeFlashCookie(cookieHeader)));
   } else {
     setRouterFormHandler(handleFormAction);
+    setFormClaimHandler(claimBusyForm);
     provideFlightConsumer(setupFlightDataConsumer);
   }
 }
@@ -3198,24 +3376,94 @@ function actionImpl(fn, options = {}) {
     // flight-data consumer (see setupFlightDataConsumer) makes the transport
     // send the request header itself, so the mutation is just called.
     const runMutation = () => fn(...variables);
+    // The busy release, the submission record and the settled hooks wait for
+    // the action's transition to COMMIT, not just its body: the body's final
+    // slice can start reads (the default revalidation's refetch, a redirect's
+    // route data) that hold the transition with the old UI still on screen
+    // (#649). Which comes first varies — an unheld transition commits before
+    // the action's promise resolves, a held one after — so the outcome is
+    // captured inside the body and settle() runs once both are in.
+    let outcome;
+    let committed = false;
+    let settled = false;
+    const settle = () => {
+      if (settled || !committed || !outcome) return;
+      settled = true;
+      const response = outcome.response;
+      release && release();
+      let submission;
+      submission = {
+        input: variables,
+        url,
+        result: response?.data,
+        error: response?.error,
+        clear() {
+          router.submissions[1](entries => entries.filter(entry => entry !== submission));
+        },
+        retry() {
+          submission.clear();
+          return current[invokeSymbol].call({
+            r: router,
+            f: form
+          }, variables, current);
+        }
+      };
+      // Book-keeping is intentional: only outcomes worth showing or retrying
+      // (a result or an error) enter the submissions list, so the typical void
+      // mutation leaves nothing behind. Settled hooks still see every
+      // completion — void, metadata-only, and redirects included — one
+      // `onSettled` per invocation (#580).
+      response && router.submissions[1](entries => [...entries, submission]);
+      // runs inside the scheduler's effect pass: a throwing hook must not
+      // abort the pass (or the hooks after it), so it is reported on its own
+      for (const hook of outcome.hooks) {
+        try {
+          hook(submission);
+        } catch (e) {
+          queueMicrotask(() => {
+            throw e;
+          });
+        }
+      }
+    };
+    // The hooks that settle this submission are the ones registered when its
+    // body finished. The commit can dispose their owners (the page a redirect
+    // leaves) before it fires; they still see the submission they observed.
+    const finish = response => {
+      outcome || (outcome = {
+        response,
+        hooks: [...settledHooks.values()]
+      });
+      settle();
+    };
     const run = action$1(async function* (context) {
-      context.optimistic?.();
-      let value;
-      let error = false;
       try {
-        value = await context.call();
+        context.optimistic?.();
+        let value;
+        let error = false;
+        try {
+          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).
+        const response = applyResponse(read, router.navigatorFactory(), flightApplications !== flightApplicationsBefore);
+        finish(response);
+        return response;
       } catch (e) {
-        value = e;
-        error = true;
+        // a failure outside the mutation (a submit hook, decoding the
+        // response, applying it) still settles, with the error recorded
+        finish({
+          error: e
+        });
+        throw e;
       }
-      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 response;
+    const release = form && markFormBusy(form);
     // The transport consumer is awaited before a single-flight mutation
     // resolves, so a counter delta over the call tells whether this action's
     // metadata was already applied. Overlapping mutations can cross-attribute
@@ -3223,40 +3471,40 @@ function actionImpl(fn, options = {}) {
     // a far smaller window than predicting from the function's identity,
     // which misses every response the server returned without flight data.
     const flightApplicationsBefore = flightApplications;
+    let pending;
     try {
-      response = await settleActionResult(run({
+      pending = run({
         call: runMutation,
         optimistic: submitHooks.size ? () => {
           for (const hook of submitHooks.values()) hook(...variables);
         } : undefined
-      }));
-    } finally {
-      form && setFormBusy(form, -1);
-    }
-    let submission;
-    submission = {
-      input: variables,
-      url,
-      result: response?.data,
-      error: response?.error,
-      clear() {
-        router.submissions[1](entries => entries.filter(entry => entry !== submission));
-      },
-      retry() {
-        submission.clear();
-        return current[invokeSymbol].call({
-          r: router,
-          f: form
-        }, variables, current);
-      }
-    };
-    // Book-keeping is intentional: only outcomes worth showing or retrying
-    // (a result or an error) enter the submissions list, so the typical void
-    // mutation leaves nothing behind. Settled hooks still see every
-    // completion — void, metadata-only, and redirects included — one
-    // `onSettled` per invocation (#580).
-    response && router.submissions[1](entries => [...entries, submission]);
-    for (const hook of settledHooks.values()) hook(submission);
+      });
+    } catch (e) {
+      // refused before a transition began: nothing will commit
+      release && release();
+      throw e;
+    }
+    // Registered unowned, synchronously after the invocation, this lands on
+    // the action's own transition — or the outer one a nested call joined, or
+    // the survivor of a merge — and fires at its commit, failures included.
+    // (Registered from the promise continuation it would fire too early: the
+    // transition has parked by then.)
+    onSettled(() => {
+      committed = true;
+      settle();
+    });
+
+    // The returned promise still means "the body finished": an outer action
+    // composing this one (`yield call()`) is the transition that has to
+    // commit, so it cannot wait for the commit.
+    try {
+      await settleActionResult(pending);
+    } catch (e) {
+      finish({
+        error: e
+      });
+    }
+    const response = outcome.response;
     if (response) {
       if (response.error && !form) throw response.error;
       return response.data;
@@ -3282,9 +3530,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");
@@ -3414,6 +3665,9 @@ function applyResponseMetadata(metadata, navigate, flightData) {
   // are fresh again by now, so the sweep re-reads them from cache.
   revalidate(keys, false);
 }
+
+/** What a run settles with: a result, an error, or nothing worth recording. */
+
 async function readResponse(response, error) {
   let data;
   let flightData;