hono-preact 0.3.0 → 0.4.0

package/dist/iso/index.d.ts

@@ -36,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

@@ -32,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/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;
+}

package/dist/iso/internal/merge-refs.d.ts

@@ -0,0 +1,4 @@
+import type { Ref } from 'preact';
+type AnyRef<T> = Ref<T> | null | undefined;
+export declare function mergeRefs<T>(...refs: AnyRef<T>[]): (node: T | null) => void;
+export {};

package/dist/iso/internal/merge-refs.js

@@ -0,0 +1,14 @@
+export function mergeRefs(...refs) {
+    return (node) => {
+        for (const ref of refs) {
+            if (ref == null)
+                continue;
+            if (typeof ref === 'function') {
+                ref(node);
+            }
+            else {
+                ref.current = node;
+            }
+        }
+    };
+}

package/dist/iso/internal/persist-registry.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentChildren } from 'preact';
+export interface PersistEntry {
+    children: ComponentChildren;
+    viewTransitionName: string | undefined;
+}
+export declare function __persistRegistryWrite(id: string, entry: PersistEntry): void;
+export declare function __persistRegistryRead(): ReadonlyMap<string, PersistEntry>;
+export declare function __persistRegistrySubscribe(sub: () => void): () => void;
+/** Test-only reset. Do not call from production code. */
+export declare function __persistRegistryResetForTesting(): void;

package/dist/iso/internal/persist-registry.js

@@ -0,0 +1,24 @@
+let map = new Map();
+const subs = new Set();
+export function __persistRegistryWrite(id, entry) {
+    // Replace the map reference so consumers using identity-checks can detect.
+    const next = new Map(map);
+    next.set(id, entry);
+    map = next;
+    for (const sub of subs)
+        sub();
+}
+export function __persistRegistryRead() {
+    return map;
+}
+export function __persistRegistrySubscribe(sub) {
+    subs.add(sub);
+    return () => {
+        subs.delete(sub);
+    };
+}
+/** Test-only reset. Do not call from production code. */
+export function __persistRegistryResetForTesting() {
+    map = new Map();
+    subs.clear();
+}

package/dist/iso/internal/route-change.d.ts

@@ -1,4 +1,10 @@
-type Sub = (to: string, from: string | undefined) => void;
+import { ViewTransitionEvent } from './view-transition-event.js';
+export type PhaseName = 'beforeTransition' | 'beforeSwap' | 'afterSwap' | 'afterTransition';
+type PhaseSub = (event: ViewTransitionEvent) => void | Promise<void>;
+type LegacySub = (to: string, from: string | undefined) => void;
+export declare function __subscribePhase(phase: PhaseName, sub: PhaseSub): () => void;
+export declare function __subscribeRouteChange(sub: LegacySub): () => void;
 export declare function __dispatchRouteChange(to: string, from: string | undefined): void;
-export declare function __subscribeRouteChange(sub: Sub): () => void;
+/** @internal Test-only reset for default-types installer. */
+export declare function resetDefaultTypesForTesting(): void;
 export {};

package/dist/iso/internal/route-change.js

@@ -1,18 +1,113 @@
 import { flushSync } from 'preact/compat';
