@backtickjs/hono 0.3.0 → 0.3.2

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,21 +31,29 @@ 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), as Next.js's `kind: "auto"`; with `kind: "full"`, its page too,
+     * as `<Link prefetch>`. At most 4 run at a time, `urgent` ones (a pressed
+     * link) first. Returns a cancel, for a link that goes away before its
+     * turn.
      */
-    prefetch?(href: string): void;
+    prefetch?(href: string, options?: {
+        kind?: "auto" | "full";
+        urgent?: 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.
+ * app's not-found screen is one. A refusal ({ name, message }) says why.
  */
 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

@@ -3,42 +3,40 @@
 // `/.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 queryOptions = { "@backtickjs": "ClientImport", name: "queryOptions", 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 use = { "@backtickjs": "ClientImport", name: "use", from: "react", version: "19.3.0" };
 const useDeferredValue = { "@backtickjs": "ClientImport", name: "useDeferredValue", from: "react", version: "19.3.0" };
 const $module0 = {
-    id: "2hmayizp567y2:59: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\"]}",
+    id: "1nni9w5x4wwcx:65:27",
+    code: "(module, exports, require) => {\n\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.default = $splice0 => async (url, modules) => {\n    var aborter = new AbortController();\n    var timer = setTimeout(() => aborter.abort(), 15000);\n    var response = await fetch(url, {\n        headers: {\n            \"x-backtick-modules\": modules\n        },\n        signal: aborter.signal\n    }).finally(() => clearTimeout(timer));\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\":\";;;kBAgE8BA,QAAA,WAAOC,GAAW,EAAEC,OAAe;IAI/D,IAAMC,OAAO,GAAG,IAAIC,eAAe,EAAE;IACrC,IAAMC,KAAK,GAAGC,UAAU,CAAC,MAAMH,OAAO,CAACI,KAAK,EAAE,EAAE,KAAK,CAAC;IACtD,IAAMC,QAAQ,GAAG,MAAMC,KAAK,CAACR,GAAG,EAAE;QAChCS,OAAO,EAAE;YAAE,oBAAoB,EAAER;SAAS;QAC1CS,MAAM,EAAER,OAAO,CAACQ;KACjB,CAAC,CAACC,OAAO,CAAC,MAAMC,YAAY,CAACR,KAAK,CAAC,CAAC;IACrC,IAAMS,IAAI,GAAG,MAAMN,QAAQ,CAACO,IAAI,EAAE;IAClC,IACE,CAAC,CAACP,QAAQ,CAACE,OAAO,CAACM,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,GAAGd,QAAQ,CAACe,MAAM,GAAG,KAAK,GAAGL,MAAM,CACrE;IACH;IACA,OAAQ,MAAMlB,QAAA,EAAK,CAACc,IAAa,CAAC;AACpC,CAAC\",\"names\":[\"$splice0\",\"url\",\"modules\",\"aborter\",\"AbortController\",\"timer\",\"setTimeout\",\"abort\",\"response\",\"fetch\",\"headers\",\"signal\",\"finally\",\"clearTimeout\",\"body\",\"text\",\"get\",\"startsWith\",\"reason\",\"JSON\",\"parse\",\"message\",\"Error\",\"status\"],\"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: "1nni9w5x4wwcx:100: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) => {\n    var segmentStaleTime = 300000;\n    var navigationStartedAt = 0;\n    var fetchedAhead = new Map();\n    var shown = query => query.getObserversCount() > 0;\n    var segmentStale = query => shown(query) ? Infinity : segmentStaleTime;\n    var pageStale = query => {\n        var updatedAt = query.state.dataUpdatedAt;\n        if (shown(query) || updatedAt >= navigationStartedAt) {\n            return Infinity;\n        }\n        return fetchedAhead.get(query.queryKey[0]) === updatedAt ? segmentStaleTime : 0;\n    };\n    var fetchPath = path => () => $splice0()($splice1() + path, $splice2());\n    var queryClient = new ($splice3())({\n        defaultOptions: {\n            queries: {\n                structuralSharing: false,\n                retry: false\n            }\n        }\n    });\n    var pageQuery = href => $splice4()({\n        queryKey: [href],\n        queryFn: fetchPath(href),\n        staleTime: pageStale\n    });\n    var layoutQuery = path => $splice5()({\n        queryKey: [path],\n        queryFn: fetchPath(path),\n        staleTime: segmentStale\n    });\n    var loadingQuery = pattern => $splice6()({\n        queryKey: [pattern],\n        queryFn: fetchPath(pattern),\n        staleTime: segmentStale\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 Page = props => $splice11()(pageQuery(props.href), queryClient).data;\n    var Loading = props => $splice12()(loadingQuery(props.pattern), queryClient).data;\n    var Layout = props => {\n        var answer = $splice13()(layoutQuery(props.path), queryClient).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), queryClient);\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 maxPrefetches = 4;\n    var prefetching = 0;\n    var waiting = [];\n    var startWaiting = () => {\n        while (prefetching < maxPrefetches && waiting.length > 0) {\n            waiting.shift()();\n        }\n    };\n    var schedule = (task, urgent) => {\n        var start = () => {\n            prefetching += 1;\n            void task().catch(() => { }).finally(() => {\n                prefetching -= 1;\n                startWaiting();\n            });\n        };\n        if (urgent) {\n            start();\n            return () => { };\n        }\n        waiting.push(start);\n        startWaiting();\n        return () => {\n            var index = waiting.indexOf(start);\n            if (index !== -1) {\n                waiting.splice(index, 1);\n            }\n        };\n    };\n    var prefetch = (href, options = {}) => {\n        var full = options.kind === \"full\";\n        var shell = shellOf(href);\n        if (!full && !shell.loads) {\n            return () => { };\n        }\n        return schedule(async () => {\n            await Promise.all(shell.queries.map(query => queryClient.query(query)));\n            if (full) {\n                await queryClient.query(pageQuery(href));\n                fetchedAhead.set(href, queryClient.getQueryState([href])?.dataUpdatedAt ?? 0);\n            }\n        }, options.urgent ?? false);\n    };\n    var Screen = props => {\n        var href = $splice16()(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        }))($splice17()) : null;\n    };\n    var isIn = query => {\n        var cached = queryClient.getQueryCache().find({\n            queryKey: query.queryKey,\n            exact: true\n        });\n        return cached !== undefined && cached.state.data !== undefined && !cached.isStaleByTime(query.staleTime(cached));\n    };\n    var hold;\n    var NavigationHold = props => {\n        if (hold?.href !== props.href) {\n            navigationStartedAt = Date.now();\n            var page = queryClient.getQueryCache().find({\n                queryKey: [props.href],\n                exact: true\n            });\n            if (page !== undefined && page.state.data !== undefined && page.isStaleByTime(pageStale(page))) {\n                queryClient.removeQueries({\n                    queryKey: [props.href],\n                    exact: true\n                });\n            }\n            var queries = shellOf(props.href).queries;\n            hold = {\n                href: props.href,\n                ready: page !== undefined && shown(page) || queries.every(isIn) ? undefined : Promise.allSettled(queries.map(query => queryClient.query(query)))\n            };\n            void queryClient.query(pageQuery(props.href)).catch(() => { });\n        }\n        if (hold.ready !== undefined) {\n            $splice18()(hold.ready);\n        }\n        return null;\n    };\n    var RootLayout = () => {\n        var answer = $splice19()({\n            queryKey: [\"/_layout\"],\n            queryFn: fetchPath(\"/_layout\"),\n            staleTime: Infinity\n        }, queryClient).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 => (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {\n        children: [(0, jsx_runtime_1.jsx)(NavigationHold, {\n                href: props.href\n            }), (0, jsx_runtime_1.jsx)(RootLayout, {})]\n    });\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]), ...(segment.loading === undefined ? [] : [segment.loading])])];\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\",\"segmentStaleTime\",\"navigationStartedAt\",\"fetchedAhead\",\"Map\",\"shown\",\"query\",\"getObserversCount\",\"segmentStale\",\"Infinity\",\"pageStale\",\"updatedAt\",\"state\",\"dataUpdatedAt\",\"get\",\"queryKey\",\"fetchPath\",\"path\",\"queryClient\",\"defaultOptions\",\"queries\",\"structuralSharing\",\"retry\",\"pageQuery\",\"href\",\"queryFn\",\"staleTime\",\"layoutQuery\",\"loadingQuery\",\"pattern\",\"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\",\"Page\",\"props\",\"data\",\"Loading\",\"Layout\",\"answer\",\"Answer\",\"_jsx\",\"children\",\"Segments\",\"node\",\"_loop\",\"$Suspense\",\"fallback\",\"reverse\",\"maxPrefetches\",\"prefetching\",\"waiting\",\"startWaiting\",\"shift\",\"schedule\",\"task\",\"urgent\",\"start\",\"catch\",\"finally\",\"index\",\"splice\",\"prefetch\",\"options\",\"full\",\"kind\",\"shell\",\"Promise\",\"all\",\"set\",\"getQueryState\",\"Screen\",\"active\",\"isIn\",\"cached\",\"getQueryCache\",\"find\",\"exact\",\"isStaleByTime\",\"hold\",\"NavigationHold\",\"Date\",\"now\",\"page\",\"removeQueries\",\"ready\",\"every\",\"allSettled\",\"RootLayout\",\"Error\",\"Navigator\",\"_jsxs\",\"_Fragment\",\"runtime\",\"reload\",\"paths\",\"flatMap\",\"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: "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.
+ * app's not-found screen is one. A refusal ({ name, message }) says why.
  */
 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, [fetchAnswer, origin, modules, QueryClient, queryOptions, queryOptions, queryOptions, PatternRouter, routes, PatternRouter, routes, useSuspenseQuery, useSuspenseQuery, useSuspenseQuery, usePrefetchQuery, Suspense, useDeferredValue, Suspense, use, useSuspenseQuery]);
 }
 //# 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;;;;;;;;;;;;;;;;;;;;;;;;;AAyDzD;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,8BAuBtB,CAAC;AAEH;;;;GAIG;AACH,MAAM,UAAU,aAAa,CAC3B,MAAc,EACd,OAAe,EACf,MAAmE;IAEnE,qSA8UG;AACL,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backtickjs/hono",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "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.2",
+    "@backtickjs/core": "0.3.2"
   },
   "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.2",
+    "@backtickjs/jsx-react": "0.3.2",
+    "@backtickjs/prettier-plugin": "0.3.2",
+    "@backtickjs/tsc": "0.3.2",
+    "@backtickjs/tspatch-plugin": "0.3.2",
     "@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

@@ -4,19 +4,18 @@
 import { type Client, cs, exec } from "@backtickjs/core";
 import {
   QueryClient,
-  QueryClientProvider,
+  queryOptions,
   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,
+  use,
   useDeferredValue,
 } from "react" with { backtick: "client" };
 
@@ -28,14 +27,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,29 +45,33 @@ 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), as Next.js's `kind: "auto"`; with `kind: "full"`, its page too,
+   * as `<Link prefetch>`. At most 4 run at a time, `urgent` ones (a pressed
+   * link) first. Returns a cancel, for a link that goes away before its
+   * turn.
    */
-  prefetch?(href: string): void;
+  prefetch?(
+    href: string,
+    options?: { kind?: "auto" | "full"; urgent?: 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.
+ * app's not-found screen is one. A refusal ({ name, message }) says why.
  */
-export const fetchAnswer = cs`async (
-  url: string,
-  modules: string,
-  notFoundIsNull: boolean,
-) => {
+export const fetchAnswer = cs`async (url: string, modules: string) => {
+  // One that doesn't answer within 15 seconds fails, as a stalled
+  // connection would otherwise hold a navigation, or a prefetch's turn, for
+  // good.
+  const aborter = new AbortController();
+  const timer = setTimeout(() => aborter.abort(), 15000);
   const response = await fetch(url, {
     headers: { "x-backtick-modules": modules },
-  });
-  if (notFoundIsNull && response.status === 404) {
-    return null;
-  }
+    signal: aborter.signal,
+  }).finally(() => clearTimeout(timer));
   const body = await response.text();
   if (
     !(response.headers.get("content-type") ?? "").startsWith("text/javascript")
@@ -83,120 +88,224 @@ 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
-    // out of HTTP caches, not this one.
-    const pageStaleTime = 30000;
-    const loadingStaleTime = 300000;
+    // 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. What a screen shows
+    // never goes stale, so going back shows it as it was. A screen's no-store
+    // keeps it out of HTTP caches, not this one.
+    const segmentStaleTime = 300000;
+    // When the navigation under way started, and the answers <Link prefetch>
+    // fetched ahead (each href's, by when it came in).
+    let navigationStartedAt = 0;
+    const fetchedAhead = new Map<string, number>();
+    type Cached = {
+      queryKey: readonly unknown[];
+      state: { dataUpdatedAt: number };
+      getObserversCount(): number;
+    };
+    const shown = (query: Cached) => query.getObserversCount() > 0;
+    const segmentStale = (query: Cached) =>
+      shown(query) ? Infinity : segmentStaleTime;
+    const pageStale = (query: Cached) => {
+      const updatedAt = query.state.dataUpdatedAt;
+      if (shown(query) || updatedAt >= navigationStartedAt) {
+        return Infinity;
+      }
+      return fetchedAhead.get(query.queryKey[0] as string) === updatedAt
+        ? segmentStaleTime
+        : 0;
+    };
+    const fetchPath = (path: string) => () =>
+      $fetchAnswer($origin + path, $modules);
     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,
-        },
+        queries: { structuralSharing: false, retry: false },
       },
     });
