@json-render/svelte 0.16.0 → 0.18.0

package/dist/ElementRenderer.svelte

@@ -5,8 +5,11 @@
     resolveBindings,
     resolveActionParam,
     evaluateVisibility,
+    isDevtoolsActive,
+    subscribeDevtoolsActive,
     type PropResolutionContext,
   } from "@json-render/core";
+  import { onDestroy } from "svelte";
   import type { ComponentRegistry, ComponentRenderer } from "./renderer.js";
   import type { EventHandle } from "./catalog-types.js";
   import { getStateContext } from "./contexts/StateProvider.svelte";
@@ -18,13 +21,29 @@
 
   interface Props {
     element: UIElement;
+    /** Spec key for this element. Used by the devtools picker. */
+    elementKey?: string;
     spec: Spec;
     registry: ComponentRegistry;
     loading?: boolean;
     fallback?: ComponentRenderer;
   }
 
-  let { element, spec, registry, loading = false, fallback }: Props = $props();
+  let {
+    element,
+    elementKey,
+    spec,
+    registry,
+    loading = false,
+    fallback,
+  }: Props = $props();
+
+  // Reactive mirror of the devtools-active flag (for picker support).
+  let devtoolsActive = $state(isDevtoolsActive());
+  const unsubDevtools = subscribeDevtoolsActive(() => {
+    devtoolsActive = isDevtoolsActive();
+  });
+  onDestroy(unsubDevtools);
 
   const stateCtx = getStateContext();
   const actionCtx = getActionContext();
@@ -110,36 +129,73 @@
         error,
       );
     }}>
-    <Component
-      element={resolvedElement}
-      bindings={elementBindings}
-      {loading}
-      {on}
-      {emit}>
-      {#if resolvedElement.repeat}
-        <RepeatChildren
+    {#if devtoolsActive && elementKey}
+      <span data-jr-key={elementKey} style="display:contents">
+        <Component
           element={resolvedElement}
-          {spec}
-          {registry}
+          bindings={elementBindings}
           {loading}
-          {fallback} />
-      {:else if resolvedElement.children}
-        {#each resolvedElement.children as childKey (childKey)}
-          {#if spec.elements[childKey]}
-            <Self
-              element={spec.elements[childKey]}
+          {on}
+          {emit}>
+          {#if resolvedElement.repeat}
+            <RepeatChildren
+              element={resolvedElement}
               {spec}
               {registry}
               {loading}
               {fallback} />
-          {:else if !loading}
-            {console.warn(
-              `[json-render] Missing element "${childKey}" referenced as child of "${resolvedElement.type}". This element will not render.`,
-            )}
+          {:else if resolvedElement.children}
+            {#each resolvedElement.children as childKey (childKey)}
+              {#if spec.elements[childKey]}
+                <Self
+                  element={spec.elements[childKey]}
+                  elementKey={childKey}
+                  {spec}
+                  {registry}
+                  {loading}
+                  {fallback} />
+              {:else if !loading}
+                {console.warn(
+                  `[json-render] Missing element "${childKey}" referenced as child of "${resolvedElement.type}". This element will not render.`,
+                )}
+              {/if}
+            {/each}
           {/if}
-        {/each}
-      {/if}
-    </Component>
+        </Component>
+      </span>
+    {:else}
+      <Component
+        element={resolvedElement}
+        bindings={elementBindings}
+        {loading}
+        {on}
+        {emit}>
+        {#if resolvedElement.repeat}
+          <RepeatChildren
+            element={resolvedElement}
+            {spec}
+            {registry}
+            {loading}
+            {fallback} />
+        {:else if resolvedElement.children}
+          {#each resolvedElement.children as childKey (childKey)}
+            {#if spec.elements[childKey]}
+              <Self
+                element={spec.elements[childKey]}
+                elementKey={childKey}
+                {spec}
+                {registry}
+                {loading}
+                {fallback} />
+            {:else if !loading}
+              {console.warn(
+                `[json-render] Missing element "${childKey}" referenced as child of "${resolvedElement.type}". This element will not render.`,
+              )}
+            {/if}
+          {/each}
+        {/if}
+      </Component>
+    {/if}
     {#snippet failed()}
       <!-- render nothing -->
     {/snippet}

package/dist/ElementRenderer.svelte.d.ts

@@ -2,6 +2,8 @@ import type { Spec, UIElement } from "@json-render/core";
 import type { ComponentRegistry, ComponentRenderer } from "./renderer.js";
 interface Props {
     element: UIElement;
+    /** Spec key for this element. Used by the devtools picker. */
+    elementKey?: string;
     spec: Spec;
     registry: ComponentRegistry;
     loading?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"ElementRenderer.svelte.d.ts","sourceRoot":"","sources":["../src/ElementRenderer.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAQzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAUxE,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;AAyHH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ElementRenderer.svelte.d.ts","sourceRoot":"","sources":["../src/ElementRenderer.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAWzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAUxE,UAAU,KAAK;IACb,OAAO,EAAE,SAAS,CAAC;IACnB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AA4JH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/Renderer.svelte

@@ -27,6 +27,7 @@
 {#if spec && rootElement}
   <ElementRenderer
     element={rootElement}
+    elementKey={spec.root}
     {spec}
     {registry}
     {loading}

package/dist/RepeatChildren.svelte

@@ -35,6 +35,7 @@
         {#if spec.elements[childKey]}
           <ElementRenderer
             element={spec.elements[childKey]}
+            elementKey={childKey}
             {spec}
             {registry}
             {loading}

package/dist/contexts/ActionProvider.svelte

@@ -140,6 +140,9 @@
   import {
     resolveAction,
     executeAction,
+    nextActionDispatchId,
+    notifyActionDispatch,
+    notifyActionSettle,
     type ActionBinding as CoreActionBinding,
     type ActionHandler as CoreActionHandler,
   } from "@json-render/core";
@@ -165,6 +168,19 @@
   const execute = async (binding: CoreActionBinding): Promise<void> => {
     const resolved = resolveAction(binding, stateCtx.getSnapshot());
 
+    // --- devtools / observer hooks ---
+    const dispatchId = nextActionDispatchId();
+    const dispatchedAt = Date.now();
+    notifyActionDispatch({
+      id: dispatchId,
+      name: resolved.action,
+      params: resolved.params,
+      at: dispatchedAt,
+    });
+    let __ok = true;
+    let __error: unknown = undefined;
+
+    try {
     if (resolved.action === "setState" && resolved.params) {
       const statePath = resolved.params.statePath as string;
       const value = resolved.params.value;
@@ -314,6 +330,21 @@
     } finally {
       loadingActions.delete(resolved.action);
     }
+    } catch (err) {
+      __ok = false;
+      __error = err;
+      throw err;
+    } finally {
+      const now = Date.now();
+      notifyActionSettle({
+        id: dispatchId,
+        name: resolved.action,
+        ok: __ok,
+        at: now,
+        durationMs: now - dispatchedAt,
+        error: __error,
+      });
+    }
   };
 
   const ctx: ActionContext = {

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,EAIH,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;AA2MH,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;AAuOH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@json-render/svelte",
-  "version": "0.16.0",
+  "version": "0.18.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.16.0"
+    "@json-render/core": "0.18.0"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.3.0",