-const subs = new Set();
-export function __dispatchRouteChange(to, from) {
-    for (const cb of subs)
-        cb(to, from);
-    if (typeof document === 'undefined')
-        return;
-    const startViewTransition = document.startViewTransition;
-    if (typeof startViewTransition !== 'function')
-        return;
-    startViewTransition.call(document, () => flushSync(() => { }));
+import { ViewTransitionEvent, } from './view-transition-event.js';
+import { getNavDirection } from './history-shim.js';
+const phaseSubs = {
+    beforeTransition: new Set(),
+    beforeSwap: new Set(),
+    afterSwap: new Set(),
+    afterTransition: new Set(),
+};
+const legacySubs = new Set();
+export function __subscribePhase(phase, sub) {
+    phaseSubs[phase].add(sub);
+    return () => {
+        phaseSubs[phase].delete(sub);
+    };
 }
 export function __subscribeRouteChange(sub) {
-    subs.add(sub);
+    legacySubs.add(sub);
     return () => {
-        subs.delete(sub);
+        legacySubs.delete(sub);
+    };
+}
+function fireLegacy(to, from) {
+    for (const sub of legacySubs)
+        sub(to, from);
+}
+function getStartViewTransition() {
+    if (typeof document === 'undefined')
+        return undefined;
+    const fn = document.startViewTransition;
+    return typeof fn === 'function' ? fn.bind(document) : undefined;
+}
+export function __dispatchRouteChange(to, from) {
+    ensureDefaultTypes();
+    const direction = getNavDirection();
+    const event = new ViewTransitionEvent({ to, from, direction });
+    for (const sub of phaseSubs.beforeTransition)
+        sub(event);
+    const fireAfterSwap = () => {
+        for (const sub of phaseSubs.afterSwap)
+            sub(event);
+        // Legacy subscribers fire at the afterSwap slot: after the DOM swap,
+        // before the browser begins animating the new frame.
+        fireLegacy(to, from);
     };
+    const fireAfterTransition = (reason) => {
+        if (reason !== undefined)
+            event.reason = reason;
+        for (const sub of phaseSubs.afterTransition)
+            sub(event);
+    };
+    if (event._skipped) {
+        flushSync(() => { });
+        fireAfterSwap();
+        fireAfterTransition('skipped');
+        return;
+    }
+    const start = getStartViewTransition();
+    if (!start) {
+        flushSync(() => { });
+        fireAfterSwap();
+        fireAfterTransition('unsupported');
+        return;
+    }
+    const transition = start(() => {
+        flushSync(() => { });
+    });
+    // Set event.transition before firing beforeSwap so all subsequent phase
+    // subscribers see a non-null transition. In real browsers startViewTransition
+    // invokes the callback asynchronously, meaning transition is set here before
+    // the browser calls the update function. In synchronous test mocks the
+    // callback returns before start() does, so we set transition here (after
+    // start() returns) and then fire the post-swap phases manually.
+    event.transition = transition;
+    for (const sub of phaseSubs.beforeSwap)
+        sub(event);
+    fireAfterSwap();
+    // Apply types accumulated across all phases. beforeTransition and beforeSwap
+    // have both run by this point, so the full set of types is available here.
+    const vtTypes = transition.types;
+    if (vtTypes && typeof vtTypes.add === 'function') {
+        for (const t of event.types)
+            vtTypes.add(t);
+    }
+    transition.finished.then(() => fireAfterTransition(), () => fireAfterTransition('aborted'));
+}
+let defaultTypesInstalled = false;
+let firstDispatchSeen = false;
+let defaultTypeUnsubscriber = null;
+function ensureDefaultTypes() {
+    if (defaultTypesInstalled)
+        return;
+    defaultTypesInstalled = true;
+    defaultTypeUnsubscriber = __subscribePhase('beforeTransition', (event) => {
+        if (!firstDispatchSeen) {
+            event.types.push('nav-initial');
+            firstDispatchSeen = true;
+        }
+        else {
+            event.types.push(`nav-${event.direction}`);
+        }
+        event.types.push('nav-same-origin');
+    });
+}
+/** @internal Test-only reset for default-types installer. */
+export function resetDefaultTypesForTesting() {
+    if (defaultTypeUnsubscriber) {
+        defaultTypeUnsubscriber();
+    }
+    defaultTypesInstalled = false;
+    firstDispatchSeen = false;
+    defaultTypeUnsubscriber = null;
 }

package/dist/iso/internal/use-render.d.ts

@@ -0,0 +1,11 @@
+import { type ComponentChildren, type VNode } from 'preact';
+type Props = Record<string, unknown>;
+export type UseRenderRender = VNode | string | ((props: Props) => VNode) | undefined;
+interface UseRenderOptions {
+    render?: UseRenderRender;
+    defaultTag: string;
+    props: Props;
+    children?: ComponentChildren;
+}
+export declare function useRender(opts: UseRenderOptions): VNode;
+export {};

package/dist/iso/internal/use-render.js

@@ -0,0 +1,47 @@
+import { cloneElement, h, } from 'preact';
+import { mergeRefs } from './merge-refs.js';
+function joinClass(a, b) {
+    const parts = [];
+    if (typeof a === 'string' && a.length > 0)
+        parts.push(a);
+    if (typeof b === 'string' && b.length > 0)
+        parts.push(b);
+    if (parts.length === 0)
+        return undefined;
+    return parts.join(' ');
+}
+function mergeProps(user, framework) {
+    const out = { ...user };
+    for (const key of Object.keys(framework)) {
+        if (key === 'class' || key === 'className') {
+            const userClass = (user.class ?? user.className);
+            const merged = joinClass(userClass, framework[key]);
+            if (merged !== undefined)
+                out.class = merged;
+            delete out.className;
+        }
+        else if (key === 'ref') {
+            out.ref = mergeRefs(user.ref, framework.ref);
+        }
+        else {
+            out[key] = framework[key];
+        }
+    }
+    return out;
+}
+export function useRender(opts) {
+    const { render, defaultTag, props, children } = opts;
+    if (typeof render === 'function') {
+        return render(mergeProps({}, props));
+    }
+    if (render && typeof render === 'object' && 'type' in render) {
+        const merged = mergeProps((render.props ?? {}), props);
+        const mergedChildren = children !== undefined
+            ? children
+            : (render.props?.children ??
+                null);
+        return cloneElement(render, merged, mergedChildren);
+    }
+    const tag = typeof render === 'string' ? render : defaultTag;
+    return h(tag, props, children);
+}

package/dist/iso/internal/view-transition-event.d.ts

@@ -0,0 +1,23 @@
+export type NavDirection = 'initial' | 'push' | 'replace' | 'back' | 'forward';
+export type ViewTransitionReason = 'skipped' | 'unsupported' | 'aborted';
+interface ViewTransitionEventInit {
+    to: string;
+    from: string | undefined;
+    direction: NavDirection;
+}
+export declare class ViewTransitionEvent {
+    readonly to: string;
+    readonly from: string | undefined;
+    readonly direction: NavDirection;
+    readonly types: string[];
+    transition: ViewTransition | null;
+    reason: ViewTransitionReason | undefined;
+    /** @internal */
+    _skipped: boolean;
+    private readonly stash;
+    constructor(init: ViewTransitionEventInit);
+    skip(): void;
+    set(key: unknown, value: unknown): void;
+    get<T = unknown>(key: unknown): T | undefined;
+}
+export {};

package/dist/iso/internal/view-transition-event.js

@@ -0,0 +1,25 @@
+export class ViewTransitionEvent {
+    to;
+    from;
+    direction;
+    types = [];
+    transition = null;
+    reason = undefined;
+    /** @internal */
+    _skipped = false;
+    stash = new Map();
+    constructor(init) {
+        this.to = init.to;
+        this.from = init.from;
+        this.direction = init.direction;
+    }
+    skip() {
+        this._skipped = true;
+    }
+    set(key, value) {
+        this.stash.set(key, value);
+    }
+    get(key) {
+        return this.stash.get(key);
+    }
+}

package/dist/iso/internal.d.ts

@@ -12,6 +12,11 @@ export { default as wrapPromise } from './internal/wrap-promise.js';
 export { HonoRequestContext } from './internal/contexts.js';
 export { PageMiddlewareHost } from './internal/page-middleware-host.js';
 export { __dispatchRouteChange, __subscribeRouteChange, } from './internal/route-change.js';
+export { installHistoryShim, getNavDirection, } from './internal/history-shim.js';
+export { __subscribePhase, type PhaseName } from './internal/route-change.js';
+export { ViewTransitionEvent, type NavDirection, type ViewTransitionReason, } from './internal/view-transition-event.js';
+export { useRender, type UseRenderRender } from './internal/use-render.js';
+export { mergeRefs } from './internal/merge-refs.js';
 export { installStreamRegistry, subscribeToLoaderStream, } from './internal/stream-registry.js';
 export { registerServerStreamingLoader, takeServerStreamingLoaders, } from './internal/streaming-ssr.js';
 export type { ServerLoaderStream } from './internal/streaming-ssr.js';

package/dist/iso/internal.js

@@ -38,6 +38,11 @@ export { default as wrapPromise } from './internal/wrap-promise.js';
 export { HonoRequestContext } from './internal/contexts.js';
 export { PageMiddlewareHost } from './internal/page-middleware-host.js';
 export { __dispatchRouteChange, __subscribeRouteChange, } from './internal/route-change.js';
+export { installHistoryShim, getNavDirection, } from './internal/history-shim.js';
+export { __subscribePhase } from './internal/route-change.js';
+export { ViewTransitionEvent, } from './internal/view-transition-event.js';
+export { useRender } from './internal/use-render.js';
+export { mergeRefs } from './internal/merge-refs.js';
 export { installStreamRegistry, subscribeToLoaderStream, } from './internal/stream-registry.js';
 export { registerServerStreamingLoader, takeServerStreamingLoaders, } from './internal/streaming-ssr.js';
 export { beginSubmit, endSubmit, isPending, subscribe as subscribeFormSubmit, } from './internal/form-submit-store.js';

package/dist/iso/persist.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentChildren, VNode } from 'preact';
+export interface PersistProps {
+    id: string;
+    viewTransitionName?: string;
+    children?: ComponentChildren;
+}
+export declare function Persist(props: PersistProps): VNode;
+export declare namespace Persist {
+    var displayName: string;
+}
+export declare function PersistHost(): VNode;
+export declare namespace PersistHost {
+    var displayName: string;
+}

