@solidjs/router 0.4.2

package/dist/index.jsx

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

package/dist/integration.d.ts

@@ -0,0 +1,6 @@
+import type { LocationChange, LocationChangeSignal, RouterIntegration, RouterUtils } from "./types";
+export declare function createIntegration(get: () => string | LocationChange, set: (next: LocationChange) => void, init?: (notify: (value?: string | LocationChange) => void) => () => void, utils?: Partial<RouterUtils>): RouterIntegration;
+export declare function normalizeIntegration(integration: RouterIntegration | LocationChangeSignal | undefined): RouterIntegration;
+export declare function staticIntegration(obj: LocationChange): RouterIntegration;
+export declare function pathIntegration(): RouterIntegration;
+export declare function hashIntegration(): RouterIntegration;

package/dist/integration.js

@@ -0,0 +1,105 @@
+import { createSignal, onCleanup } from "solid-js";
+function bindEvent(target, type, handler) {
+    target.addEventListener(type, handler);
+    return () => target.removeEventListener(type, handler);
+}
+function intercept([value, setValue], get, set) {
+    return [get ? () => get(value()) : value, set ? (v) => setValue(set(v)) : setValue];
+}
+function querySelector(selector) {
+    // Guard against selector being an invalid CSS selector
+    try {
+        return document.querySelector(selector);
+    }
+    catch (e) {
+        return null;
+    }
+}
+function scrollToHash(hash, fallbackTop) {
+    const el = querySelector(`#${hash}`);
+    if (el) {
+        el.scrollIntoView();
+    }
+    else if (fallbackTop) {
+        window.scrollTo(0, 0);
+    }
+}
+export function createIntegration(get, set, init, utils) {
+    let ignore = false;
+    const wrap = (value) => (typeof value === "string" ? { value } : value);
+    const signal = intercept(createSignal(wrap(get()), { equals: (a, b) => a.value === b.value }), undefined, next => {
+        !ignore && set(next);
+        return next;
+    });
+    init &&
+        onCleanup(init((value = get()) => {
+            ignore = true;
+            signal[1](wrap(value));
+            ignore = false;
+        }));
+    return {
+        signal,
+        utils
+    };
+}
+export function normalizeIntegration(integration) {
+    if (!integration) {
+        return {
+            signal: createSignal({ value: "" })
+        };
+    }
+    else if (Array.isArray(integration)) {
+        return {
+            signal: integration
+        };
+    }
+    return integration;
+}
+export function staticIntegration(obj) {
+    return {
+        signal: [() => obj, next => Object.assign(obj, next)]
+    };
+}
+export function pathIntegration() {
+    return createIntegration(() => ({
+        value: window.location.pathname + window.location.search + window.location.hash,
+        state: history.state
+    }), ({ value, replace, scroll, state }) => {
+        if (replace) {
+            window.history.replaceState(state, "", value);
+        }
+        else {
+            window.history.pushState(state, "", value);
+        }
+        scrollToHash(window.location.hash.slice(1), scroll);
+    }, notify => bindEvent(window, "popstate", () => notify()), {
+        go: delta => window.history.go(delta)
+    });
+}
+export function hashIntegration() {
+    return createIntegration(() => window.location.hash.slice(1), ({ value, replace, scroll, state }) => {
+        if (replace) {
+            window.history.replaceState(state, "", "#" + value);
+        }
+        else {
+            window.location.hash = value;
+        }
+        const hashIndex = value.indexOf("#");
+        const hash = hashIndex >= 0 ? value.slice(hashIndex + 1) : "";
+        scrollToHash(hash, scroll);
+    }, notify => bindEvent(window, "hashchange", () => notify()), {
+        go: delta => window.history.go(delta),
+        renderPath: path => `#${path}`,
+        parsePath: str => {
+            const to = str.replace(/^.*?#/, "");
+            // Hash-only hrefs like `#foo` from plain anchors will come in as `/#foo` whereas a link to
+            // `/foo` will be `/#/foo`. Check if the to starts with a `/` and if not append it as a hash
+            // to the current path so we can handle these in-page anchors correctly.
+            if (!to.startsWith("/")) {
+                const [, path = "/"] = window.location.hash.split("#", 2);
+                return `${path}#${to}`;
+            }
+            return to;
+        }
+    });
+}

package/dist/routing.d.ts

@@ -0,0 +1,24 @@
+import type { Component, Accessor } from "solid-js";
+import type { Branch, Location, LocationChangeSignal, NavigateOptions, Navigator, Params, Route, RouteContext, RouteDataFunc, 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;
+export declare const useRoute: () => RouteContext;
+export declare const useResolvedPath: (path: () => string) => Accessor<string | undefined>;
+export declare const useHref: (to: () => string | undefined) => Accessor<string | undefined>;
+export declare const useNavigate: () => Navigator;
+export declare const useLocation: <S = unknown>() => Location<S>;
+export declare const useIsRouting: () => () => boolean;
+export declare const useMatch: (path: () => string) => Accessor<import("./types").PathMatch | null>;
+export declare const useParams: <T extends Params>() => T;
+declare 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<unknown>> | undefined) => void];
+export declare function createRoutes(routeDef: RouteDefinition, base?: string, fallback?: Component): 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 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): RouteContext;
+export {};