-    // A loading state: none if it answers 404, for a param it has none for.
-    const loadingQueryOptions = (path: string) => ({
-      queryKey: [path],
-      staleTime: loadingStaleTime,
-      queryFn: async () => ({
-        value: (await $fetchAnswer(
-          $origin + path,
-          $modules,
-          true,
-        )) 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);
+    const pageQuery = (href: string) =>
+      $queryOptions({
+        queryKey: [href],
+        queryFn: fetchPath(href),
+        staleTime: pageStale,
+      });
+    // A layout answers a client component, given what's under it; or, for a
+    // path with none (its not-found screen), what the screen shows.
+    const layoutQuery = (path: string) =>
+      $queryOptions({
+        queryKey: [path],
+        queryFn: fetchPath(path),
+        staleTime: segmentStale,
+      });
+    // 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) =>
+      $queryOptions({
+        queryKey: [pattern],
+        queryFn: fetchPath(pattern),
+        staleTime: segmentStale,
+      });
+    type Query =
+      | ReturnType<typeof pageQuery>
+      | ReturnType<typeof layoutQuery>
+      | ReturnType<typeof loadingQuery>;
+
+    // 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],
+        };
+      });
     };
-    // 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
-        .getQueryCache()
-        .find({ queryKey: [path], exact: true });
-      if (
-        query !== undefined &&
-        query.getObserversCount() === 0 &&
-        query.state.data !== undefined &&
-        query.state.dataUpdatedAt < startedAt &&
-        query.isStaleByTime(pageStaleTime)
-      ) {
-        queryClient.removeQueries({ queryKey: [path], exact: true });
+    // 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 page or a loading state answers what it draws.
     const Page = (props: { href: string }) =>
-      $useSuspenseQuery({ queryKey: [props.href] }).data as ReactNode;
+      $useSuspenseQuery(pageQuery(props.href), queryClient).data as ReactNode;
+    const Loading = (props: { pattern: string }) =>
+      $useSuspenseQuery(loadingQuery(props.pattern), queryClient)
+        .data as ReactNode;
+    const Layout = (props: { path: string; children: ReactNode }) => {
+      const answer = $useSuspenseQuery(
+        layoutQuery(props.path),
+        queryClient,
+      ).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), queryClient);
+      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;
+    };
 
