@real-router/vue 0.12.1 → 0.14.0

package/dist/esm/ssr.d.mts

@@ -0,0 +1,180 @@
+import { n as createHttpStatusSink, t as HttpStatusSink } from "./createHttpStatusSink-DduXvbGr.mjs";
+import { PropType } from "vue";
+
+//#region src/components/ClientOnly.d.ts
+declare const ClientOnly: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>[] | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type ClientOnlyProps = InstanceType<typeof ClientOnly>["$props"];
+//#endregion
+//#region src/components/ServerOnly.d.ts
+declare const ServerOnly: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>[] | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type ServerOnlyProps = InstanceType<typeof ServerOnly>["$props"];
+//#endregion
+//#region src/components/Await.d.ts
+/**
+ * Reads `useDeferred(name)` and hands the resolved value to the `default`
+ * scoped slot via Vue's native `async setup()` Suspense pattern. Wrap in
+ * `<Streamed>` (or Vue's `<Suspense>`).
+ *
+ * ```vue-html
+ * <Streamed>
+ *   <Await name="reviews" v-slot="{ value }">
+ *     <ReviewList :items="value" />
+ *   </Await>
+ *   <template #fallback>
+ *     <Spinner />
+ *   </template>
+ * </Streamed>
+ * ```
+ *
+ * Or with the render function:
+ *
+ * ```ts
+ * h(Await, { name: "reviews" }, {
+ *   default: ({ value }: { value: Review[] }) => h(ReviewList, { items: value }),
+ * });
+ * ```
+ *
+ * Implementation: `async setup()` awaits the deferred promise. Vue's
+ * `<Suspense>` boundary catches the pending promise and shows the fallback
+ * until resolution. Rejection bubbles to the nearest `onErrorCaptured`
+ * handler.
+ */
+declare const Await: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** Deferred key declared in the loader's `defer({ deferred: { <name>: ... } })`. */name: {
+    type: StringConstructor;
+    required: true;
+  };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>[] | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** Deferred key declared in the loader's `defer({ deferred: { <name>: ... } })`. */name: {
+    type: StringConstructor;
+    required: true;
+  };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type AwaitProps = InstanceType<typeof Await>["$props"];
+//#endregion
+//#region src/components/Streamed.d.ts
+/**
+ * Cross-adapter alias for Vue's native `<Suspense>`. Symmetric naming with
+ * the React/Preact/Solid/Svelte/Angular `<Streamed>` components.
+ *
+ * Slots:
+ * - `default` — content (may contain `<Await>` or `async setup()` children).
+ * - `fallback` — shown while any descendant suspends.
+ *
+ * Vue's `<Suspense>` is **blocking** under SSR (no out-of-order placeholder
+ * resolution) — render of HTML after `<Streamed>` waits for every
+ * `async setup()` inside. This matches Vue 3's stable streaming behaviour
+ * (vs React 19 / Solid which support OOO resolution).
+ */
+declare const Streamed: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type StreamedProps = InstanceType<typeof Streamed>["$props"];
+//#endregion
+//#region src/components/HttpStatusCode.d.ts
+/**
+ * Render-time HTTP status declaration. Mount inside a route component (typical
+ * use case: a glob `*` route's NotFound page) when the status is decided by
+ * the rendered tree rather than a loader.
+ *
+ * Writes `code` to the nearest `<HttpStatusProvider>`'s sink during `setup()`
+ * and renders nothing. With no provider mounted (the standard client-side
+ * case) the component is a silent no-op — same component tree hydrates
+ * without touching the DOM or warning about mismatches.
+ *
+ * Loader-driven errors (`LoaderNotFound` → 404, `LoaderRedirect` → 30x) keep
+ * working as before; this component covers render-time decisions only.
+ *
+ * Last write wins when several `<HttpStatusCode />` instances mount in the
+ * same render pass — sink reflects the last component that ran.
+ *
+ * ```vue-html
+ * <HttpStatusProvider :sink="sink">
+ *   <RouterProvider :router="router">
+ *     <App />
+ *   </RouterProvider>
+ * </HttpStatusProvider>
+ *
+ * <!-- inside NotFound.vue -->
+ * <HttpStatusCode :code="404" />
+ * ```
+ *
+ * **`renderToWebStream` (streaming SSR):** Vue 3 `<Suspense>` is
+ * chunked-blocking — Vue waits for every `async setup()` inside a boundary
+ * before emitting the chunks past it. So in practice `<HttpStatusCode />`
+ * inside a `<Suspense>` boundary still writes to the sink before the
+ * response headers flush. Still, prefer mounting in the shell to avoid
+ * coupling the contract to that particular Vue 3 streaming behaviour. With
+ * `renderToString` there is no ordering concern at all.
+ *
+ * **Hydration symmetry:** `<HttpStatusProvider>` wraps a render slot, so
+ * Vue emits a fragment marker pair (`<!--[-->` / `<!--]-->`) around its
+ * children server-side. Mount the same `<HttpStatusProvider>` on the
+ * client (with a throwaway sink) to keep the marker count balanced — see
+ * the `ssr/` example's `entry-client.ts`. Otherwise hydration logs
+ * "Hydration completed but contains mismatches".
+ *
+ * **Valid `code` range:** Node's `res.end()` throws `Invalid status code`
+ * on `NaN`, `0`, negative values, or values `> 999` — this surfaces as a
+ * 5xx / dropped connection, not silent corruption. Pass a real HTTP status
+ * integer (commonly 4xx/5xx; 100-999 is what Node accepts).
+ */
+declare const HttpStatusCode: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  /** HTTP status to apply to the response. Common values: 404, 410, 451, 503. */code: {
+    type: NumberConstructor;
+    required: true;
+  };
+}>, () => null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  /** HTTP status to apply to the response. Common values: 404, 410, 451, 503. */code: {
+    type: NumberConstructor;
+    required: true;
+  };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type HttpStatusCodeProps = InstanceType<typeof HttpStatusCode>["$props"];
+//#endregion
+//#region src/components/HttpStatusProvider.d.ts
+declare const HttpStatusProvider: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  sink: {
+    type: PropType<HttpStatusSink>;
+    required: true;
+  };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>[] | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  sink: {
+    type: PropType<HttpStatusSink>;
+    required: true;
+  };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type HttpStatusProviderProps = InstanceType<typeof HttpStatusProvider>["$props"];
+//#endregion
+//#region src/composables/useDeferred.d.ts
+/**
+ * Read a deferred promise published by `defer({ deferred: { <key>: Promise } })`
+ * inside an SSR data loader. Returns the Promise for use inside `async setup()`
+ * (Vue's native Suspense pattern) or paired with `<Await name="key">`.
+ *
+ * ```ts
+ * // Vue async setup pattern
+ * export default defineComponent({
+ *   async setup() {
+ *     const reviews = await useDeferred<Review[]>("reviews");
+ *     return () => h("div", reviews.map(...));
+ *   },
+ * });
+ * ```
+ *
+ * Returns a forever-pending promise when the key is missing — surfaces
+ * loader/consumer key drift as a visible Suspense fallback rather than a
+ * silent runtime error.
+ */
+declare function useDeferred<T = unknown>(key: string): Promise<T>;
+//#endregion
+export { Await, type AwaitProps, ClientOnly, type ClientOnlyProps, HttpStatusCode, type HttpStatusCodeProps, HttpStatusProvider, type HttpStatusProviderProps, type HttpStatusSink, ServerOnly, type ServerOnlyProps, Streamed, type StreamedProps, createHttpStatusSink, useDeferred };
+//# sourceMappingURL=ssr.d.mts.map

