@real-router/vue 0.13.0 → 0.15.0

package/dist/esm/ssr.d.mts

@@ -1,17 +1,16 @@
 import { n as createHttpStatusSink, t as HttpStatusSink } from "./createHttpStatusSink-DduXvbGr.mjs";
-import * as _$vue from "vue";
 import { PropType } from "vue";
 
 //#region src/components/ClientOnly.d.ts
-declare const ClientOnly: _$vue.DefineComponent<{}, () => _$vue.VNode<_$vue.RendererNode, _$vue.RendererElement, {
+declare const ClientOnly: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
-}>[] | undefined, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, 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: _$vue.DefineComponent<{}, () => _$vue.VNode<_$vue.RendererNode, _$vue.RendererElement, {
+declare const ServerOnly: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
-}>[] | undefined, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, 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
@@ -44,19 +43,19 @@ type ServerOnlyProps = InstanceType<typeof ServerOnly>["$props"];
  * until resolution. Rejection bubbles to the nearest `onErrorCaptured`
  * handler.
  */
-declare const Await: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
+declare const Await: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
   /** Deferred key declared in the loader's `defer({ deferred: { <name>: ... } })`. */name: {
     type: StringConstructor;
     required: true;
   };
-}>, () => _$vue.VNode<_$vue.RendererNode, _$vue.RendererElement, {
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
-}>[] | undefined, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<_$vue.ExtractPropTypes<{
+}>[] | 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, _$vue.ComponentProvideOptions, true, {}, any>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 type AwaitProps = InstanceType<typeof Await>["$props"];
 //#endregion
 //#region src/components/Streamed.d.ts
@@ -73,9 +72,9 @@ type AwaitProps = InstanceType<typeof Await>["$props"];
  * `async setup()` inside. This matches Vue 3's stable streaming behaviour
  * (vs React 19 / Solid which support OOO resolution).
  */
-declare const Streamed: _$vue.DefineComponent<{}, () => _$vue.VNode<_$vue.RendererNode, _$vue.RendererElement, {
+declare const Streamed: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
-}>, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, 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
@@ -126,33 +125,33 @@ type StreamedProps = InstanceType<typeof Streamed>["$props"];
  * 5xx / dropped connection, not silent corruption. Pass a real HTTP status
  * integer (commonly 4xx/5xx; 100-999 is what Node accepts).
  */
-declare const HttpStatusCode: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
+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, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<_$vue.ExtractPropTypes<{
+}>, () => 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, _$vue.ComponentProvideOptions, true, {}, any>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 type HttpStatusCodeProps = InstanceType<typeof HttpStatusCode>["$props"];
 //#endregion
 //#region src/components/HttpStatusProvider.d.ts
-declare const HttpStatusProvider: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
+declare const HttpStatusProvider: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
   sink: {
     type: PropType<HttpStatusSink>;
     required: true;
   };
-}>, () => _$vue.VNode<_$vue.RendererNode, _$vue.RendererElement, {
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
-}>[] | undefined, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<_$vue.ExtractPropTypes<{
+}>[] | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
   sink: {
     type: PropType<HttpStatusSink>;
     required: true;
   };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 type HttpStatusProviderProps = InstanceType<typeof HttpStatusProvider>["$props"];
 //#endregion
 //#region src/composables/useDeferred.d.ts

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

