@ea-lab/reactive-json 1.4.0 → 2.0.1

package/dist/engine/ReactiveJsonRoot.js

@@ -1,375 +1,316 @@
-import { jsx as C, jsxs as L, Fragment as pt } from "react/jsx-runtime";
-import { a as _ } from "../httpRequestCommon-C7MsJIKA.js";
-import { l as ut } from "../lodash-CYNxjS-I.js";
-import { useReducer as dt, useState as w, useRef as ft, useEffect as q } from "react";
-import { r as mt } from "../dnd-kit-sortable-tree.esm-Cz1RJyIg.js";
-import { coreComponentsPlugin as tt } from "../coreComponentsPlugin.js";
-import { mergeComponentCollections as ht } from "./ComponentCollector.js";
-import { EventDispatcherProvider as gt } from "./EventDispatcherProvider.js";
-import { GlobalDataContextProvider as yt } from "./GlobalDataContextProvider.js";
-import Dt from "./ParsingDebugDisplay/ParsingDebugDisplay.js";
-import { TemplateContext as Pt } from "./TemplateContext.js";
-import { dataLocationToPath as Ct } from "./TemplateSystem.js";
-import { alterData as bt } from "./utility/alterData.js";
-import { applyDataMapping as Et } from "./utility/dataMappingSystem.js";
-import { parseRjBuild as vt } from "./utility/parseRjBuild.js";
-import { stringToBoolean as wt } from "./utility/stringToBoolean.js";
-import { View as St } from "./View.js";
-const xt = ({
-  dataOverride: S,
-  dataFetchMethod: M,
-  dataUrl: z,
-  debugMode: et,
-  DebugModeContentWrapper: A,
-  DebugModeDataWrapper: K,
-  DebugModeRootWrapper: rt,
-  headersForData: X,
-  headersForRjBuild: c,
-  maybeRawAppData: $,
-  maybeRawAppRjBuild: d,
-  plugins: H,
+import { jsx as p, jsxs as H, Fragment as st } from "react/jsx-runtime";
+import { a as J } from "../index-BUPRVmV-.js";
+import { useRef as K, useState as Q, useEffect as V, useMemo as it } from "react";
+import { r as ct } from "../dnd-kit-sortable-tree.esm-Cz1RJyIg.js";
+import { coreComponentsPlugin as X } from "../coreComponentsPlugin.js";
+import { mergeComponentCollections as pt } from "./ComponentCollector.js";
+import { DataStore as lt } from "./DataStore.js";
+import { EventDispatcherProvider as dt } from "./EventDispatcherProvider.js";
+import { GlobalDataContext as ut } from "./GlobalDataContext.js";
+import mt from "./ParsingDebugDisplay/ParsingDebugDisplay.js";
+import { StoreContext as ft } from "./StoreContext.js";
+import { TemplateContext as gt } from "./TemplateContext.js";
+import { dataLocationToPath as ht } from "./TemplateSystem.js";
+import { useReactiveData as Pt } from "./hook/useReactiveData.js";
+import { alterData as yt } from "./utility/alterData.js";
+import { applyDataMapping as Dt } from "./utility/dataMappingSystem.js";
+import { parseRjBuild as wt } from "./utility/parseRjBuild.js";
+import { stringToBoolean as bt } from "./utility/stringToBoolean.js";
+import { View as Ct } from "./View.js";
+const St = ({ Wrapper: m }) => {
+  const E = Pt("");
+  return /* @__PURE__ */ p(m, { children: JSON.stringify(E, null, "  ") });
+}, xt = ({
+  dataOverride: m,
+  dataFetchMethod: E,
+  dataUrl: G,
+  debugMode: Y,
+  DebugModeContentWrapper: L,
+  DebugModeDataWrapper: O,
+  DebugModeRootWrapper: Z,
+  headersForData: z,
+  headersForRjBuild: s,
+  maybeRawAppData: I,
+  maybeRawAppRjBuild: w,
+  plugins: N,
   rjBuildFetchMethod: b,
   rjBuildUrl: f,
-  upstreamUpdateCallbacks: N
+  upstreamUpdateCallbacks: R
 }) => {
-  const h = [];
-  M && (h.push({
+  const g = [];
+  E && (g.push({
     deprecatedProperty: "dataFetchMethod",
     newProperty: "rjBuildFetchMethod"
-  }), b = M), z && (h.push({
+  }), b = E), G && (g.push({
     deprecatedProperty: "dataUrl",
     newProperty: "rjBuildUrl"
-  }), f = z), X && (h.push({
+  }), f = G), z && (g.push({
     deprecatedProperty: "headersForData",
     newProperty: "headersForRjBuild"
-  }), c = X), $ && (h.push({
+  }), s = z), I && (g.push({
     deprecatedProperty: "maybeRawAppData",
     newProperty: "maybeRawAppRjBuild"
-  }), d = $), h.length > 0 && console.warn(
-    "A ReactiveJsonRoot component got the following deprecated properties that must be replaced: " + h.map((t) => t.deprecatedProperty + " -> " + t.newProperty).join(", ")
+  }), w = I), g.length > 0 && console.warn(
+    "A ReactiveJsonRoot component got the following deprecated properties that must be replaced: " + g.map((t) => t.deprecatedProperty + " -> " + t.newProperty).join(", ")
   );
-  const [x, g] = dt(
-    (t, a) => {
-      switch (a.type) {
-        case "setData":
-          return { updateId: 0, realCurrentData: a.data };
-        case "updateData":
-          return it(t, a.path, a.value, a.updateMode);
-        default:
-          return t;
-      }
-    },
-    { updateId: 0, realCurrentData: {} }
-  ), [at, ot] = w({}), [nt, Q] = w({}), [st, Y] = w([]), [I, T] = w(() => {
-    if (d)
-      return typeof d == "string" ? d : JSON.stringify(d);
-  }), [V, Z] = w(null), n = ft(null);
-  q(() => () => {
-    typeof document < "u" && n.current && n.current.parentNode && (n.current.parentNode.removeChild(n.current), n.current = null);
+  const a = K(new lt({})).current, [d, C] = Q({
+    templates: {},
+    renderView: {},
+    items: [],
+    rawAppRjBuild: null
+  }), [T, M] = Q(null), o = K(null);
+  V(() => () => {
+    typeof document < "u" && o.current && o.current.parentNode && (o.current.parentNode.removeChild(o.current), o.current = null);
   }, []);
-  const E = H ? ht([tt, H]) : tt;
-  q(() => {
-    f && (typeof b == "string" && b.toLowerCase() === "post" ? _.post(f, {
-      headers: c
-    }).then((t) => {
-      T(t.data);
-    }) : _.get(f, {
-      headers: c
-    }).then((t) => {
-      T(t.data);
-    }));
-  }, [f, c]), q(() => {
-    if (!I)
-      return;
-    const t = vt(I);
+  const S = it(
+    () => N ? pt([X, N]) : X,
+    [N]
+  );
+  V(() => {
+    let t = w;
+    typeof t == "string" || t && (t = JSON.stringify(t)), t && C((r) => ({ ...r, rawAppRjBuild: t }));
+  }, [w]), V(() => {
+    if (!f) return;
+    const t = {
+      method: b || "GET",
+      url: f,
+      headers: s
+    };
+    t.method.toLowerCase() === "post" ? J.post(t.url, {}, { headers: t.headers }).then((r) => {
+      C((i) => ({ ...i, rawAppRjBuild: r.data }));
+    }) : J.get(t.url, { headers: t.headers }).then((r) => {
+      C((i) => ({ ...i, rawAppRjBuild: r.data }));
+    });
+  }, [f, s, b]), V(() => {
+    if (!d.rawAppRjBuild) return;
+    const t = wt(d.rawAppRjBuild);
     if (!t.success) {
       if (console.group(
         `Tried to load the app's RjBuild but the ${t.format} content could not be parsed.`
       ), console.error(t.error.message), console.debug("Context:", {
         rjBuildUrl: f,
         rjBuildFetchMethod: b,
-        headersForRjBuild: c,
-        maybeRawAppRjBuild: d,
-        dataOverride: S
+        headersForRjBuild: s,
+        maybeRawAppRjBuild: w,
+        dataOverride: m
       }), console.debug("Error details:", t.error), console.groupEnd(), typeof document < "u") {
         let e = document.getElementById("rj-parsing-error-root");
-        if (e || (e = document.createElement("div"), e.id = "rj-parsing-error-root", document.body.appendChild(e)), !n.current) {
-          const p = document.createElement("div");
-          e.appendChild(p), n.current = p;
+        if (e || (e = document.createElement("div"), e.id = "rj-parsing-error-root", document.body.appendChild(e)), !o.current) {
+          const l = document.createElement("div");
+          e.appendChild(l), o.current = l;
         }
-        Z(
-          mt.createPortal(
-            /* @__PURE__ */ C(
-              Dt,
+        M(
+          ct.createPortal(
+            /* @__PURE__ */ p(
+              mt,
               {
                 processedRjBuild: t,
                 errorContext: {
                   rjBuildUrl: f,
                   rjBuildFetchMethod: b,
-                  headersForRjBuild: c,
-                  maybeRawAppRjBuild: d
+                  headersForRjBuild: s,
+                  maybeRawAppRjBuild: w
                 }
               }
             ),
-            n.current,
+            o.current,
             () => {
-              n.current && (n.current.parentNode.removeChild(n.current), n.current = null);
+              o.current && (o.current.parentNode.removeChild(o.current), o.current = null);
             }
           )
         );
       }
       return;
     }
-    V && (Z(null), typeof document < "u" && n.current && n.current.parentNode && (n.current.parentNode.removeChild(n.current), n.current = null));
-    const a = t.data;
-    ot(a.templates ?? a.listForms), !a.templates && a.listForms && console.log(
-      "'listForms' needs to be renamed to 'templates'. The support for 'listForms' will be removed in the next releases of reactive-json."
-    );
-    let i = S === void 0 ? a.data : S;
-    const s = a.additionalDataSource;
-    if (!Array.isArray(s) || s.length === 0) {
-      g({ type: "setData", data: i }), Q(a.renderView), Y(Object.keys(a.renderView));
+    T && (M(null), typeof document < "u" && o.current && o.current.parentNode && (o.current.parentNode.removeChild(o.current), o.current = null));
+    const r = t.data, i = m !== void 0 ? m : r.data;
+    a.set("", i);
+    const n = {
+      templates: r.templates ?? r.listForms ?? {},
+      renderView: r.renderView ?? {},
+      items: Object.keys(r.renderView ?? {}),
+      rawAppRjBuild: d.rawAppRjBuild
+    }, h = r.additionalDataSource;
+    if (!Array.isArray(h) || h.length === 0) {
+      C((e) => ({ ...e, ...n }));
       return;
     }
-    const m = {
-      headersForRjBuild: c,
-      plugins: E,
-      templateData: i,
-      templatePath: "data",
-      setData: R,
-      updateData: W
-    }, r = {
-      templateData: i,
-      templatePath: "data"
-    }, l = s.filter((e) => e.blocking === !0), v = s.filter((e) => e.blocking !== !0), o = async (e, p) => {
-      var y;
+    const x = h.filter((e) => e.blocking === !0), A = h.filter((e) => e.blocking !== !0), B = (e) => !e || e === "data" ? "" : e.startsWith("data.") ? e.substring(5) : e, _ = async (e, l) => {
+      var P;
       try {
         if (!e.src) {
-          console.warn("additionalDataSource item number " + p + " missing 'src' property.", e);
+          console.warn("additionalDataSource item number " + l + " missing 'src' property.", e);
           return;
         }
-        const D = {
-          method: ((y = e.method) == null ? void 0 : y.toUpperCase()) || "GET",
+        const y = {
+          method: ((P = e.method) == null ? void 0 : P.toUpperCase()) || "GET",
           url: e.src
         };
-        c && Object.keys(c).length > 0 && (D.headers = c);
-        const k = await _(D), ct = {
-          url: D.url,
-          method: D.method,
-          headers: D.headers || {},
-          body: D.data
-        }, lt = {
+        s && Object.keys(s).length > 0 && (y.headers = s);
+        const k = await J(y), rt = {
+          url: y.url,
+          method: y.method,
+          headers: y.headers || {},
+          body: y.data
+        }, ot = {
           headers: k.headers || {},
           status: k.status,
           data: k.data
-        }, P = bt({
-          requestContext: ct,
-          responseContext: lt,
+        }, D = yt({
+          requestContext: rt,
+          responseContext: ot,
           responseBody: k.data,
           // additionalDataSource always processes raw data, not RjBuild.
           isRjBuild: !1,
-          dataProcessors: (E == null ? void 0 : E.dataProcessor) || {}
+          dataProcessors: (S == null ? void 0 : S.dataProcessor) || {}
         });
-        if (e.dataMapping)
+        if (e.dataMapping) {
+          const u = {
+            headersForRjBuild: s,
+            plugins: S,
+            get templateData() {
+              return a.get("");
+            },
+            templatePath: "data",
+            setData: (c) => a.set("", c),
+            updateData: (c, j, at) => {
+              const nt = B(j);
+              a.set(nt, c, at);
+            }
+          }, v = {
+            get templateData() {
+              return a.get("");
+            },
+            templatePath: "data"
+          };
           try {
-            Et({
+            Dt({
               dataMapping: e.dataMapping,
-              responseData: P,
-              globalDataContext: m,
-              templateContext: r
+              responseData: D,
+              globalDataContext: u,
+              templateContext: v
             });
             return;
-          } catch (u) {
-            console.error("Error applying dataMapping for additionalDataSource:", u);
+          } catch (c) {
+            console.error("Error applying dataMapping for additionalDataSource:", c);
           }
+        }
         if (!e.path) {
-          if (typeof P != "object" || Array.isArray(P)) {
+          if (typeof D != "object" || Array.isArray(D)) {
             console.warn(
               "additionalDataSource data cannot be merged at root - must be an object:",
-              P
+              D
             );
             return;
           }
-          Object.entries(P).forEach(([u, G]) => {
-            g({
-              type: "updateData",
-              path: u,
-              value: G
-            });
+          Object.entries(D).forEach(([u, v]) => {
+            a.set(u, v);
           });
           return;
         }
         try {
-          const u = Ct({
+          const u = {
+            templateData: a.get(""),
+            // use current snapshot
+            templatePath: "data"
+          }, v = {
+            templateData: a.get(""),
+            // use current snapshot
+            templatePath: "data"
+          }, c = ht({
             dataLocation: e.path,
             currentPath: "data",
-            globalDataContext: m,
-            templateContext: r
+            globalDataContext: u,
+            templateContext: v
           });
-          if (typeof u != "string") {
+          if (typeof c != "string") {
             console.warn(
               "additionalDataSource path evaluation did not result in a string:",
               e.path,
               "->",
-              u
+              c
             );
             return;
           }
-          const G = u.substring(5);
-          g({
-            type: "updateData",
-            path: G,
-            value: P
-          });
+          const j = B(c);
+          a.set(j, D);
         } catch (u) {
           console.error("Error evaluating additionalDataSource path:", e.path, u);
         }
-      } catch (B) {
-        console.error("Error fetching additional data source:", e.src, B);
+      } catch ($) {
+        console.error("Error fetching additional data source:", e.src, $);
       }
     };
-    g({ type: "setData", data: i }), (async () => {
-      if (l.length > 0) {
-        const e = l.map((p, y) => o(p, y));
-        await Promise.allSettled(e).catch((p) => {
-          console.error("Error processing blocking additionalDataSource:", p);
-        });
+    (async () => {
+      if (x.length > 0) {
+        const e = x.map((l, P) => _(l, P));
+        await Promise.allSettled(e);
       }
-      if (Q(a.renderView), Y(Object.keys(a.renderView)), v.length > 0) {
-        const e = v.map(
-          (p, y) => o(p, l.length + y)
+      if (C((e) => ({ ...e, ...n })), A.length > 0) {
+        const e = A.map(
+          (l, P) => _(l, x.length + P)
         );
         Promise.allSettled(e);
       }
     })();
-  }, [I, S, c]);
-  function j(t, a, i) {
-    if (!N || N.size === 0)
+  }, [d.rawAppRjBuild, m, a]);
+  function W(t, r, i) {
+    if (!R || R.size === 0)
       return !1;
-    for (const [s, m] of N)
-      if (t === s || t.startsWith(s + ".") || s === "") {
-        const r = s === "" ? t : t.substring(s.length + 1);
+    for (const [n, h] of R)
+      if (t === n || t.startsWith(n + ".") || n === "") {
+        const x = n === "" ? t : t.substring(n.length + 1);
         try {
-          return m(a, r, i), !0;
-        } catch (l) {
-          console.warn("Error during upstream update:", l);
+          return h(r, x, i), !0;
+        } catch (A) {
+          console.warn("Error during upstream update:", A);
           break;
         }
       }
     return !1;
   }
-  function W(t, a, i = void 0) {
-    let s = a.replace("data.", "");
-    j(s, t, i) || g({
-      type: "updateData",
-      path: s,
-      value: t,
-      updateMode: i
-    });
-  }
-  function R(t) {
-    j("", t, void 0) || g({
-      type: "setData",
-      data: t
-    });
-  }
-  function it(t, a, i, s = void 0) {
-    const m = a.split(".");
-    (typeof t.realCurrentData != "object" || t.realCurrentData === null || Array.isArray(t.realCurrentData)) && (t.realCurrentData = {});
-    let r = t.realCurrentData;
-    for (let l = 0, v = m.length; l < v; l++) {
-      const o = m[l];
-      if (l === v - 1) {
-        if (s === "remove" && Array.isArray(r))
-          r.splice(o, 1);
-        else if (s === "move")
-          if (i.increment) {
-            if (!Array.isArray(r))
-              return t;
-            const J = Math.min(
-              r.length,
-              Math.max(0, parseInt(o) + parseInt(i.increment))
-            );
-            if (J === parseInt(o))
-              return t;
-            const e = r.splice(o, 1);
-            if (e.length < 1)
-              return t;
-            r.splice(J, 0, e[0]);
-          } else
-            return t;
-        else if (i === void 0)
-          delete r[o];
-        else {
-          if (ut.isEqual(i, r[o]))
-            return t;
-          s === "add" ? (r[o] === void 0 && (r[o] = []), r[o].push(i)) : r[o] = i;
-        }
-        return {
-          // Using modulo in case of massive update counts in long frontend sessions.
-          updateId: (t.updateId ?? 0) % (Number.MAX_SAFE_INTEGER - 1) + 1,
-          realCurrentData: t.realCurrentData
-        };
-      }
-      if (r.hasOwnProperty(o)) {
-        (typeof r[o] != "object" || r[o] === null) && (r[o] = {}), r = r[o];
-        continue;
-      }
-      r[o] = {}, r = r[o];
-    }
-    throw new Error("Could not update data.");
-  }
-  if (!I)
-    return null;
-  const U = st.map((t) => {
-    var a;
-    return /* @__PURE__ */ C(
-      St,
-      {
-        datafield: t,
-        props: nt[t],
-        path: "data." + t,
-        currentData: (a = x.realCurrentData) == null ? void 0 : a[t]
-      },
-      t
-    );
-  }), O = wt(et), F = /* @__PURE__ */ C(gt, { children: /* @__PURE__ */ L(
-    yt,
+  const U = (t) => {
+    W("", t, void 0) || a.set("", t);
+  }, F = (t, r, i) => {
+    const n = r.startsWith("data.") ? r.substring(5) : r === "data" ? "" : r;
+    W(n, t, i) || a.set(n, t, i);
+  }, tt = {
+    element: d.templates,
+    headersForRjBuild: s,
+    plugins: S,
+    ReactiveJsonRoot: xt,
+    setData: U,
+    updateData: F,
+    // experimental: expose store for advanced usage
+    store: a,
+    // fallback: get data from store directly (non-reactive access)
+    get templateData() {
+      return a.get("");
+    },
+    templatePath: "data"
+  }, q = d.items.map((t) => /* @__PURE__ */ p(
+    Ct,
     {
-      value: {
-        element: at,
-        headersForRjBuild: c,
-        plugins: E,
-        // Expose the root component to avoid import cycles in core plugins.
-        ReactiveJsonRoot: xt,
-        setData: R,
-        setRawAppRjBuild: T,
-        templateData: x.realCurrentData,
-        templatePath: "data",
-        updateData: W
-      },
-      children: [
-        /* @__PURE__ */ C(
-          Pt.Provider,
-          {
-            value: {
-              templateData: x.realCurrentData,
-              templatePath: "data"
-            },
-            children: O && A ? /* @__PURE__ */ C(A, { children: U }) : U
-          }
-        ),
-        O ? K && /* @__PURE__ */ C(K, { children: JSON.stringify(x.realCurrentData, null, "  ") }) : null
-      ]
-    }
-  ) });
-  return O && A ? /* @__PURE__ */ L(rt, { children: [
-    F,
-    V
-  ] }) : /* @__PURE__ */ L(pt, { children: [
-    F,
-    V
-  ] });
+      datafield: t,
+      path: "data." + t,
+      props: d.renderView[t]
+    },
+    t
+  )), et = bt(Y);
+  return /* @__PURE__ */ p(ft.Provider, { value: a, children: /* @__PURE__ */ p(dt, { children: /* @__PURE__ */ p(ut.Provider, { value: tt, children: /* @__PURE__ */ p(gt.Provider, { value: {
+    // Same here, getter for compatibility, but won't trigger updates
+    get templateData() {
+      return a.get("");
+    },
+    templatePath: "data"
+  }, children: et && L ? /* @__PURE__ */ H(Z, { children: [
+    /* @__PURE__ */ p(L, { children: q }),
+    O && /* @__PURE__ */ p(St, { Wrapper: O }),
+    T
+  ] }) : /* @__PURE__ */ H(st, { children: [
+    q,
+    T
+  ] }) }) }) }) });
 };
 export {
   xt as ReactiveJsonRoot

package/dist/engine/StoreContext.js

@@ -0,0 +1,17 @@
+import { jsx as n } from "react/jsx-runtime";
+import { createContext as s, useRef as u, useContext as i } from "react";
+import { DataStore as c } from "./DataStore.js";
+const t = s(null), f = ({ children: r, initialData: e }) => {
+  const o = u(new c(e)).current;
+  return /* @__PURE__ */ n(t.Provider, { value: o, children: r });
+}, x = () => {
+  const r = i(t);
+  if (!r)
+    throw new Error("useStore must be used within a StoreProvider");
+  return r;
+};
+export {
+  t as StoreContext,
+  f as StoreProvider,
+  x as useStore
+};