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

package/dist/index.jsx

@@ -1,5 +1,5 @@
+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";

package/dist/routers/HashRouter.d.ts

@@ -0,0 +1,5 @@
+import type { JSX } from "solid-js";
+import type { BaseRouterProps } from "./components";
+export declare function hashParser(str: string): string;
+export type HashRouterProps = BaseRouterProps;
+export declare function HashRouter(props: HashRouterProps): JSX.Element;

package/dist/routers/HashRouter.js

@@ -0,0 +1,36 @@
+import { setupNativeEvents } from "../data/events";
+import { createRouter, scrollToHash, bindEvent } from "./createRouter";
+export function hashParser(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;
+}
+export function HashRouter(props) {
+    return createRouter({
+        get: () => window.location.hash.slice(1),
+        set({ 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);
+        },
+        init: notify => bindEvent(window, "hashchange", () => notify()),
+        create: setupNativeEvents,
+        utils: {
+            go: delta => window.history.go(delta),
+            renderPath: path => `#${path}`,
+            parsePath: hashParser
+        }
+    })(props);
+}

package/dist/routers/MemoryRouter.d.ts

@@ -0,0 +1,21 @@
+import type { LocationChange } from "../types";
+import type { BaseRouterProps } from "./components";
+import type { JSX } from "solid-js";
+export type MemoryHistory = {
+    get: () => string;
+    set: (change: LocationChange) => void;
+    go: (delta: number) => void;
+    listen: (listener: (value: string) => void) => () => void;
+};
+export declare function createMemoryHistory(): {
+    get: () => string;
+    set: ({ value, scroll, replace }: LocationChange) => void;
+    back: () => void;
+    forward: () => void;
+    go: (n: number) => void;
+    listen: (listener: (value: string) => void) => () => void;
+};
+export type MemoryRouterProps = BaseRouterProps & {
+    history?: MemoryHistory;
+};
+export declare function MemoryRouter(props: MemoryRouterProps): JSX.Element;

package/dist/routers/MemoryRouter.js

@@ -0,0 +1,52 @@
+import { createRouter, scrollToHash } from "./createRouter";
+export function createMemoryHistory() {
+    const entries = ["/"];
+    let index = 0;
+    const listeners = [];
+    const go = (n) => {
+        // https://github.com/remix-run/react-router/blob/682810ca929d0e3c64a76f8d6e465196b7a2ac58/packages/router/history.ts#L245
+        index = Math.max(0, Math.min(index + n, entries.length - 1));
+        const value = entries[index];
+        listeners.forEach(listener => listener(value));
+    };
+    return {
+        get: () => entries[index],
+        set: ({ value, scroll, replace }) => {
+            if (replace) {
+                entries[index] = value;
+            }
+            else {
+                entries.splice(index + 1, entries.length - index, value);
+                index++;
+            }
+            if (scroll) {
+                scrollToHash(value.split("#")[1] || "", true);
+            }
+        },
+        back: () => {
+            go(-1);
+        },
+        forward: () => {
+            go(1);
+        },
+        go,
+        listen: (listener) => {
+            listeners.push(listener);
+            return () => {
+                const index = listeners.indexOf(listener);
+                listeners.splice(index, 1);
+            };
+        }
+    };
+}
+export function MemoryRouter(props) {
+    const memoryHistory = props.history || createMemoryHistory();
+    return createRouter({
+        get: memoryHistory.get,
+        set: memoryHistory.set,
+        init: memoryHistory.listen,
+        utils: {
+            go: memoryHistory.go
+        }
+    })(props);
+}

package/dist/routers/Router.d.ts

@@ -0,0 +1,6 @@
+import type { BaseRouterProps } from "./components";
+import type { JSX } from "solid-js";
+export type RouterProps = BaseRouterProps & {
+    url?: string;
+};
+export declare function Router(props: RouterProps): JSX.Element;

package/dist/routers/Router.js

@@ -0,0 +1,28 @@
+import { isServer } from "solid-js/web";
+import { createRouter, scrollToHash, bindEvent } from "./createRouter";
+import { StaticRouter } from "./StaticRouter";
+import { setupNativeEvents } from "../data/events";
+export function Router(props) {
+    if (isServer)
+        return StaticRouter(props);
+    return createRouter({
+        get: () => ({
+            value: window.location.pathname + window.location.search + window.location.hash,
+            state: history.state
+        }),
+        set({ value, replace, scroll, state }) {
+            if (replace) {
+                window.history.replaceState(state, "", value);
+            }
+            else {
+                window.history.pushState(state, "", value);
+            }
+            scrollToHash(window.location.hash.slice(1), scroll);
+        },
+        init: notify => bindEvent(window, "popstate", () => notify()),
+        create: setupNativeEvents,
+        utils: {
+            go: delta => window.history.go(delta)
+        }
+    })(props);
+}

