@solidjs/router 0.16.1 → 0.16.2

package/dist/components.jsx

@@ -18,8 +18,9 @@ export function A(props) {
         const to_ = to();
         if (to_ === undefined)
             return [false, false];
-        const path = normalizePath(to_.split(/[?#]/, 1)[0]).toLowerCase();
-        const loc = decodeURI(normalizePath(location.pathname).toLowerCase());
+        // trailing slashes are ignored so `/route` and `/route/` share active state
+        const path = normalizePath(to_.split(/[?#]/, 1)[0]).toLowerCase().replace(/\/$/, "");
+        const loc = decodeURI(normalizePath(location.pathname).toLowerCase().replace(/\/$/, ""));
         return [props.end ? path === loc : loc.startsWith(path + "/") || loc === path, path === loc];
     });
     return (<a {...rest} href={href() || props.href} state={JSON.stringify(props.state)} classList={{

package/dist/data/action.js

@@ -24,7 +24,7 @@ export function useSubmission(fn, filter) {
     const submissions = useSubmissions(fn, filter);
     return new Proxy({}, {
         get(_, property) {
-            if ((submissions.length === 0 && property === "clear") || property === "retry")
+            if (submissions.length === 0 && (property === "clear" || property === "retry"))
                 return () => { };
             return submissions[submissions.length - 1]?.[property];
         }
@@ -118,7 +118,10 @@ function toAction(fn, url) {
     fn.url = url;
     if (!isServer) {
         actions.set(url, fn);
-        getOwner() && onCleanup(() => actions.delete(url));
+        // Only remove the registration if it still belongs to this instance —
+        // a re-created action (e.g. a new `.with()` binding after revalidation)
+        // may have registered itself under the same URL since.
+        getOwner() && onCleanup(() => actions.get(url) === fn && actions.delete(url));
     }
     return fn;
 }

package/dist/data/query.js

@@ -28,12 +28,12 @@ function getCache() {
  * Revalidates the given cache entry/entries.
  */
 export function revalidate(key, force = true) {
+    const now = Date.now();
+    // force the cache miss synchronously so a `refetch` in the same tick sees it —
+    // startTransition defers its callback to a microtask (#497)
+    force && cacheKeyOp(key, entry => (entry[0] = 0));
     return startTransition(() => {
-        const now = Date.now();
-        cacheKeyOp(key, entry => {
-            force && (entry[0] = 0); //force cache miss
-            entry[4][1](now); // retrigger live signals
-        });
+        cacheKeyOp(key, entry => entry[4][1](now)); // retrigger live signals
     });
 }
 export function cacheKeyOp(key, fn) {

package/dist/index.js

@@ -18,7 +18,14 @@ function createBeforeLeave() {
       preventDefault: () => e.defaultPrevented = true
     };
     for (const l of listeners) l.listener({
-      ...e,
+      to,
+      options,
+      // delegate to the shared event so later listeners' preventDefault
+      // calls are observable from earlier listeners
+      get defaultPrevented() {
+        return e.defaultPrevented;
+      },
+      preventDefault: e.preventDefault,
       from: l.location,
       retry: force => {
         force && (ignore = true);
@@ -122,7 +129,12 @@ function createMatcher(path, partial, matchFilters) {
   const segments = pattern.split("/").filter(Boolean);
   const len = segments.length;
   return location => {
-    const locSegments = location.split("/").filter(Boolean);
+    const locSegments = location.split("/");
+    // tolerate a single leading and trailing slash, but reject empty interior
+    // segments so `/foo//bar` doesn't silently match `/foo/bar` (#567)
+    if (locSegments[0] === "") locSegments.shift();
+    if (locSegments.length && locSegments[locSegments.length - 1] === "") locSegments.pop();
+    if (locSegments.includes("")) return null;
     const lenDiff = locSegments.length - len;
     if (lenDiff < 0 || lenDiff > 0 && splat === undefined && !partial) {
       return null;
@@ -364,7 +376,11 @@ const useMatch = (path, matchFilters) => {
  * const breadcrumbs = createMemo(() => matches().map(m => m.route.info.breadcrumb))
  * ```
  */
-const useCurrentMatches = () => useRouter().matches;
+const useCurrentMatches = () => {
+  const router = useRouter();
+  // return a copy so user mutations (eg. `.reverse()`) can't corrupt router state
+  return () => router.matches().slice();
+};
 
 /**
  * Retrieves a reactive, store-like object containing the current route path parameters as defined in the Route.
@@ -407,11 +423,20 @@ const useParams = () => useRouter().params;
  * ```
  */
 const useSearchParams = () => {
-  const location = useLocation();
+  const router = useRouter();
+  const location = router.location;
   const navigate = useNavigate();
   const setSearchParams = (params, options) => {
-    const searchString = untrack(() => mergeSearchString(location.search, params) + location.hash);
-    navigate(searchString, {
+    const to = untrack(() => {
+      // merge onto the in-flight navigation target (if any) so consecutive
+      // synchronous calls compose instead of the later one winning
+      const pending = router.pendingTarget && new URL(router.pendingTarget.value, mockBase);
+      const pathname = pending ? pending.pathname : location.pathname;
+      const search = pending ? pending.search : location.search;
+      const hash = pending ? pending.hash : location.hash;
+      return pathname + mergeSearchString(search, params) + hash;
+    });
+    navigate(to, {
       scroll: false,
       resolve: false,
       ...options
@@ -455,6 +480,12 @@ const useBeforeLeave = listener => {
   });
   onCleanup(s);
 };
+
+// Encodes a static path segment like `encodeURIComponent`, but leaves RFC 3986
+// pchar characters (sub-delims / ":" / "@") literal, matching how browsers
+// report them in `location.pathname`. Non-ASCII characters (eg. CJK paths) are
+// still percent-encoded exactly as before, since browsers encode those too.
+const encodeSegment = s => encodeURIComponent(s).replace(/%(2B|40|3A|24|26|2C|3B|3D)/g, m => decodeURIComponent(m));
 function createRoutes(routeDef, base = "") {
   const {
     component,
@@ -475,7 +506,7 @@ function createRoutes(routeDef, base = "") {
       const path = joinPaths(base, expandedPath);
       let pattern = isLeaf ? path : path.split("/*", 1)[0];
       pattern = pattern.split("/").map(s => {
-        return s.startsWith(":") || s.startsWith("*") ? s : encodeURIComponent(s);
+        return s.startsWith(":") || s.startsWith("*") ? s : encodeSegment(s);
       }).join("/");
       acc.push({
         ...shared,
@@ -549,7 +580,9 @@ function createLocation(path, state, queryWrapper) {
   const url = createMemo(prev => {
     const path_ = path();
     try {
-      return new URL(path_, origin);
+      // anchor rooted paths against the origin explicitly - a path with
+      // doubled leading slashes would otherwise parse as protocol-relative
+      return new URL(path_[0] === "/" ? mockBase + path_ : path_, origin);
     } catch (err) {
       console.error(`Invalid path ${path_}`);
       return prev;
@@ -677,6 +710,9 @@ function createRouterContext(integration, branches, getContext, options = {}) {
     location,
     params,
     isRouting,
+    get pendingTarget() {
+      return lastTransitionTarget;
+    },
     renderPath,
     parsePath,
     navigatorFactory,
@@ -925,6 +961,9 @@ function Routes(props) {
   }
   const disposers = [];
   let root;
+  // dispose the detached per-route roots when this component unmounts, otherwise
+  // they stay subscribed to `matches` and crash on a later navigation (#451)
+  onCleanup(() => disposers.forEach(dispose => dispose()));
   const routeStates = createMemo(on(props.routerState.matches, (nextMatches, prevMatches, prev) => {
     let equal = prevMatches && nextMatches.length === prevMatches.length;
     const next = [];
@@ -1078,12 +1117,12 @@ function getCache() {
  * Revalidates the given cache entry/entries.
  */
 function revalidate(key, force = true) {
+  const now = Date.now();
+  // force the cache miss synchronously so a `refetch` in the same tick sees it —
+  // startTransition defers its callback to a microtask (#497)
+  force && cacheKeyOp(key, entry => entry[0] = 0);
   return startTransition(() => {
-    const now = Date.now();
-    cacheKeyOp(key, entry => {
-      force && (entry[0] = 0); //force cache miss
-      entry[4][1](now); // retrigger live signals
-    });
+    cacheKeyOp(key, entry => entry[4][1](now)); // retrigger live signals
   });
 }
 function cacheKeyOp(key, fn) {
@@ -1265,7 +1304,7 @@ function useSubmission(fn, filter) {
   const submissions = useSubmissions(fn, filter);
   return new Proxy({}, {
     get(_, property) {
-      if (submissions.length === 0 && property === "clear" || property === "retry") return () => {};
+      if (submissions.length === 0 && (property === "clear" || property === "retry")) return () => {};
       return submissions[submissions.length - 1]?.[property];
     }
   });
@@ -1356,7 +1395,10 @@ function toAction(fn, url) {
   fn.url = url;
   if (!isServer) {
     actions.set(url, fn);
-    getOwner() && onCleanup(() => actions.delete(url));
+    // Only remove the registration if it still belongs to this instance —
+    // a re-created action (e.g. a new `.with()` binding after revalidation)
+    // may have registered itself under the same URL since.
+    getOwner() && onCleanup(() => actions.get(url) === fn && actions.delete(url));
   }
   return fn;
 }
@@ -1511,7 +1553,7 @@ function setupNativeEvents({
 function Router(props) {
   if (isServer) return StaticRouter(props);
   const getSource = () => {
-    const url = window.location.pathname.replace(/^\/+/, "/") + window.location.search;
+    const url = window.location.pathname + window.location.search;
     const state = window.history.state && window.history.state._depth && Object.keys(window.history.state).length === 1 ? undefined : window.history.state;
     return {
       value: url + window.location.hash,
@@ -1681,8 +1723,9 @@ function A(props) {
   const isActive = createMemo(() => {
     const to_ = to();
     if (to_ === undefined) return [false, false];
-    const path = normalizePath(to_.split(/[?#]/, 1)[0]).toLowerCase();
-    const loc = decodeURI(normalizePath(location.pathname).toLowerCase());
+    // trailing slashes are ignored so `/route` and `/route/` share active state
+    const path = normalizePath(to_.split(/[?#]/, 1)[0]).toLowerCase().replace(/\/$/, "");
+    const loc = decodeURI(normalizePath(location.pathname).toLowerCase().replace(/\/$/, ""));
     return [props.end ? path === loc : loc.startsWith(path + "/") || loc === path, path === loc];
   });
   return (() => {

package/dist/lifecycle.js

@@ -17,7 +17,14 @@ export function createBeforeLeave() {
         };
         for (const l of listeners)
             l.listener({
-                ...e,
+                to,
+                options,
+                // delegate to the shared event so later listeners' preventDefault
+                // calls are observable from earlier listeners
+                get defaultPrevented() {
+                    return e.defaultPrevented;
+                },
+                preventDefault: e.preventDefault,
                 from: l.location,
                 retry: (force) => {
                     force && (ignore = true);

package/dist/routers/Router.js

@@ -7,7 +7,7 @@ export function Router(props) {
     if (isServer)
         return StaticRouter(props);
     const getSource = () => {
-        const url = window.location.pathname.replace(/^\/+/, "/") + window.location.search;
+        const url = window.location.pathname + window.location.search;
         const state = window.history.state && window.history.state._depth && Object.keys(window.history.state).length === 1 ? undefined : window.history.state;
         return {
             value: url + window.location.hash,

package/dist/routers/components.d.ts

@@ -1,5 +1,5 @@
 import type { Component, JSX } from "solid-js";
-import type { MatchFilters, RouteDefinition, RoutePreloadFunc, RouterIntegration, RouteSectionProps } from "../types.js";
+import type { MatchFilters, RouteDefinition, RoutePreloadFunc, RouterIntegration, RouteSectionComponent, RouteSectionProps } from "../types.js";
 export type BaseRouterProps = {
     base?: string;
     /**
@@ -19,7 +19,7 @@ export type RouteProps<S extends string, T = unknown> = {
     children?: JSX.Element;
     preload?: RoutePreloadFunc<T>;
     matchFilters?: MatchFilters<S>;
-    component?: Component<RouteSectionProps<T>>;
+    component?: RouteSectionComponent<T>;
     info?: Record<string, any>;
     /** @deprecated use preload */
     load?: RoutePreloadFunc<T>;

package/dist/routers/components.jsx

@@ -1,5 +1,5 @@
 /*@refresh skip*/
-import { children, createMemo, createRoot, getOwner, mergeProps, on, Show, untrack } from "solid-js";
+import { children, createMemo, createRoot, getOwner, mergeProps, on, onCleanup, Show, untrack } from "solid-js";
 import { getRequestEvent, isServer } from "solid-js/web";
 import { createBranches, createRouteContext, createRouterContext, getIntent, getRouteMatches, RouteContextObj, RouterContextObj, setInPreloadFn } from "../routing.js";
 export const createRouterComponent = (router) => (props) => {
@@ -54,6 +54,9 @@ function Routes(props) {
     }
     const disposers = [];
     let root;
+    // dispose the detached per-route roots when this component unmounts, otherwise
+    // they stay subscribed to `matches` and crash on a later navigation (#451)
+    onCleanup(() => disposers.forEach(dispose => dispose()));
     const routeStates = createMemo(on(props.routerState.matches, (nextMatches, prevMatches, prev) => {
         let equal = prevMatches && nextMatches.length === prevMatches.length;
         const next = [];

package/dist/routing.js

@@ -116,7 +116,11 @@ export const useMatch = (path, matchFilters) => {
  * const breadcrumbs = createMemo(() => matches().map(m => m.route.info.breadcrumb))
  * ```
  */
-export const useCurrentMatches = () => useRouter().matches;
+export const useCurrentMatches = () => {
+    const router = useRouter();
+    // return a copy so user mutations (eg. `.reverse()`) can't corrupt router state
+    return () => router.matches().slice();
+};
 /**
  * Retrieves a reactive, store-like object containing the current route path parameters as defined in the Route.
  *
@@ -157,11 +161,20 @@ export const useParams = () => useRouter().params;
  * ```
  */
 export const useSearchParams = () => {
-    const location = useLocation();
+    const router = useRouter();
+    const location = router.location;
     const navigate = useNavigate();
     const setSearchParams = (params, options) => {
-        const searchString = untrack(() => mergeSearchString(location.search, params) + location.hash);
-        navigate(searchString, {
+        const to = untrack(() => {
+            // merge onto the in-flight navigation target (if any) so consecutive
+            // synchronous calls compose instead of the later one winning
+            const pending = router.pendingTarget && new URL(router.pendingTarget.value, mockBase);
+            const pathname = pending ? pending.pathname : location.pathname;
+            const search = pending ? pending.search : location.search;
+            const hash = pending ? pending.hash : location.hash;
+            return pathname + mergeSearchString(search, params) + hash;
+        });
+        navigate(to, {
             scroll: false,
             resolve: false,
             ...options
@@ -204,6 +217,11 @@ export const useBeforeLeave = (listener) => {
     });
     onCleanup(s);
 };
+// Encodes a static path segment like `encodeURIComponent`, but leaves RFC 3986
+// pchar characters (sub-delims / ":" / "@") literal, matching how browsers
+// report them in `location.pathname`. Non-ASCII characters (eg. CJK paths) are
+// still percent-encoded exactly as before, since browsers encode those too.
+const encodeSegment = (s) => encodeURIComponent(s).replace(/%(2B|40|3A|24|26|2C|3B|3D)/g, m => decodeURIComponent(m));
 export function createRoutes(routeDef, base = "") {
     const { component, preload, load, children, info } = routeDef;
     const isLeaf = !children || (Array.isArray(children) && !children.length);
@@ -220,7 +238,7 @@ export function createRoutes(routeDef, base = "") {
             pattern = pattern
                 .split("/")
                 .map((s) => {
-                return s.startsWith(":") || s.startsWith("*") ? s : encodeURIComponent(s);
+                return s.startsWith(":") || s.startsWith("*") ? s : encodeSegment(s);
             })
                 .join("/");
             acc.push({
@@ -296,7 +314,9 @@ function createLocation(path, state, queryWrapper) {
     const url = createMemo(prev => {
         const path_ = path();
         try {
-            return new URL(path_, origin);
+            // anchor rooted paths against the origin explicitly - a path with
+            // doubled leading slashes would otherwise parse as protocol-relative
+            return new URL(path_[0] === "/" ? mockBase + path_ : path_, origin);
         }
         catch (err) {
             console.error(`Invalid path ${path_}`);
@@ -421,6 +441,9 @@ export function createRouterContext(integration, branches, getContext, options =
         location,
         params,
         isRouting,
+        get pendingTarget() {
+            return lastTransitionTarget;
+        },
         renderPath,
         parsePath,
         navigatorFactory,

package/dist/types.d.ts

@@ -71,12 +71,13 @@ export interface RouteSectionProps<T = unknown> {
     data: T;
     children?: JSX.Element;
 }
-export type RouteDefinition<S extends string | string[] = any, T = unknown> = {
+export type RouteSectionComponent<T = unknown> = Component<RouteSectionProps<T>> | Component<Omit<RouteSectionProps<T>, "children">> | Component<{}>;
+export type RouteDefinition<S extends string | string[] = any, T = any> = {
     path?: S;
     matchFilters?: MatchFilters<S>;
     preload?: RoutePreloadFunc<T>;
     children?: RouteDefinition | RouteDefinition[];
-    component?: Component<RouteSectionProps<T>>;
+    component?: RouteSectionComponent<T>;
     info?: Record<string, any>;
     /** @deprecated use preload */
     load?: RoutePreloadFunc;
@@ -137,6 +138,8 @@ export interface RouterContext {
     params: Params;
     navigatorFactory: NavigatorFactory;
     isRouting: () => boolean;
+    /** The target of the in-flight navigation transition, if any. Not reactive. */
+    readonly pendingTarget?: LocationChange;
     matches: () => RouteMatch[];
     renderPath(path: string): string;
     parsePath(str: string): string;

package/dist/utils.js

@@ -52,7 +52,15 @@ export function createMatcher(path, partial, matchFilters) {
     const segments = pattern.split("/").filter(Boolean);
     const len = segments.length;
     return (location) => {
-        const locSegments = location.split("/").filter(Boolean);
+        const locSegments = location.split("/");
+        // tolerate a single leading and trailing slash, but reject empty interior
+        // segments so `/foo//bar` doesn't silently match `/foo/bar` (#567)
+        if (locSegments[0] === "")
+            locSegments.shift();
+        if (locSegments.length && locSegments[locSegments.length - 1] === "")
+            locSegments.pop();
+        if (locSegments.includes(""))
+            return null;
         const lenDiff = locSegments.length - len;
         if (lenDiff < 0 || (lenDiff > 0 && splat === undefined && !partial)) {
             return null;

package/package.json

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