@solidjs/router 1.0.0-next.8 → 1.0.0

package/dist/index.jsx

@@ -1,6 +1,6 @@
 export * from "./routers/index.js";
+export * from "./components.jsx";
 export * from "./lifecycle.js";
-export { useHref, useIsRouting, useLinkState, useLocation, useMatch, useNavigate, usePreloadRoute, useParams, useResolvedPath, useRouteMatches, useSearchParams, RouterContextObj as RouterContext } from "./routing.js";
+export { useHref, useIsRouting, useLocation, useMatch, useCurrentMatches, useNavigate, useParams, useResolvedPath, useSearchParams, useBeforeLeave, usePreloadRoute, RouterContextObj as RouterContext } from "./routing.js";
 export { mergeSearchString as _mergeSearchString } from "./utils.js";
-export { int } from "./paths.js";
 export * from "./data/index.js";

package/dist/lifecycle.d.ts

@@ -1,30 +1,5 @@
-import type { BeforeLeaveEventArgs, BeforeLeaveLifecycle } from "./types.js";
+import { BeforeLeaveLifecycle, LocationChange } from "./types.js";
 export declare function createBeforeLeave(): BeforeLeaveLifecycle;
-/**
- * useBeforeLeave takes a function that will be called prior to leaving a route.
- * The function will be called with:
- *
- * - from (*Location*): current location (before change).
- * - to (*string | number*): path passed to `navigate`.
- * - options (*NavigateOptions*): options passed to navigate.
- * - preventDefault (*function*): call to block the route change.
- * - defaultPrevented (*readonly boolean*): `true` if any previously called leave handlers called `preventDefault`.
- * - retry (*function*, force?: boolean ): call to retry the same navigation, perhaps after confirming with the user. Pass `true` to skip running the leave handlers again (i.e. force navigate without confirming).
- *
- * @example
- * ```js
- * useBeforeLeave((e: BeforeLeaveEventArgs) => {
- *   if (form.isDirty && !e.defaultPrevented) {
- *     // preventDefault to block immediately and prompt user async
- *     e.preventDefault();
- *     setTimeout(() => {
- *       if (window.confirm("Discard unsaved changes - are you sure?")) {
- *         // user wants to proceed anyway so retry with force=true
- *         e.retry(true);
- *       }
- *     }, 100);
- *   }
- * });
- * ```
- */
-export declare const useBeforeLeave: (listener: (e: BeforeLeaveEventArgs) => void) => void;
+export declare function saveCurrentDepth(): void;
+export declare function keepDepth(state: any): any;
+export declare function notifyIfNotBlocked(notify: (value?: string | LocationChange) => void, block: (delta: number | null) => boolean): () => void;

package/dist/lifecycle.js

