@solidjs/router 0.9.0 → 0.10.0-beta.0

package/dist/components.d.ts

@@ -1,20 +1,19 @@
 import type { Component, JSX } from "solid-js";
-import type { Location, LocationChangeSignal, MatchFilters, Navigator, RouteDataFunc, RouteDefinition, RouterIntegration } from "./types";
+import type { Location, LocationChangeSignal, MatchFilters, Navigator, RouteLoadFunc, RouterIntegration, RouteSectionProps } from "./types";
 declare module "solid-js" {
     namespace JSX {
         interface AnchorHTMLAttributes<T> {
             state?: string;
             noScroll?: boolean;
             replace?: boolean;
-            link?: boolean;
+            preload?: boolean;
         }
     }
 }
 export type RouterProps = {
     base?: string;
-    data?: RouteDataFunc;
+    root?: Component<RouteSectionProps>;
     children: JSX.Element;
-    out?: object;
 } & ({
     url?: never;
     source?: RouterIntegration | LocationChangeSignal;
@@ -23,27 +22,14 @@ export type RouterProps = {
     url: string;
 });
 export declare const Router: (props: RouterProps) => JSX.Element;
-export interface RoutesProps {
-    base?: string;
-    children: JSX.Element;
-}
-export declare const Routes: (props: RoutesProps) => JSX.Element;
-export declare const useRoutes: (routes: RouteDefinition | RouteDefinition[] | Readonly<RouteDefinition[]>, base?: string) => () => JSX.Element;
 export type RouteProps<S extends string> = {
-    path: S | S[];
+    path?: S | S[];
     children?: JSX.Element;
-    data?: RouteDataFunc;
+    load?: RouteLoadFunc;
     matchFilters?: MatchFilters<S>;
-} & ({
-    element?: never;
-    component: Component;
-} | {
-    component?: never;
-    element?: JSX.Element;
-    preload?: () => void;
-});
+    component?: Component;
+};
 export declare const Route: <S extends string>(props: RouteProps<S>) => JSX.Element;
-export declare const Outlet: () => JSX.Element;
 export interface AnchorProps extends Omit<JSX.AnchorHTMLAttributes<HTMLAnchorElement>, "state"> {
     href: string;
     replace?: boolean | undefined;

package/dist/components.jsx

@@ -2,24 +2,29 @@
 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, useRoute, useRouter } from "./routing";
-import { joinPaths, normalizePath, createMemoObject } from "./utils";
+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, data, out } = props;
+    const { source, url, base } = props;
     const integration = source ||
         (isServer
             ? staticIntegration({ value: url || ((e = getRequestEvent()) && e.request.url) || "" })
             : pathIntegration());
-    const routerState = createRouterContext(integration, base, data, out);
-    return (<RouterContextObj.Provider value={routerState}>{props.children}</RouterContextObj.Provider>);
+    const routeDefs = children(() => props.root
+        ? {
+            component: props.root,
+            children: props.children
+        }
+        : props.children);
+    const branches = createMemo(() => createBranches(routeDefs(), props.base || ""));
+    const routerState = createRouterContext(integration, branches, base);
+    return (<RouterContextObj.Provider value={routerState}>
+      <Routes routerState={routerState} branches={branches()}/>
+    </RouterContextObj.Provider>);
 };
-export const Routes = (props) => {
-    const router = useRouter();
-    const parentRoute = useRoute();
-    const routeDefs = children(() => props.children);
-    const branches = createMemo(() => createBranches(routeDefs(), joinPaths(parentRoute.pattern, props.base || ""), Outlet));
-    const matches = createMemo(() => getRouteMatches(branches(), router.location.pathname));
+function Routes(props) {
+    const matches = createMemo(() => getRouteMatches(props.branches, props.routerState.location.pathname));
     const params = createMemoObject(() => {
         const m = matches();
         const params = {};
@@ -28,14 +33,6 @@ export const Routes = (props) => {
         }
         return params;
     });
-    if (router.out) {
-        router.out.matches.push(matches().map(({ route, path, params }) => ({
-            originalPath: route.originalPath,
-            pattern: route.pattern,
-            path,
-            params
-        })));
-    }
     const disposers = [];
     let root;
     const routeStates = createMemo(on(matches, (nextMatches, prevMatches, prev) => {
@@ -54,7 +51,7 @@ export const Routes = (props) => {
                 }
                 createRoot(dispose => {
                     disposers[i] = dispose;
-                    next[i] = createRouteContext(router, next[i - 1] || parentRoute, () => routeStates()[i + 1], () => matches()[i], params);
+                    next[i] = createRouteContext(props.routerState, next[i - 1] || props.routerState.base, createOutlet(() => routeStates()[i + 1]), () => matches()[i], params);
                 });
             }
         }
@@ -68,9 +65,11 @@ export const Routes = (props) => {
     return (<Show when={routeStates() && root} keyed>
       {route => <RouteContextObj.Provider value={route}>{route.outlet()}</RouteContextObj.Provider>}
     </Show>);
-};
-export const useRoutes = (routes, base) => {
-    return () => <Routes base={base}>{routes}</Routes>;
+}
+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);
@@ -80,12 +79,6 @@ export const Route = (props) => {
         }
     });
 };
