@ea-lab/reactive-json 2.0.1 → 2.2.0

package/dist/component/element/special/DataSync.js

@@ -1,100 +1,109 @@
-import { jsx as _ } from "react/jsx-runtime";
-import { useContext as x, useRef as m, useCallback as q, useEffect as T } from "react";
-import { ActionDependant as A } from "../../../engine/Actions.js";
-import { GlobalDataContext as $ } from "../../../engine/GlobalDataContext.js";
-import { useStore as B } from "../../../engine/StoreContext.js";
-import { TemplateContext as G } from "../../../engine/TemplateContext.js";
-import { dataLocationToPath as v } from "../../../engine/TemplateSystem.js";
-import { a as M } from "../../../index-BUPRVmV-.js";
-import { l as C } from "../../../lodash-CYNxjS-I.js";
-const E = (t) => t === "data" ? "" : t && t.startsWith("data.") ? t.substring(5) : t, Q = ({ props: t }) => {
-  const S = x($), y = x(G), e = B(), p = m(void 0), d = m(null), a = m(null), u = m(null), g = m(!1), c = m(0), b = t.mode || "onIdle", R = t.idleDelay || 1e3, D = t.maxRetries ?? 0, I = t.retryDelay ?? 5e3;
-  let o = null;
+import { jsx as L } from "react/jsx-runtime";
+import { useContext as P, useRef as l, useCallback as H, useEffect as k } from "react";
+import { ActionDependant as M } from "../../../engine/Actions.js";
+import { GlobalDataContext as N } from "../../../engine/GlobalDataContext.js";
+import { useStore as U } from "../../../engine/StoreContext.js";
+import { TemplateContext as W } from "../../../engine/TemplateContext.js";
+import { dataLocationToPath as w } from "../../../engine/TemplateSystem.js";
+import { a as j } from "../../../index-BUPRVmV-.js";
+import { l as _ } from "../../../lodash-CYNxjS-I.js";
+const q = (t) => t === "data" ? "" : t && t.startsWith("data.") ? t.substring(5) : t, tt = ({ props: t }) => {
+  const x = P(N), h = P(W), e = U(), D = l(void 0), g = l(null), u = l(null), f = l(null), v = l(!1), c = l(0), b = l(null), S = t.mode || "onIdle", R = t.idleDelay || 1e3, C = t.maxRetries ?? 0, A = t.retryDelay ?? 5e3;
+  let n = null;
   try {
-    o = E(v({
+    n = q(w({
       dataLocation: t.path,
-      currentPath: y.templatePath,
-      globalDataContext: S,
-      templateContext: y
+      currentPath: h.templatePath,
+      globalDataContext: x,
+      templateContext: h
     }));
   } catch (r) {
     console.error("DataSync: Invalid path", t.path, r);
   }
-  let i = null;
+  let m = null;
   if (t.trigger)
     try {
-      i = E(v({
+      m = q(w({
         dataLocation: t.trigger,
-        currentPath: y.templatePath,
-        globalDataContext: S,
-        templateContext: y
+        currentPath: h.templatePath,
+        globalDataContext: x,
+        templateContext: h
       }));
     } catch (r) {
       console.error("DataSync: Invalid trigger path", t.trigger, r);
     }
-  const l = q(async (r) => {
-    var f;
+  const d = H(async (r) => {
+    var y, a, i, E, T, I;
     if (!r || !r.submission_url) {
       r && console.warn("DataSync: Missing submission_url in data object", r);
       return;
     }
-    if (!g.current && !(c.current > D)) {
-      g.current = !0, c.current++, p.current = r.data, e.set(`${o}.status`, {
+    if (!v.current && !(c.current > C)) {
+      v.current = !0, c.current++, D.current = r.data, e.set(`${n}.status`, {
         type: "info",
         // TODO: translate this.
         message: "Synchronisation en cours..."
       });
       try {
-        const { submission_url: n } = r, h = (await M.post(n, r)).data;
-        d.current = h, c.current = 0, e.set(o, h);
-      } catch (n) {
-        console.error("DataSync error:", n);
-        const s = (f = n.response) == null ? void 0 : f.data;
-        if (s && typeof s == "object" && s.status) {
-          d.current = s, c.current = 0, e.set(o, s), g.current = !1;
+        const { submission_url: s } = r, o = await j.post(s, r), p = o.data;
+        g.current = p, c.current = 0, e.set(n, p), (y = b.current) == null || y.dispatchEvent(new CustomEvent("syncSuccess", {
+          bubbles: !0,
+          detail: { value: p, responseContext: { status: o.status } }
+        }));
+      } catch (s) {
+        console.error("DataSync error:", s);
+        const o = (a = s.response) == null ? void 0 : a.data;
+        if (o && typeof o == "object" && o.status) {
+          g.current = o, c.current = 0, e.set(n, o), (E = b.current) == null || E.dispatchEvent(new CustomEvent("syncError", {
+            bubbles: !0,
+            detail: { value: o, responseContext: { status: (i = s.response) == null ? void 0 : i.status } }
+          })), v.current = !1;
           return;
         }
-        const h = {
+        const p = {
           type: "error",
-          message: n.message || "Unknown error"
+          message: s.message || "Unknown error"
         };
-        e.set(`${o}.status`, h);
-        const L = n.response && n.response.status >= 500, P = !n.response && typeof navigator < "u" && !navigator.onLine;
-        (L || P) && c.current <= D && (u.current = setTimeout(() => {
-          const k = e.get(o);
-          l(k);
-        }, I));
+        e.set(`${n}.status`, p), (I = b.current) == null || I.dispatchEvent(new CustomEvent("syncError", {
+          bubbles: !0,
+          detail: { value: o, responseContext: { status: (T = s.response) == null ? void 0 : T.status } }
+        }));
+        const $ = s.response && s.response.status >= 500, B = !s.response && typeof navigator < "u" && !navigator.onLine;
+        ($ || B) && c.current <= C && (f.current = setTimeout(() => {
+          const G = e.get(n);
+          d(G);
+        }, A));
       } finally {
-        g.current = !1;
+        v.current = !1;
       }
     }
-  }, [e, o, D]);
-  return T(() => {
-    if (!e || o === null) return;
+  }, [e, n, C]);
+  return k(() => {
+    if (!e || n === null) return;
     const r = () => {
-      const n = e.get(o);
-      if (!n || n === d.current)
+      const a = e.get(n);
+      if (!a || a === g.current)
         return;
-      const s = n.data;
-      p.current !== void 0 && C.isEqual(s, p.current) || d.current && C.isEqual(s, d.current.data) || (c.current = 0, u.current && (clearTimeout(u.current), u.current = null), b === "immediate" ? l(n) : b === "onIdle" && (a.current && clearTimeout(a.current), a.current = setTimeout(() => {
-        l(n);
+      const i = a.data;
+      D.current !== void 0 && _.isEqual(i, D.current) || g.current && _.isEqual(i, g.current.data) || (c.current = 0, f.current && (clearTimeout(f.current), f.current = null), S === "immediate" ? d(a) : S === "onIdle" && (u.current && clearTimeout(u.current), u.current = setTimeout(() => {
+        d(a);
       }, R)));
-    }, f = e.subscribe(o, r);
+    }, y = e.subscribe(n, r);
     return () => {
-      f(), a.current && clearTimeout(a.current), u.current && clearTimeout(u.current);
+      y(), u.current && clearTimeout(u.current), f.current && clearTimeout(f.current);
     };
-  }, [e, o, b, R, l]), T(() => {
-    if (!e || i === null) return;
+  }, [e, n, S, R, d]), k(() => {
+    if (!e || m === null) return;
     const r = () => {
-      if (e.get(i) === !0) {
-        e.set(i, !1), a.current && (clearTimeout(a.current), a.current = null), c.current = 0;
-        const s = e.get(o);
-        l(s);
+      if (e.get(m) === !0) {
+        e.set(m, !1), u.current && (clearTimeout(u.current), u.current = null), c.current = 0;
+        const i = e.get(n);
+        d(i);
       }
-    }, f = e.subscribe(i, r);
-    return () => f();
-  }, [e, i, o, l]), /* @__PURE__ */ _(A, { ...t });
+    }, y = e.subscribe(m, r);
+    return () => y();
+  }, [e, m, n, d]), /* @__PURE__ */ L(M, { ...t, attributesHolderRef: b, children: /* @__PURE__ */ L("span", { ref: b, style: { display: "none" } }) });
 };
 export {
-  Q as DataSync
+  tt as DataSync
 };

package/dist/engine/ReactiveJsonRoot.js

@@ -1,10 +1,10 @@
 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 { a as G } from "../index-BUPRVmV-.js";
+import { useRef as K, useState as Q, useEffect as N, 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 { mergeComponentCollections as lt } from "./ComponentCollector.js";
+import { DataStore as pt } from "./DataStore.js";
 import { EventDispatcherProvider as dt } from "./EventDispatcherProvider.js";
 import { GlobalDataContext as ut } from "./GlobalDataContext.js";
 import mt from "./ParsingDebugDisplay/ParsingDebugDisplay.js";
@@ -15,75 +15,76 @@ 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 }) => {
+import { interpolateSegments as bt } from "./utility/interpolateSegments.js";
+import { stringToBoolean as Ct } from "./utility/stringToBoolean.js";
+import { View as St } from "./View.js";
+const vt = ({ Wrapper: m }) => {
   const E = Pt("");
   return /* @__PURE__ */ p(m, { children: JSON.stringify(E, null, "  ") });
 }, xt = ({
   dataOverride: m,
   dataFetchMethod: E,
-  dataUrl: G,
+  dataUrl: L,
   debugMode: Y,
-  DebugModeContentWrapper: L,
-  DebugModeDataWrapper: O,
+  DebugModeContentWrapper: O,
+  DebugModeDataWrapper: z,
   DebugModeRootWrapper: Z,
-  headersForData: z,
+  headersForData: I,
   headersForRjBuild: s,
-  maybeRawAppData: I,
+  maybeRawAppData: M,
   maybeRawAppRjBuild: w,
-  plugins: N,
+  plugins: R,
   rjBuildFetchMethod: b,
   rjBuildUrl: f,
-  upstreamUpdateCallbacks: R
+  upstreamUpdateCallbacks: T
 }) => {
   const g = [];
   E && (g.push({
     deprecatedProperty: "dataFetchMethod",
     newProperty: "rjBuildFetchMethod"
-  }), b = E), G && (g.push({
+  }), b = E), L && (g.push({
     deprecatedProperty: "dataUrl",
     newProperty: "rjBuildUrl"
-  }), f = G), z && (g.push({
+  }), f = L), I && (g.push({
     deprecatedProperty: "headersForData",
     newProperty: "headersForRjBuild"
-  }), s = z), I && (g.push({
+  }), s = I), M && (g.push({
     deprecatedProperty: "maybeRawAppData",
     newProperty: "maybeRawAppRjBuild"
-  }), w = I), g.length > 0 && console.warn(
+  }), w = M), 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 a = K(new lt({})).current, [d, C] = Q({
+  const o = K(new pt({})).current, [u, 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);
+  }), [j, W] = Q(null), a = K(null);
+  N(() => () => {
+    typeof document < "u" && a.current && a.current.parentNode && (a.current.parentNode.removeChild(a.current), a.current = null);
   }, []);
   const S = it(
-    () => N ? pt([X, N]) : X,
-    [N]
+    () => R ? lt([X, R]) : X,
+    [R]
   );
-  V(() => {
+  N(() => {
     let t = w;
     typeof t == "string" || t && (t = JSON.stringify(t)), t && C((r) => ({ ...r, rawAppRjBuild: t }));
-  }, [w]), V(() => {
+  }, [w]), N(() => {
     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) => {
+    t.method.toLowerCase() === "post" ? G.post(t.url, {}, { headers: t.headers }).then((r) => {
       C((i) => ({ ...i, rawAppRjBuild: r.data }));
-    }) : J.get(t.url, { headers: t.headers }).then((r) => {
+    }) : G.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);
+  }, [f, s, b]), N(() => {
+    if (!u.rawAppRjBuild) return;
+    const t = wt(u.rawAppRjBuild);
     if (!t.success) {
       if (console.group(
         `Tried to load the app's RjBuild but the ${t.format} content could not be parsed.`
@@ -95,11 +96,11 @@ const St = ({ Wrapper: m }) => {
         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)), !o.current) {
-          const l = document.createElement("div");
-          e.appendChild(l), o.current = l;
+        if (e || (e = document.createElement("div"), e.id = "rj-parsing-error-root", document.body.appendChild(e)), !a.current) {
+          const d = document.createElement("div");
+          e.appendChild(d), a.current = d;
         }
-        M(
+        W(
           ct.createPortal(
             /* @__PURE__ */ p(
               mt,
@@ -113,73 +114,74 @@ const St = ({ Wrapper: m }) => {
                 }
               }
             ),
-            o.current,
+            a.current,
             () => {
-              o.current && (o.current.parentNode.removeChild(o.current), o.current = null);
+              a.current && (a.current.parentNode.removeChild(a.current), a.current = null);
             }
           )
         );
       }
       return;
     }
-    T && (M(null), typeof document < "u" && o.current && o.current.parentNode && (o.current.parentNode.removeChild(o.current), o.current = null));
+    j && (W(null), typeof document < "u" && a.current && a.current.parentNode && (a.current.parentNode.removeChild(a.current), a.current = null));
     const r = t.data, i = m !== void 0 ? m : r.data;
-    a.set("", i);
+    o.set("", i);
     const n = {
       templates: r.templates ?? r.listForms ?? {},
       renderView: r.renderView ?? {},
       items: Object.keys(r.renderView ?? {}),
-      rawAppRjBuild: d.rawAppRjBuild
+      rawAppRjBuild: u.rawAppRjBuild
     }, h = r.additionalDataSource;
     if (!Array.isArray(h) || h.length === 0) {
       C((e) => ({ ...e, ...n }));
       return;
     }
-    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) => {
+    const v = h.filter((e) => e.blocking === !0), A = h.filter((e) => e.blocking !== !0), _ = (e) => !e || e === "data" ? "" : e.startsWith("data.") ? e.substring(5) : e, $ = async (e, d) => {
       var P;
       try {
-        if (!e.src) {
-          console.warn("additionalDataSource item number " + l + " missing 'src' property.", e);
+        const k = bt(e.src, (c) => o.get(c));
+        if (!k) {
+          console.warn("additionalDataSource item number " + d + ": could not resolve 'src'.", e);
           return;
         }
         const y = {
           method: ((P = e.method) == null ? void 0 : P.toUpperCase()) || "GET",
-          url: e.src
+          url: k
         };
         s && Object.keys(s).length > 0 && (y.headers = s);
-        const k = await J(y), rt = {
+        const V = await G(y), rt = {
           url: y.url,
           method: y.method,
           headers: y.headers || {},
           body: y.data
         }, ot = {
-          headers: k.headers || {},
-          status: k.status,
-          data: k.data
+          headers: V.headers || {},
+          status: V.status,
+          data: V.data
         }, D = yt({
           requestContext: rt,
           responseContext: ot,
-          responseBody: k.data,
+          responseBody: V.data,
           // additionalDataSource always processes raw data, not RjBuild.
           isRjBuild: !1,
           dataProcessors: (S == null ? void 0 : S.dataProcessor) || {}
         });
         if (e.dataMapping) {
-          const u = {
+          const c = {
             headersForRjBuild: s,
             plugins: S,
             get templateData() {
-              return a.get("");
+              return o.get("");
             },
             templatePath: "data",
-            setData: (c) => a.set("", c),
-            updateData: (c, j, at) => {
-              const nt = B(j);
-              a.set(nt, c, at);
+            setData: (l) => o.set("", l),
+            updateData: (l, J, at) => {
+              const nt = _(J);
+              o.set(nt, l, at);
             }
-          }, v = {
+          }, x = {
             get templateData() {
-              return a.get("");
+              return o.get("");
             },
             templatePath: "data"
           };
@@ -187,12 +189,12 @@ const St = ({ Wrapper: m }) => {
             Dt({
               dataMapping: e.dataMapping,
               responseData: D,
-              globalDataContext: u,
-              templateContext: v
+              globalDataContext: c,
+              templateContext: x
             });
             return;
-          } catch (c) {
-            console.error("Error applying dataMapping for additionalDataSource:", c);
+          } catch (l) {
+            console.error("Error applying dataMapping for additionalDataSource:", l);
           }
         }
         if (!e.path) {
@@ -203,65 +205,65 @@ const St = ({ Wrapper: m }) => {
             );
             return;
           }
-          Object.entries(D).forEach(([u, v]) => {
-            a.set(u, v);
+          Object.entries(D).forEach(([c, x]) => {
+            o.set(c, x);
           });
           return;
         }
         try {
-          const u = {
-            templateData: a.get(""),
+          const c = {
+            templateData: o.get(""),
             // use current snapshot
             templatePath: "data"
-          }, v = {
-            templateData: a.get(""),
+          }, x = {
+            templateData: o.get(""),
             // use current snapshot
             templatePath: "data"
-          }, c = ht({
+          }, l = ht({
             dataLocation: e.path,
             currentPath: "data",
-            globalDataContext: u,
-            templateContext: v
+            globalDataContext: c,
+            templateContext: x
           });
-          if (typeof c != "string") {
+          if (typeof l != "string") {
             console.warn(
               "additionalDataSource path evaluation did not result in a string:",
               e.path,
               "->",
-              c
+              l
             );
             return;
           }
-          const j = B(c);
-          a.set(j, D);
-        } catch (u) {
-          console.error("Error evaluating additionalDataSource path:", e.path, u);
+          const J = _(l);
+          o.set(J, D);
+        } catch (c) {
+          console.error("Error evaluating additionalDataSource path:", e.path, c);
         }
-      } catch ($) {
-        console.error("Error fetching additional data source:", e.src, $);
+      } catch (k) {
+        console.error("Error fetching additional data source:", e.src, k);
       }
     };
     (async () => {
-      if (x.length > 0) {
-        const e = x.map((l, P) => _(l, P));
+      if (v.length > 0) {
+        const e = v.map((d, P) => $(d, P));
         await Promise.allSettled(e);
       }
       if (C((e) => ({ ...e, ...n })), A.length > 0) {
         const e = A.map(
-          (l, P) => _(l, x.length + P)
+          (d, P) => $(d, v.length + P)
         );
         Promise.allSettled(e);
       }
     })();
-  }, [d.rawAppRjBuild, m, a]);
-  function W(t, r, i) {
-    if (!R || R.size === 0)
+  }, [u.rawAppRjBuild, m, o]);
+  function q(t, r, i) {
+    if (!T || T.size === 0)
       return !1;
-    for (const [n, h] of R)
+    for (const [n, h] of T)
       if (t === n || t.startsWith(n + ".") || n === "") {
-        const x = n === "" ? t : t.substring(n.length + 1);
+        const v = n === "" ? t : t.substring(n.length + 1);
         try {
-          return h(r, x, i), !0;
+          return h(r, v, i), !0;
         } catch (A) {
           console.warn("Error during upstream update:", A);
           break;
@@ -270,46 +272,46 @@ const St = ({ Wrapper: m }) => {
     return !1;
   }
   const U = (t) => {
-    W("", t, void 0) || a.set("", t);
+    q("", t, void 0) || o.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);
+    q(n, t, i) || o.set(n, t, i);
   }, tt = {
-    element: d.templates,
+    element: u.templates,
     headersForRjBuild: s,
     plugins: S,
     ReactiveJsonRoot: xt,
     setData: U,
     updateData: F,
     // experimental: expose store for advanced usage
-    store: a,
+    store: o,
     // fallback: get data from store directly (non-reactive access)
     get templateData() {
-      return a.get("");
+      return o.get("");
     },
     templatePath: "data"
-  }, q = d.items.map((t) => /* @__PURE__ */ p(
-    Ct,
+  }, B = u.items.map((t) => /* @__PURE__ */ p(
+    St,
     {
       datafield: t,
       path: "data." + t,
-      props: d.renderView[t]
+      props: u.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: {
+  )), et = Ct(Y);
+  return /* @__PURE__ */ p(ft.Provider, { value: o, 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("");
+      return o.get("");
     },
     templatePath: "data"
-  }, children: et && L ? /* @__PURE__ */ H(Z, { children: [
-    /* @__PURE__ */ p(L, { children: q }),
-    O && /* @__PURE__ */ p(St, { Wrapper: O }),
-    T
+  }, children: et && O ? /* @__PURE__ */ H(Z, { children: [
+    /* @__PURE__ */ p(O, { children: B }),
+    z && /* @__PURE__ */ p(vt, { Wrapper: z }),
+    j
   ] }) : /* @__PURE__ */ H(st, { children: [
-    q,
-    T
+    B,
+    j
   ] }) }) }) }) });
 };
 export {

package/dist/engine/index.js

@@ -6,8 +6,8 @@ import { EventDispatcherProvider as f, addEventListener as s, removeEventListene
 import { GlobalDataContext as c } from "./GlobalDataContext.js";
 import { GlobalDataContextProvider as D } from "./GlobalDataContextProvider.js";
 import { PaginationContext as b } from "./PaginationContext.js";
-import { ReactiveJsonRoot as R } from "./ReactiveJsonRoot.js";
-import { StoreContext as g, StoreProvider as A, useStore as E } from "./StoreContext.js";
+import { ReactiveJsonRoot as P } from "./ReactiveJsonRoot.js";
+import { StoreContext as S, StoreProvider as T, useStore as A } from "./StoreContext.js";
 import { TemplateContext as V } from "./TemplateContext.js";
 import { dataLocationToPath as L, evaluateAttributes as y, evaluateTemplateValue as z, evaluateTemplateValueCollection as F, isTemplateValue as J, useEvaluatedAttributes as B } from "./TemplateSystem.js";
 import { useReactiveData as j } from "./hook/useReactiveData.js";
@@ -19,8 +19,9 @@ import { formatString as Q, maybeFormatString as U } from "./utility/formatStrin
 import { propsDataLocationToPathAndValue as X } from "./utility/formElementsCommon.js";
 import { parseRjBuild as Z } from "./utility/parseRjBuild.js";
 import { normalizeAttributeNameForReactJsx as $, normalizeAttributesForReactJsx as ee } from "./utility/reactJsxHelpers.js";
-import { stringToBoolean as oe } from "./utility/stringToBoolean.js";
-import { View as ae } from "./View.js";
+import { interpolateSegments as oe } from "./utility/interpolateSegments.js";
+import { stringToBoolean as ae } from "./utility/stringToBoolean.js";
+import { View as me } from "./View.js";
 export {
   o as ActionDependant,
   n as DataStore,
@@ -29,11 +30,11 @@ export {
   c as GlobalDataContext,
   D as GlobalDataContextProvider,
   b as PaginationContext,
-  R as ReactiveJsonRoot,
-  g as StoreContext,
-  A as StoreProvider,
+  P as ReactiveJsonRoot,
+  S as StoreContext,
+  T as StoreProvider,
   V as TemplateContext,
-  ae as View,
+  me as View,
   s as addEventListener,
   M as alterData,
   O as analyzeDataOverrideReferences,
@@ -43,6 +44,7 @@ export {
   z as evaluateTemplateValue,
   F as evaluateTemplateValueCollection,
   Q as formatString,
+  oe as interpolateSegments,
   J as isTemplateValue,
   r as isValid,
   U as maybeFormatString,
@@ -53,8 +55,8 @@ export {
   X as propsDataLocationToPathAndValue,
   u as removeEventListener,
   I as replaceEventPlaceholders,
-  oe as stringToBoolean,
+  ae as stringToBoolean,
   B as useEvaluatedAttributes,
   j as useReactiveData,
-  E as useStore
+  A as useStore
 };

package/dist/engine/utility/index.js

@@ -4,19 +4,21 @@ import { applyDataMapping as m } from "./dataMappingSystem.js";
 import { replaceEventPlaceholders as f } from "./eventPlaceholderSystem.js";
 import { formatString as l, maybeFormatString as x } from "./formatString.js";
 import { propsDataLocationToPathAndValue as c } from "./formElementsCommon.js";
-import { parseRjBuild as g } from "./parseRjBuild.js";
+import { parseRjBuild as d } from "./parseRjBuild.js";
 import { normalizeAttributeNameForReactJsx as D, normalizeAttributesForReactJsx as R } from "./reactJsxHelpers.js";
-import { stringToBoolean as y } from "./stringToBoolean.js";
+import { interpolateSegments as y } from "./interpolateSegments.js";
+import { stringToBoolean as A } from "./stringToBoolean.js";
 export {
   o as alterData,
   a as analyzeDataOverrideReferences,
   m as applyDataMapping,
   l as formatString,
+  y as interpolateSegments,
   x as maybeFormatString,
   D as normalizeAttributeNameForReactJsx,
   R as normalizeAttributesForReactJsx,
-  g as parseRjBuild,
+  d as parseRjBuild,
   c as propsDataLocationToPathAndValue,
   f as replaceEventPlaceholders,
-  y as stringToBoolean
+  A as stringToBoolean
 };

package/dist/engine/utility/interpolateSegments.js

@@ -0,0 +1,12 @@
+const e = (r, i) => typeof r == "string" ? r || null : !Array.isArray(r) || r.length === 0 ? null : r.map((t) => {
+  if (typeof t == "string" && t.startsWith("~~.")) {
+    const o = t.substring(3), n = i(o);
+    return n == null ? (console.warn(
+      `interpolateSegments: reference "${t}" resolved to ${n}.`
+    ), "") : String(n);
+  }
+  return String(t ?? "");
+}).join("");
+export {
+  e as interpolateSegments
+};

package/dist/main.js

@@ -35,117 +35,118 @@ import { formatString as Se, maybeFormatString as he } from "./engine/utility/fo
 import { propsDataLocationToPathAndValue as Ee } from "./engine/utility/formElementsCommon.js";
 import { parseRjBuild as Ve } from "./engine/utility/parseRjBuild.js";
 import { normalizeAttributeNameForReactJsx as He, normalizeAttributesForReactJsx as Me } from "./engine/utility/reactJsxHelpers.js";
-import { stringToBoolean as Be } from "./engine/utility/stringToBoolean.js";
-import { View as ke } from "./engine/View.js";
-import { simpleMapping as Ne } from "./component/dataMapping/simpleMapping.js";
-import { VariablesDebug as Ue } from "./component/element/debug/VariablesDebug/VariablesDebug.js";
-import { Input as Ie } from "./component/element/form/Input.js";
-import { CheckBoxField as We } from "./component/element/form/CheckBoxField.js";
-import { ColorField as qe } from "./component/element/form/ColorField.js";
-import { DateField as Qe } from "./component/element/form/DateField.js";
-import { DateTimeField as Ye } from "./component/element/form/DateTimeField.js";
-import { EmailField as _e } from "./component/element/form/EmailField.js";
-import { FileField as eo } from "./component/element/form/FileField.js";
-import { HiddenField as ro } from "./component/element/form/HiddenField.js";
-import { MonthField as ao } from "./component/element/form/MonthField.js";
-import { NumberField as po } from "./component/element/form/NumberField.js";
-import { PasswordField as fo } from "./component/element/form/PasswordField.js";
-import { RangeField as lo } from "./component/element/form/RangeField.js";
-import { SearchField as so } from "./component/element/form/SearchField.js";
-import { SelectField as co } from "./component/element/form/SelectField.js";
-import { TelField as Do } from "./component/element/form/TelField.js";
-import { TextAreaField as Co } from "./component/element/form/TextAreaField.js";
-import { TextField as go } from "./component/element/form/TextField.js";
-import { TimeField as Ro } from "./component/element/form/TimeField.js";
-import { UrlField as ho } from "./component/element/form/UrlField.js";
-import { WeekField as Eo } from "./component/element/form/WeekField.js";
-import { FolderSortableTree as Vo } from "./component/element/html/FolderSortableTree.js";
-import { FormatNumeral as Ho } from "./component/element/html/FormatNumeral.js";
-import { Html as yo } from "./component/element/html/Html.js";
-import { LabelFromValue as Jo } from "./component/element/html/LabelFromValue.js";
-import { PreformattedMarkup as wo } from "./component/element/html/PreformattedMarkup.js";
-import { SortableTreeItemCollapseButton as zo } from "./component/element/html/SortableTreeItemCollapseButton.js";
-import { Count as Go } from "./component/element/special/Count.js";
-import { DataFilter as Oo } from "./component/element/special/DataFilter.js";
-import { DataSync as jo } from "./component/element/special/DataSync.js";
-import { DelayedActions as Ko, getReactionFunctionsToExecute as Qo } from "./component/element/special/DelayedActions.js";
-import { PageControls as Yo } from "./component/element/special/PageControls.js";
-import { Phantom as _o } from "./component/element/special/Phantom.js";
-import { ReactiveJsonBasicComponentWrapper as er } from "./component/element/special/ReactiveJsonBasicComponentWrapper.js";
-import { ReactiveJsonSubroot as rr } from "./component/element/special/ReactiveJsonSubroot.js";
-import { Switch as ar } from "./component/element/special/Switch.js";
-import { addData as pr } from "./component/reaction/addData.js";
-import { fetchData as fr } from "./component/reaction/fetchData.js";
-import { executeHttpRequest as lr } from "./component/reaction/utility/httpRequestCommon.js";
-import { moveData as sr } from "./component/reaction/moveData.js";
-import { postMessage as ur } from "./component/reaction/postMessage.js";
-import { redirectNow as Fr } from "./component/reaction/redirectNow.js";
-import { removeData as vr } from "./component/reaction/removeData.js";
-import { setClipboardData as br } from "./component/reaction/setClipboardData.js";
-import { setData as Tr } from "./component/reaction/setData.js";
-import { submitData as Sr } from "./component/reaction/submitData.js";
-import { triggerEvent as Ar } from "./component/reaction/triggerEvent.js";
+import { interpolateSegments as Be } from "./engine/utility/interpolateSegments.js";
+import { stringToBoolean as ke } from "./engine/utility/stringToBoolean.js";
+import { View as Ne } from "./engine/View.js";
+import { simpleMapping as Ue } from "./component/dataMapping/simpleMapping.js";
+import { VariablesDebug as Ie } from "./component/element/debug/VariablesDebug/VariablesDebug.js";
+import { Input as We } from "./component/element/form/Input.js";
+import { CheckBoxField as qe } from "./component/element/form/CheckBoxField.js";
+import { ColorField as Qe } from "./component/element/form/ColorField.js";
+import { DateField as Ye } from "./component/element/form/DateField.js";
+import { DateTimeField as _e } from "./component/element/form/DateTimeField.js";
+import { EmailField as eo } from "./component/element/form/EmailField.js";
+import { FileField as ro } from "./component/element/form/FileField.js";
+import { HiddenField as ao } from "./component/element/form/HiddenField.js";
+import { MonthField as po } from "./component/element/form/MonthField.js";
+import { NumberField as fo } from "./component/element/form/NumberField.js";
+import { PasswordField as lo } from "./component/element/form/PasswordField.js";
+import { RangeField as so } from "./component/element/form/RangeField.js";
+import { SearchField as co } from "./component/element/form/SearchField.js";
+import { SelectField as Do } from "./component/element/form/SelectField.js";
+import { TelField as Co } from "./component/element/form/TelField.js";
+import { TextAreaField as go } from "./component/element/form/TextAreaField.js";
+import { TextField as Ro } from "./component/element/form/TextField.js";
+import { TimeField as ho } from "./component/element/form/TimeField.js";
+import { UrlField as Eo } from "./component/element/form/UrlField.js";
+import { WeekField as Vo } from "./component/element/form/WeekField.js";
+import { FolderSortableTree as Ho } from "./component/element/html/FolderSortableTree.js";
+import { FormatNumeral as yo } from "./component/element/html/FormatNumeral.js";
+import { Html as Jo } from "./component/element/html/Html.js";
+import { LabelFromValue as wo } from "./component/element/html/LabelFromValue.js";
+import { PreformattedMarkup as zo } from "./component/element/html/PreformattedMarkup.js";
+import { SortableTreeItemCollapseButton as Go } from "./component/element/html/SortableTreeItemCollapseButton.js";
+import { Count as Oo } from "./component/element/special/Count.js";
+import { DataFilter as jo } from "./component/element/special/DataFilter.js";
+import { DataSync as Ko } from "./component/element/special/DataSync.js";
+import { DelayedActions as Xo, getReactionFunctionsToExecute as Yo } from "./component/element/special/DelayedActions.js";
+import { PageControls as _o } from "./component/element/special/PageControls.js";
+import { Phantom as er } from "./component/element/special/Phantom.js";
+import { ReactiveJsonBasicComponentWrapper as rr } from "./component/element/special/ReactiveJsonBasicComponentWrapper.js";
+import { ReactiveJsonSubroot as ar } from "./component/element/special/ReactiveJsonSubroot.js";
+import { Switch as pr } from "./component/element/special/Switch.js";
+import { addData as fr } from "./component/reaction/addData.js";
+import { fetchData as lr } from "./component/reaction/fetchData.js";
+import { executeHttpRequest as sr } from "./component/reaction/utility/httpRequestCommon.js";
+import { moveData as ur } from "./component/reaction/moveData.js";
+import { postMessage as Fr } from "./component/reaction/postMessage.js";
+import { redirectNow as vr } from "./component/reaction/redirectNow.js";
+import { removeData as br } from "./component/reaction/removeData.js";
+import { setClipboardData as Tr } from "./component/reaction/setClipboardData.js";
+import { setData as Sr } from "./component/reaction/setData.js";
+import { submitData as Ar } from "./component/reaction/submitData.js";
+import { triggerEvent as Pr } from "./component/reaction/triggerEvent.js";
 export {
   B as ActionDependant,
-  We as CheckBoxField,
-  qe as ColorField,
-  Go as Count,
+  qe as CheckBoxField,
+  Qe as ColorField,
+  Oo as Count,
   r as CustomEventListener,
-  Oo as DataFilter,
+  jo as DataFilter,
   z as DataStore,
-  jo as DataSync,
-  Qe as DateField,
-  Ye as DateTimeField,
-  Ko as DelayedActions,
-  _e as EmailField,
+  Ko as DataSync,
+  Ye as DateField,
+  _e as DateTimeField,
+  Xo as DelayedActions,
+  eo as EmailField,
   G as EventDispatcherContext,
   O as EventDispatcherProvider,
-  eo as FileField,
-  Vo as FolderSortableTree,
-  Ho as FormatNumeral,
+  ro as FileField,
+  Ho as FolderSortableTree,
+  yo as FormatNumeral,
   K as GlobalDataContext,
   X as GlobalDataContextProvider,
   a as HashChangeListener,
-  ro as HiddenField,
+  ao as HiddenField,
   p as Hide,
-  yo as Html,
-  Ie as Input,
-  Jo as LabelFromValue,
+  Jo as Html,
+  We as Input,
+  wo as LabelFromValue,
   f as MessageListener,
-  ao as MonthField,
-  po as NumberField,
-  Yo as PageControls,
+  po as MonthField,
+  fo as NumberField,
+  _o as PageControls,
   Z as PaginationContext,
-  fo as PasswordField,
-  _o as Phantom,
-  wo as PreformattedMarkup,
-  lo as RangeField,
+  lo as PasswordField,
+  er as Phantom,
+  zo as PreformattedMarkup,
+  so as RangeField,
   l as ReactOnEvent,
-  er as ReactiveJsonBasicComponentWrapper,
+  rr as ReactiveJsonBasicComponentWrapper,
   $ as ReactiveJsonRoot,
-  rr as ReactiveJsonSubroot,
+  ar as ReactiveJsonSubroot,
   s as Redirect,
-  so as SearchField,
-  co as SelectField,
+  co as SearchField,
+  Do as SelectField,
   u as SetAttributeValue,
-  zo as SortableTreeItemCollapseButton,
+  Go as SortableTreeItemCollapseButton,
   oe as StoreContext,
   re as StoreProvider,
-  ar as Switch,
-  Do as TelField,
+  pr as Switch,
+  Co as TelField,
   me as TemplateContext,
-  Co as TextAreaField,
-  go as TextField,
-  Ro as TimeField,
+  go as TextAreaField,
+  Ro as TextField,
+  ho as TimeField,
   F as ToggleAttributeValue,
   v as UnsetAttribute,
   b as UnsetAttributeValue,
-  ho as UrlField,
-  Ue as VariablesDebug,
-  ke as View,
+  Eo as UrlField,
+  Ie as VariablesDebug,
+  Ne as View,
   T as VisuallyHide,
-  Eo as WeekField,
-  pr as addData,
+  Vo as WeekField,
+  fr as addData,
   W as addEventListener,
   Fe as alterData,
   ve as analyzeDataOverrideReferences,
@@ -159,30 +160,31 @@ export {
   fe as evaluateAttributes,
   ie as evaluateTemplateValue,
   le as evaluateTemplateValueCollection,
-  lr as executeHttpRequest,
-  fr as fetchData,
+  sr as executeHttpRequest,
+  lr as fetchData,
   Se as formatString,
-  Qo as getReactionFunctionsToExecute,
+  Yo as getReactionFunctionsToExecute,
+  Be as interpolateSegments,
   ne as isTemplateValue,
   J as isValid,
   he as maybeFormatString,
   w as mergeComponentCollections,
-  sr as moveData,
+  ur as moveData,
   He as normalizeAttributeNameForReactJsx,
   Me as normalizeAttributesForReactJsx,
   Ve as parseRjBuild,
-  ur as postMessage,
+  Fr as postMessage,
   Ee as propsDataLocationToPathAndValue,
-  Fr as redirectNow,
-  vr as removeData,
+  vr as redirectNow,
+  br as removeData,
   j as removeEventListener,
   Te as replaceEventPlaceholders,
-  br as setClipboardData,
-  Tr as setData,
-  Ne as simpleMapping,
-  Be as stringToBoolean,
-  Sr as submitData,
-  Ar as triggerEvent,
+  Tr as setClipboardData,
+  Sr as setData,
+  Ue as simpleMapping,
+  ke as stringToBoolean,
+  Ar as submitData,
+  Pr as triggerEvent,
   se as useEvaluatedAttributes,
   ue as useReactiveData,
   te as useStore

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ea-lab/reactive-json",
   "private": false,
-  "version": "2.0.1",
+  "version": "2.2.0",
   "type": "module",
   "repository": {
     "type": "git",