hono-preact 0.3.0 → 0.5.0

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,19 @@
+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);
+/**
+ * Register a global, route-aware view-transition type rule. The resolver runs on
+ * every navigation with `{ to, from, direction }` and returns the type(s) to add
+ * to that navigation's transition (a static string/array adds the same type(s) to
+ * every navigation). Returns an unsubscribe.
+ *
+ * Unlike {@link useViewTransitionTypes}, this is not tied to a mounted component,
+ * so it covers entering AND leaving a section (a layout hook is not subscribed yet
+ * on enter and is already torn down on leave). No-op on the server (no document).
+ */
+export declare function subscribeViewTransitionTypes(input: ViewTransitionTypesInput): () => void;
+export declare function useViewTransitionTypes(input: ViewTransitionTypesInput): void;

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

@@ -0,0 +1,36 @@
+import { useEffect, useRef } from 'preact/hooks';
+import { __subscribePhase } from './internal/route-change.js';
+/**
+ * Register a global, route-aware view-transition type rule. The resolver runs on
+ * every navigation with `{ to, from, direction }` and returns the type(s) to add
+ * to that navigation's transition (a static string/array adds the same type(s) to
+ * every navigation). Returns an unsubscribe.
+ *
+ * Unlike {@link useViewTransitionTypes}, this is not tied to a mounted component,
+ * so it covers entering AND leaving a section (a layout hook is not subscribed yet
+ * on enter and is already torn down on leave). No-op on the server (no document).
+ */
+export function subscribeViewTransitionTypes(input) {
+    if (typeof document === 'undefined')
+        return () => { };
+    return __subscribePhase('beforeTransition', (event) => {
+        const resolved = typeof input === 'function'
+            ? input({ to: event.to, from: event.from, direction: event.direction })
+            : input;
+        if (resolved == null)
+            return;
+        if (typeof resolved === 'string')
+            event.types.push(resolved);
+        else
+            for (const t of resolved)
+                event.types.push(t);
+    });
+}
+export function useViewTransitionTypes(input) {
+    const ref = useRef(input);
+    ref.current = input;
+    useEffect(() => subscribeViewTransitionTypes((nav) => {
+        const v = ref.current;
+        return typeof v === 'function' ? v(nav) : v;
+    }), []);
+}

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,24 +2,31 @@ 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 { installNavTransitionScheduler, installStreamRegistry, installHistoryShim } from 'hono-preact/internal';\n` +
         `import routes from '${opts.routesAbsPath}';\n` +
         `\n` +
+        `installHistoryShim();\n` +
+        `installNavTransitionScheduler();\n` +
         `installStreamRegistry();\n` +
         `\n` +
-        `let lastPath;\n` +
-        `function onRouteChange(path) {\n` +
-        `  const from = lastPath;\n` +
-        `  lastPath = path;\n` +
-        `  __dispatchRouteChange(path, from);\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` +
+        // View transitions are driven by installNavTransitionScheduler() above: it
+        // overrides Preact's render scheduler so a navigation's re-render runs inside
+        // document.startViewTransition (capturing the outgoing route as the old
+        // snapshot before the new one swaps in). No per-navigation wiring needed.
         `hydrate(\n` +
         `  h(LocationProvider, null,\n` +
-        `    h(Routes, { routes, onRouteChange })\n` +
+        `    h(Routes, { routes })\n` +
         `  ),\n` +
         `  document.getElementById('app')\n` +
         `);\n`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hono-preact",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Hono on the edge, Preact in the browser, manifest driven routes, typed RPC, streaming everywhere.",
   "keywords": [
     "hono",
@@ -95,8 +95,8 @@
   },
   "devDependencies": {
     "typescript": "*",
-    "@hono-preact/server": "0.1.0",
     "@hono-preact/iso": "0.1.0",
+    "@hono-preact/server": "0.1.0",
     "@hono-preact/vite": "0.1.0"
   },
   "scripts": {