@solidjs/router 0.17.0-next.6 → 1.0.0-next.8

package/dist/routers/history.d.ts

@@ -0,0 +1,24 @@
+import type { LocationChange, RouterUtils } from "../types.js";
+/**
+ * A history adapter: the source of truth for the current URL and how
+ * navigations write back to it. Adapters are plain imported values so
+ * unused ones never enter the bundle — `createRouter` defaults to browser
+ * history on the client and the request URL on the server.
+ */
+export interface RouterHistory {
+    get: () => string | LocationChange;
+    set: (next: LocationChange) => void;
+    init?: (notify: (value?: string | LocationChange) => void) => () => void;
+    utils?: Partial<RouterUtils>;
+}
+export declare function browserHistory(): RouterHistory;
+export declare function hashParser(str: string): string;
+export declare function hashHistory(): RouterHistory;
+export interface MemoryHistoryAdapter extends RouterHistory {
+    get: () => string;
+    go: (delta: number) => void;
+    back: () => void;
+    forward: () => void;
+    listen: (listener: (value: string) => void) => () => void;
+}
+export declare function memoryHistory(initial?: string): MemoryHistoryAdapter;

package/dist/routers/history.js

@@ -0,0 +1,180 @@
+import { isServer } from "@solidjs/web";
+function bindEvent(target, type, handler) {
+    target.addEventListener(type, handler);
+    return () => target.removeEventListener(type, handler);
+}
+// Depth stamping supports blocking browser-initiated navigation (back/forward)
+// for `useBeforeLeave`. It stays always-on — a couple of history.state writes —
+// so blocking stays exact no matter when the first guard subscribes, while the
+// guard machinery itself lives behind the lazy `beforeLeave` slot.
+let depth;
+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;
+}
+function keepDepth(state) {
+    return {
+        ...state,
+        _depth: window.history.state && window.history.state._depth
+    };
+}
+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();
+        }
+    };
+}
+function scrollToHash(hash, fallbackTop) {
+    const el = hash && document.getElementById(hash);
+    if (el) {
+        el.scrollIntoView();
+    }
+    else if (fallbackTop) {
+        window.scrollTo(0, 0);
+    }
+}
+export function browserHistory() {
+    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 = {};
+    if (!isServer)
+        saveCurrentDepth();
+    return {
+        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();
+        },
+        init: notify => bindEvent(window, "popstate", notifyIfNotBlocked(notify, delta => {
+            const guard = beforeLeave.current;
+            if (!guard)
+                return false;
+            if (delta) {
+                return !guard.confirm(delta);
+            }
+            else {
+                const s = getSource();
+                return !guard.confirm(s.value, { state: s.state });
+            }
+        })),
+        utils: {
+            go: delta => window.history.go(delta),
+            beforeLeave
+        }
+    };
+}
+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 hashHistory() {
+    const getSource = () => window.location.hash.slice(1);
+    const beforeLeave = {};
+    if (!isServer)
+        saveCurrentDepth();
+    return {
+        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 => {
+            const guard = beforeLeave.current;
+            return !!guard && !guard.confirm(delta && delta < 0 ? delta : getSource());
+        })),
+        utils: {
+            go: delta => window.history.go(delta),
+            renderPath: path => `#${path}`,
+            parsePath: hashParser,
+            beforeLeave
+        }
+    };
+}
+export function memoryHistory(initial = "/") {
+    const entries = [initial];
+    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));
+    };
+    const listen = (listener) => {
+        listeners.push(listener);
+        return () => {
+            const i = listeners.indexOf(listener);
+            listeners.splice(i, 1);
+        };
+    };
+    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,
+        init: listen,
+        utils: { go }
+    };
+}

package/dist/routers/index.d.ts

@@ -1,11 +1,4 @@
-export { Route } from "./components.jsx";
-export type { BaseRouterProps, RouteProps } from "./components.jsx";
-export { createRouter } from "./createRouter.js";
-export { Router } from "./Router.js";
-export type { RouterProps } from "./Router.js";
-export { HashRouter } from "./HashRouter.js";
-export type { HashRouterProps } from "./HashRouter.js";
-export { MemoryRouter, createMemoryHistory } from "./MemoryRouter.js";
-export type { MemoryRouterProps, MemoryHistory } from "./MemoryRouter.js";
-export { StaticRouter } from "./StaticRouter.js";
-export type { StaticRouterProps } from "./StaticRouter.js";
+export { createRouter, defineRoutes } from "./factory.jsx";
+export type { RouterConfig, RouterInstance } from "./factory.jsx";
+export { browserHistory, hashHistory, memoryHistory } from "./history.js";
+export type { RouterHistory, MemoryHistoryAdapter } from "./history.js";

package/dist/routers/index.js

