toiljs 0.0.15 → 0.0.19

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

@@ -16,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);

package/build/client/rpc.d.ts

@@ -0,0 +1 @@
+export declare const Server: unknown;

package/build/client/rpc.js

@@ -0,0 +1,37 @@
+function restMissingStub(path) {
+    const call = () => {
+        throw new Error(`toiljs REST: ${path}() is unavailable. The generated REST client has not loaded - ` +
+            `import a type from your 'shared/server' (so the client attaches), or run 'npm run build:server'.`);
+    };
+    return new Proxy(call, {
+        get(_target, prop) {
+            if (typeof prop === 'symbol' || prop === 'then')
+                return undefined;
+            return restMissingStub(`${path}.${String(prop)}`);
+        },
+        apply() {
+            return call();
+        },
+    });
+}
+function rpcStub(path) {
+    const call = () => {
+        throw new Error(`toiljs RPC: ${path}() is not available yet. The client<->server transport ` +
+            `is not wired; this is a generated stub. Remote calls will work once transport lands.`);
+    };
+    return new Proxy(call, {
+        get(_target, prop) {
+            if (typeof prop === 'symbol' || prop === 'then')
+                return undefined;
+            if (path === 'Server' && prop === 'REST') {
+                const rest = globalThis.__toilRest;
+                return rest !== undefined ? rest : restMissingStub('Server.REST');
+            }
+            return rpcStub(`${path}.${prop}`);
+        },
+        apply() {
+            return call();
+        },
+    });
+}
+export const Server = rpcStub('Server');