package/dist/iso/persist.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { Fragment, h } from 'preact';
+import { useLayoutEffect, useReducer } from 'preact/hooks';
+import { __persistRegistryWrite, __persistRegistryRead, __persistRegistrySubscribe, } from './internal/persist-registry.js';
+import { useViewTransitionName } from './view-transition-name.js';
+import { isBrowser } from './is-browser.js';
+export function Persist(props) {
+    const browser = isBrowser();
+    // Hook is called unconditionally. The effect short-circuits on the server,
+    // so SSR's render output (children inline) remains the only side effect.
+    // No deps array: runs after every render so children/viewTransitionName
+    // updates flow through without stale captures.
+    useLayoutEffect(() => {
+        if (!browser)
+            return;
+        const entry = {
+            children: props.children,
+            viewTransitionName: props.viewTransitionName,
+        };
+        __persistRegistryWrite(props.id, entry);
+        // Intentionally no cleanup: Persist does NOT clear the registry on unmount.
+        // Keeping the last-known children lets PersistHost continue to render
+        // across route changes where Persist temporarily disappears.
+    });
+    // SSR renders children inline so first paint matches steady state;
+    // the client renders nothing inline because PersistHost owns the DOM.
+    return browser ? h(Fragment, null) : h(Fragment, null, props.children);
+}
+Persist.displayName = 'Persist';
+function PersistSlot(props) {
+    const ref = useViewTransitionName(props.entry.viewTransitionName);
+    return (_jsx("div", { "data-hp-persist-slot": props.id, ref: ref, children: props.entry.children }));
+}
+PersistSlot.displayName = 'PersistSlot';
+export function PersistHost() {
+    // useReducer instead of useState: guarantees a re-render on each dispatch
+    // even if an intermediate render has already drained the "new" state.
+    // This matters for the ordering race: Persist's useLayoutEffect may run
+    // either before or after PersistHost's. Using useReducer ensures the
+    // forced tick after subscribe always queues a fresh render regardless of
+    // React/Preact batching.
+    const [, forceUpdate] = useReducer((x) => x + 1, 0);
+    // useLayoutEffect (not useEffect) so the subscription is in place before
+    // sibling effects run. The immediate forceUpdate after subscribe re-reads
+    // the registry to catch any Persist sibling whose useLayoutEffect already
+    // wrote between PersistHost's render and this subscribe call (sibling order
+    // is render order, but effect order can differ per host).
+    useLayoutEffect(() => {
+        const unsub = __persistRegistrySubscribe(() => forceUpdate(undefined));
+        forceUpdate(undefined);
+        return unsub;
+    }, []);
+    const map = __persistRegistryRead();
+    return (_jsx(Fragment, { children: Array.from(map.entries()).map(([id, entry]) => (_jsx(PersistSlot, { id: id, entry: entry }, id))) }));
+}
+PersistHost.displayName = 'PersistHost';

