toiljs 0.0.4 → 0.0.6

package/build/client/navigation.d.ts

@@ -0,0 +1,13 @@
+export declare function settleNavigation(): void;
+export declare function isNavigationPending(): boolean;
+export declare function subscribePending(listener: () => void): () => void;
+export interface NavigateOptions {
+    readonly replace?: boolean;
+    readonly scroll?: boolean;
+}
+export declare function initNavigation(): void;
+export declare function navigate(href: string, options?: NavigateOptions): void;
+export declare function back(): void;
+export declare function forward(): void;
+export declare function refresh(): void;
+export declare function subscribeLocation(listener: () => void): () => void;

package/build/client/navigation.js

@@ -0,0 +1,97 @@
+import { enableManualScrollRestoration, planScroll, rememberScroll, } from './scroll.js';
+const listeners = new Set();
+let popstateBound = false;
+let keyCounter = 0;
+let currentKey = 'initial';
+function nextKey() {
+    keyCounter += 1;
+    return `t${String(keyCounter)}`;
+}
+function notify() {
+    for (const listener of listeners)
+        listener();
+}
+let startedTick = 0;
+let committedTick = 0;
+const pendingListeners = new Set();
+function emitPending() {
+    for (const listener of pendingListeners)
+        listener();
+}
+function beginNavigation() {
+    startedTick += 1;
+    emitPending();
+}
+export function settleNavigation() {
+    if (committedTick !== startedTick) {
+        committedTick = startedTick;
+        emitPending();
+    }
+}
+export function isNavigationPending() {
+    return startedTick !== committedTick;
+}
+export function subscribePending(listener) {
+    pendingListeners.add(listener);
+    return () => {
+        pendingListeners.delete(listener);
+    };
+}
+export function initNavigation() {
+    enableManualScrollRestoration();
+    const state = window.history.state;
+    if (state?.__toilKey) {
+        currentKey = state.__toilKey;
+    }
+    else {
+        currentKey = nextKey();
+        window.history.replaceState({ ...state, __toilKey: currentKey }, '');
+    }
+}
+export function navigate(href, options) {
+    beginNavigation();
+    rememberScroll(currentKey);
+    let hash = '';
+    try {
+        hash = new URL(href, window.location.href).hash;
+    }
+    catch {
+        hash = '';
+    }
+    if (options?.replace) {
+        window.history.replaceState({ __toilKey: currentKey }, '', href);
+    }
+    else {
+        currentKey = nextKey();
+        window.history.pushState({ __toilKey: currentKey }, '', href);
+    }
+    planScroll({ hash, toTop: options?.scroll !== false });
+    notify();
+}
+export function back() {
+    window.history.back();
+}
+export function forward() {
+    window.history.forward();
+}
+export function refresh() {
+    notify();
+}
+function handlePopState(event) {
+    beginNavigation();
+    rememberScroll(currentKey);
+    const state = event.state;
+    currentKey = state?.__toilKey ?? 'initial';
+    planScroll({ restoreKey: currentKey, hash: window.location.hash, toTop: false });
+    notify();
+}
+export function subscribeLocation(listener) {
+    if (!popstateBound) {
+        window.addEventListener('popstate', handlePopState);
+        popstateBound = true;
+    }
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}

package/build/client/params-context.d.ts

@@ -0,0 +1,2 @@
+import type { RouteParams } from './match.js';
+export declare const ParamsContext: import("react").Context<RouteParams>;

package/build/client/params-context.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const ParamsContext = createContext({});

package/build/client/prefetch.d.ts

@@ -0,0 +1,11 @@
+import type { RouteDef } from './types.js';
+declare global {
+    interface Navigator {
+        readonly connection?: {
+            readonly saveData?: boolean;
+            readonly effectiveType?: string;
+        };
+    }
+}
+export declare function prefetch(href: string): void;
+export declare function startPrefetcher(routes: RouteDef[]): void;

package/build/client/prefetch.js

