@json-render/solid 0.17.0 → 0.19.0

package/dist/index.js

@@ -482,146 +482,172 @@ function ActionProvider(props) {
   };
   const execute = async (binding) => {
     const resolved = (0, import_core4.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 = (0, import_core4.nextActionDispatchId)();
+    const dispatchedAt = Date.now();
+    (0, import_core4.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 (0, import_core4.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 (0, import_core4.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 (0, import_core4.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 (0, import_core4.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();
+      (0, import_core4.notifyActionSettle)({
+        id: dispatchId,
+        name: resolved.action,
+        ok: __ok,
+        at: now,
+        durationMs: now - dispatchedAt,
+        error: __error
       });
     }
   };
@@ -797,13 +823,28 @@ var import_core8 = require("@json-render/core");
 // src/renderer.tsx
 var import_web13 = require("solid-js/web");
 var import_web14 = require("solid-js/web");
+var import_web15 = require("solid-js/web");
+var import_web16 = require("solid-js/web");
+var import_web17 = require("solid-js/web");
+var import_web18 = require("solid-js/web");
 var import_solid_js6 = require("solid-js");
 var import_core6 = require("@json-render/core");
+var _tmpl$2 = /* @__PURE__ */ (0, import_web13.template)(`<span style=display:contents>`);
 var EMPTY_FUNCTIONS = {};
 var FunctionsContext = (0, import_solid_js6.createContext)(EMPTY_FUNCTIONS);
 function useFunctions() {
   return (0, import_solid_js6.useContext)(FunctionsContext) ?? EMPTY_FUNCTIONS;
 }
+var DirectivesContext = (0, import_solid_js6.createContext)(void 0);
+function useDirectives() {
+  return (0, import_solid_js6.useContext)(DirectivesContext);
+}
+function useDevtoolsActive() {
+  const [active, setActive] = (0, import_solid_js6.createSignal)((0, import_core6.isDevtoolsActive)());
+  const unsub = (0, import_core6.subscribeDevtoolsActive)(() => setActive((0, import_core6.isDevtoolsActive)()));
+  (0, import_solid_js6.onCleanup)(unsub);
+  return active;
+}
 function ElementRenderer(props) {
   const repeatScope = useRepeatScope();
   const {
@@ -815,6 +856,7 @@ function ElementRenderer(props) {
   const stateStore = useStateStore();
   const getSnapshot = () => stateStore.getSnapshot();
   const functions = useFunctions();
+  const directives = useDirectives();
   const fullCtx = (0, import_solid_js6.createMemo)(() => {
     const repeatItem = repeatScope?.item;
     const repeatIndex = repeatScope?.index;
@@ -832,7 +874,8 @@ function ElementRenderer(props) {
       ...repeatBasePath !== void 0 ? {
         repeatBasePath
       } : {},
-      functions
+      functions,
+      directives
     };
   });
   const isVisible = (0, import_solid_js6.createMemo)(() => props.element.visible === void 0 ? true : (0, import_core6.evaluateVisibility)(props.element.visible, fullCtx()));
@@ -929,21 +972,24 @@ function ElementRenderer(props) {
       props: resolvedProps
     } : props.element;
   });
-  return (0, import_web14.createComponent)(import_solid_js6.Show, {
+  return (0, import_web18.createComponent)(import_solid_js6.Show, {
     get when() {
       return isVisible();
     },
     get children() {
-      return (0, import_web14.createComponent)(import_solid_js6.ErrorBoundary, {
+      return (0, import_web18.createComponent)(import_solid_js6.ErrorBoundary, {
         fallback: (err) => {
           console.error(`[json-render] Rendering error in <${props.element.type}>:`, err);
           return null;
         },
         get children() {
-          return (0, import_web14.createComponent)(ElementRendererContent, {
+          return (0, import_web18.createComponent)(ElementRendererContent, {
             get resolvedElement() {
               return resolvedElement();
             },
+            get elementKey() {
+              return props.elementKey;
+            },
             get spec() {
               return props.spec;
             },
@@ -968,8 +1014,9 @@ function ElementRenderer(props) {
   });
 }
 function ElementRendererContent(props) {
+  const devtoolsActive = useDevtoolsActive();
   const Comp = () => props.registry[props.resolvedElement.type] ?? props.fallback;
-  return (0, import_web14.createComponent)(import_solid_js6.Show, {
+  return (0, import_web18.createComponent)(import_solid_js6.Show, {
     get when() {
       return Comp();
     },
@@ -979,7 +1026,7 @@ function ElementRendererContent(props) {
     },
     children: (ComponentFn) => {
       const Component = ComponentFn();
-      const children = () => props.resolvedElement.repeat ? (0, import_web14.createComponent)(RepeatChildren, {
+      const children = () => props.resolvedElement.repeat ? (0, import_web18.createComponent)(RepeatChildren, {
         get element() {
           return props.resolvedElement;
         },
@@ -995,13 +1042,13 @@ function ElementRendererContent(props) {
         get fallback() {
           return props.fallback;
         }
-      }) : (0, import_web14.createComponent)(import_solid_js6.For, {
+      }) : (0, import_web18.createComponent)(import_solid_js6.For, {
         get each() {
           return props.resolvedElement.children ?? [];
         },
         children: (childKey) => {
           const childElement = () => props.spec.elements[childKey];
-          return (0, import_web14.createComponent)(import_solid_js6.Show, {
+          return (0, import_web18.createComponent)(import_solid_js6.Show, {
             get when() {
               return childElement();
             },
@@ -1011,10 +1058,11 @@ function ElementRendererContent(props) {
               }
               return null;
             },
-            children: (el) => (0, import_web14.createComponent)(ElementRenderer, {
+            children: (el) => (0, import_web18.createComponent)(ElementRenderer, {
               get element() {
                 return el();
               },
+              elementKey: childKey,
               get spec() {
                 return props.spec;
               },
@@ -1031,7 +1079,7 @@ function ElementRendererContent(props) {
           });
         }
       });
-      return (0, import_web14.createComponent)(Component, {
+      const rendered = (0, import_web18.createComponent)(Component, {
         get element() {
           return props.resolvedElement;
         },
@@ -1051,6 +1099,18 @@ function ElementRendererContent(props) {
           return children();
         }
       });
+      return (0, import_web18.createComponent)(import_solid_js6.Show, {
+        get when() {
+          return (0, import_web17.memo)(() => !!devtoolsActive())() && props.elementKey;
+        },
+        fallback: rendered,
+        get children() {
+          var _el$ = _tmpl$2();
+          (0, import_web16.insert)(_el$, rendered);
+          (0, import_web15.effect)(() => (0, import_web14.setAttribute)(_el$, "data-jr-key", props.elementKey));
+          return _el$;
+        }
+      });
     }
   });
 }
@@ -1059,7 +1119,7 @@ function RepeatChildren(props) {
   const repeat = () => props.element.repeat;
   const statePath = () => repeat().statePath;
   const items = () => (0, import_core6.getByPath)(stateStore.state, statePath()) ?? [];
-  return (0, import_web14.createComponent)(import_solid_js6.For, {
+  return (0, import_web18.createComponent)(import_solid_js6.For, {
     get each() {
       return items();
     },
@@ -1068,7 +1128,7 @@ function RepeatChildren(props) {
         const r = repeat();
         return r.key && typeof itemValue === "object" && itemValue !== null ? String(itemValue[r.key] ?? index()) : String(index());
       };
-      return (0, import_web14.createComponent)(RepeatScopeProvider, {
+      return (0, import_web18.createComponent)(RepeatScopeProvider, {
         item: itemValue,
         get index() {
           return index();
@@ -1077,13 +1137,13 @@ function RepeatChildren(props) {
           return `${statePath()}/${index()}`;
         },
         get children() {
-          return (0, import_web14.createComponent)(import_solid_js6.For, {
+          return (0, import_web18.createComponent)(import_solid_js6.For, {
             get each() {
               return props.element.children ?? [];
             },
             children: (childKey) => {
               const childElement = () => props.spec.elements[childKey];
-              return (0, import_web14.createComponent)(import_solid_js6.Show, {
+              return (0, import_web18.createComponent)(import_solid_js6.Show, {
                 get when() {
                   return childElement();
                 },
@@ -1093,7 +1153,7 @@ function RepeatChildren(props) {
                   }
                   return null;
                 },
-                children: (el) => (0, import_web14.createComponent)(ElementRenderer, {
+                children: (el) => (0, import_web18.createComponent)(ElementRenderer, {
                   get element() {
                     return el();
                   },
@@ -1124,14 +1184,17 @@ function Renderer(props) {
     if (!spec || !spec.root) return void 0;
     return spec.elements[spec.root];
   });
-  return (0, import_web14.createComponent)(import_solid_js6.Show, {
+  return (0, import_web18.createComponent)(import_solid_js6.Show, {
     get when() {
       return rootElement();
     },
-    children: (el) => (0, import_web14.createComponent)(ElementRenderer, {
+    children: (el) => (0, import_web18.createComponent)(ElementRenderer, {
       get element() {
         return el();
       },
+      get elementKey() {
+        return props.spec.root;
+      },
       get spec() {
         return props.spec;
       },
@@ -1148,7 +1211,8 @@ function Renderer(props) {
   });
 }
 function JSONUIProvider(props) {
-  return (0, import_web14.createComponent)(StateProvider, {
+  const directiveRegistry = (0, import_solid_js6.createMemo)(() => props.directives ? (0, import_core6.createDirectiveRegistry)(props.directives) : void 0);
+  return (0, import_web18.createComponent)(StateProvider, {
     get store() {
       return props.store;
     },
@@ -1159,14 +1223,14 @@ function JSONUIProvider(props) {
       return props.onStateChange;
     },
     get children() {
-      return (0, import_web14.createComponent)(VisibilityProvider, {
+      return (0, import_web18.createComponent)(VisibilityProvider, {
         get children() {
-          return (0, import_web14.createComponent)(ValidationProvider, {
+          return (0, import_web18.createComponent)(ValidationProvider, {
             get customFunctions() {
               return props.validationFunctions;
             },
             get children() {
-              return (0, import_web14.createComponent)(ActionProvider, {
+              return (0, import_web18.createComponent)(ActionProvider, {
                 get handlers() {
                   return props.handlers;
                 },
@@ -1174,12 +1238,19 @@ function JSONUIProvider(props) {
                   return props.navigate;
                 },
                 get children() {
-                  return (0, import_web14.createComponent)(FunctionsContext.Provider, {
+                  return (0, import_web18.createComponent)(FunctionsContext.Provider, {
                     get value() {
                       return props.functions ?? EMPTY_FUNCTIONS;
                     },
                     get children() {
-                      return [(0, import_web13.memo)(() => props.children), (0, import_web14.createComponent)(ConfirmationDialogManager, {})];
+                      return (0, import_web18.createComponent)(DirectivesContext.Provider, {
+                        get value() {
+                          return directiveRegistry();
+                        },
+                        get children() {
+                          return [(0, import_web17.memo)(() => props.children), (0, import_web18.createComponent)(ConfirmationDialogManager, {})];
+                        }
+                      });
                     }
                   });
                 }
@@ -1197,11 +1268,11 @@ function ConfirmationDialogManager() {
     confirm,
     cancel
   } = useActions();
-  return (0, import_web14.createComponent)(import_solid_js6.Show, {
+  return (0, import_web18.createComponent)(import_solid_js6.Show, {
     get when() {
       return pendingConfirmation?.action.confirm;
     },
-    children: (confirmConfig) => (0, import_web14.createComponent)(ConfirmDialog, {
+    children: (confirmConfig) => (0, import_web18.createComponent)(ConfirmDialog, {
       get confirm() {
         return confirmConfig();
       },
@@ -1265,13 +1336,14 @@ function defineRegistry(_catalog, options) {
 function createRenderer(catalog, components) {
   const registry = components;
   return function CatalogRenderer(props) {
+    const directiveRegistry = (0, import_solid_js6.createMemo)(() => props.directives ? (0, import_core6.createDirectiveRegistry)(props.directives) : void 0);
     const actionHandlers = () => props.onAction ? new Proxy({}, {
       get: (_target, prop) => {
         return (params) => props.onAction(prop, params);
       },
       has: () => true
     }) : void 0;
-    return (0, import_web14.createComponent)(StateProvider, {
+    return (0, import_web18.createComponent)(StateProvider, {
       get store() {
         return props.store;
       },
@@ -1282,32 +1354,39 @@ function createRenderer(catalog, components) {
         return props.onStateChange;
       },
       get children() {
-        return (0, import_web14.createComponent)(VisibilityProvider, {
+        return (0, import_web18.createComponent)(VisibilityProvider, {
           get children() {
-            return (0, import_web14.createComponent)(ValidationProvider, {
+            return (0, import_web18.createComponent)(ValidationProvider, {
               get children() {
-                return (0, import_web14.createComponent)(ActionProvider, {
+                return (0, import_web18.createComponent)(ActionProvider, {
                   get handlers() {
                     return actionHandlers();
                   },
                   get children() {
-                    return (0, import_web14.createComponent)(FunctionsContext.Provider, {
+                    return (0, import_web18.createComponent)(FunctionsContext.Provider, {
                       get value() {
                         return props.functions ?? EMPTY_FUNCTIONS;
                       },
                       get children() {
-                        return [(0, import_web14.createComponent)(Renderer, {
-                          get spec() {
-                            return props.spec;
-                          },
-                          registry,
-                          get loading() {
-                            return props.loading;
+                        return (0, import_web18.createComponent)(DirectivesContext.Provider, {
+                          get value() {
+                            return directiveRegistry();
                           },
-                          get fallback() {
-                            return props.fallback;
+                          get children() {
+                            return [(0, import_web18.createComponent)(Renderer, {
+                              get spec() {
+                                return props.spec;
+                              },
+                              registry,
+                              get loading() {
+                                return props.loading;
+                              },
+                              get fallback() {
+                                return props.fallback;
+                              }
+                            }), (0, import_web18.createComponent)(ConfirmationDialogManager, {})];
                           }
-                        }), (0, import_web14.createComponent)(ConfirmationDialogManager, {})];
+                        });
                       }
                     });
                   }