@json-render/svelte 0.19.0 → 0.20.0

package/README.md

@@ -148,6 +148,8 @@ const chat = createChatUI({ endpoint: "/api/chat" });
 
 ## Documentation
 
+Nested lists can set `repeat.statePath` to `{ "$item": "field" }` to iterate an array on the enclosing repeat item.
+
 Full API reference: [json-render.dev/docs/api/svelte](https://json-render.dev/docs/api/svelte).
 
 ## License

package/dist/RepeatChildren.svelte

@@ -1,9 +1,15 @@
 <script lang="ts">
   import type { Spec, UIElement } from "@json-render/core";
-  import { getByPath } from "@json-render/core";
+  import {
+    getByPath,
+    resolveRepeatItemStatePath,
+    resolveRepeatStatePath,
+  } from "@json-render/core";
   import type { ComponentRegistry, ComponentRenderer } from "./renderer.js";
   import { getStateContext } from "./contexts/StateProvider.svelte";
-  import RepeatScopeProvider from "./contexts/RepeatScopeProvider.svelte";
+  import RepeatScopeProvider, {
+    getRepeatScope,
+  } from "./contexts/RepeatScopeProvider.svelte";
   import ElementRenderer from "./ElementRenderer.svelte";
 
   interface Props {
@@ -17,17 +23,30 @@
   let { element, spec, registry, loading = false, fallback }: Props = $props();
 
   const stateCtx = getStateContext();
+  const parentScope = getRepeatScope();
+
+  let statePath = $derived.by(() => {
+    const resolved = resolveRepeatStatePath(
+      element.repeat!.statePath,
+      parentScope?.basePath,
+    );
+    if (resolved === undefined) {
+      console.warn(
+        "[json-render/svelte] $item in repeat.statePath used outside of a repeat scope",
+      );
+    }
+    return resolved;
+  });
 
-  // Get items from state
   let items = $derived(
-    (getByPath(stateCtx.state, element.repeat!.statePath) as
-      | unknown[]
-      | undefined) ?? [],
+    statePath === undefined
+      ? []
+      : ((getByPath(stateCtx.state, statePath) as unknown[] | undefined) ?? []),
   );
 </script>
 
 {#each items as itemValue, index (element.repeat?.key && typeof itemValue === "object" && itemValue !== null ? String((itemValue as any)[element.repeat.key] ?? index) : String(index))}
-  {@const basePath = `${element.repeat!.statePath}/${index}`}
+  {@const basePath = resolveRepeatItemStatePath(statePath!, index)}
 
   {#if element.children}
     <RepeatScopeProvider item={itemValue} {index} {basePath}>

package/dist/RepeatChildren.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RepeatChildren.svelte.d.ts","sourceRoot":"","sources":["../src/RepeatChildren.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAMxE,UAAU,KAAK;IACb,OAAO,EAAE,SAAS,CAAC;IACnB,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AA0CH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"RepeatChildren.svelte.d.ts","sourceRoot":"","sources":["../src/RepeatChildren.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAMzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAQxE,UAAU,KAAK;IACb,OAAO,EAAE,SAAS,CAAC;IACnB,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAuDH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/contexts/ActionProvider.svelte

@@ -304,9 +304,8 @@
             handler,
             setState: stateCtx.set,
             navigate,
-            executeAction: async (name) => {
-              const subBinding: CoreActionBinding = { action: name };
-              await execute(subBinding);
+            executeAction: async (binding) => {
+              await execute(binding);
             },
           });
         } finally {
@@ -322,9 +321,8 @@
         handler,
         setState: stateCtx.set,
         navigate,
-        executeAction: async (name) => {
-          const subBinding: CoreActionBinding = { action: name };
-          await execute(subBinding);
+        executeAction: async (binding) => {
+          await execute(binding);
         },
       });
     } finally {

package/dist/contexts/ActionProvider.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionProvider.svelte.d.ts","sourceRoot":"","sources":["../../src/contexts/ActionProvider.svelte.ts"],"names":[],"mappings":"AAIE,OAAO,KAAK,EACV,aAAa,EACb,aAAa,EACb,aAAa,EACb,cAAc,EACf,MAAM,mBAAmB,CAAC;AAI3B;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,cAAc,CAAC;IACvB,OAAO,EAAE,aAAa,CAAC;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,iCAAiC;IACjC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IACxC,qCAAqC;IACrC,cAAc,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC5B,kCAAkC;IAClC,mBAAmB,EAAE,mBAAmB,GAAG,IAAI,CAAC;IAChD,gCAAgC;IAChC,OAAO,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACnD,iCAAiC;IACjC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gCAAgC;IAChC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,iCAAiC;IACjC,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;CACjE;AAED;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,aAAa,CAQhD;AAED;;GAEG;AACH,wBAAgB,SAAS,CACvB,IAAI,EAAE,MAAM,GACX,YAAY,CAAC,aAAa,GAAG,SAAS,CAAC,CAOzC;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,8BAA8B;IAC9B,OAAO,EAAE,aAAa,CAAC;IACvB,4BAA4B;IAC5B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,4BAA4B;IAC5B,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAuDH,OAAO,EAAc,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,EAOH,KAAK,aAAa,IAAI,iBAAiB,EACxC,MAAM,mBAAmB,CAAC;AAM3B,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;IAC7C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAuOH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ActionProvider.svelte.d.ts","sourceRoot":"","sources":["../../src/contexts/ActionProvider.svelte.ts"],"names":[],"mappings":"AAIE,OAAO,KAAK,EACV,aAAa,EACb,aAAa,EACb,aAAa,EACb,cAAc,EACf,MAAM,mBAAmB,CAAC;AAI3B;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,cAAc,CAAC;IACvB,OAAO,EAAE,aAAa,CAAC;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,iCAAiC;IACjC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IACxC,qCAAqC;IACrC,cAAc,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC5B,kCAAkC;IAClC,mBAAmB,EAAE,mBAAmB,GAAG,IAAI,CAAC;IAChD,gCAAgC;IAChC,OAAO,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACnD,iCAAiC;IACjC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gCAAgC;IAChC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,iCAAiC;IACjC,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;CACjE;AAED;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,aAAa,CAQhD;AAED;;GAEG;AACH,wBAAgB,SAAS,CACvB,IAAI,EAAE,MAAM,GACX,YAAY,CAAC,aAAa,GAAG,SAAS,CAAC,CAOzC;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,8BAA8B;IAC9B,OAAO,EAAE,aAAa,CAAC;IACvB,4BAA4B;IAC5B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,4BAA4B;IAC5B,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAuDH,OAAO,EAAc,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,EAOH,KAAK,aAAa,IAAI,iBAAiB,EACxC,MAAM,mBAAmB,CAAC;AAM3B,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;IAC7C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAqOH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/contexts/actions.test.js

@@ -101,6 +101,38 @@ describe("createActionContext", () => {
             expect(customHandler).toHaveBeenCalledWith({ foo: "bar" });
         }, { handlers: { myAction: customHandler } });
     })());