package/dist/iso/view-transition-lifecycle.d.ts

@@ -0,0 +1,9 @@
+import type { ViewTransitionEvent } from './internal/view-transition-event.js';
+export type ViewTransitionPhaseCallback = (event: ViewTransitionEvent) => void | Promise<void>;
+export interface ViewTransitionLifecycle {
+    onBeforeTransition?: ViewTransitionPhaseCallback;
+    onBeforeSwap?: ViewTransitionPhaseCallback;
+    onAfterSwap?: ViewTransitionPhaseCallback;
+    onAfterTransition?: ViewTransitionPhaseCallback;
+}
+export declare function useViewTransitionLifecycle(lifecycle: ViewTransitionLifecycle): void;

package/dist/iso/view-transition-lifecycle.js

@@ -0,0 +1,18 @@
+import { useEffect, useRef } from 'preact/hooks';
+import { __subscribePhase } from './internal/route-change.js';
+export function useViewTransitionLifecycle(lifecycle) {
+    const ref = useRef(lifecycle);
+    ref.current = lifecycle;
+    useEffect(() => {
+        const unsubs = [
+            __subscribePhase('beforeTransition', (e) => ref.current.onBeforeTransition?.(e)),
+            __subscribePhase('beforeSwap', (e) => ref.current.onBeforeSwap?.(e)),
+            __subscribePhase('afterSwap', (e) => ref.current.onAfterSwap?.(e)),
+            __subscribePhase('afterTransition', (e) => ref.current.onAfterTransition?.(e)),
+        ];
+        return () => {
+            for (const u of unsubs)
+                u();
+        };
+    }, []);
+}