@@ -1 +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,QAAU,eAAA,WAAA,KAAA,CAAA,KAAA,CAWrB,KAAA,CAXqB,YAAA,EAAA,KAAA,CAAA,eAAA;EAAA;8BAAA,KAAA,CAAA,qBAAA;KAaX,eAAA,GAAkB,YAAA,QAAoB,UAAA;;;cCbrC,UAAA,QAAU,eAAA,WAAA,KAAA,CAAA,KAAA,CAWrB,KAAA,CAXqB,YAAA,EAAA,KAAA,CAAA,eAAA;EAAA;8BAAA,KAAA,CAAA,qBAAA;KAaX,eAAA,GAAkB,YAAA,QAAoB,UAAA;;;;;;;;ADblD;;;;;;;;;;;;;;;;;;;;;;;;cE+Ba,KAAA,QAAK,eAAA,OAAA,gBAAA;;;;;sBAAA,KAAA,CAAA,YAAA;;;;;;;;KAaN,UAAA,GAAa,YAAA,QAAoB,KAAA;;;;;;;;AF5C7C;;;;;;;;cGaa,QAAA,QAAQ,eAAA,WAAA,KAAA,CAAA,KAAA,CAanB,KAAA,CAbmB,YAAA,EAAA,KAAA,CAAA,eAAA;EAAA;gBAAA,KAAA,CAAA,qBAAA;KAeT,aAAA,GAAgB,YAAA,QAAoB,QAAA;;;;;;;;AH5BhD;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA;;;;;;;;ACbA;;;;;;cGsDa,cAAA,QAAc,eAAA,OAAA,gBAAA;;;;;4BAAA,KAAA,CAjDA,qBAAA,EAAA,KAAA,CAAA,qBAAA,cAAA,KAAA,CAAA,WAAA,EAAA,QAAA,OAAA,gBAAA;EHLJ;;;;;KGuEX,mBAAA,GAAsB,YAAA,QAAoB,cAAA;;;cClEzC,kBAAA,QAAkB,eAAA,CAGK,KAAA,CAHL,gBAAA;;UAGH,QAAA,CAAS,cAAA;;;sBAHN,KAAA,CAAA,YAAA;;gIAGK,KAAA,CAAA,gBAAA;;UAAR,QAAA,CAAS,cAAA;;;;KASzB,uBAAA,GAA0B,YAAA,QAC7B,kBAAA;;;;;;;;ALlBT;;;;;;;;;;;;;;iBM4BgB,WAAA,aAAA,CAAyB,GAAA,WAAc,OAAA,CAAQ,CAAA"}
+{"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.map

@@ -1 +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,GAAM,CAM1B,OAJA,MAAgB,CACd,EAAQ,MAAQ,IAChB,KAEY,EAAQ,MAAQ,EAAM,WAAW,CAAG,EAAM,YAAY,EAEvE,CAAC,CCXW,EAAa,EAAgB,CACxC,KAAM,aACN,MAAM,EAAG,CAAE,SAAS,CAClB,IAAM,EAAU,EAAI,GAAM,CAM1B,OAJA,MAAgB,CACd,EAAQ,MAAQ,IAChB,KAEY,EAAQ,MAAQ,EAAM,YAAY,CAAG,EAAM,WAAW,EAEvE,CAAC,CCPI,EAAgB,IAAI,YAAqB,GAG7C,CAqBF,SAAgB,EAAyB,EAAyB,CAChE,GAAM,CAAE,SAAU,GAAU,CAI5B,OAHgB,EAAM,MAAM,QACH,kBAEN,IAAQ,ECF7B,MAAa,EAAQ,EAAgB,CACnC,KAAM,QACN,MAAO,CAEL,KAAM,CAAE,KAAM,OAAQ,SAAU,GAAM,CACvC,CACD,MAAM,MAAM,EAAO,CAAE,SAAS,CAC5B,IAAM,EAAQ,MAAM,EAAY,EAAM,KAAK,CAE3C,UAAa,EAAM,UAAU,CAAE,QAAO,CAAC,EAE1C,CAAC,CC7BW,EAAW,EAAgB,CACtC,KAAM,WACN,MAAM,EAAG,CAAE,SAAS,CAClB,UACE,EACE,EACA,EAAE,CACF,CACE,YAAe,EAAM,WAAW,CAChC,aAAgB,EAAM,YAAY,CACnC,CACF,EAEN,CAAC,CCrBI,MAAyB,KAiDlB,EAAiB,EAAgB,CAC5C,KAAM,iBACN,MAAO,CAEL,KAAM,CAAE,KAAM,OAAQ,SAAU,GAAM,CACvC,CACD,MAAM,EAAO,CACX,IAAM,EAAO,EAAO,EAAiB,KAAK,CAM1C,OAJI,IACF,EAAK,KAAO,EAAM,MAGb,GAEV,CAAC,CChEW,EAAqB,EAAgB,CAChD,KAAM,qBACN,MAAO,CACL,KAAM,CAAE,KAAM,OAAoC,SAAU,GAAM,CACnE,CACD,MAAM,EAAO,CAAE,SAAS,CAGtB,OAFA,EAAQ,EAAiB,EAAM,KAAK,KAEvB,EAAM,WAAW,EAEjC,CAAC,CCWF,SAAgB,GAAuC,CACrD,MAAO,CAAE,KAAM,IAAA,GAAW"}
+{"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.map

@@ -1 +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,YAAY,CAErD,EAAwC,OAAO,eAAe,CAE9D,EAA2C,OAAO,WAAW,CAE7D,EACX,OAAO,iBAAiB,CCOb,MAA+D,CAC1E,IAAM,EAAe,EAAO,EAAS,CAErC,GAAI,CAAC,EACH,MAAU,MAAM,gDAAgD,CAGlE,GAAI,CAAC,EAAa,MAAM,MACtB,MAAU,MACR,oIACD,CAGH,OAAO"}
+{"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,6 +1,6 @@
 {
   "name": "@real-router/vue",
-  "version": "0.13.0",
+  "version": "0.15.0",
   "type": "commonjs",
   "description": "Vue 3 integration for Real-Router",
   "main": "./dist/cjs/index.js",
@@ -66,15 +66,15 @@
   "license": "MIT",
   "sideEffects": false,
   "dependencies": {
+    "@real-router/core": "^0.54.6",
     "@real-router/route-utils": "^0.2.2",
-    "@real-router/sources": "^0.8.2",
-    "@real-router/core": "^0.53.0"
+    "@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.2"
+    "@real-router/browser-plugin": "^0.17.4"
   },
   "peerDependencies": {
     "vue": ">=3.3.0"

package/src/RouterProvider.ts

@@ -5,11 +5,12 @@ import { pushDirectiveRouter } from "./directives/vLink";
 import {
   createRouteAnnouncer,
   createScrollRestoration,
+  createScrollSpy,
   createViewTransitions,
 } from "./dom-utils";
 import { setupRouteProvision } from "./setupRouteProvision";
 
-import type { ScrollRestorationOptions } from "./dom-utils";
+import type { ScrollRestorationOptions, ScrollSpyOptions } from "./dom-utils";
 import type { Router } from "@real-router/core";
 import type { PropType } from "vue";
 
@@ -62,6 +63,9 @@ export const RouterProvider = defineComponent({
     scrollRestoration: {
       type: Object as PropType<ScrollRestorationOptions>,
     },
+    scrollSpy: {
+      type: Object as PropType<ScrollSpyOptions>,
+    },
     viewTransitions: {
       type: Boolean,
       default: false,
@@ -106,6 +110,29 @@ export const RouterProvider = defineComponent({
       },
     );
 
+    // Reactive scrollSpy: watch by primitives, omit scrollContainer getter
+    // identity for the same reason scrollRestoration does.
+    watchToggleableUtility(
+      () =>
+        [
+          props.router,
+          props.scrollSpy !== undefined && props.scrollSpy.selector !== "",
+          props.scrollSpy?.selector,
+          props.scrollSpy?.rootMargin,
+        ] as const,
+      ([router, enabled, selector, rootMargin]) => {
+        if (!enabled || !selector) {
+          return;
+        }
+
+        return createScrollSpy(router, {
+          selector,
+          rootMargin,
+          scrollContainer: props.scrollSpy?.scrollContainer,
+        });
+      },
+    );
+
     // Reactive viewTransitions: toggling prop creates/destroys the utility.
     watchToggleableUtility(
       () => [props.router, props.viewTransitions] as const,

package/src/components/Link.ts

@@ -206,7 +206,7 @@ export const Link = defineComponent({
       // Spread + delete avoids the per-key copy loop on every render — one
       // allocation + one property deletion instead of N iterations across
       // data-*, aria-*, role, etc. Hot-path optimisation for Link-heavy pages.
-      const restAttributes = { ...attrs } as Record<string, unknown>;
+      const restAttributes = { ...attrs };
 
       delete restAttributes.onClick;