@solidjs/router 0.10.0-beta.4 → 0.10.0-beta.6

package/README.md

@@ -382,12 +382,12 @@ const user = createAsync(() => getUser(params.id))
 
 Actions are data mutations that can trigger invalidations and further routing. A list of prebuilt response builders can be found below(TODO).
 ```jsx
+import { action, revalidate, redirect } from "@solidjs/router"
+
 // anywhere
 const myAction = action(async (data) => {
   await doMutation(data);
-  return redirect("/", {
-    invalidate: [getUser, data.id]
-  }) // returns a response
+  throw redirect("/", { revalidate: getUser.keyFor(data.id) }); // throw a response to do a redirect
 });
 
 // in component
@@ -456,12 +456,12 @@ function loadUser({params, location}) {
 <Route path="/users/:id" component={User} load={loadUser} />;
 ```
 
-The load function is called when the Route is loaded or eagerly when links are hovered. Inside your page component you 
+The load function is called when the Route is loaded or eagerly when links are hovered. Inside your page component you:
 
 ```jsx
 // pages/users/[id].js
 import { getUser } from ... // the cache function
-    
+
 export default function User(props) {
   const user = createAsync(() => getUser(props.params.id));
   return <h1>{user().name}</h1>;
@@ -542,9 +542,9 @@ render(() =>
 By default, Solid Router uses `location.pathname` as route path. You can simply switch to hash mode through the `source` property on `<Router>` component.
 
 ```jsx
-import { Router, hashIntegration } from "@solidjs/router";
+import { HashRouter } from "@solidjs/router";
 
-<Router source={hashIntegration()} />;
+<HashRouter />;
 ```
 
 ### Memory Mode Router
@@ -552,11 +552,23 @@ import { Router, hashIntegration } from "@solidjs/router";
 You can also use memory mode router for testing purpose.
 
 ```jsx
-import { Router, memoryIntegration } from "@solidjs/router";
+import { MemoryRouter } from "@solidjs/router";
+
+<MemoryRouter />;
+```
+
+### SSR Routing
+
+For SSR you can use the static router directly or the browser Router defaults to it on the server, just pass in the url.
+
+```jsx
+import { isServer } from "solid-js/web";
+import { Router } from "@solidjs/router";
 
