hono-preact 0.3.0 → 0.5.0

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

@@ -1,18 +1,419 @@
-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 { options } from 'preact';
+import { ViewTransitionEvent, } from './view-transition-event.js';
+import { getNavDirection, onNavigation } 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;
+}
+function currentPath() {
+    return typeof location !== 'undefined'
+        ? location.pathname + location.search
+        : '';
+}
+// `loadingDepth`: how many Routers are mid-suspense (via onLoadStart/onLoadEnd).
+// Read right after a navigation commits to tell whether the route suspended (a
+// cold navigation), so the transition can wait for the suspended content.
+let loadingDepth = 0;
+export function __noteLoadStart() {
+    loadingDepth++;
+}
+export function __noteLoadEnd() {
+    loadingDepth = Math.max(0, loadingDepth - 1);
+}
+// The path the app is currently on (the previous navigation's `to`); seeds
+// `from` for the first navigation. A server render leaves it undefined.
+let lastPath = typeof location !== 'undefined'
+    ? location.pathname + location.search
+    : undefined;
+// Cold-navigation state: a navigation's transition holds until the suspending
+// route's content flushes have all run (see the scheduler below).
+let coldTimeout = null;
+// Bumped per navigation so a superseded transition's (async) callback bows out.
+let navGen = 0;
+// Cap on how long a navigation holds the old snapshot waiting for a suspending
+// route's content. Past it the navigation completes without finishing the
+// transition rather than freezing the page on a slow/stalled load.
+const COLD_COMMIT_TIMEOUT_MS = 500;
+// Extra grace, after the shell is ready, to let a morph partner that loads with
+// the route's DATA (behind inner Suspense, which doesn't move loadingDepth)
+// appear in the new snapshot before the transition captures it.
+const MORPH_PARTNER_GRACE_MS = 150;
+/** @internal Test-only reset for coordinator state. */
+export function __resetTransitionStateForTesting() {
+    loadingDepth = 0;
+    navGen = 0;
+    lastPath =
+        typeof location !== 'undefined'
+            ? location.pathname + location.search
+            : undefined;
+    coldRouteSignal = null;
+    if (coldTimeout !== null) {
+        clearTimeout(coldTimeout);
+        coldTimeout = null;
+    }
+    transitionActive = false;
+    // Uninstall the render scheduler (restoring Preact's debounceRendering) so
+    // each test can install it fresh.
+    if (schedulerInstalled) {
+        options.debounceRendering = prevDebounce;
+        schedulerInstalled = false;
+        prevDebounce = undefined;
+        if (unsubscribeNav) {
+            unsubscribeNav();
+            unsubscribeNav = null;
+        }
+    }
+}
+function fireAfterSwap(event) {
+    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(event.to, event.from);
+}
+function fireAfterTransition(event, reason) {
+    if (reason !== undefined)
+        event.reason = reason;
+    for (const sub of phaseSubs.afterTransition)
+        sub(event);
+}
+function applyTypes(transition, types) {
+    const vtTypes = transition.types;
+    if (vtTypes && typeof vtTypes.add === 'function') {
+        for (const t of types)
+            vtTypes.add(t);
+    }
+}
+function skipTransition(transition) {
+    const t = transition;
+    if (typeof t.skipTransition === 'function')
+        t.skipTransition();
+}
+// Build the event for a navigation that has just committed: `to`/`direction`
+// are only correct after the commit (pushState updates the history shim), so
+// this is always called post-commit. Advances `lastPath`.
+function buildEvent(from) {
+    ensureDefaultTypes();
+    const to = currentPath();
+    lastPath = to;
+    const direction = getNavDirection();
+    const event = new ViewTransitionEvent({ to, from, direction });
+    for (const sub of phaseSubs.beforeTransition)
+        sub(event);
+    return event;
+}
+let schedulerInstalled = false;
+let lastHref = '';
+let prevDebounce;
+let unsubscribeNav = null;
+// True while a navigation's transition is in flight (its callback is pending or
+// awaiting cold content). Lets the navigation observer abandon it.
+let transitionActive = false;
+// Set while a cold navigation's transition awaits a content flush; the next
+// same-URL flush hands its `process` here (or `null` on supersede/timeout) so
+// the transition can run it inside itself.
+let coldRouteSignal = null;
+function defaultSchedule(process) {
+    if (prevDebounce)
+        prevDebounce(process);
+    else
+        Promise.resolve().then(process);
+}
+// Fired (via the history shim) at navigation time, before the re-render. If a
+// transition from a previous navigation is still in flight, abandon it here:
+// Preact may coalesce the new navigation's render into the in-flight one, so
+// scheduleRender never sees it and its own supersede branch can't fire.
+function onNavObserved() {
+    if (!transitionActive && !coldRouteSignal)
+        return;
+    navGen++; // the in-flight callback bows out at its next navGen check
+    transitionActive = false;
+    if (coldRouteSignal) {
+        const resolve = coldRouteSignal;
+        coldRouteSignal = null;
+        if (coldTimeout !== null) {
+            clearTimeout(coldTimeout);
+            coldTimeout = null;
+        }
+        resolve(null);
+    }
+}
+/**
+ * @internal Install the view-transition render scheduler (client only).
+ *
+ * Takes ownership of `options.debounceRendering`: it captures the previous value
+ * as `prevDebounce` (delegated to for every non-navigation flush) and installs
+ * `scheduleRender` in its place. This assumes nothing else permanently overrides
+ * `options.debounceRendering` afterward. `preact/compat`'s `flushSync` swaps it
+ * temporarily and restores it, so that composes fine; a second permanent
+ * override would shadow this scheduler (the install is idempotent, so calling it
+ * twice is a no-op, not a double-install). Reversed by
+ * `__resetTransitionStateForTesting`.
+ */
+export function installNavTransitionScheduler() {
+    if (schedulerInstalled)
+        return;
+    if (typeof document === 'undefined' || typeof location === 'undefined')
+        return;
+    schedulerInstalled = true;
+    lastHref = location.href;
+    prevDebounce = options.debounceRendering;
+    options.debounceRendering = scheduleRender;
+    unsubscribeNav = onNavigation(onNavObserved);
+}
+function scheduleRender(process) {
+    const href = location.href;
+    const navigated = href !== lastHref;
+    // The content flush for an in-flight cold navigation (same URL): hand it back
+    // to that transition so it lands in the new snapshot.
+    if (coldRouteSignal && !navigated) {
+        const resolve = coldRouteSignal;
+        coldRouteSignal = null;
+        if (coldTimeout !== null) {
+            clearTimeout(coldTimeout);
+            coldTimeout = null;
+        }
+        resolve(process); // the transition's callback runs `process()` itself
+        return;
+    }
+    // A new navigation arrived while a cold one was still loading: abandon it.
+    if (coldRouteSignal && navigated) {
+        navGen++;
+        const resolve = coldRouteSignal;
+        coldRouteSignal = null;
+        if (coldTimeout !== null) {
+            clearTimeout(coldTimeout);
+            coldTimeout = null;
+        }
+        resolve(null);
+    }
+    if (navigated) {
+        // Reset the load counter at the start of a navigation. A previous route's
+        // loads are abandoned by a new navigation, and preact-iso fires onLoadStart
+        // without a matching onLoadEnd when a still-suspended Router unmounts (it
+        // emits onLoadEnd only on a committed render, not on unmount). Left alone,
+        // that leaked depth would make this nav (and later ones) look perpetually
+        // cold and burn the cold-load timeout. This nav re-increments it as its own
+        // route suspends.
+        loadingDepth = 0;
+    }
+    lastHref = href;
+    const start = navigated ? getStartViewTransition() : undefined;
+    if (!start) {
+        defaultSchedule(process);
+        return;
+    }
+    runNavTransition(process, start);
+}
+// Wait for the next content flush of an in-flight cold navigation (routed here
+// by scheduleRender), or null on timeout/supersede.
+function waitForColdFlush(myGen, timeoutMs) {
+    return new Promise((resolve) => {
+        coldRouteSignal = resolve;
+        coldTimeout = setTimeout(() => {
+            if (navGen === myGen && coldRouteSignal) {
+                coldRouteSignal = null;
+                coldTimeout = null;
+                resolve(null);
+            }
+        }, timeoutMs);
+    });
+}
+// Elements carrying an inline `view-transition-name`. The attribute selector
+// lets the browser filter natively instead of walking every node in JS — this
+// runs on the frozen hot path (inside the transition callback, possibly once per
+// grace tick), so the candidate set should be as small as possible. The selector
+// is a substring match on the serialized `style` attribute, so we still confirm
+// each match by reading the resolved property below.
+function queryVtNamedElements() {
+    if (typeof document === 'undefined' || !document.querySelectorAll)
+        return [];
+    return Array.from(document.querySelectorAll('[style*="view-transition-name"]'));
+}
+// The view-transition-names currently applied in the document (inline styles).
+function collectVtNames() {
+    const names = new Set();
+    for (const el of queryVtNamedElements()) {
+        const n = el.style?.getPropertyValue?.('view-transition-name');
+        if (n)
+            names.add(n);
+    }
+    return names;
+}
+// Whether any currently-applied view-transition-name was also in `oldNames` —
+// i.e. a morph pair (same name old + new) is present.
+function hasMorphPartner(oldNames) {
+    if (oldNames.size === 0)
+        return false;
+    for (const el of queryVtNamedElements()) {
+        const n = el.style?.getPropertyValue?.('view-transition-name');
+        if (n && oldNames.has(n))
+            return true;
+    }
+    return false;
+}
+function runNavTransition(process, start) {
+    const from = lastPath;
+    // The names present in the outgoing route — used to know when a morph partner
+    // has appeared in the new route (see the grace wait below).
+    const oldNames = collectVtNames();
+    const myGen = ++navGen;
+    transitionActive = true;
+    let transition;
+    let event;
+    try {
+        transition = start(async () => {
+            // The old snapshot has been captured. Flush the navigation render.
+            process();
+            if (navGen !== myGen)
+                return;
+            event = buildEvent(from);
+            event.transition = transition;
+            applyTypes(transition, event.types);
+            if (event._skipped) {
+                skipTransition(transition);
+            }
+            else {
+                for (const sub of phaseSubs.beforeSwap)
+                    sub(event);
+                // Cold: the route suspended. Keep routing its content flushes into the
+                // transition until every route module has loaded (loadingDepth back to
+                // 0) — the page-level shell.
+                while (loadingDepth > 0) {
+                    const contentProcess = await waitForColdFlush(myGen, COLD_COMMIT_TIMEOUT_MS);
+                    if (navGen !== myGen)
+                        return;
+                    if (!contentProcess)
+                        break; // timed out waiting
+                    contentProcess();
+                }
+                // If the outgoing route had named elements but none has a partner in the
+                // new shell yet, the partner may load with the route's DATA (behind
+                // inner Suspense, which doesn't move loadingDepth — e.g. a list whose
+                // items come from a loader). Wait briefly for it so the morph can pair.
+                if (oldNames.size > 0 && !hasMorphPartner(oldNames)) {
+                    while (!hasMorphPartner(oldNames)) {
+                        const contentProcess = await waitForColdFlush(myGen, MORPH_PARTNER_GRACE_MS);
+                        if (navGen !== myGen)
+                            return;
+                        if (!contentProcess)
+                            break; // grace expired — capture as-is
+                        contentProcess();
+                    }
+                }
+            }
+            if (navGen !== myGen)
+                return;
+            fireAfterSwap(event);
+            transitionActive = false; // reached only when still current
+        });
+    }
+    catch {
+        // Non-conformant startViewTransition: just flush and fire the post phases.
+        transitionActive = false;
+        process();
+        const ev = buildEvent(from);
+        fireAfterSwap(ev);
+        fireAfterTransition(ev, 'unsupported');
+        return;
+    }
+    transition.finished.then(() => {
+        if (event)
+            fireAfterTransition(event, event._skipped ? 'skipped' : undefined);
+    }, () => {
+        if (event)
+            fireAfterTransition(event, 'aborted');
+    });
+}
+// Synchronous route-change dispatch for an explicit `to`/`from`: fires
+// `beforeTransition` and runs a transition that wraps a no-op swap (the route is
+// assumed already on screen), firing the post-swap phases and applying types.
+// Production navigations are driven by the scheduler (installNavTransition
+// scheduler); this drives the same phase/type/lifecycle machinery directly for
+// callers that change the route outside the normal navigation flow (and in unit
+// tests).
+export function __dispatchRouteChange(to, from) {
+    ensureDefaultTypes();
+    const event = new ViewTransitionEvent({
+        to,
+        from,
+        direction: getNavDirection(),
+    });
+    for (const sub of phaseSubs.beforeTransition)
+        sub(event);
+    const start = getStartViewTransition();
+    if (!start || event._skipped) {
+        // No transition runs, so `beforeSwap` (which precedes a real swap) is
+        // skipped; the post-swap phases still fire.
+        fireAfterSwap(event);
+        fireAfterTransition(event, event._skipped ? 'skipped' : 'unsupported');
+        return;
+    }
+    let transition;
+    try {
+        transition = start(() => { });
+    }
+    catch {
+        fireAfterSwap(event);
+        fireAfterTransition(event, 'unsupported');
+        return;
+    }
+    event.transition = transition;
+    applyTypes(transition, event.types);
+    for (const sub of phaseSubs.beforeSwap)
+        sub(event);
+    fireAfterSwap(event);
+    transition.finished.then(() => fireAfterTransition(event), () => fireAfterTransition(event, 'aborted'));
+}
+let defaultTypesInstalled = false;
+let firstNavSeen = false;
+let defaultTypeUnsubscriber = null;
+function ensureDefaultTypes() {
+    if (defaultTypesInstalled)
+        return;
+    defaultTypesInstalled = true;
+    defaultTypeUnsubscriber = __subscribePhase('beforeTransition', (event) => {
+        if (!firstNavSeen) {
+            event.types.push('nav-initial');
+            firstNavSeen = 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;
+    firstNavSeen = 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

@@ -11,7 +11,12 @@ export { runRequestScope, getRequestStore, captureRequestScope, getActionResultS
 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 { installNavTransitionScheduler, __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

@@ -37,7 +37,12 @@ export { runRequestScope, getRequestStore, captureRequestScope, getActionResultS
 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 { installNavTransitionScheduler, __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();
+        };
+    }, []);
+}