@solidjs/router 2.0.0-next.23 → 2.0.0-next.24

package/README.md

@@ -750,6 +750,8 @@ const isRouting = useIsRouting();
 return <div classList={{ "grey-out": isRouting() }}>...</div>;
 ```
 
+In Solid's dev and observe builds the router also declares every navigation to the attribution engine (`solid-js/attribution`): holds and re-runs caused by a navigation are named after the route pattern (`navigation to /users/:id`), timed from the user event that started it, and redirect hops fold onto the navigation they belong to. `attribution.navigations()` and `feedback().navigations` list them; nothing of this exists in production builds.
+
 ### useMatch
 
 Tests a path *pattern you supply* against the current location; returns a memo of match information or `undefined`. It never consults the route tree — the pattern doesn't have to correspond to a defined route. The match's `params` are typed from the pattern, and a typed path node works too (a concrete URL — useful for "am I here" checks):

package/dist/index.js

@@ -1,4 +1,4 @@
-import { getOwner, runWithOwner, createMemo, createRenderEffect, onCleanup, untrack, createContext, createSignal, useContext, NotReadyError, isPending, DEV, latest, createComponent, createRoot, Show, createEffect, sharedConfig, onSettled, getObserver, $TRACK, action as action$1 } from 'solid-js';
+import { getOwner, runWithOwner, createMemo, createRenderEffect, onCleanup, untrack, createContext, createSignal, useContext, NotReadyError, isPending, DEV, latest, createComponent, createRoot, Show, createEffect, sharedConfig, OBSERVE, onSettled, getObserver, $TRACK, action as action$1 } from 'solid-js';
 import { registerElementClaim, delegateEvents, isServer, getRequestEvent, hasFlashCookie, clearFlashCookie, createComponent as createComponent$1, memo, isServerFunction, getServerFunctionMetadata, getServerFunctionRPC, isResponseEnvelope, REVALIDATE_HEADER } from '@solidjs/web';
 import { subscribeFlightData, decodeRedirectHeaderValue, REDIRECT_HEADER, decodeResponsePayload, parseServerFunctionUrl, createServerReference } from '@solidjs/web/server-functions';
 import { decodeFlashCookie } from '@solidjs/web/server-functions/server';
@@ -1221,6 +1221,8 @@ function createRouterContext(integration, branches, getContext, options = {}) {
       read = runWithOwner(routerOwner, () => createMemo(() => {
         const result = resolveLazySubtree(record);
         return result instanceof Promise ? result.then(() => undefined) : undefined;
+      }, {
+        name: "lazyRoutes"
       }));
       lazyReaders.set(record, read);
     }
@@ -1252,6 +1254,8 @@ function createRouterContext(integration, branches, getContext, options = {}) {
       }
     }
     return m;
+  }, {
+    name: "matches"
   });
   const routingPending = createMemo(() => isPending(() => {
     try {
@@ -1261,7 +1265,9 @@ function createRouterContext(integration, branches, getContext, options = {}) {
     }
     location.search;
     location.hash;
-  }));
+  }), {
+    name: "routingPending"
+  });
   const isRouting = () => routingPending() || isPending(source);
   const transitionIntent = () => {
     if (!isPending(source)) return;
@@ -2023,32 +2029,74 @@ function defineRoutes(routes) {
 function defineRoute(route) {
   return route;
 }
+/**
+ * What one location write is, for solid's observe tier: the parametrized
+ * route it heads to, the params, where it came from, and — when the write is
+ * the router chasing a redirect while the previous target is still pending —
+ * which hop of that navigation it is. The engine times the navigation from
+ * this declaration (or from the user event enclosing it) until its writes
+ * are through, and names holds and re-runs after it.
+ *
+ * `name` and `params` are getters: the engine reads them when the navigation
+ * settles, not when it starts, so a lazy route subtree that loaded during the
+ * hold names the exact route it resolved to rather than its placeholder.
+ * Redirect depth comes from `_navigation` (1 = a navigation, n = its
+ * (n - 1)th redirect hop, -1 = the browser moved: back/forward, hash).
+ */
+function describeNavigation(match, next, from) {
+  const pathname = new URL(next.value, mockBase).pathname;
+  const matches = () => untrack(() => match(pathname));
+  const ref = {
+    kind: "navigation",
+    to: next.value,
+    from,
+    get name() {
+      const m = matches();
+      return m.length ? m[m.length - 1].route.pattern || "/" : pathname;
+    },
+    get params() {
+      const m = matches();
+      return m.length ? mergeParams(m) : undefined;
+    }
+  };
+  if (next._navigation !== undefined && next._navigation > 1) ref.redirect = next._navigation - 1;
+  return ref;
+}
+
 /** Wraps a history adapter in the integration signal the router core consumes. Must run under a reactive owner. */
-function createIntegration(history) {
+function createIntegration(history, match) {
   let committing = false;
   const wrap = value => typeof value === "string" ? {
     value
   } : value;
   const [read, write] = createSignal(wrap(history.get()), {
     equals: (a, b) => a.value === b.value && a.state === b.state && a._navigation === b._navigation,
-    ownedWrite: true
+    ownedWrite: true,
+    name: "location"
   });
   const signal = [read, next => {
     if (sharedConfig.registry && !sharedConfig.done) sharedConfig.done = true;
-    write(next);
-    if (next._navigation && next._navigation > 0) {
-      // Register out of band so a destination error boundary replacing the
-      // Router subtree cannot suppress the winning history commit.
-      runWithOwner(null, () => onSettled(() => {
-        if (read() !== next) return;
-        committing = true;
-        try {
-          history.set(next);
-        } finally {
-          committing = false;
-        }
-      }));
-    }
+    const commit = () => {
+      write(next);
+      if (next._navigation && next._navigation > 0) {
+        // Register out of band so a destination error boundary replacing the
+        // Router subtree cannot suppress the winning history commit.
+        runWithOwner(null, () => onSettled(() => {
+          if (read() !== next) return;
+          committing = true;
+          try {
+            history.set(next);
+          } finally {
+            committing = false;
+          }
+        }));
+      }
+    };
+    // Every client location write passes here — navigate(), a redirect hop,
+    // the browser's own back/forward — so this is the one place the
+    // navigation is declared. `read()` still holds the committed location
+    // while a navigation is pending, which is the `from` a hop wants too.
+    OBSERVE ? OBSERVE.attribution.withOrigin(describeNavigation(match, next, untrack(read).value), commit) : commit();
   }];
   history.init && onCleanup(history.init((value = history.get()) => {
     if (committing) return;
@@ -2104,6 +2152,7 @@ function createRouter(config) {
     return compiled;
   };
   const renderPath = config.history && config.history.utils && config.history.utils.renderPath || undefined;
+  const matchPath = pathname => getRouteMatches(branches(), config.transformUrl ? config.transformUrl(pathname) : pathname);
   function RouterComponent(props) {
     // One router per app: the session (location, history, delegation, link
     // claims, preloading) has a single owner, and a second instance would
@@ -2120,7 +2169,7 @@ function createRouter(config) {
       restoration = createScrollRestoration();
       history = withScrollRestoration(history || browserHistory(), restoration);
     }
-    const integration = isServer ? staticIntegration(props.url, config.history && config.history.utils) : createIntegration(history || browserHistory());
+    const integration = isServer ? staticIntegration(props.url, config.history && config.history.utils) : createIntegration(history || browserHistory(), matchPath);
     let context;
     const routerState = createRouterContext(integration, branches, () => context, {
       base: basePath,
@@ -2161,9 +2210,7 @@ function createRouter(config) {
     routes: config.routes,
     config,
     match(url) {
-      const u = new URL(url, mockBase);
-      const pathname = config.transformUrl ? config.transformUrl(u.pathname) : u.pathname;
-      return getRouteMatches(branches(), pathname).map(({
+      return matchPath(new URL(url, mockBase).pathname).map(({
         route,
         path,
         params

package/dist/routers/factory.jsx

@@ -1,13 +1,14 @@
 /*@refresh skip*/
 import { createSignal, getOwner, onCleanup, onSettled, runWithOwner, sharedConfig, untrack } from "solid-js";
-// standalone import: `DEV` is undefined in solid's production build, so app
-// bundlers fold `DEV &&` diagnostics out of shipped bundles
-import { DEV } from "solid-js";
+// standalone imports: `DEV` is undefined in solid's production build and
+// `OBSERVE` outside its observe/dev builds, so app bundlers fold the
+// `DEV &&` diagnostics and the `OBSERVE &&` attribution out of shipped bundles
+import { DEV, OBSERVE } from "solid-js";
 import { getRequestEvent, isServer } from "@solidjs/web";
 import { setupLinkClaims } from "../claims.js";
 import { setupNativeEvents } from "../data/events.js";
 import { createPathsProxy } from "../paths.js";
-import { createBranches, createRouterContext, getRouteMatches, registerFlightRouter, RouterContextObj, trackLazySubtrees, useOptionalContext } from "../routing.js";
+import { createBranches, createRouterContext, getRouteMatches, mergeParams, registerFlightRouter, RouterContextObj, trackLazySubtrees, useOptionalContext } from "../routing.js";
 import { mockBase } from "../utils.js";
 import { Root, Routes } from "./components.jsx";
 import { browserHistory } from "./history.js";
@@ -25,35 +26,79 @@ export function defineRoutes(routes) {
 export function defineRoute(route) {
     return route;
 }
+/**
+ * What one location write is, for solid's observe tier: the parametrized
+ * route it heads to, the params, where it came from, and — when the write is
+ * the router chasing a redirect while the previous target is still pending —
+ * which hop of that navigation it is. The engine times the navigation from
+ * this declaration (or from the user event enclosing it) until its writes
+ * are through, and names holds and re-runs after it.
+ *
+ * `name` and `params` are getters: the engine reads them when the navigation
+ * settles, not when it starts, so a lazy route subtree that loaded during the
+ * hold names the exact route it resolved to rather than its placeholder.
+ * Redirect depth comes from `_navigation` (1 = a navigation, n = its
+ * (n - 1)th redirect hop, -1 = the browser moved: back/forward, hash).
+ */
+function describeNavigation(match, next, from) {
+    const pathname = new URL(next.value, mockBase).pathname;
+    const matches = () => untrack(() => match(pathname));
+    const ref = {
+        kind: "navigation",
+        to: next.value,
+        from,
+        get name() {
+            const m = matches();
+            return m.length ? m[m.length - 1].route.pattern || "/" : pathname;
+        },
+        get params() {
+            const m = matches();
+            return m.length ? mergeParams(m) : undefined;
+        }
+    };
+    if (next._navigation !== undefined && next._navigation > 1)
+        ref.redirect = next._navigation - 1;
+    return ref;
+}
 /** Wraps a history adapter in the integration signal the router core consumes. Must run under a reactive owner. */
-function createIntegration(history) {
+function createIntegration(history, match) {
     let committing = false;
     const wrap = (value) => (typeof value === "string" ? { value } : value);
     const [read, write] = createSignal(wrap(history.get()), {
         equals: (a, b) => a.value === b.value && a.state === b.state && a._navigation === b._navigation,
-        ownedWrite: true
+        ownedWrite: true,
+        name: "location"
     });
     const signal = [
         read,
         (next) => {
             if (sharedConfig.registry && !sharedConfig.done)
                 sharedConfig.done = true;
-            write(next);
-            if (next._navigation && next._navigation > 0) {
-                // Register out of band so a destination error boundary replacing the
-                // Router subtree cannot suppress the winning history commit.
-                runWithOwner(null, () => onSettled(() => {
-                    if (read() !== next)
-                        return;
-                    committing = true;
-                    try {
-                        history.set(next);
-                    }
-                    finally {
-                        committing = false;
-                    }
-                }));
-            }
+            const commit = () => {
+                write(next);
+                if (next._navigation && next._navigation > 0) {
+                    // Register out of band so a destination error boundary replacing the
+                    // Router subtree cannot suppress the winning history commit.
+                    runWithOwner(null, () => onSettled(() => {
+                        if (read() !== next)
+                            return;
+                        committing = true;
+                        try {
+                            history.set(next);
+                        }
+                        finally {
+                            committing = false;
+                        }
+                    }));
+                }
+            };
+            // Every client location write passes here — navigate(), a redirect hop,
+            // the browser's own back/forward — so this is the one place the
+            // navigation is declared. `read()` still holds the committed location
+            // while a navigation is pending, which is the `from` a hop wants too.
+            OBSERVE
+                ? OBSERVE.attribution.withOrigin(describeNavigation(match, next, untrack(read).value), commit)
+                : commit();
         }
     ];
     history.init &&
@@ -100,6 +145,7 @@ export function createRouter(config) {
         return compiled;
     };
     const renderPath = (config.history && config.history.utils && config.history.utils.renderPath) || undefined;
+    const matchPath = (pathname) => getRouteMatches(branches(), config.transformUrl ? config.transformUrl(pathname) : pathname);
     function RouterComponent(props) {
         // One router per app: the session (location, history, delegation, link
         // claims, preloading) has a single owner, and a second instance would
@@ -119,7 +165,7 @@ export function createRouter(config) {
         }
         const integration = isServer
             ? staticIntegration(props.url, config.history && config.history.utils)
-            : createIntegration(history || browserHistory());
+            : createIntegration(history || browserHistory(), matchPath);
         let context;
         const routerState = createRouterContext(integration, branches, () => context, {
             base: basePath,
@@ -149,9 +195,7 @@ export function createRouter(config) {
         routes: config.routes,
         config,
         match(url) {
-            const u = new URL(url, mockBase);
-            const pathname = config.transformUrl ? config.transformUrl(u.pathname) : u.pathname;
-            return getRouteMatches(branches(), pathname).map(({ route, path, params }) => ({
+            return matchPath(new URL(url, mockBase).pathname).map(({ route, path, params }) => ({
                 path: route.originalPath,
                 pattern: route.pattern,
                 match: path,

package/dist/routing.js

@@ -647,7 +647,7 @@ export function createRouterContext(integration, branches, getContext, options =
             read = runWithOwner(routerOwner, () => createMemo(() => {
                 const result = resolveLazySubtree(record);
                 return result instanceof Promise ? result.then(() => undefined) : undefined;
-            }));
+            }, { name: "lazyRoutes" }));
             lazyReaders.set(record, read);
         }
         return read();
@@ -682,7 +682,7 @@ export function createRouterContext(integration, branches, getContext, options =
             }
         }
         return m;
-    });
+    }, { name: "matches" });
     const routingPending = createMemo(() => isPending(() => {
         try {
             matches();
@@ -693,7 +693,7 @@ export function createRouterContext(integration, branches, getContext, options =
         }
         location.search;
         location.hash;
-    }));
+    }), { name: "routingPending" });
     const isRouting = () => routingPending() || isPending(source);
     const transitionIntent = () => {
         if (!isPending(source))

package/package.json

@@ -6,7 +6,7 @@
     "Ryan Turnquist"
   ],
   "license": "MIT",
-  "version": "2.0.0-next.23",
+  "version": "2.0.0-next.24",
   "homepage": "https://github.com/solidjs/solid-router#readme",
   "repository": {
     "type": "git",
@@ -38,21 +38,21 @@
     "@rollup/plugin-node-resolve": "15.3.0",
     "@rollup/plugin-terser": "0.4.4",
     "@solidjs/vite-plugin": "3.0.0-next.35",
-    "@solidjs/web": "^2.0.0-rc.7",
+    "@solidjs/web": "^2.0.0-rc.8",
     "@types/jest": "^29.5.14",
     "@types/node": "^22.10.0",
     "babel-preset-solid": "^2.0.0-rc.2",
     "jsdom": "^25.0.1",
     "prettier": "^3.4.1",
     "rollup": "^4.27.4",
-    "solid-js": "^2.0.0-rc.7",
+    "solid-js": "^2.0.0-rc.8",
     "typescript": "^5.7.2",
     "vite": "^8.2.2",
     "vitest": "^4.1.11"
   },
   "peerDependencies": {
-    "@solidjs/web": "^2.0.0-rc.7",
-    "solid-js": "^2.0.0-rc.7"
+    "@solidjs/web": "^2.0.0-rc.8",
+    "solid-js": "^2.0.0-rc.8"
   },
   "scripts": {
     "build": "rm -rf dist && tsc && rollup -c",