package/dist/routers/StaticRouter.d.ts

@@ -0,0 +1,6 @@
+import { type BaseRouterProps } from "./components";
+import type { JSX } from "solid-js";
+export type StaticRouterProps = BaseRouterProps & {
+    url?: string;
+};
+export declare function StaticRouter(props: StaticRouterProps): JSX.Element;

package/dist/routers/StaticRouter.js

@@ -0,0 +1,15 @@
+import { getRequestEvent } from "solid-js/web";
+import { createRouterComponent } from "./components";
+function getPath(url) {
+    const u = new URL(url);
+    return u.pathname + u.search;
+}
+export function StaticRouter(props) {
+    let e;
+    const obj = {
+        value: props.url || ((e = getRequestEvent()) && getPath(e.request.url)) || ""
+    };
+    return createRouterComponent({
+        signal: [() => obj, next => Object.assign(obj, next)]
+    })(props);
+}

package/dist/routers/components.d.ts

@@ -0,0 +1,17 @@
+import type { Component, JSX } from "solid-js";
+import type { MatchFilters, RouteLoadFunc, RouterIntegration, RouteSectionProps } from "../types";
+export type BaseRouterProps = {
+    base?: string;
+    actionBase?: string;
+    root?: Component<RouteSectionProps>;
+    children?: JSX.Element;
+};
+export declare const createRouterComponent: (router: RouterIntegration) => (props: BaseRouterProps) => 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;

package/dist/routers/components.jsx

@@ -0,0 +1,70 @@
+/*@refresh skip*/
+import { children, createMemo, createRoot, mergeProps, on, Show } from "solid-js";
+import { createBranches, createRouteContext, createRouterContext, getRouteMatches, RouteContextObj, RouterContextObj } from "../routing";
+import { createMemoObject } from "../utils";
+export const createRouterComponent = (router) => (props) => {
+    const { base, actionBase } = props;
+    const routeDefs = children(() => props.children);
+    const branches = createMemo(() => createBranches(props.root ? { component: props.root, children: routeDefs() } : routeDefs(), props.base || ""));
+    const routerState = createRouterContext(router, branches, { base, actionBase });
+    router.create && router.create(routerState);
+    return (<RouterContextObj.Provider value={routerState}>
+      <Routes routerState={routerState} branches={branches()}/>
+    </RouterContextObj.Provider>);
+};
+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();
+        }
+    });
+};

package/dist/routers/createIntegration.d.ts

@@ -0,0 +1,4 @@
+import type { LocationChange, RouterContext, RouterUtils } from "../types";
+export declare function createIntegration(get: () => string | LocationChange, set: (next: LocationChange) => void, init?: (notify: (value?: string | LocationChange) => void) => () => void, create?: (router: RouterContext) => void, utils?: Partial<RouterUtils>): (props: import("./components").RouterProps) => import("solid-js").JSX.Element;
+export declare function bindEvent(target: EventTarget, type: string, handler: EventListener): () => void;
+export declare function scrollToHash(hash: string, fallbackTop?: boolean): void;

package/dist/routers/createIntegration.js

@@ -0,0 +1,49 @@
+import { createSignal, onCleanup } from "solid-js";
+import { createRouter } from "./components";
+function intercept([value, setValue], get, set) {
+    return [get ? () => get(value()) : value, set ? (v) => setValue(set(v)) : setValue];
+}
+function querySelector(selector) {
+    if (selector === "#") {
+        return null;
+    }
+    // Guard against selector being an invalid CSS selector
+    try {
+        return document.querySelector(selector);
+    }
+    catch (e) {
+        return null;
+    }
+}
+export function createIntegration(get, set, init, create, 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 createRouter({
+        signal,
+        create,
+        utils
+    });
+}
+export function bindEvent(target, type, handler) {
+    target.addEventListener(type, handler);
+    return () => target.removeEventListener(type, handler);
+}
+export function scrollToHash(hash, fallbackTop) {
+    const el = querySelector(`#${hash}`);
+    if (el) {
+        el.scrollIntoView();
+    }
+    else if (fallbackTop) {
+        window.scrollTo(0, 0);
+    }
+}

package/dist/routers/createIntegration.jsx