package/dist/routing.js

@@ -0,0 +1,377 @@
+import { createComponent, createContext, createMemo, createRenderEffect, createSignal, on, onCleanup, untrack, useContext, useTransition, resetErrorBoundaries } from "solid-js";
+import { isServer } from "solid-js/web";
+import { normalizeIntegration } from "./integration";
+import { createMemoObject, extractSearchParams, invariant, resolvePath, createMatcher, joinPaths, scoreRoute, mergeSearchString, urlDecode, expandOptionals } from "./utils";
+const MAX_REDIRECTS = 100;
+export const RouterContextObj = createContext();
+export const RouteContextObj = createContext();
+export const useRouter = () => invariant(useContext(RouterContextObj), "Make sure your app is wrapped in a <Router />");
+let TempRoute;
+export const useRoute = () => TempRoute || useContext(RouteContextObj) || useRouter().base;
+export const useResolvedPath = (path) => {
+    const route = useRoute();
+    return createMemo(() => route.resolvePath(path()));
+};
+export const useHref = (to) => {
+    const router = useRouter();
+    return createMemo(() => {
+        const to_ = to();
+        return to_ !== undefined ? router.renderPath(to_) : to_;
+    });
+};
+export const useNavigate = () => useRouter().navigatorFactory();
+export const useLocation = () => useRouter().location;
+export const useIsRouting = () => useRouter().isRouting;
+export const useMatch = (path) => {
+    const location = useLocation();
+    const matcher = createMemo(() => createMatcher(path()));
+    return createMemo(() => matcher()(location.pathname));
+};
+export const useParams = () => useRoute().params;
+export const useRouteData = () => useRoute().data;
+export const useSearchParams = () => {
+    const location = useLocation();
+    const navigate = useNavigate();
+    const setSearchParams = (params, options) => {
+        const searchString = untrack(() => mergeSearchString(location.search, params));
+        navigate(searchString, { scroll: false, ...options, resolve: true });
+    };
+    return [location.query, setSearchParams];
+};
+export function createRoutes(routeDef, base = "", fallback) {
+    const { component, data, 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
+    };
+    return asArray(routeDef.path).reduce((acc, path) => {
+        for (const originalPath of expandOptionals(path)) {
+            const path = joinPaths(base, originalPath);
+            const pattern = isLeaf ? path : path.split("/*", 1)[0];
+            acc.push({
+                ...shared,
+                originalPath,
+                pattern,
+                matcher: createMatcher(pattern, !isLeaf)
+            });
+        }
+        return acc;
+    }, []);
+}
+export function createBranch(routes, index = 0) {
+    return {
+        routes,
+        score: scoreRoute(routes[routes.length - 1]) * 10000 - index,
+        matcher(location) {
+            const matches = [];
+            for (let i = routes.length - 1; i >= 0; i--) {
+                const route = routes[i];
+                const match = route.matcher(location);
+                if (!match) {
+                    return null;
+                }
+                matches.unshift({
+                    ...match,
+                    route
+                });
+            }
+            return matches;
+        }
+    };
+}
+function asArray(value) {
+    return Array.isArray(value) ? value : [value];
+}
+export function createBranches(routeDef, base = "", fallback, 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);
+            for (const route of routes) {
+                stack.push(route);
+                if (def.children) {
+                    createBranches(def.children, route.pattern, fallback, stack, branches);
+                }
+                else {
+                    const branch = createBranch([...stack], branches.length);
+                    branches.push(branch);
+                }
+                stack.pop();
+            }
+        }
+    }
+    // Stack will be empty on final return
+    return stack.length ? branches : branches.sort((a, b) => b.score - a.score);
+}
+export function getRouteMatches(branches, location) {
+    for (let i = 0, len = branches.length; i < len; i++) {
+        const match = branches[i].matcher(location);
+        if (match) {
+            return match;
+        }
+    }
+    return [];
+}
+export function createLocation(path, state) {
+    const origin = new URL("http://sar");
+    const url = createMemo(prev => {
+        const path_ = path();
+        try {
+            return new URL(path_, origin);
+        }
+        catch (err) {
+            console.error(`Invalid path ${path_}`);
+            return prev;
+        }
+    }, origin, {
+        equals: (a, b) => a.href === b.href
+    });
+    const pathname = createMemo(() => urlDecode(url().pathname));
+    const search = createMemo(() => urlDecode(url().search, true));
+    const hash = createMemo(() => urlDecode(url().hash));
+    const key = createMemo(() => "");
+    return {
+        get pathname() {
+            return pathname();
+        },
+        get search() {
+            return search();
+        },
+        get hash() {
+            return hash();
+        },
+        get state() {
+            return state();
+        },
+        get key() {
+            return key();
+        },
+        query: createMemoObject(on(search, () => extractSearchParams(url())))
+    };
+}
+export function createRouterContext(integration, base = "", data, out) {
+    const { signal: [source, setSource], utils = {} } = normalizeIntegration(integration);
+    const parsePath = utils.parsePath || (p => p);
+    const renderPath = utils.renderPath || (p => p);
+    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`);
+    }
+    else if (basePath && !source().value) {
+        setSource({ value: basePath, replace: true, scroll: false });
+    }
+    const [isRouting, start] = useTransition();
+    const [reference, setReference] = createSignal(source().value);
+    const [state, setState] = createSignal(source().state);
+    const location = createLocation(reference, state);
+    const referrers = [];
+    const baseRoute = {
+        pattern: basePath,
+        params: {},
+        path: () => basePath,
+        outlet: () => null,
+        resolvePath(to) {
+            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(() => {
+            if (typeof to === "number") {
+                if (!to) {
+                    // A delta of 0 means stay at the current location, so it is ignored
+                }
+                else if (utils.go) {
+                    utils.go(to);
+                }
+                else {
+                    console.warn("Router integration does not support relative routing");
+                }
+                return;
+            }
+            const { replace, resolve, scroll, state: nextState } = {
+                replace: false,
+                resolve: true,
+                scroll: true,
+                ...options
+            };
+            const resolvedTo = resolve ? route.resolvePath(to) : resolvePath("", to);
+            if (resolvedTo === undefined) {
+                throw new Error(`Path '${to}' is not a routable path`);
+            }
+            else if (referrers.length >= MAX_REDIRECTS) {
+                throw new Error("Too many redirects");
+            }
+            const current = reference();
+            if (resolvedTo !== current || nextState !== state()) {
+                if (isServer) {
+                    if (output) {
+                        output.url = resolvedTo;
+                    }
+                    setSource({ value: resolvedTo, replace, scroll, state: nextState });
+                }
+                else {
+                    const len = referrers.push({ value: current, replace, scroll, state: state() });
+                    start(() => {
+                        setReference(resolvedTo);
+                        setState(nextState);
+                        resetErrorBoundaries();
+                    }).then(() => {
+                        if (referrers.length === len) {
+                            navigateEnd({
+                                value: resolvedTo,
+                                state: nextState
+                            });
+                        }
+                    });
+                }
+            }
+        });
+    }
+    function navigatorFactory(route) {
+        // Workaround for vite issue (https://github.com/vitejs/vite/issues/3803)
+        route = route || useContext(RouteContextObj) || baseRoute;
+        return (to, options) => navigateFromRoute(route, to, options);
+    }
+    function navigateEnd(next) {
+        const first = referrers[0];
+        if (first) {
+            if (next.value !== first.value || next.state !== first.state) {
+                setSource({
+                    ...next,
+                    replace: first.replace,
+                    scroll: first.scroll
+                });
+            }
+            referrers.length = 0;
+        }
+    }
+    createRenderEffect(() => {
+        const { value, state } = source();
+        // Untrack this whole block so `start` doesn't cause Solid's Listener to be preserved
+        untrack(() => {
+            if (value !== reference()) {
+                start(() => {
+                    setReference(value);
+                    setState(state);
+                });
+            }
+        });
+    });
+    if (!isServer) {
+        function isSvg(el) {
+            return el.namespaceURI === "http://www.w3.org/2000/svg";
+        }
+        function handleAnchorClick(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);
+            const pathname = urlDecode(url.pathname);
+            if (url.origin !== window.location.origin ||
+                (basePath && pathname && !pathname.toLowerCase().startsWith(basePath.toLowerCase())))
+                return;
+            const to = parsePath(pathname + urlDecode(url.search, true) + urlDecode(url.hash));
+            const state = a.getAttribute("state");
+            evt.preventDefault();
+            navigateFromRoute(baseRoute, to, {
+                resolve: false,
+                replace: a.hasAttribute("replace"),
+                scroll: !a.hasAttribute("noscroll"),
+                state: state && JSON.parse(state)
+            });
+        }
+        document.addEventListener("click", handleAnchorClick);
+        onCleanup(() => document.removeEventListener("click", handleAnchorClick));
+    }
+    return {
+        base: baseRoute,
+        out: output,
+        location,
+        isRouting,
+        renderPath,
+        parsePath,
+        navigatorFactory
+    };
+}
+export function createRouteContext(router, parent, child, match) {
+    const { base, location, navigatorFactory } = router;
+    const { pattern, element: outlet, preload, data } = match().route;
+    const path = createMemo(() => match().path);
+    const params = createMemoObject(() => match().params);
+    preload && preload();
+    const route = {
+        parent,
+        pattern,
+        get child() {
+            return child();
+        },
+        path,
+        params,
+        data: parent.data,
+        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;
+        }
+    }
+    return route;
+}

package/dist/types.d.ts

@@ -0,0 +1,115 @@
+import { Component, JSX } from "solid-js";
+export declare type Params = Record<string, string>;
+export declare type SetParams = Record<string, string | number | boolean | null | undefined>;
+export interface Path {
+    pathname: string;
+    search: string;
+    hash: string;
+}
+export interface Location<S = unknown> extends Path {
+    query: Params;
+    state: Readonly<Partial<S>> | null;
+    key: string;
+}
+export interface NavigateOptions<S = unknown> {
+    resolve: boolean;
+    replace: boolean;
+    scroll: boolean;
+    state: S;
+}
+export interface Navigator {
+    (to: string, options?: Partial<NavigateOptions>): void;
+    (delta: number): void;
+}
+export declare type NavigatorFactory = (route?: RouteContext) => Navigator;
+export interface LocationChange<S = unknown> {
+    value: string;
+    replace?: boolean;
+    scroll?: boolean;
+    state?: S;
+}
+export declare type LocationChangeSignal = [() => LocationChange, (next: LocationChange) => void];
+export interface RouterIntegration {
+    signal: LocationChangeSignal;
+    utils?: Partial<RouterUtils>;
+}
+export interface RouteDataFuncArgs {
+    data: unknown;
+    params: Params;
+    location: Location;
+    navigate: Navigator;
+}
+export declare type RouteDataFunc<T = unknown> = (args: RouteDataFuncArgs) => T;
+export declare type RouteDefinition = {
+    path: string | string[];
+    data?: RouteDataFunc;
+    children?: RouteDefinition | RouteDefinition[];
+} & ({
+    element?: never;
+    component: Component;
+} | {
+    component?: never;
+    element?: JSX.Element;
+    preload?: () => void;
+});
+export interface PathMatch {
+    params: Params;
+    path: string;
+}
+export interface RouteMatch extends PathMatch {
+    route: Route;
+}
+export interface OutputMatch {
+    originalPath: string;
+    pattern: string;
+    path: string;
+    params: Params;
+}
+export interface Route {
+    key: unknown;
+    originalPath: string;
+    pattern: string;
+    element: () => JSX.Element;
+    preload?: () => void;
+    data?: RouteDataFunc;
+    matcher: (location: string) => PathMatch | null;
+}
+export interface Branch {
+    routes: Route[];
+    score: number;
+    matcher: (location: string) => RouteMatch[] | null;
+}
+export interface RouteContext {
+    parent?: RouteContext;
+    child?: RouteContext;
+    data?: unknown;
+    pattern: string;
+    params: Params;
+    path: () => string;
+    outlet: () => JSX.Element;
+    resolvePath(to: string): string | undefined;
+}
+export interface RouterUtils {
+    renderPath(path: string): string;
+    parsePath(str: string): string;
+    go(delta: number): void;
+}
+export interface OutputMatch {
+    originalPath: string;
+    pattern: string;
+    path: string;
+    params: Params;
+}
+export interface RouterOutput {
+    url?: string;
+    matches: OutputMatch[][];
+}
+export interface RouterContext {
+    base: RouteContext;
+    out?: RouterOutput;
+    location: Location;
+    navigatorFactory: NavigatorFactory;
+    isRouting: () => boolean;
+    renderPath(path: string): string;
+    parsePath(str: string): string;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils.d.ts

@@ -0,0 +1,11 @@
+import type { Params, PathMatch, Route, SetParams } from "./types";
+export declare function resolvePath(base: string, path: string, from?: string): string | undefined;
+export declare function invariant<T>(value: T | null | undefined, message: string): T;
+export declare function joinPaths(from: string, to: string): string;
+export declare function extractSearchParams(url: URL): Params;
+export declare function urlDecode(str: string, isQuery?: boolean): string;
+export declare function createMatcher(path: string, partial?: boolean): (location: string) => PathMatch | null;
+export declare function scoreRoute(route: Route): number;
+export declare function createMemoObject<T extends Record<string | symbol, unknown>>(fn: () => T): T;
+export declare function mergeSearchString(search: string, params: SetParams): string;
+export declare function expandOptionals(pattern: string): string[];