@solidjs/router 0.9.1 → 0.10.0-beta.1

package/dist/index.jsx

@@ -1,5 +1,6 @@
 export * from "./components";
 export * from "./integration";
 export * from "./lifecycle";
-export { useRouteData, useHref, useIsRouting, useLocation, useMatch, useNavigate, useParams, useResolvedPath, useSearchParams, useBeforeLeave, } from "./routing";
+export { useHref, useIsRouting, useLocation, useMatch, useNavigate, useParams, useResolvedPath, useSearchParams, useBeforeLeave, } from "./routing";
 export { mergeSearchString as _mergeSearchString } from "./utils";
+export * from "./data";

package/dist/routing.d.ts

@@ -1,5 +1,5 @@
-import type { Component, Accessor } from "solid-js";
-import type { BeforeLeaveEventArgs, Branch, Location, LocationChangeSignal, MatchFilters, NavigateOptions, Navigator, Params, Route, RouteContext, RouteDataFunc, RouteDefinition, RouteMatch, RouterContext, RouterIntegration, SetParams } from "./types";
+import { JSX, Accessor } from "solid-js";
+import type { BeforeLeaveEventArgs, Branch, Intent, Location, LocationChangeSignal, MatchFilters, NavigateOptions, Navigator, Params, Route, RouteContext, RouteDefinition, RouteMatch, RouterContext, RouterIntegration, SetParams } from "./types";
 export declare const RouterContextObj: import("solid-js").Context<RouterContext | undefined>;
 export declare const RouteContextObj: import("solid-js").Context<RouteContext | undefined>;
 export declare const useRouter: () => RouterContext;
@@ -11,15 +11,14 @@ export declare const useLocation: <S = unknown>() => Location<S>;
 export declare const useIsRouting: () => () => boolean;
 export declare const useMatch: <S extends string>(path: () => S, matchFilters?: MatchFilters<S> | undefined) => Accessor<import("./types").PathMatch | undefined>;
 export declare const useParams: <T extends Params>() => T;
-type MaybeReturnType<T> = T extends (...args: any) => infer R ? R : T;
-export declare const useRouteData: <T>() => MaybeReturnType<T>;
 export declare const useSearchParams: <T extends Params>() => [T, (params: SetParams, options?: Partial<NavigateOptions>) => void];
 export declare const useBeforeLeave: (listener: (e: BeforeLeaveEventArgs) => void) => void;
-export declare function createRoutes(routeDef: RouteDefinition, base?: string, fallback?: Component): Route[];
+export declare function createRoutes(routeDef: RouteDefinition, base?: string): Route[];
 export declare function createBranch(routes: Route[], index?: number): Branch;
-export declare function createBranches(routeDef: RouteDefinition | RouteDefinition[], base?: string, fallback?: Component, stack?: Route[], branches?: Branch[]): Branch[];
+export declare function createBranches(routeDef: RouteDefinition | RouteDefinition[], base?: string, stack?: Route[], branches?: Branch[]): Branch[];
 export declare function getRouteMatches(branches: Branch[], location: string): RouteMatch[];
 export declare function createLocation(path: Accessor<string>, state: Accessor<any>): Location;
-export declare function createRouterContext(integration?: RouterIntegration | LocationChangeSignal, base?: string, data?: RouteDataFunc, out?: object): RouterContext;
-export declare function createRouteContext(router: RouterContext, parent: RouteContext, child: () => RouteContext, match: () => RouteMatch, params: Params): RouteContext;
-export {};
+export declare function registerAction(url: string, fn: Function): void;
+export declare function getIntent(): Intent | undefined;
+export declare function createRouterContext(integration?: RouterIntegration | LocationChangeSignal, getBranches?: () => Branch[], base?: string): RouterContext;
+export declare function createRouteContext(router: RouterContext, parent: RouteContext, outlet: () => JSX.Element, match: () => RouteMatch, params: Params): RouteContext;

package/dist/routing.js

@@ -35,7 +35,6 @@ export const useMatch = (path, matchFilters) => {
     });
 };
 export const useParams = () => useRoute().params;
-export const useRouteData = () => useRoute().data;
 export const useSearchParams = () => {
     const location = useLocation();
     const navigate = useNavigate();
@@ -57,23 +56,13 @@ export const useBeforeLeave = (listener) => {
     });
     onCleanup(s);
 };