@@ -0,0 +1,48 @@
+import { createSignal, onCleanup } from "solid-js";
+function intercept([value, setValue], get, set) {
+    return [get ? () => get(value()) : value, set ? (v) => setValue(set(v)) : setValue];
+}
+function querySelector(selector) {
+    if (selector === "#") {
+        return null;
+    }
+    // Guard against selector being an invalid CSS selector
+    try {
+        return document.querySelector(selector);
+    }
+    catch (e) {
+        return null;
+    }
+}
+export function createIntegration(get, set, init, create, 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,
+        create,
+        utils
+    };
+}
+export function bindEvent(target, type, handler) {
+    target.addEventListener(type, handler);
+    return () => target.removeEventListener(type, handler);
+}
+export function scrollToHash(hash, fallbackTop) {
+    const el = querySelector(`#${hash}`);
+    if (el) {
+        el.scrollIntoView();
+    }
+    else if (fallbackTop) {
+        window.scrollTo(0, 0);
+    }
+}

package/dist/routers/createRouter.d.ts

@@ -0,0 +1,10 @@
+import type { LocationChange, RouterContext, RouterUtils } from "../types";
+export declare function createRouter(config: {
+    get: () => string | LocationChange;
+    set: (next: LocationChange) => void;
+    init?: (notify: (value?: string | LocationChange) => void) => () => void;
+    create?: (router: RouterContext) => void;
+    utils?: Partial<RouterUtils>;
+}): (props: import("./components").BaseRouterProps) => import("solid-js").JSX.Element;
+export declare function bindEvent(target: EventTarget, type: string, handler: EventListener): () => void;
+export declare function scrollToHash(hash: string, fallbackTop?: boolean): void;

package/dist/routers/createRouter.js

@@ -0,0 +1,49 @@
+import { createSignal, onCleanup } from "solid-js";
+import { createRouterComponent } from "./components";
+function intercept([value, setValue], get, set) {
+    return [get ? () => get(value()) : value, set ? (v) => setValue(set(v)) : setValue];
+}
+function querySelector(selector) {
+    if (selector === "#") {
+        return null;
+    }
+    // Guard against selector being an invalid CSS selector
+    try {
+        return document.querySelector(selector);
+    }
+    catch (e) {
+        return null;
+    }
+}
+export function createRouter(config) {
+    let ignore = false;
+    const wrap = (value) => (typeof value === "string" ? { value } : value);
+    const signal = intercept(createSignal(wrap(config.get()), { equals: (a, b) => a.value === b.value }), undefined, next => {
+        !ignore && config.set(next);
+        return next;
+    });
+    config.init &&
+        onCleanup(config.init((value = config.get()) => {
+            ignore = true;
+            signal[1](wrap(value));
+            ignore = false;
+        }));
+    return createRouterComponent({
+        signal,
+        create: config.create,
+        utils: config.utils
+    });
+}
+export function bindEvent(target, type, handler) {
+    target.addEventListener(type, handler);
+    return () => target.removeEventListener(type, handler);
+}
+export function scrollToHash(hash, fallbackTop) {
+    const el = querySelector(`#${hash}`);
+    if (el) {
+        el.scrollIntoView();
+    }
+    else if (fallbackTop) {
+        window.scrollTo(0, 0);
+    }
+}

package/dist/routers/index.d.ts

@@ -0,0 +1,11 @@
+export { Route } from "./components";
+export type { BaseRouterProps, RouteProps } from "./components";
+export { createRouter } from "./createRouter";
+export { Router } from "./Router";
+export type { RouterProps } from "./Router";
+export { HashRouter } from "./HashRouter";
+export type { HashRouterProps } from "./HashRouter";
+export { MemoryRouter, createMemoryHistory } from "./MemoryRouter";
+export type { MemoryRouterProps, MemoryHistory } from "./MemoryRouter";
+export { StaticRouter } from "./StaticRouter";
+export type { StaticRouterProps } from "./StaticRouter";

package/dist/routers/index.js

@@ -0,0 +1,6 @@
+export { Route } from "./components";
+export { createRouter } from "./createRouter";
+export { Router } from "./Router";
+export { HashRouter } from "./HashRouter";
+export { MemoryRouter, createMemoryHistory } from "./MemoryRouter";
+export { StaticRouter } from "./StaticRouter";

package/dist/routing.d.ts

@@ -1,5 +1,5 @@
 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";
+import type { BeforeLeaveEventArgs, Branch, Intent, Location, 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;
@@ -18,9 +18,8 @@ export declare function createBranch(routes: Route[], index?: number): 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 registerAction(url: string, fn: Function): void;
 export declare function getIntent(): Intent | undefined;
-export declare function createRouterContext(integration?: RouterIntegration | LocationChangeSignal, getBranches?: () => Branch[], options?: {
+export declare function createRouterContext(integration: RouterIntegration, getBranches?: () => Branch[], options?: {
     base?: string;
     actionBase?: string;
 }): RouterContext;