@solidjs/router 1.0.0 → 2.0.0-next.13

package/dist/routing.js

@@ -1,15 +1,23 @@
-import { runWithOwner, batch } from "solid-js";
-import { createComponent, createContext, createMemo, createRenderEffect, createSignal, on, onCleanup, untrack, useContext, startTransition, resetErrorBoundaries } from "solid-js";
-import { isServer, getRequestEvent } from "solid-js/web";
-import { createBeforeLeave } from "./lifecycle.js";
-import { mockBase, createMemoObject, extractSearchParams, invariant, resolvePath, createMatcher, joinPaths, scoreRoute, mergeSearchString, expandOptionals } from "./utils.js";
+import { flush, runWithOwner } from "solid-js";
+import { createComponent, createContext, createMemo, createSignal, isPending, NotReadyError, untrack, useContext } from "solid-js";
+import { isServer, getRequestEvent } from "@solidjs/web";
+import { mockBase, comparablePath, createMemoObject, extractSearchParams, invariant, resolvePath, createMatcher, joinPaths, scoreRoute, mergeSearchString, expandOptionals } from "./utils.js";
+import { clearFlashCookie, hasFlashCookie } from "@solidjs/web/server-functions";
 const MAX_REDIRECTS = 100;
 /** Consider this API opaque and internal. It is likely to change in the future. */
 export const RouterContextObj = createContext();
 export const RouteContextObj = createContext();
+export function useOptionalContext(context) {
+    try {
+        return useContext(context);
+    }
+    catch {
+        return undefined;
+    }
+}
 export const useRouter = () => invariant(useContext(RouterContextObj), "<A> and 'use' router primitives can be only used inside a Route.");
 let TempRoute;
