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

package/README.md

@@ -522,16 +522,21 @@ Active and pending state is styled with CSS — one vocabulary for every kind of
 ```css
 nav a[aria-current="page"] {
   font-weight: 600;
-} /* exact match */
+} /* exact match, query included */
 nav a[data-active] {
   color: var(--accent);
-} /* exact or prefix match */
+} /* exact or prefix match on the path */
 a[data-pending] {
   opacity: 0.6;
 } /* target of in-flight navigation */
 ```
 
-(The root path only ever matches exactly, so `href={paths()}` doesn't light up on every page.)
+One rule decides both, for anchors and `useLinkState` alike:
+
+- **current** (`aria-current="page"`) — same path and same query, ignoring parameter order and the hash. On `/?filter=active`, `<a href="/?filter=active">` is current and `<a href="/">` is not.
+- **active** (`data-active`, and `data-pending` for the in-flight target) — the path only, exact or prefix, so both of those links are active there. The root path (the router's `base`, when it has one) only ever matches exactly, so `href={paths()}` doesn't light up on every page.
+
+An `aria-current` you write yourself (`aria-current="step"` in a stepper, say) is yours: the router never overwrites or removes it, and only manages the attribute on links where it set it.
 
 For component-library links that need reactive state beyond CSS, `useLinkState` is the programmatic counterpart of the attribute vocabulary:
 
@@ -672,7 +677,7 @@ const updateUser = action(async (form: FormData) => {
 <button type="submit" formaction={updateUser}>Save</button>
 ```
 
-Actions only work with POST requests, so put `method="post"` on your form. Submitting forms get `aria-busy="true"` automatically while the action (including its revalidation) is in flight — the same CSS story as links:
+Actions only work with POST requests, so put `method="post"` on your form. Submitting forms get `aria-busy="true"` automatically from submit until the action's result is on screen — the mutation, then its revalidation or redirect, until that update commits — the same CSS story as links:
 
 ```css
 form[aria-busy] button {
@@ -681,6 +686,8 @@ form[aria-busy] button {
 }
 ```
 
+Busy state belongs to the form's `action` URL, not the element: a form re-rendered or replaced mid-flight (a server-component morph, a keyed re-mount) still shows it. An `aria-busy` you set yourself is left alone.
+
 Forms work without JavaScript: a real POST, a redirect back, and the result seeded into submission state through a one-shot flash cookie. Single-flight mutations are on by default — the mutation response carries the refreshed route data in the same round trip.
 
 Delegation doesn't require the action's module on the client either. A form bound directly to a server action in a server-only module (a server component) renders a plain `action="/_server?id=...&args=..."` — a self-describing URL. On submit, the router synthesizes the invocation from it: the form data posts to that URL through the server-function transport, `.with()` arguments ride along in the query string, and submissions, `aria-busy`, redirects, revalidation, and single-flight data flow through the normal pipeline. The handler loads lazily on first such submit, so router-only bundles don't carry the data layer. The no-JS POST above remains the fallback only for clients that actually have no JavaScript. (Client-only actions — `action(fn, "name")` without `use server` — are their module's JS by definition and still require it on the client.)
@@ -704,7 +711,7 @@ const addTodo = action(async todo => {
 });
 ```
 
-`onSubmit(...)` registers a listener in the current reactive owner — multiple components can register against the same action, and hooks are removed when their owner is disposed. `onSettled(...)` works the same way for observing completed submissions.
+`onSubmit(...)` registers a listener in the current reactive owner — multiple components can register against the same action, and hooks are removed when their owner is disposed. `onSettled(...)` works the same way for observing completed submissions. A submission settles when its result is on screen: the hooks run, the record enters `useSubmissions`, and `aria-busy` clears once the action's update commits — after any revalidation or redirect it triggered, which may be later than the promise from `useAction` resolves. The hooks that run are the ones registered when the action finished: a hook whose owner that commit unmounts (the page a redirect leaves) still sees the submission, while a hook registered later, or removed with its owner before then, does not.
 
 The preferred pattern is returning values and letting the client interpret the result; thrown errors are still captured on `Submission.error` as an escape hatch.
 
@@ -894,7 +901,17 @@ preload(paths.users(2).settings, { preloadData: true });
 
 ### useLinkState
 
-Reactive `active`/`current`/`pending` state for [custom link components](#links).
+Reactive `active`/`current`/`pending` state for [custom link components](#links), matched by the same rule as plain anchors:
+
+- `current()` — same path and same query as the location, ignoring parameter order and the hash (what `aria-current="page"` reflects)
+- `active()` — the location's path is the link's path or lives under it, query ignored (`data-active`); a root link (`/`, which resolves to the router's `base`) is exact-only
+- `pending()` — the link's path is the target of an in-flight navigation (`data-pending`)
+
+Pass `{ end: true }` to make `active` (and `pending`) exact-path for any link.
+
+```tsx
+const link = useLinkState(() => props.href, { end: true });
+```
 
 ### useBeforeLeave
 
@@ -1014,7 +1031,7 @@ Route props map 1:1 onto definition keys (`path`, `component`, `preload`, `match
 
 - `<A href replace noScroll state>` → `<a href replace noscroll state>` (attributes, all lowercase)
 - `activeClass` / `inactiveClass` → CSS attribute selectors on `[data-active]` / `[aria-current="page"]`
-- `end` → style exact matches with `[aria-current="page"]` instead of `[data-active]`; the root path already only matches exactly
+- `end` → style exact matches with `[aria-current="page"]` (which also compares the query) instead of `[data-active]`; the root path already only matches exactly
 - Route-relative hrefs → typed `paths`; `useResolvedPath` / `useHref` remain for manual resolution
 - Custom link components → `useLinkState`
 

package/dist/claims.d.ts

@@ -1,14 +1,22 @@
 import type { RouterContext } from "./types.js";
+export declare function setFormClaimHandler(handler: ((form: HTMLFormElement) => void) | undefined): void;
 /**
- * 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:
+ * 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 —

package/dist/claims.js

@@ -1,16 +1,33 @@
 import { registerElementClaim } from "@solidjs/web";
 import { createRenderEffect, getOwner, onCleanup, untrack } from "solid-js";
-import { comparablePath } from "./utils.js";
+import { isUnderBase, matchLink } from "./utils.js";
 /**
- * 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;
+export 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 —
@@ -22,15 +39,15 @@ import { comparablePath } from "./utils.js";
  */
 export 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);
@@ -51,32 +68,48 @@ export function setupLinkClaims(router, explicitLinks) {
         catch {
             return;
         }
-        if (url.origin !== window.location.origin ||
-            (basePath && url.pathname && !url.pathname.toLowerCase().startsWith(basePath.toLowerCase())))
+        if (url.origin !== window.location.origin || !isUnderBase(url.pathname, basePath))
             return;
-        return comparablePath(url.pathname);
+        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)));
-        return { active: matches(loc), pending, exact: path !== undefined && loc === path };
+        const pending = routing &&
+            !!router.pendingTarget &&
+            matchLink({ pathname: router.pendingTarget.value, search: "" }, target, basePath).active;
+        return { active, pending, current };
     }
-    function apply(a, rec, { active, pending, exact }) {
+    function apply(a, rec, { active, pending, 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)));
@@ -91,9 +124,12 @@ export 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))), { transparent: true });
+    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")
+        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
@@ -101,7 +137,7 @@ export function setupLinkClaims(router, explicitLinks) {
         const existing = claimed.get(a);
         if (existing)
             return refresh(a, existing);
-        const rec = { current: false };
+        const rec = { owned: false };
         claimed.set(a, rec);
         // claims fire during component setup, so an owner is present in
         // practice to bound the registry entry's lifetime; without one, state

package/dist/data/action.js

@@ -1,6 +1,7 @@
-import { $TRACK, action as createSolidAction, createMemo, onCleanup, getOwner } from "solid-js";
+import { $TRACK, action as createSolidAction, createMemo, onCleanup, onSettled, getOwner } from "solid-js";
 import { isResponseEnvelope, isServer, REVALIDATE_HEADER } from "@solidjs/web";
 import { createServerReference, decodeRedirectHeaderValue, decodeResponsePayload, parseServerFunctionActionUrl, REDIRECT_HEADER, subscribeFlightData } from "@solidjs/web/server-functions";
+import { setFormClaimHandler } from "../claims.js";
 import { provideFlashDecoder, provideFlightConsumer, useRouter } from "../routing.js";
 import { setRouterFormHandler } from "./events.js";
 import { mockBase, setFunctionName } from "../utils.js";
@@ -8,16 +9,66 @@ import { cacheKeyOp, deliverFlightData, hashKey, readRevalidateKeys, revalidate,
 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");
+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);
 }
 export const actions = /* #__PURE__ */ new Map();
 /**
@@ -52,13 +103,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 +168,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)
@@ -125,6 +203,7 @@ function installRouterIntegrations() {
     }
     else {
         setRouterFormHandler(handleFormAction);
+        setFormClaimHandler(claimBusyForm);
         provideFlightConsumer(setupFlightDataConsumer);
     }
 }
@@ -156,25 +235,90 @@ 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 = createSolidAction(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
@@ -182,8 +326,9 @@ 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
                     ? () => {
@@ -191,33 +336,32 @@ function actionImpl(fn, options = {}) {
                             hook(...variables);
                     }
                     : undefined
-            }));
+            });
         }
-        finally {
-            form && setFormBusy(form, -1);
+        catch (e) {
+            // refused before a transition began: nothing will commit
+            release && release();
+            throw e;
         }
-        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);
+        // 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;
@@ -244,9 +388,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/events.js

@@ -1,5 +1,6 @@
 import { delegateEvents } from "@solidjs/web";
 import { onCleanup } from "solid-js";
+import { isUnderBase } from "../utils.js";
 let formHandler;
 export function setRouterFormHandler(handler) {
     formHandler = handler;
@@ -39,8 +40,7 @@ export function setupNativeEvents({ preload = true, explicitLinks = false, actio
             // 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())))
+            if (url.origin !== window.location.origin || !isUnderBase(url.pathname, basePath))
                 return;
             return [a, url];
         }