@solidjs/router 0.13.5 → 0.13.6

package/README.md

@@ -372,8 +372,10 @@ You can nest indefinitely - just remember that only leaf nodes will become their
       </div>
     }
   >
-    <Route path="layer2"
-      component={() => <div>Innermost layer</div>}>           </Route>
+    <Route
+      path="layer2"
+      component={() => <div>Innermost layer</div>}
+    />
   </Route>
 </Route>
 ```
@@ -871,6 +873,16 @@ const matches = useCurrentMatches();
 const breadcrumbs = createMemo(() => matches().map(m => m.route.info.breadcrumb))
 ```
 
+### usePreloadRoute
+
+`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.
+
+```js
+const preload = usePreloadRoute();
+
+preload(`/users/settings`, { preloadData: true });
+```
+
 ### useBeforeLeave
 
 `useBeforeLeave` takes a function that will be called prior to leaving a route. The function will be called with:

package/dist/data/action.d.ts

@@ -1,5 +1,5 @@
 import { JSX } from "solid-js";
-import { Submission } from "../types.js";
+import type { Submission, SubmissionStub } from "../types.js";
 export type Action<T extends Array<any>, U> = (T extends [FormData] | [] ? JSX.SerializableAttributeValue : unknown) & ((...vars: T) => Promise<U>) & {
     url: string;
     with<A extends any[], B extends any[]>(this: (this: any, ...args: [...A, ...B]) => Promise<U>, ...args: A): Action<B, U>;
@@ -8,6 +8,6 @@ export declare const actions: Map<string, Action<any, any>>;
 export declare function useSubmissions<T extends Array<any>, U>(fn: Action<T, U>, filter?: (arg: T) => boolean): Submission<T, U>[] & {
     pending: boolean;
 };
-export declare function useSubmission<T extends Array<any>, U>(fn: Action<T, U>, filter?: (arg: T) => boolean): Submission<T, U>;
+export declare function useSubmission<T extends Array<any>, U>(fn: Action<T, U>, filter?: (arg: T) => boolean): Submission<T, U> | SubmissionStub;
 export declare function useAction<T extends Array<any>, U>(action: Action<T, U>): (...args: Parameters<Action<T, U>>) => Promise<U>;
 export declare function action<T extends Array<any>, U = void>(fn: (...args: T) => Promise<U>, name?: string): Action<T, U>;

package/dist/data/action.js

@@ -21,6 +21,8 @@ export function useSubmission(fn, filter) {
     const submissions = useSubmissions(fn, filter);
     return new Proxy({}, {
         get(_, property) {
+            if (submissions.length === 0 && property === "clear" || property === "retry")
+                return (() => { });
             return submissions[submissions.length - 1]?.[property];
         }
     });

package/dist/data/cache.js

@@ -87,15 +87,14 @@ export function cache(fn, name) {
                 cached[0] = now;
             }
             let res = cached[1];
-            if (!inLoadFn) {
+            if (intent !== "preload") {
                 res =
                     "then" in cached[1]
                         ? cached[1].then(handleResponse(false), handleResponse(true))
                         : handleResponse(false)(cached[1]);
                 !isServer && intent === "navigate" && startTransition(() => cached[3][1](cached[0])); // update version
             }
-            else
-                "then" in res && res.catch(() => { });
+            inLoadFn && "then" in res && res.catch(() => { });
             return res;
         }
         let res = !isServer && sharedConfig.context && sharedConfig.has(key)
@@ -120,14 +119,13 @@ export function cache(fn, name) {
             if (e && e.router.dataOnly)
                 return (e.router.data[key] = res);
         }
-        if (!inLoadFn) {
+        if (intent !== "preload") {
             res =
                 "then" in res
                     ? res.then(handleResponse(false), handleResponse(true))
                     : handleResponse(false)(res);
         }
-        else
-            "then" in res && res.catch(() => { });
+        inLoadFn && "then" in res && res.catch(() => { });
         // serialize on server
         if (isServer &&
             sharedConfig.context &&
@@ -140,19 +138,19 @@ export function cache(fn, name) {
         function handleResponse(error) {
             return async (v) => {
                 if (v instanceof Response) {
-                    if (v.headers.has("Location")) {
-                        if (navigate) {
+                    const url = v.headers.get(LocationHeader);
+                    if (url !== null) {
+                        // client + server relative redirect
+                        if (navigate && url.startsWith("/"))
                             startTransition(() => {
-                                let url = v.headers.get(LocationHeader);
-                                if (url && url.startsWith("/")) {
-                                    navigate(url, {
-                                        replace: true
-                                    });
-                                }
-                                else if (!isServer && url) {
-                                    window.location.href = url;
-                                }
+                                navigate(url, { replace: true });
                             });
+                        else if (!isServer)
+                            window.location.href = url;
+                        else if (isServer) {
+                            const e = getRequestEvent();
+                            if (e)
+                                e.response = { status: 302, headers: new Headers({ Location: url }) };
                         }
                         return;
                     }

package/dist/data/events.js

@@ -61,7 +61,7 @@ export function setupNativeEvents(preload = true, explicitLinks = false, actionB
                 url.pathname = transformUrl(url.pathname);
             }
             if (!preloadTimeout[url.pathname])
-                router.preloadRoute(url, a.getAttribute("preload") !== "false");
+                router.preloadRoute(url, { preloadData: a.getAttribute("preload") !== "false" });
         }
         function handleAnchorIn(evt) {
             const res = handleAnchor(evt);
@@ -74,7 +74,7 @@ export function setupNativeEvents(preload = true, explicitLinks = false, actionB
             if (preloadTimeout[url.pathname])
                 return;
             preloadTimeout[url.pathname] = setTimeout(() => {
-                router.preloadRoute(url, a.getAttribute("preload") !== "false");
+                router.preloadRoute(url, { preloadData: a.getAttribute("preload") !== "false" });
                 delete preloadTimeout[url.pathname];
             }, 200);
         }

package/dist/index.js

@@ -1,5 +1,5 @@
 import { isServer, getRequestEvent, createComponent as createComponent$1, memo, delegateEvents, spread, mergeProps as mergeProps$1, template } from 'solid-js/web';
-import { getOwner, runWithOwner, createMemo, createContext, onCleanup, useContext, untrack, createSignal, createRenderEffect, on, startTransition, resetErrorBoundaries, createComponent, children, mergeProps, Show, createRoot, getListener, sharedConfig, $TRACK, splitProps, createResource } from 'solid-js';
+import { getOwner, runWithOwner, createMemo, createContext, onCleanup, useContext, untrack, createSignal, createRenderEffect, on, startTransition, resetErrorBoundaries, batch, createComponent, children, mergeProps, Show, createRoot, getListener, sharedConfig, $TRACK, splitProps, createResource } from 'solid-js';
 import { createStore, reconcile, unwrap } from 'solid-js/store';
 
 function createBeforeLeave() {
@@ -433,13 +433,33 @@ function createRouterContext(integration, branches, getContext, options = {}) {
     });
   }
   const [isRouting, setIsRouting] = createSignal(false);
-  const start = async callback => {
-    setIsRouting(true);
-    try {
-      await startTransition(callback);
-    } finally {
-      setIsRouting(false);
-    }
+
+  // Keep track of last target, so that last call to transition 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]([]);
+    }).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);
@@ -468,24 +488,11 @@ function createRouterContext(integration, branches, getContext, options = {}) {
       return resolvePath(basePath, to);
     }
   };
-  createRenderEffect(() => {
-    const {
-      value,
-      state
-    } = source();
-    // Untrack this whole block so `start` doesn't cause Solid's Listener to be preserved
-    untrack(() => {
-      start(() => {
-        intent = "native";
-        if (value !== reference()) setReference(value);
-        setState(state);
-        resetErrorBoundaries();
-        submissions[1]([]);
-      }).then(() => {
-        intent = undefined;
-      });
-    });
-  });
+
+  // Create a native transition, when source updates
+  createRenderEffect(on(source, source => transition("native", source), {
+    defer: true
+  }));
   return {
     base: baseRoute,
     location,
@@ -545,26 +552,15 @@ function createRouterContext(integration, branches, getContext, options = {}) {
             state: nextState
           });
         } else if (beforeLeave.confirm(resolvedTo, options)) {
-          const len = referrers.push({
+          referrers.push({
             value: current,
             replace,
             scroll,
             state: state()
           });
-          start(() => {
-            intent = "navigate";
-            setReference(resolvedTo);
-            setState(nextState);
-            resetErrorBoundaries();
-            submissions[1]([]);
-          }).then(() => {
-            if (referrers.length === len) {
-              intent = undefined;
-              navigateEnd({
-                value: resolvedTo,
-                state: nextState
-              });
-            }
+          transition("navigate", {
+            value: resolvedTo,
+            state: nextState
           });
         }
       }
@@ -578,17 +574,15 @@ function createRouterContext(integration, branches, getContext, options = {}) {
   function navigateEnd(next) {
     const first = referrers[0];
     if (first) {
-      if (next.value !== first.value || next.state !== first.state) {
-        setSource({
-          ...next,
-          replace: first.replace,
-          scroll: first.scroll
-        });
-      }
+      setSource({
+        ...next,
+        replace: first.replace,
+        scroll: first.scroll
+      });
       referrers.length = 0;
     }
   }
-  function preloadRoute(url, preloadData) {
+  function preloadRoute(url, options = {}) {
     const matches = getRouteMatches(branches(), url.pathname);
     const prevIntent = intent;
     intent = "preload";
@@ -602,7 +596,7 @@ function createRouterContext(integration, branches, getContext, options = {}) {
         load
       } = route;
       inLoadFn = true;
-      preloadData && load && runWithOwner(getContext(), () => load({
+      options.preloadData && load && runWithOwner(getContext(), () => load({
         params,
         location: {
           pathname: url.pathname,
@@ -962,10 +956,11 @@ function cache(fn, name) {
         cached[0] = now;
       }
       let res = cached[1];
-      if (!inLoadFn) {
+      if (intent !== "preload") {
         res = "then" in cached[1] ? cached[1].then(handleResponse(false), handleResponse(true)) : handleResponse(false)(cached[1]);
         !isServer && intent === "navigate" && startTransition(() => cached[3][1](cached[0])); // update version
-      } else "then" in res && res.catch(() => {});
+      }
+      inLoadFn && "then" in res && res.catch(() => {});
       return res;
     }
     let res = !isServer && sharedConfig.context && sharedConfig.has(key) ? sharedConfig.load(key) // hydrating
@@ -987,9 +982,10 @@ function cache(fn, name) {
       const e = getRequestEvent();
       if (e && e.router.dataOnly) return e.router.data[key] = res;
     }
-    if (!inLoadFn) {
+    if (intent !== "preload") {
       res = "then" in res ? res.then(handleResponse(false), handleResponse(true)) : handleResponse(false)(res);
-    } else "then" in res && res.catch(() => {});
+    }
+    inLoadFn && "then" in res && res.catch(() => {});
     // serialize on server
     if (isServer && sharedConfig.context && sharedConfig.context.async && !sharedConfig.context.noHydrate) {
       const e = getRequestEvent();
@@ -999,18 +995,21 @@ function cache(fn, name) {
     function handleResponse(error) {
       return async v => {
         if (v instanceof Response) {
-          if (v.headers.has("Location")) {
-            if (navigate) {
-              startTransition(() => {
-                let url = v.headers.get(LocationHeader);
-                if (url && url.startsWith("/")) {
-                  navigate(url, {
-                    replace: true
-                  });
-                } else if (!isServer && url) {
-                  window.location.href = url;
-                }
+          const url = v.headers.get(LocationHeader);
+          if (url !== null) {
+            // client + server relative redirect
+            if (navigate && url.startsWith("/")) startTransition(() => {
+              navigate(url, {
+                replace: true
               });
+            });else if (!isServer) window.location.href = url;else if (isServer) {
+              const e = getRequestEvent();
+              if (e) e.response = {
+                status: 302,
+                headers: new Headers({
+                  Location: url
+                })
+              };
             }
             return;
           }
@@ -1075,6 +1074,7 @@ function useSubmission(fn, filter) {
   const submissions = useSubmissions(fn, filter);
   return new Proxy({}, {
     get(_, property) {
+      if (submissions.length === 0 && property === "clear" || property === "retry") return () => {};
       return submissions[submissions.length - 1]?.[property];
     }
   });
@@ -1232,7 +1232,9 @@ function setupNativeEvents(preload = true, explicitLinks = false, actionBase = "
       if (typeof transformUrl === "function") {
         url.pathname = transformUrl(url.pathname);
       }
-      if (!preloadTimeout[url.pathname]) router.preloadRoute(url, a.getAttribute("preload") !== "false");
+      if (!preloadTimeout[url.pathname]) router.preloadRoute(url, {
+        preloadData: a.getAttribute("preload") !== "false"
+      });
     }
     function handleAnchorIn(evt) {
       const res = handleAnchor(evt);
@@ -1243,7 +1245,9 @@ function setupNativeEvents(preload = true, explicitLinks = false, actionBase = "
       }
       if (preloadTimeout[url.pathname]) return;
       preloadTimeout[url.pathname] = setTimeout(() => {
-        router.preloadRoute(url, a.getAttribute("preload") !== "false");
+        router.preloadRoute(url, {
+          preloadData: a.getAttribute("preload") !== "false"
+        });
         delete preloadTimeout[url.pathname];
       }, 200);
     }
@@ -1328,7 +1332,7 @@ function Router(props) {
       } else {
         window.history.pushState(state, "", value);
       }
-      scrollToHash(window.location.hash.slice(1), scroll);
+      scrollToHash(decodeURIComponent(window.location.hash.slice(1)), scroll);
       saveCurrentDepth();
     },
     init: notify => bindEvent(window, "popstate", notifyIfNotBlocked(notify, delta => {

package/dist/routers/Router.js

@@ -23,7 +23,7 @@ export function Router(props) {
             else {
                 window.history.pushState(state, "", value);
             }
-            scrollToHash(window.location.hash.slice(1), scroll);
+            scrollToHash(decodeURIComponent(window.location.hash.slice(1)), scroll);
             saveCurrentDepth();
         },
         init: notify => bindEvent(window, "popstate", notifyIfNotBlocked(notify, delta => {

package/dist/routing.d.ts

@@ -9,6 +9,9 @@ export declare const useHref: (to: () => string | undefined) => Accessor<string
 export declare const useNavigate: () => Navigator;
 export declare const useLocation: <S = unknown>() => Location<S>;
 export declare const useIsRouting: () => () => boolean;
+export declare const usePreloadRoute: () => (url: URL, options: {
+    preloadData?: boolean | undefined;
+}) => void;
 export declare const useMatch: <S extends string>(path: () => S, matchFilters?: MatchFilters<S> | undefined) => Accessor<import("./types.js").PathMatch | undefined>;
 export declare const useCurrentMatches: () => () => RouteMatch[];
 export declare const useParams: <T extends Params>() => T;

package/dist/routing.js

@@ -1,4 +1,4 @@
-import { runWithOwner } from "solid-js";
+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";
@@ -23,6 +23,7 @@ export const useHref = (to) => {
 export const useNavigate = () => useRouter().navigatorFactory();
 export const useLocation = () => useRouter().location;
 export const useIsRouting = () => useRouter().isRouting;
+export const usePreloadRoute = () => useRouter().preloadRoute;
 export const useMatch = (path, matchFilters) => {
     const location = useLocation();
     const matchers = createMemo(() => expandOptionals(path()).map(path => createMatcher(path, undefined, matchFilters)));
@@ -205,14 +206,36 @@ export function createRouterContext(integration, branches, getContext, options =
         setSource({ value: basePath, replace: true, scroll: false });
     }
     const [isRouting, setIsRouting] = createSignal(false);
-    const start = async (callback) => {
-        setIsRouting(true);
-        try {
-            await startTransition(callback);
-        }
-        finally {
-            setIsRouting(false);
-        }
+    // Keep track of last target, so that last call to transition 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]([]);
+        }).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);
@@ -241,22 +264,8 @@ export function createRouterContext(integration, branches, getContext, options =
             return resolvePath(basePath, to);
         }
     };
-    createRenderEffect(() => {
-        const { value, state } = source();
-        // Untrack this whole block so `start` doesn't cause Solid's Listener to be preserved
-        untrack(() => {
-            start(() => {
-                intent = "native";
-                if (value !== reference())
-                    setReference(value);
-                setState(state);
-                resetErrorBoundaries();
-                submissions[1]([]);
-            }).then(() => {
-                intent = undefined;
-            });
-        });
-    });
+    // Create a native transition, when source updates
+    createRenderEffect(on(source, source => transition("native", source), { defer: true }));
     return {
         base: baseRoute,
         location,
@@ -307,21 +316,10 @@ export function createRouterContext(integration, branches, getContext, options =
                     setSource({ value: resolvedTo, replace, scroll, state: nextState });
                 }
                 else if (beforeLeave.confirm(resolvedTo, options)) {
-                    const len = referrers.push({ value: current, replace, scroll, state: state() });
-                    start(() => {
-                        intent = "navigate";
-                        setReference(resolvedTo);
-                        setState(nextState);
-                        resetErrorBoundaries();
-                        submissions[1]([]);
-                    }).then(() => {
-                        if (referrers.length === len) {
-                            intent = undefined;
-                            navigateEnd({
-                                value: resolvedTo,
-                                state: nextState
-                            });
-                        }
+                    referrers.push({ value: current, replace, scroll, state: state() });
+                    transition("navigate", {
+                        value: resolvedTo,
+                        state: nextState
                     });
                 }
             }
@@ -335,17 +333,15 @@ export function createRouterContext(integration, branches, getContext, options =
     function navigateEnd(next) {
         const first = referrers[0];
         if (first) {
-            if (next.value !== first.value || next.state !== first.state) {
-                setSource({
-                    ...next,
-                    replace: first.replace,
-                    scroll: first.scroll
-                });
-            }
+            setSource({
+                ...next,
+                replace: first.replace,
+                scroll: first.scroll
+            });
             referrers.length = 0;
         }
     }
-    function preloadRoute(url, preloadData) {
+    function preloadRoute(url, options = {}) {
         const matches = getRouteMatches(branches(), url.pathname);
         const prevIntent = intent;
         intent = "preload";
@@ -356,7 +352,7 @@ export function createRouterContext(integration, branches, getContext, options =
                 route.component.preload();
             const { load } = route;
             inLoadFn = true;
-            preloadData &&
+            options.preloadData &&
                 load &&
                 runWithOwner(getContext(), () => load({
                     params,
@@ -376,9 +372,7 @@ export function createRouterContext(integration, branches, getContext, options =
     }
     function initFromFlash() {
         const e = getRequestEvent();
-        return (e && e.router && e.router.submission
-            ? [e.router.submission]
-            : []);
+        return (e && e.router && e.router.submission ? [e.router.submission] : []);
     }
 }
 export function createRouteContext(router, parent, outlet, match) {

package/dist/types.d.ts

@@ -134,7 +134,9 @@ export interface RouterContext {
     renderPath(path: string): string;
     parsePath(str: string): string;
     beforeLeave: BeforeLeaveLifecycle;
-    preloadRoute: (url: URL, preloadData: boolean) => void;
+    preloadRoute: (url: URL, options: {
+        preloadData?: boolean;
+    }) => void;
     singleFlight: boolean;
     submissions: Signal<Submission<any, any>[]>;
 }
@@ -164,6 +166,15 @@ export type Submission<T, U> = {
     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;
 }

package/package.json

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