@json-render/vue 0.17.0 → 0.19.0

package/dist/index.mjs

@@ -174,7 +174,10 @@ import {
 } from "vue";
 import {
   resolveAction,
-  executeAction
+  executeAction,
+  nextActionDispatchId,
+  notifyActionDispatch,
+  notifyActionSettle
 } from "@json-render/core";
 
 // src/composables/validation.ts
@@ -411,109 +414,141 @@ var ActionProvider = defineComponent4({
     };
     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);
+      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 === "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, "");
+        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, "");
+            }
           }
+          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)
-          );
+        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 === "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 });
           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 === "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 statePath = resolved.params?.statePath || "/formValidation";
-        set(statePath, { valid, errors });
-        return;
-      }
-      if (resolved.action === "push" && resolved.params) {
-        const screen = resolved.params.screen;
-        if (screen) {
-          const currentScreen = get("/currentScreen");
+        if (resolved.action === "pop") {
           const navStack = get("/navStack") ?? [];
-          if (currentScreen) {
-            set("/navStack", [...navStack, currentScreen]);
-          } else {
-            set("/navStack", [...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);
+            }
           }
-          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);
+        const handler = handlers.value[resolved.action];
+        if (!handler) {
+          console.warn(`No handler registered for action: ${resolved.action}`);
+          return;
+        }
+        if (resolved.confirm) {
+          await new Promise((resolve, reject) => {
+            pendingConfirmation.value = {
+              action: resolved,
+              handler,
+              resolve: () => {
+                pendingConfirmation.value = null;
+                resolve();
+              },
+              reject: () => {
+                pendingConfirmation.value = null;
+                reject(new Error("Action cancelled"));
+              }
+            };
+          });
+          const addLoading2 = new Set(loadingActions.value);
+          addLoading2.add(resolved.action);
+          loadingActions.value = addLoading2;
+          try {
+            await executeAction({
+              action: resolved,
+              handler,
+              setState: set,
+              navigate: props.navigate,
+              executeAction: async (name) => {
+                const subBinding = { action: name };
+                await execute(subBinding);
+              }
+            });
+          } finally {
+            const removeLoading = new Set(loadingActions.value);
+            removeLoading.delete(resolved.action);
+            loadingActions.value = removeLoading;
           }
+          return;
         }
-        return;
-      }
-      const handler = handlers.value[resolved.action];
-      if (!handler) {
-        console.warn(`No handler registered for action: ${resolved.action}`);
-        return;
-      }
-      if (resolved.confirm) {
-        await new Promise((resolve, reject) => {
-          pendingConfirmation.value = {
-            action: resolved,
-            handler,
-            resolve: () => {
-              pendingConfirmation.value = null;
-              resolve();
-            },
-            reject: () => {
-              pendingConfirmation.value = null;
-              reject(new Error("Action cancelled"));
-            }
-          };
-        });
-        const addLoading2 = new Set(loadingActions.value);
-        addLoading2.add(resolved.action);
-        loadingActions.value = addLoading2;
+        const addLoading = new Set(loadingActions.value);
+        addLoading.add(resolved.action);
+        loadingActions.value = addLoading;
         try {
           await executeAction({
             action: resolved,
@@ -530,26 +565,20 @@ var ActionProvider = defineComponent4({
           removeLoading.delete(resolved.action);
           loadingActions.value = removeLoading;
         }
-        return;
-      }
-      const addLoading = new Set(loadingActions.value);
-      addLoading.add(resolved.action);
-      loadingActions.value = addLoading;
-      try {
-        await executeAction({
-          action: resolved,
-          handler,
-          setState: set,
-          navigate: props.navigate,
-          executeAction: async (name) => {
-            const subBinding = { action: name };
-            await execute(subBinding);
-          }
-        });
+      } catch (err) {
+        __ok = false;
+        __error = err;
+        throw err;
       } finally {
-        const removeLoading = new Set(loadingActions.value);
-        removeLoading.delete(resolved.action);
-        loadingActions.value = removeLoading;
+        const now = Date.now();
+        notifyActionSettle({
+          id: dispatchId,
+          name: resolved.action,
+          ok: __ok,
+          at: now,
+          durationMs: now - dispatchedAt,
+          error: __error
+        });
       }
     };
     const confirm = () => pendingConfirmation.value?.resolve();
@@ -1231,6 +1260,7 @@ import {
   defineComponent as defineComponent6,
   h as h2,
   inject as inject6,
+  onBeforeUnmount,
   onErrorCaptured,
   provide as provide6,
   ref as ref5,
@@ -1241,7 +1271,10 @@ import {
   resolveBindings,
   resolveActionParam,
   evaluateVisibility as evaluateVisibility2,
-  getByPath as getByPath3
+  getByPath as getByPath3,
+  createDirectiveRegistry,
+  isDevtoolsActive,
+  subscribeDevtoolsActive
 } from "@json-render/core";
 var EMPTY_FUNCTIONS = {};
 var FUNCTIONS_KEY = /* @__PURE__ */ Symbol("json-render:functions");
@@ -1265,6 +1298,29 @@ function useFunctions() {
     computed6(() => EMPTY_FUNCTIONS)
   );
 }
+var DIRECTIVES_KEY = /* @__PURE__ */ Symbol("json-render:directives");
+var DirectivesProvider = defineComponent6({
+  name: "DirectivesProvider",
+  props: {
+    directives: {
+      type: Array,
+      default: void 0
+    }
+  },
+  setup(props, { slots }) {
+    const registry = computed6(
+      () => props.directives ? createDirectiveRegistry(props.directives) : void 0
+    );
+    provide6(DIRECTIVES_KEY, registry);
+    return () => slots.default?.();
+  }
+});
+function useDirectives() {
+  return inject6(
+    DIRECTIVES_KEY,
+    computed6(() => void 0)
+  );
+}
 var ElementErrorBoundary = defineComponent6({
   name: "ElementErrorBoundary",
   props: {
@@ -1309,6 +1365,14 @@ async function resolveAndExecuteBindings(actionBindings, ctx, getSnapshot, execu
     if (cancelled?.()) break;
   }
 }
+function useDevtoolsActive() {
+  const active = ref5(isDevtoolsActive());
+  const unsub = subscribeDevtoolsActive(() => {
+    active.value = isDevtoolsActive();
+  });
+  onBeforeUnmount(unsub);
+  return active;
+}
 var ElementRenderer = defineComponent6({
   name: "JsonRenderElement",
   props: {
@@ -1316,6 +1380,10 @@ var ElementRenderer = defineComponent6({
       type: Object,
       required: true
     },
+    elementKey: {
+      type: String,
+      default: void 0
+    },
     spec: {
       type: Object,
       required: true
@@ -1334,11 +1402,13 @@ var ElementRenderer = defineComponent6({
     }
   },
   setup(props) {
+    const devtoolsActive = useDevtoolsActive();
     const repeatScope = useRepeatScope();
     const { ctx: visibilityCtx } = useVisibility();
     const { execute } = useActions();
     const { getSnapshot, state: watchState } = useStateStore();
     const functions = useFunctions();
+    const directives = useDirectives();
     const fullCtx = computed6(() => {
       const base = repeatScope ? {
         ...visibilityCtx.value,
@@ -1347,6 +1417,7 @@ var ElementRenderer = defineComponent6({
         repeatBasePath: repeatScope.basePath
       } : { ...visibilityCtx.value };
       base.functions = functions.value;
+      base.directives = directives.value;
       return base;
     });
     const emitEvent = async (eventName) => {
@@ -1448,28 +1519,33 @@ var ElementRenderer = defineComponent6({
         return h2(ElementRenderer, {
           key: childKey,
           element: childElement,
+          elementKey: childKey,
           spec: props.spec,
           registry: props.registry,
           loading: props.loading,
           fallback: props.fallback
         });
       }).filter((n) => n !== null) ?? void 0;
+      const componentVNode = h2(
+        Component,
+        {
+          element: resolvedElement,
+          emit: emitEvent,
+          on: onEvent,
+          bindings: elementBindings,
+          loading: props.loading
+        },
+        { default: () => childrenVNodes }
+      );
+      const tagged = devtoolsActive.value && props.elementKey ? h2(
+        "span",
+        { "data-jr-key": props.elementKey, style: "display:contents" },
+        [componentVNode]
+      ) : componentVNode;
       return h2(
         ElementErrorBoundary,
         { elementType: resolvedElement.type },
-        {
-          default: () => h2(
-            Component,
-            {
-              element: resolvedElement,
-              emit: emitEvent,
-              on: onEvent,
-              bindings: elementBindings,
-              loading: props.loading
-            },
-            { default: () => childrenVNodes }
-          )
-        }
+        { default: () => tagged }
       );
     };
   }
@@ -1527,6 +1603,7 @@ var RepeatChildren = defineComponent6({
               return h2(ElementRenderer, {
                 key: childKey,
                 element: childElement,
+                elementKey: childKey,
                 spec: props.spec,
                 registry: props.registry,
                 loading: props.loading,
@@ -1566,6 +1643,7 @@ var Renderer = defineComponent6({
       if (!rootElement) return null;
       return h2(ElementRenderer, {
         element: rootElement,
+        elementKey: props.spec.root,
         spec: props.spec,
         registry: props.registry,
         loading: props.loading,
@@ -1619,6 +1697,10 @@ var JSONUIProvider = defineComponent6({
       type: Object,
       default: void 0
     },
+    directives: {
+      type: Array,
+      default: void 0
+    },
     onStateChange: {
       type: Function,
       default: void 0
@@ -1646,10 +1728,16 @@ var JSONUIProvider = defineComponent6({
                     FunctionsProvider,
                     { functions: props.functions },
                     {
-                      default: () => [
-                        slots.default?.(),
-                        h2(ConfirmationDialogManager)
-                      ]
+                      default: () => h2(
+                        DirectivesProvider,
+                        { directives: props.directives },
+                        {
+                          default: () => [
+                            slots.default?.(),
+                            h2(ConfirmationDialogManager)
+                          ]
+                        }
+                      )
                     }
                   )
                 }
@@ -1755,6 +1843,10 @@ function createRenderer(catalog, components) {
         type: Object,
         default: void 0
       },
+      directives: {
+        type: Array,
+        default: void 0
+      },
       loading: {
         type: Boolean,
         default: void 0
@@ -1793,15 +1885,21 @@ function createRenderer(catalog, components) {
                       FunctionsProvider,
                       { functions: rendererProps.functions },
                       {
-                        default: () => [
-                          h2(Renderer, {
-                            spec: rendererProps.spec,
-                            registry,
-                            loading: rendererProps.loading,
-                            fallback: rendererProps.fallback
-                          }),
-                          h2(ConfirmationDialogManager)
-                        ]
+                        default: () => h2(
+                          DirectivesProvider,
+                          { directives: rendererProps.directives },
+                          {
+                            default: () => [
+                              h2(Renderer, {
+                                spec: rendererProps.spec,
+                                registry,
+                                loading: rendererProps.loading,
+                                fallback: rendererProps.fallback
+                              }),
+                              h2(ConfirmationDialogManager)
+                            ]
+                          }
+                        )
                       }
                     )
                   }