package/dist/esm/ssr.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ssr.d.mts","names":[],"sources":["../../src/components/ClientOnly.ts","../../src/components/ServerOnly.ts","../../src/components/Await.ts","../../src/components/Streamed.ts","../../src/components/HttpStatusCode.ts","../../src/components/HttpStatusProvider.ts","../../src/composables/useDeferred.ts"],"mappings":";;;;cAEa,UAAA,gBAAU,eAAA,yBAAA,KAAA,eAAA,YAAA,gBAAA,eAAA;EAAA;+IAWrB,QAAA,OAAA,QAAA;KAEU,eAAA,GAAkB,YAAY,QAAQ,UAAA;;;cCbrC,UAAA,gBAAU,eAAA,yBAAA,KAAA,eAAA,YAAA,gBAAA,eAAA;EAAA;+IAWrB,QAAA,OAAA,QAAA;KAEU,eAAA,GAAkB,YAAY,QAAQ,UAAA;;;;;;;ADblD;;;;;;;;;;;;;;;;;AAaA;;;;AAA4D;;;;cEkB/C,KAAA,gBAAK,eAAA,eAAA,gBAAA;EDpBhB;;;;;;;;;;;;KCiCU,UAAA,GAAa,YAAY,QAAQ,KAAA;;;;;;;AF5C7C;;;;;;;;;cGaa,QAAA,gBAAQ,eAAA,yBAAA,KAAA,eAAA,YAAA,gBAAA,eAAA;EAAA;iIAanB,QAAA,OAAA,QAAA;KAEU,aAAA,GAAgB,YAAY,QAAQ,QAAA;;;;;;;AH5BhD;;;;;;;;;;;;;;;;;AAaA;;;;AAA4D;;;;ACb5D;;;;;;;;;;;;;;;;;AAaA;cGyCa,cAAA,gBAAc,eAAA,eAAA,gBAAA;;;;;0CAjDA,qBAAA,gBAAA,qBAAA,4BAAA,WAAA,EAAA,QAAA,eAAA,gBAAA;EF0Bd;;;;;KEwCD,mBAAA,GAAsB,YAAY,QAAQ,cAAA;;;cClEzC,kBAAA,gBAAkB,eAAA,eAAA,gBAAA;;UAGH,QAAA,CAAS,cAAA;;;;;;;UAAT,QAAA,CAAS,cAAA;;;;KASzB,uBAAA,GAA0B,YAAY,QACzC,kBAAA;;;;;;;ALlBT;;;;;;;;;;;;;;;iBM4BgB,WAAA,aAAA,CAAyB,GAAA,WAAc,OAAO,CAAC,CAAA"}

package/dist/esm/ssr.mjs

