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

package/README.md

@@ -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";
 
-<Router source={memoryIntegration()} />;
+<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 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,8 @@
 /*@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();
-        }
-    });
-};
+"use client";
+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 +31,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,7 +72,7 @@ export function action(fn, name) {
         return url;
     };
     if (!isServer)
-        registerAction(url, mutate);
+        actions.set(url, mutate);
     return mutate;
 }
 async function handleResponse(response, navigate) {

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/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";