-export const Outlet = () => {
-    const route = useRoute();
-    return (<Show when={route.child} keyed>
-      {child => <RouteContextObj.Provider value={child}>{child.outlet()}</RouteContextObj.Provider>}
-    </Show>);
-};
 export function A(props) {
     props = mergeProps({ inactiveClass: "inactive", activeClass: "active" }, props);
     const [, rest] = splitProps(props, [
@@ -107,7 +100,7 @@ export function A(props) {
         const loc = normalizePath(location.pathname).toLowerCase();
         return props.end ? path === loc : loc.startsWith(path);
     });
-    return (<a link {...rest} href={href() || props.href} state={JSON.stringify(props.state)} classList={{
+    return (<a {...rest} href={href() || props.href} state={JSON.stringify(props.state)} classList={{
             ...(props.class && { [props.class]: true }),
             [props.inactiveClass]: !isActive(),
             [props.activeClass]: isActive(),

package/dist/data/action.d.ts

@@ -0,0 +1,8 @@
+import { Submission } from "../types";
+export type Action<T, U> = (vars: T) => Promise<U>;
+export declare function useSubmissions<T, U>(fn: Action<T, U>, filter?: (arg: T) => boolean): Submission<T, U>[] & {
+    pending: boolean;
+};
+export declare function useSubmission<T, U>(fn: Action<T, U>, filter?: (arg: T) => boolean): Submission<T, U>;
+export declare function useAction<T, U>(action: Action<T, U>): Action<T, U>;
+export declare function action<T, U = void>(fn: (args: T) => Promise<U>, name?: string): Action<T, U>;

package/dist/data/action.js

@@ -0,0 +1,113 @@
+import { $TRACK, createMemo, createSignal } from "solid-js";
+import { isServer } from "solid-js/web";
+import { registerAction, useRouter } from "../routing";
+import { redirectStatusCodes } from "../utils";
+import { revalidate } from "./cache";
+export function useSubmissions(fn, filter) {
+    const router = useRouter();
+    const subs = createMemo(() => router.submissions[0]().filter(s => s.url === fn.toString() && (!filter || filter(s.input))));
+    return new Proxy([], {
+        get(_, property) {
+            if (property === $TRACK)
+                return subs();
+            if (property === "pending")
+                return subs().some(sub => !sub.result);
+            return subs()[property];
+        }
+    });
+}
+export function useSubmission(fn, filter) {
+    const submissions = useSubmissions(fn, filter);
+    return {
+        get clear() {
+            return submissions[0]?.clear;
+        },
+        get retry() {
+            return submissions[0]?.retry;
+        },
+        get url() {
+            return submissions[0]?.url;
+        },
+        get input() {
+            return submissions[0]?.input;
+        },
+        get result() {
+            return submissions[0]?.result;
+        },
+        get pending() {
+            return submissions[0]?.pending;
+        }
+    };
+}
+export function useAction(action) {
+    const router = useRouter();
+    return action.bind(router);
+}
+export function action(fn, name) {
+    function mutate(variables) {
+        const p = fn(variables);
+        const [result, setResult] = createSignal();
+        let submission;
+        const router = this;
+        router.submissions[1](s => [
+            ...s,
+            (submission = {
+                input: variables,
+                url,
+                get result() {
+                    return result()?.data;
+                },
+                get pending() {
+                    return !result();
+                },
+                clear() {
+                    router.submissions[1](v => v.filter(i => i.input !== variables));
+                },
+                retry() {
+                    setResult(undefined);
+                    const p = fn(variables);
+                    p.then(async (data) => {
+                        const keys = handleResponse(data, router.navigatorFactory());
+                        await revalidate(keys);
+                        data ? setResult({ data }) : submission.clear();
+                        return data;
+                    }).catch(error => {
+                        setResult({ data: error });
+                    });
+                    return p;
+                }
+            })
+        ]);
+        p.then(async (data) => {
+            const keys = handleResponse(data, router.navigatorFactory());
+            await revalidate(keys);
+            data ? setResult({ data }) : submission.clear();
+            return data;
+        }).catch(error => {
+            setResult({ data: error });
+        });
+        return p;
+    }
+    const url = fn.url || `action:${name}` || !isServer ? `action:${fn.name}` : "";
+    mutate.toString = () => {
+        if (!url)
+            throw new Error("Client Actions need explicit names if server rendered");
+        return url;
+    };
+    if (!isServer)
+        registerAction(url, mutate);
+    return mutate;
+}
+function handleResponse(response, navigate) {
+    if (response instanceof Response && redirectStatusCodes.has(response.status)) {
+        const locationUrl = response.headers.get("Location") || "/";
+        if (locationUrl.startsWith("http")) {
+            window.location.href = locationUrl;
+        }
+        else {
+            navigate(locationUrl);
+        }
+    }
+    // return keys
+    return;
+}

package/dist/data/cache.d.ts

@@ -0,0 +1,3 @@
+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;

package/dist/data/cache.js

@@ -0,0 +1,106 @@
+import { createSignal, getOwner, onCleanup, sharedConfig, startTransition } from "solid-js";
+import { createStore, reconcile } from "solid-js/store";
+import { getRequestEvent, isServer } from "solid-js/web";
+import { useNavigate, getIntent } from "../routing";
+import { redirectStatusCodes } from "../utils";
+const LocationHeader = "Location";
+const PRELOAD_TIMEOUT = 5000;
+let cacheMap = new Map();
+function getCache() {
+    if (!isServer)
+        return cacheMap;
+    const req = getRequestEvent() || sharedConfig.context;
+    return req.routerCache || (req.routerCache = new Map());
+}
+export function revalidate(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);
+            }
+        }
+    });
+}
+function revalidateSignals(set, time) {
+    for (let s of set)
+        s[1](time);
+}
+export function cache(fn, name, options) {
+    const [store, setStore] = createStore({});
+    return ((...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(":") : "");
+        let cached = cache.get(key);
+        let version;
+        if (owner) {
+            version = createSignal(now, {
+                equals: (p, v) => v - p < 50 // margin of error
+            });
+            onCleanup(() => cached[3].delete(version));
+            version[0](); // track it;
+        }
+        if (cached && (isServer || intent === "native" || Date.now() - cached[0] < PRELOAD_TIMEOUT)) {
+            version && cached[3].add(version);
+            if (cached[2] === "preload" && intent !== "preload") {
+                cached[0] = now;
+                cached[1] =
+                    "then" in cached[1]
+                        ? cached[1].then(handleResponse)
+                        : handleResponse(cached[1]);
+                cached[2] = intent;
+            }
+            if (!isServer && intent === "navigate") {
+                startTransition(() => revalidateSignals(cached[3], cached[0])); // update version
+            }
+            return cached[1];
+        }
+        let res = fn(...args);
+        if (intent !== "preload") {
+            res =
+                "then" in res
+                    ? res.then(handleResponse)
+                    : handleResponse(res);
+        }
+        if (cached) {
+            cached[0] = now;
+            cached[1] = res;
+            cached[2] = intent;
+            version && cached[3].add(version);
+            if (!isServer && intent === "navigate") {
+                startTransition(() => revalidateSignals(cached[3], cached[0])); // update version
+            }
+        }
+        else
+            cache.set(key, (cached = [now, res, intent, new Set(version ? [version] : [])]));
+        return res;
+        function handleRedirect(response) {
+            startTransition(() => {
+                let url = response.headers.get(LocationHeader);
+                if (url && url.startsWith("/")) {
+                    navigate(url, {
+                        replace: true
+                    });
+                }
+                else if (!isServer && url) {
+                    window.location.href = url;
+                }
+            });
+        }
+        function handleResponse(v) {
+            if (v instanceof Response && redirectStatusCodes.has(v.status)) {
+                if (navigate)
+                    isServer ? handleRedirect(v) : setTimeout(() => handleRedirect(v), 0);
+                return;
+            }
+            setStore(key, reconcile(v, options));
+            return store[key];
+        }
+    });
+}

package/dist/data/createAsync.d.ts

@@ -0,0 +1,5 @@
+/**
+ * This is mock of the eventual Solid 2.0 primitive. It is not fully featured.
+ */
+import { Accessor } from "solid-js";
+export declare function createAsync<T>(fn: () => Promise<T>): Accessor<T>;

package/dist/data/createAsync.js

@@ -0,0 +1,8 @@
+/**
+ * This is mock of the eventual Solid 2.0 primitive. It is not fully featured.
+ */
+import { createResource } from "solid-js";
+export function createAsync(fn) {
+    const [resource] = createResource(() => fn(), v => v);
+    return () => resource();
+}

package/dist/data/index.d.ts

@@ -0,0 +1,3 @@
+export { createAsync } from "./createAsync";
+export { action, useSubmission, useSubmissions } from "./action";
+export { cache, revalidate } from "./cache";

package/dist/data/index.js

@@ -0,0 +1,3 @@
+export { createAsync } from "./createAsync";
+export { action, useSubmission, useSubmissions } from "./action";
+export { cache, revalidate } from "./cache";

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 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 type { Location, LocationChange, LocationChangeSignal, NavigateOptions, Navigator, OutputMatch, Params, RouteDataFunc, RouteDataFuncArgs, RouteDefinition, RouterIntegration, RouterOutput, RouterUtils, SetParams, BeforeLeaveEventArgs } from "./types";
+export * from "./data";
+export type { Location, LocationChange, LocationChangeSignal, NavigateOptions, Navigator, OutputMatch, Params, RouteLoadFunc, RouteLoadFuncArgs, RouteDefinition, RouterIntegration, RouterOutput, RouterUtils, SetParams, BeforeLeaveEventArgs } from "./types";