toiljs 0.0.14 → 0.0.16

package/build/client/dev/error-overlay.js

@@ -2,12 +2,17 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Component, useSyncExternalStore, } from 'react';
 let current = null;
 const listeners = new Set();
+let errorLog = [];
+const MAX_LOG = 50;
 function emit() {
     for (const listener of listeners)
         listener();
 }
 function setDevError(next) {
     current = next;
+    if (next) {
+        errorLog = [...errorLog, next].slice(-MAX_LOG);
+    }
     emit();
 }
 function subscribe(listener) {
@@ -16,6 +21,10 @@ function subscribe(listener) {
         listeners.delete(listener);
     };
 }
+export function getErrorLog() {
+    return errorLog;
+}
+export const subscribeErrors = subscribe;
 export function isDevMode() {
     try {
         return Boolean(import.meta.env?.DEV);
@@ -30,13 +39,14 @@ export function initDevErrorOverlay() {
         return;
     windowBound = true;
     window.addEventListener('error', (event) => {
-        if (event.error instanceof Error)
-            setDevError({ error: event.error, source: 'window' });
+        if (event.error instanceof Error) {
+            setDevError({ error: event.error, source: 'window', time: Date.now() });
+        }
     });
     window.addEventListener('unhandledrejection', (event) => {
         const reason = event.reason;
         const error = reason instanceof Error ? reason : new Error(String(reason));
-        setDevError({ error, source: 'unhandledrejection' });
+        setDevError({ error, source: 'unhandledrejection', time: Date.now() });
     });
 }
 export class DevErrorBoundary extends Component {
@@ -46,7 +56,12 @@ export class DevErrorBoundary extends Component {
         return { crashed: true };
     }
     componentDidCatch(error, info) {
-        setDevError({ error, componentStack: info.componentStack ?? undefined, source: 'render' });
+        setDevError({
+            error,
+            componentStack: info.componentStack ?? undefined,
+            source: 'render',
+            time: Date.now(),
+        });
     }
     componentDidMount() {
         this.unsubscribe = subscribe(() => {

package/build/client/head/metadata.d.ts

@@ -1,4 +1,4 @@
-import type { HeadSpec, LinkTag, MetaTag } from './head.js';
+import { type HeadSpec, type LinkTag, type MetaTag } from './head.js';
 import type { RouteParams } from '../routing/match.js';
 export interface OpenGraph {
     readonly title?: string;
@@ -27,3 +27,5 @@ export interface GenerateMetadataArgs<T = unknown> {
 }
 export type GenerateMetadata<T = unknown> = (args: GenerateMetadataArgs<T>) => Metadata | Promise<Metadata>;
 export declare function resolveMetadata(metadata: Metadata): HeadSpec;
+export declare function useMetadata(metadata: Metadata): void;
+export declare function Metadata(props: Metadata): null;

package/build/client/head/metadata.js

@@ -1,3 +1,4 @@
+import { useHead } from './head.js';
 export function resolveMetadata(metadata) {
     const meta = [];
     if (metadata.description !== undefined) {
@@ -38,3 +39,10 @@ export function resolveMetadata(metadata) {
         link.push(...metadata.link);
     return { title: metadata.title, titleTemplate: metadata.titleTemplate, meta, link };
 }
+export function useMetadata(metadata) {
+    useHead(resolveMetadata(metadata));
+}
+export function Metadata(props) {
+    useMetadata(props);
+    return null;
+}

package/build/client/index.d.ts

@@ -4,12 +4,12 @@ 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, setViewTransitions } from './navigation/navigation.js';
+export { navigate, back, forward, refresh, setViewTransitions, setTransitions, href, } 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 { useLoaderData, revalidate, invalidateLoaderData } from './routing/loader.js';
-export type { LoaderArgs, LoaderFunction, LoaderData, Revalidate } from './routing/loader.js';
+export type { LoaderArgs, LoaderFunction, LoaderData, Revalidate, StaticParams, GenerateStaticParams, } from './routing/loader.js';
 export { useAction } from './routing/action.js';
 export type { UseActionOptions, ActionState, ActionHandle, RevalidateTarget, } from './routing/action.js';
 export { prefetch } from './navigation/prefetch.js';
@@ -20,8 +20,8 @@ export { connectChannel, useChannel, resolveChannelUrl } from './channel/channel
 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';
-export { resolveMetadata } from './head/metadata.js';
-export type { Metadata, GenerateMetadata, GenerateMetadataArgs, OpenGraph, } from './head/metadata.js';
+export { resolveMetadata, useMetadata, Metadata } from './head/metadata.js';
+export type { GenerateMetadata, GenerateMetadataArgs, OpenGraph } from './head/metadata.js';
 export { searchPages, registerPages, getPages, pagePath } from './search/search.js';
 export type { PageMeta, PageSearchResult, PageSearchOptions, SearchField, SearchHints, } from './search/search.js';
 export { usePageSearch } from './search/use-page-search.js';

package/build/client/index.js

@@ -2,7 +2,7 @@ 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, setViewTransitions } from './navigation/navigation.js';
+export { navigate, back, forward, refresh, setViewTransitions, setTransitions, href, } from './navigation/navigation.js';
 export { useParams, useNavigate, useLocation, usePathname, useSearchParams, useRouter, useNavigationPending, } from './routing/hooks.js';
 export { useLoaderData, revalidate, invalidateLoaderData } from './routing/loader.js';
 export { useAction } from './routing/action.js';
@@ -10,7 +10,7 @@ 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';
-export { resolveMetadata } from './head/metadata.js';
+export { resolveMetadata, useMetadata, Metadata } from './head/metadata.js';
 export { searchPages, registerPages, getPages, pagePath } from './search/search.js';
 export { usePageSearch } from './search/use-page-search.js';
 export { Image } from './components/Image.js';

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

@@ -1,5 +1,7 @@
 import type { Href } from '../types.js';
+export declare const href: (path: string) => Href;
 export declare function setViewTransitions(enabled: boolean): void;
+export declare function setTransitions(enabled: boolean): void;
 export declare function isSoftNavigation(): boolean;
 export declare function previousPathname(): string;
 export declare function settleNavigation(): void;

package/build/client/navigation/navigation.js

@@ -1,12 +1,17 @@
 import { startTransition } from 'react';
 import { flushSync } from 'react-dom';
 import { enableManualScrollRestoration, planScroll, rememberScroll } from './scroll.js';
+export const href = (path) => path;
 const listeners = new Set();
 let popstateBound = false;
 let viewTransitions = false;
 export function setViewTransitions(enabled) {
     viewTransitions = enabled;
 }
+let navTransitions = false;
+export function setTransitions(enabled) {
+    navTransitions = enabled;
+}
 function shouldViewTransition() {
     if (!viewTransitions || typeof document === 'undefined' || typeof window === 'undefined') {
         return false;
@@ -31,9 +36,12 @@ function notify() {
             flushSync(runListeners);
         });
     }
-    else {
+    else if (navTransitions) {
         startTransition(runListeners);
     }
+    else {
+        runListeners();
+    }
 }
 let softNav = false;
 let currentPath = typeof window === 'undefined' ? '/' : window.location.pathname;

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

@@ -8,4 +8,5 @@ declare global {
     }
 }
 export declare function prefetch(href: string): void;
+export declare function prefetchData(href: string): void;
 export declare function startPrefetcher(routes: RouteDef[]): void;

package/build/client/navigation/prefetch.js

@@ -1,6 +1,8 @@
+import { prefetchRouteData } from '../routing/loader.js';
 import { matchRoute } from '../routing/match.js';
 let routeTable = [];
 const warmed = new WeakSet();
+const dataWarmed = new Set();
 let io = null;
 let mo = null;
 function routeForHref(href) {
@@ -32,6 +34,29 @@ export function prefetch(href) {
     if (route)
         warm(route);
 }
+export function prefetchData(href) {
+    let url;
+    try {
+        url = new URL(href, window.location.href);
+    }
+    catch {
+        return;
+    }
+    if (url.origin !== window.location.origin)
+        return;
+    const key = url.pathname + url.search;
+    if (dataWarmed.has(key))
+        return;
+    for (const route of routeTable) {
+        const params = matchRoute(route.pattern, url.pathname);
+        if (params) {
+            dataWarmed.add(key);
+            warm(route);
+            prefetchRouteData(route, params, url.pathname, url.search);
+            return;
+        }
+    }
+}
 function isPrefetchable(a) {
     if (a.target && a.target !== '_self')
         return false;
@@ -89,6 +114,16 @@ export function startPrefetcher(routes) {
             }
         }
     });
+    const onIntent = (event) => {
+        const target = event.target;
+        if (!(target instanceof Element))
+            return;
+        const a = target.closest('a[href]');
+        if (a instanceof HTMLAnchorElement && isPrefetchable(a) && a.href)
+            prefetchData(a.href);
+    };
+    document.addEventListener('pointerover', onIntent, { passive: true });
+    document.addEventListener('focusin', onIntent);
     const begin = () => {
         scan(document);
         mo?.observe(document.body, { childList: true, subtree: true });

package/build/client/routing/Router.js

@@ -21,7 +21,7 @@ function renderMatched(matched, params, pathname, epoch, keyPrefix) {
     const fallback = matched.loading
         ? createElement(Suspense, { fallback: null }, createElement(loadingComponent(matched.loading)))
         : null;
-    let content = (_jsx(Suspense, { fallback: fallback, children: _jsx(RoutePage, { route: matched, params: params, dataKey: dataKey, epoch: epoch }) }, matched.loading ? `${dataKey}:${String(epoch)}` : undefined));
+    let content = (_jsx(Suspense, { fallback: fallback, children: _jsx(RoutePage, { route: matched, params: params, dataKey: dataKey, epoch: epoch }, dataKey) }, matched.loading ? `${dataKey}:${String(epoch)}` : undefined));
     const templates = matched.templates ?? [];
     for (let i = templates.length - 1; i >= 0; i--) {
         const Template = nestedLayout(templates[i]);

package/build/client/routing/hooks.js

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useMemo, useReducer, useSyncExternalStore } from 'react';
+import { startTransition, useContext, useEffect, useMemo, useReducer, useSyncExternalStore, } from 'react';
 import { back, forward, isNavigationPending, navigate, refresh, subscribeLocation, subscribePending, } from '../navigation/navigation.js';
 import { clearLoaderData, revalidate as revalidateData } from './loader.js';
 import { ParamsContext } from './params-context.js';
@@ -32,7 +32,11 @@ export function useRouter() {
 }
 function useLocationSubscription() {
     const [, forceUpdate] = useReducer((n) => n + 1, 0);
-    useEffect(() => subscribeLocation(forceUpdate), []);
+    useEffect(() => subscribeLocation(() => {
+        startTransition(() => {
+            forceUpdate();
+        });
+    }), []);
 }
 export function useLocation() {
     useLocationSubscription();

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

@@ -7,6 +7,8 @@ export interface LoaderArgs {
     readonly searchParams: URLSearchParams;
 }
 export type LoaderFunction<T = unknown> = (args: LoaderArgs) => T | Promise<T>;
+export type StaticParams = Record<string, string | string[]>;
+export type GenerateStaticParams = () => StaticParams[] | Promise<StaticParams[]>;
 export type Revalidate = number | false;
 export type LoaderData<T> = T extends (...args: never[]) => infer R ? Awaited<R> : T;
 interface RouteData {
@@ -14,7 +16,30 @@ interface RouteData {
     data: unknown;
     head?: HeadSpec;
 }
+interface Entry {
+    status: 'pending' | 'done' | 'error';
+    promise: Promise<void>;
+    value?: RouteData;
+    error?: unknown;
+    loadedAt: number;
+    revalidate: Revalidate;
+    epoch: number;
+    hasLoader: boolean;
+    prefetched: boolean;
+}
+export declare function subscribeLoaderCache(listener: () => void): () => void;
+export interface LoaderCacheSnapshot {
+    readonly key: string;
+    readonly status: Entry['status'];
+    readonly hasLoader: boolean;
+    readonly revalidate: Revalidate;
+    readonly loadedAt: number;
+    readonly epoch: number;
+    readonly data: unknown;
+}
+export declare function inspectLoaderCache(): LoaderCacheSnapshot[];
 export declare function loaderKey(pathname: string, search: string): string;
+export declare function prefetchRouteData(route: RouteDef, params: RouteParams, pathname: string, search: string): void;
 export declare function readRouteData(route: RouteDef, params: RouteParams, key: string, epoch: number): RouteData;
 export declare function clearLoaderData(): void;
 export declare function invalidateLoaderData(href?: string): void;

package/build/client/routing/loader.js

@@ -1,14 +1,45 @@
 import { createContext, useContext } from 'react';
 import { resolveMetadata } from '../head/metadata.js';
-import { refresh as rerender } from '../navigation/navigation.js';
+import { navigationEpoch, refresh as rerender } from '../navigation/navigation.js';
 const cache = new Map();
 const MAX_ENTRIES = 32;
+const cacheListeners = new Set();
+let cacheSnapshot = [];
+function emitCache() {
+    cacheSnapshot = [...cache.entries()].map(([key, e]) => ({
+        key,
+        status: e.status,
+        hasLoader: e.hasLoader,
+        revalidate: e.revalidate,
+        loadedAt: e.loadedAt,
+        epoch: e.epoch,
+        data: e.value?.data,
+    }));
+    for (const l of cacheListeners)
+        l();
+}
+export function subscribeLoaderCache(listener) {
+    cacheListeners.add(listener);
+    return () => {
+        cacheListeners.delete(listener);
+    };
+}
+export function inspectLoaderCache() {
+    return cacheSnapshot;
+}
 export function loaderKey(pathname, search) {
     return `${pathname}${search}`;
 }
-async function loadRoute(route, params) {
+export function prefetchRouteData(route, params, pathname, search) {
+    const key = loaderKey(pathname, search);
+    const existing = cache.get(key);
+    if (existing && existing.status !== 'error')
+        return;
+    startFetch(route, params, key, navigationEpoch(), search, true);
+}
+async function loadRoute(route, params, search) {
     const mod = await route.load();
-    const searchParams = new URLSearchParams(typeof window === 'undefined' ? '' : window.location.search);
+    const searchParams = new URLSearchParams(search);
     const data = mod.loader ? await mod.loader({ params, searchParams }) : undefined;
     let head;
     if (mod.generateMetadata) {
@@ -30,11 +61,14 @@ function isStale(entry, epoch) {
         return false;
     if (entry.revalidate === false)
         return false;
-    if (entry.revalidate === 0)
+    if (entry.revalidate === 0) {
+        if (entry.prefetched)
+            return false;
         return entry.epoch !== epoch;
+    }
     return Date.now() - entry.loadedAt >= entry.revalidate * 1000;
 }
-function startFetch(route, params, key, epoch) {
+function startFetch(route, params, key, epoch, search, prefetched = false) {
     const created = {
         status: 'pending',
         promise: Promise.resolve(),
@@ -42,17 +76,20 @@ function startFetch(route, params, key, epoch) {
         revalidate: 0,
         epoch,
         hasLoader: false,
+        prefetched,
     };
-    created.promise = loadRoute(route, params).then((result) => {
+    created.promise = loadRoute(route, params, search).then((result) => {
         created.value = result.data;
         created.revalidate = result.revalidate;
         created.hasLoader = result.hasLoader;
         created.loadedAt = Date.now();
         created.status = 'done';
+        emitCache();
     }, (error) => {
         created.error = error;
         created.loadedAt = Date.now();
         created.status = 'error';
+        emitCache();
     });
     cache.set(key, created);
     while (cache.size > MAX_ENTRIES) {
@@ -61,24 +98,31 @@ function startFetch(route, params, key, epoch) {
             break;
         cache.delete(oldest);
     }
+    emitCache();
     return created;
 }
 export function readRouteData(route, params, key, epoch) {
+    const search = typeof window === 'undefined' ? '' : window.location.search;
     let entry = cache.get(key);
     if (entry && entry.status !== 'pending' && isStale(entry, epoch)) {
         entry = undefined;
     }
-    entry ??= startFetch(route, params, key, epoch);
+    entry ??= startFetch(route, params, key, epoch, search);
     if (entry.status === 'pending')
         throw entry.promise;
     if (entry.status === 'error')
         throw entry.error;
     if (!entry.value)
         throw entry.promise;
+    if (entry.prefetched) {
+        entry.prefetched = false;
+        entry.epoch = epoch;
+    }
     return entry.value;
 }
 export function clearLoaderData() {
     cache.clear();
+    emitCache();
 }
 function keyForHref(href) {
     if (typeof window === 'undefined')
@@ -94,11 +138,13 @@ function keyForHref(href) {
 export function invalidateLoaderData(href) {
     if (href === undefined) {
         cache.clear();
+        emitCache();
         return;
     }
     const key = keyForHref(href);
     if (key !== undefined)
         cache.delete(key);
+    emitCache();
 }
 export function revalidate(href) {
     invalidateLoaderData(href);

package/build/client/routing/mount.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { createRoot } from 'react-dom/client';
-import { DevErrorBoundary, DevErrorOverlay, initDevErrorOverlay, isDevMode, } from '../dev/error-overlay.js';
+import { DevToolbar } from '../dev/devtools.js';
+import { DevErrorBoundary, DevErrorOverlay, initDevErrorOverlay, } from '../dev/error-overlay.js';
 import { initNavigation } from '../navigation/navigation.js';
 import { startPrefetcher } from '../navigation/prefetch.js';
 import { Router } from './Router.js';
@@ -10,9 +11,9 @@ export function mount(routes, layout = null, notFound = null, globalError = null
         throw new Error('toil: #root element not found');
     initNavigation();
     const app = (_jsx(Router, { routes: routes, layout: layout, notFound: notFound, globalError: globalError, slots: slots }));
-    if (isDevMode()) {
+    if (import.meta.env.DEV) {
         initDevErrorOverlay();
-        createRoot(el).render(_jsxs(_Fragment, { children: [_jsx(DevErrorBoundary, { children: app }), _jsx(DevErrorOverlay, {})] }));
+        createRoot(el).render(_jsxs(_Fragment, { children: [_jsx(DevErrorBoundary, { children: app }), _jsx(DevErrorOverlay, {}), _jsx(DevToolbar, { routes: routes, slots: slots })] }));
     }
     else {
         createRoot(el).render(app);