-    // 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>
-      );
+    // Prefetches run at most 4 at a time, as Next.js's: one whose link goes
+    // away before its turn is dropped, and an urgent one (a pressed link)
+    // starts at once, past the limit. query() fetches only what isn't in, or
+    // on its way, when a turn comes.
+    const maxPrefetches = 4;
+    let prefetching = 0;
+    const waiting: (() => void)[] = [];
+    const startWaiting = () => {
+      while (prefetching < maxPrefetches && waiting.length > 0) {
+        waiting.shift()!();
+      }
+    };
+    const schedule = (task: () => Promise<unknown>, urgent: boolean) => {
+      const start = () => {
+        prefetching += 1;
+        void task()
+          .catch(() => {})
+          .finally(() => {
+            prefetching -= 1;
+            startWaiting();
+          });
+      };
+      if (urgent) {
+        start();
+        return () => {};
+      }
+      waiting.push(start);
+      startWaiting();
+      return () => {
+        const index = waiting.indexOf(start);
+        if (index !== -1) {
+          waiting.splice(index, 1);
+        }
+      };
     };
 
-    // 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 ("auto"), and its page too
+    // ("full", <Link prefetch>), whose answer is then kept 5 minutes.
+    const prefetch = (
+      href: string,
+      options: { kind?: "auto" | "full"; urgent?: boolean } = {},
+    ) => {
+      const full = options.kind === "full";
+      const shell = shellOf(href);
+      if (!full && !shell.loads) {
+        return () => {};
       }
-      void queryClient
-        .query(loadingQueryOptions(loading))
-        .then((answer) =>
-          answer.value === null
-            ? queryClient.query({ queryKey: [href] })
-            : undefined,
-        )
-        .catch(() => {});
+      return schedule(async () => {
+        await Promise.all(
+          shell.queries.map((query) => queryClient.query(query)),
+        );
+        if (full) {
+          await queryClient.query(pageQuery(href));
+          fetchedAhead.set(
+            href,
+            queryClient.getQueryState([href])?.dataUpdatedAt ?? 0,
+          );
+        }
+      }, options.urgent ?? false);
     };
 
     // An href changed in place (router.setParams) shows once it's in: the