package/dist/iso/view-transition-name.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentChildren, VNode } from 'preact';
+import { type UseRenderRender } from './internal/use-render.js';
+export declare function useViewTransitionName(name: string | null | undefined): (node: Element | null) => void;
+export declare function useViewTransitionClass(cls: string | string[] | null | undefined): (node: Element | null) => void;
+export interface ViewTransitionNameProps {
+    name: string | null | undefined;
+    groupClass?: string | string[];
+    render?: UseRenderRender;
+    children?: ComponentChildren;
+}
+export declare function ViewTransitionName(props: ViewTransitionNameProps): VNode;
+export interface ViewTransitionGroupProps {
+    class: string | string[];
+    render?: UseRenderRender;
+    children?: ComponentChildren;
+}
+export declare function ViewTransitionGroup(props: ViewTransitionGroupProps): VNode;

package/dist/iso/view-transition-name.js

@@ -0,0 +1,79 @@
+import { useCallback, useLayoutEffect, useRef } from 'preact/hooks';
+import { mergeRefs } from './internal/merge-refs.js';
+import { useRender } from './internal/use-render.js';
+function isStyledElement(node) {
+    return (node !== null && (node instanceof HTMLElement || node instanceof SVGElement));
+}
+function applyCssProp(node, property, value) {
+    if (!node)
+        return;
+    if (value == null || value === '') {
+        node.style.removeProperty(property);
+    }
+    else {
+        node.style.setProperty(property, value);
+    }
+}
+export function useViewTransitionName(name) {
+    const nodeRef = useRef(null);
+    const nameRef = useRef(name);
+    nameRef.current = name;
+    // Sync when name changes on a node we already hold.
+    useLayoutEffect(() => {
+        applyCssProp(nodeRef.current, 'view-transition-name', name);
+    }, [name]);
+    // Stable ref callback: applies on attach, clears the previous node on swap.
+    return useCallback((node) => {
+        if (nodeRef.current && nodeRef.current !== node) {
+            nodeRef.current.style.removeProperty('view-transition-name');
+        }
+        if (isStyledElement(node)) {
+            nodeRef.current = node;
+            applyCssProp(node, 'view-transition-name', nameRef.current);
+        }
+        else {
+            nodeRef.current = null;
+        }
+    }, []);
+}
+export function useViewTransitionClass(cls) {
+    const value = cls == null ? null : Array.isArray(cls) ? cls.join(' ') : cls;
+    const nodeRef = useRef(null);
+    const valueRef = useRef(value);
+    valueRef.current = value;
+    useLayoutEffect(() => {
+        applyCssProp(nodeRef.current, 'view-transition-class', value);
+    }, [value]);
+    return useCallback((node) => {
+        if (nodeRef.current && nodeRef.current !== node) {
+            nodeRef.current.style.removeProperty('view-transition-class');
+        }
+        if (isStyledElement(node)) {
+            nodeRef.current = node;
+            applyCssProp(node, 'view-transition-class', valueRef.current);
+        }
+        else {
+            nodeRef.current = null;
+        }
+    }, []);
+}
+export function ViewTransitionName(props) {
+    const nameRef = useViewTransitionName(props.name);
+    const classRef = useViewTransitionClass(props.groupClass);
+    const ref = mergeRefs(nameRef, classRef);
+    return useRender({
+        render: props.render,
+        defaultTag: 'div',
+        props: { ref },
+        children: props.children,
+    });
+}
+export function ViewTransitionGroup(props) {
+    const classRef = useViewTransitionClass(props.class);
+    return useRender({
+        render: props.render,
+        defaultTag: 'div',
+        props: { ref: classRef },
+        children: props.children,
+    });
+}