-export function createRoutes(routeDef, base = "", fallback) {
-    const { component, data, children } = routeDef;
+export function createRoutes(routeDef, base = "") {
+    const { component, load, children } = routeDef;
     const isLeaf = !children || (Array.isArray(children) && !children.length);
     const shared = {
         key: routeDef,
-        element: component
-            ? () => createComponent(component, {})
-            : () => {
-                const { element } = routeDef;
-                return element === undefined && fallback
-                    ? createComponent(fallback, {})
-                    : element;
-            },
-        preload: routeDef.component
-            ? component.preload
-            : routeDef.preload,
-        data
+        component,
+        load
     };
     return asArray(routeDef.path).reduce((acc, path) => {
         for (const originalPath of expandOptionals(path)) {
@@ -113,17 +102,19 @@ export function createBranch(routes, index = 0) {
 function asArray(value) {
     return Array.isArray(value) ? value : [value];
 }
-export function createBranches(routeDef, base = "", fallback, stack = [], branches = []) {
+export function createBranches(routeDef, base = "", stack = [], branches = []) {
     const routeDefs = asArray(routeDef);
     for (let i = 0, len = routeDefs.length; i < len; i++) {
         const def = routeDefs[i];
-        if (def && typeof def === "object" && def.hasOwnProperty("path")) {
-            const routes = createRoutes(def, base, fallback);
+        if (def && typeof def === "object") {
+            if (!def.hasOwnProperty("path"))
+                def.path = "";
+            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, fallback, stack, branches);
+                    createBranches(def.children, route.pattern, stack, branches);
                 }
                 else {
                     const branch = createBranch([...stack], branches.length);
@@ -162,7 +153,7 @@ export function createLocation(path, state) {
     const pathname = createMemo(() => url().pathname);
     const search = createMemo(() => url().search, true);
     const hash = createMemo(() => url().hash);
-    const key = createMemo(() => "");
+    const key = () => "";
     return {
         get pathname() {
             return pathname();
@@ -182,18 +173,21 @@ export function createLocation(path, state) {
         query: createMemoObject(on(search, () => extractSearchParams(url())))
     };
 }
-export function createRouterContext(integration, base = "", data, out) {
+const actions = new Map();
+export function registerAction(url, fn) {
+    actions.set(url, fn);
+}
+let intent;
+export function getIntent() {
+    return intent;
+}
+export function createRouterContext(integration, getBranches, base = "") {
     const { signal: [source, setSource], utils = {} } = normalizeIntegration(integration);
     const parsePath = utils.parsePath || (p => p);
     const renderPath = utils.renderPath || (p => p);
     const beforeLeave = utils.beforeLeave || createBeforeLeave();
+    let submissions = [];
     const basePath = resolvePath("", base);
-    const output = isServer && out
-        ? Object.assign(out, {
-            matches: [],
-            url: undefined
-        })
-        : undefined;
     if (basePath === undefined) {
         throw new Error(`${basePath} is not a valid base path`);
     }
@@ -223,20 +217,6 @@ export function createRouterContext(integration, base = "", data, out) {
             return resolvePath(basePath, to);
         }
     };
-    if (data) {
-        try {
-            TempRoute = baseRoute;
-            baseRoute.data = data({
-                data: undefined,
-                params: {},
-                location,
-                navigate: navigatorFactory(baseRoute)
-            });
-        }
-        finally {
-            TempRoute = undefined;
-        }
-    }
     function navigateFromRoute(route, to, options) {
         // Untrack in case someone navigates in an effect - don't want to track `reference` or route paths
         untrack(() => {
@@ -268,9 +248,6 @@ export function createRouterContext(integration, base = "", data, out) {
             const current = reference();
             if (resolvedTo !== current || nextState !== state()) {
                 if (isServer) {
-                    if (output) {
-                        output.url = resolvedTo;
-                    }
                     const e = getRequestEvent();
                     e && (e.response = Response.redirect(resolvedTo, 302));
                     setSource({ value: resolvedTo, replace, scroll, state: nextState });
@@ -278,11 +255,13 @@ export function createRouterContext(integration, base = "", data, out) {
                 else if (beforeLeave.confirm(resolvedTo, options)) {
                     const len = referrers.push({ value: current, replace, scroll, state: state() });
                     start(() => {
+                        intent = "navigate";
                         setReference(resolvedTo);
                         setState(nextState);
                         resetErrorBoundaries();
                     }).then(() => {
                         if (referrers.length === len) {
+                            intent = undefined;
                             navigateEnd({
                                 value: resolvedTo,
                                 state: nextState
@@ -317,14 +296,21 @@ export function createRouterContext(integration, base = "", data, out) {
         untrack(() => {
             if (value !== reference()) {
                 start(() => {
+                    intent = "native";
                     setReference(value);
                     setState(state);
+                }).then(() => {
+                    intent = undefined;
                 });
             }
         });
     });
     if (!isServer) {
-        function handleAnchorClick(evt) {
+        let preloadTimeout = {};
+        function isSvg(el) {
+            return el.namespaceURI === "http://www.w3.org/2000/svg";
+        }
+        function handleAnchor(evt) {
             if (evt.defaultPrevented ||
                 evt.button !== 0 ||
                 evt.metaKey ||
@@ -335,18 +321,27 @@ export function createRouterContext(integration, base = "", data, out) {
             const a = evt
                 .composedPath()
                 .find(el => el instanceof Node && el.nodeName.toUpperCase() === "A");
-            if (!a || !a.hasAttribute("link"))
+            if (!a)
                 return;
-            const href = a.href;
-            if (a.target || (!href && !a.hasAttribute("state")))
+            const svg = isSvg(a);
+            const href = svg ? a.href.baseVal : a.href;
+            const target = svg ? a.target.baseVal : a.target;
+            if (target || (!href && !a.hasAttribute("state")))
                 return;
             const rel = (a.getAttribute("rel") || "").split(/\s+/);
             if (a.hasAttribute("download") || (rel && rel.includes("external")))
                 return;
-            const url = new URL(href);
+            const url = svg ? new URL(href, document.baseURI) : new URL(href);
             if (url.origin !== window.location.origin ||
                 (basePath && url.pathname && !url.pathname.toLowerCase().startsWith(basePath.toLowerCase())))
                 return;
+            return [a, url];
+        }
+        function handleAnchorClick(evt) {
+            const res = handleAnchor(evt);
+            if (!res)
+                return;
+            const [a, url] = res;
             const to = parsePath(url.pathname + url.search + url.hash);
             const state = a.getAttribute("state");
             evt.preventDefault();
@@ -357,49 +352,141 @@ export function createRouterContext(integration, base = "", data, out) {
                 state: state && JSON.parse(state)
             });
         }
-        // ensure delegated events run first
-        delegateEvents(["click"]);
+        function doPreload(a, url) {
+            const preload = a.getAttribute("preload") !== "false";
+            const matches = getRouteMatches(getBranches(), url.pathname);
+            const prevIntent = intent;
+            intent = "preload";
+            for (let match in matches) {
+                const { route, params } = matches[match];
+                route.component &&
+                    route.component.preload &&
+                    route.component.preload();
+                preload &&
+                    route.load &&
+                    route.load({
+                        params,
+                        location: {
+                            pathname: url.pathname,
+                            search: url.search,
+                            hash: url.hash,
+                            query: extractSearchParams(url),
+                            state: null,
+                            key: ""
+                        },
+                        intent
+                    });
+            }
+            intent = prevIntent;
+        }
+        function handleAnchorPreload(evt) {
+            const res = handleAnchor(evt);
+            if (!res)
+                return;
+            const [a, url] = res;
+            if (!preloadTimeout[url.pathname])
+                doPreload(a, url);
+        }
+        function handleAnchorIn(evt) {
+            const res = handleAnchor(evt);
+            if (!res)
+                return;
+            const [a, url] = res;
+            if (preloadTimeout[url.pathname])
+                return;
+            preloadTimeout[url.pathname] = setTimeout(() => {
+                doPreload(a, url);
+                delete preloadTimeout[url.pathname];
+            }, 200);
+        }
+        function handleAnchorOut(evt) {
+            const res = handleAnchor(evt);
+            if (!res)
+                return;
+            const [, url] = res;
+            if (preloadTimeout[url.pathname]) {
+                clearTimeout(preloadTimeout[url.pathname]);
+                delete preloadTimeout[url.pathname];
+            }
+        }
+        function handleFormSubmit(evt) {
+            let actionRef = (evt.submitter && evt.submitter.getAttribute("formaction")) || evt.target.action;
+            if (actionRef && actionRef.startsWith("action:")) {
+                const data = new FormData(evt.target);
+                actions.get(actionRef.slice(7))(data);
+                evt.preventDefault();
+            }
+        }
+        // ensure delegated event run first
+        delegateEvents(["click", "submit"]);
         document.addEventListener("click", handleAnchorClick);
-        onCleanup(() => document.removeEventListener("click", handleAnchorClick));
+        document.addEventListener("mouseover", handleAnchorIn);
+        document.addEventListener("mouseout", handleAnchorOut);
+        document.addEventListener("focusin", handleAnchorPreload);
+        document.addEventListener("touchstart", handleAnchorPreload);
+        document.addEventListener("submit", handleFormSubmit);
+        onCleanup(() => {
+            document.removeEventListener("click", handleAnchorClick);
+            document.removeEventListener("mouseover", handleAnchorIn);
+            document.removeEventListener("mouseout", handleAnchorOut);
+            document.removeEventListener("focusin", handleAnchorPreload);
+            document.removeEventListener("touchstart", handleAnchorPreload);
+            document.removeEventListener("submit", handleFormSubmit);
+        });
+    }
+    else {
+        function initFromFlash(params) {
+            let param = params.form ? JSON.parse(params.form) : null;
+            if (!param || !param.result) {
+                return [];
+            }
+            const input = new Map(param.entries);
+            return [
+                {
+                    url: param.url,
+                    result: param.error ? new Error(param.result.message) : param.result,
+                    input: input
+                }
+            ];
+        }
+        submissions = initFromFlash(location.query);
     }
     return {
         base: baseRoute,
-        out: output,
         location,
         isRouting,
         renderPath,
         parsePath,
         navigatorFactory,
-        beforeLeave
+        beforeLeave,
+        submissions: createSignal(submissions)
     };
 }
-export function createRouteContext(router, parent, child, match, params) {
-    const { base, location, navigatorFactory } = router;
-    const { pattern, element: outlet, preload, data } = match().route;
+export function createRouteContext(router, parent, outlet, match, params) {
+    const { base, location } = router;
+    const { pattern, component, load } = match().route;
     const path = createMemo(() => match().path);
-    preload && preload();
     const route = {
         parent,
         pattern,
-        get child() {
-            return child();
-        },
         path,
         params,
-        data: parent.data,
-        outlet,
+        outlet: () => component
+            ? createComponent(component, {
+                params,
+                location,
+                get children() {
+                    return outlet();
+                }
+            })
+            : outlet(),
         resolvePath(to) {
             return resolvePath(base.path(), to, path());
         }
     };
-    if (data) {
-        try {
-            TempRoute = route;
-            route.data = data({ data: parent.data, params, location, navigate: navigatorFactory(route) });
-        }
-        finally {
-            TempRoute = undefined;
-        }
-    }
+    component &&
+        component.preload &&
+        component.preload();
+    load && load({ params, location, intent: intent || "navigate" });
     return route;
 }

package/dist/types.d.ts

@@ -1,7 +1,8 @@
-import { Component, JSX } from "solid-js";
+import { Component, JSX, Signal } from "solid-js";
 declare module "solid-js/web" {
     interface RequestEvent {
         response?: Response;
+        routerCache?: Map<any, any>;
     }
 }
 export type Params = Record<string, string>;
@@ -38,26 +39,25 @@ export interface RouterIntegration {
     signal: LocationChangeSignal;
     utils?: Partial<RouterUtils>;
 }
-export interface RouteDataFuncArgs<T = unknown> {
-    data: T extends RouteDataFunc<infer _, infer R> ? R : T;
+export type Intent = "native" | "navigate" | "preload";
+export interface RouteLoadFuncArgs {
     params: Params;
     location: Location;
-    navigate: Navigator;
+    intent: Intent;
+}
+export type RouteLoadFunc = (args: RouteLoadFuncArgs) => void;
+export interface RouteSectionProps {
+    params: Params;
+    location: Location;
+    children?: JSX.Element;
 }
-export type RouteDataFunc<T = unknown, R = unknown> = (args: RouteDataFuncArgs<T>) => R;
 export type RouteDefinition<S extends string | string[] = any> = {
-    path: S;
+    path?: S;
     matchFilters?: MatchFilters<S>;
-    data?: RouteDataFunc;
+    load?: RouteLoadFunc;
     children?: RouteDefinition | RouteDefinition[];
-} & ({
-    element?: never;
-    component: Component;
-} | {
-    component?: never;
-    element?: JSX.Element;
-    preload?: () => void;
-});
+    component?: Component<RouteSectionProps>;
+};
 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] : [];
 export type MatchFilters<P extends string | readonly string[] = any> = P extends string ? {
@@ -80,9 +80,8 @@ export interface Route {
     key: unknown;
     originalPath: string;
     pattern: string;
-    element: () => JSX.Element;
-    preload?: () => void;
-    data?: RouteDataFunc;
+    component?: Component<RouteSectionProps>;
+    load?: RouteLoadFunc;
     matcher: (location: string) => PathMatch | null;
     matchFilters?: MatchFilters;
 }
@@ -94,7 +93,6 @@ export interface Branch {
 export interface RouteContext {
     parent?: RouteContext;
     child?: RouteContext;
-    data?: unknown;
     pattern: string;
     params: Params;
     path: () => string;
@@ -119,13 +117,13 @@ export interface RouterOutput {
 }
 export interface RouterContext {
     base: RouteContext;
-    out?: RouterOutput;
     location: Location;
     navigatorFactory: NavigatorFactory;
     isRouting: () => boolean;
     renderPath(path: string): string;
     parsePath(str: string): string;
     beforeLeave: BeforeLeaveLifecycle;
+    submissions: Signal<Submission<any, any>[]>;
 }
 export interface BeforeLeaveEventArgs {
     from: Location;
@@ -144,3 +142,11 @@ export interface BeforeLeaveLifecycle {
     subscribe(listener: BeforeLeaveListener): () => void;
     confirm(to: string | number, options?: Partial<NavigateOptions>): boolean;
 }
+export type Submission<T, U> = {
+    readonly input: T;
+    readonly result?: U;
+    readonly pending: boolean;
+    readonly url: string;
+    clear: () => void;
+    retry: () => void;
+};

package/dist/utils.d.ts

@@ -1,4 +1,5 @@
 import type { MatchFilters, Params, PathMatch, Route, SetParams } from "./types";
+export declare const redirectStatusCodes: Set<number>;
 export declare function normalizePath(path: string, omitSlash?: boolean): string;
 export declare function resolvePath(base: string, path: string, from?: string): string | undefined;
 export declare function invariant<T>(value: T | null | undefined, message: string): T;

package/dist/utils.js

@@ -1,6 +1,7 @@
 import { createMemo, getOwner, runWithOwner } from "solid-js";
 const hasSchemeRegex = /^(?:[a-z0-9]+:)?\/\//i;
 const trimPathRegex = /^\/+|(\/)\/+$/g;
+export const redirectStatusCodes = new Set([204, 301, 302, 303, 307, 308]);
 export function normalizePath(path, omitSlash = false) {
     const s = path.replace(trimPathRegex, "$1");
     return s ? (omitSlash || /^[?#]/.test(s) ? s : "/" + s) : "";

package/package.json

@@ -6,7 +6,7 @@
     "Ryan Turnquist"
   ],
   "license": "MIT",
-  "version": "0.9.1",
+  "version": "0.10.0-beta.1",
   "homepage": "https://github.com/solidjs/solid-router#readme",
   "repository": {
     "type": "git",
@@ -35,7 +35,7 @@
     "@rollup/plugin-node-resolve": "15.0.1",
     "@rollup/plugin-terser": "0.2.0",
     "@types/jest": "^29.0.0",
-    "@types/node": "^18.7.14",
+    "@types/node": "^20.9.0",
     "babel-jest": "^29.0.1",
     "babel-preset-solid": "^1.6.6",
     "jest": "^29.0.1",
@@ -44,7 +44,7 @@
     "rollup": "^3.7.5",
     "solid-jest": "^0.2.0",
     "solid-js": "^1.8.4",
-    "typescript": "^4.9.4"
+    "typescript": "^5.2.2"
   },
   "peerDependencies": {
     "solid-js": "^1.8.4"