@solidjs/router 0.16.1 → 0.17.0-next.0

package/dist/lifecycle.js

@@ -1,4 +1,4 @@
-import { isServer } from "solid-js/web";
+import { isServer } from "@solidjs/web";
 export function createBeforeLeave() {
     let listeners = new Set();
     function subscribe(listener) {

package/dist/routers/Router.js

@@ -1,4 +1,4 @@
-import { isServer } from "solid-js/web";
+import { isServer } from "@solidjs/web";
 import { createRouter, scrollToHash, bindEvent } from "./createRouter.js";
 import { StaticRouter } from "./StaticRouter.js";
 import { setupNativeEvents } from "../data/events.js";

package/dist/routers/StaticRouter.js

@@ -1,4 +1,4 @@
-import { getRequestEvent } from "solid-js/web";
+import { getRequestEvent } from "@solidjs/web";
 import { createRouterComponent } from "./components.jsx";
 function getPath(url) {
     const u = new URL(url);

package/dist/routers/components.d.ts

@@ -10,8 +10,6 @@ export type BaseRouterProps = {
     singleFlight?: boolean;
     children?: JSX.Element | RouteDefinition | RouteDefinition[];
     transformUrl?: (url: string) => string;
-    /** @deprecated use rootPreload */
-    rootLoad?: RoutePreloadFunc;
 };
 export declare const createRouterComponent: (router: RouterIntegration) => (props: BaseRouterProps) => JSX.Element;
 export type RouteProps<S extends string, T = unknown> = {
@@ -21,7 +19,5 @@ export type RouteProps<S extends string, T = unknown> = {
     matchFilters?: MatchFilters<S>;
     component?: Component<RouteSectionProps<T>>;
     info?: Record<string, any>;
-    /** @deprecated use preload */
-    load?: RoutePreloadFunc<T>;
 };
 export declare const Route: <S extends string, T = unknown>(props: RouteProps<S, T>) => JSX.Element;

package/dist/routers/components.jsx

@@ -1,6 +1,6 @@
 /*@refresh skip*/
-import { children, createMemo, createRoot, getOwner, mergeProps, on, Show, untrack } from "solid-js";
-import { getRequestEvent, isServer } from "solid-js/web";
+import { children, createMemo, createRoot, getOwner, merge, 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) => (props) => {
     const { base } = props;
@@ -13,12 +13,12 @@ export const createRouterComponent = (router) => (props) => {
         transformUrl: props.transformUrl,
     });
     router.create && router.create(routerState);
-    return (<RouterContextObj.Provider value={routerState}>
-      <Root routerState={routerState} root={props.root} preload={props.rootPreload || props.rootLoad}>
+    return (<RouterContextObj value={routerState}>
+      <Root routerState={routerState} root={props.root} preload={props.rootPreload}>
         {(context = getOwner()) && null}
         <Routes routerState={routerState} branches={branches()}/>
       </Root>
-    </RouterContextObj.Provider>);
+    </RouterContextObj>);
 };
 function Root(props) {
     const location = props.routerState.location;
@@ -29,11 +29,13 @@ function Root(props) {
             props.preload({ params, location, intent: getIntent() || "initial" });
             setInPreloadFn(false);
         }));
-    return (<Show when={props.root} keyed fallback={props.children}>
-      {Root => (<Root params={params} location={location} data={data()}>
-          {props.children}
-        </Root>)}
-    </Show>);
+    const RootComp = props.root;
+    if (RootComp) {
+        return (<RootComp params={params} location={location} data={data()}>
+        {props.children}
+      </RootComp>);
+    }
+    return props.children;
 }
 function Routes(props) {
     if (isServer) {
@@ -54,11 +56,14 @@ function Routes(props) {
     }
     const disposers = [];
     let root;
-    const routeStates = createMemo(on(props.routerState.matches, (nextMatches, prevMatches, prev) => {
-        let equal = prevMatches && nextMatches.length === prevMatches.length;
+    let prevMatches;
+    const routeStates = createMemo((prev) => {
+        const nextMatches = props.routerState.matches();
+        const previousMatches = prevMatches;
+        let equal = previousMatches && nextMatches.length === previousMatches.length;
         const next = [];
         for (let i = 0, len = nextMatches.length; i < len; i++) {
-            const prevMatch = prevMatches && prevMatches[i];
+            const prevMatch = previousMatches && previousMatches[i];
             const nextMatch = nextMatches[i];
             if (prev && prevMatch && nextMatch.route.key === prevMatch.route.key) {
                 next[i] = prev[i];
@@ -70,7 +75,7 @@ function Routes(props) {
                 }
                 createRoot(dispose => {
                     disposers[i] = dispose;
-                    next[i] = createRouteContext(props.routerState, next[i - 1] || props.routerState.base, createOutlet(() => routeStates()[i + 1]), () => {
+                    next[i] = createRouteContext(props.routerState, next[i - 1] || props.routerState.base, createOutlet(() => routeStates()?.[i + 1]), () => {
                         const routeMatches = props.routerState.matches();
                         return routeMatches[i] ?? routeMatches[0];
                     });
@@ -79,21 +84,27 @@ function Routes(props) {
         }
         disposers.splice(nextMatches.length).forEach(dispose => dispose());
         if (prev && equal) {
+            prevMatches = nextMatches;
             return prev;
         }
         root = next[0];
+        prevMatches = nextMatches;
         return next;
-    }));
+    }, undefined);
     return createOutlet(() => routeStates() && root)();
 }
 const createOutlet = (child) => {
-    return () => (<Show when={child()} keyed>
-      {child => <RouteContextObj.Provider value={child}>{child.outlet()}</RouteContextObj.Provider>}
-    </Show>);
+    return () => {
+        const c = child();
+        if (c) {
+            return <RouteContextObj value={c}>{c.outlet()}</RouteContextObj>;
+        }
+        return undefined;
+    };
 };
 export const Route = (props) => {
     const childRoutes = children(() => props.children);
-    return mergeProps(props, {
+    return merge(props, {
         get children() {
             return childRoutes();
         }

package/dist/routing.d.ts

@@ -39,8 +39,8 @@ export declare const useNavigate: () => Navigator;
  */
 export declare const useLocation: <S = unknown>() => Location<S>;
 /**
- * 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

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 { flush, runWithOwner } from "solid-js";
+import { createComponent, createContext, createMemo, createSignal, onCleanup, untrack, useContext } from "solid-js";
+import { isServer, getRequestEvent } from "@solidjs/web";
 import { createBeforeLeave } from "./lifecycle.js";
 import { mockBase, createMemoObject, extractSearchParams, invariant, resolvePath, createMatcher, joinPaths, scoreRoute, mergeSearchString, expandOptionals } from "./utils.js";
 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();
+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
@@ -205,12 +213,12 @@ export const useBeforeLeave = (listener) => {
     onCleanup(s);
 };
 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) => {
@@ -309,7 +317,7 @@ function createLocation(path, state, queryWrapper) {
     const search = createMemo(() => url().search, true);
     const hash = createMemo(() => url().hash);
     const key = () => "";
-    const queryFn = on(search, () => extractSearchParams(url()));
+    const queryFn = createMemo(() => extractSearchParams(url()));
     return {
         get pathname() {
             return pathname();
@@ -352,43 +360,32 @@ export function createRouterContext(integration, branches, getContext, options =
     else if (basePath && !source().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 [isRouting, setIsRouting] = createSignal(false, { pureWrite: true });
+    // Navigate override written from event handlers.
+    const [navigateTarget, setNavigateTarget] = createSignal(undefined, {
+        pureWrite: 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);
+    // source() remains canonical for native history changes; navigateTarget()
+    // temporarily overrides it for in-flight programmatic navigation.
+    const reference = createMemo(() => {
+        const nav = navigateTarget();
+        if (nav !== undefined)
+            return nav.value;
+        return source().value;
+    });
+    const state = createMemo(() => {
+        const nav = navigateTarget();
+        if (nav !== undefined)
+            return nav.state;
+        return source().state;
+    });
     const location = createLocation(reference, state, utils.queryWrapper);
     const referrers = [];
-    const submissions = createSignal(isServer ? initFromFlash() : []);
+    const submissions = createSignal(isServer ? initFromFlash() : [], {
+        pureWrite: true
+    });
     const matches = createMemo(() => {
         if (typeof options.transformUrl === "function") {
             return getRouteMatches(branches(), options.transformUrl(location.pathname));
@@ -414,8 +411,6 @@ export function createRouterContext(integration, branches, getContext, options =
             return resolvePath(basePath, to);
         }
     };
-    // Create a native transition, when source updates
-    createRenderEffect(on(source, source => transition("native", source), { defer: true }));
     return {
         base: baseRoute,
         location,
@@ -470,17 +465,35 @@ export function createRouterContext(integration, branches, getContext, options =
                 }
                 else if (beforeLeave.confirm(resolvedTo, options)) {
                     referrers.push({ value: current, replace, scroll, state: state() });
-                    transition("navigate", {
+                    const newTarget = {
                         value: resolvedTo,
                         state: nextState
-                    });
+                    };
+                    if (lastTransitionTarget === undefined) {
+                        setIsRouting(true);
+                        flush();
+                    }
+                    intent = "navigate";
+                    lastTransitionTarget = newTarget;
+                    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) {
@@ -525,7 +538,15 @@ export function createRouterContext(integration, branches, getContext, options =
     }
     function initFromFlash() {
         const e = getRequestEvent();
-        return (e && e.router && e.router.submission ? [e.router.submission] : []);
+        if (!(e && e.router && e.router.submission))
+            return [];
+        return [
+            {
+                ...e.router.submission,
+                clear() { },
+                retry() { }
+            }
+        ];
     }
 }
 export function createRouteContext(router, parent, outlet, match) {

package/dist/types.d.ts

@@ -1,5 +1,5 @@
 import type { Component, JSX, Signal } from "solid-js";
-declare module "solid-js/web" {
+declare module "@solidjs/web" {
     interface RequestEvent {
         response: {
             status?: number;
@@ -12,6 +12,7 @@ declare module "solid-js/web" {
             submission?: {
                 input: any;
                 result: any;
+                error?: any;
                 url: string;
             };
             dataOnly?: boolean | string[];
@@ -78,8 +79,6 @@ export type RouteDefinition<S extends string | string[] = any, T = unknown> = {
     children?: RouteDefinition | RouteDefinition[];
     component?: Component<RouteSectionProps<T>>;
     info?: Record<string, any>;
-    /** @deprecated use preload */
-    load?: RoutePreloadFunc;
 };
 export type MatchFilter = readonly string[] | RegExp | ((s: string) => boolean);
 export type PathParams<P extends string | readonly string[]> = P extends `${infer Head}/${infer Tail}` ? [...PathParams<Head>, ...PathParams<Tail>] : P extends `:${infer S}?` ? [S] : P extends `:${infer S}` ? [S] : P extends `*${infer S}` ? [S] : [];
@@ -166,20 +165,10 @@ export type Submission<T, U> = {
     readonly input: T;
     readonly result?: U;
     readonly error: any;
-    readonly pending: boolean;
     readonly url: string;
     clear: () => void;
     retry: () => void;
 };
-export type SubmissionStub = {
-    readonly input: undefined;
-    readonly result: undefined;
-    readonly error: undefined;
-    readonly pending: undefined;
-    readonly url: undefined;
-    clear: () => void;
-    retry: () => void;
-};
 export interface MaybePreloadableComponent extends Component {
     preload?: () => void;
 }
@@ -194,7 +183,3 @@ export type CustomResponse<T> = Omit<Response, "clone"> & {
     customBody: () => T;
     clone(...args: readonly unknown[]): CustomResponse<T>;
 };
-/** @deprecated */
-export type RouteLoadFunc = RoutePreloadFunc;
-/** @deprecated */
-export type RouteLoadFuncArgs = RoutePreloadFuncArgs;

package/package.json

@@ -6,7 +6,7 @@
     "Ryan Turnquist"
   ],
   "license": "MIT",
-  "version": "0.16.1",
+  "version": "0.17.0-next.0",
   "homepage": "https://github.com/solidjs/solid-router#readme",
   "repository": {
     "type": "git",
@@ -29,6 +29,7 @@
   ],
   "sideEffects": false,
   "devDependencies": {
+    "@solidjs/web": "2.0.0-beta.3",
     "@babel/core": "^7.26.0",
     "@babel/preset-typescript": "^7.26.0",
     "@changesets/cli": "^2.27.10",
@@ -37,18 +38,19 @@
     "@rollup/plugin-terser": "0.4.4",
     "@types/jest": "^29.5.14",
     "@types/node": "^22.10.0",
-    "babel-preset-solid": "^1.9.3",
+    "babel-preset-solid": "2.0.0-beta.3",
     "jsdom": "^25.0.1",
     "prettier": "^3.4.1",
     "rollup": "^4.27.4",
-    "solid-js": "^1.9.3",
+    "solid-js": "2.0.0-beta.3",
     "typescript": "^5.7.2",
     "vite": "^6.0.0",
-    "vite-plugin-solid": "^2.11.0",
+    "vite-plugin-solid": "3.0.0-next.2",
     "vitest": "^2.1.6"
   },
   "peerDependencies": {
-    "solid-js": "^1.8.6"
+    "@solidjs/web": "^2.0.0-beta.3",
+    "solid-js": "^2.0.0-beta.3"
   },
   "scripts": {
     "build": "rm -rf dist && tsc && rollup -c",

package/dist/data/createAsync.d.ts

@@ -1,32 +0,0 @@
-import { type ReconcileOptions } from "solid-js/store";
-/**
- * As `createAsync` and `createAsyncStore` are wrappers for `createResource`,
- * this type allows to support `latest` field for these primitives.
- * It will be removed in the future.
- */
-export type AccessorWithLatest<T> = {
-    (): T;
-    latest: T;
-};
-export declare function createAsync<T>(fn: (prev: T) => Promise<T>, options: {
-    name?: string;
-    initialValue: T;
-    deferStream?: boolean;
-}): AccessorWithLatest<T>;
-export declare function createAsync<T>(fn: (prev: T | undefined) => Promise<T>, options?: {
-    name?: string;
-    initialValue?: T;
-    deferStream?: boolean;
-}): AccessorWithLatest<T | undefined>;
-export declare function createAsyncStore<T>(fn: (prev: T) => Promise<T>, options: {
-    name?: string;
-    initialValue: T;
-    deferStream?: boolean;
-    reconcile?: ReconcileOptions;
-}): AccessorWithLatest<T>;
-export declare function createAsyncStore<T>(fn: (prev: T | undefined) => Promise<T>, options?: {
-    name?: string;
-    initialValue?: T;
-    deferStream?: boolean;
-    reconcile?: ReconcileOptions;
-}): AccessorWithLatest<T | undefined>;

package/dist/data/createAsync.js

@@ -1,96 +0,0 @@
-/**
- * This is mock of the eventual Solid 2.0 primitive. It is not fully featured.
- */
-import { createResource, sharedConfig, untrack, catchError } from "solid-js";
-import { createStore, reconcile, unwrap } from "solid-js/store";
-import { isServer } from "solid-js/web";
-import { setFunctionName } from "../utils.js";
-export function createAsync(fn, options) {
-    let resource;
-    let prev = () => !resource || resource.state === "unresolved" ? undefined : resource.latest;
-    [resource] = createResource(() => subFetch(fn, catchError(() => untrack(prev), () => undefined)), v => v, options);
-    const resultAccessor = (() => resource());
-    if (options?.name)
-        setFunctionName(resultAccessor, options.name);
-    Object.defineProperty(resultAccessor, "latest", {
-        get() {
-            return resource.latest;
-        }
-    });
-    return resultAccessor;
-}
-export function createAsyncStore(fn, options = {}) {
-    let resource;
-    let prev = () => !resource || resource.state === "unresolved"
-        ? undefined
-        : unwrap(resource.latest);
-    [resource] = createResource(() => subFetch(fn, catchError(() => untrack(prev), () => undefined)), v => v, {
-        ...options,
-        storage: (init) => createDeepSignal(init, options.reconcile)
-    });
-    const resultAccessor = (() => resource());
-    Object.defineProperty(resultAccessor, "latest", {
-        get() {
-            return resource.latest;
-        }
-    });
-    return resultAccessor;
-}
-function createDeepSignal(value, options) {
-    const [store, setStore] = createStore({
-        value: structuredClone(value)
-    });
-    return [
-        () => store.value,
-        (v) => {
-            typeof v === "function" && (v = v());
-            setStore("value", reconcile(structuredClone(v), options));
-            return store.value;
-        }
-    ];
-}
-// mock promise while hydrating to prevent fetching
-class MockPromise {
-    static all() {
-        return new MockPromise();
-    }
-    static allSettled() {
-        return new MockPromise();
-    }
-    static any() {
-        return new MockPromise();
-    }
-    static race() {
-        return new MockPromise();
-    }
-    static reject() {
-        return new MockPromise();
-    }
-    static resolve() {
-        return new MockPromise();
-    }
-    catch() {
-        return new MockPromise();
-    }
-    then() {
-        return new MockPromise();
-    }
-    finally() {
-        return new MockPromise();
-    }
-}
-function subFetch(fn, prev) {
-    if (isServer || !sharedConfig.context)
-        return fn(prev);
-    const ogFetch = fetch;
-    const ogPromise = Promise;
-    try {
-        window.fetch = () => new MockPromise();
-        Promise = MockPromise;
-        return fn(prev);
-    }
-    finally {
-        window.fetch = ogFetch;
-        Promise = ogPromise;
-    }
-}