toiljs 0.0.3 → 0.0.5

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.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/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 {};