@@ -1,5 +1,4 @@
-import { onCleanup } from "solid-js";
-import { useLocation, useNavigate, useRouter } from "./routing.js";
+import { isServer } from "solid-js/web";
 export function createBeforeLeave() {
     let listeners = new Set();
     function subscribe(listener) {
@@ -39,41 +38,39 @@ export function createBeforeLeave() {
         confirm
     };
 }
-/**
- * useBeforeLeave takes a function that will be called prior to leaving a route.
- * The function will be called with:
- *
- * - from (*Location*): current location (before change).
- * - to (*string | number*): path passed to `navigate`.
- * - options (*NavigateOptions*): options passed to navigate.
- * - preventDefault (*function*): call to block the route change.
- * - defaultPrevented (*readonly boolean*): `true` if any previously called leave handlers called `preventDefault`.
- * - retry (*function*, force?: boolean ): call to retry the same navigation, perhaps after confirming with the user. Pass `true` to skip running the leave handlers again (i.e. force navigate without confirming).
- *
- * @example
- * ```js
- * useBeforeLeave((e: BeforeLeaveEventArgs) => {
- *   if (form.isDirty && !e.defaultPrevented) {
- *     // preventDefault to block immediately and prompt user async
- *     e.preventDefault();
- *     setTimeout(() => {
- *       if (window.confirm("Discard unsaved changes - are you sure?")) {
- *         // user wants to proceed anyway so retry with force=true
- *         e.retry(true);
- *       }
- *     }, 100);
- *   }
- * });
- * ```
- */
-export const useBeforeLeave = (listener) => {
-    // Installing the guard here (instead of eagerly in the router/history) keeps
-    // all of createBeforeLeave tree-shakeable for apps that never block leaves.
-    const slot = useRouter().beforeLeave;
-    const s = (slot.current || (slot.current = createBeforeLeave())).subscribe({
-        listener,
-        location: useLocation(),
-        navigate: useNavigate()
-    });
-    onCleanup(s);
-};
+// The following supports browser initiated blocking (eg back/forward)
+let depth;
+export function saveCurrentDepth() {
+    if (!window.history.state || window.history.state._depth == null) {
+        window.history.replaceState({ ...window.history.state, _depth: window.history.length - 1 }, "");
+    }
+    depth = window.history.state._depth;
+}
+if (!isServer) {
+    saveCurrentDepth();
+}
+export function keepDepth(state) {
+    return {
+        ...state,
+        _depth: window.history.state && window.history.state._depth
+    };
+}
+export function notifyIfNotBlocked(notify, block) {
+    let ignore = false;
+    return () => {
+        const prevDepth = depth;
+        saveCurrentDepth();
+        const delta = prevDepth == null ? null : depth - prevDepth;
+        if (ignore) {
+            ignore = false;
+            return;
+        }
+        if (delta && block(delta)) {
+            ignore = true;
+            window.history.go(-delta);
+        }
+        else {
+            notify();
+        }
+    };
+}

package/dist/routers/HashRouter.d.ts

@@ -0,0 +1,9 @@
+import type { JSX } from "solid-js";
+import type { BaseRouterProps } from "./components.jsx";
+export declare function hashParser(str: string): string;
+export type HashRouterProps = BaseRouterProps & {
+    actionBase?: string;
+    explicitLinks?: boolean;
+    preload?: boolean;
+};
+export declare function HashRouter(props: HashRouterProps): JSX.Element;

package/dist/routers/HashRouter.js

@@ -0,0 +1,41 @@
+import { setupNativeEvents } from "../data/events.js";
+import { createRouter, scrollToHash, bindEvent } from "./createRouter.js";
+import { createBeforeLeave, keepDepth, notifyIfNotBlocked, saveCurrentDepth } from "../lifecycle.js";
+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) {
+    const getSource = () => window.location.hash.slice(1);
+    const beforeLeave = createBeforeLeave();
+    return createRouter({
+        get: getSource,
+        set({ value, replace, scroll, state }) {
+            if (replace) {
+                window.history.replaceState(keepDepth(state), "", "#" + value);
+            }
+            else {
+                window.history.pushState(state, "", "#" + value);
+            }
+            const hashIndex = value.indexOf("#");
+            const hash = hashIndex >= 0 ? value.slice(hashIndex + 1) : "";
+            scrollToHash(hash, scroll);
+            saveCurrentDepth();
+        },
+        init: notify => bindEvent(window, "hashchange", notifyIfNotBlocked(notify, delta => !beforeLeave.confirm(delta && delta < 0 ? delta : getSource()))),
+        create: setupNativeEvents({ preload: props.preload, explicitLinks: props.explicitLinks, actionBase: props.actionBase }),
+        utils: {
+            go: delta => window.history.go(delta),
+            renderPath: path => `#${path}`,
+            parsePath: hashParser,
+            beforeLeave
+        }
+    })(props);
+}

package/dist/routers/MemoryRouter.d.ts

@@ -0,0 +1,24 @@
+import type { LocationChange } from "../types.js";
+import type { BaseRouterProps } from "./components.jsx";
+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;
+    actionBase?: string;
+    explicitLinks?: boolean;
+    preload?: boolean;
+};
+export declare function MemoryRouter(props: MemoryRouterProps): JSX.Element;

package/dist/routers/MemoryRouter.js

@@ -0,0 +1,57 @@
+import { createRouter, scrollToHash } from "./createRouter.js";
+import { setupNativeEvents } from "../data/events.js";
+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++;
+            }
+            listeners.forEach(listener => listener(value));
+            setTimeout(() => {
+                if (scroll) {
+                    scrollToHash(value.split("#")[1] || "", true);
+                }
+            }, 0);
+        },
+        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,
+        create: setupNativeEvents({ preload: props.preload, explicitLinks: props.explicitLinks, actionBase: props.actionBase }),
+        utils: {
+            go: memoryHistory.go
+        }
+    })(props);
+}

package/dist/routers/Router.d.ts