@@ -0,0 +1,100 @@
+import { matchRoute } from './match.js';
+let routeTable = [];
+const warmed = new WeakSet();
+let io = null;
+let mo = null;
+function routeForHref(href) {
+    let url;
+    try {
+        url = new URL(href, window.location.href);
+    }
+    catch {
+        return null;
+    }
+    if (url.origin !== window.location.origin)
+        return null;
+    for (const route of routeTable) {
+        if (matchRoute(route.pattern, url.pathname))
+            return route;
+    }
+    return null;
+}
+function warm(route) {
+    if (warmed.has(route))
+        return;
+    warmed.add(route);
+    void route.load().catch(() => {
+        warmed.delete(route);
+    });
+}
+export function prefetch(href) {
+    const route = routeForHref(href);
+    if (route)
+        warm(route);
+}
+function isPrefetchable(a) {
+    if (a.target && a.target !== '_self')
+        return false;
+    if (a.hasAttribute('download'))
+        return false;
+    if (a.dataset.noPrefetch !== undefined)
+        return false;
+    return true;
+}
+function observeAnchor(a) {
+    if (!io || !isPrefetchable(a) || !routeForHref(a.href))
+        return;
+    io.observe(a);
+}
+function scan(root) {
+    root.querySelectorAll('a[href]').forEach((el) => {
+        if (el instanceof HTMLAnchorElement)
+            observeAnchor(el);
+    });
+}
+function shouldSkipForConnection() {
+    const c = navigator.connection;
+    if (!c)
+        return false;
+    return c.saveData === true || c.effectiveType === 'slow-2g' || c.effectiveType === '2g';
+}
+export function startPrefetcher(routes) {
+    routeTable = routes;
+    if (typeof window === 'undefined' ||
+        typeof IntersectionObserver === 'undefined' ||
+        typeof MutationObserver === 'undefined' ||
+        io) {
+        return;
+    }
+    if (shouldSkipForConnection())
+        return;
+    io = new IntersectionObserver((entries) => {
+        for (const entry of entries) {
+            if (!entry.isIntersecting)
+                continue;
+            const a = entry.target;
+            if (a instanceof HTMLAnchorElement) {
+                io?.unobserve(a);
+                prefetch(a.href);
+            }
+        }
+    }, { rootMargin: '200px' });
+    mo = new MutationObserver((mutations) => {
+        for (const m of mutations) {
+            for (const node of m.addedNodes) {
+                if (node instanceof HTMLAnchorElement)
+                    observeAnchor(node);
+                else if (node instanceof Element)
+                    scan(node);
+            }
+        }
+    });
+    const begin = () => {
+        scan(document);
+        mo?.observe(document.body, { childList: true, subtree: true });
+    };
+    if (typeof requestIdleCallback === 'function')
+        requestIdleCallback(begin);
+    else
+        setTimeout(begin, 200);
+}

package/build/client/routing/Router.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from 'react';
+import type { LayoutLoader, NotFoundLoader, RouteDef } from '../types.js';
+export declare function Router(props: {
+    routes: RouteDef[];
+    layout?: LayoutLoader;
+    notFound?: NotFoundLoader;
+}): ReactNode;

