toiljs 0.0.4 → 0.0.6

package/build/client/head.js

@@ -0,0 +1,87 @@
+import { useEffect } from 'react';
+function metaKey(m) {
+    if (m.name !== undefined)
+        return `name:${m.name}`;
+    if (m.property !== undefined)
+        return `property:${m.property}`;
+    return `meta:${JSON.stringify(m)}`;
+}
+export function mergeHead(specs) {
+    let title;
+    let titleTemplate;
+    const meta = new Map();
+    const link = new Map();
+    for (const spec of specs) {
+        if (spec.title !== undefined)
+            title = spec.title;
+        if (spec.titleTemplate !== undefined)
+            titleTemplate = spec.titleTemplate;
+        for (const m of spec.meta ?? [])
+            meta.set(metaKey(m), m);
+        for (const l of spec.link ?? [])
+            link.set(`${l.rel}:${l.href}`, l);
+    }
+    const resolvedTitle = title !== undefined && titleTemplate !== undefined
+        ? titleTemplate.replace('%s', title)
+        : title;
+    return { title: resolvedTitle, meta: [...meta.values()], link: [...link.values()] };
+}
+const entries = new Map();
+let order = [];
+let seq = 0;
+let baseTitle = null;
+function setAttrs(el, attrs) {
+    el.setAttribute('data-toil-head', '');
+    for (const [key, value] of Object.entries(attrs)) {
+        if (value !== undefined)
+            el.setAttribute(key, value);
+    }
+}
+function apply() {
+    if (typeof document === 'undefined')
+        return;
+    if (baseTitle === null)
+        baseTitle = document.title;
+    const resolved = mergeHead(order.map((id) => entries.get(id)).filter((s) => !!s));
+    document.title = resolved.title ?? baseTitle;
+    for (const stale of document.head.querySelectorAll('[data-toil-head]'))
+        stale.remove();
+    for (const m of resolved.meta) {
+        const el = document.createElement('meta');
+        setAttrs(el, m);
+        document.head.appendChild(el);
+    }
+    for (const l of resolved.link) {
+        const el = document.createElement('link');
+        setAttrs(el, l);
+        document.head.appendChild(el);
+    }
+}
+function addHead(spec) {
+    const id = ++seq;
+    entries.set(id, spec);
+    order.push(id);
+    apply();
+    return id;
+}
+function removeHead(id) {
+    entries.delete(id);
+    order = order.filter((x) => x !== id);
+    apply();
+}
+export function useHead(spec) {
+    const json = JSON.stringify(spec);
+    useEffect(() => {
+        const id = addHead(JSON.parse(json));
+        return () => {
+            removeHead(id);
+        };
+    }, [json]);
+}
+export function useTitle(title) {
+    useHead({ title });
+}
+export function Head(props) {
+    useHead(props);
+    return null;
+}

package/build/client/hooks.d.ts

@@ -0,0 +1,17 @@
+import type { RouteParams } from './match.js';
+import { navigate, type NavigateOptions } from './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/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.js';
+import { ParamsContext } from './params-context.js';
+import { prefetch } from './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/index.d.ts

@@ -1,6 +1,18 @@
-export { mount, Router, Link, navigate, useParams, useNavigate, useLocation } from './runtime.js';
-export type { RouteDef, LayoutLoader, NotFoundLoader } from './runtime.js';
-export { matchRoute } from './match.js';
-export type { RouteParams } from './match.js';
-export { connectChannel, useChannel, resolveChannelUrl } from './channel.js';
-export type { Channel, ChannelOptions, ChannelHook, ChannelData } from './channel.js';
+export { mount } from './routing/mount.js';
+export { Router } from './routing/Router.js';
+export { Link } from './navigation/Link.js';
+export type { LinkProps } from './navigation/Link.js';
+export { NavLink, matchActive } from './navigation/NavLink.js';
+export type { NavLinkProps, NavLinkState } from './navigation/NavLink.js';
+export { navigate, back, forward, refresh } from './navigation/navigation.js';
+export type { NavigateOptions } from './navigation/navigation.js';
+export { useParams, useNavigate, useLocation, usePathname, useSearchParams, useRouter, useNavigationPending, } from './routing/hooks.js';
+export type { RouterInstance } from './routing/hooks.js';
+export { prefetch } from './navigation/prefetch.js';
+export type { RouteDef, LayoutLoader, LayoutComponentLoader, NotFoundLoader, RouteErrorProps, } from './types.js';
+export { matchRoute } from './routing/match.js';
+export type { RouteParams } from './routing/match.js';
+export { connectChannel, useChannel, resolveChannelUrl } from './channel/channel.js';
+export type { Channel, ChannelOptions, ChannelHook, ChannelData } from './channel/channel.js';
+export { useHead, useTitle, Head, mergeHead } from './head/head.js';
+export type { HeadSpec, MetaTag, LinkTag, ResolvedHead } from './head/head.js';

package/build/client/index.js