+    it("forwards params to a named onSuccess action (#301)", (() => {
+        const toast = vi.fn().mockResolvedValue(undefined);
+        return component(async () => {
+            const actionCtx = getActionContext();
+            await actionCtx.execute({
+                action: "save",
+                onSuccess: { action: "toast", params: { message: "Saved" } },
+            });
+            expect(toast).toHaveBeenCalledWith({ message: "Saved" });
+        }, {
+            handlers: {
+                save: vi.fn().mockResolvedValue(undefined),
+                toast,
+            },
+        });
+    })());
+    it("forwards params to a named onError action (#301)", (() => {
+        const toast = vi.fn().mockResolvedValue(undefined);
+        return component(async () => {
+            const actionCtx = getActionContext();
+            await actionCtx.execute({
+                action: "save",
+                onError: { action: "toast", params: { message: "Failed" } },
+            });
+            expect(toast).toHaveBeenCalledWith({ message: "Failed" });
+        }, {
+            handlers: {
+                save: vi.fn().mockRejectedValue(new Error("boom")),
+                toast,
+            },
+        });
+    })());
     it("warns when no handler registered", component(async () => {
         const actionCtx = getActionContext();
         const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => { });

package/dist/renderer.test.js

@@ -165,4 +165,36 @@ describe("Renderer", () => {
         expect(texts).toHaveLength(1);
         expect(texts[0]?.textContent).toBe("I exist");
     });
+    it("renders nested repeats from the enclosing item", () => {
+        const spec = {
+            root: "groups",
+            state: {
+                groups: [
+                    { subitems: [{ label: "a1" }, { label: "a2" }] },
+                    { subitems: [{ label: "b1" }] },
+                ],
+            },
+            elements: {
+                groups: {
+                    type: "Container",
+                    props: {},
+                    repeat: { statePath: "/groups" },
+                    children: ["subitems"],
+                },
+                subitems: {
+                    type: "Container",
+                    props: {},
+                    repeat: { statePath: { $item: "/subitems" } },
+                    children: ["label"],
+                },
+                label: {
+                    type: "Text",
+                    props: { text: { $item: "label" } },
+                    children: [],
+                },
+            },
+        };
+        const { container } = mountRenderer(spec);
+        expect(Array.from(container.querySelectorAll(".test-text")).map((element) => element.textContent)).toEqual(["a1", "a2", "b1"]);
+    });
 });