@@ -0,0 +1,17 @@
+import type { BaseRouterProps } from "./components.jsx";
+import type { JSX } from "solid-js";
+export type RouterProps = BaseRouterProps & {
+    url?: string;
+    actionBase?: string;
+    explicitLinks?: boolean;
+    preload?: boolean;
+    /**
+     * Opt-in explicit scroll restoration for back/forward navigation (read
+     * once, not reactive). Sets `history.scrollRestoration = "manual"` and
+     * restores saved positions after the navigation settles, replacing the
+     * browser heuristic that loses offsets when the destination route forces
+     * a layout while rendering (#577).
+     */
+    scrollRestoration?: boolean;
+};
+export declare function Router(props: RouterProps): JSX.Element;

package/dist/routers/Router.js

@@ -0,0 +1,59 @@
+import { isServer } from "solid-js/web";
+import { createRouter, scrollToHash, bindEvent } from "./createRouter.js";
+import { StaticRouter } from "./StaticRouter.js";
+import { setupNativeEvents } from "../data/events.js";
+import { createBeforeLeave, keepDepth, notifyIfNotBlocked, saveCurrentDepth } from "../lifecycle.js";
+import { createScrollRestoration } from "./scrollRestoration.js";
+export function Router(props) {
+    if (isServer)
+        return StaticRouter(props);
+    const restoration = props.scrollRestoration ? createScrollRestoration() : undefined;
+    const getSource = () => {
+        const url = window.location.pathname + window.location.search;
+        const state = window.history.state && window.history.state._depth && Object.keys(window.history.state).length === 1 ? undefined : window.history.state;
+        return {
+            value: url + window.location.hash,
+            state
+        };
+    };
+    const beforeLeave = createBeforeLeave();
+    return createRouter({
+        get: getSource,
+        set({ value, replace, scroll, state }) {
+            if (replace) {
+                window.history.replaceState(keepDepth(state), "", value);
+            }
+            else {
+                window.history.pushState(state, "", value);
+            }
+            scrollToHash(decodeURIComponent(window.location.hash.slice(1)), scroll);
+            saveCurrentDepth();
+            restoration && !replace && restoration.onPush();
+        },
+        init: notify => {
+            const handler = notifyIfNotBlocked(notify, delta => {
+                if (delta) {
+                    return !beforeLeave.confirm(delta);
+                }
+                else {
+                    const s = getSource();
+                    return !beforeLeave.confirm(s.value, { state: s.state });
+                }
+            });
+            return bindEvent(window, "popstate", restoration
+                ? () => {
+                    restoration.onPop();
+                    handler();
+                }
+                : handler);
+        },
+        create: router => {
+            setupNativeEvents({ preload: props.preload, explicitLinks: props.explicitLinks, actionBase: props.actionBase, transformUrl: props.transformUrl })(router);
+            restoration && restoration.create(router);
+        },
+        utils: {
+            go: delta => window.history.go(delta),
+            beforeLeave
+        }
+    })(props);
+}

package/dist/routers/StaticRouter.d.ts

@@ -0,0 +1,6 @@
+import { type BaseRouterProps } from "./components.jsx";
+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.jsx";
+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

@@ -1,13 +1,27 @@
-import type { Component } from "solid-js";
-import type { JSX } from "@solidjs/web";
-import type { Branch, RoutePreloadFunc, RouterContext, RouteSectionProps } from "../types.js";
-export declare function Root(props: {
-    routerState: RouterContext;
+import type { Component, JSX } from "solid-js";
+import type { MatchFilters, RouteDefinition, RoutePreloadFunc, RouterIntegration, RouteSectionComponent, RouteSectionProps } from "../types.js";
+export type BaseRouterProps = {
+    base?: string;
+    /**
+     * A component that wraps the content of every route.
+     */
     root?: Component<RouteSectionProps>;
-    preload?: RoutePreloadFunc;
-    children: JSX.Element;
-}): JSX.Element;
-export declare function Routes(props: {
-    routerState: RouterContext;
-    branches: () => Branch[];
-}): JSX.Element;
+    rootPreload?: RoutePreloadFunc;
+    singleFlight?: boolean;
+    children?: JSX.Element | RouteDefinition | RouteDefinition[];
+    transformUrl?: (url: string) => string;
+    /** @deprecated use rootPreload */
+    rootLoad?: RoutePreloadFunc;
+};
+export declare const createRouterComponent: (router: RouterIntegration) => (props: BaseRouterProps) => JSX.Element;
+export type RouteProps<S extends string, T = unknown> = {
+    path?: S | S[];
+    children?: JSX.Element;
+    preload?: RoutePreloadFunc<T>;
+    matchFilters?: MatchFilters<S>;
+    component?: RouteSectionComponent<T>;
+    info?: Record<string, any>;
+    /** @deprecated use preload */
+    load?: RoutePreloadFunc<T>;
+};
+export declare const Route: <S extends string, T = unknown>(props: RouteProps<S, T>) => JSX.Element;

