hono-preact 0.1.0

package/README.md

@@ -0,0 +1,47 @@
+# hono-preact
+
+A small full-stack framework. Hono on the edge, Preact in the browser, manifest driven routes, typed RPC, streaming everywhere.
+
+- **Docs:** https://framework.sbesh.com/docs
+- **Demo:** https://framework.sbesh.com/demo
+- **Repo:** https://github.com/sbesh91/hono-preact
+
+## Install
+
+```bash
+pnpm add hono-preact hono preact preact-iso preact-render-to-string hoofd
+pnpm add -D vite
+```
+
+## Quick start
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite';
+import { honoPreact } from 'hono-preact/vite';
+
+export default defineConfig({
+  plugins: [honoPreact()],
+});
+```
+
+```ts
+// src/routes.ts
+import { defineRoutes } from 'hono-preact';
+export default defineRoutes([
+  { path: '/', view: () => import('./pages/home.js') },
+]);
+```
+
+Full walkthrough: https://framework.sbesh.com/docs/quick-start
+
+## Subpaths
+
+- `hono-preact`: iso runtime exports (routes, pages, loaders, actions, forms, guards).
+- `hono-preact/server`: server entry, `renderPage`, SSR streaming helpers.
+- `hono-preact/vite`: `honoPreact()` plugin for Vite.
+- `hono-preact/internal`: advanced exports for tooling authors. No stability guarantee.
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './iso/index';

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

package/dist/index.js

@@ -0,0 +1 @@
+export * from './iso/index.js';

package/dist/internal.d.ts

@@ -0,0 +1 @@
+export * from './iso/internal/index';

package/dist/internal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../src/internal.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC"}

package/dist/internal.js

@@ -0,0 +1 @@
+export * from './iso/internal/index.js';

package/dist/iso/action.d.ts

@@ -0,0 +1,78 @@
+import type { Context } from 'hono';
+import type { ContentfulStatusCode } from 'hono/utils/http-status';
+import type { LoaderRef } from './define-loader.js';
+export type ActionStub<TPayload, TResult, TChunk = never> = {
+    readonly __module: string;
+    readonly __action: string;
+    readonly __phantom?: readonly [TPayload, TResult, TChunk];
+    useAction<TSnapshot = unknown>(options?: UseActionOptions<TPayload, TResult, TChunk, TSnapshot>): UseActionResult<TPayload, TResult>;
+};
+export type ActionCtx = {
+    c: Context;
+    signal: AbortSignal;
+};
+export type ActionFn<TPayload, TResult, TChunk = never> = ((ctx: ActionCtx, payload: TPayload) => Promise<TResult>) | ((ctx: ActionCtx, payload: TPayload) => Promise<ReadableStream<TChunk>>) | ((ctx: ActionCtx, payload: TPayload) => AsyncGenerator<TChunk, TResult, unknown>);
+export declare function defineAction<TPayload, TResult, TChunk = never>(fn: ActionFn<TPayload, TResult, TChunk>): ActionStub<TPayload, TResult, TChunk>;
+export type UseActionOptions<TPayload, TResult, TChunk = never, TSnapshot = unknown> = {
+    /**
+     * How to update loader caches after the action commits. Three modes:
+     *
+     * - `'auto'`: re-RUN the active page's loader (the one wrapping this
+     *   `useAction` call). Triggers a real fetch through `/__loaders` — it
+     *   is NOT a no-op even when nothing observable changed. Equivalent to
+     *   calling `useReload().reload()` from `onSuccess`.
+     * - `false` (default): do nothing.
+     * - An array of `LoaderRef`s: call `.invalidate()` on each (clear cache
+     *   only; no immediate refetch). If the active page's loader is in the
+     *   array, ALSO re-run it.
+     *
+     * See `/docs/reloading` for the full mental model.
+     */
+    invalidate?: 'auto' | false | ReadonlyArray<LoaderRef<unknown>>;
+    onMutate?: (payload: TPayload) => TSnapshot;
+    onChunk?: (chunk: TChunk) => void;
+    onError?: (err: Error, snapshot: TSnapshot) => void;
+    onSuccess?: (data: TResult, snapshot: TSnapshot) => void;
+};
+/**
+ * The value `mutate` resolves to. A discriminated union so callers can
+ * chain on success without awaiting then probing the hook's `data`/`error`
+ * state, and without leaking unhandled rejections in fire-and-forget callers.
+ *
+ * - Success: `{ ok: true, data }`. For streaming actions that emit no
+ *   `result` SSE event, `data` is `undefined`; declare `TResult = void` (or
+ *   include `undefined` in its union) if your action doesn't emit a result.
+ * - Failure: `{ ok: false, error }`. The same `Error` instance is also
+ *   written to the hook's `error` state and passed to `onError`.
+ *
+ * Returning a union (rather than throwing) keeps `mutate(...)` ergonomic
+ * for non-awaiting call sites — the existing `error` state field is the
+ * idiomatic way to render an error UI — while still letting awaiting
+ * callers do `if (result.ok) navigate(...)`.
+ */
+export type MutateResult<TResult> = {
+    ok: true;
+    data: TResult;
+} | {
+    ok: false;
+    error: Error;
+};
+export type UseActionResult<TPayload, TResult> = {
+    mutate: (payload: TPayload) => Promise<MutateResult<TResult>>;
+    pending: boolean;
+    error: Error | null;
+    data: TResult | null;
+};
+export declare function useAction<TPayload, TResult, TChunk = never, TSnapshot = unknown>(stub: ActionStub<TPayload, TResult, TChunk>, options?: UseActionOptions<TPayload, TResult, TChunk, TSnapshot>): UseActionResult<TPayload, TResult>;
+export type ActionGuardContext = {
+    c: Context;
+    module: string;
+    action: string;
+    payload: unknown;
+};
+export type ActionGuardFn = (ctx: ActionGuardContext, next: () => Promise<void>) => Promise<void>;
+export declare class ActionGuardError extends Error {
+    readonly status: ContentfulStatusCode;
+    constructor(message: string, status?: ContentfulStatusCode);
+}
+export declare const defineActionGuard: (fn: ActionGuardFn) => ActionGuardFn;

package/dist/iso/action.js

@@ -0,0 +1,189 @@
+import { useCallback, useContext, useRef, useState } from 'preact/hooks';
+import { ReloadContext } from './reload-context.js';
+import { ActiveLoaderIdContext } from './internal/contexts.js';
+export function defineAction(fn) {
+    // Runtime no-op: returns fn as-is. actionsHandler casts it back to a function.
+    // The ActionStub type is enforced only by TypeScript and the Vite plugin.
+    return fn;
+}
+function hasFileValues(payload) {
+    if (typeof File === 'undefined')
+        return false;
+    if (typeof payload !== 'object' || payload === null)
+        return false;
+    return Object.values(payload).some((v) => v instanceof File);
+}
+export function useAction(stub, options) {
+    const [pending, setPending] = useState(false);
+    const [error, setError] = useState(null);
+    const [data, setData] = useState(null);
+    const reloadCtx = useContext(ReloadContext);
+    const activeLoaderId = useContext(ActiveLoaderIdContext);
+    const stubRef = useRef(stub);
+    stubRef.current = stub;
+    const optionsRef = useRef(options);
+    optionsRef.current = options;
+    const mutate = useCallback(async (payload) => {
+        setPending(true);
+        setError(null);
+        const currentStub = stubRef.current;
+        const currentOptions = optionsRef.current;
+        let snapshot;
+        if (currentOptions?.onMutate) {
+            snapshot = currentOptions.onMutate(payload);
+        }
+        let finalResult;
+        try {
+            const stub = currentStub;
+            let response;
+            if (hasFileValues(payload)) {
+                const fd = new FormData();
+                fd.append('__module', stub.__module);
+                fd.append('__action', stub.__action);
+                for (const [key, value] of Object.entries(payload)) {
+                    if (key === '__module' || key === '__action')
+                        continue;
+                    if (value instanceof File) {
+                        fd.append(key, value);
+                    }
+                    else if (typeof value === 'string') {
+                        fd.append(key, value);
+                    }
+                    else {
+                        fd.append(key, JSON.stringify(value));
+                    }
+                }
+                response = await fetch('/__actions', { method: 'POST', body: fd });
+            }
+            else {
+                response = await fetch('/__actions', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        module: stub.__module,
+                        action: stub.__action,
+                        payload,
+                    }),
+                });
+            }
+            if (!response.ok) {
+                const body = (await response.json());
+                throw new Error(body.error ?? `Action failed with status ${response.status}`);
+            }
+            const contentType = response.headers.get('Content-Type') ?? '';
+            // Server-side `GuardRedirect` thrown from an action (or its guards) comes
+            // back as `{ __redirect }`. Hand off to the browser; the rest of this
+            // promise will never settle, but the page is navigating away anyway.
+            if (!contentType.includes('text/event-stream')) {
+                const peek = (await response
+                    .clone()
+                    .json()
+                    .catch(() => undefined));
+                if (peek !== null &&
+                    typeof peek === 'object' &&
+                    peek !== undefined &&
+                    '__redirect' in peek &&
+                    typeof peek.__redirect === 'string') {
+                    if (typeof window !== 'undefined') {
+                        window.location.assign(peek.__redirect);
+                    }
+                    // Cast through `as` because TS can't see this promise never settles.
+                    return await new Promise(() => { });
+                }
+            }
+            if (contentType.includes('text/event-stream') && response.body) {
+                const { readSSE } = await import('./internal/sse-decoder.js');
+                let resultValue;
+                let streamError = null;
+                for await (const ev of readSSE(response.body)) {
+                    if (ev.event === 'message') {
+                        try {
+                            currentOptions?.onChunk?.(JSON.parse(ev.data));
+                        }
+                        catch {
+                            // malformed JSON in stream: skip
+                        }
+                    }
+                    else if (ev.event === 'result') {
+                        try {
+                            resultValue = JSON.parse(ev.data);
+                        }
+                        catch (e) {
+                            streamError = new Error(`Malformed result event in stream: ${e instanceof Error ? e.message : String(e)}`);
+                        }
+                    }
+                    else if (ev.event === 'error') {
+                        try {
+                            const parsed = JSON.parse(ev.data);
+                            streamError = new Error(parsed.message ?? 'Streamed error');
+                            if (parsed.name)
+                                streamError.name = parsed.name;
+                        }
+                        catch (e) {
+                            streamError = new Error(`Malformed error event in stream: ${e instanceof Error ? e.message : String(e)}`);
+                        }
+                    }
+                }
+                if (streamError) {
+                    throw streamError;
+                }
+                if (resultValue !== undefined) {
+                    setData(resultValue);
+                    currentOptions?.onSuccess?.(resultValue, snapshot);
+                    finalResult = resultValue;
+                }
+                else {
+                    currentOptions?.onSuccess?.(undefined, snapshot);
+                    // Streaming actions with no `result` event resolve with undefined.
+                    // Consumers should type `TResult = void` (or include `undefined`)
+                    // when their action doesn't emit a result.
+                    finalResult = undefined;
+                }
+            }
+            else {
+                const result = (await response.json());
+                setData(result);
+                currentOptions?.onSuccess?.(result, snapshot);
+                finalResult = result;
+            }
+            if (currentOptions?.invalidate === 'auto') {
+                reloadCtx?.reload();
+            }
+            else if (Array.isArray(currentOptions?.invalidate)) {
+                let invalidatedActive = false;
+                for (const ref of currentOptions.invalidate) {
+                    ref.invalidate();
+                    if (activeLoaderId && ref.__id === activeLoaderId) {
+                        invalidatedActive = true;
+                    }
+                }
+                // If the user's invalidate list includes the active page's loader,
+                // also re-run that loader so the visible <Loader> picks up fresh
+                // data. Other refs (sibling pages) just clear their caches; those
+                // pages will refetch on their next mount.
+                if (invalidatedActive) {
+                    reloadCtx?.reload();
+                }
+            }
+        }
+        catch (err) {
+            const e = err instanceof Error ? err : new Error(String(err));
+            setError(e);
+            currentOptions?.onError?.(e, snapshot);
+            setPending(false);
+            return { ok: false, error: e };
+        }
+        setPending(false);
+        return { ok: true, data: finalResult };
+    }, []);
+    return { mutate, pending, error, data };
+}
+export class ActionGuardError extends Error {
+    status;
+    constructor(message, status = 403) {
+        super(message);
+        this.status = status;
+        this.name = 'ActionGuardError';
+    }
+}
+export const defineActionGuard = (fn) => fn;

package/dist/iso/cache.d.ts

@@ -0,0 +1,17 @@
+import type { Loader } from './define-loader.js';
+export interface LoaderCache<T> {
+    get(locKey?: string): T | null;
+    set(value: T, locKey?: string): void;
+    has(locKey?: string): boolean;
+    wrap(loader: Loader<T>): Loader<T>;
+    invalidate(): void;
+}
+type RequestStore = Map<symbol, unknown>;
+export declare function getRequestStore(): RequestStore | undefined;
+export declare function getRequestHonoContext<T = unknown>(): T | undefined;
+export declare function runRequestScope<R>(fn: () => R | Promise<R>, initial?: {
+    honoContext?: unknown;
+}): R | Promise<R>;
+export declare function captureRequestScope(): <R>(fn: () => R | Promise<R>) => R | Promise<R>;
+export declare function createCache<T>(): LoaderCache<T>;
+export {};

package/dist/iso/cache.js

@@ -0,0 +1,122 @@
+import { isBrowser } from './is-browser.js';
+// AsyncLocalStorage powers per-request isolation on the server. Available on
+// Node and on Cloudflare Workers with `nodejs_compat`. We skip the import in
+// a browser-like environment so client bundles don't try to resolve
+// `node:async_hooks`.
+let alsInstance = null;
+const looksLikeBrowser = typeof globalThis !== 'undefined' &&
+    typeof globalThis.window !== 'undefined' &&
+    typeof globalThis.document !== 'undefined';
+if (!looksLikeBrowser) {
+    try {
+        const moduleName = 'node:async_hooks';
+        const mod = (await import(/* @vite-ignore */ moduleName));
+        alsInstance = new mod.AsyncLocalStorage();
+    }
+    catch {
+        alsInstance = null;
+    }
+}
+const HONO_CONTEXT_KEY = Symbol('@hono-preact/iso/honoContext');
+export function getRequestStore() {
+    return alsInstance?.getStore();
+}
+// Returns the seeded value from the active runRequestScope, or undefined when no scope
+// is active (browser / happy-dom: node:async_hooks is unavailable). Throws when a scope
+// IS active but was never seeded with { honoContext } (framework bug, surfaces loud).
+// The `as T` is a typed Map-read, not a value cast.
+export function getRequestHonoContext() {
+    const store = getRequestStore();
+    if (!store)
+        return undefined;
+    const ctx = store.get(HONO_CONTEXT_KEY);
+    if (ctx === undefined) {
+        throw new Error('runRequestScope is active but was not seeded with { honoContext }. ' +
+            'The framework must pass { honoContext: c } when entering the scope.');
+    }
+    return ctx;
+}
+export function runRequestScope(fn, initial) {
+    if (!alsInstance)
+        return fn();
+    const store = new Map();
+    if (initial?.honoContext !== undefined) {
+        store.set(HONO_CONTEXT_KEY, initial.honoContext);
+    }
+    return alsInstance.run(store, fn);
+}
+// Capture the active request scope so work scheduled later (e.g. a
+// `ReadableStream.start` callback that fires after the outer `runRequestScope`
+// frame has already returned) can re-enter the same per-request store.
+// Returns a binder; in a non-ALS environment, the binder runs `fn` directly.
+// Generators that yield and then resume from outside the scope lose ALS
+// propagation on V8; binding their drain restores it.
+export function captureRequestScope() {
+    if (!alsInstance)
+        return (fn) => fn();
+    const store = alsInstance.getStore();
+    if (!store)
+        return (fn) => fn();
+    const als = alsInstance;
+    return (fn) => als.run(store, fn);
+}
+export function createCache() {
+    const key = Symbol('cache');
+    let fallbackStore = null;
+    function readEntry() {
+        if (!isBrowser()) {
+            const reqStore = getRequestStore();
+            if (reqStore) {
+                return reqStore.get(key) ?? null;
+            }
+        }
+        return fallbackStore;
+    }
+    function writeEntry(entry) {
+        if (!isBrowser()) {
+            const reqStore = getRequestStore();
+            if (reqStore) {
+                if (entry === null)
+                    reqStore.delete(key);
+                else
+                    reqStore.set(key, entry);
+                return;
+            }
+        }
+        fallbackStore = entry;
+    }
+    function entryMatches(entry, locKey) {
+        // A null locKey on the entry means "matches any caller locKey" (back-compat).
+        return entry.locKey === null || entry.locKey === locKey;
+    }
+    return {
+        get(locKey) {
+            const entry = readEntry();
+            if (entry === null || !entryMatches(entry, locKey))
+                return null;
+            return entry.value;
+        },
+        set(value, locKey) {
+            writeEntry({ value, locKey: locKey ?? null });
+        },
+        has(locKey) {
+            const entry = readEntry();
+            return entry !== null && entryMatches(entry, locKey);
+        },
+        wrap(loader) {
+            // Cast to Promise<T>: Task 11 will add a runtime adapter for generators/streams.
+            // wrap() writes without a locKey so existing callers remain back-compat.
+            return async (props) => {
+                const entry = readEntry();
+                if (entry !== null)
+                    return entry.value;
+                const result = await loader(props);
+                writeEntry({ value: result, locKey: null });
+                return result;
+            };
+        },
+        invalidate() {
+            writeEntry(null);
+        },
+    };
+}

package/dist/iso/client-script.d.ts

@@ -0,0 +1,2 @@
+import type { VNode } from 'preact';
+export declare function ClientScript(): VNode;

package/dist/iso/client-script.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+export function ClientScript() {
+    const src = import.meta.env.PROD
+        ? '/static/client.js'
+        : '/@id/__x00__virtual:hono-preact/client';
+    // `async` on a module script: download in parallel with parsing AND execute
+    // as soon as available, rather than waiting for the document to finish
+    // parsing. Critical for streaming SSR: without it, the client entry waits
+    // for the entire streaming response to close before hydrating, by which
+    // time every chunk has queued, and the post-hydration drain collapses
+    // them all into a single render at the final value.
+    return _jsx("script", { type: "module", src: src, async: true });
+}

package/dist/iso/define-loader.d.ts

@@ -0,0 +1,47 @@
+import type { ComponentChildren, ComponentType, FunctionComponent } from 'preact';
+import type { Context } from 'hono';
+import type { RouteHook } from 'preact-iso';
+import { type LoaderCache } from './cache.js';
+export type LoaderCtx = {
+    c: Context;
+    location: RouteHook;
+    signal: AbortSignal;
+};
+export type Loader<T> = ((ctx: LoaderCtx) => Promise<T>) | ((ctx: LoaderCtx) => Promise<ReadableStream<T>>) | ((ctx: LoaderCtx) => AsyncGenerator<T, void, unknown>);
+export interface LoaderRef<T> {
+    readonly __id: symbol;
+    readonly __moduleKey?: string;
+    readonly __loaderName?: string;
+    readonly fn: Loader<T>;
+    readonly cache: LoaderCache<T>;
+    readonly params: string[] | '*';
+    useData(): T;
+    useError(): Error | null;
+    invalidate(): void;
+    Boundary: ComponentType<{
+        fallback?: ComponentChildren;
+        errorFallback?: ComponentChildren | ((err: Error, reset: () => void) => ComponentChildren);
+        children: ComponentChildren;
+    }>;
+    View<P extends Record<string, unknown> = {}>(render: (args: P & {
+        data: T;
+        error: Error | null;
+        reload: () => void;
+    }) => ComponentChildren, opts?: {
+        fallback?: ComponentChildren;
+        errorFallback?: ComponentChildren | ((err: Error, reset: () => void) => ComponentChildren);
+    }): FunctionComponent<P>;
+}
+/**
+ * Plugin-emitted opts for `defineLoader`. The `__moduleKey` field is threaded
+ * in by the `moduleKeyPlugin` Vite transform; user code does not set it.
+ * `cache` is an opt-in for sharing a cache instance across multiple loaders;
+ * when omitted, `defineLoader` creates a fresh one.
+ */
+export type DefineLoaderOpts<T> = {
+    __moduleKey?: string;
+    __loaderName?: string;
+    cache?: LoaderCache<T>;
+    params?: string[] | '*';
+};
+export declare function defineLoader<T>(fn: Loader<T>, opts?: DefineLoaderOpts<T>): LoaderRef<T>;

package/dist/iso/define-loader.js

@@ -0,0 +1,118 @@
+import { h } from 'preact';
+import { useContext } from 'preact/hooks';
+import { createCache } from './cache.js';
+import { LoaderDataContext, LoaderErrorContext } from './internal/contexts.js';
+import { Loader as LoaderHost } from './internal/loader.js';
+import { ReloadContext } from './reload-context.js';
+// Stash a shared cache map on globalThis so duplicate copies of
+// @hono-preact/iso (workspace hoisting quirks) still see the same map.
+// The serverOnlyPlugin emits a `defineLoader(fn, { __moduleKey })` call at
+// EVERY importer of a `.server.*` module, so without this dedup each
+// importer would get its own private LoaderCache and `ref.invalidate()`
+// would only clear the calling importer's copy. That breaks cross-route
+// invalidation (movie.tsx invalidating `moviesListLoader` no longer flushes
+// the list page's cache).
+//
+// CAVEAT — process-global identity. `Symbol.for(...)` produces a key in the
+// process-wide Symbol registry, so this map is shared across every consumer
+// of @hono-preact/iso running in the same V8 isolate. On Cloudflare Workers
+// (process-per-isolate, short-lived) this is fine. On a long-lived Node
+// process serving multiple tenants from one JS realm, the registry IS
+// shared across tenants — a loader registered by tenant A's
+// `pages/movies.server.ts` and tenant B's are colocated. Per-loader cache
+// keys (the `__moduleKey` + cache identity symbol minted at defineLoader
+// time) prevent cross-tenant DATA leaks; what's shared is the cache
+// registry's identity, not the cache contents. Even so, v0.2 should move
+// this to a per-app registry (via runRequestScope or an explicit app
+// handle) so this is not an implicit footgun.
+const SHARED_CACHES_KEY = Symbol.for('@hono-preact/iso/loaderCaches');
+function getSharedCaches() {
+    const g = globalThis;
+    let map = g[SHARED_CACHES_KEY];
+    if (!map) {
+        map = new Map();
+        g[SHARED_CACHES_KEY] = map;
+    }
+    return map;
+}
+function ViewRenderer({ loaderRef, props, render, }) {
+    const data = loaderRef.useData();
+    const error = loaderRef.useError();
+    const reloadCtx = useContext(ReloadContext);
+    const reload = reloadCtx?.reload ?? (() => { });
+    return render({ data, error, reload, ...props });
+}
+export function defineLoader(fn, opts) {
+    const idKey = opts?.__moduleKey
+        ? opts.__loaderName
+            ? `${opts.__moduleKey}::${opts.__loaderName}`
+            : opts.__moduleKey
+        : null;
+    const __id = idKey
+        ? Symbol.for(`@hono-preact/loader:${idKey}`)
+        : Symbol(`@hono-preact/loader:<unkeyed>`);
+    let cache = opts?.cache;
+    if (!cache) {
+        if (opts?.__moduleKey) {
+            // Keyed loaders: dedupe the auto-attached cache by __id so every
+            // importer of the same .server module shares one LoaderCache.
+            const shared = getSharedCaches();
+            const existing = shared.get(__id);
+            if (existing) {
+                cache = existing;
+            }
+            else {
+                cache = createCache();
+                shared.set(__id, cache);
+            }
+        }
+        else {
+            // Unkeyed loaders only happen when consumers call defineLoader(fn)
+            // directly without the plugin transform (i.e. in tests). Each call
+            // gets a fresh cache.
+            cache = createCache();
+        }
+    }
+    const ref = {
+        __id,
+        __moduleKey: opts?.__moduleKey,
+        __loaderName: opts?.__loaderName,
+        fn,
+        cache: cache,
+        params: opts?.params ?? [],
+        useData() {
+            const ctx = useContext(LoaderDataContext);
+            if (!ctx) {
+                throw new Error('loader.useData() must be called inside a `loader.View` render function or inside a `loader.Boundary`.');
+            }
+            return ctx.data;
+        },
+        useError() {
+            return useContext(LoaderErrorContext);
+        },
+        invalidate() {
+            cache.invalidate();
+        },
+        Boundary: null,
+        View: null,
+    };
+    const Boundary = ({ fallback, errorFallback, children, }) => {
+        return h(LoaderHost, {
+            loader: ref,
+            fallback,
+            errorFallback,
+            children,
+        });
+    };
+    ref.Boundary = Boundary;
+    const View = (render, viewOpts) => {
+        const Wrapped = (props) => h(ref.Boundary, {
+            fallback: viewOpts?.fallback,
+            errorFallback: viewOpts?.errorFallback,
+            children: h((ViewRenderer), { loaderRef: ref, props, render }),
+        });
+        return Wrapped;
+    };
+    ref.View = View;
+    return ref;
+}

package/dist/iso/define-page.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentType, FunctionComponent, JSX } from 'preact';
+import type { RouteHook } from 'preact-iso';
+import type { GuardFn } from './guard.js';
+import { type WrapperProps } from './page.js';
+export type PageBindings = {
+    Wrapper?: ComponentType<WrapperProps>;
+    errorFallback?: JSX.Element | ((error: Error, reset: () => void) => JSX.Element);
+    guards?: GuardFn[];
+};
+export declare function definePage(Component: ComponentType, bindings?: PageBindings): FunctionComponent<RouteHook>;