@ea-lab/reactive-json 1.0.0-alpha.6 → 1.0.0

package/dist/assets/VariablesDebug.css

@@ -1,4 +1 @@
-/*! 
-https://serp.co/tools/css-reset/
-<link rel="stylesheet" href="https://css.serp.co/css-reset/normalize.css/">
-*/html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}._debugRoot_1ny7q_1{position:fixed;bottom:12px;right:12px;display:flex;flex-direction:column;align-items:stretch;gap:8px;width:min(560px,96vw);max-height:70vh;overflow-y:auto;z-index:9998;pointer-events:none}._container_1ny7q_16{position:relative;bottom:auto;right:auto;background-color:#111827;color:#e5e7eb;padding:10px;border-radius:8px;box-shadow:0 2px 12px #0000004d;cursor:pointer;border:1px solid #374151;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;z-index:9999;width:100%;overflow:hidden;pointer-events:auto}._container_1ny7q_16._expanded_1ny7q_34{width:100%;max-height:64vh}._header_1ny7q_39{display:flex;align-items:center;justify-content:space-between}._actions_1ny7q_45{display:flex;gap:8px}._btn_1ny7q_50{background:transparent;color:#e5e7eb;border:1px solid #4b5563;border-radius:6px;padding:2px 8px}._btn_1ny7q_50._active_1ny7q_58{background:#1f2937}._path_1ny7q_62{color:#93c5fd}._value_1ny7q_66{color:#fbbf24}._copyBtn_1ny7q_70{transition:background-color .2s ease-in-out}._copyBtnSuccess_1ny7q_74{background-color:#10b932}._copyBtnError_1ny7q_78{background-color:#ef4444}._info_1ny7q_82{margin-top:8px}@media (max-width: 480px){._debugRoot_1ny7q_1{right:8px;left:8px;width:auto}}
+._debugRoot_1ny7q_1{position:fixed;bottom:12px;right:12px;display:flex;flex-direction:column;align-items:stretch;gap:8px;width:min(560px,96vw);max-height:70vh;overflow-y:auto;z-index:9998;pointer-events:none}._container_1ny7q_16{position:relative;bottom:auto;right:auto;background-color:#111827;color:#e5e7eb;padding:10px;border-radius:8px;box-shadow:0 2px 12px #0000004d;cursor:pointer;border:1px solid #374151;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;z-index:9999;width:100%;overflow:hidden;pointer-events:auto}._container_1ny7q_16._expanded_1ny7q_34{width:100%;max-height:64vh}._header_1ny7q_39{display:flex;align-items:center;justify-content:space-between}._actions_1ny7q_45{display:flex;gap:8px}._btn_1ny7q_50{background:transparent;color:#e5e7eb;border:1px solid #4b5563;border-radius:6px;padding:2px 8px}._btn_1ny7q_50._active_1ny7q_58{background:#1f2937}._path_1ny7q_62{color:#93c5fd}._value_1ny7q_66{color:#fbbf24}._copyBtn_1ny7q_70{transition:background-color .2s ease-in-out}._copyBtnSuccess_1ny7q_74{background-color:#10b932}._copyBtnError_1ny7q_78{background-color:#ef4444}._info_1ny7q_82{margin-top:8px}@media (max-width: 480px){._debugRoot_1ny7q_1{right:8px;left:8px;width:auto}}

package/dist/assets/reset.css

@@ -0,0 +1,4 @@
+/*! 
+https://serp.co/tools/css-reset/
+<link rel="stylesheet" href="https://css.serp.co/css-reset/normalize.css/">
+*/html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

package/dist/component/attributeTransformer/index.js

@@ -0,0 +1,13 @@
+import { setAttributeValue as t } from "./setAttributeValue.js";
+import { unsetAttribute as r } from "./unsetAttribute.js";
+import { unsetAttributeValue as e } from "./unsetAttributeValue.js";
+import { toggleAttributeValue as o } from "./toggleAttributeValue.js";
+const p = {
+  setAttributeValue: t,
+  toggleAttributeValue: o,
+  unsetAttribute: r,
+  unsetAttributeValue: e
+};
+export {
+  p as coreAttributeTransformerComponents
+};

package/dist/component/attributeTransformer/setAttributeValue.js

@@ -0,0 +1,36 @@
+import "react/jsx-runtime";
+import "../../jsonpath-B9kE9k9e.js";
+import "../../lodash-CYNxjS-I.js";
+import "react";
+import "../../engine/GlobalDataContext.js";
+import "../../engine/TemplateContext.js";
+import { evaluateTemplateValue as v } from "../../engine/TemplateSystem.js";
+import "../../engine/EventDispatcherContext.js";
+import "../../engine/EventDispatcherProvider.js";
+import "../../engine/PaginationContext.js";
+import "../../dnd-kit-sortable-tree.esm-Cz1RJyIg.js";
+import { normalizeAttributeNameForReactJsx as d } from "../../engine/utility/reactJsxHelpers.js";
+import '../../assets/reset.css';/* empty css                   */
+import "../../index-NNBvIV0S.js";
+import "../../js-yaml-Bw0KO4XO.js";
+import "../../engine/ParsingDebugDisplay/ParsingDebugDisplay.js";
+const q = ({ attributes: e, globalDataContext: a, singleTransformProps: i, templateContext: l }) => {
+  const { name: n, mode: u = "append", value: c, preventDuplicateValues: s = !0, separator: r = " " } = i, t = v({
+    valueToEvaluate: c,
+    globalDataContext: a,
+    templateContext: l
+  }), o = d(n);
+  if (u === "replace")
+    e[o] = t;
+  else {
+    const m = e[o] || "", p = m ? m.split(r) : [];
+    if (!s || !p.includes(t)) {
+      const V = [...p, t];
+      e[o] = V.join(r);
+    }
+  }
+  return e;
+};
+export {
+  q as setAttributeValue
+};

package/dist/component/attributeTransformer/toggleAttributeValue.js

@@ -0,0 +1,60 @@
+import "react/jsx-runtime";
+import "../../jsonpath-B9kE9k9e.js";
+import "../../lodash-CYNxjS-I.js";
+import "react";
+import "../../engine/GlobalDataContext.js";
+import "../../engine/TemplateContext.js";
+import { evaluateTemplateValue as v } from "../../engine/TemplateSystem.js";
+import "../../engine/EventDispatcherContext.js";
+import "../../engine/EventDispatcherProvider.js";
+import "../../engine/PaginationContext.js";
+import "../../dnd-kit-sortable-tree.esm-Cz1RJyIg.js";
+import { normalizeAttributeNameForReactJsx as A } from "../../engine/utility/reactJsxHelpers.js";
+import '../../assets/reset.css';/* empty css                   */
+import "../../index-NNBvIV0S.js";
+import "../../js-yaml-Bw0KO4XO.js";
+import "../../engine/ParsingDebugDisplay/ParsingDebugDisplay.js";
+const B = ({ attributes: o, globalDataContext: V, singleTransformProps: x, templateContext: g }) => {
+  const { name: p, value: m, separator: u = " ", keepAttributeWhenEmpty: h = !1 } = x || {};
+  if (!p || m === void 0)
+    return o;
+  const s = v({
+    valueToEvaluate: m,
+    globalDataContext: V,
+    templateContext: g
+  }), n = A(p), f = o[n] || "";
+  let l = [...f ? f.split(u).filter((e) => e.trim() !== "") : []];
+  if (Array.isArray(s)) {
+    const e = s.map((t) => String(t));
+    if (e.length === 0)
+      return o;
+    if (e.length === 1) {
+      const t = e[0], i = l.indexOf(t);
+      i > -1 ? l.splice(i, 1) : t !== "" && l.push(t);
+    } else {
+      let t = -1, i = -1;
+      for (let r = 0; r < e.length; r++) {
+        const a = e[r], d = l.indexOf(a);
+        if (d > -1) {
+          t = d, i = r;
+          break;
+        }
+      }
+      if (t > -1) {
+        const r = (i + 1) % e.length, a = e[r];
+        l.splice(t, 1), a !== "" && l.push(a);
+      } else {
+        const r = e[0];
+        r !== "" && l.push(r);
+      }
+    }
+  } else {
+    const e = String(s), t = l.indexOf(e);
+    t > -1 ? l.splice(t, 1) : l.push(e);
+  }
+  const c = l.join(u);
+  return c.trim() === "" ? h ? o[n] = "" : delete o[n] : o[n] = c, o;
+};
+export {
+  B as toggleAttributeValue
+};

package/dist/component/attributeTransformer/unsetAttribute.js

@@ -0,0 +1,10 @@
+import { normalizeAttributeNameForReactJsx as z } from "../../engine/utility/reactJsxHelpers.js";
+const N = ({ attributes: c, singleTransformProps: d }) => {
+  if (typeof (d == null ? void 0 : d.name) != "string" || d.name === "")
+    return c;
+  const x = z(d == null ? void 0 : d.name);
+  return c != null && c[x] && delete c[x], c;
+};
+export {
+  N as unsetAttribute
+};

package/dist/component/attributeTransformer/unsetAttributeValue.js

@@ -0,0 +1,61 @@
+import "react/jsx-runtime";
+import "../../jsonpath-B9kE9k9e.js";
+import "../../lodash-CYNxjS-I.js";
+import "react";
+import "../../engine/GlobalDataContext.js";
+import "../../engine/TemplateContext.js";
+import { evaluateTemplateValue as V } from "../../engine/TemplateSystem.js";
+import "../../engine/EventDispatcherContext.js";
+import "../../engine/EventDispatcherProvider.js";
+import "../../engine/PaginationContext.js";
+import "../../dnd-kit-sortable-tree.esm-Cz1RJyIg.js";
+import { normalizeAttributeNameForReactJsx as w } from "../../engine/utility/reactJsxHelpers.js";
+import '../../assets/reset.css';/* empty css                   */
+import "../../index-NNBvIV0S.js";
+import "../../js-yaml-Bw0KO4XO.js";
+import "../../engine/ParsingDebugDisplay/ParsingDebugDisplay.js";
+const B = ({ attributes: t, globalDataContext: l, singleTransformProps: A, templateContext: a }) => {
+  const { name: s, value: m, separator: p = " ", unsetAllOccurrences: C, unsetCount: c } = A || {};
+  if (!s || m === void 0)
+    return t;
+  const n = String(
+    V({
+      valueToEvaluate: m,
+      globalDataContext: l,
+      templateContext: a
+    })
+  ), u = c !== void 0 ? V({
+    valueToEvaluate: c,
+    globalDataContext: l,
+    templateContext: a
+  }) : void 0, i = w(s), f = t[i] || "";
+  if (!f)
+    return t;
+  let e = [...f.split(p)];
+  (() => {
+    if (C === !0) {
+      e = e.filter((r) => r !== n);
+      return;
+    }
+    const o = parseInt(u, 10);
+    if (!(!isNaN(o) && u !== void 0 && u !== null)) {
+      e = e.filter((r) => r !== n);
+      return;
+    }
+    if (o === 0)
+      return;
+    if (o > 0) {
+      let r = 0;
+      e = e.filter((T) => T === n && r < o ? (r++, !1) : !0);
+      return;
+    }
+    const N = Math.abs(o);
+    let d = 0;
+    e = e.reverse().filter((r) => r === n && d < N ? (d++, !1) : !0).reverse();
+  })();
+  const v = e.join(p);
+  return v.trim() === "" ? delete t[i] : t[i] = v, t;
+};
+export {
+  B as unsetAttributeValue
+};

package/dist/component/element/debug/VariablesDebug/VariablesDebug.js

@@ -12,11 +12,12 @@ import "../../../../index-NNBvIV0S.js";
 import "../../../../jsonpath-B9kE9k9e.js";
 import "../../../../js-yaml-Bw0KO4XO.js";
 import "../../../../engine/ParsingDebugDisplay/ParsingDebugDisplay.js";
-import { DebugMode as c } from "./DebugMode.enum.js";
+import { DebugMode as r } from "./DebugMode.enum.js";
 import R from "./ModeDisplay/DebugList/DebugList.js";
 import D from "./ModeDisplay/DebugJson/DebugJson.js";
+import '../../../../assets/reset.css';import '../../../../assets/VariablesDebug.css';/* empty css                         */
 import { flattenObject as J } from "./utils.js";
-import '../../../../assets/VariablesDebug.css';const O = "_debugRoot_1ny7q_1", j = "_container_1ny7q_16", k = "_expanded_1ny7q_34", T = "_header_1ny7q_39", I = "_actions_1ny7q_45", P = "_btn_1ny7q_50", M = "_active_1ny7q_58", w = "_path_1ny7q_62", A = "_value_1ny7q_66", H = "_copyBtn_1ny7q_70", V = "_copyBtnSuccess_1ny7q_74", F = "_copyBtnError_1ny7q_78", W = "_info_1ny7q_82", n = {
+const O = "_debugRoot_1ny7q_1", j = "_container_1ny7q_16", k = "_expanded_1ny7q_34", T = "_header_1ny7q_39", I = "_actions_1ny7q_45", P = "_btn_1ny7q_50", M = "_active_1ny7q_58", w = "_path_1ny7q_62", A = "_value_1ny7q_66", H = "_copyBtn_1ny7q_70", V = "_copyBtnSuccess_1ny7q_74", F = "_copyBtnError_1ny7q_78", W = "_info_1ny7q_82", n = {
   debugRoot: O,
   container: j,
   expanded: k,
@@ -30,8 +31,8 @@ import '../../../../assets/VariablesDebug.css';const O = "_debugRoot_1ny7q_1", j
   copyBtnSuccess: V,
   copyBtnError: F,
   info: W
-}, dt = ({ props: v }) => {
-  const [r, u] = p(!1), [i, _] = p(c.LIST), o = B($), d = g(null), [y, S] = p(null), f = g(null);
+}, pt = ({ props: v }) => {
+  const [c, u] = p(!1), [i, _] = p(r.LIST), o = B($), d = g(null), [y, S] = p(null), f = g(null);
   q(() => {
     if (typeof document > "u") return;
     let t = document.getElementById("rj-debug-root");
@@ -41,7 +42,7 @@ import '../../../../assets/VariablesDebug.css';const O = "_debugRoot_1ny7q_1", j
     const t = d.current;
     try {
       if (await navigator.clipboard.writeText(
-        i === c.JSON ? b : h.map((s) => `${s.path}: ${JSON.stringify(s.value)}`).join(`
+        i === r.JSON ? b : h.map((s) => `${s.path}: ${JSON.stringify(s.value)}`).join(`
 `)
       ), !t) return;
       t.classList.add(n.copyBtnSuccess), t.textContent = "Copied!", setTimeout(() => {
@@ -56,7 +57,7 @@ import '../../../../assets/VariablesDebug.css';const O = "_debugRoot_1ny7q_1", j
   }, N = /* @__PURE__ */ e(L, { ...v, attributesHolderRef: f, children: /* @__PURE__ */ a(
     "div",
     {
-      className: `${n.container} ${r ? n.expanded : ""}`,
+      className: `${n.container} ${c ? n.expanded : ""}`,
       onClick: () => u((t) => !t),
       role: "button",
       ref: f,
@@ -67,20 +68,20 @@ import '../../../../assets/VariablesDebug.css';const O = "_debugRoot_1ny7q_1", j
             /* @__PURE__ */ e("code", { children: o.templatePath })
           ] }),
           /* @__PURE__ */ a("div", { className: n.actions, onClick: (t) => t.stopPropagation(), children: [
-            r && /* @__PURE__ */ a(x, { children: [
+            c && /* @__PURE__ */ a(x, { children: [
               /* @__PURE__ */ e(
                 "button",
                 {
-                  className: `${n.btn} ${i === c.LIST ? n.active : ""}`,
-                  onClick: () => _(c.LIST),
+                  className: `${n.btn} ${i === r.LIST ? n.active : ""}`,
+                  onClick: () => _(r.LIST),
                   children: "List"
                 }
               ),
               /* @__PURE__ */ e(
                 "button",
                 {
-                  className: `${n.btn} ${i === c.JSON ? n.active : ""}`,
-                  onClick: () => _(c.JSON),
+                  className: `${n.btn} ${i === r.JSON ? n.active : ""}`,
+                  onClick: () => _(r.JSON),
                   children: "JSON"
                 }
               )
@@ -90,10 +91,10 @@ import '../../../../assets/VariablesDebug.css';const O = "_debugRoot_1ny7q_1", j
               {
                 className: n.btn,
                 onClick: () => u((t) => !t),
-                children: r ? "Collapse" : "Expand"
+                children: c ? "Collapse" : "Expand"
               }
             ),
-            r && /* @__PURE__ */ e(
+            c && /* @__PURE__ */ e(
               "button",
               {
                 className: `${n.btn} ${n.copyBtn}`,
@@ -104,12 +105,12 @@ import '../../../../assets/VariablesDebug.css';const O = "_debugRoot_1ny7q_1", j
             )
           ] })
         ] }),
-        r && /* @__PURE__ */ e("div", { className: n.info, onClick: (t) => t.stopPropagation(), children: i === c.JSON ? /* @__PURE__ */ e(D, { jsonString: b }) : /* @__PURE__ */ e(R, { flatRows: h }) })
+        c && /* @__PURE__ */ e("div", { className: n.info, onClick: (t) => t.stopPropagation(), children: i === r.JSON ? /* @__PURE__ */ e(D, { jsonString: b }) : /* @__PURE__ */ e(R, { flatRows: h }) })
       ]
     }
   ) });
   return y ? E.createPortal(N, y) : null;
 };
 export {
-  dt as VariablesDebug
+  pt as VariablesDebug
 };

package/dist/component/element/html/Html.js

@@ -1,41 +1,44 @@
-import { jsx as n, jsxs as g, Fragment as b } from "react/jsx-runtime";
-import { useContext as v, useRef as k } from "react";
-import { ActionDependant as T } from "../../../engine/Actions.js";
+import { jsx as n, jsxs as g, Fragment as v } from "react/jsx-runtime";
+import { useContext as x, useRef as A } from "react";
+import { ActionDependant as k } from "../../../engine/Actions.js";
 import { GlobalDataContext as y } from "../../../engine/GlobalDataContext.js";
-import { normalizeAttributesForReactJsx as x } from "../../../engine/utility/reactJsxHelpers.js";
-import { TemplateContext as A } from "../../../engine/TemplateContext.js";
-import { evaluateAttributes as C, evaluateTemplateValue as j } from "../../../engine/TemplateSystem.js";
-import { View as u } from "../../../engine/View.js";
-const z = ({ props: t, currentData: s, datafield: O, path: h }) => {
-  const f = v(y), m = v(A), c = k(null), d = `${t.tag}`, o = t.extra ?? {}, i = x(t.attributes), r = x(s.attributes);
-  for (const e of Object.keys(r)) {
+import { normalizeAttributesForReactJsx as h } from "../../../engine/utility/reactJsxHelpers.js";
+import { TemplateContext as C } from "../../../engine/TemplateContext.js";
+import { evaluateAttributes as j, evaluateTemplateValue as O } from "../../../engine/TemplateSystem.js";
+import { View as s } from "../../../engine/View.js";
+import { useTransformedAttributes as V } from "../../hook/useTransformedAttributes.js";
+const J = ({ props: t, currentData: u, datafield: D, path: T }) => {
+  const m = x(y), f = x(C), c = A(null), d = `${t.tag}`, o = t.extra ?? {}, r = h(t.attributes), i = h(u.attributes);
+  for (const e of Object.keys(i)) {
     if (e.charAt(0) === "+") {
       const l = e.substring(1);
-      i[l] = (i[l] ?? "").length > 0 ? (
+      r[l] = (r[l] ?? "").length > 0 ? (
         // Append using a space.
-        " " + r[e]
+        " " + i[e]
       ) : (
         // Set directly.
-        r[e]
+        i[e]
       );
       continue;
     }
-    i[e] = r[e];
+    r[e] = i[e];
   }
-  const a = C({ attrs: i, globalDataContext: f, templateContext: m });
+  const a = j({ attrs: r, globalDataContext: m, templateContext: f });
   if (t.tag === "option" && t.content && a.value === void 0) {
     if (typeof t.content != "string")
       return null;
-    const e = j({
+    const e = O({
       valueToEvaluate: t.content,
-      globalDataContext: f,
-      templateContext: m
+      globalDataContext: m,
+      templateContext: f
     });
     if (typeof e != "string")
       return null;
     a.value = e;
   }
-  return (t.tag === "input" || t.tag === "textarea" || t.tag === "select") && (a.value === void 0 && (a.value = ""), t.tag === "input" && (a.type === "checkbox" || a.type === "radio") && a.checked === void 0 && (a.checked = !1)), /* @__PURE__ */ n(T, { ...t, attributesHolderRef: c, children: ((e) => e && [
+  (t.tag === "input" || t.tag === "textarea" || t.tag === "select") && (a.value === void 0 && (a.value = ""), t.tag === "input" && (a.type === "checkbox" || a.type === "radio") && a.checked === void 0 && (a.checked = !1));
+  const b = V(a, t.attributeTransforms ?? []);
+  return /* @__PURE__ */ n(k, { ...t, attributesHolderRef: c, children: ((e) => e && [
     "area",
     "base",
     "br",
@@ -50,22 +53,22 @@ const z = ({ props: t, currentData: s, datafield: O, path: h }) => {
     "source",
     "track",
     "wbr"
-  ].indexOf(e) !== -1)(t.tag) ? /* @__PURE__ */ g(b, { children: [
-    /* @__PURE__ */ n(d, { ref: c, ...a }),
-    Object.keys(o).length ? /* @__PURE__ */ n(u, { props: o }) : ""
-  ] }) : /* @__PURE__ */ g(b, { children: [
-    /* @__PURE__ */ n(d, { ref: c, ...a, children: t.content && /* @__PURE__ */ n(
-      u,
+  ].indexOf(e) !== -1)(t.tag) ? /* @__PURE__ */ g(v, { children: [
+    /* @__PURE__ */ n(d, { ref: c, ...b }),
+    Object.keys(o).length ? /* @__PURE__ */ n(s, { props: o }) : ""
+  ] }) : /* @__PURE__ */ g(v, { children: [
+    /* @__PURE__ */ n(d, { ref: c, ...b, children: t.content && /* @__PURE__ */ n(
+      s,
       {
-        currentData: s.content ?? void 0,
+        currentData: u.content ?? void 0,
         datafield: "content",
-        path: h + ".content",
+        path: T + ".content",
         props: t.content
       }
     ) }),
-    Object.keys(o).length ? /* @__PURE__ */ n(u, { props: o }) : ""
+    Object.keys(o).length ? /* @__PURE__ */ n(s, { props: o }) : ""
   ] }) });
 };
 export {
-  z as Html
+  J as Html
 };

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

@@ -1,81 +1,84 @@
-import { jsx as i, jsxs as y, Fragment as W } from "react/jsx-runtime";
-import { useContext as T, createElement as A } from "react";
-import { ActionDependant as L } from "../../../engine/Actions.js";
-import { GlobalDataContext as k } from "../../../engine/GlobalDataContext.js";
-import { PaginationContext as z } from "../../../engine/PaginationContext.js";
-import { TemplateContext as B } from "../../../engine/TemplateContext.js";
-import { evaluateTemplateValue as F, isTemplateValue as G, dataLocationToPath as K, evaluateAttributes as R } from "../../../engine/TemplateSystem.js";
-import { View as x } from "../../../engine/View.js";
-import { usePagination as q } from "../../hook/usePagination.js";
-const _ = ({ props: t, currentData: e, path: f }) => {
-  const m = T(k), a = T(B), g = (t == null ? void 0 : t.cardinality) ?? -1, w = (t == null ? void 0 : t.options) ?? [], h = (t == null ? void 0 : t.singleOption) ?? void 0, C = !!h, l = (t == null ? void 0 : t.content) ?? null, P = l && F({
-    globalDataContext: m,
-    templateContext: a,
-    valueToEvaluate: l
-  }), u = Object.entries(typeof P == "object" ? P : e).map(([V, n]) => {
-    const o = V;
-    if (g >= 1 && o >= g || !n || typeof n != "object")
+import { jsx as i, jsxs as A, Fragment as k } from "react/jsx-runtime";
+import { useContext as I, createElement as L } from "react";
+import { ActionDependant as z } from "../../../engine/Actions.js";
+import { GlobalDataContext as B } from "../../../engine/GlobalDataContext.js";
+import { PaginationContext as F } from "../../../engine/PaginationContext.js";
+import { TemplateContext as G } from "../../../engine/TemplateContext.js";
+import { evaluateTemplateValue as K, isTemplateValue as R, dataLocationToPath as q, evaluateAttributes as E } from "../../../engine/TemplateSystem.js";
+import { View as g } from "../../../engine/View.js";
+const _ = ({ props: t, currentData: e, path: m }) => {
+  var T;
+  const a = I(B), l = I(G), { usePagination: x } = ((T = a.plugins) == null ? void 0 : T.hook) ?? {};
+  if (!x)
+    return null;
+  const h = (t == null ? void 0 : t.cardinality) ?? -1, V = (t == null ? void 0 : t.options) ?? [], C = (t == null ? void 0 : t.singleOption) ?? void 0, P = !!C, o = (t == null ? void 0 : t.content) ?? null, j = o && K({
+    globalDataContext: a,
+    templateContext: l,
+    valueToEvaluate: o
+  }), u = Object.entries(typeof j == "object" ? j : e).map(([W, n]) => {
+    const c = W;
+    if (h >= 1 && c >= h || !n || typeof n != "object")
       return null;
-    let c, b, d;
-    if (C)
-      b = n, d = h;
+    let d, b, f;
+    if (P)
+      b = n, f = C;
     else {
-      if (c = Object.keys(n)[0] ?? void 0, c === void 0)
+      if (d = Object.keys(n)[0] ?? void 0, d === void 0)
         return null;
-      b = Object.values(n)[0] ?? void 0, d = w[c] ?? void 0;
+      b = Object.values(n)[0] ?? void 0, f = V[d] ?? void 0;
     }
-    if (d === void 0)
+    if (f === void 0)
       return null;
-    let S = (G(l) && K({
-      dataLocation: l,
-      currentPath: a.templatePath,
-      globalDataContext: m,
-      templateContext: a
-    }) || f) + "." + o;
-    return C || (S += "." + c), /* @__PURE__ */ i(
-      x,
+    let w = (R(o) && q({
+      dataLocation: o,
+      currentPath: l.templatePath,
+      globalDataContext: a,
+      templateContext: l
+    }) || m) + "." + c;
+    return P || (w += "." + d), /* @__PURE__ */ i(
+      g,
       {
         currentData: b,
-        datafield: o,
-        path: S,
-        props: d
+        datafield: c,
+        path: w,
+        props: f
       },
-      o
+      c
     );
-  }), v = q({
+  }), v = x({
     dataToPaginate: u,
     ...(t == null ? void 0 : t.paginationProps) ?? {}
-  }), j = t != null && t.paginated ? u.slice(v.firstShownItemIndex, v.maxShownItemIndexExcluded) : u, I = t != null && t.contentWrapper ? A(
+  }), O = t != null && t.paginated ? u.slice(v.firstShownItemIndex, v.maxShownItemIndexExcluded) : u, y = t != null && t.contentWrapper ? L(
     t.contentWrapper.tag ?? "div",
-    R({
+    E({
       attrs: t.contentWrapper.attributes ?? {},
-      globalDataContext: m,
+      globalDataContext: a,
       options: { normalizeBeforeEvaluation: !0 },
-      templateContext: a
+      templateContext: l
     }),
-    j
-  ) : j, O = /* @__PURE__ */ y(W, { children: [
+    O
+  ) : O, S = /* @__PURE__ */ A(k, { children: [
     (t == null ? void 0 : t.before) && /* @__PURE__ */ i(
-      x,
+      g,
       {
         currentData: (e == null ? void 0 : e.before) ?? void 0,
-        path: f + ".before",
+        path: m + ".before",
         datafield: "before",
         props: t == null ? void 0 : t.before
       }
     ),
-    I,
+    y,
     (t == null ? void 0 : t.after) && /* @__PURE__ */ i(
-      x,
+      g,
       {
         currentData: (e == null ? void 0 : e.after) ?? void 0,
-        path: f + ".after",
+        path: m + ".after",
         datafield: "after",
         props: t == null ? void 0 : t.after
       }
     )
   ] });
-  return /* @__PURE__ */ i(L, { ...t, children: t != null && t.paginated ? /* @__PURE__ */ i(z.Provider, { value: { pagination: v }, children: O }) : O });
+  return /* @__PURE__ */ i(z, { ...t, children: t != null && t.paginated ? /* @__PURE__ */ i(F.Provider, { value: { pagination: v }, children: S }) : S });
 };
 export {
   _ as Switch

package/dist/component/hook/index.js

@@ -1,4 +1,9 @@
-import { usePagination as e } from "./usePagination.js";
+import { usePagination as o } from "./usePagination.js";
+import { useTransformedAttributes as r } from "./useTransformedAttributes.js";
+const m = {
+  usePagination: o,
+  useTransformedAttributes: r
+};
 export {
-  e as usePagination
+  m as coreHookComponents
 };

package/dist/component/hook/useTransformedAttributes.js

@@ -0,0 +1,18 @@
+import { useContext as f } from "react";
+import { isValid as l } from "../../engine/Actions.js";
+import { GlobalDataContext as x } from "../../engine/GlobalDataContext.js";
+import { TemplateContext as b } from "../../engine/TemplateContext.js";
+const c = (t, n) => {
+  var m;
+  const e = f(x), u = f(b);
+  if (!n)
+    return t;
+  const i = ((m = e.plugins) == null ? void 0 : m.attributeTransformer) ?? [];
+  return i ? n.reduce((r, o) => {
+    const a = i[o.what];
+    return !a || !l(o, { globalDataContext: e, templateContext: u }) ? r : a({ attributes: r, globalDataContext: e, singleTransformProps: o, templateContext: u });
+  }, t) : t;
+};
+export {
+  c as useTransformedAttributes
+};

package/dist/component/index.js

@@ -1,21 +1,21 @@
 import { HashChangeListener as r } from "./action/HashChangeListener.js";
 import { Hide as m } from "./action/Hide.js";
-import { MessageListener as a } from "./action/MessageListener.js";
-import { ReactOnEvent as f } from "./action/ReactOnEvent.js";
+import { MessageListener as x } from "./action/MessageListener.js";
+import { ReactOnEvent as a } from "./action/ReactOnEvent.js";
 import { Redirect as l } from "./action/Redirect.js";
 import { SetAttributeValue as s } from "./action/SetAttributeValue.js";
 import { ToggleAttributeValue as u } from "./action/ToggleAttributeValue.js";
 import { UnsetAttribute as c } from "./action/UnsetAttribute.js";
-import { UnsetAttributeValue as D } from "./action/UnsetAttributeValue.js";
+import { UnsetAttributeValue as b } from "./action/UnsetAttributeValue.js";
 import { VisuallyHide as C } from "./action/VisuallyHide.js";
 import { coreDataMappingComponents as T } from "./dataMapping/index.js";
-import { coreDataProcessorComponents as v } from "./dataProcessor/index.js";
+import { coreDataProcessorComponents as H } from "./dataProcessor/index.js";
 import { coreElementComponents as M } from "./element/index.js";
-import { usePagination as S } from "./hook/usePagination.js";
-import { coreReactionComponents as A } from "./reaction/index.js";
-import { simpleMapping as w } from "./dataMapping/simpleMapping.js";
-import { VariablesDebug as N } from "./element/debug/VariablesDebug/VariablesDebug.js";
-import { Input as k } from "./element/form/Input.js";
+import { coreHookComponents as V } from "./hook/index.js";
+import { coreReactionComponents as E } from "./reaction/index.js";
+import { simpleMapping as k } from "./dataMapping/simpleMapping.js";
+import { VariablesDebug as L } from "./element/debug/VariablesDebug/VariablesDebug.js";
+import { Input as U } from "./element/form/Input.js";
 import { ColorField as B } from "./element/form/ColorField.js";
 import { DateField as J } from "./element/form/DateField.js";
 import { DateTimeField as q } from "./element/form/DateTimeField.js";
@@ -27,21 +27,21 @@ import { NumberField as _ } from "./element/form/NumberField.js";
 import { PasswordField as ee } from "./element/form/PasswordField.js";
 import { RangeField as re } from "./element/form/RangeField.js";
 import { SearchField as me } from "./element/form/SearchField.js";
-import { TelField as ae } from "./element/form/TelField.js";
-import { TextField as fe } from "./element/form/TextField.js";
+import { TelField as xe } from "./element/form/TelField.js";
+import { TextField as ae } from "./element/form/TextField.js";
 import { TimeField as le } from "./element/form/TimeField.js";
 import { UrlField as se } from "./element/form/UrlField.js";
 import { WeekField as ue } from "./element/form/WeekField.js";
 import { FolderSortableTree as ce } from "./element/html/FolderSortableTree.js";
-import { FormatNumeral as De } from "./element/html/FormatNumeral.js";
+import { FormatNumeral as be } from "./element/html/FormatNumeral.js";
 import { Html as Ce } from "./element/html/Html.js";
 import { LabelFromValue as Te } from "./element/html/LabelFromValue.js";
-import { PreformattedMarkup as ve } from "./element/html/PreformattedMarkup.js";
+import { PreformattedMarkup as He } from "./element/html/PreformattedMarkup.js";
 import { SortableTreeItemCollapseButton as Me } from "./element/html/SortableTreeItemCollapseButton.js";
-import { Count as Se } from "./element/special/Count.js";
-import { DataFilter as Ae } from "./element/special/DataFilter.js";
-import { DelayedActions as we, getReactionFunctionsToExecute as Le } from "./element/special/DelayedActions.js";
-import { PageControls as Ue } from "./element/special/PageControls.js";
+import { Count as Ve } from "./element/special/Count.js";
+import { DataFilter as Ee } from "./element/special/DataFilter.js";
+import { DelayedActions as ke, getReactionFunctionsToExecute as we } from "./element/special/DelayedActions.js";
+import { PageControls as Ne } from "./element/special/PageControls.js";
 import { Phantom as ye } from "./element/special/Phantom.js";
 import { ReactiveJsonBasicComponentWrapper as Ie } from "./element/special/ReactiveJsonBasicComponentWrapper.js";
 import { ReactiveJsonSubroot as We } from "./element/special/ReactiveJsonSubroot.js";
@@ -54,35 +54,35 @@ import { postMessage as $e } from "./reaction/postMessage.js";
 import { redirectNow as oo } from "./reaction/redirectNow.js";
 import { removeData as to } from "./reaction/removeData.js";
 import { setClipboardData as po } from "./reaction/setClipboardData.js";
-import { setData as xo } from "./reaction/setData.js";
+import { setData as fo } from "./reaction/setData.js";
 import { submitData as io } from "./reaction/submitData.js";
 import { triggerEvent as no } from "./reaction/triggerEvent.js";
 export {
   B as ColorField,
-  Se as Count,
-  Ae as DataFilter,
+  Ve as Count,
+  Ee as DataFilter,
   J as DateField,
   q as DateTimeField,
-  we as DelayedActions,
+  ke as DelayedActions,
   j as EmailField,
   G as FileField,
   ce as FolderSortableTree,
-  De as FormatNumeral,
+  be as FormatNumeral,
   r as HashChangeListener,
   Q as HiddenField,
   m as Hide,
   Ce as Html,
-  k as Input,
+  U as Input,
   Te as LabelFromValue,
-  a as MessageListener,
+  x as MessageListener,
   Y as MonthField,
   _ as NumberField,
-  Ue as PageControls,
+  Ne as PageControls,
   ee as PasswordField,
   ye as Phantom,
-  ve as PreformattedMarkup,
+  He as PreformattedMarkup,
   re as RangeField,
-  f as ReactOnEvent,
+  a as ReactOnEvent,
   Ie as ReactiveJsonBasicComponentWrapper,
   We as ReactiveJsonSubroot,
   l as Redirect,
@@ -90,32 +90,32 @@ export {
   s as SetAttributeValue,
   Me as SortableTreeItemCollapseButton,
   Oe as Switch,
-  ae as TelField,
-  fe as TextField,
+  xe as TelField,
+  ae as TextField,
   le as TimeField,
   u as ToggleAttributeValue,
   c as UnsetAttribute,
-  D as UnsetAttributeValue,
+  b as UnsetAttributeValue,
   se as UrlField,
-  N as VariablesDebug,
+  L as VariablesDebug,
   C as VisuallyHide,
   ue as WeekField,
   ze as addData,
   T as coreDataMappingComponents,
-  v as coreDataProcessorComponents,
+  H as coreDataProcessorComponents,
   M as coreElementComponents,
-  A as coreReactionComponents,
+  V as coreHookComponents,
+  E as coreReactionComponents,
   Xe as executeHttpRequest,
   Ke as fetchData,
-  Le as getReactionFunctionsToExecute,
+  we as getReactionFunctionsToExecute,
   Ze as moveData,
   $e as postMessage,
   oo as redirectNow,
   to as removeData,
   po as setClipboardData,
-  xo as setData,
-  w as simpleMapping,
+  fo as setData,
+  k as simpleMapping,
   io as submitData,
-  no as triggerEvent,
-  S as usePagination
+  no as triggerEvent
 };

package/dist/coreComponentsPlugin.js

@@ -1,15 +1,19 @@
 import { c as o } from "./index-BA09SSaJ.js";
+import { coreAttributeTransformerComponents as r } from "./component/attributeTransformer/index.js";
 import { coreDataMappingComponents as t } from "./component/dataMapping/index.js";
 import { coreDataProcessorComponents as e } from "./component/dataProcessor/index.js";
 import { coreElementComponents as n } from "./component/element/index.js";
-import { coreReactionComponents as r } from "./component/reaction/index.js";
-const s = {
+import { coreHookComponents as m } from "./component/hook/index.js";
+import { coreReactionComponents as p } from "./component/reaction/index.js";
+const l = {
   action: o,
+  attributeTransformer: r,
   dataMapping: t,
   dataProcessor: e,
   element: n,
-  reaction: r
+  hook: m,
+  reaction: p
 };
 export {
-  s as coreComponentsPlugin
+  l as coreComponentsPlugin
 };

package/dist/engine/index.js

@@ -3,47 +3,48 @@ import { mergeComponentCollections as p } from "./ComponentCollector.js";
 import { EventDispatcherContext as m } from "./EventDispatcherContext.js";
 import { EventDispatcherProvider as l, addEventListener as x, removeEventListener as f } from "./EventDispatcherProvider.js";
 import { GlobalDataContext as u } from "./GlobalDataContext.js";
-import { GlobalDataContextProvider as d } from "./GlobalDataContextProvider.js";
+import { GlobalDataContextProvider as c } from "./GlobalDataContextProvider.js";
 import { PaginationContext as D } from "./PaginationContext.js";
-import { ReactiveJsonRoot as T } from "./ReactiveJsonRoot.js";
+import { ReactiveJsonRoot as b } from "./ReactiveJsonRoot.js";
 import { TemplateContext as g } from "./TemplateContext.js";
-import { dataLocationToPath as A, evaluateAttributes as E, evaluateTemplateValue as P, evaluateTemplateValueCollection as R, isTemplateValue as h, useEvaluatedAttributes as L } from "./TemplateSystem.js";
+import { dataLocationToPath as R, evaluateAttributes as V, evaluateTemplateValue as E, evaluateTemplateValueCollection as P, isTemplateValue as h, useEvaluatedAttributes as L } from "./TemplateSystem.js";
 import { alterData as z } from "./utility/alterData.js";
-import { analyzeDataOverrideReferences as F } from "./utility/analyzeDataOverrideReferences.js";
-import { applyDataMapping as J } from "./utility/dataMappingSystem.js";
+import { analyzeDataOverrideReferences as J } from "./utility/analyzeDataOverrideReferences.js";
+import { applyDataMapping as G } from "./utility/dataMappingSystem.js";
 import { formatString as j, maybeFormatString as w } from "./utility/formatString.js";
-import { propsDataLocationToPathAndValue as O } from "./utility/formElementsCommon.js";
-import { parseRjBuild as q } from "./utility/parseRjBuild.js";
-import { normalizeAttributesForReactJsx as I } from "./utility/reactJsxHelpers.js";
-import { stringToBoolean as N } from "./utility/stringToBoolean.js";
-import { View as U } from "./View.js";
+import { propsDataLocationToPathAndValue as N } from "./utility/formElementsCommon.js";
+import { parseRjBuild as k } from "./utility/parseRjBuild.js";
+import { normalizeAttributeNameForReactJsx as H, normalizeAttributesForReactJsx as I } from "./utility/reactJsxHelpers.js";
+import { stringToBoolean as Q } from "./utility/stringToBoolean.js";
+import { View as W } from "./View.js";
 export {
   o as ActionDependant,
   m as EventDispatcherContext,
   l as EventDispatcherProvider,
   u as GlobalDataContext,
-  d as GlobalDataContextProvider,
+  c as GlobalDataContextProvider,
   D as PaginationContext,
-  T as ReactiveJsonRoot,
+  b as ReactiveJsonRoot,
   g as TemplateContext,
-  U as View,
+  W as View,
   x as addEventListener,
   z as alterData,
-  F as analyzeDataOverrideReferences,
-  J as applyDataMapping,
-  A as dataLocationToPath,
-  E as evaluateAttributes,
-  P as evaluateTemplateValue,
-  R as evaluateTemplateValueCollection,
+  J as analyzeDataOverrideReferences,
+  G as applyDataMapping,
+  R as dataLocationToPath,
+  V as evaluateAttributes,
+  E as evaluateTemplateValue,
+  P as evaluateTemplateValueCollection,
   j as formatString,
   h as isTemplateValue,
   r as isValid,
   w as maybeFormatString,
   p as mergeComponentCollections,
+  H as normalizeAttributeNameForReactJsx,
   I as normalizeAttributesForReactJsx,
-  q as parseRjBuild,
-  O as propsDataLocationToPathAndValue,
+  k as parseRjBuild,
+  N as propsDataLocationToPathAndValue,
   f as removeEventListener,
-  N as stringToBoolean,
+  Q as stringToBoolean,
   L as useEvaluatedAttributes
 };

package/dist/engine/utility/index.js

@@ -1,19 +1,20 @@
 import { alterData as t } from "./alterData.js";
-import { analyzeDataOverrideReferences as e } from "./analyzeDataOverrideReferences.js";
+import { analyzeDataOverrideReferences as a } from "./analyzeDataOverrideReferences.js";
 import { applyDataMapping as m } from "./dataMappingSystem.js";
-import { formatString as n, maybeFormatString as i } from "./formatString.js";
+import { formatString as n, maybeFormatString as f } from "./formatString.js";
 import { propsDataLocationToPathAndValue as l } from "./formElementsCommon.js";
-import { parseRjBuild as g } from "./parseRjBuild.js";
-import { normalizeAttributesForReactJsx as c } from "./reactJsxHelpers.js";
-import { stringToBoolean as u } from "./stringToBoolean.js";
+import { parseRjBuild as c } from "./parseRjBuild.js";
+import { normalizeAttributeNameForReactJsx as u, normalizeAttributesForReactJsx as D } from "./reactJsxHelpers.js";
+import { stringToBoolean as b } from "./stringToBoolean.js";
 export {
   t as alterData,
-  e as analyzeDataOverrideReferences,
+  a as analyzeDataOverrideReferences,
   m as applyDataMapping,
   n as formatString,
-  i as maybeFormatString,
-  c as normalizeAttributesForReactJsx,
-  g as parseRjBuild,
+  f as maybeFormatString,
+  u as normalizeAttributeNameForReactJsx,
+  D as normalizeAttributesForReactJsx,
+  c as parseRjBuild,
   l as propsDataLocationToPathAndValue,
-  u as stringToBoolean
+  b as stringToBoolean
 };

package/dist/engine/utility/reactJsxHelpers.js

@@ -1,16 +1,17 @@
-const a = (t) => {
+const r = {
+  class: "className",
+  for: "htmlFor"
+}, a = (t) => {
   if (typeof t != "object" || Object.keys(t).length === 0)
     return {};
-  const r = {
-    class: "className",
-    for: "htmlFor"
-  }, o = {};
-  for (const [e, n] of Object.entries(t)) {
-    const s = r.hasOwnProperty(e) ? r[e] : e;
-    o[s] = n;
+  const e = {};
+  for (const [o, n] of Object.entries(t)) {
+    const s = c(o);
+    e[s] = n;
   }
-  return o;
-};
+  return e;
+}, c = (t) => r.hasOwnProperty(t) ? r[t] : t;
 export {
+  c as normalizeAttributeNameForReactJsx,
   a as normalizeAttributesForReactJsx
 };

package/dist/main.js

@@ -1,168 +1,169 @@
 import { HashChangeListener as r } from "./component/action/HashChangeListener.js";
 import { Hide as a } from "./component/action/Hide.js";
-import { MessageListener as m } from "./component/action/MessageListener.js";
+import { MessageListener as p } from "./component/action/MessageListener.js";
 import { ReactOnEvent as f } from "./component/action/ReactOnEvent.js";
 import { Redirect as l } from "./component/action/Redirect.js";
 import { SetAttributeValue as s } from "./component/action/SetAttributeValue.js";
 import { ToggleAttributeValue as u } from "./component/action/ToggleAttributeValue.js";
 import { UnsetAttribute as F } from "./component/action/UnsetAttribute.js";
-import { UnsetAttributeValue as g } from "./component/action/UnsetAttributeValue.js";
-import { VisuallyHide as v } from "./component/action/VisuallyHide.js";
+import { UnsetAttributeValue as b } from "./component/action/UnsetAttributeValue.js";
+import { VisuallyHide as g } from "./component/action/VisuallyHide.js";
 import { coreDataMappingComponents as T } from "./component/dataMapping/index.js";
 import { coreDataProcessorComponents as V } from "./component/dataProcessor/index.js";
-import { coreElementComponents as P } from "./component/element/index.js";
-import { usePagination as E } from "./component/hook/usePagination.js";
-import { coreReactionComponents as L } from "./component/reaction/index.js";
-import { ActionDependant as H, isValid as y } from "./engine/Actions.js";
-import { mergeComponentCollections as B } from "./engine/ComponentCollector.js";
+import { coreElementComponents as A } from "./component/element/index.js";
+import { coreHookComponents as P } from "./component/hook/index.js";
+import { coreReactionComponents as H } from "./component/reaction/index.js";
+import { ActionDependant as M, isValid as y } from "./engine/Actions.js";
+import { mergeComponentCollections as w } from "./engine/ComponentCollector.js";
 import { EventDispatcherContext as N } from "./engine/EventDispatcherContext.js";
-import { EventDispatcherProvider as k, addEventListener as z, removeEventListener as G } from "./engine/EventDispatcherProvider.js";
+import { EventDispatcherProvider as z, addEventListener as U, removeEventListener as G } from "./engine/EventDispatcherProvider.js";
 import { GlobalDataContext as O } from "./engine/GlobalDataContext.js";
 import { GlobalDataContextProvider as j } from "./engine/GlobalDataContextProvider.js";
 import { PaginationContext as K } from "./engine/PaginationContext.js";
 import { ReactiveJsonRoot as X } from "./engine/ReactiveJsonRoot.js";
 import { TemplateContext as Z } from "./engine/TemplateContext.js";
 import { dataLocationToPath as $, evaluateAttributes as ee, evaluateTemplateValue as oe, evaluateTemplateValueCollection as re, isTemplateValue as te, useEvaluatedAttributes as ae } from "./engine/TemplateSystem.js";
-import { alterData as me } from "./engine/utility/alterData.js";
+import { alterData as pe } from "./engine/utility/alterData.js";
 import { analyzeDataOverrideReferences as fe } from "./engine/utility/analyzeDataOverrideReferences.js";
 import { applyDataMapping as le } from "./engine/utility/dataMappingSystem.js";
 import { formatString as se, maybeFormatString as de } from "./engine/utility/formatString.js";
 import { propsDataLocationToPathAndValue as ce } from "./engine/utility/formElementsCommon.js";
 import { parseRjBuild as De } from "./engine/utility/parseRjBuild.js";
-import { normalizeAttributesForReactJsx as be } from "./engine/utility/reactJsxHelpers.js";
-import { stringToBoolean as Ce } from "./engine/utility/stringToBoolean.js";
-import { View as Re } from "./engine/View.js";
-import { simpleMapping as he } from "./component/dataMapping/simpleMapping.js";
-import { VariablesDebug as Ae } from "./component/element/debug/VariablesDebug/VariablesDebug.js";
-import { Input as Se } from "./component/element/form/Input.js";
+import { normalizeAttributeNameForReactJsx as Ce, normalizeAttributesForReactJsx as ge } from "./engine/utility/reactJsxHelpers.js";
+import { stringToBoolean as Te } from "./engine/utility/stringToBoolean.js";
+import { View as Ve } from "./engine/View.js";
+import { simpleMapping as Ae } from "./component/dataMapping/simpleMapping.js";
+import { VariablesDebug as Pe } from "./component/element/debug/VariablesDebug/VariablesDebug.js";
+import { Input as He } from "./component/element/form/Input.js";
 import { ColorField as Me } from "./component/element/form/ColorField.js";
-import { DateField as ye } from "./component/element/form/DateField.js";
+import { DateField as Je } from "./component/element/form/DateField.js";
 import { DateTimeField as Be } from "./component/element/form/DateTimeField.js";
-import { EmailField as Ne } from "./component/element/form/EmailField.js";
-import { FileField as ke } from "./component/element/form/FileField.js";
-import { HiddenField as Ge } from "./component/element/form/HiddenField.js";
-import { MonthField as Oe } from "./component/element/form/MonthField.js";
-import { NumberField as je } from "./component/element/form/NumberField.js";
-import { PasswordField as Ke } from "./component/element/form/PasswordField.js";
-import { RangeField as Xe } from "./component/element/form/RangeField.js";
-import { SearchField as Ze } from "./component/element/form/SearchField.js";
-import { TelField as $e } from "./component/element/form/TelField.js";
-import { TextField as oo } from "./component/element/form/TextField.js";
-import { TimeField as to } from "./component/element/form/TimeField.js";
+import { EmailField as ke } from "./component/element/form/EmailField.js";
+import { FileField as Ue } from "./component/element/form/FileField.js";
+import { HiddenField as Ie } from "./component/element/form/HiddenField.js";
+import { MonthField as We } from "./component/element/form/MonthField.js";
+import { NumberField as qe } from "./component/element/form/NumberField.js";
+import { PasswordField as Qe } from "./component/element/form/PasswordField.js";
+import { RangeField as Ye } from "./component/element/form/RangeField.js";
+import { SearchField as _e } from "./component/element/form/SearchField.js";
+import { TelField as eo } from "./component/element/form/TelField.js";
+import { TextField as ro } from "./component/element/form/TextField.js";
+import { TimeField as ao } from "./component/element/form/TimeField.js";
 import { UrlField as po } from "./component/element/form/UrlField.js";
-import { WeekField as xo } from "./component/element/form/WeekField.js";
-import { FolderSortableTree as io } from "./component/element/html/FolderSortableTree.js";
-import { FormatNumeral as no } from "./component/element/html/FormatNumeral.js";
-import { Html as uo } from "./component/element/html/Html.js";
-import { LabelFromValue as Fo } from "./component/element/html/LabelFromValue.js";
-import { PreformattedMarkup as go } from "./component/element/html/PreformattedMarkup.js";
+import { WeekField as fo } from "./component/element/form/WeekField.js";
+import { FolderSortableTree as lo } from "./component/element/html/FolderSortableTree.js";
+import { FormatNumeral as so } from "./component/element/html/FormatNumeral.js";
+import { Html as co } from "./component/element/html/Html.js";
+import { LabelFromValue as Do } from "./component/element/html/LabelFromValue.js";
+import { PreformattedMarkup as Co } from "./component/element/html/PreformattedMarkup.js";
 import { SortableTreeItemCollapseButton as vo } from "./component/element/html/SortableTreeItemCollapseButton.js";
-import { Count as To } from "./component/element/special/Count.js";
-import { DataFilter as Vo } from "./component/element/special/DataFilter.js";
-import { DelayedActions as Po, getReactionFunctionsToExecute as Ao } from "./component/element/special/DelayedActions.js";
-import { PageControls as So } from "./component/element/special/PageControls.js";
+import { Count as Ro } from "./component/element/special/Count.js";
+import { DataFilter as ho } from "./component/element/special/DataFilter.js";
+import { DelayedActions as Eo, getReactionFunctionsToExecute as Po } from "./component/element/special/DelayedActions.js";
+import { PageControls as Ho } from "./component/element/special/PageControls.js";
 import { Phantom as Mo } from "./component/element/special/Phantom.js";
-import { ReactiveJsonBasicComponentWrapper as yo } from "./component/element/special/ReactiveJsonBasicComponentWrapper.js";
+import { ReactiveJsonBasicComponentWrapper as Jo } from "./component/element/special/ReactiveJsonBasicComponentWrapper.js";
 import { ReactiveJsonSubroot as Bo } from "./component/element/special/ReactiveJsonSubroot.js";
-import { Switch as No } from "./component/element/special/Switch.js";
-import { addData as ko } from "./component/reaction/addData.js";
-import { fetchData as Go } from "./component/reaction/fetchData.js";
-import { e as Oo } from "./httpRequestCommon-DUo2Oxgl.js";
-import { moveData as jo } from "./component/reaction/moveData.js";
-import { postMessage as Ko } from "./component/reaction/postMessage.js";
-import { redirectNow as Xo } from "./component/reaction/redirectNow.js";
-import { removeData as Zo } from "./component/reaction/removeData.js";
-import { setClipboardData as $o } from "./component/reaction/setClipboardData.js";
-import { setData as or } from "./component/reaction/setData.js";
-import { submitData as tr } from "./component/reaction/submitData.js";
+import { Switch as ko } from "./component/element/special/Switch.js";
+import { addData as Uo } from "./component/reaction/addData.js";
+import { fetchData as Io } from "./component/reaction/fetchData.js";
+import { e as Wo } from "./httpRequestCommon-DUo2Oxgl.js";
+import { moveData as qo } from "./component/reaction/moveData.js";
+import { postMessage as Qo } from "./component/reaction/postMessage.js";
+import { redirectNow as Yo } from "./component/reaction/redirectNow.js";
+import { removeData as _o } from "./component/reaction/removeData.js";
+import { setClipboardData as er } from "./component/reaction/setClipboardData.js";
+import { setData as rr } from "./component/reaction/setData.js";
+import { submitData as ar } from "./component/reaction/submitData.js";
 import { triggerEvent as pr } from "./component/reaction/triggerEvent.js";
 export {
-  H as ActionDependant,
+  M as ActionDependant,
   Me as ColorField,
-  To as Count,
-  Vo as DataFilter,
-  ye as DateField,
+  Ro as Count,
+  ho as DataFilter,
+  Je as DateField,
   Be as DateTimeField,
-  Po as DelayedActions,
-  Ne as EmailField,
+  Eo as DelayedActions,
+  ke as EmailField,
   N as EventDispatcherContext,
-  k as EventDispatcherProvider,
-  ke as FileField,
-  io as FolderSortableTree,
-  no as FormatNumeral,
+  z as EventDispatcherProvider,
+  Ue as FileField,
+  lo as FolderSortableTree,
+  so as FormatNumeral,
   O as GlobalDataContext,
   j as GlobalDataContextProvider,
   r as HashChangeListener,
-  Ge as HiddenField,
+  Ie as HiddenField,
   a as Hide,
-  uo as Html,
-  Se as Input,
-  Fo as LabelFromValue,
-  m as MessageListener,
-  Oe as MonthField,
-  je as NumberField,
-  So as PageControls,
+  co as Html,
+  He as Input,
+  Do as LabelFromValue,
+  p as MessageListener,
+  We as MonthField,
+  qe as NumberField,
+  Ho as PageControls,
   K as PaginationContext,
-  Ke as PasswordField,
+  Qe as PasswordField,
   Mo as Phantom,
-  go as PreformattedMarkup,
-  Xe as RangeField,
+  Co as PreformattedMarkup,
+  Ye as RangeField,
   f as ReactOnEvent,
-  yo as ReactiveJsonBasicComponentWrapper,
+  Jo as ReactiveJsonBasicComponentWrapper,
   X as ReactiveJsonRoot,
   Bo as ReactiveJsonSubroot,
   l as Redirect,
-  Ze as SearchField,
+  _e as SearchField,
   s as SetAttributeValue,
   vo as SortableTreeItemCollapseButton,
-  No as Switch,
-  $e as TelField,
+  ko as Switch,
+  eo as TelField,
   Z as TemplateContext,
-  oo as TextField,
-  to as TimeField,
+  ro as TextField,
+  ao as TimeField,
   u as ToggleAttributeValue,
   F as UnsetAttribute,
-  g as UnsetAttributeValue,
+  b as UnsetAttributeValue,
   po as UrlField,
-  Ae as VariablesDebug,
-  Re as View,
-  v as VisuallyHide,
-  xo as WeekField,
-  ko as addData,
-  z as addEventListener,
-  me as alterData,
+  Pe as VariablesDebug,
+  Ve as View,
+  g as VisuallyHide,
+  fo as WeekField,
+  Uo as addData,
+  U as addEventListener,
+  pe as alterData,
   fe as analyzeDataOverrideReferences,
   le as applyDataMapping,
   T as coreDataMappingComponents,
   V as coreDataProcessorComponents,
-  P as coreElementComponents,
-  L as coreReactionComponents,
+  A as coreElementComponents,
+  P as coreHookComponents,
+  H as coreReactionComponents,
   $ as dataLocationToPath,
   ee as evaluateAttributes,
   oe as evaluateTemplateValue,
   re as evaluateTemplateValueCollection,
-  Oo as executeHttpRequest,
-  Go as fetchData,
+  Wo as executeHttpRequest,
+  Io as fetchData,
   se as formatString,
-  Ao as getReactionFunctionsToExecute,
+  Po as getReactionFunctionsToExecute,
   te as isTemplateValue,
   y as isValid,
   de as maybeFormatString,
-  B as mergeComponentCollections,
-  jo as moveData,
-  be as normalizeAttributesForReactJsx,
+  w as mergeComponentCollections,
+  qo as moveData,
+  Ce as normalizeAttributeNameForReactJsx,
+  ge as normalizeAttributesForReactJsx,
   De as parseRjBuild,
-  Ko as postMessage,
+  Qo as postMessage,
   ce as propsDataLocationToPathAndValue,
-  Xo as redirectNow,
-  Zo as removeData,
+  Yo as redirectNow,
+  _o as removeData,
   G as removeEventListener,
-  $o as setClipboardData,
-  or as setData,
-  he as simpleMapping,
-  Ce as stringToBoolean,
-  tr as submitData,
+  er as setClipboardData,
+  rr as setData,
+  Ae as simpleMapping,
+  Te as stringToBoolean,
+  ar as submitData,
   pr as triggerEvent,
-  ae as useEvaluatedAttributes,
-  E as usePagination
+  ae as useEvaluatedAttributes
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ea-lab/reactive-json",
   "private": false,
-  "version": "1.0.0-alpha.6",
+  "version": "1.0.0",
   "type": "module",
   "repository": {
     "type": "git",