@solidjs/router 0.13.0 → 0.13.2

package/dist/data/cache.d.ts

@@ -1,7 +1,9 @@
 import { CacheEntry } from "../types.js";
 export declare function revalidate(key?: string | string[] | void, force?: boolean): Promise<void>;
 export declare function cacheKeyOp(key: string | string[] | void, fn: (cacheEntry: CacheEntry) => void): void;
-export type CachedFunction<T extends (...args: any) => any> = T extends (...args: infer A) => infer R ? ([] extends A ? (...args: never[]) => R : T) & {
+export type CachedFunction<T extends (...args: any) => any> = T extends (...args: infer A) => infer R ? ([] extends {
+    [K in keyof A]-?: A[K];
+} ? (...args: never[]) => R : T) & {
     keyFor: (...args: A) => string;
     key: string;
 } : never;

package/dist/data/events.js

@@ -83,6 +83,8 @@ export function setupNativeEvents(preload = true, explicitLinks = false, actionB
             }
         }
         function handleFormSubmit(evt) {
+            if (evt.defaultPrevented)
+                return;
             let actionRef = evt.submitter && evt.submitter.hasAttribute("formaction")
                 ? evt.submitter.getAttribute("formaction")
                 : evt.target.getAttribute("action");

package/dist/index.js

@@ -256,7 +256,7 @@ const useMatch = (path, matchFilters) => {
     }
   });
 };
