@backtickjs/hono 0.3.0 → 0.3.1

package/README.md

@@ -19,18 +19,17 @@ import { Stack } from "expo-router" with { backtick: "client" };
 import { Hono } from "hono";
 import { Home } from "./Home.js";
 
-// The root layout, around every screen: the navigator.
-const RootLayout = cs`() => <$Stack />`;
-
 const app = new Hono();
 
-app.use(backtickApp(app, RootLayout));
+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, RootLayout)` answers: the client code that fetches each screen and keeps it while it shows, around the app's root layout, a client component that draws its navigator, as Hono's `jsxRenderer()` takes the page's. Navigation works as in Next.js. Every route answers with what it draws, and the runtime fetches each as a query keyed by its path. A route with a `_loading` (`/day/_loading`, rendered for the path, so it can use its params) pushes as soon as that's in, at once if it was prefetched, and shows it until the route's answer is in; a navigation to one without holds the current screen until its answer is in, as expo-router's `unstable_useIsNavigating()` says, for a progress bar. Going back shows a screen as it was. `<Link prefetch>` fetches a route's loading state ahead, or its answer, without one. The root layout is the only one: what screens share is a component they draw. A client with a navigator of its own uses `backtickRenderer()` alone.
+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:
 

package/dist/index.d.ts

@@ -1,5 +1,4 @@
-import type { Client, Spliceable, SplicesAs } from "@backtickjs/core";
-import type { ComponentType } from "react";
+import type { Spliceable, SplicesAs } from "@backtickjs/core";
 import type { Hono, MiddlewareHandler } from "hono";
 export type { Runtime } from "./runtime.js";
 declare module "hono" {
@@ -17,30 +16,30 @@ declare module "hono" {
  *
  * The status is the context's, so `context.status(404)` makes a not-found
  * 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 reuses a screen
- * it has, in memory, for 30 seconds, as Next.js's router does.) A client
+ * 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 }`. An app the Backtick app
- * opens uses `backtickApp(app, RootLayout)` instead.
+ * 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, around
- * its root layout, a client component that draws its `Stack`.
+ * `app`: the client code that fetches, keeps and shows its screens.
  *
- *     const RootLayout = cs`() => <$Stack />`;
- *     app.use(backtickApp(app, RootLayout));
+ *     app.use(backtickApp(app));
+ *     app.get("/_layout", (context) => context.render(cs`() => <$Stack />`));
  *     app.get("/", (context) => context.render(<Home />));
  *