-<Router source={memoryIntegration()} />;
+<Router url={isServer ? req.url : ""} />;
 ```
 
+
 ## Components
 
 ### `<A>`

package/dist/components.d.ts

@@ -1,5 +1,5 @@
-import type { Component, JSX } from "solid-js";
-import type { Location, LocationChangeSignal, MatchFilters, Navigator, RouteLoadFunc, RouterIntegration, RouteSectionProps } from "./types";
+import type { JSX } from "solid-js";
+import type { Location, Navigator } from "./types";
 declare module "solid-js" {
     namespace JSX {
         interface AnchorHTMLAttributes<T> {
@@ -10,27 +10,6 @@ declare module "solid-js" {
         }
     }
 }
-export type RouterProps = {
-    base?: string;
-    actionBase?: string;
-    root?: Component<RouteSectionProps>;
-    children: JSX.Element;
-} & ({
-    url?: never;
-    source?: RouterIntegration | LocationChangeSignal;
-} | {
-    source?: never;
-    url: string;
-});
-export declare const Router: (props: RouterProps) => JSX.Element;
-export type RouteProps<S extends string> = {
-    path?: S | S[];
-    children?: JSX.Element;
-    load?: RouteLoadFunc;
-    matchFilters?: MatchFilters<S>;
-    component?: Component;
-};
-export declare const Route: <S extends string>(props: RouteProps<S>) => JSX.Element;
 export interface AnchorProps extends Omit<JSX.AnchorHTMLAttributes<HTMLAnchorElement>, "state"> {
     href: string;
     replace?: boolean | undefined;
@@ -41,7 +20,6 @@ export interface AnchorProps extends Omit<JSX.AnchorHTMLAttributes<HTMLAnchorEle
     end?: boolean | undefined;
 }
 export declare function A(props: AnchorProps): JSX.Element;
-export { A as Link, A as NavLink, AnchorProps as LinkProps, AnchorProps as NavLinkProps };
 export interface NavigateProps {
     href: ((args: {
         navigate: Navigator;

package/dist/components.jsx

@@ -1,85 +1,6 @@
-/*@refresh skip*/
-import { children, createMemo, createRoot, mergeProps, on, Show, splitProps } from "solid-js";
-import { isServer, getRequestEvent } from "solid-js/web";
-import { pathIntegration, staticIntegration } from "./integration";
-import { createBranches, createRouteContext, createRouterContext, getRouteMatches, RouteContextObj, RouterContextObj, useHref, useLocation, useNavigate, useResolvedPath } from "./routing";
-import { normalizePath, createMemoObject } from "./utils";
-export const Router = (props) => {
-    let e;
-    const { source, url, base, actionBase } = props;
-    const integration = source ||
-        (isServer
-            ? staticIntegration({
-                value: url || ((e = getRequestEvent()) && getPath(e.request.url)) || ""
-            })
-            : pathIntegration());
-    const routeDefs = children(() => props.children);
-    const branches = createMemo(() => createBranches(props.root ? { component: props.root, children: routeDefs() } : routeDefs(), props.base || ""));
-    const routerState = createRouterContext(integration, branches, { base, actionBase });
-    return (<RouterContextObj.Provider value={routerState}>
-      <Routes routerState={routerState} branches={branches()}/>
-    </RouterContextObj.Provider>);
-};
-function getPath(url) {
-    const u = new URL(url);
-    return u.pathname + u.search;
-}
-function Routes(props) {
-    const matches = createMemo(() => getRouteMatches(props.branches, props.routerState.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 disposers = [];
-    let root;
-    const routeStates = createMemo(on(matches, (nextMatches, prevMatches, prev) => {
-        let equal = prevMatches && nextMatches.length === prevMatches.length;
-        const next = [];
-        for (let i = 0, len = nextMatches.length; i < len; i++) {
-            const prevMatch = prevMatches && prevMatches[i];
-            const nextMatch = nextMatches[i];
-            if (prev && prevMatch && nextMatch.route.key === prevMatch.route.key) {
-                next[i] = prev[i];
-            }
-            else {
-                equal = false;
-                if (disposers[i]) {
-                    disposers[i]();
-                }
-                createRoot(dispose => {
-                    disposers[i] = dispose;
-                    next[i] = createRouteContext(props.routerState, next[i - 1] || props.routerState.base, createOutlet(() => routeStates()[i + 1]), () => matches()[i], params);
-                });
-            }
-        }
-        disposers.splice(nextMatches.length).forEach(dispose => dispose());
-        if (prev && equal) {
-            return prev;
-        }
-        root = next[0];
-        return next;
-    }));
-    return (<Show when={routeStates() && root} keyed>
-      {route => <RouteContextObj.Provider value={route}>{route.outlet()}</RouteContextObj.Provider>}
-    </Show>);
-}
-const createOutlet = (child) => {
-    return () => (<Show when={child()} keyed>
-      {child => <RouteContextObj.Provider value={child}>{child.outlet()}</RouteContextObj.Provider>}
-    </Show>);
-};
-export const Route = (props) => {
-    const childRoutes = children(() => props.children);
-    return mergeProps(props, {
-        get children() {
-            return childRoutes();
-        }
-    });
-};
+import { createMemo, mergeProps, splitProps } from "solid-js";
+import { useHref, useLocation, useNavigate, useResolvedPath } from "./routing";
+import { normalizePath } from "./utils";
 export function A(props) {
     props = mergeProps({ inactiveClass: "inactive", activeClass: "active" }, props);
     const [, rest] = splitProps(props, [
@@ -108,8 +29,6 @@ export function A(props) {
             ...rest.classList
         }} aria-current={isActive() ? "page" : undefined}/>);
 }
-// deprecated alias exports
-export { A as Link, A as NavLink };
 export function Navigate(props) {
     const navigate = useNavigate();
     const location = useLocation();

package/dist/data/action.d.ts

@@ -1,6 +1,7 @@
 import { JSX } from "solid-js";
 import { Submission } from "../types";
 export type Action<T, U> = ((vars: T) => Promise<U>) & JSX.SerializableAttributeValue;
+export declare const actions: Map<string, Function>;
 export declare function useSubmissions<T, U>(fn: Action<T, U>, filter?: (arg: T) => boolean): Submission<T, U>[] & {
     pending: boolean;
 };

package/dist/data/action.js

@@ -1,8 +1,9 @@
 import { $TRACK, createMemo, createSignal } from "solid-js";
 import { isServer } from "solid-js/web";
-import { registerAction, useRouter } from "../routing";
+import { useRouter } from "../routing";
 import { redirectStatusCodes } from "../utils";
 import { revalidate } from "./cache";
+export const actions = /* #__PURE__ */ new Map();
 export function useSubmissions(fn, filter) {
     const router = useRouter();
     const subs = createMemo(() => router.submissions[0]().filter(s => s.url === fn.toString() && (!filter || filter(s.input))));
@@ -18,26 +19,11 @@ export function useSubmissions(fn, filter) {
 }
 export function useSubmission(fn, filter) {
     const submissions = useSubmissions(fn, filter);
-    return {
-        get clear() {
-            return submissions[submissions.length - 1]?.clear;
-        },
-        get retry() {
-            return submissions[submissions.length - 1]?.retry;
-        },
-        get url() {
-            return submissions[submissions.length - 1]?.url;
-        },
-        get input() {
-            return submissions[submissions.length - 1]?.input;
-        },
-        get result() {
-            return submissions[submissions.length - 1]?.result;
-        },
-        get pending() {
-            return submissions[submissions.length - 1]?.pending;
+    return new Proxy({}, {
+        get(_, property) {
+            return submissions[submissions.length - 1]?.[property];
         }
-    };
+    });
 }
 export function useAction(action) {
     const router = useRouter();
@@ -86,23 +72,30 @@ export function action(fn, name) {
         return url;
     };
     if (!isServer)
-        registerAction(url, mutate);
+        actions.set(url, mutate);
     return mutate;
 }
 async function handleResponse(response, navigate) {
     let data;
-    if (response instanceof Response && redirectStatusCodes.has(response.status)) {
-        const locationUrl = response.headers.get("Location") || "/";
-        if (locationUrl.startsWith("http")) {
-            window.location.href = locationUrl;
+    let keys;
+    if (response instanceof Response) {
+        if (response.headers.has("X-Revalidate")) {
+            keys = response.headers.get("X-Revalidate").split(",");
         }
-        else {
-            navigate(locationUrl);
+        if (response.customBody)
+            data = await response.customBody();
+        if (redirectStatusCodes.has(response.status)) {
+            const locationUrl = response.headers.get("Location") || "/";
+            if (locationUrl.startsWith("http")) {
+                window.location.href = locationUrl;
+            }
+            else {
+                navigate(locationUrl);
+            }
         }
     }
     else
         data = response;
-    // TODO: handle keys
-    await revalidate();
+    await revalidate(keys);
     return data;
 }

package/dist/data/cache.d.ts

@@ -1,3 +1,7 @@
 import { type ReconcileOptions } from "solid-js/store";
-export declare function revalidate(key?: string | any[] | void): Promise<void>;
-export declare function cache<T extends (...args: any) => U | Response, U>(fn: T, name: string, options?: ReconcileOptions): T;
+export declare function revalidate(key?: string | string[] | void): Promise<void>;
+export type CachedFunction<T extends (...args: any) => U | Response, U> = T & {
+    keyFor: (...args: Parameters<T>) => string;
+    key: string;
+};
+export declare function cache<T extends (...args: any) => U | Response, U>(fn: T, name: string, options?: ReconcileOptions): CachedFunction<T, U>;

package/dist/data/cache.js

@@ -5,7 +5,19 @@ import { useNavigate, getIntent } from "../routing";
 import { redirectStatusCodes } from "../utils";
 const LocationHeader = "Location";
 const PRELOAD_TIMEOUT = 5000;
+const CACHE_TIMEOUT = 180000;
 let cacheMap = new Map();
+// cleanup forward/back cache
+if (!isServer) {
+    setInterval(() => {
+        const now = Date.now();
+        for (let [k, v] of cacheMap.entries()) {
+            if (!v[3].size && now - v[0] > CACHE_TIMEOUT) {
+                cacheMap.delete(k);
+            }
+        }
+    }, 300000);
+}
 function getCache() {
     if (!isServer)
         return cacheMap;
@@ -13,13 +25,14 @@ function getCache() {
     return req.routerCache || (req.routerCache = new Map());
 }
 export function revalidate(key) {
+    key && !Array.isArray(key) && (key = [key]);
     return startTransition(() => {
         const now = Date.now();
         for (let k of cacheMap.keys()) {
-            if (key === undefined || k === key) {
-                const set = cacheMap.get(k)[3];
-                revalidateSignals(set, now);
-                cacheMap.delete(k);
+            if (key === undefined || matchKey(k, key)) {
+                const entry = cacheMap.get(k);
+                entry[0] = 0; //force cache miss
+                revalidateSignals(entry[3], now); // retrigger live signals
             }
         }
     });
@@ -30,13 +43,13 @@ function revalidateSignals(set, time) {
 }
 export function cache(fn, name, options) {
     const [store, setStore] = createStore({});
-    return ((...args) => {
+    const cachedFn = ((...args) => {
         const cache = getCache();
         const intent = getIntent();
         const owner = getOwner();
         const navigate = owner ? useNavigate() : undefined;
         const now = Date.now();
-        const key = name + (args.length ? ":" + args.join(":") : "");
+        const key = name + hashKey(args);
         let cached = cache.get(key);
         let version;
         if (owner) {
@@ -53,9 +66,10 @@ export function cache(fn, name, options) {
             }
             let res = cached[1];
             if (!isServer && intent === "navigate") {
-                res = "then" in cached[1]
-                    ? cached[1].then(handleResponse(false), handleResponse(true))
-                    : handleResponse(false)(cached[1]);
+                res =
+                    "then" in cached[1]
+                        ? cached[1].then(handleResponse(false), handleResponse(true))
+                        : handleResponse(false)(cached[1]);
                 startTransition(() => revalidateSignals(cached[3], cached[0])); // update version
             }
             return res;
@@ -79,9 +93,10 @@ export function cache(fn, name, options) {
         else
             cache.set(key, (cached = [now, res, intent, new Set(version ? [version] : [])]));
         if (intent !== "preload") {
-            res = "then" in res
-                ? res.then(handleResponse(false), handleResponse(true))
-                : handleResponse(false)(res);
+            res =
+                "then" in res
+                    ? res.then(handleResponse(false), handleResponse(true))
+                    : handleResponse(false)(res);
         }
         return res;
         function handleResponse(error) {
@@ -111,4 +126,32 @@ export function cache(fn, name, options) {
             };
         }
     });
+    cachedFn.keyFor = (...args) => name + hashKey(args);
+    cachedFn.key = name;
+    return cachedFn;
+}
+function matchKey(key, keys) {
+    for (let k of keys) {
+        if (key.startsWith(k))
+            return true;
+    }
+    return false;
+}
+// Modified from the amazing Tanstack Query library (MIT)
+// https://github.com/TanStack/query/blob/main/packages/query-core/src/utils.ts#L168
+function hashKey(args) {
+    return JSON.stringify(args, (_, val) => isPlainObject(val)
+        ? Object.keys(val)
+            .sort()
+            .reduce((result, key) => {
+            result[key] = val[key];
+            return result;
+        }, {})
+        : val);
+}
+function isPlainObject(obj) {
+    let proto;
+    return (obj != null &&
+        typeof obj === "object" &&
+        (!(proto = Object.getPrototypeOf(obj)) || proto === Object.prototype));
 }

package/dist/data/events.d.ts

@@ -0,0 +1,2 @@
+import type { RouterContext } from "../types";
+export declare function setupNativeEvents(router: RouterContext): void;

package/dist/data/events.js

@@ -0,0 +1,116 @@
+import { delegateEvents } from "solid-js/web";
+import { onCleanup } from "solid-js";
+import { actions } from "./action";
+export function setupNativeEvents(router) {
+    const basePath = router.base.path();
+    const navigateFromRoute = router.navigatorFactory(router.base);
+    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 ||
+            evt.altKey ||
+            evt.ctrlKey ||
+            evt.shiftKey)
+            return;
+        const a = evt
+            .composedPath()
+            .find(el => el instanceof Node && el.nodeName.toUpperCase() === "A");
+        if (!a)
+            return;
+        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 = 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 = router.parsePath(url.pathname + url.search + url.hash);
+        const state = a.getAttribute("state");
+        evt.preventDefault();
+        navigateFromRoute(to, {
+            resolve: false,
+            replace: a.hasAttribute("replace"),
+            scroll: !a.hasAttribute("noscroll"),
+            state: state && JSON.parse(state)
+        });
+    }
+    function handleAnchorPreload(evt) {
+        const res = handleAnchor(evt);
+        if (!res)
+            return;
+        const [a, url] = res;
+        if (!preloadTimeout[url.pathname])
+            router.preloadRoute(url, a.getAttribute("preload") !== "false");
+    }
+    function handleAnchorIn(evt) {
+        const res = handleAnchor(evt);
+        if (!res)
+            return;
+        const [a, url] = res;
+        if (preloadTimeout[url.pathname])
+            return;
+        preloadTimeout[url.pathname] = setTimeout(() => {
+            router.preloadRoute(url, a.getAttribute("preload") !== "false");
+            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)
+            return;
+        if (!actionRef.startsWith("action:")) {
+            const url = new URL(actionRef);
+            actionRef = router.parsePath(url.pathname + url.search);
+            if (!actionRef.startsWith(router.actionBase))
+                return;
+        }
+        const handler = actions.get(actionRef);
+        if (handler) {
+            evt.preventDefault();
+            const data = new FormData(evt.target);
+            handler.call(router, data);
+        }
+    }
+    // ensure delegated event run first
+    delegateEvents(["click", "submit"]);
+    document.addEventListener("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);
+    });
+}

package/dist/data/index.d.ts

@@ -1,4 +1,4 @@
 export { createAsync } from "./createAsync";
-export { action, useSubmission, useSubmissions, useAction } from "./action";
-export { cache, revalidate } from "./cache";
+export { action, useSubmission, useSubmissions, useAction, type Action } from "./action";
+export { cache, revalidate, type CachedFunction } from "./cache";
 export { redirect } from "./response";

package/dist/data/response.d.ts

@@ -1 +1,5 @@
-export declare function redirect(url: string, init?: number | ResponseInit): Response;
+export type RouterResponseInit = ResponseInit & {
+    revalidate?: string | string[];
+};
+export declare function redirect(url: string, init?: number | RouterResponseInit): Response;
+export declare function reload(init: RouterResponseInit): Response;

package/dist/data/response.js

@@ -1,16 +1,28 @@
 export function redirect(url, init = 302) {
-    let responseInit = init;
-    if (typeof responseInit === "number") {
-        responseInit = { status: responseInit };
+    let responseInit;
+    let revalidate;
+    if (typeof init === "number") {
+        responseInit = { status: init };
     }
-    else if (typeof responseInit.status === "undefined") {
-        responseInit.status = 302;
+    else {
+        ({ revalidate, ...responseInit } = init);
+        if (typeof responseInit.status === "undefined") {
+            responseInit.status = 302;
+        }
     }
     const headers = new Headers(responseInit.headers);
     headers.set("Location", url);
+    revalidate && headers.set("X-Revalidate", revalidate.toString());
     const response = new Response(null, {
         ...responseInit,
         headers: headers
     });
     return response;
 }
+export function reload(init) {
+    const { revalidate, ...responseInit } = init;
+    return new Response(null, {
+        ...responseInit,
+        ...(revalidate ? { headers: new Headers(responseInit.headers).set("X-Revalidate", revalidate.toString()) } : {})
+    });
+}

package/dist/index.d.ts

@@ -1,7 +1,7 @@
+export * from "./routers";
 export * from "./components";
-export * from "./integration";
 export * from "./lifecycle";
 export { useHref, useIsRouting, useLocation, useMatch, useNavigate, useParams, useResolvedPath, useSearchParams, useBeforeLeave, } from "./routing";
 export { mergeSearchString as _mergeSearchString } from "./utils";
 export * from "./data";
-export type { Location, LocationChange, LocationChangeSignal, NavigateOptions, Navigator, OutputMatch, Params, RouteSectionProps, RouteLoadFunc, RouteLoadFuncArgs, RouteDefinition, RouterIntegration, RouterOutput, RouterUtils, SetParams, BeforeLeaveEventArgs } from "./types";
+export type { Location, LocationChange, NavigateOptions, Navigator, OutputMatch, Params, RouteSectionProps, RouteLoadFunc, RouteLoadFuncArgs, RouteDefinition, RouterIntegration, RouterOutput, RouterUtils, SetParams, BeforeLeaveEventArgs } from "./types";