@json-render/vue 0.16.0 → 0.18.0

package/dist/index.js

@@ -422,109 +422,141 @@ var ActionProvider = (0, import_vue4.defineComponent)({
     };
     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);
+      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 === "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 (0, import_core4.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 (0, import_core4.executeAction)({
             action: resolved,
@@ -541,26 +573,20 @@ var ActionProvider = (0, import_vue4.defineComponent)({
           removeLoading.delete(resolved.action);
           loadingActions.value = removeLoading;
         }
-        return;
-      }
-      const addLoading = new Set(loadingActions.value);
-      addLoading.add(resolved.action);
-      loadingActions.value = addLoading;
-      try {
-        await (0, import_core4.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();
+        (0, import_core4.notifyActionSettle)({
+          id: dispatchId,
+          name: resolved.action,
+          ok: __ok,
+          at: now,
+          durationMs: now - dispatchedAt,
+          error: __error
+        });
       }
     };
     const confirm = () => pendingConfirmation.value?.resolve();
@@ -1372,6 +1398,14 @@ async function resolveAndExecuteBindings(actionBindings, ctx, getSnapshot, execu
     if (cancelled?.()) break;
   }
 }
+function useDevtoolsActive() {
+  const active = (0, import_vue7.ref)((0, import_core7.isDevtoolsActive)());
+  const unsub = (0, import_core7.subscribeDevtoolsActive)(() => {
+    active.value = (0, import_core7.isDevtoolsActive)();
+  });
+  (0, import_vue7.onBeforeUnmount)(unsub);
+  return active;
+}
 var ElementRenderer = (0, import_vue7.defineComponent)({
   name: "JsonRenderElement",
   props: {
@@ -1379,6 +1413,10 @@ var ElementRenderer = (0, import_vue7.defineComponent)({
       type: Object,
       required: true
     },
+    elementKey: {
+      type: String,
+      default: void 0
+    },
     spec: {
       type: Object,
       required: true
@@ -1397,6 +1435,7 @@ var ElementRenderer = (0, import_vue7.defineComponent)({
     }
   },
   setup(props) {
+    const devtoolsActive = useDevtoolsActive();
     const repeatScope = useRepeatScope();
     const { ctx: visibilityCtx } = useVisibility();
     const { execute } = useActions();
@@ -1511,28 +1550,33 @@ var ElementRenderer = (0, import_vue7.defineComponent)({
         return (0, import_vue7.h)(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 = (0, import_vue7.h)(
+        Component,
+        {
+          element: resolvedElement,
+          emit: emitEvent,
+          on: onEvent,
+          bindings: elementBindings,
+          loading: props.loading
+        },
+        { default: () => childrenVNodes }
+      );
+      const tagged = devtoolsActive.value && props.elementKey ? (0, import_vue7.h)(
+        "span",
+        { "data-jr-key": props.elementKey, style: "display:contents" },
+        [componentVNode]
+      ) : componentVNode;
       return (0, import_vue7.h)(
         ElementErrorBoundary,
         { elementType: resolvedElement.type },
-        {
-          default: () => (0, import_vue7.h)(
-            Component,
-            {
-              element: resolvedElement,
-              emit: emitEvent,
-              on: onEvent,
-              bindings: elementBindings,
-              loading: props.loading
-            },
-            { default: () => childrenVNodes }
-          )
-        }
+        { default: () => tagged }
       );
     };
   }
@@ -1590,6 +1634,7 @@ var RepeatChildren = (0, import_vue7.defineComponent)({
               return (0, import_vue7.h)(ElementRenderer, {
                 key: childKey,
                 element: childElement,
+                elementKey: childKey,
                 spec: props.spec,
                 registry: props.registry,
                 loading: props.loading,
@@ -1629,6 +1674,7 @@ var Renderer = (0, import_vue7.defineComponent)({
       if (!rootElement) return null;
       return (0, import_vue7.h)(ElementRenderer, {
         element: rootElement,
+        elementKey: props.spec.root,
         spec: props.spec,
         registry: props.registry,
         loading: props.loading,