package/dist/iso/view-transition-types.d.ts

@@ -0,0 +1,8 @@
+import type { NavDirection } from './internal/view-transition-event.js';
+export interface ViewTransitionTypesNav {
+    to: string;
+    from: string | undefined;
+    direction: NavDirection;
+}
+export type ViewTransitionTypesInput = string | string[] | ((nav: ViewTransitionTypesNav) => string | string[] | null | undefined);
+export declare function useViewTransitionTypes(input: ViewTransitionTypesInput): void;

package/dist/iso/view-transition-types.js

@@ -0,0 +1,21 @@
+import { useEffect, useRef } from 'preact/hooks';
+import { __subscribePhase } from './internal/route-change.js';
+export function useViewTransitionTypes(input) {
+    const ref = useRef(input);
+    ref.current = input;
+    useEffect(() => {
+        return __subscribePhase('beforeTransition', (event) => {
+            const v = ref.current;
+            const resolved = typeof v === 'function'
+                ? v({ to: event.to, from: event.from, direction: event.direction })
+                : v;
+            if (resolved == null)
+                return;
+            if (typeof resolved === 'string')
+                event.types.push(resolved);
+            else
+                for (const t of resolved)
+                    event.types.push(t);
+        });
+    }, []);
+}

package/dist/server/render.js