package/build/client/routing/Router.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement, Suspense, useLayoutEffect } from 'react';
+import { ErrorBoundary } from './error-boundary.js';
+import { useLocation } from './hooks.js';
+import { errorComponent, loadingComponent, nestedLayout, pageComponent, resolveLayout, resolveNotFound, } from './lazy.js';
+import { matchRoute } from './match.js';
+import { ParamsContext } from './params-context.js';
+import { settleNavigation } from '../navigation/navigation.js';
+import { applyScroll } from '../navigation/scroll.js';
+export function Router(props) {
+    const { routes, layout = null, notFound = null } = props;
+    const pathname = useLocation();
+    useLayoutEffect(() => {
+        applyScroll();
+        settleNavigation();
+    });
+    let matched;
+    let params = {};
+    for (const route of routes) {
+        const result = matchRoute(route.pattern, pathname);
+        if (result) {
+            matched = route;
+            params = result;
+            break;
+        }
+    }
+    let content;
+    if (matched) {
+        const Page = pageComponent(matched);
+        const fallback = matched.loading
+            ? createElement(Suspense, { fallback: null }, createElement(loadingComponent(matched.loading)))
+            : null;
+        content = (_jsx(Suspense, { fallback: fallback, children: _jsx(Page, {}) }));
+        const chain = matched.layouts ?? [];
+        for (let i = chain.length - 1; i >= 0; i--) {
+            const NestedLayout = nestedLayout(chain[i]);
+            content = (_jsx(Suspense, { fallback: null, children: _jsx(NestedLayout, { children: content }) }));
+        }
+        if (matched.errorComponent) {
+            content = (_jsx(ErrorBoundary, { fallback: errorComponent(matched.errorComponent), children: content }));
+        }
+    }
+    else if (notFound) {
+        const NotFound = resolveNotFound(notFound);
+        content = (_jsx(Suspense, { fallback: null, children: _jsx(NotFound, {}) }));
+    }
+    else {
+        content = _jsx("div", { style: { padding: 24, fontFamily: 'system-ui' }, children: "404 \u2014 Not found" });
+    }
+    if (layout) {
+        const Layout = resolveLayout(layout);
+        content = (_jsx(Suspense, { fallback: null, children: _jsx(Layout, { children: content }) }));
+    }
+    return _jsx(ParamsContext.Provider, { value: params, children: content });
+}

package/build/client/routing/error-boundary.d.ts

@@ -0,0 +1,16 @@
+import { Component, type ComponentType, type ReactNode } from 'react';
+import type { RouteErrorProps } from '../types.js';
+interface ErrorBoundaryProps {
+    readonly fallback: ComponentType<RouteErrorProps>;
+    readonly children: ReactNode;
+}
+interface ErrorBoundaryState {
+    readonly error: Error | null;
+}
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    state: ErrorBoundaryState;
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    reset: () => void;
+    render(): ReactNode;
+}
+export {};

package/build/client/routing/error-boundary.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Component, Suspense } from 'react';
+export class ErrorBoundary extends Component {
+    state = { error: null };
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    reset = () => {
+        this.setState({ error: null });
+    };
+    render() {
+        const { error } = this.state;
+        if (error) {
+            const Fallback = this.props.fallback;
+            return (_jsx(Suspense, { fallback: null, children: _jsx(Fallback, { error: error, reset: this.reset }) }));
+        }
+        return this.props.children;
+    }
+}

package/build/client/routing/hooks.d.ts

@@ -0,0 +1,17 @@
+import type { RouteParams } from './match.js';
+import { navigate, type NavigateOptions } from '../navigation/navigation.js';
+export interface RouterInstance {
+    push(href: string, options?: NavigateOptions): void;
+    replace(href: string): void;
+    back(): void;
+    forward(): void;
+    refresh(): void;
+    prefetch(href: string): void;
+}
+export declare function useParams(): RouteParams;
+export declare function useNavigate(): typeof navigate;
+export declare function useRouter(): RouterInstance;
+export declare function useLocation(): string;
+export declare function usePathname(): string;
+export declare function useSearchParams(): URLSearchParams;
+export declare function useNavigationPending(): boolean;

package/build/client/routing/hooks.js

@@ -0,0 +1,48 @@
+import { startTransition, useContext, useEffect, useMemo, useReducer, useSyncExternalStore, } from 'react';
+import { back, forward, isNavigationPending, navigate, refresh, subscribeLocation, subscribePending, } from '../navigation/navigation.js';
+import { ParamsContext } from './params-context.js';
+import { prefetch } from '../navigation/prefetch.js';
+const ROUTER = {
+    push: (href, options) => {
+        navigate(href, options);
+    },
+    replace: (href) => {
+        navigate(href, { replace: true });
+    },
+    back,
+    forward,
+    refresh,
+    prefetch,
+};
+export function useParams() {
+    return useContext(ParamsContext);
+}
+export function useNavigate() {
+    return navigate;
+}
+export function useRouter() {
+    return ROUTER;
+}
+function useLocationSubscription() {
+    const [, forceUpdate] = useReducer((n) => n + 1, 0);
+    useEffect(() => subscribeLocation(() => {
+        startTransition(() => {
+            forceUpdate();
+        });
+    }), []);
+}
+export function useLocation() {
+    useLocationSubscription();
+    return window.location.pathname;
+}
+export function usePathname() {
+    return useLocation();
+}
+export function useSearchParams() {
+    useLocationSubscription();
+    const search = window.location.search;
+    return useMemo(() => new URLSearchParams(search), [search]);
+}
+export function useNavigationPending() {
+    return useSyncExternalStore(subscribePending, isNavigationPending, () => false);
+}