-export const useRoute = () => TempRoute || useContext(RouteContextObj) || useRouter().base;
+export const useRoute = () => TempRoute || useOptionalContext(RouteContextObj) || useRouter().base;
 export const useResolvedPath = (path) => {
     const route = useRoute();
     return createMemo(() => route.resolvePath(path()));
@@ -53,8 +61,8 @@ export const useNavigate = () => useRouter().navigatorFactory();
  */
 export const useLocation = () => useRouter().location;
 /**
- * Retrieves signal that indicates whether the route is currently in a *Transition*.
- * Useful for showing stale/pending state when the route resolution is *Suspended* during concurrent rendering.
+ * Retrieves a signal that indicates whether the router is currently processing a navigation.
+ * Useful for showing pending navigation state while the next route and its data settle.
  *
  * @example
  * ```js
@@ -68,35 +76,30 @@ export const useLocation = () => useRouter().location;
  * ```
  */
 export const useIsRouting = () => useRouter().isRouting;
-/**
- * usePreloadRoute returns a function that can be used to preload a route manual.
- * This is what happens automatically with link hovering and similar focus based behavior, but it is available here as an API.
- *
- * @example
- * ```js
- * const preload = usePreloadRoute();
- *
- * preload(`/users/settings`, { preloadData: true });
- * ```
- */
-export const usePreloadRoute = () => {
-    const pre = useRouter().preloadRoute;
-    return (url, options = {}) => pre(url instanceof URL ? url : new URL(url, mockBase), options.preloadData);
-};
 /**
  * `useMatch` takes an accessor that returns the path and creates a `Memo` that returns match information if the current path matches the provided path.
  * Useful for determining if a given path matches the current route.
  *
+ * Accepts a pattern string — the match's `params` are typed from it — or a
+ * typed path node (a concrete URL, so no params to speak of):
+ *
  * @example
  * ```js
  * const match = useMatch(() => props.href);
  *
  * return <div classList={{ active: Boolean(match()) }} />;
+ *
+ * const section = useMatch(() => "/docs/:page");
+ * section()?.params.page; // string
+ *
+ * const here = useMatch(() => paths.users(2));
  * ```
  */
 export const useMatch = (path, matchFilters) => {
     const location = useLocation();
-    const matchers = createMemo(() => expandOptionals(path()).map(path => createMatcher(path, undefined, matchFilters)));
+    const matchers = createMemo(() => 
+    // `String()` folds typed path nodes to their URL
+    expandOptionals(String(path())).map(path => createMatcher(path, undefined, matchFilters)));
     return createMemo(() => {
         for (const matcher of matchers()) {
             const match = matcher(location.pathname);
@@ -106,61 +109,44 @@ export const useMatch = (path, matchFilters) => {
     });
 };
 /**
- * `useCurrentMatches` returns all the matches for the current matched route.
- * Useful for getting all the route information.
+ * `useRouteMatches` returns an accessor of the router's resolved matches for
+ * the current location — the chain of route definitions producing the current
+ * render, outermost first. Useful for reading `info` metadata off the matched
+ * chain. Unlike `useMatch`, which tests a path pattern you supply against the
+ * location, this reflects the route tree itself.
  *
  * @example
  * ```js
- * const matches = useCurrentMatches();
+ * const matches = useRouteMatches();
  *
- * const breadcrumbs = createMemo(() => matches().map(m => m.route.info.breadcrumb))
+ * const breadcrumbs = createMemo(() => matches().map(m => m.route.info.breadcrumb));
  * ```
  */
-export const useCurrentMatches = () => {
+export const useRouteMatches = () => {
     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.
+ * `usePreloadRoute` returns a function for warming a route by hand — the same
+ * work link hover/focus intent triggers automatically: the matched routes'
+ * lazy components load, and with `preloadData` their `preload` functions run.
  *
  * @example
  * ```js
- * const params = useParams();
- *
- * // fetch user based on the id path parameter
- * const [user] = createResource(() => params.id, fetchUser);
- * ```
- */
-export const useParams = () => useRouter().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.
- * **Note** that values will be strings and property names will retain their casing.
- *
- * The setter method accepts an object whose entries will be merged into the current query string.
- * Values `''`, `undefined` and `null` will remove the key from the resulting query string.
- * Updates will behave just like a navigation and the setter accepts the same optional second parameter as `navigate` and auto-scrolling is disabled by default.
- *
- * @examples
- * ```js
- * const [searchParams, setSearchParams] = useSearchParams();
+ * const preload = usePreloadRoute();
  *
- * return (
- *   <div>
- *     <span>Page: {searchParams.page}</span>
- *     <button
- *       onClick={() =>
- *         setSearchParams({ page: (parseInt(searchParams.page) || 0) + 1 })
- *       }
- *     >
- *       Next Page
- *     </button>
- *   </div>
- * );
+ * preload(paths.users(2).settings, { preloadData: true });
  * ```
  */
-export const useSearchParams = () => {
+export const usePreloadRoute = () => {
+    const pre = useRouter().preloadRoute;
+    return (url, options = {}) => pre(url instanceof URL ? url : new URL(String(url), mockBase), options.preloadData);
+};
+export function useParams(_path) {
+    return useRoute().params;
+}
+export function useSearchParams(path) {
     const router = useRouter();
     const location = router.location;
     const navigate = useNavigate();
@@ -180,55 +166,172 @@ export const useSearchParams = () => {
             ...options
         });
     };
-    return [location.query, setSearchParams];
-};
+    // Passing a paths node opts into schema parsing. The node itself is a
+    // type-level reference; the schemas that run come from the currently
+    // matched routes (root→leaf), whose outputs merge over the raw query.
+    // A schema that reports issues is skipped, leaving raw values — search
+    // strings are user input, so defaults belong in the schema itself.
+    const query = path
+        ? createMemoObject(createMemo(() => {
+            const raw = { ...location.query };
+            let result;
+            for (const match of router.matches()) {
+                const schema = match.route.key.search;
+                if (!schema)
+                    continue;
+                const outcome = schema["~standard"].validate(raw);
+                if (outcome instanceof Promise)
+                    throw new Error("Async Standard Schema validation is not supported for search params");
+                if (!outcome.issues)
+                    result = Object.assign(result || { ...raw }, outcome.value);
+            }
+            return result || raw;
+        }))
+        : location.query;
+    return [query, setSearchParams];
+}
 /**
- * useBeforeLeave takes a function that will be called prior to leaving a route.
- * The function will be called with:
- *
- * - from (*Location*): current location (before change).
- * - to (*string | number*): path passed to `navigate`.
- * - options (*NavigateOptions*): options passed to navigate.
- * - preventDefault (*function*): call to block the route change.
- * - defaultPrevented (*readonly boolean*): `true` if any previously called leave handlers called `preventDefault`.
- * - retry (*function*, force?: boolean ): call to retry the same navigation, perhaps after confirming with the user. Pass `true` to skip running the leave handlers again (i.e. force navigate without confirming).
+ * Reactive link state for custom link components — the programmatic
+ * counterpart of the attribute vocabulary plain anchors receive
+ * (`aria-current`, `data-active`, `data-pending`).
  *
  * @example
- * ```js
- * useBeforeLeave((e: BeforeLeaveEventArgs) => {
- *   if (form.isDirty && !e.defaultPrevented) {
- *     // preventDefault to block immediately and prompt user async
- *     e.preventDefault();
- *     setTimeout(() => {
- *       if (window.confirm("Discard unsaved changes - are you sure?")) {
- *         // user wants to proceed anyway so retry with force=true
- *         e.retry(true);
- *       }
- *     }, 100);
- *   }
- * });
+ * ```tsx
+ * function TabLink(props: { href: string; children: JSX.Element }) {
+ *   const link = useLinkState(() => props.href);
+ *   return (
+ *     <a href={props.href} class="tab" data-selected={link.active() || undefined}>
+ *       {props.children}
+ *     </a>
+ *   );
+ * }
  * ```
  */
-export const useBeforeLeave = (listener) => {
-    const s = useRouter().beforeLeave.subscribe({
-        listener,
-        location: useLocation(),
-        navigate: useNavigate()
+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_);
     });
-    onCleanup(s);
+    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))));
+    return {
+        active: () => state()[0],
+        current: () => state()[1],
+        // 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
+        pending: createMemo(() => {
+            state(); // location dependency: mid-flight target swaps recompute
+            return (router.isRouting() &&
+                !!router.pendingTarget &&
+                matches(decodeURI(comparablePath(router.pendingTarget.value)))[0]);
+        })
+    };
 };
 // 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));