@@ -0,0 +1,2 @@
+import{n as e,t}from"./useRoute-2ocUdDHc.mjs";import{Suspense as n,defineComponent as r,h as i,inject as a,onMounted as o,provide as s,ref as c}from"vue";const l=r({name:`ClientOnly`,setup(e,{slots:t}){let n=c(!1);return o(()=>{n.value=!0}),()=>n.value?t.default?.():t.fallback?.()}}),u=r({name:`ServerOnly`,setup(e,{slots:t}){let n=c(!1);return o(()=>{n.value=!0}),()=>n.value?t.fallback?.():t.default?.()}}),d=new Promise(()=>{});function f(e){let{route:n}=t();return n.value.context.ssrDataDeferred?.[e]??d}const p=r({name:`Await`,props:{name:{type:String,required:!0}},async setup(e,{slots:t}){let n=await f(e.name);return()=>t.default?.({value:n})}}),m=r({name:`Streamed`,setup(e,{slots:t}){return()=>i(n,{},{default:()=>t.default?.(),fallback:()=>t.fallback?.()})}}),h=()=>null,g=r({name:`HttpStatusCode`,props:{code:{type:Number,required:!0}},setup(t){let n=a(e,null);return n&&(n.code=t.code),h}}),_=r({name:`HttpStatusProvider`,props:{sink:{type:Object,required:!0}},setup(t,{slots:n}){return s(e,t.sink),()=>n.default?.()}});function v(){return{code:void 0}}export{p as Await,l as ClientOnly,g as HttpStatusCode,_ as HttpStatusProvider,u as ServerOnly,m as Streamed,v as createHttpStatusSink,f as useDeferred};
+//# sourceMappingURL=ssr.mjs.map