package/build/client/routing/lazy.d.ts

@@ -0,0 +1,16 @@
+import { type ComponentType, type ReactNode } from 'react';
+import type { LayoutComponentLoader, LayoutLoader, NotFoundLoader, RouteDef, RouteErrorProps } from '../types.js';
+type Loader<P> = () => Promise<{
+    default: ComponentType<P>;
+}>;
+export declare function loadingComponent(loader: Loader<object>): ComponentType<object>;
+export declare function errorComponent(loader: Loader<RouteErrorProps>): ComponentType<RouteErrorProps>;
+export declare function pageComponent(route: RouteDef): ComponentType;
+export declare function resolveLayout(loader: NonNullable<LayoutLoader>): ComponentType<{
+    children?: ReactNode;
+}>;
+export declare function nestedLayout(loader: LayoutComponentLoader): ComponentType<{
+    children?: ReactNode;
+}>;
+export declare function resolveNotFound(loader: NonNullable<NotFoundLoader>): ComponentType;
+export {};

package/build/client/routing/lazy.js

@@ -0,0 +1,53 @@
+import { lazy } from 'react';
+function memoLazy(cache, loader) {
+    let component = cache.get(loader);
+    if (!component) {
+        component = lazy(loader);
+        cache.set(loader, component);
+    }
+    return component;
+}
+const loadingCache = new Map();
+export function loadingComponent(loader) {
+    return memoLazy(loadingCache, loader);
+}
+const errorCache = new Map();
+export function errorComponent(loader) {
+    return memoLazy(errorCache, loader);
+}
+const pageCache = new Map();
+export function pageComponent(route) {
+    let component = pageCache.get(route);
+    if (!component) {
+        component = lazy(route.load);
+        pageCache.set(route, component);
+    }
+    return component;
+}
+let layoutComponent = null;
+let layoutLoader = null;
+export function resolveLayout(loader) {
+    if (layoutLoader !== loader || !layoutComponent) {
+        layoutComponent = lazy(loader);
+        layoutLoader = loader;
+    }
+    return layoutComponent;
+}
+const nestedLayoutCache = new Map();
+export function nestedLayout(loader) {
+    let component = nestedLayoutCache.get(loader);
+    if (!component) {
+        component = lazy(loader);
+        nestedLayoutCache.set(loader, component);
+    }
+    return component;
+}
+let notFoundComponent = null;
+let notFoundLoader = null;
+export function resolveNotFound(loader) {
+    if (notFoundLoader !== loader || !notFoundComponent) {
+        notFoundComponent = lazy(loader);
+        notFoundLoader = loader;
+    }
+    return notFoundComponent;
+}

package/build/client/routing/match.d.ts

@@ -0,0 +1,2 @@
+export type RouteParams = Record<string, string>;
+export declare function matchRoute(pattern: string, pathname: string): RouteParams | null;

package/build/client/routing/match.js

@@ -0,0 +1,32 @@
+export function matchRoute(pattern, pathname) {
+    const patternSegs = pattern.split('/').filter(Boolean);
+    const pathSegs = pathname.split('/').filter(Boolean);
+    const params = {};
+    for (let i = 0; i < patternSegs.length; i++) {
+        const p = patternSegs[i];
+        if (p.startsWith('**')) {
+            params[p.slice(2)] = pathSegs
+                .slice(i)
+                .map((s) => decodeURIComponent(s))
+                .join('/');
+            return params;
+        }
+        if (p.startsWith('*')) {
+            const rest = pathSegs.slice(i);
+            if (rest.length === 0)
+                return null;
+            params[p.slice(1)] = rest.map((s) => decodeURIComponent(s)).join('/');
+            return params;
+        }
+        if (i >= pathSegs.length)
+            return null;
+        const value = pathSegs[i];
+        if (p.startsWith(':')) {
+            params[p.slice(1)] = decodeURIComponent(value);
+        }
+        else if (p !== value) {
+            return null;
+        }
+    }
+    return patternSegs.length === pathSegs.length ? params : null;
+}