@@ -1,6 +1,2 @@
-export { Route } from "./components.jsx";
-export { createRouter } from "./createRouter.js";
-export { Router } from "./Router.js";
-export { HashRouter } from "./HashRouter.js";
-export { MemoryRouter, createMemoryHistory } from "./MemoryRouter.js";
-export { StaticRouter } from "./StaticRouter.js";
+export { createRouter, defineRoutes } from "./factory.jsx";
+export { browserHistory, hashHistory, memoryHistory } from "./history.js";

package/dist/routing.d.ts

@@ -1,8 +1,12 @@
 import type { JSX } from "@solidjs/web";
-import type { BeforeLeaveEventArgs, Branch, Intent, Location, MatchFilters, NavigateOptions, Navigator, Params, RouteDescription, RouteContext, RouteDefinition, RouteMatch, RouterContext, RouterIntegration, SearchParams, SetSearchParams } from "./types.js";
+import type { Branch, Intent, LazyBoundary, Location, MatchFilters, NavigateOptions, Navigator, Params, RouteDescription, RouteContext, RouteDefinition, RouteMatch, RouterContext, RouterIntegration, SearchParams, SetSearchParams, TypedPath, TypedSearchPath } from "./types.js";
+import type { FlashSubmission } from "./data/flash.js";
 /** Consider this API opaque and internal. It is likely to change in the future. */
 export declare const RouterContextObj: import("solid-js").Context<RouterContext>;
 export declare const RouteContextObj: import("solid-js").Context<RouteContext>;
+export declare function useOptionalContext<T>(context: {
+    defaultValue?: T;
+}): T | undefined;
 export declare const useRouter: () => RouterContext;
 export declare const useRoute: () => RouteContext;
 export declare const useResolvedPath: (path: () => string) => import("solid-js").SourceAccessor<string | undefined>;
@@ -55,43 +59,47 @@ export declare const useLocation: <S = unknown>() => Location<S>;
  */
 export declare const useIsRouting: () => () => boolean;
 /**
- * usePreloadRoute returns a function that can be used to preload a route manual.
- * This is what happens automatically with link hovering and similar focus based behavior, but it is available here as an API.
+ * `useMatch` takes an accessor that returns the path and creates a `Memo` that returns match information if the current path matches the provided path.
+ * Useful for determining if a given path matches the current route.
  *
  * @example
  * ```js
- * const preload = usePreloadRoute();
+ * const match = useMatch(() => props.href);
  *
- * preload(`/users/settings`, { preloadData: true });
+ * return <div classList={{ active: Boolean(match()) }} />;
  * ```
  */
-export declare const usePreloadRoute: () => (url: string | URL, options?: {
-    preloadData?: boolean;
-}) => void;
+export declare const useMatch: <S extends string>(path: () => S, matchFilters?: MatchFilters<S>) => import("solid-js").SourceAccessor<import("./types.js").PathMatch | undefined>;
 /**
- * `useMatch` takes an accessor that returns the path and creates a `Memo` that returns match information if the current path matches the provided path.
- * Useful for determining if a given path matches the current route.
+ * `useRouteMatches` returns an accessor of the router's resolved matches for
+ * the current location — the chain of route definitions producing the current
+ * render, outermost first. Useful for reading `info` metadata off the matched
+ * chain. Unlike `useMatch`, which tests a path pattern you supply against the
+ * location, this reflects the route tree itself.
  *
  * @example
  * ```js
- * const match = useMatch(() => props.href);
+ * const matches = useRouteMatches();
  *
- * return <div classList={{ active: Boolean(match()) }} />;
+ * const breadcrumbs = createMemo(() => matches().map(m => m.route.info.breadcrumb));
  * ```
  */
-export declare const useMatch: <S extends string>(path: () => S, matchFilters?: MatchFilters<S>) => import("solid-js").SourceAccessor<import("./types.js").PathMatch | undefined>;
+export declare const useRouteMatches: () => () => RouteMatch[];
 /**
- * `useCurrentMatches` returns all the matches for the current matched route.
- * Useful for getting all the route information.
+ * `usePreloadRoute` returns a function for warming a route by hand — the same
+ * work link hover/focus intent triggers automatically: the matched routes'
+ * lazy components load, and with `preloadData` their `preload` functions run.
  *
  * @example
  * ```js
- * const matches = useCurrentMatches();
+ * const preload = usePreloadRoute();
  *
- * const breadcrumbs = createMemo(() => matches().map(m => m.route.info.breadcrumb))
+ * preload(paths.users(2).settings, { preloadData: true });
  * ```
  */
-export declare const useCurrentMatches: () => () => RouteMatch[];
+export declare const usePreloadRoute: () => (url: string | URL | TypedPath, options?: {
+    preloadData?: boolean;
+}) => void;
 /**
  * Retrieves a reactive, store-like object containing the current route path parameters as defined in the Route.
  *
@@ -103,7 +111,10 @@ export declare const useCurrentMatches: () => () => RouteMatch[];
  * const getUser = query(() => fetchUser(params.id), "user");
  * ```
  */