package/dist/esm/ssr.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ssr.mjs","names":[],"sources":["../../src/components/ClientOnly.ts","../../src/components/ServerOnly.ts","../../src/composables/useDeferred.ts","../../src/components/Await.ts","../../src/components/Streamed.ts","../../src/components/HttpStatusCode.ts","../../src/components/HttpStatusProvider.ts","../../src/utils/createHttpStatusSink.ts"],"sourcesContent":["import { defineComponent, onMounted, ref } from \"vue\";\n\nexport const ClientOnly = defineComponent({\n  name: \"ClientOnly\",\n  setup(_, { slots }) {\n    const mounted = ref(false);\n\n    onMounted(() => {\n      mounted.value = true;\n    });\n\n    return () => (mounted.value ? slots.default?.() : slots.fallback?.());\n  },\n});\n\nexport type ClientOnlyProps = InstanceType<typeof ClientOnly>[\"$props\"];\n","import { defineComponent, onMounted, ref } from \"vue\";\n\nexport const ServerOnly = defineComponent({\n  name: \"ServerOnly\",\n  setup(_, { slots }) {\n    const mounted = ref(false);\n\n    onMounted(() => {\n      mounted.value = true;\n    });\n\n    return () => (mounted.value ? slots.fallback?.() : slots.default?.());\n  },\n});\n\nexport type ServerOnlyProps = InstanceType<typeof ServerOnly>[\"$props\"];\n","import { useRoute } from \"./useRoute\";\n\ninterface DeferredContext {\n  ssrDataDeferred?: Record<string, Promise<unknown>>;\n}\n\nconst NEVER_PROMISE = new Promise<never>(() => {\n  // Intentionally never resolves — surfaces a forever-pending Suspense boundary\n  // when a key is requested that the loader never declared.\n});\n\n/**\n * Read a deferred promise published by `defer({ deferred: { <key>: Promise } })`\n * inside an SSR data loader. Returns the Promise for use inside `async setup()`\n * (Vue's native Suspense pattern) or paired with `<Await name=\"key\">`.\n *\n * ```ts\n * // Vue async setup pattern\n * export default defineComponent({\n *   async setup() {\n *     const reviews = await useDeferred<Review[]>(\"reviews\");\n *     return () => h(\"div\", reviews.map(...));\n *   },\n * });\n * ```\n *\n * Returns a forever-pending promise when the key is missing — surfaces\n * loader/consumer key drift as a visible Suspense fallback rather than a\n * silent runtime error.\n */\nexport function useDeferred<T = unknown>(key: string): Promise<T> {\n  const { route } = useRoute();\n  const context = route.value.context as DeferredContext;\n  const deferred = context.ssrDataDeferred;\n\n  return (deferred?.[key] ?? NEVER_PROMISE) as Promise<T>;\n}\n","import { defineComponent } from \"vue\";\n\nimport { useDeferred } from \"../composables/useDeferred\";\n\n/**\n * Reads `useDeferred(name)` and hands the resolved value to the `default`\n * scoped slot via Vue's native `async setup()` Suspense pattern. Wrap in\n * `<Streamed>` (or Vue's `<Suspense>`).\n *\n * ```vue-html\n * <Streamed>\n *   <Await name=\"reviews\" v-slot=\"{ value }\">\n *     <ReviewList :items=\"value\" />\n *   </Await>\n *   <template #fallback>\n *     <Spinner />\n *   </template>\n * </Streamed>\n * ```\n *\n * Or with the render function:\n *\n * ```ts\n * h(Await, { name: \"reviews\" }, {\n *   default: ({ value }: { value: Review[] }) => h(ReviewList, { items: value }),\n * });\n * ```\n *\n * Implementation: `async setup()` awaits the deferred promise. Vue's\n * `<Suspense>` boundary catches the pending promise and shows the fallback\n * until resolution. Rejection bubbles to the nearest `onErrorCaptured`\n * handler.\n */\nexport const Await = defineComponent({\n  name: \"Await\",\n  props: {\n    /** Deferred key declared in the loader's `defer({ deferred: { <name>: ... } })`. */\n    name: { type: String, required: true },\n  },\n  async setup(props, { slots }) {\n    const value = await useDeferred(props.name);\n\n    return () => slots.default?.({ value });\n  },\n});\n\nexport type AwaitProps = InstanceType<typeof Await>[\"$props\"];\n","import { defineComponent, h, Suspense } from \"vue\";\n\n/**\n * Cross-adapter alias for Vue's native `<Suspense>`. Symmetric naming with\n * the React/Preact/Solid/Svelte/Angular `<Streamed>` components.\n *\n * Slots:\n * - `default` — content (may contain `<Await>` or `async setup()` children).\n * - `fallback` — shown while any descendant suspends.\n *\n * Vue's `<Suspense>` is **blocking** under SSR (no out-of-order placeholder\n * resolution) — render of HTML after `<Streamed>` waits for every\n * `async setup()` inside. This matches Vue 3's stable streaming behaviour\n * (vs React 19 / Solid which support OOO resolution).\n */\nexport const Streamed = defineComponent({\n  name: \"Streamed\",\n  setup(_, { slots }) {\n    return () =>\n      h(\n        Suspense,\n        {},\n        {\n          default: () => slots.default?.(),\n          fallback: () => slots.fallback?.(),\n        },\n      );\n  },\n});\n\nexport type StreamedProps = InstanceType<typeof Streamed>[\"$props\"];\n","import { defineComponent, inject } from \"vue\";\n\nimport { HTTP_STATUS_KEY } from \"../context\";\n\n// Module-scope render function — returns null since the component emits no DOM.\n// Hoisted to satisfy `unicorn/consistent-function-scoping` and to avoid\n// re-creating the closure on every component instantiation.\nconst renderNull = (): null => null;\n\n/**\n * Render-time HTTP status declaration. Mount inside a route component (typical\n * use case: a glob `*` route's NotFound page) when the status is decided by\n * the rendered tree rather than a loader.\n *\n * Writes `code` to the nearest `<HttpStatusProvider>`'s sink during `setup()`\n * and renders nothing. With no provider mounted (the standard client-side\n * case) the component is a silent no-op — same component tree hydrates\n * without touching the DOM or warning about mismatches.\n *\n * Loader-driven errors (`LoaderNotFound` → 404, `LoaderRedirect` → 30x) keep\n * working as before; this component covers render-time decisions only.\n *\n * Last write wins when several `<HttpStatusCode />` instances mount in the\n * same render pass — sink reflects the last component that ran.\n *\n * ```vue-html\n * <HttpStatusProvider :sink=\"sink\">\n *   <RouterProvider :router=\"router\">\n *     <App />\n *   </RouterProvider>\n * </HttpStatusProvider>\n *\n * <!-- inside NotFound.vue -->\n * <HttpStatusCode :code=\"404\" />\n * ```\n *\n * **`renderToWebStream` (streaming SSR):** Vue 3 `<Suspense>` is\n * chunked-blocking — Vue waits for every `async setup()` inside a boundary\n * before emitting the chunks past it. So in practice `<HttpStatusCode />`\n * inside a `<Suspense>` boundary still writes to the sink before the\n * response headers flush. Still, prefer mounting in the shell to avoid\n * coupling the contract to that particular Vue 3 streaming behaviour. With\n * `renderToString` there is no ordering concern at all.\n *\n * **Hydration symmetry:** `<HttpStatusProvider>` wraps a render slot, so\n * Vue emits a fragment marker pair (`<!--[-->` / `<!--]-->`) around its\n * children server-side. Mount the same `<HttpStatusProvider>` on the\n * client (with a throwaway sink) to keep the marker count balanced — see\n * the `ssr/` example's `entry-client.ts`. Otherwise hydration logs\n * \"Hydration completed but contains mismatches\".\n *\n * **Valid `code` range:** Node's `res.end()` throws `Invalid status code`\n * on `NaN`, `0`, negative values, or values `> 999` — this surfaces as a\n * 5xx / dropped connection, not silent corruption. Pass a real HTTP status\n * integer (commonly 4xx/5xx; 100-999 is what Node accepts).\n */\nexport const HttpStatusCode = defineComponent({\n  name: \"HttpStatusCode\",\n  props: {\n    /** HTTP status to apply to the response. Common values: 404, 410, 451, 503. */\n    code: { type: Number, required: true },\n  },\n  setup(props) {\n    const sink = inject(HTTP_STATUS_KEY, null);\n\n    if (sink) {\n      sink.code = props.code;\n    }\n\n    return renderNull;\n  },\n});\n\nexport type HttpStatusCodeProps = InstanceType<typeof HttpStatusCode>[\"$props\"];\n","import { defineComponent, provide } from \"vue\";\n\nimport { HTTP_STATUS_KEY } from \"../context\";\n\nimport type { HttpStatusSink } from \"../utils/createHttpStatusSink\";\nimport type { PropType } from \"vue\";\n\nexport const HttpStatusProvider = defineComponent({\n  name: \"HttpStatusProvider\",\n  props: {\n    sink: { type: Object as PropType<HttpStatusSink>, required: true },\n  },\n  setup(props, { slots }) {\n    provide(HTTP_STATUS_KEY, props.sink);\n\n    return () => slots.default?.();\n  },\n});\n\nexport type HttpStatusProviderProps = InstanceType<\n  typeof HttpStatusProvider\n>[\"$props\"];\n","/**\n * Render-scoped HTTP status sink. Created per request on the server, passed to\n * `<HttpStatusProvider :sink=\"...\">`, and read after `renderToString` /\n * `renderToWebStream` to apply the value to the HTTP response.\n *\n * Last write wins: if the rendered tree mounts more than one\n * `<HttpStatusCode />`, the value reflects the last component that ran during\n * the render pass.\n *\n * No-op on the client — `<HttpStatusCode />` reads the optional injected sink\n * and skips the write when no provider is mounted, so the same component tree\n * can be hydrated without changing behaviour.\n *\n * Constraints:\n * - **Per-request only.** Don't share a sink across requests; the rendered\n *   tree mutates `code` in place. Module-level singletons leak status\n *   between concurrent requests.\n * - **Don't `Object.freeze` the sink.** The component writes to `.code`;\n *   freezing makes the assignment throw under ESM strict mode.\n * - **Hydration symmetry:** mount `<HttpStatusProvider>` on both server and\n *   client (with a throwaway client sink). Vue emits `<!--[-->` / `<!--]-->`\n *   fragment markers around the provider's slot; an extra provider on one\n *   side trips Vue with \"Hydration completed but contains mismatches\".\n */\nexport interface HttpStatusSink {\n  code: number | undefined;\n}\n\nexport function createHttpStatusSink(): HttpStatusSink {\n  return { code: undefined };\n}\n"],"mappings":"0JAEA,MAAa,EAAa,EAAgB,CACxC,KAAM,aACN,MAAM,EAAG,CAAE,SAAS,CAClB,IAAM,EAAU,EAAI,EAAK,EAMzB,OAJA,MAAgB,CACd,EAAQ,MAAQ,EAClB,CAAC,MAEa,EAAQ,MAAQ,EAAM,UAAU,EAAI,EAAM,WAAW,CACrE,CACF,CAAC,ECXY,EAAa,EAAgB,CACxC,KAAM,aACN,MAAM,EAAG,CAAE,SAAS,CAClB,IAAM,EAAU,EAAI,EAAK,EAMzB,OAJA,MAAgB,CACd,EAAQ,MAAQ,EAClB,CAAC,MAEa,EAAQ,MAAQ,EAAM,WAAW,EAAI,EAAM,UAAU,CACrE,CACF,CAAC,ECPK,EAAgB,IAAI,YAAqB,CAG/C,CAAC,EAqBD,SAAgB,EAAyB,EAAyB,CAChE,GAAM,CAAE,SAAU,EAAS,EAI3B,OAHgB,EAAM,MAAM,QACH,kBAEN,IAAQ,CAC7B,CCHA,MAAa,EAAQ,EAAgB,CACnC,KAAM,QACN,MAAO,CAEL,KAAM,CAAE,KAAM,OAAQ,SAAU,EAAK,CACvC,EACA,MAAM,MAAM,EAAO,CAAE,SAAS,CAC5B,IAAM,EAAQ,MAAM,EAAY,EAAM,IAAI,EAE1C,UAAa,EAAM,UAAU,CAAE,OAAM,CAAC,CACxC,CACF,CAAC,EC7BY,EAAW,EAAgB,CACtC,KAAM,WACN,MAAM,EAAG,CAAE,SAAS,CAClB,UACE,EACE,EACA,CAAC,EACD,CACE,YAAe,EAAM,UAAU,EAC/B,aAAgB,EAAM,WAAW,CACnC,CACF,CACJ,CACF,CAAC,ECrBK,MAAyB,KAiDlB,EAAiB,EAAgB,CAC5C,KAAM,iBACN,MAAO,CAEL,KAAM,CAAE,KAAM,OAAQ,SAAU,EAAK,CACvC,EACA,MAAM,EAAO,CACX,IAAM,EAAO,EAAO,EAAiB,IAAI,EAMzC,OAJI,IACF,EAAK,KAAO,EAAM,MAGb,CACT,CACF,CAAC,EChEY,EAAqB,EAAgB,CAChD,KAAM,qBACN,MAAO,CACL,KAAM,CAAE,KAAM,OAAoC,SAAU,EAAK,CACnE,EACA,MAAM,EAAO,CAAE,SAAS,CAGtB,OAFA,EAAQ,EAAiB,EAAM,IAAI,MAEtB,EAAM,UAAU,CAC/B,CACF,CAAC,ECWD,SAAgB,GAAuC,CACrD,MAAO,CAAE,KAAM,IAAA,EAAU,CAC3B"}

