hono-preact 0.2.0 → 0.3.0

package/dist/iso/define-loader.js

@@ -42,7 +42,15 @@ function ViewRenderer({ loaderRef, props, render, }) {
     const reload = reloadCtx?.reload ?? (() => { });
     return render({ data, error, reload, ...props });
 }
+function validateTimeoutMs(value, context) {
+    if (value === undefined || value === false)
+        return;
+    if (!Number.isFinite(value) || value < 0) {
+        throw new RangeError(`${context}: timeoutMs must be a non-negative finite number or false, got ${String(value)}`);
+    }
+}
 export function defineLoader(fn, opts) {
+    validateTimeoutMs(opts?.timeoutMs, 'defineLoader');
     const idKey = opts?.__moduleKey
         ? opts.__loaderName
             ? `${opts.__moduleKey}::${opts.__loaderName}`
@@ -80,6 +88,7 @@ export function defineLoader(fn, opts) {
         fn,
         cache: cache,
         params: opts?.params ?? [],
+        timeoutMs: opts?.timeoutMs,
         // LoaderUse<T, boolean> structurally collapses to the same shape the
         // partitioner accepts; the cast hides only the generic narrowing on
         // StreamObserver's TChunk/TResult which is invariant. Identity-preserving.
@@ -97,26 +106,27 @@ export function defineLoader(fn, opts) {
         invalidate() {
             cache.invalidate();
         },
-        Boundary: null,
-        View: null,
-    };
-    const Boundary = ({ fallback, errorFallback, children, }) => {
-        return h(LoaderHost, {
+        // `Boundary` and `View` close over `ref`. The captures are by reference
+        // and only deref at call time (component render), so the cycle is safe;
+        // both are fully initialized before any consumer can invoke them.
+        Boundary: ({ fallback, errorFallback, children }) => 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;
+        }),
+        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/form.d.ts

@@ -1,7 +1,16 @@
 import type { JSX, ComponentChildren } from 'preact';
-export type FormProps<TPayload extends Record<string, unknown>> = Omit<JSX.HTMLAttributes<HTMLFormElement>, 'onSubmit'> & {
-    mutate: (payload: TPayload) => Promise<unknown> | unknown;
-    pending?: boolean;
+import type { ActionStub } from './action.js';
+import { type UseOptimisticActionResult } from './optimistic-action.js';
+/**
+ * The `action` prop accepts either a plain action stub or the branded value
+ * returned by `useOptimisticAction`. The union lets `<Form>` discover the
+ * optimistic apply via `OPTIMISTIC_BRAND in action` narrowing without
+ * casting away the type.
+ */
+type FormActionInput<TPayload, TResult> = ActionStub<TPayload, TResult, never> | UseOptimisticActionResult<TPayload, TResult, unknown>;
+export type FormProps<TPayload, TResult> = Omit<JSX.HTMLAttributes<HTMLFormElement>, 'action' | 'method' | 'onSubmit' | 'enctype'> & {
+    action: FormActionInput<TPayload, TResult>;
     children?: ComponentChildren;
 };
-export declare function Form<TPayload extends Record<string, unknown>>({ mutate, pending, children, ...rest }: FormProps<TPayload>): JSX.Element;
+export declare function Form<TPayload, TResult>({ action, children, ...rest }: FormProps<TPayload, TResult>): JSX.Element;
+export {};

package/dist/iso/form.js

@@ -1,40 +1,122 @@
-import { jsx as _jsx } from "preact/jsx-runtime";
-/**
- * Collect a FormData into a plain payload object.
- *
- * Repeated field names (checkboxes sharing a name, multi-select, multiple
- * `<input type="file" multiple>` entries) collect into an array. The old
- * `Object.fromEntries(fd)` produced the LAST value only, which was silent
- * data loss: a four-checkbox group would submit one value with no warning.
- *
- * Single-value fields stay scalar. Files survive as `File` instances.
- *
- * Consumers should type their `defineAction<TPayload, ...>` to match:
- * `tags: string[]`, `photos: File[]`, etc. for fields that may have multiple
- * values; scalar types for fields that won't.
- */
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { useState, useCallback, useMemo } from 'preact/hooks';
+import { OPTIMISTIC_BRAND, } from './optimistic-action.js';
+import { beginSubmit, endSubmit } from './internal/form-submit-store.js';
+import { setLastActionResult } from './internal/action-result-store.js';
+import { assignSafeRedirect } from './internal/safe-redirect.js';
+function hasOptimisticBrand(action) {
+    return OPTIMISTIC_BRAND in action;
+}
 function collectFormData(fd) {
-    const payload = {};
+    const out = {};
     for (const [key, value] of fd.entries()) {
-        if (key in payload) {
-            const existing = payload[key];
-            payload[key] = Array.isArray(existing)
-                ? [...existing, value]
-                : [existing, value];
-        }
-        else {
-            payload[key] = value;
-        }
+        if (key === '__module' || key === '__action')
+            continue;
+        const existing = out[key];
+        out[key] =
+            existing === undefined
+                ? value
+                : Array.isArray(existing)
+                    ? [...existing, value]
+                    : [existing, value];
     }
-    return payload;
+    return out;
 }
-export function Form({ mutate, pending, children, ...rest }) {
-    const handleSubmit = (e) => {
+export function Form({ action, children, ...rest }) {
+    const [pending, setPending] = useState(false);
+    const moduleKey = action.__module;
+    const actionName = action.__action;
+    const optimistic = useMemo(() => (hasOptimisticBrand(action) ? action[OPTIMISTIC_BRAND] : undefined), [action]);
+    const handleSubmit = useCallback(async (e) => {
         e.preventDefault();
         const formEl = e.currentTarget;
-        const formData = new FormData(formEl);
-        const payload = collectFormData(formData);
-        void mutate(payload);
-    };
-    return (_jsx("form", { ...rest, onSubmit: handleSubmit, children: _jsx("fieldset", { disabled: pending, class: "hp-form-fieldset", children: children }) }));
+        const target = typeof window !== 'undefined'
+            ? window.location.pathname + window.location.search
+            : '/';
+        const fd = new FormData(formEl);
+        const payload = collectFormData(fd);
+        let handle;
+        if (optimistic)
+            handle = optimistic.addOptimistic(payload);
+        setPending(true);
+        beginSubmit(moduleKey, actionName);
+        try {
+            const res = await fetch(target, {
+                method: 'POST',
+                body: fd,
+                headers: { Accept: 'application/json' },
+            });
+            const env = (await res.json().catch(() => null));
+            if (!env) {
+                handle?.revert();
+                if (typeof window !== 'undefined')
+                    window.location.reload();
+                return;
+            }
+            if (env.__outcome === 'redirect' && typeof env.to === 'string') {
+                const navigated = assignSafeRedirect(env.to);
+                if (navigated) {
+                    handle?.settle();
+                    return;
+                }
+                // Cross-origin: revert optimistic, surface as error result so useActionResult sees it.
+                handle?.revert();
+                setLastActionResult(moduleKey, actionName, {
+                    kind: 'error',
+                    message: `Refused cross-origin redirect to ${env.to}`,
+                    submittedPayload: payload,
+                });
+                return;
+            }
+            if (env.__outcome === 'success') {
+                handle?.settle();
+                setLastActionResult(moduleKey, actionName, {
+                    kind: 'success',
+                    data: env.data,
+                    submittedPayload: payload,
+                });
+                return;
+            }
+            if (env.__outcome === 'deny') {
+                handle?.revert();
+                setLastActionResult(moduleKey, actionName, {
+                    kind: 'deny',
+                    status: env.status ?? res.status,
+                    message: env.message ?? `Request denied (${env.status ?? res.status})`,
+                    data: env.data,
+                    submittedPayload: payload,
+                });
+                return;
+            }
+            if (env.__outcome === 'error') {
+                handle?.revert();
+                setLastActionResult(moduleKey, actionName, {
+                    kind: 'error',
+                    message: env.message ?? 'Action failed',
+                    submittedPayload: payload,
+                });
+                return;
+            }
+            // Unknown outcome (e.g. 'timeout'): treat as error.
+            handle?.revert();
+            setLastActionResult(moduleKey, actionName, {
+                kind: 'error',
+                message: env.message ?? `Unexpected outcome: ${env.__outcome ?? 'unknown'}`,
+                submittedPayload: payload,
+            });
+        }
+        catch (err) {
+            handle?.revert();
+            setLastActionResult(moduleKey, actionName, {
+                kind: 'error',
+                message: err instanceof Error ? err.message : String(err),
+                submittedPayload: payload,
+            });
+        }
+        finally {
+            setPending(false);
+            endSubmit(moduleKey, actionName);
+        }
+    }, [moduleKey, actionName, optimistic]);
+    return (_jsxs("form", { ...rest, method: "post", enctype: "multipart/form-data", onSubmit: handleSubmit, children: [_jsx("input", { type: "hidden", name: "__module", value: moduleKey }), _jsx("input", { type: "hidden", name: "__action", value: actionName }), _jsx("fieldset", { disabled: pending, class: "hp-form-fieldset", children: children })] }));
 }

package/dist/iso/index.d.ts

@@ -7,15 +7,18 @@ export { defineRoutes, Routes } from './define-routes.js';
 export type { RouteDef, RoutesManifest, FlatRoute, ServerRoute, LayoutProps, ViewProps, } from './define-routes.js';
 export { defineLoader } from './define-loader.js';
 export type { LoaderRef, LoaderCtx, Loader as LoaderFn, } from './define-loader.js';
-export { defineAction, useAction } from './action.js';
+export { defineAction, useAction, TimeoutError } from './action.js';
 export type { ActionStub, UseActionOptions, UseActionResult, MutateResult, } from './action.js';
 export type { ContentfulStatusCode } from 'hono/utils/http-status';
 export { useReload } from './reload-context.js';
 export { useOptimistic } from './optimistic.js';
-export type { OptimisticHandle } from './optimistic.js';
+export type { OptimisticHandle, UseOptimisticOptions } from './optimistic.js';
 export { useOptimisticAction } from './optimistic-action.js';
 export type { UseOptimisticActionOptions, UseOptimisticActionResult, } from './optimistic-action.js';
 export { Form } from './form.js';
+export { useActionResult, type ActionResult } from './use-action-result.js';
+export { ActionResultContext, type ActionResultContextValue, } from './action-result-context.js';
+export { useFormStatus, type FormStatus } from './use-form-status.js';
 export { createCache } from './cache.js';
 export type { LoaderCache } from './cache.js';
 export { defineServerMiddleware, defineClientMiddleware, } from './define-middleware.js';
@@ -24,8 +27,8 @@ export { defineStreamObserver } from './define-stream-observer.js';
 export type { StreamObserver, ServerStreamCtx, } from './define-stream-observer.js';
 export { defineApp } from './define-app.js';
 export type { AppConfig, AppUseElement } from './define-app.js';
-export { redirect, deny, isOutcome, isRedirect, isDeny, isRender, } from './outcomes.js';
-export type { Outcome, RedirectOutcome, DenyOutcome, RenderOutcome, RedirectStatusCode, ErrorStatusCode, } from './outcomes.js';
+export { redirect, deny, timeoutOutcome, isOutcome, isRedirect, isDeny, isRender, isTimeout, } from './outcomes.js';
+export type { Outcome, RedirectOutcome, DenyOutcome, RenderOutcome, TimeoutOutcome, RedirectStatusCode, ErrorStatusCode, } from './outcomes.js';
 export { prefetch } from './prefetch.js';
 export { isBrowser, env } from './is-browser.js';
 export { useRouteChange } from './route-change.js';

package/dist/iso/index.js

@@ -8,20 +8,23 @@ export { Route, Router, lazy, useLocation, useRoute } from 'preact-iso';
 export { defineRoutes, Routes } from './define-routes.js';
 // Server bindings.
 export { defineLoader } from './define-loader.js';
-export { defineAction, useAction } from './action.js';
+export { defineAction, useAction, TimeoutError } from './action.js';
 // Hooks.
 export { useReload } from './reload-context.js';
 export { useOptimistic } from './optimistic.js';
 export { useOptimisticAction } from './optimistic-action.js';
 // Forms.
 export { Form } from './form.js';
+export { useActionResult } from './use-action-result.js';
+export { ActionResultContext, } from './action-result-context.js';
+export { useFormStatus } from './use-form-status.js';
 // Cache + invalidation.
 export { createCache } from './cache.js';
 // Middleware + outcomes (the new system).
 export { defineServerMiddleware, defineClientMiddleware, } from './define-middleware.js';
 export { defineStreamObserver } from './define-stream-observer.js';
 export { defineApp } from './define-app.js';
-export { redirect, deny, isOutcome, isRedirect, isDeny, isRender, } from './outcomes.js';
+export { redirect, deny, timeoutOutcome, isOutcome, isRedirect, isDeny, isRender, isTimeout, } from './outcomes.js';
 // Utilities.
 export { prefetch } from './prefetch.js';
 export { isBrowser, env } from './is-browser.js';

package/dist/iso/internal/action-envelope.d.ts

@@ -0,0 +1,37 @@
+import type { ContentfulStatusCode } from 'hono/utils/http-status';
+import type { Outcome } from '../outcomes.js';
+export type ActionEnvelope = {
+    __outcome: 'success';
+    data: unknown;
+} | {
+    __outcome: 'redirect';
+    to: string;
+    status: number;
+} | {
+    __outcome: 'deny';
+    status: number;
+    message: string;
+    data?: unknown;
+} | {
+    __outcome: 'error';
+    message: string;
+} | {
+    __outcome: 'timeout';
+    timeoutMs: number;
+};
+export type ActionResolution = {
+    kind: 'success';
+    data: unknown;
+} | {
+    kind: 'outcome';
+    outcome: Outcome;
+} | {
+    kind: 'error';
+    message: string;
+};
+export type SerializedEnvelope = {
+    body: ActionEnvelope;
+    status: ContentfulStatusCode;
+    headers: Record<string, string> | undefined;
+};
+export declare function serializeActionOutcome(resolution: ActionResolution): SerializedEnvelope;

package/dist/iso/internal/action-envelope.js

@@ -0,0 +1,47 @@
+export function serializeActionOutcome(resolution) {
+    if (resolution.kind === 'success') {
+        return {
+            body: { __outcome: 'success', data: resolution.data },
+            status: 200,
+            headers: undefined,
+        };
+    }
+    if (resolution.kind === 'error') {
+        return {
+            body: { __outcome: 'error', message: resolution.message },
+            status: 500,
+            headers: undefined,
+        };
+    }
+    const { outcome } = resolution;
+    if (outcome.__outcome === 'redirect') {
+        return {
+            body: { __outcome: 'redirect', to: outcome.to, status: outcome.status },
+            status: 200,
+            headers: outcome.headers,
+        };
+    }
+    if (outcome.__outcome === 'deny') {
+        const body = {
+            __outcome: 'deny',
+            status: outcome.status,
+            message: outcome.message,
+        };
+        if (outcome.data !== undefined)
+            body.data = outcome.data;
+        return { body, status: outcome.status, headers: outcome.headers };
+    }
+    if (outcome.__outcome === 'timeout') {
+        return {
+            body: { __outcome: 'timeout', timeoutMs: outcome.timeoutMs },
+            status: 504,
+            headers: undefined,
+        };
+    }
+    // 'render' outcome is page-scope only; should never reach an action.
+    return {
+        body: { __outcome: 'error', message: 'render outcome is page-scope only' },
+        status: 500,
+        headers: undefined,
+    };
+}

package/dist/iso/internal/action-result-store.d.ts

@@ -0,0 +1,28 @@
+type Listener = () => void;
+export type StoredActionResult = {
+    kind: 'success';
+    data: unknown;
+    submittedPayload: unknown;
+} | {
+    kind: 'deny';
+    status: number;
+    message: string;
+    data?: unknown;
+    submittedPayload: unknown;
+} | {
+    kind: 'error';
+    message: string;
+    submittedPayload: unknown | null;
+};
+type Entry = StoredActionResult & {
+    module: string;
+    action: string;
+};
+export declare function setLastActionResult(module: string, action: string, result: StoredActionResult): void;
+export declare function clearLastActionResult(module: string, action: string): void;
+export declare function getLastActionResult(stub?: {
+    __module: string;
+    __action: string;
+}): Entry | null;
+export declare function subscribeActionResults(listener: Listener): () => void;
+export {};

package/dist/iso/internal/action-result-store.js

@@ -0,0 +1,35 @@
+const results = new Map();
+const listeners = new Set();
+function key(module, action) {
+    return `${module}::${action}`;
+}
+export function setLastActionResult(module, action, result) {
+    const k = key(module, action);
+    // Delete-then-set to bump to most-recent position in Map iteration order,
+    // so no-stub readers see the latest action result, not the earliest.
+    results.delete(k);
+    results.set(k, { ...result, module, action });
+    for (const l of listeners)
+        l();
+}
+export function clearLastActionResult(module, action) {
+    if (results.delete(key(module, action))) {
+        for (const l of listeners)
+            l();
+    }
+}
+export function getLastActionResult(stub) {
+    if (stub)
+        return results.get(key(stub.__module, stub.__action)) ?? null;
+    // No stub: return the most recently written entry.
+    let last = null;
+    for (const entry of results.values())
+        last = entry;
+    return last;
+}
+export function subscribeActionResults(listener) {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}

package/dist/iso/internal/envelope.js

@@ -13,8 +13,7 @@ export const Envelope = ({ as = 'section', children, }) => {
     const dataLoader = isBrowser() ? 'null' : JSON.stringify(ctx.data ?? null);
     if (typeof as === 'string') {
         const Tag = as;
-        const props = { id, 'data-loader': dataLoader };
-        return (_jsx(Tag, { ...props, children: children }));
+        return (_jsx(Tag, { id: id, "data-loader": dataLoader, children: children }));
     }
     const Wrapper = as;
     return (_jsx(Wrapper, { id: id, "data-loader": dataLoader, children: children }));

package/dist/iso/internal/form-submit-store.d.ts

@@ -0,0 +1,9 @@
+type Listener = () => void;
+export declare function beginSubmit(module: string, action: string): void;
+export declare function endSubmit(module: string, action: string): void;
+export declare function isPending(stub?: {
+    __module: string;
+    __action: string;
+}): boolean;
+export declare function subscribe(listener: Listener): () => void;
+export {};

package/dist/iso/internal/form-submit-store.js

@@ -0,0 +1,32 @@
+const counts = new Map();
+const listeners = new Set();
+function key(module, action) {
+    return `${module}::${action}`;
+}
+export function beginSubmit(module, action) {
+    const k = key(module, action);
+    counts.set(k, (counts.get(k) ?? 0) + 1);
+    for (const l of listeners)
+        l();
+}
+export function endSubmit(module, action) {
+    const k = key(module, action);
+    const n = (counts.get(k) ?? 0) - 1;
+    if (n <= 0)
+        counts.delete(k);
+    else
+        counts.set(k, n);
+    for (const l of listeners)
+        l();
+}
+export function isPending(stub) {
+    if (stub)
+        return (counts.get(key(stub.__module, stub.__action)) ?? 0) > 0;
+    return counts.size > 0;
+}
+export function subscribe(listener) {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}

package/dist/iso/internal/loader-fetch.js

@@ -1,4 +1,5 @@
 import { readSSE } from './sse-decoder.js';
+import { TimeoutError } from '../action.js';
 /**
  * POST to /__loaders and consume the response.
  *
@@ -18,6 +19,9 @@ export async function fetchLoaderData(moduleKey, loaderName, location, signal, c
         // Try to parse a deny outcome envelope first; it carries `message`
         // rather than `error`. Fall back to the legacy `{ error }` shape.
         const body = (await res.json().catch(() => ({})));
+        if (body.__outcome === 'timeout' && typeof body.timeoutMs === 'number') {
+            throw new TimeoutError(body.timeoutMs);
+        }
         if (body.__outcome === 'deny') {
             // The `deny()` constructor defaults `message` for first-party
             // callers, but a hand-rolled envelope from custom server middleware
@@ -74,40 +78,7 @@ export async function fetchLoaderData(moduleKey, loaderName, location, signal, c
     // SSE: read the first message event synchronously (await first chunk),
     // then kick off an async loop that pushes subsequent chunks to callbacks.
     const iter = readSSE(res.body);
-    let firstChunk;
-    while (true) {
-        const step = await iter.next();
-        if (step.done) {
-            // Stream closed before any data event: error
-            throw new Error('Streaming loader closed before emitting any data');
-        }
-        const ev = step.value;
-        if (ev.event === 'message') {
-            try {
-                firstChunk = JSON.parse(ev.data);
-            }
-            catch {
-                throw new Error('Malformed first chunk in streaming loader');
-            }
-            break;
-        }
-        if (ev.event === 'error') {
-            try {
-                const parsed = JSON.parse(ev.data);
-                const err = new Error(parsed.message ?? 'Streamed error');
-                if (parsed.name)
-                    err.name = parsed.name;
-                throw err;
-            }
-            catch (e) {
-                if (e instanceof Error && e.message.startsWith('Malformed')) {
-                    throw new Error('Malformed error event in streaming loader');
-                }
-                throw e;
-            }
-        }
-        // Other events (result, etc.): ignore for loaders
-    }
+    const firstChunk = await readFirstChunk(iter);
     // Continue consuming chunks in the background. Each subsequent message
     // pushes a value via onChunk. Errors fire onError. End fires onEnd.
     (async () => {
@@ -127,6 +98,16 @@ export async function fetchLoaderData(moduleKey, loaderName, location, signal, c
                         // malformed mid-stream chunk: skip
                     }
                 }
+                else if (ev.event === 'timeout') {
+                    try {
+                        const parsed = JSON.parse(ev.data);
+                        callbacks.onError(new TimeoutError(parsed.timeoutMs ?? 0));
+                    }
+                    catch {
+                        callbacks.onError(new Error('Malformed timeout event in streaming loader'));
+                    }
+                    return;
+                }
                 else if (ev.event === 'error') {
                     try {
                         const parsed = JSON.parse(ev.data);
@@ -151,3 +132,53 @@ export async function fetchLoaderData(moduleKey, loaderName, location, signal, c
     })();
     return firstChunk;
 }
+/**
+ * Drain the SSE stream until the first `message` event and parse it as `T`.
+ * `timeout` / `error` events before the first message reject with the
+ * appropriate error. Other event types are ignored.
+ */
+async function readFirstChunk(iter) {
+    while (true) {
+        const step = await iter.next();
+        if (step.done) {
+            throw new Error('Streaming loader closed before emitting any data');
+        }
+        const ev = step.value;
+        if (ev.event === 'message') {
+            try {
+                return JSON.parse(ev.data);
+            }
+            catch {
+                throw new Error('Malformed first chunk in streaming loader');
+            }
+        }
+        if (ev.event === 'timeout') {
+            let timeoutMs = 0;
+            try {
+                const parsed = JSON.parse(ev.data);
+                timeoutMs = parsed.timeoutMs ?? 0;
+            }
+            catch (e) {
+                throw new Error(`Malformed timeout event in streaming loader: ${e instanceof Error ? e.message : String(e)}`);
+            }
+            throw new TimeoutError(timeoutMs);
+        }
+        if (ev.event === 'error') {
+            let message = 'Streamed error';
+            let name;
+            try {
+                const parsed = JSON.parse(ev.data);
+                message = parsed.message ?? message;
+                name = parsed.name;
+            }
+            catch {
+                throw new Error('Malformed error event in streaming loader');
+            }
+            const err = new Error(message);
+            if (name)
+                err.name = name;
+            throw err;
+        }
+        // Other events (result, etc.): ignore for loaders
+    }
+}

package/dist/iso/internal/loader.d.ts

@@ -1,13 +1,13 @@
-import type { ComponentChildren, JSX } from 'preact';
+import type { ComponentChildren } from 'preact';
 import type { RouteHook } from 'preact-iso';
 import type { LoaderRef } from '../define-loader.js';
 export { serializeLocationForCache } from './cache-key.js';
 type LoaderHostProps<T> = {
     loader: LoaderRef<T>;
     location?: RouteHook;
-    fallback?: JSX.Element;
+    fallback?: ComponentChildren;
     errorFallback?: ComponentChildren | ((err: Error, reset: () => void) => ComponentChildren);
     children: ComponentChildren;
 };
-export declare function LoaderHost<T>({ loader: loaderRef, location: locationProp, fallback, errorFallback, children, }: LoaderHostProps<T>): JSX.Element;
+export declare function LoaderHost<T>({ loader: loaderRef, location: locationProp, fallback, errorFallback, children, }: LoaderHostProps<T>): import("preact").JSX.Element;
 export { LoaderHost as Loader };