package/build/client/routing/mount.d.ts

@@ -0,0 +1,2 @@
+import type { LayoutLoader, NotFoundLoader, RouteDef } from '../types.js';
+export declare function mount(routes: RouteDef[], layout?: LayoutLoader, notFound?: NotFoundLoader): void;

package/build/client/routing/mount.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createRoot } from 'react-dom/client';
+import { initNavigation } from '../navigation/navigation.js';
+import { startPrefetcher } from '../navigation/prefetch.js';
+import { Router } from './Router.js';
+export function mount(routes, layout = null, notFound = null) {
+    const el = document.getElementById('root');
+    if (!el)
+        throw new Error('toil: #root element not found');
+    initNavigation();
+    createRoot(el).render(_jsx(Router, { routes: routes, layout: layout, notFound: notFound }));
+    startPrefetcher(routes);
+}

package/build/client/routing/params-context.d.ts

@@ -0,0 +1,2 @@
+import type { RouteParams } from './match.js';
+export declare const ParamsContext: import("react").Context<RouteParams>;

package/build/client/routing/params-context.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const ParamsContext = createContext({});

package/build/client/scroll.d.ts

@@ -0,0 +1,8 @@
+export declare function enableManualScrollRestoration(): void;
+export declare function rememberScroll(key: string): void;
+export declare function planScroll(opts: {
+    restoreKey?: string;
+    hash: string;
+    toTop: boolean;
+}): void;
+export declare function applyScroll(): void;

package/build/client/scroll.js

@@ -0,0 +1,36 @@
+const positions = new Map();
+let plan = null;
+export function enableManualScrollRestoration() {
+    if (typeof window !== 'undefined' && 'scrollRestoration' in window.history) {
+        window.history.scrollRestoration = 'manual';
+    }
+}
+export function rememberScroll(key) {
+    positions.set(key, window.scrollY);
+}
+export function planScroll(opts) {
+    plan = {
+        restore: opts.restoreKey !== undefined ? (positions.get(opts.restoreKey) ?? 0) : null,
+        hash: opts.hash,
+        toTop: opts.toTop,
+    };
+}
+export function applyScroll() {
+    const current = plan;
+    plan = null;
+    if (!current)
+        return;
+    if (current.hash) {
+        const el = document.getElementById(decodeURIComponent(current.hash.slice(1)));
+        if (el) {
+            el.scrollIntoView();
+            return;
+        }
+    }
+    if (current.restore !== null) {
+        window.scrollTo(0, current.restore);
+        return;
+    }
+    if (current.toTop)
+        window.scrollTo(0, 0);
+}

package/build/client/types.d.ts

@@ -0,0 +1,27 @@
+import type { ComponentType, ReactNode } from 'react';
+export type LayoutComponentLoader = () => Promise<{
+    default: ComponentType<{
+        children?: ReactNode;
+    }>;
+}>;
+export interface RouteErrorProps {
+    readonly error: Error;
+    readonly reset: () => void;
+}
+export interface RouteDef {
+    readonly pattern: string;
+    readonly load: () => Promise<{
+        default: ComponentType;
+    }>;
+    readonly layouts?: readonly LayoutComponentLoader[];
+    readonly loading?: () => Promise<{
+        default: ComponentType;
+    }>;
+    readonly errorComponent?: () => Promise<{
+        default: ComponentType<RouteErrorProps>;
+    }>;
+}
+export type LayoutLoader = LayoutComponentLoader | null;
+export type NotFoundLoader = (() => Promise<{
+    default: ComponentType;
+}>) | null;

package/build/client/types.js

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