package/dist/esm/useRoute-2ocUdDHc.mjs

@@ -0,0 +1,2 @@
+import{inject as e}from"vue";const t=Symbol(`RouterKey`),n=Symbol(`NavigatorKey`),r=Symbol(`RouteKey`),i=Symbol(`HttpStatusSink`),a=()=>{let t=e(r);if(!t)throw Error(`useRoute must be used within a RouterProvider`);if(!t.route.value)throw Error(`useRoute called with no active route. Did you forget to await router.start() before rendering, or is the router stopped/disposed?`);return t};export{t as a,r as i,i as n,n as r,a as t};
+//# sourceMappingURL=useRoute-2ocUdDHc.mjs.map

package/dist/esm/useRoute-2ocUdDHc.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRoute-2ocUdDHc.mjs","names":[],"sources":["../../src/context.ts","../../src/composables/useRoute.ts"],"sourcesContent":["import type { RouteContext as RouteContextType } from \"./types\";\nimport type { HttpStatusSink } from \"./utils/createHttpStatusSink\";\nimport type { Router, Navigator } from \"@real-router/core\";\nimport type { InjectionKey } from \"vue\";\n\nexport const RouterKey: InjectionKey<Router> = Symbol(\"RouterKey\");\n\nexport const NavigatorKey: InjectionKey<Navigator> = Symbol(\"NavigatorKey\");\n\nexport const RouteKey: InjectionKey<RouteContextType> = Symbol(\"RouteKey\");\n\nexport const HTTP_STATUS_KEY: InjectionKey<HttpStatusSink> =\n  Symbol(\"HttpStatusSink\");\n","import { inject } from \"vue\";\n\nimport { RouteKey } from \"../context\";\n\nimport type { RouteContext } from \"../types\";\nimport type { Params, State } from \"@real-router/core\";\nimport type { Ref } from \"vue\";\n\n/**\n * Return shape for `useRoute()` — `RouteContext<P>` with `route` narrowed\n * to the non-nullable variant. The composable throws when `route.value`\n * would be `undefined`, so consumers can read `.value.params.x` without a\n * nullable guard. Extracted from inline duplication at two call sites.\n */\nexport type UseRouteReturn<P extends Params = Params> = Omit<\n  RouteContext<P>,\n  \"route\"\n> & { route: Readonly<Ref<State<P>>> };\n\nexport const useRoute = <P extends Params = Params>(): UseRouteReturn<P> => {\n  const routeContext = inject(RouteKey);\n\n  if (!routeContext) {\n    throw new Error(\"useRoute must be used within a RouterProvider\");\n  }\n\n  if (!routeContext.route.value) {\n    throw new Error(\n      \"useRoute called with no active route. Did you forget to await router.start() before rendering, or is the router stopped/disposed?\",\n    );\n  }\n\n  return routeContext as UseRouteReturn<P>;\n};\n"],"mappings":"6BAKA,MAAa,EAAkC,OAAO,WAAW,EAEpD,EAAwC,OAAO,cAAc,EAE7D,EAA2C,OAAO,UAAU,EAE5D,EACX,OAAO,gBAAgB,ECOZ,MAA+D,CAC1E,IAAM,EAAe,EAAO,CAAQ,EAEpC,GAAI,CAAC,EACH,MAAU,MAAM,+CAA+C,EAGjE,GAAI,CAAC,EAAa,MAAM,MACtB,MAAU,MACR,mIACF,EAGF,OAAO,CACT"}