@@ -221,65 +221,105 @@ export async function renderPage(c, node, options) {
     // throw and, for the per-loader catch, get logged as a synthetic error
     // chunk that nobody can read anyway).
     let aborted = false;
-    const responseStream = new ReadableStream({
-        start(controller) {
-            // Re-enter the captured request scope so generator continuations and
-            // anything they touch (e.g. `getRequestHonoContext`, per-request loader
-            // caches) see the same per-request store the initial prerender saw.
-            return bindRequestScope(async () => {
+    // Multi-producer backpressure via TransformStream. Each loader pump writes
+    // to a shared `writer`, awaiting `writer.ready` before each write so that
+    // the per-loader iteration is paced by the consumer's read rate (not by
+    // however fast the generator yields). Without this, a tight-loop streaming
+    // loader would buffer chunks into the ReadableStream queue unbounded; see
+    // render-stream.test.tsx "pauses production when the HTML consumer is
+    // slow (backpressure)".
+    const { writable, readable: responseStream } = new TransformStream();
+    const writer = writable.getWriter();
+    // When the consumer cancels the readable side (e.g. Hono drops the response,
+    // or the runtime tears down the request), the writable side transitions to
+    // an errored state and `writer.closed` rejects. Propagate to the loader
+    // generators symmetrically with the request-signal abort path below. The
+    // `aborted` guard makes the self-triggered case (`writer.abort()` in our
+    // own finally) a no-op.
+    writer.closed.catch(() => {
+        if (aborted)
+            return;
+        aborted = true;
+        for (const { gen } of streamingLoaders) {
+            gen.return(undefined).catch(() => {
+                /* swallow */
+            });
+        }
+    });
+    // Re-enter the captured request scope so generator continuations and
+    // anything they touch (e.g. `getRequestHonoContext`, per-request loader
+    // caches) see the same per-request store the initial prerender saw.
+    void bindRequestScope(async () => {
+        // Yield one microtask before doing anything else. `renderPage` is still
+        // on the synchronous frame that constructs this response (TransformStream
+        // is created, then `c.body(...)` runs and commits the headers). Resuming
+        // a generator can call `setCookie(ctx.c, ...)`, which mutates Hono's
+        // prepared headers; deferring the pump guarantees the response is built
+        // first, so post-first-yield header writes are consistently excluded
+        // rather than racing construction. Cookies must be set before the
+        // loader's first yield to reach the streamed response.
+        await Promise.resolve();
+        try {
+            if (aborted)
+                return;
+            await writer.ready;
+            if (aborted)
+                return;
+            await writer.write(encoder.encode(`<!doctype html>${beforeBody}\n${bootstrap}\n`));
+            // Drive each pending generator in parallel; emit script tags per chunk.
+            await Promise.all(streamingLoaders.map(async ({ loaderId, gen }) => {
                 try {
-                    if (aborted)
-                        return;
-                    controller.enqueue(encoder.encode(`<!doctype html>${beforeBody}\n${bootstrap}\n`));
-                    // Yield one microtask before advancing any loader generator past
-                    // its first yield. `renderPage` is still on the synchronous frame
-                    // that constructs this response (`new ReadableStream(...)` returns,
-                    // then `c.body(...)` runs and commits the headers). Resuming a
-                    // generator can call `setCookie(ctx.c, ...)`, which mutates Hono's
-                    // prepared headers; deferring the pump guarantees the response is
-                    // built first, so post-first-yield header writes are consistently
-                    // excluded rather than racing construction. Cookies must be set
-                    // before the loader's first yield to reach the streamed response.
-                    await Promise.resolve();
-                    // Drive each pending generator in parallel; emit script tags per chunk.
-                    await Promise.all(streamingLoaders.map(async ({ loaderId, gen }) => {
-                        try {
-                            while (!aborted) {
-                                const step = await gen.next();
-                                if (aborted)
-                                    return;
-                                if (step.done) {
-                                    controller.enqueue(encoder.encode(`<script>window.__HP_STREAM__.end(${jsonForScript(loaderId)});document.currentScript.remove()</script>\n`));
-                                    return;
-                                }
-                                controller.enqueue(encoder.encode(`<script>window.__HP_STREAM__.push(${jsonForScript(loaderId)},${jsonForScript(step.value)});document.currentScript.remove()</script>\n`));
-                            }
-                        }
-                        catch (err) {
-                            if (aborted)
-                                return;
-                            const message = err instanceof Error ? err.message : String(err);
-                            const name = err instanceof Error ? err.name : 'Error';
-                            controller.enqueue(encoder.encode(`<script>window.__HP_STREAM__.error(${jsonForScript(loaderId)},${jsonForScript({ message, name })});document.currentScript.remove()</script>\n`));
+                    while (!aborted) {
+                        const step = await gen.next();
+                        if (aborted)
+                            return;
+                        await writer.ready;
+                        if (aborted)
+                            return;
+                        if (step.done) {
+                            await writer.write(encoder.encode(`<script>window.__HP_STREAM__.end(${jsonForScript(loaderId)});document.currentScript.remove()</script>\n`));
+                            return;
                         }
-                    }));
-                    if (!aborted)
-                        controller.enqueue(encoder.encode(afterBody));
+                        await writer.write(encoder.encode(`<script>window.__HP_STREAM__.push(${jsonForScript(loaderId)},${jsonForScript(step.value)});document.currentScript.remove()</script>\n`));
+                    }
                 }
-                finally {
-                    if (!aborted)
-                        controller.close();
+                catch (err) {
+                    if (aborted)
+                        return;
+                    const message = err instanceof Error ? err.message : String(err);
+                    const name = err instanceof Error ? err.name : 'Error';
+                    try {
+                        await writer.ready;
+                        if (aborted)
+                            return;
+                        await writer.write(encoder.encode(`<script>window.__HP_STREAM__.error(${jsonForScript(loaderId)},${jsonForScript({ message, name })});document.currentScript.remove()</script>\n`));
+                    }
+                    catch {
+                        /* swallow: writable side closed/errored */
+                    }
                 }
-            });
-        },
-        cancel() {
-            aborted = true;
-            for (const { gen } of streamingLoaders) {
-                gen.return(undefined).catch(() => {
+            }));
+            if (!aborted) {
+                await writer.ready;
+                if (!aborted)
+                    await writer.write(encoder.encode(afterBody));
+            }
+        }
+        catch {
+            /* swallow: writable side closed/errored mid-pump */
+        }
+        finally {
+            if (aborted) {
+                writer.abort().catch(() => {
                     /* swallow */
                 });
             }
-        },
+            else {
+                writer.close().catch(() => {
+                    /* swallow */
+                });
+            }
+        }
     });
     requestSignal.addEventListener('abort', () => {
         aborted = true;
@@ -288,6 +328,9 @@ export async function renderPage(c, node, options) {
                 /* swallow */
             });
         }
+        writer.abort().catch(() => {
+            /* swallow */
+        });
     });
     // Route through `c.body()` rather than `new Response(...)` so Hono merges
     // its prepared headers into the streamed response. A streaming loader's

package/dist/vite/client-entry.js

@@ -2,14 +2,23 @@ import * as path from 'node:path';
 export const VIRTUAL_CLIENT_ENTRY_ID = 'virtual:hono-preact/client';
 const RESOLVED_ID = '\0' + VIRTUAL_CLIENT_ENTRY_ID;
 export function generateClientEntrySource(opts) {
-    return (`import { h, hydrate } from 'preact';\n` +
+    return (`import { h, hydrate, render as renderPreact } from 'preact';\n` +
         `import { LocationProvider } from 'preact-iso';\n` +
-        `import { Routes } from 'hono-preact';\n` +
-        `import { __dispatchRouteChange, installStreamRegistry } from 'hono-preact/internal';\n` +
+        `import { Routes, PersistHost } from 'hono-preact';\n` +
+        `import { __dispatchRouteChange, installStreamRegistry, installHistoryShim } from 'hono-preact/internal';\n` +
         `import routes from '${opts.routesAbsPath}';\n` +
         `\n` +
+        `installHistoryShim();\n` +
         `installStreamRegistry();\n` +
         `\n` +
+        `let persistHost = document.getElementById('__hp_persist_root');\n` +
+        `if (!persistHost) {\n` +
+        `  persistHost = document.createElement('div');\n` +
+        `  persistHost.id = '__hp_persist_root';\n` +
+        `  document.body.appendChild(persistHost);\n` +
+        `}\n` +
+        `renderPreact(h(PersistHost, null), persistHost);\n` +
+        `\n` +
         `let lastPath;\n` +
         `function onRouteChange(path) {\n` +
         `  const from = lastPath;\n` +

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hono-preact",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Hono on the edge, Preact in the browser, manifest driven routes, typed RPC, streaming everywhere.",
   "keywords": [
     "hono",