+// ---------------------------------------------------------------------------
+// Lazy route subtrees
+// ---------------------------------------------------------------------------
+//
+// A `children` thunk (`() => import("./feature/routes")`) is a *boundary*:
+// until it resolves, the compiled tree carries a param-less catch-all
+// placeholder branch under the boundary's pattern (splat-scored, so static
+// siblings still win). Resolution is append-only and cached per thunk, then a
+// module-level version signal bumps and every `branches()` consumer
+// recompiles — matches, params, and route states all react. The placeholder's
+// component reads a memo of the resolution promise, which keeps the enclosing
+// navigation transition pending exactly like a `lazy()` route component; its
+// `preload` *is* the resolver, so hover-intent preloading kicks the table
+// load through the existing component-preload path.
+const lazyBoundaries = new WeakMap();
+// Module scope: boundary resolution is global, deterministic state (same
+// thunk -> same routes), shared by every factory instance and the server's
+// flight collector.
+const [lazyTreeVersion, setLazyTreeVersion] = createSignal(0);
+/** Reactive read of the lazy-subtree version — recompile compiled branches when it changes. */
+export function trackLazySubtrees() {
+    return lazyTreeVersion();
+}
+/** Non-reactive read, for cache-busting outside the reactive graph (server collectors). */
+export function peekLazySubtrees() {
+    return untrack(lazyTreeVersion);
+}
+function getLazyBoundary(thunk) {
+    let record = lazyBoundaries.get(thunk);
+    if (!record)
+        lazyBoundaries.set(thunk, (record = { thunk }));
+    return record;
+}
+/**
+ * Kicks (or joins) a boundary's resolution. Returns the resolved routes
+ * synchronously once available, the in-flight promise otherwise. Commit is
+ * always async — even for thunks returning arrays — so the version bump
+ * never writes a signal from inside a render computation.
+ */
+export function resolveLazySubtree(record) {
+    if (record.resolved)
+        return record.resolved;
+    return (record.promise ||= Promise.resolve(record.thunk()).then(m => {
+        const routes = Array.isArray(m)
+            ? m
+            : m
+                .default ||
+                m.routes ||
+                [];
+        record.resolved = routes;
+        setLazyTreeVersion(v => v + 1);
+        return record.resolved;
+    }));
+}
+/**
+ * The unresolved boundaries in a match chain. Rendering gates on these (the
+ * route-states memo suspends until they land — see routers/components.tsx)
+ * and the server's flight collector awaits them before its preload pass.
+ */
+export function unresolvedLazyMatches(matches) {
+    const pending = [];
+    for (const match of matches)
+        if (match.route.lazy && !match.route.lazy.resolved)
+            pending.push(match.route.lazy);
+    return pending;
+}
+function createLazyPlaceholder(pattern, record) {
+    // The placeholder never renders and needs no component — `matches` parks
+    // on unresolved boundaries before route contexts are created (kicking the
+    // resolver as it does), preloadRoute kicks it directly, and the version
+    // bump swaps in the real routes. `path + "/*"` with no splat name matches
+    // the boundary itself and everything beneath it without recording a param
+    // (createMatcher skips empty splat names).
+    const placeholderPattern = pattern + "/*";
+    return {
+        key: record,
+        originalPath: "*",
+        pattern: placeholderPattern,
+        matcher: createMatcher(placeholderPattern),
+        lazy: record
+    };
+}
 export function createRoutes(routeDef, base = "") {
-    const { component, preload, load, children, info } = routeDef;
+    const { component, preload, children, info } = routeDef;
     const isLeaf = !children || (Array.isArray(children) && !children.length);
     const shared = {
         key: routeDef,
         component,
-        preload: preload || load,
+        preload,
         info
     };
     return asArray(routeDef.path).reduce((acc, originalPath) => {
@@ -285,9 +388,24 @@ export function createBranches(routeDef, base = "", stack = [], branches = []) {
             const routes = createRoutes(def, base);
             for (const route of routes) {
                 stack.push(route);
-                const isEmptyArray = Array.isArray(def.children) && def.children.length === 0;
-                if (def.children && !isEmptyArray) {
-                    createBranches(def.children, route.pattern, stack, branches);
+                let children = def.children;
+                if (typeof children === "function") {
+                    const record = getLazyBoundary(children);
+                    if (record.resolved) {
+                        children = record.resolved;
+                    }
+                    else {
+                        // unresolved boundary: a catch-all placeholder holds its ground
+                        stack.push(createLazyPlaceholder(route.pattern, record));
+                        branches.push(createBranch([...stack], branches.length));
+                        stack.pop();
+                        stack.pop();
+                        continue;
+                    }
+                }
+                const isEmptyArray = Array.isArray(children) && children.length === 0;
+                if (children && !isEmptyArray) {
+                    createBranches(children, route.pattern, stack, branches);
                 }
                 else {
                     const branch = createBranch([...stack], branches.length);
@@ -309,9 +427,16 @@ export function getRouteMatches(branches, location) {
     }
     return [];
 }
+export 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 => {
+    const url = createMemo((prev = origin) => {
         const path_ = path();
         try {
             // anchor rooted paths against the origin explicitly - a path with
@@ -322,14 +447,14 @@ function createLocation(path, state, queryWrapper) {
             console.error(`Invalid path ${path_}`);
             return prev;
         }
-    }, origin, {
+    }, {
         equals: (a, b) => a.href === b.href
     });
     const pathname = createMemo(() => url().pathname);
-    const search = createMemo(() => url().search, true);
+    const search = createMemo(() => url().search);
     const hash = createMemo(() => url().hash);
     const key = () => "";
-    const queryFn = on(search, () => extractSearchParams(url()));
+    const queryFn = createMemo(() => extractSearchParams(url()));
     return {
         get pathname() {
             return pathname();
@@ -349,6 +474,49 @@ function createLocation(path, state, queryWrapper) {
         query: queryWrapper ? queryWrapper(queryFn) : createMemoObject(queryFn)
     };
 }
+/**
+ * Rendezvous between the router and the data layer's single-flight consumer.
+ * The Router registers itself at mount (unless `singleFlight={false}`); the
+ * action side provides the consumer factory when the first action is created
+ * (see data/action.ts). Whichever side arrives first waits for the other, so
+ * an action module loaded lazily (a code-split route) still attaches to the
+ * already-mounted router — and a router-only app, where no action ever
+ * loads, never subscribes to the transport, so the server is never asked to
+ * collect.
+ */
+let flightConsumerFactory;
+const flightRouters = new Map();
+export function registerFlightRouter(router) {
+    flightRouters.set(router, flightConsumerFactory && flightConsumerFactory(router));
+    return () => {
+        const unsubscribe = flightRouters.get(router);
+        flightRouters.delete(router);
+        unsubscribe && unsubscribe();
+    };
+}
+export function provideFlightConsumer(factory) {
+    if (flightConsumerFactory)
+        return;
+    flightConsumerFactory = factory;
+    for (const [router, unsubscribe] of flightRouters) {
+        if (!unsubscribe)
+            flightRouters.set(router, factory(router));
+    }
+}
+/**
+ * The flash-cookie codec, provided by the action side (data/action.ts) so
+ * the router core never carries it: the core consumes the cookie eagerly
+ * per request (detection + one-shot clear via the runtime's isomorphic half)
+ * but defers decoding to this slot, read when the submissions signal
+ * initializes. Actions are created at module scope, so on the server the
+ * decoder is always installed before useSubmission can read — and a
+ * router-only app, where it never installs, has no actions that could have
+ * produced a flash cookie in the first place.
+ */
+let flashDecoder;
+export function provideFlashDecoder(decoder) {
+    flashDecoder || (flashDecoder = decoder);
+}
 let intent;
 export function getIntent() {
     return intent;
@@ -364,86 +532,102 @@ export function createRouterContext(integration, branches, getContext, options =
     const { signal: [source, setSource], utils = {} } = integration;
     const parsePath = utils.parsePath || (p => p);
     const renderPath = utils.renderPath || (p => p);
-    const beforeLeave = utils.beforeLeave || createBeforeLeave();
+    // An empty slot until `useBeforeLeave` installs the guard on first use.
+    const beforeLeave = utils.beforeLeave || {};
     const basePath = resolvePath("", options.base || "");
+    const initialSource = untrack(source);
     if (basePath === undefined) {
         throw new Error(`${basePath} is not a valid base path`);
     }
-    else if (basePath && !source().value) {
+    else if (basePath && !initialSource.value) {
         setSource({ value: basePath, replace: true, scroll: false });
     }
-    const [isRouting, setIsRouting] = createSignal(false);
-    // Keep track of last target, so that last call to transition wins
+    const [isNavigating, setIsRouting] = createSignal(false, { ownedWrite: true });
+    // Navigate override written from event handlers.
+    const [navigateTarget, setNavigateTarget] = createSignal(undefined, {
+        ownedWrite: true
+    });
+    // Keep track of last target, so that last call to navigate wins
     let lastTransitionTarget;
-    // Transition the location to a new value
-    const transition = (newIntent, newTarget) => {
-        if (newTarget.value === reference() && newTarget.state === state())
-            return;
-        if (lastTransitionTarget === undefined)
-            setIsRouting(true);
-        intent = newIntent;
-        lastTransitionTarget = newTarget;
-        startTransition(() => {
-            if (lastTransitionTarget !== newTarget)
-                return;
-            setReference(lastTransitionTarget.value);
-            setState(lastTransitionTarget.state);
-            resetErrorBoundaries();
-            if (!isServer)
-                submissions[1](subs => subs.filter(s => s.pending));
-        }).finally(() => {
-            if (lastTransitionTarget !== newTarget)
-                return;
-            // Batch, in order for isRouting and final source update to happen together
-            batch(() => {
-                intent = undefined;
-                if (newIntent === "navigate")
-                    navigateEnd(lastTransitionTarget);
-                setIsRouting(false);
-                lastTransitionTarget = undefined;
-            });
-        });
-    };
-    const [reference, setReference] = createSignal(source().value);
-    const [state, setState] = createSignal(source().state);
-    const location = createLocation(reference, state, utils.queryWrapper);
+    // source() remains canonical for native history changes; navigateTarget()
+    // temporarily overrides it for in-flight programmatic navigation.
+    const effective = createMemo(() => navigateTarget() ?? source());
+    const location = createLocation(() => effective().value, () => effective().state, utils.queryWrapper);
     const referrers = [];
-    const submissions = createSignal(isServer ? initFromFlash() : []);
-    const matches = createMemo(() => {
-        if (typeof options.transformUrl === "function") {
-            return getRouteMatches(branches(), options.transformUrl(location.pathname));
+    // The flash cookie is consumed eagerly: its one-shot clear (Set-Cookie)
+    // must be appended before streaming flushes the response headers, and an
+    // unread outcome must not haunt a later request's render. Only detection
+    // and clearing happen here (the runtime's isomorphic half); the raw header
+    // is stashed and decoding waits for the action-provided codec, read when
+    // the lazily allocated submissions signal below first initializes.
+    let flashCookieHeader;
+    if (isServer) {
+        const e = getRequestEvent();
+        if (e && !(e.router && e.router.submission)) {
+            const cookieHeader = e.request.headers.get("cookie");
+            if (hasFlashCookie(cookieHeader)) {
+                flashCookieHeader = cookieHeader;
+                // one-shot: clear it even when unreadable so it can't haunt later renders
+                if (e.response && e.response.headers)
+                    e.response.headers.append("Set-Cookie", clearFlashCookie());
+            }
         }
-        return getRouteMatches(branches(), location.pathname);
+    }
+    let submissions;
+    const matches = createMemo(() => {
+        const pathname = typeof options.transformUrl === "function"
+            ? options.transformUrl(location.pathname)
+            : location.pathname;
+        const m = getRouteMatches(branches(), pathname);
+        // An unresolved lazy subtree parks readers on not-ready semantics — the
+        // navigation transition (or the SSR stream) holds until the table lands.
+        // NotReadyError (not a returned promise) because a match chain is full
+        // of component functions the hydration serializer must never see. The
+        // recompute comes from the version-signal dependency on the client and
+        // from the carried promise's retry on the server; a boundary nested
+        // inside a boundary just parks the recomputed chain again.
+        const pending = unresolvedLazyMatches(m);
+        if (pending.length)
+            throw new NotReadyError(Promise.all(pending.map(resolveLazySubtree)));
+        return m;
     });
-    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);
+    // Every write is a transition in Solid 2, so a native history pop forks the
+    // source signal exactly like programmatic navigation does. isRouting is
+    // therefore derived: the manual flag covers navigateFromRoute's explicit
+    // window, and isPending over the location/matches read reports any
+    // in-flight fork — including popstate traversals and the lazy-subtree
+    // resolution matches() parks on.
+    const isRouting = createMemo(() => isNavigating() || isPending(() => (matches(), location.search, location.hash)));
+    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) {
             return resolvePath(basePath, to);
         }
     };
-    // Create a native transition, when source updates
-    createRenderEffect(on(source, source => transition("native", source), { defer: true }));
     return {
         base: baseRoute,
         location,
         params,
+        wrapParams,
         isRouting,
         get pendingTarget() {
             return lastTransitionTarget;
         },
+        leaving(route) {
+            const t = lastTransitionTarget;
+            if (!t || !route.retained)
+                return false;
+            const pathname = t.value.split(/[?#]/, 1)[0];
+            return !route.retained(options.transformUrl ? options.transformUrl(pathname) : pathname);
+        },
         renderPath,
         parsePath,
         navigatorFactory,
@@ -451,7 +635,9 @@ export function createRouterContext(integration, branches, getContext, options =
         beforeLeave,
         preloadRoute,
         singleFlight: options.singleFlight === undefined ? true : options.singleFlight,
-        submissions
+        get submissions() {
+            return (submissions ||= createSignal(isServer ? initSubmissions() : [], { ownedWrite: true }));
+        }
     };
     function navigateFromRoute(route, to, options) {
         // Untrack in case someone navigates in an effect - don't want to track `reference` or route paths
@@ -468,42 +654,77 @@ export function createRouterContext(integration, branches, getContext, options =
                 }
                 return;
             }
-            const queryOnly = !to || to[0] === "?";
+            // typed path proxy nodes coerce to their href
+            if (typeof to !== "string")
+                to = to.toString();
             const { replace, resolve, scroll, state: nextState } = {
                 replace: false,
-                resolve: !queryOnly,
+                resolve: true,
                 scroll: true,
                 ...options
             };
-            const resolvedTo = resolve
-                ? route.resolvePath(to)
-                : resolvePath((queryOnly && location.pathname) || "", to);
+            // A string means what the same string means as an href. Leading "/"
+            // stays base-prefixed; anything else resolves URL-style against the
+            // current location — `new URL` collapses `..` and handles `?`/`#`-only
+            // references natively (#502). A cross-origin result (scheme or
+            // protocol-relative input) falls through as unroutable.
+            let resolvedTo;
+            if (!resolve)
+                resolvedTo = resolvePath(((!to || to[0] === "?") && location.pathname) || "", to);
+            else if (to[0] === "/")
+                resolvedTo = route.resolvePath(to);
+            else {
+                const url = new URL(to, mockBase + location.pathname + location.search + location.hash);
+                resolvedTo =
+                    url.origin === mockBase ? url.pathname + url.search + url.hash : undefined;
+            }
             if (resolvedTo === undefined) {
                 throw new Error(`Path '${to}' is not a routable path`);
             }
             else if (referrers.length >= MAX_REDIRECTS) {
                 throw new Error("Too many redirects");
             }
-            const current = reference();
-            if (resolvedTo !== current || nextState !== state()) {
+            const current = effective();
+            if (resolvedTo !== current.value || nextState !== current.state) {
                 if (isServer) {
                     const e = getRequestEvent();
                     e && (e.response = { status: 302, headers: new Headers({ Location: resolvedTo }) });
                     setSource({ value: resolvedTo, replace, scroll, state: nextState });
                 }
-                else if (beforeLeave.confirm(resolvedTo, options)) {
-                    referrers.push({ value: current, replace, scroll, state: state() });
-                    transition("navigate", {
+                else if (!beforeLeave.current || beforeLeave.current.confirm(resolvedTo, options)) {
+                    referrers.push({ value: current.value, replace, scroll, state: current.state });
+                    const newTarget = {
                         value: resolvedTo,
                         state: nextState
-                    });
+                    };
+                    const firstNavigation = lastTransitionTarget === undefined;
+                    intent = "navigate";
+                    // assign the target before flushing so effects that run for the
+                    // isRouting flip (e.g. pending link state) can read it
+                    lastTransitionTarget = newTarget;
+                    if (firstNavigation) {
+                        setIsRouting(true);
+                        flush();
+                    }
+                    if (lastTransitionTarget === newTarget) {
+                        setNavigateTarget({ ...lastTransitionTarget });
+                        queueMicrotask(() => {
+                            if (lastTransitionTarget !== newTarget)
+                                return;
+                            intent = undefined;
+                            navigateEnd(lastTransitionTarget);
+                            setNavigateTarget(undefined);
+                            setIsRouting(false);
+                            lastTransitionTarget = undefined;
+                        });
+                    }
                 }
             }
         });
     }
     function navigatorFactory(route) {
         // Workaround for vite issue (https://github.com/vitejs/vite/issues/3803)
-        route = route || useContext(RouteContextObj) || baseRoute;
+        route = route || useOptionalContext(RouteContextObj) || baseRoute;
         return (to, options) => navigateFromRoute(route, to, options);
     }
     function navigateEnd(next) {
@@ -519,6 +740,12 @@ export function createRouterContext(integration, branches, getContext, options =
     }
     function preloadRoute(url, preloadData) {
         const matches = getRouteMatches(branches(), url.pathname);
+        // An unresolved lazy subtree in the chain: the placeholder's
+        // component.preload (below) kicks the table load; once it lands,
+        // preload again so the real inner routes warm too.
+        const boundary = matches.find(m => m.route.lazy && !m.route.lazy.resolved);
+        boundary &&
+            resolveLazySubtree(boundary.route.lazy).then(() => preloadRoute(url, preloadData));
         const prevIntent = intent;
         intent = "preload";
         for (let match in matches) {
@@ -546,15 +773,37 @@ export function createRouterContext(integration, branches, getContext, options =
         }
         intent = prevIntent;
     }
-    function initFromFlash() {
+    // Seeds the initial submission from a no-JS form post: the server
+    // function runtime redirected back with the outcome in a one-shot flash
+    // cookie (its default no-JS convention), consumed eagerly above and
+    // decoded here — so the post-redirect SSR renders useSubmission() state
+    // exactly as a scripted submission would. An explicitly pre-seeded
+    // `event.router.submission` (framework integrations) takes precedence.
+    function initSubmissions() {
         const e = getRequestEvent();
-        return (e && e.router && e.router.submission ? [e.router.submission] : []);
+        const submission = (e && e.router && e.router.submission) ||
+            (flashDecoder && flashCookieHeader !== undefined
+                ? flashDecoder(flashCookieHeader)
+                : undefined);
+        if (!submission)
+            return [];
+        return [
+            {
+                ...submission,
+                clear() { },
+                retry() { }
+            }
+        ];
     }
 }
-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();
@@ -564,7 +813,15 @@ export function createRouteContext(router, parent, outlet, match) {
     const route = {
         parent,
         pattern,
+        params,
         path,
+        retained(target) {
+            const m = match();
+            const p = m.route.matcher(target);
+            // params derive from the matched path, so equal paths mean this
+            // section instance (layouts match prefixes via partial matchers)
+            return !!p && p.path === m.path;
+        },
         outlet: () => component
             ? createComponent(component, {
                 params,