@nifrajs/web-svelte 2.0.0 → 2.2.0

package/dist/Chain.svelte

@@ -4,10 +4,15 @@
   its `children` snippet ({@render children()} in the layout). Recurses on itself. This is the Svelte
   analogue of the React/Vue `compose` — Svelte components are compiled (not callable), so the fold is a
   component, not a function returning a node.
+
+  `layoutData` is the per-layout loader data, aligned with the chain's LEADING layout prefix. It is
+  sliced in lockstep with `chain` as each layout is consumed, so a layout always reads its own entry.
+  The `_error` boundary marker deliberately does NOT consume from it: the marker sits after every
+  layout, so the array is already empty by then, and leaving it alone keeps that true if it ever moves.
 -->
 <script>
   import Self from "./Chain.svelte"
-  let { chain, props } = $props()
+  let { chain, props, layoutData } = $props()
 </script>
 
 {#if chain.length <= 1}
@@ -20,16 +25,16 @@
        `failed` snippet renders the route's _error component with the serialized error. -->
   {@const Fallback = chain[0].__nifraErrorBoundary}
   <svelte:boundary>
-    <Self chain={chain.slice(1)} {props} />
+    <Self chain={chain.slice(1)} {props} {layoutData} />
     {#snippet failed(error)}
       <Fallback data={{ name: error?.name ?? "Error", message: String(error?.message ?? error) }} />
     {/snippet}
   </svelte:boundary>
 {:else}
   {@const Layout = chain[0]}
-  <Layout>
+  <Layout data={layoutData?.[0] ?? null}>
     {#snippet children()}
-      <Self chain={chain.slice(1)} {props} />
+      <Self chain={chain.slice(1)} {props} layoutData={layoutData?.slice(1)} />
     {/snippet}
   </Layout>
 {/if}

package/dist/client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAenE,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE1C,oGAAoG;AACpG,wBAAgB,OAAO,CAAC,KAAK,EAAE,SAAS,OAAO,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,GAAG,IAAI,CAE/F;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,kBAAkB,GAAG,IAAI,CAI7D"}
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAenE,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE1C,oGAAoG;AACpG,wBAAgB,OAAO,CAAC,KAAK,EAAE,SAAS,OAAO,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,GAAG,IAAI,CAK/F;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,kBAAkB,GAAG,IAAI,CAI7D"}

package/dist/client.js

@@ -14,7 +14,10 @@ import Router from "./Router.svelte";
 export { errorBoundary } from "./error.js";
 /** Hydrate a server-rendered Svelte layout `chain` (with the loader `props`) inside `container`. */
 export function hydrate(chain, props, container) {
-    svelteHydrate(Chain, { target: container, props: { chain, props } });
+    svelteHydrate(Chain, {
+        target: container,
+        props: { chain, props, layoutData: props.layoutData },
+    });
 }
 /**
  * Hydrate a stateful Svelte Router. The `Router` component holds the store snapshot in `$state` and

package/dist/client.js.map

@@ -1 +1 @@
-{"version":3,"file":"client.js","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AACA;;;;;;GAMG;AACH,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,QAAQ,CAAA;AACjD,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,MAAM,MAAM,iBAAiB,CAAA;AAEpC,qGAAqG;AACrG,gGAAgG;AAChG,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE1C,oGAAoG;AACpG,MAAM,UAAU,OAAO,CAAC,KAAyB,EAAE,KAAkB,EAAE,SAAkB;IACvF,aAAa,CAAC,KAAK,EAAE,EAAE,MAAM,EAAE,SAAoB,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAAA;AACjF,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CAAC,OAA2B;IACrD,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,OAAO,CAAA;IAC7C,gBAAgB,CAAC,MAAM,CAAC,CAAA,CAAC,+DAA+D;IACxF,aAAa,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,SAAoB,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,CAAC,CAAA;AACpF,CAAC"}
+{"version":3,"file":"client.js","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AACA;;;;;;GAMG;AACH,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,QAAQ,CAAA;AACjD,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,MAAM,MAAM,iBAAiB,CAAA;AAEpC,qGAAqG;AACrG,gGAAgG;AAChG,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE1C,oGAAoG;AACpG,MAAM,UAAU,OAAO,CAAC,KAAyB,EAAE,KAAkB,EAAE,SAAkB;IACvF,aAAa,CAAC,KAAK,EAAE;QACnB,MAAM,EAAE,SAAoB;QAC5B,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE;KACtD,CAAC,CAAA;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CAAC,OAA2B;IACrD,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,OAAO,CAAA;IAC7C,gBAAgB,CAAC,MAAM,CAAC,CAAA,CAAC,+DAA+D;IACxF,aAAa,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,SAAoB,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,CAAC,CAAA;AACpF,CAAC"}

package/dist/index.js

@@ -21,14 +21,14 @@ export const svelteAdapter = {
     // `renderToStream` wraps the same string in a one-chunk stream for the deferred path. No streaming
     // renderer to skip here — but going straight to a string avoids the per-request stream allocation.
     renderToString(chain, props) {
-        return render(Chain, { props: { chain, props } }).body;
+        return render(Chain, { props: { chain, props, layoutData: props.layoutData } }).body;
     },
     renderToStream(chain, props) {
         // `Chain` folds the layout chain (page innermost gets `props`; layouts wrap via their `children`
         // snippet). Svelte's `render` returns { head, body }; the body goes into #root. (Svelte's dynamic
         // `head` — from <svelte:head> — isn't surfaced through the seam's static `hydrationHead`; nifra's
         // own meta/head API manages the document head instead.)
-        const { body } = render(Chain, { props: { chain, props } });
+        const { body } = render(Chain, { props: { chain, props, layoutData: props.layoutData } });
         return oneChunk(body);
     },
     // Svelte's client `hydrate` reconciles against the existing DOM; no per-document bootstrap script is

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACtC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAElC,2FAA2F;AAC3F,qGAAqG;AACrG,2DAA2D;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAE7C,8FAA8F;AAC9F,SAAS,QAAQ,CAAC,IAAY;IAC5B,MAAM,KAAK,GAAG,IAAI,WAAW,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;IAC5C,OAAO,IAAI,cAAc,CAAC;QACxB,KAAK,CAAC,UAAU;YACd,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;YACzB,UAAU,CAAC,KAAK,EAAE,CAAA;QACpB,CAAC;KACF,CAAC,CAAA;AACJ,CAAC;AAED,8EAA8E;AAC9E,MAAM,CAAC,MAAM,aAAa,GAAkB;IAC1C,kGAAkG;IAClG,uFAAuF;IACvF,mGAAmG;IACnG,mGAAmG;IACnG,cAAc,CAAC,KAAK,EAAE,KAAK;QACzB,OAAO,MAAM,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,CAAA;IACxD,CAAC;IACD,cAAc,CAAC,KAAK,EAAE,KAAK;QACzB,iGAAiG;QACjG,kGAAkG;QAClG,kGAAkG;QAClG,wDAAwD;QACxD,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAAA;QAC3D,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAA;IACvB,CAAC;IACD,qGAAqG;IACrG,wFAAwF;IACxF,aAAa;QACX,OAAO,EAAE,CAAA;IACX,CAAC;CACF,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACtC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAElC,2FAA2F;AAC3F,qGAAqG;AACrG,2DAA2D;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAE7C,8FAA8F;AAC9F,SAAS,QAAQ,CAAC,IAAY;IAC5B,MAAM,KAAK,GAAG,IAAI,WAAW,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;IAC5C,OAAO,IAAI,cAAc,CAAC;QACxB,KAAK,CAAC,UAAU;YACd,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;YACzB,UAAU,CAAC,KAAK,EAAE,CAAA;QACpB,CAAC;KACF,CAAC,CAAA;AACJ,CAAC;AAED,8EAA8E;AAC9E,MAAM,CAAC,MAAM,aAAa,GAAkB;IAC1C,kGAAkG;IAClG,uFAAuF;IACvF,mGAAmG;IACnG,mGAAmG;IACnG,cAAc,CAAC,KAAK,EAAE,KAAK;QACzB,OAAO,MAAM,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,IAAI,CAAA;IACtF,CAAC;IACD,cAAc,CAAC,KAAK,EAAE,KAAK;QACzB,iGAAiG;QACjG,kGAAkG;QAClG,kGAAkG;QAClG,wDAAwD;QACxD,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,EAAE,CAAC,CAAA;QACzF,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAA;IACvB,CAAC;IACD,qGAAqG;IACrG,wFAAwF;IACxF,aAAa;QACX,OAAO,EAAE,CAAA;IACX,CAAC;CACF,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nifrajs/web-svelte",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "description": "Svelte 5 render adapter for @nifrajs/web — SSR + hydration + the .svelte compiler Bun-plugin.",
   "keywords": [
     "bun",
@@ -88,9 +88,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@nifrajs/i18n": "2.0.0",
-    "@nifrajs/image": "2.0.0",
-    "@nifrajs/web": "2.0.0"
+    "@nifrajs/i18n": "2.2.0",
+    "@nifrajs/image": "2.2.0",
+    "@nifrajs/web": "2.2.0"
   },
   "peerDependencies": {
     "mdsvex": "^0.12",

package/src/Chain.svelte

@@ -4,10 +4,15 @@
   its `children` snippet ({@render children()} in the layout). Recurses on itself. This is the Svelte
   analogue of the React/Vue `compose` — Svelte components are compiled (not callable), so the fold is a
   component, not a function returning a node.
+
+  `layoutData` is the per-layout loader data, aligned with the chain's LEADING layout prefix. It is
+  sliced in lockstep with `chain` as each layout is consumed, so a layout always reads its own entry.
+  The `_error` boundary marker deliberately does NOT consume from it: the marker sits after every
+  layout, so the array is already empty by then, and leaving it alone keeps that true if it ever moves.
 -->
 <script>
   import Self from "./Chain.svelte"
-  let { chain, props } = $props()
+  let { chain, props, layoutData } = $props()
 </script>
 
 {#if chain.length <= 1}
@@ -20,16 +25,16 @@
        `failed` snippet renders the route's _error component with the serialized error. -->
   {@const Fallback = chain[0].__nifraErrorBoundary}
   <svelte:boundary>
-    <Self chain={chain.slice(1)} {props} />
+    <Self chain={chain.slice(1)} {props} {layoutData} />
     {#snippet failed(error)}
       <Fallback data={{ name: error?.name ?? "Error", message: String(error?.message ?? error) }} />
     {/snippet}
   </svelte:boundary>
 {:else}
   {@const Layout = chain[0]}
-  <Layout>
+  <Layout data={layoutData?.[0] ?? null}>
     {#snippet children()}
-      <Self chain={chain.slice(1)} {props} />
+      <Self chain={chain.slice(1)} {props} layoutData={layoutData?.slice(1)} />
     {/snippet}
   </Layout>
 {/if}

package/src/client.ts

@@ -17,7 +17,10 @@ export { errorBoundary } from "./error.ts"
 
 /** Hydrate a server-rendered Svelte layout `chain` (with the loader `props`) inside `container`. */
 export function hydrate(chain: readonly unknown[], props: RenderProps, container: unknown): void {
-  svelteHydrate(Chain, { target: container as Element, props: { chain, props } })
+  svelteHydrate(Chain, {
+    target: container as Element,
+    props: { chain, props, layoutData: props.layoutData },
+  })
 }
 
 /**

package/src/index.ts

@@ -33,14 +33,14 @@ export const svelteAdapter: RenderAdapter = {
   // `renderToStream` wraps the same string in a one-chunk stream for the deferred path. No streaming
   // renderer to skip here — but going straight to a string avoids the per-request stream allocation.
   renderToString(chain, props) {
-    return render(Chain, { props: { chain, props } }).body
+    return render(Chain, { props: { chain, props, layoutData: props.layoutData } }).body
   },
   renderToStream(chain, props) {
     // `Chain` folds the layout chain (page innermost gets `props`; layouts wrap via their `children`
     // snippet). Svelte's `render` returns { head, body }; the body goes into #root. (Svelte's dynamic
     // `head` — from <svelte:head> — isn't surfaced through the seam's static `hydrationHead`; nifra's
     // own meta/head API manages the document head instead.)
-    const { body } = render(Chain, { props: { chain, props } })
+    const { body } = render(Chain, { props: { chain, props, layoutData: props.layoutData } })
     return oneChunk(body)
   },
   // Svelte's client `hydrate` reconciles against the existing DOM; no per-document bootstrap script is