@@ -205,71 +314,115 @@ 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 });
-      return null;
+    // A query whose answer is in and fresh: nothing to wait for.
+    const isIn = (query: Query) => {
+      const cached = queryClient
+        .getQueryCache()
+        .find({ queryKey: query.queryKey, exact: true });
+      return (
+        cached !== undefined &&
+        cached.state.data !== undefined &&
+        !cached.isStaleByTime(
+          (query.staleTime as (cached: Cached) => number)(cached),
+        )
+      );
     };
-    // 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 };
+    // The navigation on top, and what it waits for, if anything: kept
+    // outside React, as a render that suspends keeps no state.
+    let hold: { href: string; ready?: Promise<unknown> } | undefined;
     // 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), fetching whatever of it isn't in, stale or
+    // failed; the page alongside. As navigations are transitions, the screen
+    // on top stays meanwhile. One that fails ends the hold too, for the
+    // screen to show why.
     const NavigationHold = (props: { href: string }) => {
-      if (currentNavigation.href !== props.href) {
-        currentNavigation = { href: props.href, startedAt: Date.now() };
+      if (hold?.href !== props.href) {
+        navigationStartedAt = Date.now();
+        // A page from before, which no screen shows, would show as it was:
+        // dropped, so the screen shows its loading state, then the page.
+        const page = queryClient
+          .getQueryCache()
+          .find({ queryKey: [props.href], exact: true });
+        if (
+          page !== undefined &&
+          page.state.data !== undefined &&
+          page.isStaleByTime(pageStale(page))
+        ) {
+          queryClient.removeQueries({ queryKey: [props.href], exact: true });
+        }
+        // Only a navigation with something to fetch suspends. Going back,
+        // to a page a screen still shows, renders at once, however old its
+        // shell: it's no transition, so a suspension would reach the app's
+        // own Suspense.
+        const queries = shellOf(props.href).queries;
+        hold = {
+          href: props.href,
+          ready:
+            (page !== undefined && shown(page)) || queries.every(isIn)
+              ? undefined
+              : Promise.allSettled(
+                  queries.map((query) => queryClient.query(query)),
+                ),
+        };
+        void queryClient.query(pageQuery(props.href)).catch(() => {});
       }
-      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)} />;
+      if (hold.ready !== undefined) {
+        $use(hold.ready);
       }
-      return <AwaitQuery query={{ queryKey: [props.href] }} />;
+      return null;
     };
-    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"],
+          queryFn: fetchPath("/_layout"),
+          staleTime: Infinity,
+        },
+        queryClient,
+      ).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 />;
+    };
 
+    // The runtime's hooks name its client, so an app's own React Query, with
+    // or without a provider, never shares the runtime's cache.
     const Navigator = (props: { href: string }) => (
-      <$QueryClientProvider client={queryClient}>
-        <SilentErrorBoundary key={props.href}>
-          <NavigationHold href={props.href} />
-        </SilentErrorBoundary>
-        <$RootLayout />
-      </$QueryClientProvider>
+      <>
+        <NavigationHold href={props.href} />
+        <RootLayout />
+      </>
     );
 
     const runtime: Runtime = {
       Navigator,
       Screen,
       prefetch,
-      // Each of its queries again: one that failed, for its screen to wait
-      // for it; the others kept until the new answer is in.
+      // Its page, layouts and loading states 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]),
+            ...(segment.loading === undefined ? [] : [segment.loading]),
+          ]),
+        ];
         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 }),