-export declare const useParams: <T extends Params>() => T;
+export declare function useParams<T extends Params>(): T;
+export declare function useParams<P extends Params>(path: TypedPath<P>): {
+    [K in keyof P]: P[K];
+};
 /**
  * Retrieves a tuple containing a reactive object to read the current location's query parameters and a method to update them.
  * The object is a proxy so you must access properties to subscribe to reactive updates.
@@ -131,48 +142,64 @@ export declare const useParams: <T extends Params>() => T;
  * );
  * ```
  */
-export declare const useSearchParams: <T extends SearchParams>() => [Partial<T>, (params: SetSearchParams, options?: Partial<NavigateOptions>) => void];
+export declare function useSearchParams<In, Out>(path: TypedSearchPath<In, Out>): [Out, (params: Partial<In>, options?: Partial<NavigateOptions>) => void];
+export declare function useSearchParams<T extends SearchParams>(): [
+    Partial<T>,
+    (params: SetSearchParams, options?: Partial<NavigateOptions>) => void
+];
+export interface LinkState {
+    /** The location matches this link or lives under it (exact-only when `end`). Styling: `data-active`. */
+    active: () => boolean;
+    /** The location matches this link exactly — what `aria-current="page"` reflects. */
+    current: () => boolean;
+    /** This link is the target of an in-flight navigation. Styling: `data-pending`. */
+    pending: () => boolean;
+}
 /**
- * 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).
+ * Reactive link state for custom link components — the programmatic
+ * counterpart of the attribute vocabulary plain anchors receive
+ * (`aria-current`, `data-active`, `data-pending`).
  *
  * @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);
- *   }
- * });
+ * ```tsx
+ * function TabLink(props: { href: string; children: JSX.Element }) {
+ *   const link = useLinkState(() => props.href);
+ *   return (
+ *     <a href={props.href} class="tab" data-selected={link.active() || undefined}>
+ *       {props.children}
+ *     </a>
+ *   );
+ * }
  * ```
  */
-export declare const useBeforeLeave: (listener: (e: BeforeLeaveEventArgs) => void) => void;
-export declare function createRoutes(routeDef: RouteDefinition, base?: string): RouteDescription[];
-export declare function createBranch(routes: RouteDescription[], index?: number): Branch;
+export declare const useLinkState: (href: () => string | TypedPath, options?: {
+    end?: boolean;
+}) => LinkState;
+/** Reactive read of the lazy-subtree version — recompile compiled branches when it changes. */
+export declare function trackLazySubtrees(): number;
+/** Non-reactive read, for cache-busting outside the reactive graph (server collectors). */
+export declare function peekLazySubtrees(): number;
+/**
+ * Kicks (or joins) a boundary's resolution. Returns the resolved routes
+ * synchronously once available, the in-flight promise otherwise. Commit is
+ * always async — even for thunks returning arrays — so the version bump
+ * never writes a signal from inside a render computation.
+ */
+export declare function resolveLazySubtree(record: LazyBoundary): readonly RouteDefinition[] | Promise<readonly RouteDefinition[]>;
 /**
- * Resolves the route tree an app hands the router — JSX `<Route>` children
- * (`Route` is a data-holder component, evaluating to its merged props),
- * config objects, arrays, or thunks producing either — into route
- * definitions. Shared by the `<Router>` component (which keeps the
- * resolution live) and the server integration's preload runner (one-shot).
+ * The unresolved boundaries in a match chain. Rendering gates on these (the
+ * route-states memo suspends until they land — see routers/components.tsx)
+ * and the server's flight collector awaits them before its preload pass.
  */
-export declare function resolveRouteDefinitions(routes: JSX.Element | RouteDefinition | RouteDefinition[]): () => RouteDefinition | RouteDefinition[];
-export declare function createBranches(routeDef: RouteDefinition | RouteDefinition[], base?: string, stack?: RouteDescription[], branches?: Branch[]): Branch[];
+export declare function unresolvedLazyMatches(matches: RouteMatch[]): LazyBoundary[];
+export declare function createRoutes(routeDef: RouteDefinition, base?: string): RouteDescription[];
+export declare function createBranch(routes: RouteDescription[], index?: number): Branch;
+export declare function createBranches(routeDef: RouteDefinition | readonly RouteDefinition[], base?: string, stack?: RouteDescription[], branches?: Branch[]): Branch[];
 export declare function getRouteMatches(branches: Branch[], location: string): RouteMatch[];
 export declare function mergeParams(matches: RouteMatch[]): Params;
+export declare function registerFlightRouter(router: RouterContext): () => void;
+export declare function provideFlightConsumer(factory: (router: RouterContext) => () => void): void;
+export declare function provideFlashDecoder(decoder: (cookieHeader: string | null) => FlashSubmission | undefined): void;
 export declare function getIntent(): Intent | undefined;
 export declare function getInPreloadFn(): boolean;
 export declare function setInPreloadFn(value: boolean): void;