package/dist/routers/components.jsx

@@ -1,72 +1,67 @@
 /*@refresh skip*/
-import { createMemo, createRoot, getOwner, onCleanup, runWithOwner, untrack } from "solid-js";
-import { getRequestEvent, isServer } from "@solidjs/web";
-import { createRouteContext, getIntent, getRouteMatches, resolveLazySubtree, RouteContextObj, setInPreloadFn, unresolvedLazyMatches } from "../routing.js";
-export function Root(props) {
+import { children, createMemo, createRoot, getOwner, mergeProps, on, onCleanup, Show, untrack } from "solid-js";
+import { getRequestEvent, isServer } from "solid-js/web";
+import { createBranches, createRouteContext, createRouterContext, getIntent, getRouteMatches, RouteContextObj, RouterContextObj, setInPreloadFn } from "../routing.js";
+export const createRouterComponent = (router) => (props) => {
+    const { base } = props;
+    const routeDefs = children(() => props.children);
+    const branches = createMemo(() => createBranches(routeDefs(), props.base || ""));
+    let context;
+    const routerState = createRouterContext(router, branches, () => context, {
+        base,
+        singleFlight: props.singleFlight,
+        transformUrl: props.transformUrl,
+    });
+    router.create && router.create(routerState);
+    return (<RouterContextObj.Provider value={routerState}>
+      <Root routerState={routerState} root={props.root} preload={props.rootPreload || props.rootLoad}>
+        {(context = getOwner()) && null}
+        <Routes routerState={routerState} branches={branches()}/>
+      </Root>
+    </RouterContextObj.Provider>);
+};
+function Root(props) {
     const location = props.routerState.location;
     const params = props.routerState.params;
     const data = createMemo(() => props.preload &&
         untrack(() => {
             setInPreloadFn(true);
-            try {
-                return props.preload({ params, location, intent: getIntent() || "initial" });
-            }
-            finally {
-                setInPreloadFn(false);
-            }
+            props.preload({ params, location, intent: getIntent() || "initial" });
+            setInPreloadFn(false);
         }));
-    const RootComp = props.root;
-    if (RootComp) {
-        return (<RootComp params={params} location={location} data={data()}>
-        {props.children}
-      </RootComp>);
-    }
-    return props.children;
+    return (<Show when={props.root} keyed fallback={props.children}>
+      {Root => (<Root params={params} location={location} data={data()}>
+          {props.children}
+        </Root>)}
+    </Show>);
 }
-export function Routes(props) {
+function Routes(props) {
     if (isServer) {
         const e = getRequestEvent();
         if (e && e.router && e.router.dataOnly) {
-            dataOnly(e, props.routerState, props.branches());
+            dataOnly(e, props.routerState, props.branches);
             return;
         }
-        if (e && !(e.router && e.router.matches)) {
-            // A lazy getter rather than a snapshot: unresolved lazy subtrees mean
-            // the match chain can still improve while the render streams, and
-            // frameworks read this after the render settles.
-            Object.defineProperty((e.router || (e.router = {})), "matches", {
-                configurable: true,
-                enumerable: true,
-                get: () => props.routerState.matches().map(({ route, path, params }) => ({
+        e &&
+            ((e.router || (e.router = {})).matches ||
+                (e.router.matches = props.routerState.matches().map(({ route, path, params }) => ({
                     path: route.originalPath,
                     pattern: route.pattern,
                     match: path,
                     params,
                     info: route.info
-                }))
-            });
-        }
+                }))));
     }
     const disposers = [];
     let root;
-    let prevMatches;
     // dispose the detached per-route roots when this component unmounts, otherwise
     // they stay subscribed to `matches` and crash on a later navigation (#451)
     onCleanup(() => disposers.forEach(dispose => dispose()));
-    // Route roots must outlive re-runs of the `routeStates` memo below, so they
-    // are created under the owner of this component rather than the memo's
-    // computation (which disposes its children every time it re-runs).
-    const owner = getOwner();
-    const routeStates = createMemo((prev) => {
-        // While a lazy subtree resolves, `matches()` is not ready and this
-        // computation parks with it — no route contexts are created against
-        // placeholder matches.
-        const nextMatches = props.routerState.matches();
-        const previousMatches = prevMatches;
-        let equal = previousMatches && nextMatches.length === previousMatches.length;
+    const routeStates = createMemo(on(props.routerState.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 = previousMatches && previousMatches[i];
+            const prevMatch = prevMatches && prevMatches[i];
             const nextMatch = nextMatches[i];
             if (prev && prevMatch && nextMatch.route.key === prevMatch.route.key) {
                 next[i] = prev[i];
@@ -76,51 +71,42 @@ export function Routes(props) {
                 if (disposers[i]) {
                     disposers[i]();
                 }
-                runWithOwner(owner, () => createRoot(dispose => {
+                createRoot(dispose => {
                     disposers[i] = dispose;
-                    const routeKey = nextMatch.route.key;
-                    // Retain the last matches in which this route participated so
-                    // that its components and preloads never observe another
-                    // route's params/path while this route is being torn down.
-                    const matchesAtLevel = createMemo((prev) => {
+                    next[i] = createRouteContext(props.routerState, next[i - 1] || props.routerState.base, createOutlet(() => routeStates()[i + 1]), () => {
                         const routeMatches = props.routerState.matches();
-                        const m = routeMatches[i];
-                        return m && m.route.key === routeKey ? routeMatches : prev || nextMatches;
+                        return routeMatches[i] ?? routeMatches[0];
                     });
-                    next[i] = createRouteContext(props.routerState, next[i - 1] || props.routerState.base, createOutlet(() => routeStates()?.[i + 1]), () => matchesAtLevel()[i], matchesAtLevel);
-                }));
+                });
             }
         }
         disposers.splice(nextMatches.length).forEach(dispose => dispose());
         if (prev && equal) {
-            prevMatches = nextMatches;
             return prev;
         }
         root = next[0];
-        prevMatches = nextMatches;
         return next;
-    });
-    const outlet = createOutlet(() => routeStates() && root);
-    return <>{outlet()}</>;
+    }));
+    return createOutlet(() => routeStates() && root)();
 }
 const createOutlet = (child) => {
-    return () => {
-        const c = child();
-        if (c) {
-            return <RouteContextObj value={c}>{c.outlet()}</RouteContextObj>;
+    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();
         }
-        return undefined;
-    };
+    });
 };
 // for data only mode with single flight mutations
 function dataOnly(event, routerState, branches) {
     const url = new URL(event.request.url);
     const prevMatches = getRouteMatches(branches, new URL(event.router.previousUrl || event.request.url).pathname);
     const matches = getRouteMatches(branches, url.pathname);
-    // This pass is synchronous — an unresolved lazy subtree can only be
-    // kicked, not awaited (the flight collector's own runner awaits; see
-    // src/server.ts). Best effort so a subsequent pass sees the table.
-    unresolvedLazyMatches([...prevMatches, ...matches]).forEach(resolveLazySubtree);
     for (let match = 0; match < matches.length; match++) {
         if (!prevMatches[match] || matches[match].route !== prevMatches[match].route)
             event.router.dataOnly = true;

package/dist/routers/createRouter.d.ts

@@ -0,0 +1,10 @@
+import type { LocationChange, RouterContext, RouterUtils } from "../types.js";
+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.jsx").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,41 @@
+import { createSignal, onCleanup, sharedConfig } from "solid-js";
+import { createRouterComponent } from "./components.jsx";
+function intercept([value, setValue], get, set) {
+    return [get ? () => get(value()) : value, set ? (v) => setValue(set(v)) : setValue];
+}
+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 && a.state === b.state
+    }), undefined, next => {
+        !ignore && config.set(next);
+        if (sharedConfig.registry && !sharedConfig.done)
+            sharedConfig.done = true;
+        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 = hash && document.getElementById(hash);
+    if (el) {
+        el.scrollIntoView();
+    }
+    else if (fallbackTop) {
+        window.scrollTo(0, 0);
+    }
+}