@solidjs/router 0.17.0-next.3 → 0.17.0-next.5

package/dist/components.d.ts

@@ -1,6 +1,6 @@
-import type { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { Location, Navigator } from "./types.js";
-declare module "solid-js" {
+declare module "@solidjs/web/jsx-runtime" {
     namespace JSX {
         interface AnchorHTMLAttributes<T> {
             state?: string;

package/dist/components.jsx

@@ -26,8 +26,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];
     });
     const className = createMemo(() => [toClassName(props.class), isActive()[0] ? props.activeClass : props.inactiveClass]

package/dist/data/action.d.ts

@@ -1,4 +1,4 @@
-import { JSX } from "solid-js";
+import { type JSX } from "@solidjs/web";
 import type { Submission, NarrowResponse } from "../types.js";
 export type Action<T extends Array<any>, U, V = T> = (T extends [FormData | URLSearchParams] | [] ? JSX.SerializableAttributeValue : unknown) & ((...vars: T) => Promise<NarrowResponse<U>>) & {
     url: string;

package/dist/data/action.js

@@ -1,5 +1,6 @@
 import { $TRACK, action as createSolidAction, createMemo, onCleanup, getOwner } from "solid-js";
-import { isServer } from "@solidjs/web";
+import { isResponseEnvelope, isServer } from "@solidjs/web";
+import { decodeResponse } from "@solidjs/web/server-functions";
 import { useRouter } from "../routing.js";
 import { mockBase, setFunctionName } from "../utils.js";
 import { cacheKeyOp, hashKey, revalidate, query } from "./query.js";
@@ -122,7 +123,11 @@ function toAction(invoke, url, boundArgs = [], base = url, submitHooks = new Map
     fn[invokeSymbol] = invoke;
     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;
 }
@@ -147,19 +152,35 @@ async function handleResponse(response, error, navigate) {
     let custom;
     let keys;
     let flightKeys;
-    if (response instanceof Response) {
-        if (response.headers.has("X-Revalidate"))
-            keys = response.headers.get("X-Revalidate").split(",");
-        if (response.customBody) {
-            data = custom = await response.customBody();
+    let metadata;
+    if (isResponseEnvelope(response)) {
+        // client-only respond(): the value rides in memory beside the metadata
+        data = response.value;
+        metadata = response.response;
+    }
+    else if (response instanceof Response) {
+        metadata = response;
+        // responses the transport hands over whole (redirects, revalidation,
+        // single-flight) carry a codec-encoded body the router decodes itself
+        if (response.body) {
+            data = await decodeResponse(response);
             if (response.headers.has("X-Single-Flight")) {
-                data = data._$value;
+                custom = data;
+                data = custom._$value;
                 delete custom._$value;
                 flightKeys = Object.keys(custom);
             }
         }
-        if (response.headers.has("Location")) {
-            const locationUrl = response.headers.get("Location") || "/";
+    }
+    else if (error)
+        return { error: response };
+    else
+        data = response;
+    if (metadata) {
+        if (metadata.headers.has("X-Revalidate"))
+            keys = metadata.headers.get("X-Revalidate").split(",");
+        if (metadata.headers.has("Location")) {
+            const locationUrl = metadata.headers.get("Location") || "/";
             if (locationUrl.startsWith("http")) {
                 window.location.href = locationUrl;
             }
@@ -168,10 +189,6 @@ async function handleResponse(response, error, navigate) {
             }
         }
     }
-    else if (error)
-        return { error: response };
-    else
-        data = response;
     // invalidate
     cacheKeyOp(keys, entry => (entry[0] = 0));
     // set cache

package/dist/data/index.d.ts

@@ -1,3 +1,2 @@
 export { action, useSubmissions, useAction, type Action } from "./action.js";
 export { query, revalidate, type CachedFunction } from "./query.js";
-export { redirect, reload, json } from "./response.js";

package/dist/data/index.js

@@ -1,3 +1,2 @@
 export { action, useSubmissions, useAction } from "./action.js";
 export { query, revalidate } from "./query.js";
-export { redirect, reload, json } from "./response.js";

package/dist/data/query.js

@@ -1,5 +1,6 @@
 import { createSignal, getObserver, getOwner, onCleanup, sharedConfig } from "solid-js";
-import { getRequestEvent, isServer } from "@solidjs/web";
+import { getRequestEvent, isResponseEnvelope, isServer } from "@solidjs/web";
+import { decodeResponse } from "@solidjs/web/server-functions";
 import { useNavigate, getIntent, getInPreloadFn } from "../routing.js";
 const LocationHeader = "Location";
 const PRELOAD_TIMEOUT = 5000;
@@ -143,6 +144,14 @@ export function query(fn, name) {
         return res;
         function handleResponse(error) {
             return async (v) => {
+                let enveloped;
+                let hasEnveloped = false;
+                if (isResponseEnvelope(v)) {
+                    // respond(): the value rides in memory beside the metadata
+                    enveloped = v.value;
+                    hasEnveloped = true;
+                    v = v.response;
+                }
                 if (v instanceof Response) {
                     const e = getRequestEvent();
                     if (e) {
@@ -164,8 +173,15 @@ export function query(fn, name) {
                             e.response.status = 302;
                         return;
                     }
-                    if (v.customBody)
-                        v = await v.customBody();
+                    if (hasEnveloped)
+                        v = enveloped;
+                    else if (v.body) {
+                        // responses the transport hands over whole (revalidation) carry a
+                        // codec-encoded body; anything else (a raw user Response) stays whole
+                        const decoded = await decodeResponse(v);
+                        if (decoded !== undefined)
+                            v = decoded;
+                    }
                 }
                 if (error)
                     throw v;

package/dist/index.d.ts

@@ -4,4 +4,4 @@ export * from "./lifecycle.js";
 export { useHref, useIsRouting, useLocation, useMatch, useCurrentMatches, useNavigate, useParams, useResolvedPath, useSearchParams, useBeforeLeave, usePreloadRoute, RouterContextObj as RouterContext } from "./routing.js";
 export { mergeSearchString as _mergeSearchString } from "./utils.js";
 export * from "./data/index.js";
-export type { Location, LocationChange, SearchParams, MatchFilter, MatchFilters, NavigateOptions, Navigator, OutputMatch, Params, PathMatch, RouteSectionProps, RoutePreloadFunc, RoutePreloadFuncArgs, RouteDefinition, RouteDescription, RouteMatch, RouterIntegration, RouterUtils, SetParams, Submission, BeforeLeaveEventArgs, RouterResponseInit, CustomResponse } from "./types.js";
+export type { Location, LocationChange, SearchParams, MatchFilter, MatchFilters, NavigateOptions, Navigator, OutputMatch, Params, PathMatch, RouteSectionProps, RoutePreloadFunc, RoutePreloadFuncArgs, RouteDefinition, RouteDescription, RouteMatch, RouterIntegration, RouterUtils, SetParams, Submission, BeforeLeaveEventArgs } from "./types.js";

package/dist/index.js

@@ -1,5 +1,6 @@
-import { isServer, getRequestEvent, createComponent as createComponent$1, memo, delegateEvents, spread, mergeProps, template } from '@solidjs/web';
+import { isServer, getRequestEvent, createComponent as createComponent$1, memo, isResponseEnvelope, delegateEvents, spread, mergeProps, template } from '@solidjs/web';
 import { getOwner, runWithOwner, createMemo, createContext, onCleanup, useContext, untrack, createSignal, flush, createComponent, children, merge, createRoot, sharedConfig, getObserver, $TRACK, action as action$1, omit } from 'solid-js';
+import { decodeResponse } from '@solidjs/web/server-functions';
 
 function createBeforeLeave() {
   let listeners = new Set();
@@ -17,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);
@@ -121,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;
@@ -370,7 +383,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.
@@ -383,7 +400,7 @@ const useCurrentMatches = () => useRouter().matches;
  * const getUser = query(() => fetchUser(params.id), "user");
  * ```
  */
-const useParams = () => useRouter().params;
+const useParams = () => useRoute().params;
 
 /**
  * Retrieves a tuple containing a reactive object to read the current location's query parameters and a method to update them.
@@ -413,11 +430,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
@@ -461,6 +487,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,
@@ -480,7 +512,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,12 +581,21 @@ function getRouteMatches(branches, location) {
   }
   return [];
 }
+function mergeParams(matches) {
+  const params = {};
+  for (let i = 0; i < matches.length; i++) {
+    Object.assign(params, matches[i].params);
+  }
+  return params;
+}
 function createLocation(path, state, queryWrapper) {
   const origin = new URL(mockBase);
   const url = createMemo((prev = origin) => {
     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;
@@ -642,17 +683,12 @@ function createRouterContext(integration, branches, getContext, options = {}) {
     }
     return getRouteMatches(branches(), location.pathname);
   });
-  const buildParams = () => {
-    const m = matches();
-    const params = {};
-    for (let i = 0; i < m.length; i++) {
-      Object.assign(params, m[i].params);
-    }
-    return params;
-  };
-  const params = utils.paramsWrapper ? utils.paramsWrapper(buildParams, branches) : createMemoObject(buildParams);
+  const buildParams = () => mergeParams(matches());
+  const wrapParams = utils.paramsWrapper ? getParams => utils.paramsWrapper(getParams, branches) : getParams => createMemoObject(getParams);
+  const params = wrapParams(buildParams);
   const baseRoute = {
     pattern: basePath,
+    params,
     path: () => basePath,
     outlet: () => null,
     resolvePath(to) {
@@ -663,7 +699,11 @@ function createRouterContext(integration, branches, getContext, options = {}) {
     base: baseRoute,
     location,
     params,
+    wrapParams,
     isRouting,
+    get pendingTarget() {
+      return lastTransitionTarget;
+    },
     renderPath,
     parsePath,
     navigatorFactory,
@@ -808,11 +848,11 @@ function createRouterContext(integration, branches, getContext, options = {}) {
     }];
   }
 }
-function createRouteContext(router, parent, outlet, match) {
+function createRouteContext(router, parent, outlet, match, matches = () => [match()]) {
   const {
     base,
     location,
-    params
+    wrapParams
   } = router;
   const {
     pattern,
@@ -820,6 +860,10 @@ function createRouteContext(router, parent, outlet, match) {
     preload
   } = match().route;
   const path = createMemo(() => match().path);
+  // Params scoped to this route's lifetime. `matches` is expected to retain
+  // its last valid value while this route is being torn down, so outgoing
+  // components and preloads never observe another route's params.
+  const params = wrapParams(() => mergeParams(matches()));
   component && component.preload && component.preload();
   inPreloadFn = true;
   const data = preload ? preload({
@@ -831,6 +875,7 @@ function createRouteContext(router, parent, outlet, match) {
   const route = {
     parent,
     pattern,
+    params,
     path,
     outlet: () => component ? createComponent(component, {
       params,
@@ -940,6 +985,13 @@ function Routes(props) {
   const disposers = [];
   let root;
   let prevMatches;
+  // 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()));
+  // Route roots must outlive re-runs of the `routeStates` memo below, so they
+  // are created under the owner of this component rather than the memo's
+  // computation (which disposes its children every time it re-runs).
+  const owner = getOwner();
   const routeStates = createMemo(prev => {
     const nextMatches = props.routerState.matches();
     const previousMatches = prevMatches;
@@ -955,13 +1007,19 @@ function Routes(props) {
         if (disposers[i]) {
           disposers[i]();
         }
-        createRoot(dispose => {
+        runWithOwner(owner, () => createRoot(dispose => {
           disposers[i] = dispose;
-          next[i] = createRouteContext(props.routerState, next[i - 1] || props.routerState.base, createOutlet(() => routeStates()?.[i + 1]), () => {
+          const routeKey = nextMatch.route.key;
+          // Retain the last matches in which this route participated so
+          // that its components and preloads never observe another
+          // route's params/path while this route is being torn down.
+          const matchesAtLevel = createMemo(prev => {
             const routeMatches = props.routerState.matches();
-            return routeMatches[i] ?? routeMatches[0];
+            const m = routeMatches[i];
+            return m && m.route.key === routeKey ? routeMatches : prev || nextMatches;
           });
-        });
+          next[i] = createRouteContext(props.routerState, next[i - 1] || props.routerState.base, createOutlet(() => routeStates()?.[i + 1]), () => matchesAtLevel()[i], matchesAtLevel);
+        }));
       }
     }
     disposers.splice(nextMatches.length).forEach(dispose => dispose());
@@ -1193,6 +1251,14 @@ function query(fn, name) {
     return res;
     function handleResponse(error) {
       return async v => {
+        let enveloped;
+        let hasEnveloped = false;
+        if (isResponseEnvelope(v)) {
+          // respond(): the value rides in memory beside the metadata
+          enveloped = v.value;
+          hasEnveloped = true;
+          v = v.response;
+        }
         if (v instanceof Response) {
           const e = getRequestEvent();
           if (e) {
@@ -1208,7 +1274,12 @@ function query(fn, name) {
             });else if (!isServer) window.location.href = url;else if (e) e.response.status = 302;
             return;
           }
-          if (v.customBody) v = await v.customBody();
+          if (hasEnveloped) v = enveloped;else if (v.body) {
+            // responses the transport hands over whole (revalidation) carry a
+            // codec-encoded body; anything else (a raw user Response) stays whole
+            const decoded = await decodeResponse(v);
+            if (decoded !== undefined) v = decoded;
+          }
         }
         if (error) throw v;
         cached[2] = v;
@@ -1386,7 +1457,10 @@ function toAction(invoke, url, boundArgs = [], base = url, submitHooks = new Map
   fn[invokeSymbol] = invoke;
   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;
 }
@@ -1411,27 +1485,38 @@ async function handleResponse(response, error, navigate) {
   let custom;
   let keys;
   let flightKeys;
-  if (response instanceof Response) {
-    if (response.headers.has("X-Revalidate")) keys = response.headers.get("X-Revalidate").split(",");
-    if (response.customBody) {
-      data = custom = await response.customBody();
+  let metadata;
+  if (isResponseEnvelope(response)) {
+    // client-only respond(): the value rides in memory beside the metadata
+    data = response.value;
+    metadata = response.response;
+  } else if (response instanceof Response) {
+    metadata = response;
+    // responses the transport hands over whole (redirects, revalidation,
+    // single-flight) carry a codec-encoded body the router decodes itself
+    if (response.body) {
+      data = await decodeResponse(response);
       if (response.headers.has("X-Single-Flight")) {
-        data = data._$value;
+        custom = data;
+        data = custom._$value;
         delete custom._$value;
         flightKeys = Object.keys(custom);
       }
     }
-    if (response.headers.has("Location")) {
-      const locationUrl = response.headers.get("Location") || "/";
+  } else if (error) return {
+    error: response
+  };else data = response;
+  if (metadata) {
+    if (metadata.headers.has("X-Revalidate")) keys = metadata.headers.get("X-Revalidate").split(",");
+    if (metadata.headers.has("Location")) {
+      const locationUrl = metadata.headers.get("Location") || "/";
       if (locationUrl.startsWith("http")) {
         window.location.href = locationUrl;
       } else {
         navigate(locationUrl);
       }
     }
-  } else if (error) return {
-    error: response
-  };else data = response;
+  }
   // invalidate
   cacheKeyOp(keys, entry => entry[0] = 0);
   // set cache
@@ -1556,7 +1641,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,
@@ -1714,6 +1799,9 @@ function MemoryRouter(props) {
 }
 
 var _tmpl$ = /*#__PURE__*/template(`<a>`);
+
+// the JSX namespace lives in @solidjs/web's jsx-runtime module as of 2.0
+
 function toClassName(value) {
   if (!value) return "";
   if (typeof value === "string" || typeof value === "number") return String(value);
@@ -1735,30 +1823,29 @@ 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];
   });
   const className = createMemo(() => [toClassName(props.class), isActive()[0] ? props.activeClass : props.inactiveClass].filter(Boolean).join(" "));
-  return (() => {
-    var _el$ = _tmpl$();
-    spread(_el$, mergeProps(rest, {
-      get href() {
-        return href() || props.href;
-      },
-      get state() {
-        return JSON.stringify(props.state);
-      },
-      get ["class"]() {
-        return className();
-      },
-      "link": true,
-      get ["aria-current"]() {
-        return isActive()[1] ? "page" : undefined;
-      }
-    }), false);
-    return _el$;
-  })();
+  var _el$ = _tmpl$();
+  spread(_el$, mergeProps(rest, {
+    get href() {
+      return href() || props.href;
+    },
+    get state() {
+      return JSON.stringify(props.state);
+    },
+    get ["class"]() {
+      return className();
+    },
+    "link": true,
+    get ["aria-current"]() {
+      return isActive()[1] ? "page" : undefined;
+    }
+  }), false);
+  return _el$;
 }
 function Navigate(props) {
   const navigate = useNavigate();
@@ -1778,57 +1865,4 @@ function Navigate(props) {
   return null;
 }
 
-function redirect(url, init = 302) {
-  let responseInit;
-  let revalidate;
-  if (typeof init === "number") {
-    responseInit = {
-      status: init
-    };
-  } else {
-    ({
-      revalidate,
-      ...responseInit
-    } = init);
-    if (typeof responseInit.status === "undefined") {
-      responseInit.status = 302;
-    }
-  }
-  const headers = new Headers(responseInit.headers);
-  headers.set("Location", url);
-  revalidate !== undefined && headers.set("X-Revalidate", revalidate.toString());
-  const response = new Response(null, {
-    ...responseInit,
-    headers: headers
-  });
-  return response;
-}
-function reload(init = {}) {
-  const {
-    revalidate,
-    ...responseInit
-  } = init;
-  const headers = new Headers(responseInit.headers);
-  revalidate !== undefined && headers.set("X-Revalidate", revalidate.toString());
-  return new Response(null, {
-    ...responseInit,
-    headers
-  });
-}
-function json(data, init = {}) {
-  const {
-    revalidate,
-    ...responseInit
-  } = init;
-  const headers = new Headers(responseInit.headers);
-  revalidate !== undefined && headers.set("X-Revalidate", revalidate.toString());
-  headers.set("Content-Type", "application/json");
-  const response = new Response(JSON.stringify(data), {
-    ...responseInit,
-    headers
-  });
-  response.customBody = () => data;
-  return response;
-}
-
-export { A, HashRouter, MemoryRouter, Navigate, Route, Router, RouterContextObj as RouterContext, StaticRouter, mergeSearchString as _mergeSearchString, action, createBeforeLeave, createMemoryHistory, createRouter, json, keepDepth, notifyIfNotBlocked, query, redirect, reload, revalidate, saveCurrentDepth, useAction, useBeforeLeave, useCurrentMatches, useHref, useIsRouting, useLocation, useMatch, useNavigate, useParams, usePreloadRoute, useResolvedPath, useSearchParams, useSubmissions };
+export { A, HashRouter, MemoryRouter, Navigate, Route, Router, RouterContextObj as RouterContext, StaticRouter, mergeSearchString as _mergeSearchString, action, createBeforeLeave, createMemoryHistory, createRouter, keepDepth, notifyIfNotBlocked, query, revalidate, saveCurrentDepth, useAction, useBeforeLeave, useCurrentMatches, useHref, useIsRouting, useLocation, useMatch, useNavigate, useParams, usePreloadRoute, useResolvedPath, useSearchParams, useSubmissions };

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/HashRouter.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { BaseRouterProps } from "./components.jsx";
 export declare function hashParser(str: string): string;
 export type HashRouterProps = BaseRouterProps & {

package/dist/routers/MemoryRouter.d.ts

@@ -1,6 +1,6 @@
 import type { LocationChange } from "../types.js";
 import type { BaseRouterProps } from "./components.jsx";
-import type { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 export type MemoryHistory = {
     get: () => string;
     set: (change: LocationChange) => void;

package/dist/routers/Router.d.ts

@@ -1,5 +1,5 @@
 import type { BaseRouterProps } from "./components.jsx";
-import type { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 export type RouterProps = BaseRouterProps & {
     url?: string;
     actionBase?: string;

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/StaticRouter.d.ts

@@ -1,5 +1,5 @@
 import { type BaseRouterProps } from "./components.jsx";
-import type { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 export type StaticRouterProps = BaseRouterProps & {
     url?: string;
 };

package/dist/routers/components.d.ts

@@ -1,5 +1,6 @@
-import type { Component, JSX } from "solid-js";
-import type { MatchFilters, RouteDefinition, RoutePreloadFunc, RouterIntegration, RouteSectionProps } from "../types.js";
+import type { Component } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import type { MatchFilters, RouteDefinition, RoutePreloadFunc, RouterIntegration, RouteSectionComponent, RouteSectionProps } from "../types.js";
 export type BaseRouterProps = {
     base?: string;
     /**
@@ -17,7 +18,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>;
 };
 export declare const Route: <S extends string, T = unknown>(props: RouteProps<S, T>) => JSX.Element;

package/dist/routers/components.jsx

@@ -1,5 +1,5 @@
 /*@refresh skip*/
-import { children, createMemo, createRoot, getOwner, merge, untrack } from "solid-js";
+import { children, createMemo, createRoot, getOwner, merge, onCleanup, runWithOwner, untrack } from "solid-js";
 import { getRequestEvent, isServer } from "@solidjs/web";
 import { createBranches, createRouteContext, createRouterContext, getIntent, getRouteMatches, RouteContextObj, RouterContextObj, setInPreloadFn } from "../routing.js";
 export const createRouterComponent = (router) => function IntegratedRouter(props) {
@@ -64,6 +64,13 @@ function Routes(props) {
     const disposers = [];
     let root;
     let prevMatches;
+    // 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()));
+    // Route roots must outlive re-runs of the `routeStates` memo below, so they
+    // are created under the owner of this component rather than the memo's
+    // computation (which disposes its children every time it re-runs).
+    const owner = getOwner();
     const routeStates = createMemo((prev) => {
         const nextMatches = props.routerState.matches();
         const previousMatches = prevMatches;
@@ -80,13 +87,19 @@ function Routes(props) {
                 if (disposers[i]) {
                     disposers[i]();
                 }
-                createRoot(dispose => {
+                runWithOwner(owner, () => createRoot(dispose => {
                     disposers[i] = dispose;
-                    next[i] = createRouteContext(props.routerState, next[i - 1] || props.routerState.base, createOutlet(() => routeStates()?.[i + 1]), () => {
+                    const routeKey = nextMatch.route.key;
+                    // Retain the last matches in which this route participated so
+                    // that its components and preloads never observe another
+                    // route's params/path while this route is being torn down.
+                    const matchesAtLevel = createMemo((prev) => {
                         const routeMatches = props.routerState.matches();
-                        return routeMatches[i] ?? routeMatches[0];
+                        const m = routeMatches[i];
+                        return m && m.route.key === routeKey ? routeMatches : prev || nextMatches;
                     });
-                });
+                    next[i] = createRouteContext(props.routerState, next[i - 1] || props.routerState.base, createOutlet(() => routeStates()?.[i + 1]), () => matchesAtLevel()[i], matchesAtLevel);
+                }));
             }
         }
         disposers.splice(nextMatches.length).forEach(dispose => dispose());

package/dist/routers/createRouter.d.ts

@@ -5,6 +5,6 @@ export declare function createRouter(config: {
     init?: (notify: (value?: string | LocationChange) => void) => () => void;
     create?: (router: RouterContext) => void;
     utils?: Partial<RouterUtils>;
-}): (props: import("./components.jsx").BaseRouterProps) => import("solid-js").JSX.Element;
+}): (props: import("./components.jsx").BaseRouterProps) => import("@solidjs/web").JSX.Element;
 export declare function bindEvent(target: EventTarget, type: string, handler: EventListener): () => void;
 export declare function scrollToHash(hash: string, fallbackTop?: boolean): void;

package/dist/routing.d.ts

@@ -1,11 +1,11 @@
-import { JSX, Accessor } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { BeforeLeaveEventArgs, Branch, Intent, Location, MatchFilters, NavigateOptions, Navigator, Params, RouteDescription, RouteContext, RouteDefinition, RouteMatch, RouterContext, RouterIntegration, SearchParams, SetSearchParams } from "./types.js";
 /** Consider this API opaque and internal. It is likely to change in the future. */
-export declare const RouterContextObj: import("solid-js").Context<RouterContext | undefined>;
-export declare const RouteContextObj: import("solid-js").Context<RouteContext | undefined>;
+export declare const RouterContextObj: import("solid-js").Context<RouterContext>;
+export declare const RouteContextObj: import("solid-js").Context<RouteContext>;
 export declare const useRouter: () => RouterContext;
 export declare const useRoute: () => RouteContext;
-export declare const useResolvedPath: (path: () => string) => Accessor<string | undefined>;
+export declare const useResolvedPath: (path: () => string) => import("solid-js").SourceAccessor<string | undefined>;
 export declare const useHref: <T extends string | undefined>(to: () => T) => () => string | T;
 /**
  * Retrieves method to do navigation. The method accepts a path to navigate to and an optional object with the following options:
@@ -79,7 +79,7 @@ export declare const usePreloadRoute: () => (url: string | URL, options?: {
  * return <div classList={{ active: Boolean(match()) }} />;
  * ```
  */
-export declare const useMatch: <S extends string>(path: () => S, matchFilters?: MatchFilters<S>) => Accessor<import("./types.js").PathMatch | undefined>;
+export declare const useMatch: <S extends string>(path: () => S, matchFilters?: MatchFilters<S>) => import("solid-js").SourceAccessor<import("./types.js").PathMatch | undefined>;
 /**
  * `useCurrentMatches` returns all the matches for the current matched route.
  * Useful for getting all the route information.
@@ -172,4 +172,4 @@ export declare function createRouterContext(integration: RouterIntegration, bran
     singleFlight?: boolean;
     transformUrl?: (url: string) => string;
 }): RouterContext;
-export declare function createRouteContext(router: RouterContext, parent: RouteContext, outlet: () => JSX.Element, match: () => RouteMatch): RouteContext;
+export declare function createRouteContext(router: RouterContext, parent: RouteContext, outlet: () => JSX.Element, match: () => RouteMatch, matches?: () => RouteMatch[]): RouteContext;

package/dist/routing.js

@@ -124,7 +124,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.
  *
@@ -136,7 +140,7 @@ export const useCurrentMatches = () => useRouter().matches;
  * const getUser = query(() => fetchUser(params.id), "user");
  * ```
  */
-export const useParams = () => useRouter().params;
+export const useParams = () => useRoute().params;
 /**
  * Retrieves a tuple containing a reactive object to read the current location's query parameters and a method to update them.
  * The object is a proxy so you must access properties to subscribe to reactive updates.
@@ -165,11 +169,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
@@ -212,6 +225,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, children, info } = routeDef;
     const isLeaf = !children || (Array.isArray(children) && !children.length);
@@ -228,7 +246,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({
@@ -299,12 +317,21 @@ export function getRouteMatches(branches, location) {
     }
     return [];
 }
+function mergeParams(matches) {
+    const params = {};
+    for (let i = 0; i < matches.length; i++) {
+        Object.assign(params, matches[i].params);
+    }
+    return params;
+}
 function createLocation(path, state, queryWrapper) {
     const origin = new URL(mockBase);
     const url = createMemo((prev = origin) => {
         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_}`);
@@ -382,19 +409,14 @@ export function createRouterContext(integration, branches, getContext, options =
         }
         return getRouteMatches(branches(), location.pathname);
     });
-    const buildParams = () => {
-        const m = matches();
-        const params = {};
-        for (let i = 0; i < m.length; i++) {
-            Object.assign(params, m[i].params);
-        }
-        return params;
-    };
-    const params = utils.paramsWrapper
-        ? utils.paramsWrapper(buildParams, branches)
-        : createMemoObject(buildParams);
+    const buildParams = () => mergeParams(matches());
+    const wrapParams = utils.paramsWrapper
+        ? (getParams) => utils.paramsWrapper(getParams, branches)
+        : (getParams) => createMemoObject(getParams);
+    const params = wrapParams(buildParams);
     const baseRoute = {
         pattern: basePath,
+        params,
         path: () => basePath,
         outlet: () => null,
         resolvePath(to) {
@@ -405,7 +427,11 @@ export function createRouterContext(integration, branches, getContext, options =
         base: baseRoute,
         location,
         params,
+        wrapParams,
         isRouting,
+        get pendingTarget() {
+            return lastTransitionTarget;
+        },
         renderPath,
         parsePath,
         navigatorFactory,
@@ -539,10 +565,14 @@ export function createRouterContext(integration, branches, getContext, options =
         ];
     }
 }
-export function createRouteContext(router, parent, outlet, match) {
-    const { base, location, params } = router;
+export function createRouteContext(router, parent, outlet, match, matches = () => [match()]) {
+    const { base, location, wrapParams } = router;
     const { pattern, component, preload } = match().route;
     const path = createMemo(() => match().path);
+    // Params scoped to this route's lifetime. `matches` is expected to retain
+    // its last valid value while this route is being torn down, so outgoing
+    // components and preloads never observe another route's params.
+    const params = wrapParams(() => mergeParams(matches()));
     component &&
         component.preload &&
         component.preload();
@@ -552,6 +582,7 @@ export function createRouteContext(router, parent, outlet, match) {
     const route = {
         parent,
         pattern,
+        params,
         path,
         outlet: () => component
             ? createComponent(component, {

package/dist/types.d.ts

@@ -1,4 +1,5 @@
-import type { Component, JSX, Signal } from "solid-js";
+import type { Component, Signal } from "solid-js";
+import type { JSX, ResponseEnvelope } from "@solidjs/web";
 declare module "@solidjs/web" {
     interface RequestEvent {
         response: {
@@ -55,7 +56,7 @@ export interface LocationChange<S = unknown> {
     rawPath?: string;
 }
 export interface RouterIntegration {
-    signal: Signal<LocationChange>;
+    signal: [get: () => LocationChange, set: (next: LocationChange) => void];
     create?: (router: RouterContext) => void;
     utils?: Partial<RouterUtils>;
 }
@@ -72,12 +73,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>;
 };
 export type MatchFilter = readonly string[] | RegExp | ((s: string) => boolean);
@@ -118,6 +120,7 @@ export interface RouteContext {
     parent?: RouteContext;
     child?: RouteContext;
     pattern: string;
+    params: Params;
     path: () => string;
     outlet: () => JSX.Element;
     resolvePath(to: string): string | undefined;
@@ -134,8 +137,11 @@ export interface RouterContext {
     base: RouteContext;
     location: Location;
     params: Params;
+    wrapParams: (getParams: () => 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;
@@ -175,11 +181,4 @@ export interface MaybePreloadableComponent extends Component {
 export type CacheEntry = [number, Promise<any>, any, Intent | undefined, Signal<number> & {
     count: number;
 }];
-export type NarrowResponse<T> = T extends CustomResponse<infer U> ? U : Exclude<T, Response>;
-export type RouterResponseInit = Omit<ResponseInit, "body"> & {
-    revalidate?: string | string[];
-};
-export type CustomResponse<T> = Omit<Response, "clone"> & {
-    customBody: () => T;
-    clone(...args: readonly unknown[]): CustomResponse<T>;
-};
+export type NarrowResponse<T> = T extends ResponseEnvelope<infer U> ? U : Exclude<T, Response>;

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.17.0-next.3",
+  "version": "0.17.0-next.5",
   "homepage": "https://github.com/solidjs/solid-router#readme",
   "repository": {
     "type": "git",
@@ -29,7 +29,7 @@
   ],
   "sideEffects": false,
   "devDependencies": {
-    "@solidjs/web": "2.0.0-beta.7",
+    "@solidjs/web": "2.0.0-beta.19",
     "@babel/core": "^7.26.0",
     "@babel/preset-typescript": "^7.26.0",
     "@changesets/cli": "^2.27.10",
@@ -38,19 +38,19 @@
     "@rollup/plugin-terser": "0.4.4",
     "@types/jest": "^29.5.14",
     "@types/node": "^22.10.0",
-    "babel-preset-solid": "2.0.0-beta.7",
+    "babel-preset-solid": "2.0.0-beta.19",
     "jsdom": "^25.0.1",
     "prettier": "^3.4.1",
     "rollup": "^4.27.4",
-    "solid-js": "2.0.0-beta.7",
+    "solid-js": "2.0.0-beta.19",
     "typescript": "^5.7.2",
     "vite": "^6.0.0",
-    "vite-plugin-solid": "3.0.0-next.4",
+    "vite-plugin-solid": "3.0.0-next.10",
     "vitest": "^2.1.6"
   },
   "peerDependencies": {
-    "@solidjs/web": ">=2.0.0-beta.7 <2.0.0-experimental.0",
-    "solid-js": ">=2.0.0-beta.7 <2.0.0-experimental.0"
+    "@solidjs/web": ">=2.0.0-beta.19 <2.0.0-experimental.0",
+    "solid-js": ">=2.0.0-beta.19 <2.0.0-experimental.0"
   },
   "scripts": {
     "build": "rm -rf dist && tsc && rollup -c",

package/dist/data/response.d.ts

@@ -1,4 +0,0 @@
-import type { RouterResponseInit, CustomResponse } from "../types.js";
-export declare function redirect(url: string, init?: number | RouterResponseInit): CustomResponse<never>;
-export declare function reload(init?: RouterResponseInit): CustomResponse<never>;
-export declare function json<T>(data: T, init?: RouterResponseInit): CustomResponse<T>;

package/dist/data/response.js

@@ -1,42 +0,0 @@
-export function redirect(url, init = 302) {
-    let responseInit;
-    let revalidate;
-    if (typeof init === "number") {
-        responseInit = { status: init };
-    }
-    else {
-        ({ revalidate, ...responseInit } = init);
-        if (typeof responseInit.status === "undefined") {
-            responseInit.status = 302;
-        }
-    }
-    const headers = new Headers(responseInit.headers);
-    headers.set("Location", url);
-    revalidate !== undefined && headers.set("X-Revalidate", revalidate.toString());
-    const response = new Response(null, {
-        ...responseInit,
-        headers: headers
-    });
-    return response;
-}
-export function reload(init = {}) {
-    const { revalidate, ...responseInit } = init;
-    const headers = new Headers(responseInit.headers);
-    revalidate !== undefined && headers.set("X-Revalidate", revalidate.toString());
-    return new Response(null, {
-        ...responseInit,
-        headers
-    });
-}
-export function json(data, init = {}) {
-    const { revalidate, ...responseInit } = init;
-    const headers = new Headers(responseInit.headers);
-    revalidate !== undefined && headers.set("X-Revalidate", revalidate.toString());
-    headers.set("Content-Type", "application/json");
-    const response = new Response(JSON.stringify(data), {
-        ...responseInit,
-        headers
-    });
-    response.customBody = () => data;
-    return response;
-}