package/dist/schema.d.ts

@@ -18,7 +18,17 @@ export declare const schema: import("@json-render/core").Schema<{
             /** Child element keys (flat reference) */
             children: import("@json-render/core").SchemaType<"array", import("@json-render/core").SchemaType<"string", unknown>>;
             /** Visibility condition */
-            visible: import("@json-render/core").SchemaType<"any", unknown>;
+            visible: {
+                optional: true;
+                kind: "any";
+                inner?: unknown;
+            };
+            /** Repeat children from a state array */
+            repeat: {
+                optional: true;
+                kind: "any";
+                inner?: unknown;
+            };
         }>>;
     }>;
     catalog: import("@json-render/core").SchemaType<"object", {

package/dist/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../src/schema.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;;QAIb,uBAAuB;;QAEvB,kCAAkC;;YAG9B,kCAAkC;;YAElC,sBAAsB;;YAEtB,0CAA0C;;YAE1C,2BAA2B;;;;;QAQ/B,4BAA4B;;YAE1B,qCAAqC;;YAErC,uGAAuG;;YAEvG,0CAA0C;;YAE1C,8FAA8F;;;QAGhG,oCAAoC;;YAElC,mCAAmC;;YAEnC,0CAA0C;;;;EA+CjD,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,OAAO,MAAM,CAAC;AAEzC;;GAEG;AACH,MAAM,MAAM,UAAU,CAAC,QAAQ,IAAI,OAAO,MAAM,SAAS;IACvD,aAAa,EAAE,CAAC,OAAO,EAAE,QAAQ,KAAK;QAAE,SAAS,EAAE,MAAM,CAAC,CAAA;KAAE,CAAC;CAC9D,GACG,CAAC,GACD,KAAK,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../src/schema.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;;QAIb,uBAAuB;;QAEvB,kCAAkC;;YAG9B,kCAAkC;;YAElC,sBAAsB;;YAEtB,0CAA0C;;YAE1C,2BAA2B;;;;;;YAE3B,yCAAyC;;;;;;;;;QAQ7C,4BAA4B;;YAE1B,qCAAqC;;YAErC,uGAAuG;;YAEvG,0CAA0C;;YAE1C,8FAA8F;;;QAGhG,oCAAoC;;YAElC,mCAAmC;;YAEnC,0CAA0C;;;;EAgDjD,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,OAAO,MAAM,CAAC;AAEzC;;GAEG;AACH,MAAM,MAAM,UAAU,CAAC,QAAQ,IAAI,OAAO,MAAM,SAAS;IACvD,aAAa,EAAE,CAAC,OAAO,EAAE,QAAQ,KAAK;QAAE,SAAS,EAAE,MAAM,CAAC,CAAA;KAAE,CAAC;CAC9D,GACG,CAAC,GACD,KAAK,CAAC"}

package/dist/schema.js

@@ -20,7 +20,9 @@ export const schema = defineSchema((s) => ({
             /** Child element keys (flat reference) */
             children: s.array(s.string()),
             /** Visibility condition */
-            visible: s.any(),
+            visible: { ...s.any(), ...s.optional() },
+            /** Repeat children from a state array */
+            repeat: { ...s.any(), ...s.optional() },
         })),
     }),
     // What the CATALOG must provide
