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

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.36",
   "homepage": "https://github.com/solidjs/solid-router#readme",
   "repository": {
     "type": "git",