hono-preact 0.2.0 → 0.4.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';
@@ -33,3 +36,9 @@ export type { RouteChangeHandler } from './route-change.js';
 export { Head } from './head.js';
 export type { HeadProps } from './head.js';
 export { ClientScript } from './client-script.js';
+export { useViewTransitionLifecycle, type ViewTransitionLifecycle, type ViewTransitionPhaseCallback, } from './view-transition-lifecycle.js';
+export type { ViewTransitionEvent, NavDirection, ViewTransitionReason, } from './internal/view-transition-event.js';
+export { useViewTransitionTypes, type ViewTransitionTypesInput, type ViewTransitionTypesNav, } from './view-transition-types.js';
+export { getNavDirection as getViewTransitionDirection } from './internal/history-shim.js';
+export { useViewTransitionName, useViewTransitionClass, ViewTransitionName, ViewTransitionGroup, type ViewTransitionNameProps, type ViewTransitionGroupProps, } from './view-transition-name.js';
+export { Persist, PersistHost, type PersistProps } from './persist.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';
@@ -29,3 +32,12 @@ export { isBrowser, env } from './is-browser.js';
 export { useRouteChange } from './route-change.js';
 export { Head } from './head.js';
 export { ClientScript } from './client-script.js';
+// View transition lifecycle hook.
+export { useViewTransitionLifecycle, } from './view-transition-lifecycle.js';
+// View transitions types.
+export { useViewTransitionTypes, } from './view-transition-types.js';
+export { getNavDirection as getViewTransitionDirection } from './internal/history-shim.js';
+// View transition name + group hooks and components.
+export { useViewTransitionName, useViewTransitionClass, ViewTransitionName, ViewTransitionGroup, } from './view-transition-name.js';
+// Persist components.
+export { Persist, PersistHost } from './persist.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/history-shim.d.ts

@@ -0,0 +1,7 @@
+import type { NavDirection } from './view-transition-event.js';
+export declare function installHistoryShim(): void;
+export declare function getNavDirection(): NavDirection;
+/** Test-only reset. Do not call from production code. */
+export declare function resetHistoryShimForTesting(): void;
+/** Test-only direction setter. Do not call from production code. */
+export declare function setNavDirectionForTesting(dir: NavDirection): void;

package/dist/iso/internal/history-shim.js

@@ -0,0 +1,79 @@
+let installed = false;
+let counter = 0;
+let lastDirection = 'initial';
+let originalPush = null;
+let originalReplace = null;
+let popstateListener = null;
+function readCounterFromState() {
+    if (typeof history === 'undefined')
+        return 0;
+    const state = history.state;
+    return state?.__hpVtIdx ?? 0;
+}
+export function installHistoryShim() {
+    if (installed)
+        return;
+    if (typeof history === 'undefined' || typeof window === 'undefined')
+        return;
+    installed = true;
+    counter = readCounterFromState();
+    lastDirection = 'initial';
+    originalPush = history.pushState.bind(history);
+    originalReplace = history.replaceState.bind(history);
+    history.pushState = function patchedPush(state, title, url) {
+        counter += 1;
+        const merged = {
+            ...(state ?? {}),
+            __hpVtIdx: counter,
+        };
+        originalPush(merged, title, url);
+        lastDirection = 'push';
+    };
+    history.replaceState = function patchedReplace(state, title, url) {
+        const merged = {
+            ...(state ?? {}),
+            __hpVtIdx: counter,
+        };
+        originalReplace(merged, title, url);
+        lastDirection = 'replace';
+    };
+    popstateListener = (e) => {
+        const incoming = e.state?.__hpVtIdx ?? 0;
+        lastDirection =
+            incoming < counter ? 'back' : incoming > counter ? 'forward' : 'replace';
+        counter = incoming;
+    };
+    window.addEventListener('popstate', popstateListener, { capture: true });
+    // Stamp the current entry so subsequent diffs are well-defined.
+    if (history.state?.__hpVtIdx === undefined) {
+        originalReplace({ ...(history.state ?? {}), __hpVtIdx: counter }, '');
+    }
+}
+export function getNavDirection() {
+    return lastDirection;
+}
+/** Test-only reset. Do not call from production code. */
+export function resetHistoryShimForTesting() {
+    if (installed &&
+        typeof history !== 'undefined' &&
+        originalPush &&
+        originalReplace) {
+        history.pushState = originalPush;
+        history.replaceState = originalReplace;
+    }
+    if (typeof window !== 'undefined' && popstateListener) {
+        window.removeEventListener('popstate', popstateListener, {
+            capture: true,
+        });
+    }
+    installed = false;
+    counter = 0;
+    lastDirection = 'initial';
+    originalPush = null;
+    originalReplace = null;
+    popstateListener = null;
+}
+/** Test-only direction setter. Do not call from production code. */
+export function setNavDirectionForTesting(dir) {
+    lastDirection = dir;
+}