-const useParams = () => useRoute().params;
+const useParams = () => useRouter().params;
 const useSearchParams = () => {
   const location = useLocation();
   const navigate = useNavigate();
@@ -292,9 +292,9 @@ function createRoutes(routeDef, base = "") {
     load,
     info
   };
-  return asArray(routeDef.path).reduce((acc, path) => {
-    for (const originalPath of expandOptionals(path)) {
-      const path = joinPaths(base, originalPath);
+  return asArray(routeDef.path).reduce((acc, originalPath) => {
+    for (const expandedPath of expandOptionals(originalPath)) {
+      const path = joinPaths(base, expandedPath);
       let pattern = isLeaf ? path : path.split("/*", 1)[0];
       pattern = pattern.split("/").map(s => {
         return s.startsWith(":") || s.startsWith("*") ? s : encodeURIComponent(s);
@@ -406,7 +406,7 @@ let intent;
 function getIntent() {
   return intent;
 }
-function createRouterContext(integration, getContext, getBranches, options = {}) {
+function createRouterContext(integration, branches, getContext, options = {}) {
   const {
     signal: [source, setSource],
     utils = {}
@@ -438,9 +438,17 @@ function createRouterContext(integration, getContext, getBranches, options = {})
   const location = createLocation(reference, state);
   const referrers = [];
   const submissions = createSignal(isServer ? initFromFlash() : []);
+  const matches = createMemo(() => getRouteMatches(branches(), location.pathname));
+  const params = createMemoObject(() => {
+    const m = matches();
+    const params = {};
+    for (let i = 0; i < m.length; i++) {
+      Object.assign(params, m[i].params);
+    }
+    return params;
+  });
   const baseRoute = {
     pattern: basePath,
-    params: {},
     path: () => basePath,
     outlet: () => null,
     resolvePath(to) {
@@ -470,10 +478,12 @@ function createRouterContext(integration, getContext, getBranches, options = {})
   return {
     base: baseRoute,
     location,
+    params,
     isRouting,
     renderPath,
     parsePath,
     navigatorFactory,
+    matches,
     beforeLeave,
     preloadRoute,
     singleFlight: options.singleFlight === undefined ? true : options.singleFlight,
@@ -568,7 +578,7 @@ function createRouterContext(integration, getContext, getBranches, options = {})
     }
   }
   function preloadRoute(url, preloadData) {
-    const matches = getRouteMatches(getBranches(), url.pathname);
+    const matches = getRouteMatches(branches(), url.pathname);
     const prevIntent = intent;
     intent = "preload";
     for (let match in matches) {
@@ -600,10 +610,11 @@ function createRouterContext(integration, getContext, getBranches, options = {})
     return e && e.router && e.router.submission ? [e.router.submission] : [];
   }
 }
-function createRouteContext(router, parent, outlet, match, params) {
+function createRouteContext(router, parent, outlet, match) {
   const {
     base,
-    location
+    location,
+    params
   } = router;
   const {
     pattern,
@@ -621,7 +632,6 @@ function createRouteContext(router, parent, outlet, match, params) {
     parent,
     pattern,
     path,
-    params,
     outlet: () => component ? createComponent(component, {
       params,
       location,
@@ -644,17 +654,16 @@ const createRouterComponent = router => props => {
   const routeDefs = children(() => props.children);
   const branches = createMemo(() => createBranches(routeDefs(), props.base || ""));
   let context;
-  const routerState = createRouterContext(router, () => context, branches, {
+  const routerState = createRouterContext(router, branches, () => context, {
     base,
     singleFlight: props.singleFlight
   });
-  const location = routerState.location;
   router.create && router.create(routerState);
   return createComponent$1(RouterContextObj.Provider, {
     value: routerState,
     get children() {
       return createComponent$1(Root, {
-        location: location,
+        routerState: routerState,
         get root() {
           return props.root;
         },
@@ -674,9 +683,10 @@ const createRouterComponent = router => props => {
   });
 };
 function Root(props) {
-  const location = props.location;
+  const location = props.routerState.location;
+  const params = props.routerState.params;
   const data = createMemo(() => props.load && untrack(() => props.load({
-    params: {},
+    params,
     location,
     intent: "preload"
   })));
@@ -689,7 +699,7 @@ function Root(props) {
       return props.children;
     },
     children: Root => createComponent$1(Root, {
-      params: {},
+      params: params,
       location: location,
       get data() {
         return data();
@@ -701,14 +711,13 @@ function Root(props) {
   });
 }
 function Routes(props) {
-  const matches = createMemo(() => getRouteMatches(props.branches, props.routerState.location.pathname));
   if (isServer) {
     const e = getRequestEvent();
     if (e && e.router && e.router.dataOnly) {
       dataOnly(e, props.routerState, props.branches);
       return;
     }
-    e && ((e.router || (e.router = {})).matches || (e.router.matches = matches().map(({
+    e && ((e.router || (e.router = {})).matches || (e.router.matches = props.routerState.matches().map(({
       route,
       path,
       params
@@ -720,17 +729,9 @@ function Routes(props) {
       info: route.info
     }))));
   }
-  const params = createMemoObject(() => {
-    const m = matches();
-    const params = {};
-    for (let i = 0; i < m.length; i++) {
-      Object.assign(params, m[i].params);
-    }
-    return params;
-  });
   const disposers = [];
   let root;
-  const routeStates = createMemo(on(matches, (nextMatches, prevMatches, prev) => {
+  const routeStates = createMemo(on(props.routerState.matches, (nextMatches, prevMatches, prev) => {
     let equal = prevMatches && nextMatches.length === prevMatches.length;
     const next = [];
     for (let i = 0, len = nextMatches.length; i < len; i++) {
@@ -745,7 +746,7 @@ function Routes(props) {
         }
         createRoot(dispose => {
           disposers[i] = dispose;
-          next[i] = createRouteContext(props.routerState, next[i - 1] || props.routerState.base, createOutlet(() => routeStates()[i + 1]), () => matches()[i], params);
+          next[i] = createRouteContext(props.routerState, next[i - 1] || props.routerState.base, createOutlet(() => routeStates()[i + 1]), () => props.routerState.matches()[i]);
         });
       }
     }
@@ -1230,6 +1231,7 @@ function setupNativeEvents(preload = true, explicitLinks = false, actionBase = "
       }
     }
     function handleFormSubmit(evt) {
+      if (evt.defaultPrevented) return;
       let actionRef = evt.submitter && evt.submitter.hasAttribute("formaction") ? evt.submitter.getAttribute("formaction") : evt.target.getAttribute("action");
       if (!actionRef) return;
       if (!actionRef.startsWith("https://action/")) {
@@ -1381,9 +1383,12 @@ function createMemoryHistory() {
         entries.splice(index + 1, entries.length - index, value);
         index++;
       }
-      if (scroll) {
-        scrollToHash(value.split("#")[1] || "", true);
-      }
+      listeners.forEach(listener => listener(value));
+      setTimeout(() => {
+        if (scroll) {
+          scrollToHash(value.split("#")[1] || "", true);
+        }
+      }, 0);
     },
     back: () => {
       go(-1);

package/dist/routers/MemoryRouter.js

@@ -20,9 +20,12 @@ export function createMemoryHistory() {
                 entries.splice(index + 1, entries.length - index, value);
                 index++;
             }
-            if (scroll) {
-                scrollToHash(value.split("#")[1] || "", true);
-            }
+            listeners.forEach(listener => listener(value));
+            setTimeout(() => {
+                if (scroll) {
+                    scrollToHash(value.split("#")[1] || "", true);
+                }
+            }, 0);
         },
         back: () => {
             go(-1);

package/dist/routers/components.jsx

@@ -2,36 +2,34 @@
 import { getRequestEvent, isServer } from "solid-js/web";
 import { children, createMemo, createRoot, getOwner, mergeProps, on, Show, untrack } from "solid-js";
 import { createBranches, createRouteContext, createRouterContext, getRouteMatches, RouteContextObj, RouterContextObj } from "../routing.js";
-import { createMemoObject } from "../utils.js";
 export const createRouterComponent = (router) => (props) => {
     const { base } = props;
     const routeDefs = children(() => props.children);
     const branches = createMemo(() => createBranches(routeDefs(), props.base || ""));
     let context;
-    const routerState = createRouterContext(router, () => context, branches, {
+    const routerState = createRouterContext(router, branches, () => context, {
         base,
         singleFlight: props.singleFlight
     });
-    const location = routerState.location;
     router.create && router.create(routerState);
     return (<RouterContextObj.Provider value={routerState}>
-      <Root location={location} root={props.root} load={props.rootLoad}>
+      <Root routerState={routerState} root={props.root} load={props.rootLoad}>
         {(context = getOwner()) && null}
         <Routes routerState={routerState} branches={branches()}/>
       </Root>
     </RouterContextObj.Provider>);
 };
 function Root(props) {
-    const location = props.location;
-    const data = createMemo(() => props.load && untrack(() => props.load({ params: {}, location, intent: "preload" })));
+    const location = props.routerState.location;
+    const params = props.routerState.params;
+    const data = createMemo(() => props.load && untrack(() => props.load({ params, location, intent: "preload" })));
     return (<Show when={props.root} keyed fallback={props.children}>
-      {Root => (<Root params={{}} location={location} data={data()}>
+      {Root => (<Root params={params} location={location} data={data()}>
           {props.children}
         </Root>)}
     </Show>);
 }
 function Routes(props) {
-    const matches = createMemo(() => getRouteMatches(props.branches, props.routerState.location.pathname));
     if (isServer) {
         const e = getRequestEvent();
         if (e && e.router && e.router.dataOnly) {
@@ -40,7 +38,7 @@ function Routes(props) {
         }
         e &&
             ((e.router || (e.router = {})).matches ||
-                (e.router.matches = matches().map(({ route, path, params }) => ({
+                (e.router.matches = props.routerState.matches().map(({ route, path, params }) => ({
                     path: route.originalPath,
                     pattern: route.pattern,
                     match: path,
@@ -48,17 +46,9 @@ function Routes(props) {
                     info: route.info
                 }))));
     }
-    const params = createMemoObject(() => {
-        const m = matches();
-        const params = {};
-        for (let i = 0; i < m.length; i++) {
-            Object.assign(params, m[i].params);
-        }
-        return params;
-    });
     const disposers = [];
     let root;
-    const routeStates = createMemo(on(matches, (nextMatches, prevMatches, prev) => {
+    const routeStates = createMemo(on(props.routerState.matches, (nextMatches, prevMatches, prev) => {
         let equal = prevMatches && nextMatches.length === prevMatches.length;
         const next = [];
         for (let i = 0, len = nextMatches.length; i < len; i++) {
@@ -74,7 +64,7 @@ function Routes(props) {
                 }
                 createRoot(dispose => {
                     disposers[i] = dispose;
-                    next[i] = createRouteContext(props.routerState, next[i - 1] || props.routerState.base, createOutlet(() => routeStates()[i + 1]), () => matches()[i], params);
+                    next[i] = createRouteContext(props.routerState, next[i - 1] || props.routerState.base, createOutlet(() => routeStates()[i + 1]), () => props.routerState.matches()[i]);
                 });
             }
         }

package/dist/routing.d.ts

@@ -19,8 +19,8 @@ export declare function createBranches(routeDef: RouteDefinition | RouteDefiniti
 export declare function getRouteMatches(branches: Branch[], location: string): RouteMatch[];
 export declare function createLocation(path: Accessor<string>, state: Accessor<any>): Location;
 export declare function getIntent(): Intent | undefined;
-export declare function createRouterContext(integration: RouterIntegration, getContext?: () => any, getBranches?: () => Branch[], options?: {
+export declare function createRouterContext(integration: RouterIntegration, branches: () => Branch[], getContext?: () => any, options?: {
     base?: string;
     singleFlight?: boolean;
 }): RouterContext;
-export declare function createRouteContext(router: RouterContext, parent: RouteContext, outlet: () => JSX.Element, match: () => RouteMatch, params: Params): RouteContext;
+export declare function createRouteContext(router: RouterContext, parent: RouteContext, outlet: () => JSX.Element, match: () => RouteMatch): RouteContext;

package/dist/routing.js

@@ -34,7 +34,7 @@ export const useMatch = (path, matchFilters) => {
         }
     });
 };
-export const useParams = () => useRoute().params;
+export const useParams = () => useRouter().params;
 export const useSearchParams = () => {
     const location = useLocation();
     const navigate = useNavigate();
@@ -65,9 +65,9 @@ export function createRoutes(routeDef, base = "") {
         load,
         info
     };
-    return asArray(routeDef.path).reduce((acc, path) => {
-        for (const originalPath of expandOptionals(path)) {
-            const path = joinPaths(base, originalPath);
+    return asArray(routeDef.path).reduce((acc, originalPath) => {
+        for (const expandedPath of expandOptionals(originalPath)) {
+            const path = joinPaths(base, expandedPath);
             let pattern = isLeaf ? path : path.split("/*", 1)[0];
             pattern = pattern
                 .split("/")
@@ -184,7 +184,7 @@ let intent;
 export function getIntent() {
     return intent;
 }
-export function createRouterContext(integration, getContext, getBranches, options = {}) {
+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);
@@ -211,9 +211,17 @@ export function createRouterContext(integration, getContext, getBranches, option
     const location = createLocation(reference, state);
     const referrers = [];
     const submissions = createSignal(isServer ? initFromFlash() : []);
+    const matches = createMemo(() => getRouteMatches(branches(), location.pathname));
+    const params = createMemoObject(() => {
+        const m = matches();
+        const params = {};
+        for (let i = 0; i < m.length; i++) {
+            Object.assign(params, m[i].params);
+        }
+        return params;
+    });
     const baseRoute = {
         pattern: basePath,
-        params: {},
         path: () => basePath,
         outlet: () => null,
         resolvePath(to) {
@@ -240,10 +248,12 @@ export function createRouterContext(integration, getContext, getBranches, option
     return {
         base: baseRoute,
         location,
+        params,
         isRouting,
         renderPath,
         parsePath,
         navigatorFactory,
+        matches,
         beforeLeave,
         preloadRoute,
         singleFlight: options.singleFlight === undefined ? true : options.singleFlight,
@@ -324,7 +334,7 @@ export function createRouterContext(integration, getContext, getBranches, option
         }
     }
     function preloadRoute(url, preloadData) {
-        const matches = getRouteMatches(getBranches(), url.pathname);
+        const matches = getRouteMatches(branches(), url.pathname);
         const prevIntent = intent;
         intent = "preload";
         for (let match in matches) {
@@ -357,8 +367,8 @@ export function createRouterContext(integration, getContext, getBranches, option
             : []);
     }
 }
-export function createRouteContext(router, parent, outlet, match, params) {
-    const { base, location } = router;
+export function createRouteContext(router, parent, outlet, match) {
+    const { base, location, params } = router;
     const { pattern, component, load } = match().route;
     const path = createMemo(() => match().path);
     component &&
@@ -369,7 +379,6 @@ export function createRouteContext(router, parent, outlet, match, params) {
         parent,
         pattern,
         path,
-        params,
         outlet: () => component
             ? createComponent(component, {
                 params,

package/dist/types.d.ts

@@ -114,7 +114,6 @@ export interface RouteContext {
     parent?: RouteContext;
     child?: RouteContext;
     pattern: string;
-    params: Params;
     path: () => string;
     outlet: () => JSX.Element;
     resolvePath(to: string): string | undefined;
@@ -128,8 +127,10 @@ export interface RouterUtils {
 export interface RouterContext {
     base: RouteContext;
     location: Location;
+    params: Params;
     navigatorFactory: NavigatorFactory;
     isRouting: () => boolean;
+    matches: () => RouteMatch[];
     renderPath(path: string): string;
     parsePath(str: string): string;
     beforeLeave: BeforeLeaveLifecycle;

package/package.json

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