@solidjs/router 2.0.0-next.34 → 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();
 /**
@@ -152,6 +203,7 @@ function installRouterIntegrations() {
     }
     else {
         setRouterFormHandler(handleFormAction);
+        setFormClaimHandler(claimBusyForm);
         provideFlightConsumer(setupFlightDataConsumer);
     }
 }
@@ -183,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
@@ -209,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
                     ? () => {
@@ -218,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;

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];
         }

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;
     })
   };
 };
@@ -3063,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();
 
@@ -3206,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);
   }
 }
@@ -3238,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
@@ -3263,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;
@@ -3457,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;

package/dist/routing.d.ts

@@ -165,9 +165,17 @@ export declare function useSearchParams<T extends SearchParams>(): [
     (params: SetSearchParams, options?: Partial<NavigateOptions>) => void
 ];
 export interface LinkState {
-    /** The location matches this link or lives under it (exact-only when `end`). Styling: `data-active`. */
+    /**
+     * The location's pathname matches this link's or lives under it; the query
+     * is ignored. A link to the router's root (`/`, under the router's `base`)
+     * is exact-only, as is every link with `end`.
+     * Styling: `data-active`.
+     */
     active: () => boolean;
-    /** The location matches this link exactly — what `aria-current="page"` reflects. */
+    /**
+     * The location matches this link exactly: same pathname and same query,
+     * parameter order and hash aside — what `aria-current="page"` reflects.
+     */
     current: () => boolean;
     /** This link is the target of an in-flight navigation. Styling: `data-pending`. */
     pending: () => boolean;

package/dist/routing.js

@@ -4,7 +4,7 @@ import { runWithOwner } from "solid-js";
 import { DEV } from "solid-js";
 import { createComponent, createContext, createMemo, createSignal, getOwner, isPending, latest, NotReadyError, untrack, useContext } from "solid-js";
 import { clearFlashCookie, getRequestEvent, hasFlashCookie, isServer } from "@solidjs/web";
-import { mockBase, comparablePath, createMemoObject, extractSearchParams, invariant, resolvePath, createMatcher, joinPaths, scoreRoute, mergeSearchString, expandOptionals, validateSearch } from "./utils.js";
+import { mockBase, createMemoObject, extractSearchParams, invariant, matchLink, resolvePath, createMatcher, joinPaths, scoreRoute, mergeSearchString, expandOptionals, validateSearch } from "./utils.js";
 import { HREF } from "./paths.js";
 import { serverRouteOf, serverRouteArgs, serverRouteArgsEqual } from "./serverRouteShared.js";
 const MAX_REDIRECTS = 100;
@@ -227,22 +227,11 @@ export 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
@@ -250,7 +239,8 @@ export const useLinkState = (href, options = {}) => {
             state(); // location dependency: mid-flight target swaps recompute
             return (router.isRouting() &&
                 !!router.pendingTarget &&
-                matches(decodeURI(comparablePath(router.pendingTarget.value)))[0]);
+                matchLink({ pathname: router.pendingTarget.value, search: "" }, to(), base, options.end)
+                    .active);
         })
     };
 };

package/dist/utils.d.ts

@@ -1,8 +1,36 @@
 import type { StandardSchemaV1, MatchFilters, PathMatch, RouteDescription, SearchParams, SetSearchParams } from "./types.js";
 export declare const mockBase = "http://sr";
 export declare function normalizePath(path: string, omitSlash?: boolean): string;
-/** Pathname stripped of search/hash and trailing slash, lowercased — the form link matching compares. */
+/**
+ * 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.
+ */
 export declare const comparablePath: (path: string) => string;
+/**
+ * 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.
+ */
+export declare function isUnderBase(pathname: string, base: string): boolean;
+/**
+ * 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.
+ */
+export declare function matchLink(location: {
+    pathname: string;
+    search: string;
+}, target: string | undefined, base: string, end?: boolean): {
+    active: boolean;
+    current: boolean;
+};
 export declare function resolvePath(base: string, path: string, from?: string): string | undefined;
 export declare function invariant<T>(value: T | null | undefined, message: string): T;
 export declare function joinPaths(from: string, to: string): string;

package/dist/utils.js

@@ -6,8 +6,54 @@ export function normalizePath(path, omitSlash = false) {
     const s = path.replace(trimPathRegex, "$1");
     return s ? (omitSlash || /^[?#]/.test(s) ? s : "/" + s) : "";
 }
-/** Pathname stripped of search/hash and trailing slash, lowercased — the form link matching compares. */
-export 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.
+ */
+export 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.
+ */
+export 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.
+ */
+export 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))
+    };
+}
 export function resolvePath(base, path, from) {
     if (hasSchemeRegex.test(path)) {
         return undefined;

package/package.json

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