@backtickjs/hono 0.2.8 → 0.3.1

package/README.md

@@ -1,6 +1,6 @@
 # @backtickjs/hono
 
-[Hono](https://hono.dev) routes as [Backtick](https://backtickjs.com) screens: under `backtick()`, `context.render(<Home />)` answers a request with your server components, bundled for the modules the client that asked provides, as Hono's own `jsxRenderer()` answers with HTML. Each route is a screen, and a path on the client is the same path on the server. Hono is a peer dependency: this package is built against Hono 4.13.13, and works with any later 4.x.
+[Hono](https://hono.dev) routes as [Backtick](https://backtickjs.com) screens: under `backtickRenderer()`, `context.render(<Home />)` answers a request with your server components, bundled for the modules the client that asked provides, as Hono's own `jsxRenderer()` answers with HTML. Each route is a screen, and a path on the client is the same path on the server. Hono is a peer dependency: this package is built against Hono 4.13.13, and works with any later 4.x.
 
 ## Install
 
@@ -13,18 +13,53 @@ The [repository's README](https://github.com/backtickjs/backtick#packages) says
 ## Usage
 
 ```tsx
-import { backtick } from "@backtickjs/hono";
+import { cs } from "@backtickjs/core";
+import { backtickApp } from "@backtickjs/hono";
+import { Stack } from "expo-router" with { backtick: "client" };
 import { Hono } from "hono";
 import { Home } from "./Home.js";
 
 const app = new Hono();
 
-app.use(backtick());
+app.use(backtickApp(app));
+// The root layout, around every screen: the navigator.
+app.get("/_layout", (context) => context.render(cs`() => <$Stack />`));
 app.get("/", (context) => context.render(<Home />));
 
 export default app;
 ```
 
+The Backtick app opens an app from one answer, which `backtickApp(app)` answers: the client code that fetches each screen and keeps it while it shows. Navigation works as in Next.js, whose folders are routes here. `/_layout` is the root layout, a client component that draws the navigator; unlike Next.js's, it takes no `children`, as the navigator renders the screens. An app without one doesn't open. A screen is each segment's `_layout` (`/day/:id/_layout`, rendered for its path, answering a client component given `children`), around its `_loading` while what's under it loads, around the page. A loading state takes no params, as in Next.js: it's fetched once for its pattern, and reading a param throws; what depends on the path, such as the title, goes in a `_layout`. Every link fetches ahead what its screen needs to show, its layouts down to its first loading state and that loading state, as Next.js's `Link` prefetches; `<Link prefetch>` adds the page, and `router.prefetch(href)` fetches as a link does. A navigation pushes once those are in, at once if they were fetched ahead; with no loading state, it holds the current screen until all of it is in, as expo-router's `unstable_useIsNavigating()` says, for a progress bar. Going back shows a screen as it was. A client with a navigator of its own uses `backtickRenderer()` alone.
+
+The runtime gives the app a [TanStack Query](https://tanstack.com/query) client whose query keys are paths: a query of `"/cart/items"` fetches that route, and its answer is what the route renders. For a screen whose parts load on their own, each in its own `Suspense`, and refetch on their own:
+
+```tsx
+import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query" with {
+  backtick: "client",
+};
+
+const Part = cs`(props: { path: string }) =>
+  $useSuspenseQuery({ queryKey: [props.path] }).data as ReactNode`;
+
+const Cart = cs`() => {
+  const queryClient = $useQueryClient();
+  return (
+    <>
+      <$Suspense fallback={<$ActivityIndicator />}>
+        <$Part path="/cart/items" />
+      </$Suspense>
+      <$Button
+        title="Refresh"
+        onPress={() =>
+          queryClient.invalidateQueries({ queryKey: ["/cart/items"] })
+        }
+      />
+    </>
+  );
+}`;
+app.get("/cart", (context) => context.render(cs`<$Cart />`));
+```
+
 The client sends its modules, each at its package's version, in `x-backtick-modules` (in an Expo app, `modulesOf` from `@backtickjs/core` writes them). The answer is the screen's bundle as CommonJS, `text/javascript`, for the client to run with `execRoot`.
 
 A client without a module the screen needs gets a `426`, and any other refusal of the bundler's a `400`, each with `{ name, message }` as JSON: the client can show why. An error your server components throw passes through to Hono.

package/dist/index.d.ts

@@ -1,38 +1,45 @@
 import type { Spliceable, SplicesAs } from "@backtickjs/core";
-import type { MiddlewareHandler } from "hono";
+import type { Hono, MiddlewareHandler } from "hono";
+export type { Runtime } from "./runtime.js";
 declare module "hono" {
     interface ContextRenderer {
         <T extends [T] extends [SplicesAs<T>] ? unknown : Spliceable>(input: T): Promise<Response>;
     }
 }
-/** A web app manifest: what the phone uses of an app before and around it. */
-export interface Manifest {
-    name?: string;
-    short_name?: string;
-    icons?: {
-        src: string;
-        sizes?: string;
-        type?: string;
-    }[];
-    theme_color?: string;
-    background_color?: string;
-}
 /**
  * Hono's renderer for Backtick screens: under it, `context.render(input)`
  * answers with `input` bundled for the modules the client sent in
  * `x-backtick-modules`, so each route is a screen.
  *
- *     app.use(backtick());
+ *     app.use(backtickRenderer());
  *     app.get("/", (context) => context.render(<Home />));
  *
  * The status is the context's, so `context.status(404)` makes a not-found
- * screen, and screens are `no-store`: each opens as its latest copy. A client
+ * screen, and screens are `no-store`, kept out of HTTP caches: a reload or
+ * a new open always gets the latest copy. (The Backtick app fetches a page anew
+ * for each navigation, as Next.js's router does.) A client
  * without a module the screen needs gets a 426, and any other refusal of the
- * bundler's a 400, each with `{ name, message }`.
+ * bundler's a 400, each with `{ name, message }`. An app the Backtick app
+ * opens uses `backtickApp(app)` instead.
+ */
+export declare function backtickRenderer(): MiddlewareHandler;
+/**
+ * Hono's renderer for an app the Backtick app opens, as `backtickRenderer()`,
+ * which also answers the runtime the Backtick app fetches when it opens
+ * `app`: the client code that fetches, keeps and shows its screens.
+ *
+ *     app.use(backtickApp(app));
+ *     app.get("/_layout", (context) => context.render(cs`() => <$Stack />`));
+ *     app.get("/", (context) => context.render(<Home />));
  *
- * `manifest` is the app's web app manifest, sent in `x-backtick-manifest` on
- * every screen, so it's as fresh as they are.
+ * Routes nest as Next.js's folders. `/_layout` is the root layout, a client
+ * component drawing the navigator; an app without one doesn't open. A screen
+ * is each segment's `_layout` (`/city/:id/_layout`, rendered for its path,
+ * answering a client component given `children`), around its `_loading`
+ * while what's under it loads, around the page. A loading state takes no
+ * params, as in Next.js: it's fetched once for its pattern, and reading a
+ * param throws. A navigation pushes once its layouts down to its first
+ * loading state, and that loading state, are in; with none, once all of it
+ * is. Layout and loading routes written with a trailing slash are refused.
  */
-export declare function backtick(options?: {
-    manifest?: Manifest;
-}): MiddlewareHandler;
+export declare function backtickApp(app: Hono<any, any, any>): MiddlewareHandler;

package/dist/index.js

@@ -1,51 +1,96 @@
 import { bundler, BundlerError } from "@backtickjs/bundler";
+import { clientRuntime } from "./runtime.js";
 /**
  * Hono's renderer for Backtick screens: under it, `context.render(input)`
  * answers with `input` bundled for the modules the client sent in
  * `x-backtick-modules`, so each route is a screen.
  *
- *     app.use(backtick());
+ *     app.use(backtickRenderer());
  *     app.get("/", (context) => context.render(<Home />));
  *
  * The status is the context's, so `context.status(404)` makes a not-found
- * screen, and screens are `no-store`: each opens as its latest copy. A client
+ * screen, and screens are `no-store`, kept out of HTTP caches: a reload or
+ * a new open always gets the latest copy. (The Backtick app fetches a page anew
+ * for each navigation, as Next.js's router does.) A client
  * without a module the screen needs gets a 426, and any other refusal of the
- * bundler's a 400, each with `{ name, message }`.
- *
- * `manifest` is the app's web app manifest, sent in `x-backtick-manifest` on
- * every screen, so it's as fresh as they are.
+ * bundler's a 400, each with `{ name, message }`. An app the Backtick app
+ * opens uses `backtickApp(app)` instead.
  */
-export function backtick(options = {}) {
-    const { manifest } = options;
-    const json = JSON.stringify(manifest);
+export function backtickRenderer() {
     return async (context, next) => {
-        context.setRenderer(async (input) => {
-            let modules;
-            try {
-                modules = JSON.parse(context.req.header("x-backtick-modules") ?? "{}");
-            }
-            catch (error) {
-                const { name, message } = error;
-                return context.json({ name, message: `x-backtick-modules isn't JSON: ${message}` }, 400);
-            }
-            try {
-                const build = await bundler.build({ input, modules });
-                const { code } = build.generate({ format: "cjs" });
-                context.header("content-type", "text/javascript");
-                context.header("cache-control", "no-store");
-                if (manifest !== undefined) {
-                    context.header("x-backtick-manifest", encodeURIComponent(json));
-                }
-                return context.body(code);
-            }
-            catch (error) {
-                if (error instanceof BundlerError) {
-                    return context.json({ name: error.name, message: error.message }, error.name === "ClientVersionMismatch" ? 426 : 400);
-                }
-                throw error;
-            }
-        });
+        context.setRenderer(async (input) => bundled(context, input));
         await next();
     };
 }
+/**
+ * Hono's renderer for an app the Backtick app opens, as `backtickRenderer()`,
+ * which also answers the runtime the Backtick app fetches when it opens
+ * `app`: the client code that fetches, keeps and shows its screens.
+ *
+ *     app.use(backtickApp(app));
+ *     app.get("/_layout", (context) => context.render(cs`() => <$Stack />`));
+ *     app.get("/", (context) => context.render(<Home />));
+ *
+ * Routes nest as Next.js's folders. `/_layout` is the root layout, a client
+ * component drawing the navigator; an app without one doesn't open. A screen
+ * is each segment's `_layout` (`/city/:id/_layout`, rendered for its path,
+ * answering a client component given `children`), around its `_loading`
+ * while what's under it loads, around the page. A loading state takes no
+ * params, as in Next.js: it's fetched once for its pattern, and reading a
+ * param throws. A navigation pushes once its layouts down to its first
+ * loading state, and that loading state, are in; with none, once all of it
+ * is. Layout and loading routes written with a trailing slash are refused.
+ */
+export function backtickApp(app) {
+    const renderer = backtickRenderer();
+    return async (context, next) => {
+        if (context.req.path.endsWith("/_loading")) {
+            context.req.param = () => {
+                throw new Error(`${context.req.routePath} reads a param: a loading state takes none, as in Next.js. What depends on the path goes in a _layout.`);
+            };
+        }
+        if (context.req.method !== "GET" || context.req.path !== runtimePath) {
+            return renderer(context, next);
+        }
+        const patterns = (name) => [
+            ...new Set(app.routes
+                .filter(({ method, path }) => method === "GET" && path.endsWith(name))
+                .map(({ path }) => path)),
+        ];
+        const misplaced = app.routes.find(({ path }) => path.endsWith("/_layout/") || path.endsWith("/_loading/"));
+        if (misplaced !== undefined) {
+            throw new Error(`The app's ${misplaced.path} route ends with a slash: write it ${misplaced.path.slice(0, -1)}.`);
+        }
+        if (!patterns("/_layout").includes("/_layout")) {
+            throw new Error("The app has no /_layout route: it's the root layout, a client component drawing the navigator, as cs`() => <$Stack />`.");
+        }
+        return bundled(context, clientRuntime(new URL(context.req.url).origin, context.req.header("x-backtick-modules") ?? "{}", { layouts: patterns("/_layout"), loadings: patterns("/_loading") }));
+    };
+}
+// Where the Backtick app fetches the runtime it opens an app with.
+const runtimePath = "/.well-known/backtick/runtime";
+// `input` bundled for the modules the client sent, as the answer.
+async function bundled(context, input) {
+    let modules;
+    try {
+        modules = JSON.parse(context.req.header("x-backtick-modules") ?? "{}");
+    }
+    catch (error) {
+        const { name, message } = error;
+        return context.json({ name, message: `x-backtick-modules isn't JSON: ${message}` }, 400);
+    }
+    try {
+        const build = await bundler.build({ input, modules });
+        const { code } = build.generate({ format: "cjs" });
+        context.header("content-type", "text/javascript");
+        context.header("cache-control", "no-store");
+        return context.body(code);
+    }
+    catch (error) {
+        if (error instanceof BundlerError) {
+            return context.json({ name: error.name, message: error.message }, error.name === "ClientVersionMismatch" ? 426 : 400);
+        }
+        throw error;
+    }
+}
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,YAAY,EAAgB,MAAM,qBAAqB,CAAC;AAuB1E;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,QAAQ,CACtB,UAAmC,EAAE;IAErC,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAC;IAC7B,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;IACtC,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;QAC7B,OAAO,CAAC,WAAW,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;YAClC,IAAI,OAAgB,CAAC;YACrB,IAAI,CAAC;gBACH,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,oBAAoB,CAAC,IAAI,IAAI,CAAC,CAAC;YACzE,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,KAAoB,CAAC;gBAC/C,OAAO,OAAO,CAAC,IAAI,CACjB,EAAE,IAAI,EAAE,OAAO,EAAE,kCAAkC,OAAO,EAAE,EAAE,EAC9D,GAAG,CACJ,CAAC;YACJ,CAAC;YACD,IAAI,CAAC;gBACH,MAAM,KAAK,GAAG,MAAM,OAAO,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;gBACtD,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;gBACnD,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC;gBAClD,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;gBAC5C,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;oBAC3B,OAAO,CAAC,MAAM,CAAC,qBAAqB,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC;gBAClE,CAAC;gBACD,OAAO,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAC5B,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,IAAI,KAAK,YAAY,YAAY,EAAE,CAAC;oBAClC,OAAO,OAAO,CAAC,IAAI,CACjB,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,EAC5C,KAAK,CAAC,IAAI,KAAK,uBAAuB,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CACnD,CAAC;gBACJ,CAAC;gBACD,MAAM,KAAK,CAAC;YACd,CAAC;QACH,CAAC,CAAC,CAAC;QACH,MAAM,IAAI,EAAE,CAAC;IACf,CAAC,CAAC;AACJ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/runtime.d.ts

@@ -0,0 +1,54 @@
+import { type Client } from "@backtickjs/core";
+import { type ComponentType } from "react";
+/**
+ * What the phone runs an app with. A shell checks for a member before using
+ * it, so a later runtime can drop one.
+ */
+export interface Runtime {
+    /**
+     * The app's root layout, given the href on top. A navigation holds the
+     * current screen until the next can show, as navigations are transitions
+     * (`router.setTransitionMode("always")`): once its layouts down to its
+     * first loading state, and that loading state, are in, at once if they
+     * were prefetched; with no loading state, once all of it is in. Suspends
+     * until the first screen can show.
+     */
+    Navigator?: ComponentType<{
+        href: string;
+    }>;
+    /**
+     * A route's screen, nested as Next.js nests a page: each segment's layout,
+     * around its loading state while what's under it loads. One not `active`
+     * yet shows nothing.
+     */
+    Screen?: ComponentType<{
+        href: string;
+        active: boolean;
+    }>;
+    /**
+     * Fetches an href's screen again, which stays until the new one is in:
+     * resolves once it's in, either way.
+     */
+    reload?(href: string): Promise<void>;
+    /**
+     * Fetches an href ahead, as Next.js's `Link` prefetches: its layouts down
+     * to its first loading state, and that loading state (nothing if it has
+     * none); with `page`, its page too, as `<Link prefetch>`.
+     */
+    prefetch?(href: string, page?: boolean): void;
+}
+/**
+ * A route's answer, run. Any bundle is an answer, whatever its status: an
+ * app's not-found screen is one. A refusal ({ name, message }) says why. For
+ * a route that may not exist (`notFoundIsNull`), a 404 is null.
+ */
+export declare const fetchAnswer: Client<unknown>;
+/**
+ * The runtime of an open: for the phone at `origin` with `modules`, with the
+ * patterns of the app's `_layout` and `_loading` routes (`/city/:id/_layout`),
+ * so a screen asks only for those it has.
+ */
+export declare function clientRuntime(origin: string, modules: string, routes: {
+    layouts: readonly string[];
+    loadings: readonly string[];
+}): Client<Runtime>;

package/dist/runtime.js

@@ -0,0 +1,44 @@
+// The phone's half of `backtickApp()`: how an app's screens are fetched,
+// kept and shown, written as client code, which `backtickApp()` sends from
+// `/.well-known/backtick/runtime`.
+import { cs, exec } from "@backtickjs/core";
+const QueryClient = { "@backtickjs": "ClientImport", name: "QueryClient", from: "@tanstack/react-query", version: "5.104.0" };
+const QueryClientProvider = { "@backtickjs": "ClientImport", name: "QueryClientProvider", from: "@tanstack/react-query", version: "5.104.0" };
+const usePrefetchQuery = { "@backtickjs": "ClientImport", name: "usePrefetchQuery", from: "@tanstack/react-query", version: "5.104.0" };
+const useSuspenseQueries = { "@backtickjs": "ClientImport", name: "useSuspenseQueries", from: "@tanstack/react-query", version: "5.104.0" };
+const useSuspenseQuery = { "@backtickjs": "ClientImport", name: "useSuspenseQuery", from: "@tanstack/react-query", version: "5.104.0" };
+const PatternRouter = { "@backtickjs": "ClientImport", name: "PatternRouter", from: "hono/router/pattern-router", version: "4.13.13" };
+const Component = { "@backtickjs": "ClientImport", name: "Component", from: "react", version: "19.3.0" };
+const Suspense = { "@backtickjs": "ClientImport", name: "Suspense", from: "react", version: "19.3.0" };
+const useDeferredValue = { "@backtickjs": "ClientImport", name: "useDeferredValue", from: "react", version: "19.3.0" };
+const $module0 = {
+    id: "3t7t976h189wg:61:27",
+    code: "(module, exports, require) => {\n\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.default = $splice0 => async (url, modules, notFoundIsNull) => {\n    var response = await fetch(url, {\n        headers: {\n            \"x-backtick-modules\": modules\n        }\n    });\n    if (notFoundIsNull && response.status === 404) {\n        return null;\n    }\n    var body = await response.text();\n    if (!(response.headers.get(\"content-type\") ?? \"\").startsWith(\"text/javascript\")) {\n        var reason = body;\n        try {\n            reason = JSON.parse(body).message ?? body;\n        }\n        catch { }\n        throw new Error(\"The screen couldn't be opened (\" + response.status + \"): \" + reason);\n    }\n    return await $splice0()(body);\n};\n}",
+    map: "{\"version\":3,\"file\":\"module.jsx\",\"mappings\":\";;;kBA4D8BA,QAAA,WAC5BC,GAAW,EACXC,OAAe,EACfC,cAAuB;IAEvB,IAAMC,QAAQ,GAAG,MAAMC,KAAK,CAACJ,GAAG,EAAE;QAChCK,OAAO,EAAE;YAAE,oBAAoB,EAAEJ;SAAO;KACzC,CAAC;IACF,IAAIC,cAAc,IAAIC,QAAQ,CAACG,MAAM,KAAK,GAAG,EAAE;QAC7C,OAAO,IAAI;IACb;IACA,IAAMC,IAAI,GAAG,MAAMJ,QAAQ,CAACK,IAAI,EAAE;IAClC,IACE,CAAC,CAACL,QAAQ,CAACE,OAAO,CAACI,GAAG,CAAC,cAAc,CAAC,IAAI,EAAE,EAAEC,UAAU,CAAC,iBAAiB,CAAC,EAC3E;QACA,IAAIC,MAAM,GAAGJ,IAAI;QACjB,IAAI;YACFI,MAAM,GAAGC,IAAI,CAACC,KAAK,CAACN,IAAI,CAAC,CAACO,OAAO,IAAIP,IAAI;QAC3C,CAAC;QAAC,MAAM,CAAC;QACT,MAAM,IAAIQ,KAAK,CACb,iCAAiC,GAAGZ,QAAQ,CAACG,MAAM,GAAG,KAAK,GAAGK,MAAM,CACrE;IACH;IACA,OAAQ,MAAMZ,QAAA,EAAK,CAACQ,IAAa,CAAC;AACpC,CAAC\",\"names\":[\"$splice0\",\"url\",\"modules\",\"notFoundIsNull\",\"response\",\"fetch\",\"headers\",\"status\",\"body\",\"text\",\"get\",\"startsWith\",\"reason\",\"JSON\",\"parse\",\"message\",\"Error\"],\"ignoreList\":[],\"sources\":[\"@backtickjs/hono/src/runtime.tsx\"]}",
+    dependencies: [],
+    params: [{ kind: "splice", bindings: [] }],
+    kind: "function"
+};
+const $module1 = {
+    id: "3t7t976h189wg:97:9",
+    code: "(module, exports, require) => {\n\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nconst jsx_runtime_1 = require(\"react/jsx-runtime\");\nexports.default = ($splice0, $splice1, $splice2, $splice3, $splice4, $splice5, $splice6, $splice7, $splice8, $splice9, $splice10, $splice11, $splice12, $splice13, $splice14, $splice15, $splice16, $splice17, $splice18, $splice19, $splice20, $splice21, $splice22) => {\n    var segmentStaleTime = 300000;\n    var currentNavigation = {\n        href: \"\",\n        startedAt: 0\n    };\n    var fetchedAhead = new Set();\n    var pageStaleTime = query => query.state.dataUpdatedAt >= currentNavigation.startedAt ? Infinity : fetchedAhead.has(query.queryKey[0]) ? segmentStaleTime : 0;\n    var queryClient = new ($splice0())({\n        defaultOptions: {\n            queries: {\n                queryFn: async (context) => $splice1()($splice2() + context.queryKey[0], $splice3(), false),\n                staleTime: pageStaleTime,\n                structuralSharing: false,\n                retry: false\n            }\n        }\n    });\n    var pageQuery = href => ({\n        queryKey: [href]\n    });\n    var layoutQuery = path => ({\n        queryKey: [path],\n        staleTime: segmentStaleTime\n    });\n    var loadingQuery = pattern => ({\n        queryKey: [pattern],\n        staleTime: segmentStaleTime,\n        queryFn: async () => ({\n            value: await $splice4()($splice5() + pattern, $splice6(), false)\n        })\n    });\n    var layoutRouter = new ($splice7())();\n    for (var pattern of $splice8().layouts) {\n        layoutRouter.add(\"GET\", pattern, pattern);\n    }\n    var loadingRouter = new ($splice9())();\n    for (var _pattern of $splice10().loadings) {\n        loadingRouter.add(\"GET\", _pattern, _pattern);\n    }\n    var segmentsOf = href => {\n        var searchStart = href.indexOf(\"?\");\n        var path = searchStart === -1 ? href : href.slice(0, searchStart);\n        var names = path.split(\"/\").filter(Boolean);\n        var bases = [\"\", ...names.map((_, i) => \"/\" + names.slice(0, i + 1).join(\"/\"))];\n        return bases.map(base => {\n            var layout = base + \"/_layout\";\n            return {\n                layout: base !== \"\" && layoutRouter.match(\"GET\", layout)[0].length > 0 ? layout : undefined,\n                loading: loadingRouter.match(\"GET\", base + \"/_loading\")[0][0]?.[0]\n            };\n        });\n    };\n    var shellOf = href => {\n        var queries = [];\n        for (var segment of segmentsOf(href)) {\n            if (segment.layout !== undefined) {\n                queries.push(layoutQuery(segment.layout));\n            }\n            if (segment.loading !== undefined) {\n                queries.push(loadingQuery(segment.loading));\n                return {\n                    queries,\n                    loads: true\n                };\n            }\n        }\n        queries.push(pageQuery(href));\n        return {\n            queries,\n            loads: false\n        };\n    };\n    var dropStaleAnswer = (query, startedAt) => {\n        var cached = queryClient.getQueryCache().find({\n            queryKey: query.queryKey,\n            exact: true\n        });\n        if (cached !== undefined && cached.getObserversCount() === 0 && cached.state.data !== undefined && cached.state.dataUpdatedAt < startedAt && cached.isStaleByTime(query.staleTime ?? pageStaleTime(cached))) {\n            queryClient.removeQueries({\n                queryKey: query.queryKey,\n                exact: true\n            });\n        }\n    };\n    var Page = props => $splice11()(pageQuery(props.href)).data;\n    var Loading = props => $splice12()(loadingQuery(props.pattern)).data.value;\n    var Layout = props => {\n        var answer = $splice13()(layoutQuery(props.path)).data;\n        if (typeof answer !== \"function\") {\n            return answer;\n        }\n        var Answer = answer;\n        return (0, jsx_runtime_1.jsx)(Answer, {\n            children: props.children\n        });\n    };\n    var Segments = props => {\n        $splice14()(pageQuery(props.href));\n        var node = (0, jsx_runtime_1.jsx)(Page, {\n            href: props.href\n        });\n        var _loop = function (segment) {\n            if (segment.loading !== undefined) {\n                node = ($Suspense => (0, jsx_runtime_1.jsx)($Suspense, {\n                    fallback: (0, jsx_runtime_1.jsx)(Loading, {\n                        pattern: segment.loading\n                    }),\n                    children: node\n                }))($splice15());\n            }\n            if (segment.layout !== undefined) {\n                node = (0, jsx_runtime_1.jsx)(Layout, {\n                    path: segment.layout,\n                    children: node\n                });\n            }\n        };\n        for (var segment of segmentsOf(props.href).reverse()) {\n            _loop(segment);\n        }\n        return node;\n    };\n    var prefetch = (href, page = false) => {\n        var shell = shellOf(href);\n        if (page) {\n            fetchedAhead.add(href);\n        }\n        var queries = page ? [...shell.queries, pageQuery(href)] : shell.loads ? shell.queries : [];\n        for (var query of queries) {\n            void queryClient.query(query).catch(() => { });\n        }\n    };\n    for (var _pattern2 of $splice16().loadings) {\n        void queryClient.query(loadingQuery(_pattern2)).catch(() => { });\n    }\n    var Screen = props => {\n        var href = $splice17()(props.href);\n        return props.active ? ($Suspense => (0, jsx_runtime_1.jsx)($Suspense, {\n            fallback: null,\n            children: (0, jsx_runtime_1.jsx)(Segments, {\n                href: href\n            })\n        }))($splice18()) : null;\n    };\n    var AwaitQueries = props => {\n        $splice19()({\n            queries: props.queries.map(query => ({\n                ...query,\n                refetchOnMount: false\n            }))\n        });\n        return null;\n    };\n    var NavigationHold = props => {\n        if (currentNavigation.href !== props.href) {\n            currentNavigation = {\n                href: props.href,\n                startedAt: Date.now()\n            };\n        }\n        var shell = shellOf(props.href);\n        for (var query of [...shell.queries, pageQuery(props.href)]) {\n            dropStaleAnswer(query, currentNavigation.startedAt);\n        }\n        var shown = (queryClient.getQueryCache().find({\n            queryKey: [props.href],\n            exact: true\n        })?.getObserversCount() ?? 0) > 0;\n        if (!shown) {\n            void queryClient.query(pageQuery(props.href)).catch(() => { });\n        }\n        return (0, jsx_runtime_1.jsx)(AwaitQueries, {\n            queries: shell.queries\n        });\n    };\n    class SilentErrorBoundary extends $splice20() {\n        state = {\n            failed: false\n        };\n        static getDerivedStateFromError() {\n            return {\n                failed: true\n            };\n        }\n        render() {\n            return this.state.failed ? null : this.props.children;\n        }\n    }\n    var RootLayout = () => {\n        var answer = $splice21()({\n            queryKey: [\"/_layout\"],\n            staleTime: Infinity\n        }).data;\n        if (typeof answer !== \"function\") {\n            throw new Error(\"The app's /_layout answers no component: it's the root layout, a client component drawing the navigator (a Stack).\");\n        }\n        var Answer = answer;\n        return (0, jsx_runtime_1.jsx)(Answer, {});\n    };\n    var Navigator = props => ($QueryClientProvider => (0, jsx_runtime_1.jsxs)($QueryClientProvider, {\n        client: queryClient,\n        children: [(0, jsx_runtime_1.jsx)(SilentErrorBoundary, {\n                children: (0, jsx_runtime_1.jsx)(NavigationHold, {\n                    href: props.href\n                })\n            }, props.href), (0, jsx_runtime_1.jsx)(RootLayout, {})]\n    }))($splice22());\n    var runtime = {\n        Navigator,\n        Screen,\n        prefetch,\n        reload: async (href) => {\n            var paths = [href, ...segmentsOf(href).flatMap(segment => segment.layout === undefined ? [] : [segment.layout])];\n            await Promise.allSettled(paths.map(path => queryClient.getQueryState([path])?.status === \"error\" ? queryClient.resetQueries({\n                queryKey: [path],\n                exact: true\n            }) : queryClient.refetchQueries({\n                queryKey: [path],\n                exact: true\n            })));\n        }\n    };\n    return runtime;\n};\n}",
+    map: "{\"version\":3,\"file\":\"module.jsx\",\"mappings\":\"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\",\"names\":[\"$splice0\",\"$splice1\",\"$splice2\",\"$splice3\",\"$splice4\",\"$splice5\",\"$splice6\",\"$splice7\",\"$splice8\",\"$splice9\",\"$splice10\",\"$splice11\",\"$splice12\",\"$splice13\",\"$splice14\",\"$splice15\",\"$splice16\",\"$splice17\",\"$splice18\",\"$splice19\",\"$splice20\",\"$splice21\",\"$splice22\",\"segmentStaleTime\",\"currentNavigation\",\"href\",\"startedAt\",\"fetchedAhead\",\"Set\",\"pageStaleTime\",\"query\",\"state\",\"dataUpdatedAt\",\"Infinity\",\"has\",\"queryKey\",\"queryClient\",\"defaultOptions\",\"queries\",\"queryFn\",\"context\",\"staleTime\",\"structuralSharing\",\"retry\",\"pageQuery\",\"layoutQuery\",\"path\",\"loadingQuery\",\"pattern\",\"value\",\"layoutRouter\",\"layouts\",\"add\",\"loadingRouter\",\"loadings\",\"segmentsOf\",\"searchStart\",\"indexOf\",\"slice\",\"names\",\"split\",\"filter\",\"Boolean\",\"bases\",\"map\",\"_\",\"i\",\"join\",\"base\",\"layout\",\"match\",\"length\",\"undefined\",\"loading\",\"shellOf\",\"segment\",\"push\",\"loads\",\"dropStaleAnswer\",\"cached\",\"getQueryCache\",\"find\",\"exact\",\"getObserversCount\",\"data\",\"isStaleByTime\",\"removeQueries\",\"Page\",\"props\",\"Loading\",\"Layout\",\"answer\",\"Answer\",\"_jsx\",\"children\",\"Segments\",\"node\",\"_loop\",\"$Suspense\",\"fallback\",\"reverse\",\"prefetch\",\"page\",\"shell\",\"catch\",\"Screen\",\"active\",\"AwaitQueries\",\"refetchOnMount\",\"NavigationHold\",\"Date\",\"now\",\"shown\",\"SilentErrorBoundary\",\"failed\",\"getDerivedStateFromError\",\"render\",\"RootLayout\",\"Error\",\"Navigator\",\"$QueryClientProvider\",\"_jsxs\",\"client\",\"runtime\",\"reload\",\"paths\",\"flatMap\",\"Promise\",\"allSettled\",\"getQueryState\",\"status\",\"resetQueries\",\"refetchQueries\"],\"ignoreList\":[],\"sources\":[\"@backtickjs/hono/src/runtime.tsx\"]}",
+    dependencies: ["react/jsx-runtime"],
+    params: [{ kind: "splice", bindings: [] }, { kind: "splice", bindings: [] }, { kind: "splice", bindings: [] }, { kind: "splice", bindings: [] }, { kind: "splice", bindings: [] }, { kind: "splice", bindings: [] }, { kind: "splice", bindings: [] }, { kind: "splice", bindings: [] }, { kind: "splice", bindings: [] }, { kind: "splice", bindings: [] }, { kind: "splice", bindings: [] }, { kind: "splice", bindings: [] }, { kind: "splice", bindings: [] }, { kind: "splice", bindings: [] }, { kind: "splice", bindings: [] }, { kind: "splice", bindings: [] }, { kind: "splice", bindings: [] }, { kind: "splice", bindings: [] }, { kind: "splice", bindings: [] }, { kind: "splice", bindings: [] }, { kind: "splice", bindings: [] }, { kind: "splice", bindings: [] }, { kind: "splice", bindings: [] }],
+    kind: "block"
+};
+/**
+ * A route's answer, run. Any bundle is an answer, whatever its status: an
+ * app's not-found screen is one. A refusal ({ name, message }) says why. For
+ * a route that may not exist (`notFoundIsNull`), a 404 is null.
+ */
+export const fetchAnswer = cs.create($module0, [exec]);
+/**
+ * The runtime of an open: for the phone at `origin` with `modules`, with the
+ * patterns of the app's `_layout` and `_loading` routes (`/city/:id/_layout`),
+ * so a screen asks only for those it has.
+ */
+export function clientRuntime(origin, modules, routes) {
+    return cs.create($module1, [QueryClient, fetchAnswer, origin, modules, fetchAnswer, origin, modules, PatternRouter, routes, PatternRouter, routes, useSuspenseQuery, useSuspenseQuery, useSuspenseQuery, usePrefetchQuery, Suspense, routes, useDeferredValue, Suspense, useSuspenseQueries, Component, useSuspenseQuery, QueryClientProvider]);
+}
+//# sourceMappingURL=runtime.js.map

package/dist/runtime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"runtime.js","sourceRoot":"","sources":["../src/runtime.tsx"],"names":[],"mappings":"AAAA,yEAAyE;AACzE,2EAA2E;AAC3E,mCAAmC;AACnC,OAAO,EAAe,EAAE,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDzD;;;;GAIG;AACH,MAAM,CAAC,MAAM,WAAW,8BAwBtB,CAAC;AAEH;;;;GAIG;AACH,MAAM,UAAU,aAAa,CAC3B,MAAc,EACd,OAAe,EACf,MAAmE;IAEnE,gVAkSG;AACL,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backtickjs/hono",
-  "version": "0.2.8",
+  "version": "0.3.1",
   "description": "Hono routes as Backtick screens: a route's answer is its server components, bundled for the client that asked",
   "keywords": [
     "backtick",
@@ -37,20 +37,36 @@
     "access": "public"
   },
   "dependencies": {
-    "@backtickjs/bundler": "0.2.8",
-    "@backtickjs/core": "0.2.8"
+    "@backtickjs/bundler": "0.3.1",
+    "@backtickjs/core": "0.3.1"
   },
   "peerDependencies": {
     "hono": "^4.13.13"
   },
   "devDependencies": {
+    "@backtickjs/expo": "0.3.1",
+    "@backtickjs/jsx-react": "0.3.1",
+    "@backtickjs/prettier-plugin": "0.3.1",
+    "@backtickjs/tsc": "0.3.1",
+    "@backtickjs/tspatch-plugin": "0.3.1",
+    "@tanstack/react-query": "5.104.0",
+    "@types/react": "19.3.0",
     "hono": "^4.13.13",
     "prettier": "^3.6.2",
+    "react": "19.3.0",
+    "ts-patch": "4.0.1",
     "typescript": "^6.0.3"
   },
+  "backtick": {
+    "plugins": [
+      "@backtickjs/jsx-react/plugin",
+      "@backtickjs/expo/plugin"
+    ]
+  },
   "scripts": {
-    "build": "tsc -b",
-    "dev": "tsc -b --watch",
+    "build": "tspc -b --noCheck --force",
+    "dev": "tspc -b --noCheck --watch",
+    "typecheck": "backtick-tsc -p tsconfig.build.json --noEmit",
     "format": "prettier --write --ignore-unknown .",
     "format:check": "prettier --check --ignore-unknown .",
     "test": "node --test \"test/**/*.test.ts\"",

package/src/index.ts

@@ -1,9 +1,12 @@
 import { bundler, BundlerError, type Modules } from "@backtickjs/bundler";
 import type { Spliceable, SplicesAs } from "@backtickjs/core";
-import type { MiddlewareHandler } from "hono";
+import type { Context, Hono, MiddlewareHandler } from "hono";
+import { clientRuntime } from "./runtime.js";
+
+export type { Runtime } from "./runtime.js";
 
 declare module "hono" {
-  // What `context.render` takes under `backtick()`, as
+  // What `context.render` takes under `backtickRenderer()`, as
   // `jsxRenderer()` types its own.
   interface ContextRenderer {
     <T extends [T] extends [SplicesAs<T>] ? unknown : Spliceable>(
@@ -12,67 +15,120 @@ declare module "hono" {
   }
 }
 
-/** A web app manifest: what the phone uses of an app before and around it. */
-export interface Manifest {
-  name?: string;
-  short_name?: string;
-  icons?: { src: string; sizes?: string; type?: string }[];
-  theme_color?: string;
-  background_color?: string;
-}
-
 /**
  * Hono's renderer for Backtick screens: under it, `context.render(input)`
  * answers with `input` bundled for the modules the client sent in
  * `x-backtick-modules`, so each route is a screen.
  *
- *     app.use(backtick());
+ *     app.use(backtickRenderer());
  *     app.get("/", (context) => context.render(<Home />));
  *
  * The status is the context's, so `context.status(404)` makes a not-found
- * screen, and screens are `no-store`: each opens as its latest copy. A client
+ * screen, and screens are `no-store`, kept out of HTTP caches: a reload or
+ * a new open always gets the latest copy. (The Backtick app fetches a page anew
+ * for each navigation, as Next.js's router does.) A client
  * without a module the screen needs gets a 426, and any other refusal of the
- * bundler's a 400, each with `{ name, message }`.
+ * bundler's a 400, each with `{ name, message }`. An app the Backtick app
+ * opens uses `backtickApp(app)` instead.
+ */
+export function backtickRenderer(): MiddlewareHandler {
+  return async (context, next) => {
+    context.setRenderer(async (input) => bundled(context, input as Spliceable));
+    await next();
+  };
+}
+
+/**
+ * Hono's renderer for an app the Backtick app opens, as `backtickRenderer()`,
+ * which also answers the runtime the Backtick app fetches when it opens
+ * `app`: the client code that fetches, keeps and shows its screens.
+ *
+ *     app.use(backtickApp(app));
+ *     app.get("/_layout", (context) => context.render(cs`() => <$Stack />`));
+ *     app.get("/", (context) => context.render(<Home />));
  *
- * `manifest` is the app's web app manifest, sent in `x-backtick-manifest` on
- * every screen, so it's as fresh as they are.
+ * Routes nest as Next.js's folders. `/_layout` is the root layout, a client
+ * component drawing the navigator; an app without one doesn't open. A screen
+ * is each segment's `_layout` (`/city/:id/_layout`, rendered for its path,
+ * answering a client component given `children`), around its `_loading`
+ * while what's under it loads, around the page. A loading state takes no
+ * params, as in Next.js: it's fetched once for its pattern, and reading a
+ * param throws. A navigation pushes once its layouts down to its first
+ * loading state, and that loading state, are in; with none, once all of it
+ * is. Layout and loading routes written with a trailing slash are refused.
  */
-export function backtick(
-  options: { manifest?: Manifest } = {},
-): MiddlewareHandler {
-  const { manifest } = options;
-  const json = JSON.stringify(manifest);
+export function backtickApp(app: Hono<any, any, any>): MiddlewareHandler {
+  const renderer = backtickRenderer();
   return async (context, next) => {
-    context.setRenderer(async (input) => {
-      let modules: Modules;
-      try {
-        modules = JSON.parse(context.req.header("x-backtick-modules") ?? "{}");
-      } catch (error) {
-        const { name, message } = error as SyntaxError;
-        return context.json(
-          { name, message: `x-backtick-modules isn't JSON: ${message}` },
-          400,
+    if (context.req.path.endsWith("/_loading")) {
+      context.req.param = () => {
+        throw new Error(
+          `${context.req.routePath} reads a param: a loading state takes none, as in Next.js. What depends on the path goes in a _layout.`,
         );
-      }
-      try {
-        const build = await bundler.build({ input, modules });
-        const { code } = build.generate({ format: "cjs" });
-        context.header("content-type", "text/javascript");
-        context.header("cache-control", "no-store");
-        if (manifest !== undefined) {
-          context.header("x-backtick-manifest", encodeURIComponent(json));
-        }
-        return context.body(code);
-      } catch (error) {
-        if (error instanceof BundlerError) {
-          return context.json(
-            { name: error.name, message: error.message },
-            error.name === "ClientVersionMismatch" ? 426 : 400,
-          );
-        }
-        throw error;
-      }
-    });
-    await next();
+      };
+    }
+    if (context.req.method !== "GET" || context.req.path !== runtimePath) {
+      return renderer(context, next);
+    }
+    const patterns = (name: string) => [
+      ...new Set(
+        app.routes
+          .filter(({ method, path }) => method === "GET" && path.endsWith(name))
+          .map(({ path }) => path),
+      ),
+    ];
+    const misplaced = app.routes.find(
+      ({ path }) => path.endsWith("/_layout/") || path.endsWith("/_loading/"),
+    );
+    if (misplaced !== undefined) {
+      throw new Error(
+        `The app's ${misplaced.path} route ends with a slash: write it ${misplaced.path.slice(0, -1)}.`,
+      );
+    }
+    if (!patterns("/_layout").includes("/_layout")) {
+      throw new Error(
+        "The app has no /_layout route: it's the root layout, a client component drawing the navigator, as cs`() => <$Stack />`.",
+      );
+    }
+    return bundled(
+      context,
+      clientRuntime(
+        new URL(context.req.url).origin,
+        context.req.header("x-backtick-modules") ?? "{}",
+        { layouts: patterns("/_layout"), loadings: patterns("/_loading") },
+      ),
+    );
   };
 }
+
+// Where the Backtick app fetches the runtime it opens an app with.
+const runtimePath = "/.well-known/backtick/runtime";
+
+// `input` bundled for the modules the client sent, as the answer.
+async function bundled(context: Context, input: Spliceable): Promise<Response> {
+  let modules: Modules;
+  try {
+    modules = JSON.parse(context.req.header("x-backtick-modules") ?? "{}");
+  } catch (error) {
+    const { name, message } = error as SyntaxError;
+    return context.json(
+      { name, message: `x-backtick-modules isn't JSON: ${message}` },
+      400,
+    );
+  }
+  try {
+    const build = await bundler.build({ input, modules });
+    const { code } = build.generate({ format: "cjs" });
+    context.header("content-type", "text/javascript");
+    context.header("cache-control", "no-store");
+    return context.body(code);
+  } catch (error) {
+    if (error instanceof BundlerError) {
+      return context.json(
+        { name: error.name, message: error.message },
+        error.name === "ClientVersionMismatch" ? 426 : 400,
+      );
+    }
+    throw error;
+  }
+}

package/src/runtime.tsx

@@ -0,0 +1,388 @@
+// The phone's half of `backtickApp()`: how an app's screens are fetched,
+// kept and shown, written as client code, which `backtickApp()` sends from
+// `/.well-known/backtick/runtime`.
+import { type Client, cs, exec } from "@backtickjs/core";
+import {
+  QueryClient,
+  QueryClientProvider,
+  usePrefetchQuery,
+  useSuspenseQueries,
+  useSuspenseQuery,
+} from "@tanstack/react-query" with { backtick: "client" };
+import { PatternRouter } from "hono/router/pattern-router" with {
+  backtick: "client",
+};
+import {
+  Component,
+  type ComponentType,
+  type ReactNode,
+  Suspense,
+  useDeferredValue,
+} from "react" with { backtick: "client" };
+
+/**
+ * What the phone runs an app with. A shell checks for a member before using
+ * it, so a later runtime can drop one.
+ */
+export interface Runtime {
+  /**
+   * The app's root layout, given the href on top. A navigation holds the
+   * current screen until the next can show, as navigations are transitions
+   * (`router.setTransitionMode("always")`): once its layouts down to its
+   * first loading state, and that loading state, are in, at once if they
+   * were prefetched; with no loading state, once all of it is in. Suspends
+   * until the first screen can show.
+   */
+  Navigator?: ComponentType<{ href: string }>;
+  /**
+   * A route's screen, nested as Next.js nests a page: each segment's layout,
+   * around its loading state while what's under it loads. One not `active`
+   * yet shows nothing.
+   */
+  Screen?: ComponentType<{ href: string; active: boolean }>;
+  /**
+   * Fetches an href's screen again, which stays until the new one is in:
+   * resolves once it's in, either way.
+   */
+  reload?(href: string): Promise<void>;
+  /**
+   * Fetches an href ahead, as Next.js's `Link` prefetches: its layouts down
+   * to its first loading state, and that loading state (nothing if it has
+   * none); with `page`, its page too, as `<Link prefetch>`.
+   */
+  prefetch?(href: string, page?: boolean): void;
+}
+
+/**
+ * A route's answer, run. Any bundle is an answer, whatever its status: an
+ * app's not-found screen is one. A refusal ({ name, message }) says why. For
+ * a route that may not exist (`notFoundIsNull`), a 404 is null.
+ */
+export const fetchAnswer = cs`async (
+  url: string,
+  modules: string,
+  notFoundIsNull: boolean,
+) => {
+  const response = await fetch(url, {
+    headers: { "x-backtick-modules": modules },
+  });
+  if (notFoundIsNull && response.status === 404) {
+    return null;
+  }
+  const body = await response.text();
+  if (
+    !(response.headers.get("content-type") ?? "").startsWith("text/javascript")
+  ) {
+    let reason = body;
+    try {
+      reason = JSON.parse(body).message ?? body;
+    } catch {}
+    throw new Error(
+      "The screen couldn't be opened (" + response.status + "): " + reason,
+    );
+  }
+  return (await $exec(body as never)) as unknown;
+}`;
+
+/**
+ * The runtime of an open: for the phone at `origin` with `modules`, with the
+ * patterns of the app's `_layout` and `_loading` routes (`/city/:id/_layout`),
+ * so a screen asks only for those it has.
+ */
+export function clientRuntime(
+  origin: string,
+  modules: string,
+  routes: { layouts: readonly string[]; loadings: readonly string[] },
+): Client<Runtime> {
+  return cs`{
+    // Every answer is a query, keyed by where it was fetched, and reused in
+    // memory as Next.js's router cache does: a layout or a loading state for 5
+    // minutes; a page only for the navigation it was fetched for (0 s), or, fetched
+    // ahead by <Link prefetch>, for 5 minutes. A screen's no-store keeps it
+    // out of HTTP caches, not this one.
+    const segmentStaleTime = 300000;
+    // When the navigation to the href on top started: kept outside React, as
+    // a hold that suspends keeps no state.
+    let currentNavigation = { href: "", startedAt: 0 };
+    const fetchedAhead = new Set<string>();
+    const pageStaleTime = (query: {
+      queryKey: readonly unknown[];
+      state: { dataUpdatedAt: number };
+    }) =>
+      query.state.dataUpdatedAt >= currentNavigation.startedAt
+        ? Infinity
+        : fetchedAhead.has(query.queryKey[0] as string)
+          ? segmentStaleTime
+          : 0;
+    const queryClient = new $QueryClient({
+      defaultOptions: {
+        queries: {
+          queryFn: async (context: { queryKey: readonly unknown[] }) =>
+            $fetchAnswer(
+              $origin + (context.queryKey[0] as string),
+              $modules,
+              false,
+            ),
+          staleTime: pageStaleTime,
+          structuralSharing: false,
+          retry: false,
+        },
+      },
+    });
+    type Query = {
+      queryKey: string[];
+      staleTime?: number;
+      queryFn?: () => Promise<unknown>;
+    };
+    const pageQuery = (href: string): Query => ({ queryKey: [href] });
+    const layoutQuery = (path: string): Query => ({
+      queryKey: [path],
+      staleTime: segmentStaleTime,
+    });
+    // A loading state takes no params, as in Next.js: it's fetched at its
+    // pattern (/city/:id/_loading), once for every href it applies to.
+    const loadingQuery = (pattern: string) => ({
+      queryKey: [pattern],
+      staleTime: segmentStaleTime,
+      queryFn: async () => ({
+        value: (await $fetchAnswer(
+          $origin + pattern,
+          $modules,
+          false,
+        )) as ReactNode,
+      }),
+    });
+
+    // The app's layouts and loading states, matched by Hono's own router.
+    const layoutRouter = new $PatternRouter<string>();
+    for (const pattern of $routes.layouts) {
+      layoutRouter.add("GET", pattern, pattern);
+    }
+    const loadingRouter = new $PatternRouter<string>();
+    for (const pattern of $routes.loadings) {
+      loadingRouter.add("GET", pattern, pattern);
+    }
+    // An href's segments, as Next.js's folders: each path prefix, with its
+    // layout's path and its loading state's pattern, where the app has them.
+    // The root's layout is the app's RootLayout.
+    const segmentsOf = (href: string) => {
+      const searchStart = href.indexOf("?");
+      const path = searchStart === -1 ? href : href.slice(0, searchStart);
+      const names = path.split("/").filter(Boolean);
+      const bases = [
+        "",
+        ...names.map((_, i) => "/" + names.slice(0, i + 1).join("/")),
+      ];
+      return bases.map((base) => {
+        const layout = base + "/_layout";
+        return {
+          layout:
+            base !== "" && layoutRouter.match("GET", layout)[0].length > 0
+              ? layout
+              : undefined,
+          loading: loadingRouter.match("GET", base + "/_loading")[0][0]?.[0],
+        };
+      });
+    };
+    // What an href's screen needs before it can show, as Next.js prefetches
+    // and holds: its layouts down to the first loading state, and that
+    // loading state; or, with none, all its layouts and its page.
+    const shellOf = (href: string) => {
+      const queries: Query[] = [];
+      for (const segment of segmentsOf(href)) {
+        if (segment.layout !== undefined) {
+          queries.push(layoutQuery(segment.layout));
+        }
+        if (segment.loading !== undefined) {
+          queries.push(loadingQuery(segment.loading));
+          return { queries, loads: true };
+        }
+      }
+      queries.push(pageQuery(href));
+      return { queries, loads: false };
+    };
+    // A stale answer no screen shows, in before a navigation started, is
+    // dropped as the navigation reads it, so the navigation waits for a fresh
+    // one, as Next.js's does; one a screen still shows, going back to it, is
+    // kept.
+    const dropStaleAnswer = (query: Query, startedAt: number) => {
+      const cached = queryClient
+        .getQueryCache()
+        .find({ queryKey: query.queryKey, exact: true });
+      if (
+        cached !== undefined &&
+        cached.getObserversCount() === 0 &&
+        cached.state.data !== undefined &&
+        cached.state.dataUpdatedAt < startedAt &&
+        cached.isStaleByTime(query.staleTime ?? pageStaleTime(cached))
+      ) {
+        queryClient.removeQueries({ queryKey: query.queryKey, exact: true });
+      }
+    };
+
+    const Page = (props: { href: string }) =>
+      $useSuspenseQuery(pageQuery(props.href)).data as ReactNode;
+    const Loading = (props: { pattern: string }) =>
+      $useSuspenseQuery(loadingQuery(props.pattern)).data.value;
+    // A layout answers a client component, given what's under it; any other
+    // answer (its not-found screen) is what the screen shows.
+    const Layout = (props: { path: string; children: ReactNode }) => {
+      const answer = $useSuspenseQuery(layoutQuery(props.path)).data;
+      if (typeof answer !== "function") {
+        return answer as ReactNode;
+      }
+      const Answer = answer as ComponentType<{ children: ReactNode }>;
+      return <Answer>{props.children}</Answer>;
+    };
+    // A screen as Next.js nests a page: each segment's layout, around a
+    // Suspense showing its loading state, around what's under it. The page
+    // is fetched meanwhile.
+    const Segments = (props: { href: string }) => {
+      $usePrefetchQuery(pageQuery(props.href));
+      let node: ReactNode = <Page href={props.href} />;
+      for (const segment of segmentsOf(props.href).reverse()) {
+        if (segment.loading !== undefined) {
+          node = (
+            <$Suspense fallback={<Loading pattern={segment.loading} />}>
+              {node}
+            </$Suspense>
+          );
+        }
+        if (segment.layout !== undefined) {
+          node = <Layout path={segment.layout}>{node}</Layout>;
+        }
+      }
+      return node;
+    };
+
+    // Fetches an href ahead, as Next.js's Link: what its screen needs to
+    // show, if that ends at a loading state, and its page too when asked
+    // (<Link prefetch>).
+    const prefetch = (href: string, page = false) => {
+      const shell = shellOf(href);
+      if (page) {
+        fetchedAhead.add(href);
+      }
+      const queries = page
+        ? [...shell.queries, pageQuery(href)]
+        : shell.loads
+          ? shell.queries
+          : [];
+      for (const query of queries) {
+        void queryClient.query(query).catch(() => {});
+      }
+    };
+    // Every loading state, as the app opens: one per pattern, for any href.
+    for (const pattern of $routes.loadings) {
+      void queryClient.query(loadingQuery(pattern)).catch(() => {});
+    }
+
+    // An href changed in place (router.setParams) shows once it's in: the
+    // screen stays meanwhile.
+    const Screen = (props: { href: string; active: boolean }) => {
+      const href = $useDeferredValue(props.href);
+      return props.active ? (
+        <$Suspense fallback={null}>
+          <Segments href={href} />
+        </$Suspense>
+      ) : null;
+    };
+
+    // Suspends until each query is in. One that is, however old, holds
+    // nothing: stale ones were dropped above.
+    const AwaitQueries = (props: { queries: Query[] }) => {
+      $useSuspenseQueries({
+        queries: props.queries.map((query) => ({
+          ...query,
+          refetchOnMount: false,
+        })),
+      });
+      return null;
+    };
+    // Suspends a navigation's render, above the Stack, until the href's
+    // screen can show (shellOf). As navigations are transitions, the screen on
+    // top stays meanwhile. The page is fetched alongside. One that fails ends
+    // the hold, for the screen to show why.
+    const NavigationHold = (props: { href: string }) => {
+      if (currentNavigation.href !== props.href) {
+        currentNavigation = { href: props.href, startedAt: Date.now() };
+      }
+      const shell = shellOf(props.href);
+      for (const query of [...shell.queries, pageQuery(props.href)]) {
+        dropStaleAnswer(query, currentNavigation.startedAt);
+      }
+      // Going back, the screen shows its page as it was: only a page no
+      // screen shows is fetched.
+      const shown =
+        (queryClient
+          .getQueryCache()
+          .find({ queryKey: [props.href], exact: true })
+          ?.getObserversCount() ?? 0) > 0;
+      if (!shown) {
+        void queryClient.query(pageQuery(props.href)).catch(() => {});
+      }
+      return <AwaitQueries queries={shell.queries} />;
+    };
+    class SilentErrorBoundary extends $Component<
+      { children: ReactNode },
+      { failed: boolean }
+    > {
+      state = { failed: false };
+      static getDerivedStateFromError() {
+        return { failed: true };
+      }
+      render() {
+        return this.state.failed ? null : this.props.children;
+      }
+    }
+
+    // The root layout, /_layout, which draws the navigator: fetched once per
+    // open, as a new one would remount the navigator, and its screens with it.
+    const RootLayout = () => {
+      const answer = $useSuspenseQuery({
+        queryKey: ["/_layout"],
+        staleTime: Infinity,
+      }).data;
+      if (typeof answer !== "function") {
+        throw new Error(
+          "The app's /_layout answers no component: it's the root layout, a client component drawing the navigator (a Stack).",
+        );
+      }
+      const Answer = answer as ComponentType;
+      return <Answer />;
+    };
+
+    const Navigator = (props: { href: string }) => (
+      <$QueryClientProvider client={queryClient}>
+        <SilentErrorBoundary key={props.href}>
+          <NavigationHold href={props.href} />
+        </SilentErrorBoundary>
+        <RootLayout />
+      </$QueryClientProvider>
+    );
+
+    const runtime: Runtime = {
+      Navigator,
+      Screen,
+      prefetch,
+      // Its page and layouts again: one that failed, for its screen to wait
+      // for it; the others kept until the new answer is in.
+      reload: async (href) => {
+        const paths = [
+          href,
+          ...segmentsOf(href).flatMap((segment) =>
+            segment.layout === undefined ? [] : [segment.layout],
+          ),
+        ];
+        await Promise.allSettled(
+          paths.map((path) =>
+            queryClient.getQueryState([path])?.status === "error"
+              ? queryClient.resetQueries({ queryKey: [path], exact: true })
+              : queryClient.refetchQueries({ queryKey: [path], exact: true }),
+          ),
+        );
+      },
+    };
+    return runtime;
+  }`;
+}