@json-render/solid 0.17.0 → 0.19.0

package/dist/index.mjs

@@ -195,7 +195,7 @@ import { insert as _$insert } from "solid-js/web";
 import { addEventListener as _$addEventListener } from "solid-js/web";
 import { createComponent as _$createComponent4 } from "solid-js/web";
 import { createContext as createContext4, useContext as useContext4, createSignal as createSignal3 } from "solid-js";
-import { resolveAction, executeAction } from "@json-render/core";
+import { resolveAction, executeAction, nextActionDispatchId, notifyActionDispatch, notifyActionSettle } from "@json-render/core";
 
 // src/contexts/validation.tsx
 import { createComponent as _$createComponent3 } from "solid-js/web";
@@ -431,146 +431,172 @@ function ActionProvider(props) {
   };
   const execute = async (binding) => {
     const resolved = resolveAction(binding, getSnapshot());
-    if (resolved.action === "setState" && resolved.params) {
-      const statePath = resolved.params.statePath;
-      const value = resolved.params.value;
-      if (statePath) {
-        set(statePath, value);
-      }
-      return;
-    }
-    if (resolved.action === "pushState" && resolved.params) {
-      const statePath = resolved.params.statePath;
-      const rawValue = resolved.params.value;
-      if (statePath) {
-        const resolvedValue = deepResolveValue(rawValue, get);
-        const arr = get(statePath) ?? [];
-        set(statePath, [...arr, resolvedValue]);
-        const clearStatePath = resolved.params.clearStatePath;
-        if (clearStatePath) {
-          set(clearStatePath, "");
+    const dispatchId = nextActionDispatchId();
+    const dispatchedAt = Date.now();
+    notifyActionDispatch({
+      id: dispatchId,
+      name: resolved.action,
+      params: resolved.params,
+      at: dispatchedAt
+    });
+    let __ok = true;
+    let __error = void 0;
+    try {
+      if (resolved.action === "setState" && resolved.params) {
+        const statePath = resolved.params.statePath;
+        const value = resolved.params.value;
+        if (statePath) {
+          set(statePath, value);
         }
+        return;
       }
-      return;
-    }
-    if (resolved.action === "removeState" && resolved.params) {
-      const statePath = resolved.params.statePath;
-      const index = resolved.params.index;
-      if (statePath !== void 0 && index !== void 0) {
-        const arr = get(statePath) ?? [];
-        set(statePath, arr.filter((_, i) => i !== index));
-      }
-      return;
-    }
-    if (resolved.action === "push" && resolved.params) {
-      const screen = resolved.params.screen;
-      if (screen) {
-        const currentScreen = get("/currentScreen");
-        const navStack = get("/navStack") ?? [];
-        if (currentScreen) {
-          set("/navStack", [...navStack, currentScreen]);
-        } else {
-          set("/navStack", [...navStack, ""]);
+      if (resolved.action === "pushState" && resolved.params) {
+        const statePath = resolved.params.statePath;
+        const rawValue = resolved.params.value;
+        if (statePath) {
+          const resolvedValue = deepResolveValue(rawValue, get);
+          const arr = get(statePath) ?? [];
+          set(statePath, [...arr, resolvedValue]);
+          const clearStatePath = resolved.params.clearStatePath;
+          if (clearStatePath) {
+            set(clearStatePath, "");
+          }
         }
-        set("/currentScreen", screen);
+        return;
       }
-      return;
-    }
-    if (resolved.action === "pop") {
-      const navStack = get("/navStack") ?? [];
-      if (navStack.length > 0) {
-        const previousScreen = navStack[navStack.length - 1];
-        set("/navStack", navStack.slice(0, -1));
-        if (previousScreen) {
-          set("/currentScreen", previousScreen);
-        } else {
-          set("/currentScreen", void 0);
+      if (resolved.action === "removeState" && resolved.params) {
+        const statePath = resolved.params.statePath;
+        const index = resolved.params.index;
+        if (statePath !== void 0 && index !== void 0) {
+          const arr = get(statePath) ?? [];
+          set(statePath, arr.filter((_, i) => i !== index));
         }
+        return;
       }
-      return;
-    }
-    if (resolved.action === "validateForm") {
-      const validateAll = validation?.validateAll;
-      if (!validateAll) {
-        console.warn("validateForm action was dispatched but no ValidationProvider is connected. Ensure ValidationProvider is rendered inside the provider tree.");
+      if (resolved.action === "push" && resolved.params) {
+        const screen = resolved.params.screen;
+        if (screen) {
+          const currentScreen = get("/currentScreen");
+          const navStack = get("/navStack") ?? [];
+          if (currentScreen) {
+            set("/navStack", [...navStack, currentScreen]);
+          } else {
+            set("/navStack", [...navStack, ""]);
+          }
+          set("/currentScreen", screen);
+        }
         return;
       }
-      const valid = validateAll();
-      const errors = {};
-      for (const [path, fs] of Object.entries(validation.fieldStates)) {
-        if (fs.result && !fs.result.valid) {
-          errors[path] = fs.result.errors;
+      if (resolved.action === "pop") {
+        const navStack = get("/navStack") ?? [];
+        if (navStack.length > 0) {
+          const previousScreen = navStack[navStack.length - 1];
+          set("/navStack", navStack.slice(0, -1));
+          if (previousScreen) {
+            set("/currentScreen", previousScreen);
+          } else {
+            set("/currentScreen", void 0);
+          }
         }
+        return;
       }
-      const statePath = resolved.params?.statePath || "/formValidation";
-      set(statePath, {
-        valid,
-        errors
-      });
-      return;
-    }
-    const handler = handlers()[resolved.action];
-    if (!handler) {
-      console.warn(`No handler registered for action: ${resolved.action}`);
-      return;
-    }
-    if (resolved.confirm) {
-      return new Promise((resolve, reject) => {
-        setPendingConfirmation({
-          action: resolved,
-          handler,
-          resolve: () => {
-            setPendingConfirmation(null);
-            resolve();
-          },
-          reject: () => {
-            setPendingConfirmation(null);
-            reject(new Error("Action cancelled"));
+      if (resolved.action === "validateForm") {
+        const validateAll = validation?.validateAll;
+        if (!validateAll) {
+          console.warn("validateForm action was dispatched but no ValidationProvider is connected. Ensure ValidationProvider is rendered inside the provider tree.");
+          return;
+        }
+        const valid = validateAll();
+        const errors = {};
+        for (const [path, fs] of Object.entries(validation.fieldStates)) {
+          if (fs.result && !fs.result.valid) {
+            errors[path] = fs.result.errors;
           }
+        }
+        const statePath = resolved.params?.statePath || "/formValidation";
+        set(statePath, {
+          valid,
+          errors
         });
-      }).then(async () => {
-        setLoadingActions((prev) => new Set(prev).add(resolved.action));
-        try {
-          await executeAction({
+        return;
+      }
+      const handler = handlers()[resolved.action];
+      if (!handler) {
+        console.warn(`No handler registered for action: ${resolved.action}`);
+        return;
+      }
+      if (resolved.confirm) {
+        return new Promise((resolve, reject) => {
+          setPendingConfirmation({
             action: resolved,
             handler,
-            setState: set,
-            navigate: props.navigate,
-            executeAction: async (name) => {
-              const subBinding = {
-                action: name
-              };
-              await execute(subBinding);
+            resolve: () => {
+              setPendingConfirmation(null);
+              resolve();
+            },
+            reject: () => {
+              setPendingConfirmation(null);
+              reject(new Error("Action cancelled"));
             }
           });
-        } finally {
-          setLoadingActions((prev) => {
-            const next = new Set(prev);
-            next.delete(resolved.action);
-            return next;
-          });
-        }
-      });
-    }
-    setLoadingActions((prev) => new Set(prev).add(resolved.action));
-    try {
-      await executeAction({
-        action: resolved,
-        handler,
-        setState: set,
-        navigate: props.navigate,
-        executeAction: async (name) => {
-          const subBinding = {
-            action: name
-          };
-          await execute(subBinding);
-        }
-      });
+        }).then(async () => {
+          setLoadingActions((prev) => new Set(prev).add(resolved.action));
+          try {
+            await executeAction({
+              action: resolved,
+              handler,
+              setState: set,
+              navigate: props.navigate,
+              executeAction: async (name) => {
+                const subBinding = {
+                  action: name
+                };
+                await execute(subBinding);
+              }
+            });
+          } finally {
+            setLoadingActions((prev) => {
+              const next = new Set(prev);
+              next.delete(resolved.action);
+              return next;
+            });
+          }
+        });
+      }
+      setLoadingActions((prev) => new Set(prev).add(resolved.action));
+      try {
+        await executeAction({
+          action: resolved,
+          handler,
+          setState: set,
+          navigate: props.navigate,
+          executeAction: async (name) => {
+            const subBinding = {
+              action: name
+            };
+            await execute(subBinding);
+          }
+        });
+      } finally {
+        setLoadingActions((prev) => {
+          const next = new Set(prev);
+          next.delete(resolved.action);
+          return next;
+        });
+      }
+    } catch (err) {
+      __ok = false;
+      __error = err;
+      throw err;
     } finally {
-      setLoadingActions((prev) => {
-        const next = new Set(prev);
-        next.delete(resolved.action);
-        return next;
+      const now = Date.now();
+      notifyActionSettle({
+        id: dispatchId,
+        name: resolved.action,
+        ok: __ok,
+        at: now,
+        durationMs: now - dispatchedAt,
+        error: __error
       });
     }
   };
@@ -662,15 +688,30 @@ function useRepeatScope() {
 import { createStateStore as createStateStore2 } from "@json-render/core";
 
 // src/renderer.tsx
+import { template as _$template2 } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { effect as _$effect2 } from "solid-js/web";
+import { insert as _$insert2 } from "solid-js/web";
 import { memo as _$memo2 } from "solid-js/web";
 import { createComponent as _$createComponent6 } from "solid-js/web";
-import { createContext as createContext6, useContext as useContext6, createMemo as createMemo3, createEffect as createEffect3, onCleanup as onCleanup2, ErrorBoundary, Show, For } from "solid-js";
-import { resolveElementProps, resolveBindings, resolveActionParam, evaluateVisibility as evaluateVisibility2, getByPath as getByPath2 } from "@json-render/core";
+import { createContext as createContext6, useContext as useContext6, createMemo as createMemo3, createEffect as createEffect3, createSignal as createSignal4, onCleanup as onCleanup2, ErrorBoundary, Show, For } from "solid-js";
+import { resolveElementProps, resolveBindings, resolveActionParam, evaluateVisibility as evaluateVisibility2, getByPath as getByPath2, isDevtoolsActive, subscribeDevtoolsActive, createDirectiveRegistry } from "@json-render/core";
+var _tmpl$2 = /* @__PURE__ */ _$template2(`<span style=display:contents>`);
 var EMPTY_FUNCTIONS = {};
 var FunctionsContext = createContext6(EMPTY_FUNCTIONS);
 function useFunctions() {
   return useContext6(FunctionsContext) ?? EMPTY_FUNCTIONS;
 }
+var DirectivesContext = createContext6(void 0);
+function useDirectives() {
+  return useContext6(DirectivesContext);
+}
+function useDevtoolsActive() {
+  const [active, setActive] = createSignal4(isDevtoolsActive());
+  const unsub = subscribeDevtoolsActive(() => setActive(isDevtoolsActive()));
+  onCleanup2(unsub);
+  return active;
+}
 function ElementRenderer(props) {
   const repeatScope = useRepeatScope();
   const {
@@ -682,6 +723,7 @@ function ElementRenderer(props) {
   const stateStore = useStateStore();
   const getSnapshot = () => stateStore.getSnapshot();
   const functions = useFunctions();
+  const directives = useDirectives();
   const fullCtx = createMemo3(() => {
     const repeatItem = repeatScope?.item;
     const repeatIndex = repeatScope?.index;
@@ -699,7 +741,8 @@ function ElementRenderer(props) {
       ...repeatBasePath !== void 0 ? {
         repeatBasePath
       } : {},
-      functions
+      functions,
+      directives
     };
   });
   const isVisible = createMemo3(() => props.element.visible === void 0 ? true : evaluateVisibility2(props.element.visible, fullCtx()));
@@ -811,6 +854,9 @@ function ElementRenderer(props) {
             get resolvedElement() {
               return resolvedElement();
             },
+            get elementKey() {
+              return props.elementKey;
+            },
             get spec() {
               return props.spec;
             },
@@ -835,6 +881,7 @@ function ElementRenderer(props) {
   });
 }
 function ElementRendererContent(props) {
+  const devtoolsActive = useDevtoolsActive();
   const Comp = () => props.registry[props.resolvedElement.type] ?? props.fallback;
   return _$createComponent6(Show, {
     get when() {
@@ -882,6 +929,7 @@ function ElementRendererContent(props) {
               get element() {
                 return el();
               },
+              elementKey: childKey,
               get spec() {
                 return props.spec;
               },
@@ -898,7 +946,7 @@ function ElementRendererContent(props) {
           });
         }
       });
-      return _$createComponent6(Component, {
+      const rendered = _$createComponent6(Component, {
         get element() {
           return props.resolvedElement;
         },
@@ -918,6 +966,18 @@ function ElementRendererContent(props) {
           return children();
         }
       });
+      return _$createComponent6(Show, {
+        get when() {
+          return _$memo2(() => !!devtoolsActive())() && props.elementKey;
+        },
+        fallback: rendered,
+        get children() {
+          var _el$ = _tmpl$2();
+          _$insert2(_el$, rendered);
+          _$effect2(() => _$setAttribute(_el$, "data-jr-key", props.elementKey));
+          return _el$;
+        }
+      });
     }
   });
 }
@@ -999,6 +1059,9 @@ function Renderer(props) {
       get element() {
         return el();
       },
+      get elementKey() {
+        return props.spec.root;
+      },
       get spec() {
         return props.spec;
       },
@@ -1015,6 +1078,7 @@ function Renderer(props) {
   });
 }
 function JSONUIProvider(props) {
+  const directiveRegistry = createMemo3(() => props.directives ? createDirectiveRegistry(props.directives) : void 0);
   return _$createComponent6(StateProvider, {
     get store() {
       return props.store;
@@ -1046,7 +1110,14 @@ function JSONUIProvider(props) {
                       return props.functions ?? EMPTY_FUNCTIONS;
                     },
                     get children() {
-                      return [_$memo2(() => props.children), _$createComponent6(ConfirmationDialogManager, {})];
+                      return _$createComponent6(DirectivesContext.Provider, {
+                        get value() {
+                          return directiveRegistry();
+                        },
+                        get children() {
+                          return [_$memo2(() => props.children), _$createComponent6(ConfirmationDialogManager, {})];
+                        }
+                      });
                     }
                   });
                 }
@@ -1132,6 +1203,7 @@ function defineRegistry(_catalog, options) {
 function createRenderer(catalog, components) {
   const registry = components;
   return function CatalogRenderer(props) {
+    const directiveRegistry = createMemo3(() => props.directives ? createDirectiveRegistry(props.directives) : void 0);
     const actionHandlers = () => props.onAction ? new Proxy({}, {
       get: (_target, prop) => {
         return (params) => props.onAction(prop, params);
@@ -1163,18 +1235,25 @@ function createRenderer(catalog, components) {
                         return props.functions ?? EMPTY_FUNCTIONS;
                       },
                       get children() {
-                        return [_$createComponent6(Renderer, {
-                          get spec() {
-                            return props.spec;
-                          },
-                          registry,
-                          get loading() {
-                            return props.loading;
+                        return _$createComponent6(DirectivesContext.Provider, {
+                          get value() {
+                            return directiveRegistry();
                           },
-                          get fallback() {
-                            return props.fallback;
+                          get children() {
+                            return [_$createComponent6(Renderer, {
+                              get spec() {
+                                return props.spec;
+                              },
+                              registry,
+                              get loading() {
+                                return props.loading;
+                              },
+                              get fallback() {
+                                return props.fallback;
+                              }
+                            }), _$createComponent6(ConfirmationDialogManager, {})];
                           }
-                        }), _$createComponent6(ConfirmationDialogManager, {})];
+                        });
                       }
                     });
                   }
@@ -1189,7 +1268,7 @@ function createRenderer(catalog, components) {
 }
 
 // src/hooks.ts
-import { createSignal as createSignal4, onCleanup as onCleanup3, createMemo as createMemo4 } from "solid-js";
+import { createSignal as createSignal5, onCleanup as onCleanup3, createMemo as createMemo4 } from "solid-js";
 import {
   setByPath,
   getByPath as getByPath3,
@@ -1333,11 +1412,11 @@ function applyPatch(spec, patch) {
   return newSpec;
 }
 function useUIStream(options) {
-  const [spec, setSpec] = createSignal4(null);
-  const [isStreaming, setIsStreaming] = createSignal4(false);
-  const [error, setError] = createSignal4(null);
-  const [usage, setUsage] = createSignal4(null);
-  const [rawLines, setRawLines] = createSignal4([]);
+  const [spec, setSpec] = createSignal5(null);
+  const [isStreaming, setIsStreaming] = createSignal5(false);
+  const [error, setError] = createSignal5(null);
+  const [usage, setUsage] = createSignal5(null);
+  const [rawLines, setRawLines] = createSignal5([]);
   let abortController = null;
   const clear = () => {
     setSpec(null);
@@ -1554,9 +1633,9 @@ function generateChatId() {
   return `msg-${Date.now()}-${chatMessageIdCounter}`;
 }
 function useChatUI(options) {
-  const [messages, setMessages] = createSignal4([]);
-  const [isStreaming, setIsStreaming] = createSignal4(false);
-  const [error, setError] = createSignal4(null);
+  const [messages, setMessages] = createSignal5([]);
+  const [isStreaming, setIsStreaming] = createSignal5(false);
+  const [error, setError] = createSignal5(null);
   let abortController = null;
   const clear = () => {
     setMessages([]);