@@ -67,12 +69,13 @@ export const schema = defineSchema((s) => ({
         // Element integrity
         "CRITICAL INTEGRITY CHECK: Before outputting ANY element that references children, you MUST have already output (or will output) each child as its own element. If an element has children: ['a', 'b'], then elements 'a' and 'b' MUST exist. A missing child element causes that entire branch of the UI to be invisible.",
         "SELF-CHECK: After generating all elements, mentally walk the tree from root. Every key in every children array must resolve to a defined element. If you find a gap, output the missing element immediately.",
+        'REQUIRED FIELDS: Every element MUST include a "children" array. Leaf elements (text, badges, inputs, images) use an empty array: "children": []. Omitting "children" fails validation.',
         // Field placement
         'CRITICAL: The "visible" field goes on the ELEMENT object, NOT inside "props". Correct: {"type":"<ComponentName>","props":{},"visible":{"$state":"/tab","eq":"home"},"children":[...]}.',
         'CRITICAL: The "on" field goes on the ELEMENT object, NOT inside "props". Use on.press, on.change, on.submit etc. NEVER put action/actionParams inside props.',
         // State and data
         "When the user asks for a UI that displays data (e.g. blog posts, products, users), ALWAYS include a state field with realistic sample data. The state field is a top-level field on the spec (sibling of root/elements).",
-        'When building repeating content backed by a state array (e.g. posts, products, items), use the "repeat" field on a container element. Example: { "type": "<ContainerComponent>", "props": {}, "repeat": { "statePath": "/posts", "key": "id" }, "children": ["post-card"] }. Replace <ContainerComponent> with an appropriate component from the AVAILABLE COMPONENTS list. Inside repeated children, use { "$item": "field" } to read a field from the current item, and { "$index": true } for the current array index. For two-way binding to an item field use { "$bindItem": "completed" }. Do NOT hardcode individual elements for each array item.',
+        'When building repeating content backed by a state array (e.g. posts, products, items), use the "repeat" field on a container element. Example: { "type": "<ContainerComponent>", "props": {}, "repeat": { "statePath": "/posts", "key": "id" }, "children": ["post-card"] }. For a nested list stored on the enclosing item, use "repeat": { "statePath": { "$item": "comments" }, "key": "id" }. The $item statePath form is valid only inside another repeat. Replace <ContainerComponent> with an appropriate component from the AVAILABLE COMPONENTS list. Inside repeated children, use { "$item": "field" } to read a field from the current item, and { "$index": true } for the current array index. For two-way binding to an item field use { "$bindItem": "completed" }. Do NOT hardcode individual elements for each array item.',
         // Design quality
         "Design with visual hierarchy: use container components to group content, heading components for section titles, proper spacing, and status indicators. ONLY use components from the AVAILABLE COMPONENTS list.",
         "For data-rich UIs, use multi-column layout components if available. For forms and single-column content, use vertical layout components. ONLY use components from the AVAILABLE COMPONENTS list.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-render/svelte",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "license": "Apache-2.0",
   "description": "Svelte 5 renderer for @json-render/core. JSON becomes Svelte components.",
   "keywords": [
@@ -49,7 +49,7 @@
     "dist"
   ],
   "dependencies": {
-    "@json-render/core": "0.19.0"
+    "@json-render/core": "0.20.0"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.3.0",