@@ -1,3 +1,10 @@
-export { mount, Router, Link, navigate, useParams, useNavigate, useLocation } from './runtime.js';
-export { matchRoute } from './match.js';
-export { connectChannel, useChannel, resolveChannelUrl } from './channel.js';
+export { mount } from './routing/mount.js';
+export { Router } from './routing/Router.js';
+export { Link } from './navigation/Link.js';
+export { NavLink, matchActive } from './navigation/NavLink.js';
+export { navigate, back, forward, refresh } from './navigation/navigation.js';
+export { useParams, useNavigate, useLocation, usePathname, useSearchParams, useRouter, useNavigationPending, } from './routing/hooks.js';
+export { prefetch } from './navigation/prefetch.js';
+export { matchRoute } from './routing/match.js';
+export { connectChannel, useChannel, resolveChannelUrl } from './channel/channel.js';
+export { useHead, useTitle, Head, mergeHead } from './head/head.js';

package/build/client/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/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/match.js

@@ -4,6 +4,13 @@ export function matchRoute(pattern, pathname) {
     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)

package/build/client/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/mount.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createRoot } from 'react-dom/client';
+import { initNavigation } from './navigation.js';
+import { startPrefetcher } from './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/navigation/Link.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+export interface LinkProps extends Omit<ComponentPropsWithRef<'a'>, 'href'> {
+    href: string;
+    replace?: boolean;
+    scroll?: boolean;
+    prefetch?: boolean;
+}
+export declare function Link(props: LinkProps): ReactNode;

package/build/client/navigation/Link.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { navigate } from './navigation.js';
+import { prefetch } from './prefetch.js';
+function isExternalHref(href) {
+    try {
+        return new URL(href, window.location.href).origin !== window.location.origin;
+    }
+    catch {
+        return true;
+    }
+}
+export function Link(props) {
+    const { href, replace = false, scroll = true, prefetch: prefetchProp = true, onClick, onPointerEnter, onFocus, children, ...rest } = props;
+    const handleClick = (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented ||
+            event.button !== 0 ||
+            event.metaKey ||
+            event.ctrlKey ||
+            event.shiftKey ||
+            event.altKey ||
+            (rest.target !== undefined && rest.target !== '_self') ||
+            rest.download !== undefined ||
+            href.startsWith('#') ||
+            isExternalHref(href)) {
+            return;
+        }
+        event.preventDefault();
+        navigate(href, { replace, scroll });
+    };
+    const warm = () => {
+        if (prefetchProp)
+            prefetch(href);
+    };
+    const handlePointerEnter = (event) => {
+        onPointerEnter?.(event);
+        warm();
+    };
+    const handleFocus = (event) => {
+        onFocus?.(event);
+        warm();
+    };
+    return (_jsx("a", { ...rest, ...(prefetchProp ? {} : { 'data-no-prefetch': '' }), href: href, onClick: handleClick, onPointerEnter: handlePointerEnter, onFocus: handleFocus, children: children }));
+}

package/build/client/navigation/NavLink.d.ts

@@ -0,0 +1,14 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { type LinkProps } from './Link.js';
+export interface NavLinkState {
+    readonly isActive: boolean;
+}
+export interface NavLinkProps extends Omit<LinkProps, 'className' | 'style' | 'children'> {
+    className?: string | ((state: NavLinkState) => string | undefined);
+    style?: CSSProperties | ((state: NavLinkState) => CSSProperties | undefined);
+    children?: ReactNode | ((state: NavLinkState) => ReactNode);
+    end?: boolean;
+    activeClassName?: string;
+}
+export declare function matchActive(linkPath: string, currentPath: string, end: boolean): boolean;
+export declare function NavLink(props: NavLinkProps): ReactNode;

package/build/client/navigation/NavLink.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLocation } from '../routing/hooks.js';
+import { Link } from './Link.js';
+function normalizePath(p) {
+    return p.length > 1 ? p.replace(/\/+$/, '') : p;
+}
+export function matchActive(linkPath, currentPath, end) {
+    const link = normalizePath(linkPath);
+    const current = normalizePath(currentPath);
+    if (current === link)
+        return true;
+    if (end)
+        return false;
+    if (link === '/')
+        return true;
+    return current.startsWith(link + '/');
+}
+export function NavLink(props) {
+    const { href, className, style, children, end = false, activeClassName = 'active', ...rest } = props;
+    const pathname = useLocation();
+    let linkPath = href;
+    try {
+        linkPath = new URL(href, window.location.href).pathname;
+    }
+    catch {
+        linkPath = href;
+    }
+    const isActive = matchActive(linkPath, pathname, end);
+    const state = { isActive };
+    const resolvedClassName = typeof className === 'function'
+        ? className(state)
+        : [className, isActive ? activeClassName : undefined].filter(Boolean).join(' ') ||
+            undefined;
+    const resolvedStyle = typeof style === 'function' ? style(state) : style;
+    const resolvedChildren = typeof children === 'function' ? children(state) : children;
+    return (_jsx(Link, { ...rest, href: href, className: resolvedClassName, style: resolvedStyle, "aria-current": isActive ? 'page' : undefined, children: resolvedChildren }));
+}

package/build/client/navigation/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/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/navigation/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/navigation/prefetch.js

@@ -0,0 +1,100 @@
+import { matchRoute } from '../routing/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/navigation/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/navigation/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);
+}