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

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

package/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.33",
+  "version": "2.0.0-next.35",
   "homepage": "https://github.com/solidjs/solid-router#readme",
   "repository": {
     "type": "git",