package/package.json

@@ -1,11 +1,18 @@
 {
   "name": "@real-router/vue",
-  "version": "0.12.1",
+  "version": "0.14.0",
   "type": "commonjs",
   "description": "Vue 3 integration for Real-Router",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.mjs",
   "types": "./dist/esm/index.d.mts",
+  "typesVersions": {
+    "*": {
+      "ssr": [
+        "./dist/cjs/ssr.d.ts"
+      ]
+    }
+  },
   "exports": {
     ".": {
       "@real-router/internal-source": "./src/index.ts",
@@ -15,6 +22,15 @@
       },
       "import": "./dist/esm/index.mjs",
       "require": "./dist/cjs/index.js"
+    },
+    "./ssr": {
+      "@real-router/internal-source": "./src/ssr.ts",
+      "types": {
+        "import": "./dist/esm/ssr.d.mts",
+        "require": "./dist/cjs/ssr.d.ts"
+      },
+      "import": "./dist/esm/ssr.mjs",
+      "require": "./dist/cjs/ssr.js"
     }
   },
   "files": [
@@ -50,15 +66,15 @@
   "license": "MIT",
   "sideEffects": false,
   "dependencies": {
-    "@real-router/core": "^0.52.0",
     "@real-router/route-utils": "^0.2.2",
-    "@real-router/sources": "^0.8.1"
+    "@real-router/core": "^0.54.1",
+    "@real-router/sources": "^0.8.3"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "6.9.1",
     "@vue/test-utils": "2.4.6",
     "vue": "3.5.13",
-    "@real-router/browser-plugin": "^0.17.1"
+    "@real-router/browser-plugin": "^0.17.4"
   },
   "peerDependencies": {
     "vue": ">=3.3.0"

package/src/RouterProvider.ts

@@ -13,6 +13,41 @@ import type { ScrollRestorationOptions } from "./dom-utils";
 import type { Router } from "@real-router/core";
 import type { PropType } from "vue";
 
+interface Disposable {
+  destroy: () => void;
+}
+
+/**
+ * Watch a dependency tuple and (re)create a toggleable utility (announcer /
+ * scroll-restorer / view-transitions). The factory returns `undefined` to
+ * mean "feature disabled" — no utility is created and no cleanup is wired.
+ * When a utility IS returned, its `destroy()` is registered via `onCleanup`,
+ * so flipping any dep (incl. the feature flag) tears down the previous
+ * instance before constructing the next.
+ *
+ * Extracted from three near-identical `watch(... { immediate: true })` blocks
+ * (announceNavigation / scrollRestoration / viewTransitions) — DRY without
+ * losing the per-utility dep tuple shape.
+ */
+function watchToggleableUtility<D extends readonly unknown[]>(
+  deps: () => D,
+  factory: (current: D) => Disposable | undefined,
+): void {
+  watch(
+    deps,
+    (current, _prev, onCleanup) => {
+      const utility = factory(current);
+
+      if (utility) {
+        onCleanup(() => {
+          utility.destroy();
+        });
+      }
+    },
+    { immediate: true },
+  );
+}
+
 export const RouterProvider = defineComponent({
   name: "RouterProvider",
   props: {
@@ -33,30 +68,20 @@ export const RouterProvider = defineComponent({
     },
   },
   setup(props, { slots }) {
-    // Reactive announceNavigation: setting prop true/false at runtime now
+    // Reactive announceNavigation: setting prop true/false at runtime
     // creates/destroys the announcer accordingly. Prior implementation read
     // the prop only inside onMounted, so toggling it post-mount silently no-op'd.
-    watch(
+    watchToggleableUtility(
       () => [props.router, props.announceNavigation] as const,
-      ([router, enabled], _prev, onCleanup) => {
-        if (!enabled) {
-          return;
-        }
-
-        const announcer = createRouteAnnouncer(router);
-
-        onCleanup(() => {
-          announcer.destroy();
-        });
-      },
-      { immediate: true },
+      ([router, enabled]) =>
+        enabled ? createRouteAnnouncer(router) : undefined,
     );
 
     // Watch by primitives so inline `{ mode: "restore" }` doesn't thrash.
     // scrollContainer is a getter invoked lazily on every event inside the
     // utility — swapping its reference doesn't change the resolved element,
     // so we intentionally omit it from watched sources.
-    watch(
+    watchToggleableUtility(
       () =>
         [
           props.router,
@@ -66,45 +91,26 @@ export const RouterProvider = defineComponent({
           props.scrollRestoration?.behavior,
           props.scrollRestoration?.storageKey,
         ] as const,
-      (
-        [router, enabled, mode, anchorScrolling, behavior, storageKey],
-        _prev,
-        onCleanup,
-      ) => {
+      ([router, enabled, mode, anchorScrolling, behavior, storageKey]) => {
         if (!enabled) {
           return;
         }
 
-        const sr = createScrollRestoration(router, {
+        return createScrollRestoration(router, {
           mode,
           anchorScrolling,
           behavior,
           storageKey,
           scrollContainer: props.scrollRestoration?.scrollContainer,
         });
-
-        onCleanup(() => {
-          sr.destroy();
-        });
       },
-      { immediate: true },
     );
 
     // Reactive viewTransitions: toggling prop creates/destroys the utility.
-    watch(
+    watchToggleableUtility(
       () => [props.router, props.viewTransitions] as const,
-      ([router, enabled], _prev, onCleanup) => {
-        if (!enabled) {
-          return;
-        }
-
-        const vt = createViewTransitions(router);
-
-        onCleanup(() => {
-          vt.destroy();
-        });
-      },
-      { immediate: true },
+      ([router, enabled]) =>
+        enabled ? createViewTransitions(router) : undefined,
     );
 
     // Push this provider's router on the v-link directive stack so nested

package/src/components/Await.ts

@@ -0,0 +1,47 @@
+import { defineComponent } from "vue";
+
+import { useDeferred } from "../composables/useDeferred";
+
+/**
+ * Reads `useDeferred(name)` and hands the resolved value to the `default`
+ * scoped slot via Vue's native `async setup()` Suspense pattern. Wrap in
+ * `<Streamed>` (or Vue's `<Suspense>`).
+ *
+ * ```vue-html
+ * <Streamed>
+ *   <Await name="reviews" v-slot="{ value }">
+ *     <ReviewList :items="value" />
+ *   </Await>
+ *   <template #fallback>
+ *     <Spinner />
+ *   </template>
+ * </Streamed>
+ * ```
+ *
+ * Or with the render function:
+ *
+ * ```ts
+ * h(Await, { name: "reviews" }, {
+ *   default: ({ value }: { value: Review[] }) => h(ReviewList, { items: value }),
+ * });
+ * ```
+ *
+ * Implementation: `async setup()` awaits the deferred promise. Vue's
+ * `<Suspense>` boundary catches the pending promise and shows the fallback
+ * until resolution. Rejection bubbles to the nearest `onErrorCaptured`
+ * handler.
+ */
+export const Await = defineComponent({
+  name: "Await",
+  props: {
+    /** Deferred key declared in the loader's `defer({ deferred: { <name>: ... } })`. */
+    name: { type: String, required: true },
+  },
+  async setup(props, { slots }) {
+    const value = await useDeferred(props.name);
+
+    return () => slots.default?.({ value });
+  },
+});
+
+export type AwaitProps = InstanceType<typeof Await>["$props"];

package/src/components/ClientOnly.ts

@@ -0,0 +1,16 @@
+import { defineComponent, onMounted, ref } from "vue";
+
+export const ClientOnly = defineComponent({
+  name: "ClientOnly",
+  setup(_, { slots }) {
+    const mounted = ref(false);
+
+    onMounted(() => {
+      mounted.value = true;
+    });
+
+    return () => (mounted.value ? slots.default?.() : slots.fallback?.());
+  },
+});
+
+export type ClientOnlyProps = InstanceType<typeof ClientOnly>["$props"];

package/src/components/HttpStatusCode.ts

@@ -0,0 +1,74 @@
+import { defineComponent, inject } from "vue";
+
+import { HTTP_STATUS_KEY } from "../context";
+
+// Module-scope render function — returns null since the component emits no DOM.
+// Hoisted to satisfy `unicorn/consistent-function-scoping` and to avoid
+// re-creating the closure on every component instantiation.
+const renderNull = (): null => null;
+
+/**
+ * Render-time HTTP status declaration. Mount inside a route component (typical
+ * use case: a glob `*` route's NotFound page) when the status is decided by
+ * the rendered tree rather than a loader.
+ *
+ * Writes `code` to the nearest `<HttpStatusProvider>`'s sink during `setup()`
+ * and renders nothing. With no provider mounted (the standard client-side
+ * case) the component is a silent no-op — same component tree hydrates
+ * without touching the DOM or warning about mismatches.
+ *
+ * Loader-driven errors (`LoaderNotFound` → 404, `LoaderRedirect` → 30x) keep
+ * working as before; this component covers render-time decisions only.
+ *
+ * Last write wins when several `<HttpStatusCode />` instances mount in the
+ * same render pass — sink reflects the last component that ran.
+ *
+ * ```vue-html
+ * <HttpStatusProvider :sink="sink">
+ *   <RouterProvider :router="router">
+ *     <App />
+ *   </RouterProvider>
+ * </HttpStatusProvider>
+ *
+ * <!-- inside NotFound.vue -->
+ * <HttpStatusCode :code="404" />
+ * ```
+ *
+ * **`renderToWebStream` (streaming SSR):** Vue 3 `<Suspense>` is
+ * chunked-blocking — Vue waits for every `async setup()` inside a boundary
+ * before emitting the chunks past it. So in practice `<HttpStatusCode />`
+ * inside a `<Suspense>` boundary still writes to the sink before the
+ * response headers flush. Still, prefer mounting in the shell to avoid
+ * coupling the contract to that particular Vue 3 streaming behaviour. With
+ * `renderToString` there is no ordering concern at all.
+ *
+ * **Hydration symmetry:** `<HttpStatusProvider>` wraps a render slot, so
+ * Vue emits a fragment marker pair (`<!--[-->` / `<!--]-->`) around its
+ * children server-side. Mount the same `<HttpStatusProvider>` on the
+ * client (with a throwaway sink) to keep the marker count balanced — see
+ * the `ssr/` example's `entry-client.ts`. Otherwise hydration logs
+ * "Hydration completed but contains mismatches".
+ *
+ * **Valid `code` range:** Node's `res.end()` throws `Invalid status code`
+ * on `NaN`, `0`, negative values, or values `> 999` — this surfaces as a
+ * 5xx / dropped connection, not silent corruption. Pass a real HTTP status
+ * integer (commonly 4xx/5xx; 100-999 is what Node accepts).
+ */
+export const HttpStatusCode = defineComponent({
+  name: "HttpStatusCode",
+  props: {
+    /** HTTP status to apply to the response. Common values: 404, 410, 451, 503. */
+    code: { type: Number, required: true },
+  },
+  setup(props) {
+    const sink = inject(HTTP_STATUS_KEY, null);
+
+    if (sink) {
+      sink.code = props.code;
+    }
+
+    return renderNull;
+  },
+});
+
+export type HttpStatusCodeProps = InstanceType<typeof HttpStatusCode>["$props"];

package/src/components/HttpStatusProvider.ts

@@ -0,0 +1,22 @@
+import { defineComponent, provide } from "vue";
+
+import { HTTP_STATUS_KEY } from "../context";
+
+import type { HttpStatusSink } from "../utils/createHttpStatusSink";
+import type { PropType } from "vue";
+
+export const HttpStatusProvider = defineComponent({
+  name: "HttpStatusProvider",
+  props: {
+    sink: { type: Object as PropType<HttpStatusSink>, required: true },
+  },
+  setup(props, { slots }) {
+    provide(HTTP_STATUS_KEY, props.sink);
+
+    return () => slots.default?.();
+  },
+});
+
+export type HttpStatusProviderProps = InstanceType<
+  typeof HttpStatusProvider
+>["$props"];