- * Every route answers with what it draws. As in Next.js, a route with a
- * `_loading` route (`/city/:id/_loading`, rendered for the path, so it can
- * show the city's name) pushes as soon as that's in, at once if it was
- * prefetched, and shows it until the route's answer is in; a navigation to
- * one without holds the current screen until its answer is in. The runtime
- * asks only for the loading states `app` has routes for. One with a layout
- * route (a screen has none: what screens share is a component they draw), or
- * with a loading route written with a trailing slash, doesn't open.
+ * 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 backtickApp(app: Hono<any, any, any>, RootLayout: Client<ComponentType>): MiddlewareHandler;
+export declare function backtickApp(app: Hono<any, any, any>): MiddlewareHandler;

package/dist/index.js

@@ -10,11 +10,11 @@ import { clientRuntime } from "./runtime.js";
  *
  * The status is the context's, so `context.status(404)` makes a not-found
  * 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 reuses a screen
- * it has, in memory, for 30 seconds, as Next.js's router does.) A client
+ * 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 }`. An app the Backtick app
- * opens uses `backtickApp(app, RootLayout)` instead.
+ * opens uses `backtickApp(app)` instead.
  */
 export function backtickRenderer() {
     return async (context, next) => {
@@ -25,39 +25,46 @@ export function backtickRenderer() {
 /**
  * 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, around
- * its root layout, a client component that draws its `Stack`.
+ * `app`: the client code that fetches, keeps and shows its screens.
  *
- *     const RootLayout = cs`() => <$Stack />`;
- *     app.use(backtickApp(app, RootLayout));
+ *     app.use(backtickApp(app));
+ *     app.get("/_layout", (context) => context.render(cs`() => <$Stack />`));
  *     app.get("/", (context) => context.render(<Home />));
  *
- * Every route answers with what it draws. As in Next.js, a route with a
- * `_loading` route (`/city/:id/_loading`, rendered for the path, so it can
- * show the city's name) pushes as soon as that's in, at once if it was
- * prefetched, and shows it until the route's answer is in; a navigation to
- * one without holds the current screen until its answer is in. The runtime
- * asks only for the loading states `app` has routes for. One with a layout
- * route (a screen has none: what screens share is a component they draw), or
- * with a loading route written with a trailing slash, doesn't open.
+ * 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, RootLayout) {
+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 misplaced = app.routes.find(({ path }) => path.endsWith("/_loading/") || /\/_layout\/?$/.test(path));
+        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(misplaced.path.endsWith("/_loading/")
-                ? `The app's ${misplaced.path} route ends with a slash: write it ${misplaced.path.slice(0, -1)}.`
-                : `The app's ${misplaced.path} route is a layout, which a screen doesn't have: the root layout is backtickApp(app, RootLayout)'s, and what screens share is a component they draw.`);
+            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 />`.");
         }
-        // The app's loading states, by pattern.
-        const loadings = app.routes
-            .filter(({ method, path }) => method === "GET" && path.endsWith("/_loading"))
-            .map(({ path }) => path);
-        return bundled(context, clientRuntime(new URL(context.req.url).origin, context.req.header("x-backtick-modules") ?? "{}", RootLayout, [...new Set(loadings)]));
+        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.

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/runtime.d.ts

@@ -8,16 +8,18 @@ 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")`): a route with a `_loading` once
-     * that's in, at once if it was prefetched; one without, once its page is
-     * in. Suspends until the first screen can show.
+     * (`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: what it renders, and meanwhile what its `_loading`
-     * renders. One not `active` yet shows nothing.
+     * 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;
@@ -29,11 +31,11 @@ export interface Runtime {
      */
     reload?(href: string): Promise<void>;
     /**
-     * Fetches an href ahead, as Next.js prefetches a link: its loading state,
-     * or, without one, its page. For each `<Link prefetch>`, which the shell
-     * sees as it's prefetched.
+     * 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): void;
+    prefetch?(href: string, page?: boolean): void;
 }
 /**
  * A route's answer, run. Any bundle is an answer, whatever its status: an
@@ -42,8 +44,11 @@ export interface Runtime {
  */
 export declare const fetchAnswer: Client<unknown>;
 /**
- * The runtime of an open: for the phone at `origin` with `modules`, around
- * the app's root layout, with the patterns of its `_loading` routes
- * (`/city/:id/_loading`), so a screen asks only for those it has.
+ * 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, RootLayout: Client<ComponentType>, loadingPatterns: readonly string[]): Client<Runtime>;
+export declare function clientRuntime(origin: string, modules: string, routes: {
+    layouts: readonly string[];
+    loadings: readonly string[];
+}): Client<Runtime>;

package/dist/runtime.js

@@ -12,19 +12,19 @@ const Component = { "@backtickjs": "ClientImport", name: "Component", from: "rea
 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: "2hmayizp567y2:59:27",
+    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\":\";;;kBA0D8BA,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\"]}",
+    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: "2hmayizp567y2:96: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) => {\n    var pageStaleTime = 30000;\n    var loadingStaleTime = 300000;\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 loadingQueryOptions = path => ({\n        queryKey: [path],\n        staleTime: loadingStaleTime,\n        queryFn: async () => ({\n            value: await $splice4()($splice5() + path, $splice6(), true)\n        })\n    });\n    var loadingRouter = new ($splice7())();\n    for (var pattern of $splice8()) {\n        loadingRouter.add(\"GET\", pattern, true);\n    }\n    var loadingPathOf = href => {\n        var searchStart = href.indexOf(\"?\");\n        var path = searchStart === -1 ? href : href.slice(0, searchStart);\n        var loading = (path === \"/\" ? \"\" : path) + \"/_loading\";\n        return loadingRouter.match(\"GET\", loading)[0].length > 0 ? loading : undefined;\n    };\n    var dropStaleAnswer = (path, startedAt) => {\n        var query = queryClient.getQueryCache().find({\n            queryKey: [path],\n            exact: true\n        });\n        if (query !== undefined && query.getObserversCount() === 0 && query.state.data !== undefined && query.state.dataUpdatedAt < startedAt && query.isStaleByTime(pageStaleTime)) {\n            queryClient.removeQueries({\n                queryKey: [path],\n                exact: true\n            });\n        }\n    };\n    var Page = props => $splice9()({\n        queryKey: [props.href]\n    }).data;\n    var PageWithLoading = props => {\n        var loading = loadingPathOf(props.href);\n        $splice10()({\n            queryKey: [props.href]\n        });\n        var queries = loading === undefined ? [] : [loadingQueryOptions(loading)];\n        var loadingResult = $splice11()({\n            queries\n        })[0];\n        return loadingResult === undefined ? (0, jsx_runtime_1.jsx)(Page, {\n            href: props.href\n        }) : ($Suspense => (0, jsx_runtime_1.jsx)($Suspense, {\n            fallback: loadingResult.data.value,\n            children: (0, jsx_runtime_1.jsx)(Page, {\n                href: props.href\n            })\n        }))($splice12());\n    };\n    var prefetch = href => {\n        var loading = loadingPathOf(href);\n        if (loading === undefined) {\n            void queryClient.query({\n                queryKey: [href]\n            }).catch(() => { });\n            return;\n        }\n        void queryClient.query(loadingQueryOptions(loading)).then(answer => answer.value === null ? queryClient.query({\n            queryKey: [href]\n        }) : undefined).catch(() => { });\n    };\n    var Screen = props => {\n        var href = $splice13()(props.href);\n        return props.active ? ($Suspense => (0, jsx_runtime_1.jsx)($Suspense, {\n            fallback: null,\n            children: (0, jsx_runtime_1.jsx)(PageWithLoading, {\n                href: href\n            })\n        }))($splice14()) : null;\n    };\n    var AwaitQuery = props => {\n        $splice15()({\n            ...props.query,\n            refetchOnMount: false\n        });\n        return null;\n    };\n    var currentNavigation = {\n        href: \"\",\n        startedAt: 0\n    };\n    var NavigationHold = props => {\n        if (currentNavigation.href !== props.href) {\n            currentNavigation = {\n                href: props.href,\n                startedAt: Date.now()\n            };\n        }\n        dropStaleAnswer(props.href, currentNavigation.startedAt);\n        var loading = loadingPathOf(props.href);\n        if (loading !== undefined) {\n            void queryClient.query({\n                queryKey: [props.href]\n            }).catch(() => { });\n            return (0, jsx_runtime_1.jsx)(AwaitQuery, {\n                query: loadingQueryOptions(loading)\n            });\n        }\n        return (0, jsx_runtime_1.jsx)(AwaitQuery, {\n            query: {\n                queryKey: [props.href]\n            }\n        });\n    };\n    class SilentErrorBoundary extends $splice16() {\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 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), ($RootLayout => (0, jsx_runtime_1.jsx)($RootLayout, {}))($splice18())]\n    }))($splice17());\n    var runtime = {\n        Navigator,\n        Screen,\n        prefetch,\n        reload: async (href) => {\n            var loading = loadingPathOf(href);\n            await Promise.allSettled((loading === undefined ? [href] : [href, loading]).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\",\"pageStaleTime\",\"loadingStaleTime\",\"queryClient\",\"defaultOptions\",\"queries\",\"queryFn\",\"context\",\"queryKey\",\"staleTime\",\"structuralSharing\",\"retry\",\"loadingQueryOptions\",\"path\",\"value\",\"loadingRouter\",\"pattern\",\"add\",\"loadingPathOf\",\"href\",\"searchStart\",\"indexOf\",\"slice\",\"loading\",\"match\",\"length\",\"undefined\",\"dropStaleAnswer\",\"startedAt\",\"query\",\"getQueryCache\",\"find\",\"exact\",\"getObserversCount\",\"state\",\"data\",\"dataUpdatedAt\",\"isStaleByTime\",\"removeQueries\",\"Page\",\"props\",\"PageWithLoading\",\"loadingResult\",\"_jsx\",\"$Suspense\",\"fallback\",\"children\",\"prefetch\",\"catch\",\"then\",\"answer\",\"Screen\",\"active\",\"AwaitQuery\",\"refetchOnMount\",\"currentNavigation\",\"NavigationHold\",\"Date\",\"now\",\"SilentErrorBoundary\",\"failed\",\"getDerivedStateFromError\",\"render\",\"Navigator\",\"$QueryClientProvider\",\"_jsxs\",\"client\",\"$RootLayout\",\"runtime\",\"reload\",\"Promise\",\"allSettled\",\"map\",\"getQueryState\",\"status\",\"resetQueries\",\"refetchQueries\"],\"ignoreList\":[],\"sources\":[\"@backtickjs/hono/src/runtime.tsx\"]}",
+    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: [] }],
+    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"
 };
 /**
@@ -34,11 +34,11 @@ const $module1 = {
  */
 export const fetchAnswer = cs.create($module0, [exec]);
 /**
- * The runtime of an open: for the phone at `origin` with `modules`, around
- * the app's root layout, with the patterns of its `_loading` routes
- * (`/city/:id/_loading`), so a screen asks only for those it has.
+ * 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, RootLayout, loadingPatterns) {
-    return cs.create($module1, [QueryClient, fetchAnswer, origin, modules, fetchAnswer, origin, modules, PatternRouter, loadingPatterns, useSuspenseQuery, usePrefetchQuery, useSuspenseQueries, Suspense, useDeferredValue, Suspense, useSuspenseQuery, Component, QueryClientProvider, RootLayout]);
+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

@@ -1 +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;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDzD;;;;GAIG;AACH,MAAM,CAAC,MAAM,WAAW,8BAwBtB,CAAC;AAEH;;;;GAIG;AACH,MAAM,UAAU,aAAa,CAC3B,MAAc,EACd,OAAe,EACf,UAAiC,EACjC,eAAkC;IAElC,kSAyLG;AACL,CAAC"}
+{"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.3.0",
+  "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,18 +37,18 @@
     "access": "public"
   },
   "dependencies": {
-    "@backtickjs/bundler": "0.3.0",
-    "@backtickjs/core": "0.3.0"
+    "@backtickjs/bundler": "0.3.1",
+    "@backtickjs/core": "0.3.1"
   },
   "peerDependencies": {
     "hono": "^4.13.13"
   },
   "devDependencies": {
-    "@backtickjs/expo": "0.3.0",
-    "@backtickjs/jsx-react": "0.3.0",
-    "@backtickjs/prettier-plugin": "0.3.0",
-    "@backtickjs/tsc": "0.3.0",
-    "@backtickjs/tspatch-plugin": "0.3.0",
+    "@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",

package/src/index.ts

@@ -1,6 +1,5 @@
 import { bundler, BundlerError, type Modules } from "@backtickjs/bundler";
-import type { Client, Spliceable, SplicesAs } from "@backtickjs/core";
-import type { ComponentType } from "react";
+import type { Spliceable, SplicesAs } from "@backtickjs/core";
 import type { Context, Hono, MiddlewareHandler } from "hono";
 import { clientRuntime } from "./runtime.js";
 
@@ -26,11 +25,11 @@ declare module "hono" {
  *
  * The status is the context's, so `context.status(404)` makes a not-found
  * 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 reuses a screen
- * it has, in memory, for 30 seconds, as Next.js's router does.) A client
+ * 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 }`. An app the Backtick app
- * opens uses `backtickApp(app, RootLayout)` instead.
+ * opens uses `backtickApp(app)` instead.
  */
 export function backtickRenderer(): MiddlewareHandler {
   return async (context, next) => {
@@ -42,54 +41,61 @@ export 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, around
- * its root layout, a client component that draws its `Stack`.
+ * `app`: the client code that fetches, keeps and shows its screens.
  *
- *     const RootLayout = cs`() => <$Stack />`;
- *     app.use(backtickApp(app, RootLayout));
+ *     app.use(backtickApp(app));
+ *     app.get("/_layout", (context) => context.render(cs`() => <$Stack />`));
  *     app.get("/", (context) => context.render(<Home />));
  *
- * Every route answers with what it draws. As in Next.js, a route with a
- * `_loading` route (`/city/:id/_loading`, rendered for the path, so it can
- * show the city's name) pushes as soon as that's in, at once if it was
- * prefetched, and shows it until the route's answer is in; a navigation to
- * one without holds the current screen until its answer is in. The runtime
- * asks only for the loading states `app` has routes for. One with a layout
- * route (a screen has none: what screens share is a component they draw), or
- * with a loading route written with a trailing slash, doesn't open.
+ * 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: Hono<any, any, any>,
-  RootLayout: Client<ComponentType>,
-): MiddlewareHandler {
+export function backtickApp(app: Hono<any, any, any>): MiddlewareHandler {
   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: string) => [
+      ...new Set(
+        app.routes
+          .filter(({ method, path }) => method === "GET" && path.endsWith(name))
+          .map(({ path }) => path),
+      ),
+    ];
     const misplaced = app.routes.find(
-      ({ path }) => path.endsWith("/_loading/") || /\/_layout\/?$/.test(path),
+      ({ path }) => path.endsWith("/_layout/") || path.endsWith("/_loading/"),
     );
     if (misplaced !== undefined) {
       throw new Error(
-        misplaced.path.endsWith("/_loading/")
-          ? `The app's ${misplaced.path} route ends with a slash: write it ${misplaced.path.slice(0, -1)}.`
-          : `The app's ${misplaced.path} route is a layout, which a screen doesn't have: the root layout is backtickApp(app, RootLayout)'s, and what screens share is a component they draw.`,
+        `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 />`.",
       );
     }
-    // The app's loading states, by pattern.
-    const loadings = app.routes
-      .filter(
-        ({ method, path }) => method === "GET" && path.endsWith("/_loading"),
-      )
-      .map(({ path }) => path);
     return bundled(
       context,
       clientRuntime(
         new URL(context.req.url).origin,
         context.req.header("x-backtick-modules") ?? "{}",
-        RootLayout,
-        [...new Set(loadings)],
+        { layouts: patterns("/_layout"), loadings: patterns("/_loading") },
       ),
     );
   };

package/src/runtime.tsx

@@ -28,14 +28,16 @@ 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")`): a route with a `_loading` once
-   * that's in, at once if it was prefetched; one without, once its page is
-   * in. Suspends until the first screen can show.
+   * (`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: what it renders, and meanwhile what its `_loading`
-   * renders. One not `active` yet shows nothing.
+   * 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 }>;
   /**
@@ -44,11 +46,11 @@ export interface Runtime {
    */
   reload?(href: string): Promise<void>;
   /**
-   * Fetches an href ahead, as Next.js prefetches a link: its loading state,
-   * or, without one, its page. For each `<Link prefetch>`, which the shell
-   * sees as it's prefetched.
+   * 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): void;
+  prefetch?(href: string, page?: boolean): void;
 }
 
 /**
@@ -83,24 +85,35 @@ export const fetchAnswer = cs`async (
 }`;
 
 /**
- * The runtime of an open: for the phone at `origin` with `modules`, around
- * the app's root layout, with the patterns of its `_loading` routes
- * (`/city/:id/_loading`), so a screen asks only for those it has.
+ * 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,
-  RootLayout: Client<ComponentType>,
-  loadingPatterns: readonly string[],
+  routes: { layouts: readonly string[]; loadings: readonly string[] },
 ): Client<Runtime> {
   return cs`{
-    // Every answer is a query, keyed by its path: what the route renders. A
-    // screen is its page's, and its loading state's while the page loads.
-    // Each is reused, in memory, as Next.js's router cache does: a page for
-    // 30 seconds, a loading state for 5 minutes. A screen's no-store keeps it
+    // 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 pageStaleTime = 30000;
-    const loadingStaleTime = 300000;
+    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: {
@@ -116,88 +129,153 @@ export function clientRuntime(
         },
       },
     });
-    // A loading state: none if it answers 404, for a param it has none for.
-    const loadingQueryOptions = (path: string) => ({
+    type Query = {
+      queryKey: string[];
+      staleTime?: number;
+      queryFn?: () => Promise<unknown>;
+    };
+    const pageQuery = (href: string): Query => ({ queryKey: [href] });
+    const layoutQuery = (path: string): Query => ({
       queryKey: [path],
-      staleTime: loadingStaleTime,
+      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 + path,
+          $origin + pattern,
           $modules,
-          true,
+          false,
         )) as ReactNode,
       }),
     });
-    // An href's loading state, if the app has a _loading route for it,
-    // matched by Hono's own router.
-    const loadingRouter = new $PatternRouter<true>();
-    for (const pattern of $loadingPatterns) {
-      loadingRouter.add("GET", pattern, true);
+
+    // 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);
     }
-    const loadingPathOf = (href: string) => {
+    // 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 loading = (path === "/" ? "" : path) + "/_loading";
-      return loadingRouter.match("GET", loading)[0].length > 0
-        ? loading
-        : undefined;
+      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 = (path: string, startedAt: number) => {
-      const query = queryClient
+    const dropStaleAnswer = (query: Query, startedAt: number) => {
+      const cached = queryClient
         .getQueryCache()
-        .find({ queryKey: [path], exact: true });
+        .find({ queryKey: query.queryKey, exact: true });
       if (
-        query !== undefined &&
-        query.getObserversCount() === 0 &&
-        query.state.data !== undefined &&
-        query.state.dataUpdatedAt < startedAt &&
-        query.isStaleByTime(pageStaleTime)
+        cached !== undefined &&
+        cached.getObserversCount() === 0 &&
+        cached.state.data !== undefined &&
+        cached.state.dataUpdatedAt < startedAt &&
+        cached.isStaleByTime(query.staleTime ?? pageStaleTime(cached))
       ) {
-        queryClient.removeQueries({ queryKey: [path], exact: true });
+        queryClient.removeQueries({ queryKey: query.queryKey, exact: true });
       }
     };
 
     const Page = (props: { href: string }) =>
-      $useSuspenseQuery({ queryKey: [props.href] }).data as ReactNode;
-
-    // A screen as Next.js shows a page: with a loading state, inside a
-    // Suspense showing it; the page fetched meanwhile.
-    const PageWithLoading = (props: { href: string }) => {
-      const loading = loadingPathOf(props.href);
-      $usePrefetchQuery({ queryKey: [props.href] });
-      const queries: ReturnType<typeof loadingQueryOptions>[] =
-        loading === undefined ? [] : [loadingQueryOptions(loading)];
-      const loadingResult = $useSuspenseQueries({ queries })[0];
-      return loadingResult === undefined ? (
-        <Page href={props.href} />
-      ) : (
-        <$Suspense fallback={loadingResult.data.value}>
-          <Page href={props.href} />
-        </$Suspense>
-      );
+      $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 prefetches: its loading state, or,
-    // without one, its page.
-    const prefetch = (href: string) => {
-      const loading = loadingPathOf(href);
-      if (loading === undefined) {
-        void queryClient.query({ queryKey: [href] }).catch(() => {});
-        return;
+    // 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(() => {});
       }
-      void queryClient
-        .query(loadingQueryOptions(loading))
-        .then((answer) =>
-          answer.value === null
-            ? queryClient.query({ queryKey: [href] })
-            : undefined,
-        )
-        .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.
@@ -205,38 +283,45 @@ export function clientRuntime(
       const href = $useDeferredValue(props.href);
       return props.active ? (
         <$Suspense fallback={null}>
-          <PageWithLoading href={href} />
+          <Segments href={href} />
         </$Suspense>
       ) : null;
     };
 
-    // Suspends until a query is in. One that is, however old, holds nothing:
-    // a stale page was dropped above, and a stale loading state is refreshed
-    // by the screen, as it's only shown until the page is in.
-    const AwaitQuery = (props: { query: { queryKey: string[] } }) => {
-      $useSuspenseQuery({ ...props.query, refetchOnMount: false });
+    // 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;
     };
-    // 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 };
     // Suspends a navigation's render, above the Stack, until the href's
-    // loading state is in, or, without one, its page. As navigations are
-    // transitions, the screen on top stays. One that fails ends the hold, for
-    // the screen to show why.
+    // 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() };
       }
-      dropStaleAnswer(props.href, currentNavigation.startedAt);
-      // A route with a loading state pushes as soon as its loading state is
-      // in, at once if it was prefetched; its page is fetched meanwhile.
-      const loading = loadingPathOf(props.href);
-      if (loading !== undefined) {
-        void queryClient.query({ queryKey: [props.href] }).catch(() => {});
-        return <AwaitQuery query={loadingQueryOptions(loading)} />;
+      const shell = shellOf(props.href);
+      for (const query of [...shell.queries, pageQuery(props.href)]) {
+        dropStaleAnswer(query, currentNavigation.startedAt);
       }
-      return <AwaitQuery query={{ queryKey: [props.href] }} />;
+      // 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 },
@@ -251,12 +336,28 @@ export function clientRuntime(
       }
     }
 
+    // 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 />
+        <RootLayout />
       </$QueryClientProvider>
     );
 
@@ -264,12 +365,17 @@ export function clientRuntime(
       Navigator,
       Screen,
       prefetch,
-      // Each of its queries again: one that failed, for its screen to wait
+      // 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 loading = loadingPathOf(href);
+        const paths = [
+          href,
+          ...segmentsOf(href).flatMap((segment) =>
+            segment.layout === undefined ? [] : [segment.layout],
+          ),
+        ];
         await Promise.allSettled(
-          (loading === undefined ? [href] : [href, loading]).map((path) =>
+          paths.map((path) =>
             queryClient.getQueryState([path])?.status === "error"
               ? queryClient.resetQueries({ queryKey: [path], exact: true })
               : queryClient.refetchQueries({ queryKey: [path], exact: true }),