@json-render/vue 0.16.0 → 0.18.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,9 @@ import {
   resolveBindings,
   resolveActionParam,
   evaluateVisibility as evaluateVisibility2,
-  getByPath as getByPath3
+  getByPath as getByPath3,
+  isDevtoolsActive,
+  subscribeDevtoolsActive
 } from "@json-render/core";
 var EMPTY_FUNCTIONS = {};
 var FUNCTIONS_KEY = /* @__PURE__ */ Symbol("json-render:functions");
@@ -1309,6 +1341,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 +1356,10 @@ var ElementRenderer = defineComponent6({
       type: Object,
       required: true
     },
+    elementKey: {
+      type: String,
+      default: void 0
+    },
     spec: {
       type: Object,
       required: true
@@ -1334,6 +1378,7 @@ var ElementRenderer = defineComponent6({
     }
   },
   setup(props) {
+    const devtoolsActive = useDevtoolsActive();
     const repeatScope = useRepeatScope();
     const { ctx: visibilityCtx } = useVisibility();
     const { execute } = useActions();
@@ -1448,28 +1493,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 +1577,7 @@ var RepeatChildren = defineComponent6({
               return h2(ElementRenderer, {
                 key: childKey,
                 element: childElement,
+                elementKey: childKey,
                 spec: props.spec,
                 registry: props.registry,
                 loading: props.loading,
@@ -1566,6 +1617,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,