json-renderers-build 1.5.1 → 1.6.1

package/docs/dist/min.js

@@ -1,24 +1,24 @@
-const g = {
+const E = {
   version: "v4.0.0",
   description: "build table from store data and render to DOM uses json-to-spec, json-to-dom under the hood"
-}, j = (t) => {
+}, N = (t) => {
   var r;
   typeof globalThis > "u" || !t || (globalThis.ks ?? (globalThis.ks = {}), (r = globalThis.ks).jsonRenderersBuild ?? (r.jsonRenderersBuild = {
-    meta: g,
+    meta: E,
     renderToDom: t
   }));
-}, E = {
+}, x = {
   version: "v32",
   description: "JSON-to-DOM engine with centralized traversal and responsibility-focused construction"
-}, N = ({ inFuncDefinition: t } = {}) => {
+}, F = ({ inFuncDefinition: t } = {}) => {
   if (typeof globalThis > "u" || !t) return;
   globalThis.ks ?? (globalThis.ks = {});
   const r = {
-    meta: E,
+    meta: x,
     buildSpecElement: t
   };
   globalThis.ks.jsonToSpec = r;
-}, O = (t, r) => f(t, r), b = (t, r) => Array.isArray(t) ? t.map((e) => O(e, r)).flat(1 / 0).filter(Boolean) : [], x = (t, r) => {
+}, O = (t, r) => f(t, r), b = (t, r) => Array.isArray(t) ? t.map((e) => O(e, r)).flat(1 / 0).filter(Boolean) : [], R = (t, r) => {
   if ("source" in t && (t == null ? void 0 : t.source) in r) {
     const e = r[t == null ? void 0 : t.source];
     if (Array.isArray(e))
@@ -28,20 +28,20 @@ const g = {
           return f(c, o);
       });
   }
-}, F = (t, r) => {
+}, D = (t, r) => {
   let e = [];
   for (const [n, o] of Object.entries(r)) {
     const c = t == null ? void 0 : t.template;
     if (c) {
-      const a = f(c, {
+      const l = f(c, {
         key: n,
         value: o
       });
-      e.push(a);
+      e.push(l);
     }
   }
   return e;
-}, R = (t, r) => {
+}, k = (t, r) => {
   if ("source" in t && (t == null ? void 0 : t.source) in r) {
     const e = r[t == null ? void 0 : t.source];
     if (Array.isArray(e))
@@ -51,14 +51,14 @@ const g = {
           return f(c, o);
       });
   }
-}, D = (t, r) => {
+}, C = (t, r) => {
   if ("operation" in t) {
     if (t.operation === "loopArray")
-      return x(t, r);
+      return R(t, r);
     if (t.operation === "loopObject")
-      return F(t, r);
+      return D(t, r);
     if (t.operation === "loopCollection")
-      return R(t, r);
+      return k(t, r);
   }
 }, A = (t, r) => {
   if (typeof r == "string") return r;
@@ -71,30 +71,30 @@ const g = {
     return (r == null ? void 0 : r[n]) ?? "";
   }
   return t;
-}, k = (t, r) => {
+}, w = (t, r) => {
   let e = {};
   for (const [n, o] of Object.entries(t)) {
     const c = A(o, r);
     e[n] = c;
   }
   return e;
-}, C = (t, r) => {
+}, V = (t, r) => {
   if ("tagName" in t) {
     if ("textContent" in t) {
       const e = A(t.textContent, r);
       t.textContent = e;
     }
     if ("attributes" in t) {
-      const e = k(t.attributes, r);
+      const e = w(t.attributes, r);
       t.attributes = e;
     }
   }
-}, w = (t, r) => {
+}, I = (t, r) => {
   if (!t || typeof t != "object" || Array.isArray(t)) return null;
   const e = structuredClone(t);
   if (!e) return null;
-  if ("tagName" in e && C(e, r), "jsonToSpec" in e) {
-    const n = e == null ? void 0 : e.jsonToSpec, o = D(n, r);
+  if ("tagName" in e && V(e, r), "jsonToSpec" in e) {
+    const n = e == null ? void 0 : e.jsonToSpec, o = C(n, r);
     Array.isArray(o) ? e.children = o : e.children = [o], delete e.jsonToSpec;
   }
   if (Array.isArray(e == null ? void 0 : e.children)) {
@@ -102,11 +102,11 @@ const g = {
     e.children = n;
   }
   return e;
-}, f = (t, r) => t == null ? null : typeof Node < "u" && t instanceof Node ? t : Array.isArray(t) ? b(t, r) : typeof t == "object" ? w(t, r) : typeof t == "string" || typeof t == "number" ? document.createTextNode(String(t)) : t, y = (t, r) => f(t, r);
-N({
-  inFuncDefinition: y
+}, f = (t, r) => t == null ? null : typeof Node < "u" && t instanceof Node ? t : Array.isArray(t) ? b(t, r) : typeof t == "object" ? I(t, r) : typeof t == "string" || typeof t == "number" ? document.createTextNode(String(t)) : t, $ = (t, r) => f(t, r);
+F({
+  inFuncDefinition: $
 });
-const V = {
+const K = {
   default: {
     tagName: "table",
     attributes: {
@@ -152,134 +152,113 @@ const V = {
       }
     ]
   }
-}, I = ({
+}, B = ({
   inColumns: t,
   inData: r
 } = {}) => {
   const e = r ?? [], n = t;
-  return y(V.default, {
+  return $(K.default, {
     columns: n,
     data: e
   });
-}, K = "select", B = {
-  id: "LedgerName"
-}, M = {
-  operation: "loopArray",
-  source: "arrayOfStrings",
-  template: {
-    tagName: "option",
-    attributes: {
-      value: "${}"
-    },
-    textContent: "${}"
-  }
-}, T = [], G = {
-  tagName: K,
-  attributes: B,
-  jsonToSpec: M,
-  children: T
-}, z = ({
-  inData: t
-} = {}) => y(G, {
-  arrayOfStrings: t ?? []
-}), $ = ({ inItems: t, inRecipe: r, inExecute: e }) => {
+}, h = ({ inItems: t, inRecipe: r, inExecute: e }) => {
   const n = t, o = r, c = e;
-  return n.map((a) => d({
-    inSource: a,
+  return n.map((l) => y({
+    inSource: l,
     inRecipe: o,
     inExecute: c
   })).flat(1 / 0).filter(Boolean);
-}, L = ({ inSource: t, inRecipe: r, inExecute: e }) => {
+}, M = ({ inSource: t, inRecipe: r, inExecute: e }) => {
   const n = t, o = r, c = e;
-  let a = n;
-  typeof c == "function" && (a = c({
+  let l = n;
+  typeof c == "function" && (l = c({
     inSource: n,
     inRecipe: o
   }));
-  for (const [l, u] of Object.entries(a))
-    Array.isArray(u) && o && l in o && (a[l] = $({
+  for (const [a, u] of Object.entries(l))
+    Array.isArray(u) && o && a in o && (l[a] = h({
       inItems: u,
-      inRecipe: o[l],
+      inRecipe: o[a],
       inExecute: c
     }));
-  return a;
-}, d = ({ inSource: t, inRecipe: r, inExecute: e }) => {
+  return l;
+}, y = ({ inSource: t, inRecipe: r, inExecute: e }) => {
   const n = t, o = r, c = e;
-  return Array.isArray(n) ? $({
+  return Array.isArray(n) ? h({
     inItems: n,
     inRecipe: o,
     inExecute: c
-  }) : typeof n == "object" && n !== null ? L({
+  }) : typeof n == "object" && n !== null ? M({
     inSource: n,
     inRecipe: o,
     inExecute: c
   }) : n;
-}, P = ({ inKey: t, inDirective: r }) => {
+}, G = ({ inKey: t, inDirective: r }) => {
   const e = t, n = r;
   return (n == null ? void 0 : n.alterKey) || e;
-}, U = ({ inValue: t, inDirective: r, inExecute: e }) => {
+}, z = ({ inValue: t, inDirective: r, inExecute: e }) => {
   const n = t, o = r, c = e;
-  return o && "transform" in o ? d({
+  return o && "transform" in o ? y({
     inSource: n,
     inRecipe: o,
     inExecute: c
   }) : n;
-}, _ = ({ inValue: t, inDirective: r }) => {
+}, L = ({ inValue: t, inDirective: r }) => {
   const e = t, n = r;
   return (n == null ? void 0 : n.valueType) === "array" && !Array.isArray(e) ? [e] : e;
-}, q = ({ inValue: t, inDirective: r }) => {
+}, P = ({ inValue: t, inDirective: r }) => {
   const e = t, n = r;
   return n != null && n.valueKey && e && typeof e == "object" ? e[n.valueKey] : e;
-}, H = ({ inSource: t, inTransform: r, inExecute: e }) => {
-  const n = t, o = r, c = e, a = {};
-  for (const [l, u] of Object.entries(n)) {
-    if (!(l in o))
+}, U = ({ inSource: t, inTransform: r, inExecute: e }) => {
+  const n = t, o = r, c = e, l = {};
+  for (const [a, u] of Object.entries(n)) {
+    if (!(a in o))
       continue;
-    const i = o[l], h = P({ inKey: l, inDirective: i });
+    const i = o[a], j = G({ inKey: a, inDirective: i });
     let s = u;
-    s = U({
+    s = z({
       inValue: s,
       inDirective: i,
       inExecute: c
-    }), s = _({ inValue: s, inDirective: i }), s = q({ inValue: s, inDirective: i }), a[h] = s;
+    }), s = L({ inValue: s, inDirective: i }), s = P({ inValue: s, inDirective: i }), l[j] = s;
   }
-  return a;
+  return l;
 };
 function v(t, r) {
   for (const e in t)
     typeof t[e] == "object" && t[e] !== null ? v(t[e], r) : typeof t[e] == "string" && t[e] === "${}" && (t[e] = r);
   return t;
 }
-const Q = ({ inSource: t, inOperation: r, inExecute: e }) => {
+const _ = ({ inSource: t, inOperation: r, inExecute: e }) => {
   const n = t, o = r;
-  for (const [c, a] of Object.entries(o))
-    if ("operationType" in a && a.operationType === "loopArray" && c in n) {
-      const l = n[c].map((u) => {
-        const i = { ...a == null ? void 0 : a.template };
+  for (const [c, l] of Object.entries(o))
+    if ("operationType" in l && l.operationType === "loopArray" && c in n) {
+      const a = n[c].map((u) => {
+        const i = { ...l == null ? void 0 : l.template };
         return v(i, u), i;
       });
-      n[c] = l;
+      n[c] = a;
     }
   return n;
 }, m = ({ inSource: t, inRecipe: r }) => {
   let e = t;
   const n = r;
-  return n && typeof n == "object" && "transform" in n && (e = H({
+  return n && typeof n == "object" && "transform" in n && (e = U({
     inSource: e,
     inTransform: n.transform,
     inExecute: m
-  })), n && typeof n == "object" && "operation" in n && (e = Q({
+  })), n && typeof n == "object" && "operation" in n && (e = _({
     inSource: e,
     inOperation: n.operation,
     inExecute: m
   })), e;
-}, W = (t, r) => d({
+}, q = (t, r) => y({
   inSource: t,
   inRecipe: r,
   inExecute: m
-}), X = {
+}), H = {
   children: ""
-}, Y = {
+}, Q = {
   children: {
     operationType: "loopArray",
     template: {
@@ -290,18 +269,31 @@ const Q = ({ inSource: t, inOperation: r, inExecute: e }) => {
       textContent: "${}"
     }
   }
-}, Z = {
-  transform: X,
-  operation: Y
-}, S = ({
+}, W = {
+  transform: H,
+  operation: Q
+}, g = ({
   inData: t
-} = {}) => W({
-  Children: t ?? []
-}, Z), p = {
-  table: I,
-  select: z,
-  selectOptionsOnly: S
-}, J = ({
+} = {}) => q({
+  children: t ?? []
+}, W), X = "select", Y = {
+  id: "LedgerName"
+}, Z = [], d = {
+  tagName: X,
+  attributes: Y,
+  children: Z
+}, T = ({
+  inData: t
+} = {}) => {
+  let e = g({
+    inData: t ?? []
+  });
+  return d.children = e == null ? void 0 : e.children, d;
+}, p = {
+  table: B,
+  select: T,
+  selectOptionsOnly: g
+}, S = ({
   type: t = "table",
   data: r,
   columns: e
@@ -314,7 +306,7 @@ const Q = ({ inSource: t, inOperation: r, inExecute: e }) => {
     `[Renderer] Unknown renderer type "${n}". Available types: ${Object.keys(p).join(", ")}`
   ), null);
 };
-j(J);
+N(S);
 export {
-  J as default
+  S as default
 };

package/docs/dist/v5/min.js

@@ -0,0 +1,312 @@
+const E = {
+  version: "v4.0.0",
+  description: "build table from store data and render to DOM uses json-to-spec, json-to-dom under the hood"
+}, N = (t) => {
+  var r;
+  typeof globalThis > "u" || !t || (globalThis.ks ?? (globalThis.ks = {}), (r = globalThis.ks).jsonRenderersBuild ?? (r.jsonRenderersBuild = {
+    meta: E,
+    renderToDom: t
+  }));
+}, x = {
+  version: "v32",
+  description: "JSON-to-DOM engine with centralized traversal and responsibility-focused construction"
+}, F = ({ inFuncDefinition: t } = {}) => {
+  if (typeof globalThis > "u" || !t) return;
+  globalThis.ks ?? (globalThis.ks = {});
+  const r = {
+    meta: x,
+    buildSpecElement: t
+  };
+  globalThis.ks.jsonToSpec = r;
+}, O = (t, r) => f(t, r), b = (t, r) => Array.isArray(t) ? t.map((e) => O(e, r)).flat(1 / 0).filter(Boolean) : [], R = (t, r) => {
+  if ("source" in t && (t == null ? void 0 : t.source) in r) {
+    const e = r[t == null ? void 0 : t.source];
+    if (Array.isArray(e))
+      return e.map((o) => {
+        const c = t == null ? void 0 : t.template;
+        if (c)
+          return f(c, o);
+      });
+  }
+}, D = (t, r) => {
+  let e = [];
+  for (const [n, o] of Object.entries(r)) {
+    const c = t == null ? void 0 : t.template;
+    if (c) {
+      const l = f(c, {
+        key: n,
+        value: o
+      });
+      e.push(l);
+    }
+  }
+  return e;
+}, k = (t, r) => {
+  if ("source" in t && (t == null ? void 0 : t.source) in r) {
+    const e = r[t == null ? void 0 : t.source];
+    if (Array.isArray(e))
+      return e.map((o) => {
+        const c = t == null ? void 0 : t.template;
+        if (c)
+          return f(c, o);
+      });
+  }
+}, C = (t, r) => {
+  if ("operation" in t) {
+    if (t.operation === "loopArray")
+      return R(t, r);
+    if (t.operation === "loopObject")
+      return D(t, r);
+    if (t.operation === "loopCollection")
+      return k(t, r);
+  }
+}, A = (t, r) => {
+  if (typeof r == "string") return r;
+  if (typeof t != "string") return t;
+  if (t === "${value}")
+    return r.value;
+  const e = t.match(/^\$\{(.+?)\}$/);
+  if (e) {
+    const n = e[1];
+    return (r == null ? void 0 : r[n]) ?? "";
+  }
+  return t;
+}, w = (t, r) => {
+  let e = {};
+  for (const [n, o] of Object.entries(t)) {
+    const c = A(o, r);
+    e[n] = c;
+  }
+  return e;
+}, V = (t, r) => {
+  if ("tagName" in t) {
+    if ("textContent" in t) {
+      const e = A(t.textContent, r);
+      t.textContent = e;
+    }
+    if ("attributes" in t) {
+      const e = w(t.attributes, r);
+      t.attributes = e;
+    }
+  }
+}, I = (t, r) => {
+  if (!t || typeof t != "object" || Array.isArray(t)) return null;
+  const e = structuredClone(t);
+  if (!e) return null;
+  if ("tagName" in e && V(e, r), "jsonToSpec" in e) {
+    const n = e == null ? void 0 : e.jsonToSpec, o = C(n, r);
+    Array.isArray(o) ? e.children = o : e.children = [o], delete e.jsonToSpec;
+  }
+  if (Array.isArray(e == null ? void 0 : e.children)) {
+    const n = b(e == null ? void 0 : e.children, r);
+    e.children = n;
+  }
+  return e;
+}, f = (t, r) => t == null ? null : typeof Node < "u" && t instanceof Node ? t : Array.isArray(t) ? b(t, r) : typeof t == "object" ? I(t, r) : typeof t == "string" || typeof t == "number" ? document.createTextNode(String(t)) : t, $ = (t, r) => f(t, r);
+F({
+  inFuncDefinition: $
+});
+const K = {
+  default: {
+    tagName: "table",
+    attributes: {
+      class: "table table-hover table-striped mb-0"
+    },
+    children: [
+      {
+        tagName: "thead",
+        children: [
+          {
+            tagName: "tr",
+            jsonToSpec: {
+              operation: "loopCollection",
+              source: "columns",
+              template: {
+                tagName: "th",
+                textContent: "${title}"
+              }
+            },
+            children: []
+          }
+        ]
+      },
+      {
+        tagName: "tbody",
+        jsonToSpec: {
+          operation: "loopCollection",
+          source: "data",
+          template: {
+            tagName: "tr",
+            jsonToSpec: {
+              operation: "loopObject",
+              source: "data",
+              template: {
+                tagName: "td",
+                textContent: "${value}"
+              }
+            },
+            children: []
+          }
+        },
+        children: []
+      }
+    ]
+  }
+}, B = ({
+  inColumns: t,
+  inData: r
+} = {}) => {
+  const e = r ?? [], n = t;
+  return $(K.default, {
+    columns: n,
+    data: e
+  });
+}, h = ({ inItems: t, inRecipe: r, inExecute: e }) => {
+  const n = t, o = r, c = e;
+  return n.map((l) => y({
+    inSource: l,
+    inRecipe: o,
+    inExecute: c
+  })).flat(1 / 0).filter(Boolean);
+}, M = ({ inSource: t, inRecipe: r, inExecute: e }) => {
+  const n = t, o = r, c = e;
+  let l = n;
+  typeof c == "function" && (l = c({
+    inSource: n,
+    inRecipe: o
+  }));
+  for (const [a, u] of Object.entries(l))
+    Array.isArray(u) && o && a in o && (l[a] = h({
+      inItems: u,
+      inRecipe: o[a],
+      inExecute: c
+    }));
+  return l;
+}, y = ({ inSource: t, inRecipe: r, inExecute: e }) => {
+  const n = t, o = r, c = e;
+  return Array.isArray(n) ? h({
+    inItems: n,
+    inRecipe: o,
+    inExecute: c
+  }) : typeof n == "object" && n !== null ? M({
+    inSource: n,
+    inRecipe: o,
+    inExecute: c
+  }) : n;
+}, G = ({ inKey: t, inDirective: r }) => {
+  const e = t, n = r;
+  return (n == null ? void 0 : n.alterKey) || e;
+}, z = ({ inValue: t, inDirective: r, inExecute: e }) => {
+  const n = t, o = r, c = e;
+  return o && "transform" in o ? y({
+    inSource: n,
+    inRecipe: o,
+    inExecute: c
+  }) : n;
+}, L = ({ inValue: t, inDirective: r }) => {
+  const e = t, n = r;
+  return (n == null ? void 0 : n.valueType) === "array" && !Array.isArray(e) ? [e] : e;
+}, P = ({ inValue: t, inDirective: r }) => {
+  const e = t, n = r;
+  return n != null && n.valueKey && e && typeof e == "object" ? e[n.valueKey] : e;
+}, U = ({ inSource: t, inTransform: r, inExecute: e }) => {
+  const n = t, o = r, c = e, l = {};
+  for (const [a, u] of Object.entries(n)) {
+    if (!(a in o))
+      continue;
+    const i = o[a], j = G({ inKey: a, inDirective: i });
+    let s = u;
+    s = z({
+      inValue: s,
+      inDirective: i,
+      inExecute: c
+    }), s = L({ inValue: s, inDirective: i }), s = P({ inValue: s, inDirective: i }), l[j] = s;
+  }
+  return l;
+};
+function v(t, r) {
+  for (const e in t)
+    typeof t[e] == "object" && t[e] !== null ? v(t[e], r) : typeof t[e] == "string" && t[e] === "${}" && (t[e] = r);
+  return t;
+}
+const _ = ({ inSource: t, inOperation: r, inExecute: e }) => {
+  const n = t, o = r;
+  for (const [c, l] of Object.entries(o))
+    if ("operationType" in l && l.operationType === "loopArray" && c in n) {
+      const a = n[c].map((u) => {
+        const i = { ...l == null ? void 0 : l.template };
+        return v(i, u), i;
+      });
+      n[c] = a;
+    }
+  return n;
+}, m = ({ inSource: t, inRecipe: r }) => {
+  let e = t;
+  const n = r;
+  return n && typeof n == "object" && "transform" in n && (e = U({
+    inSource: e,
+    inTransform: n.transform,
+    inExecute: m
+  })), n && typeof n == "object" && "operation" in n && (e = _({
+    inSource: e,
+    inOperation: n.operation,
+    inExecute: m
+  })), e;
+}, q = (t, r) => y({
+  inSource: t,
+  inRecipe: r,
+  inExecute: m
+}), H = {
+  children: ""
+}, Q = {
+  children: {
+    operationType: "loopArray",
+    template: {
+      tagName: "option",
+      attributes: {
+        value: "${}"
+      },
+      textContent: "${}"
+    }
+  }
+}, W = {
+  transform: H,
+  operation: Q
+}, g = ({
+  inData: t
+} = {}) => q({
+  children: t ?? []
+}, W), X = "select", Y = {
+  id: "LedgerName"
+}, Z = [], d = {
+  tagName: X,
+  attributes: Y,
+  children: Z
+}, T = ({
+  inData: t
+} = {}) => {
+  let e = g({
+    inData: t ?? []
+  });
+  return d.children = e == null ? void 0 : e.children, d;
+}, p = {
+  table: B,
+  select: T,
+  selectOptionsOnly: g
+}, S = ({
+  type: t = "table",
+  data: r,
+  columns: e
+} = {}) => {
+  const n = t, o = p[n];
+  return o ? o({
+    inColumns: e,
+    inData: r
+  }) : (console.error(
+    `[Renderer] Unknown renderer type "${n}". Available types: ${Object.keys(p).join(", ")}`
+  ), null);
+};
+N(S);
+export {
+  S as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "json-renderers-build",
-  "version": "1.5.1",
+  "version": "1.6.1",
   "description": "Headless component specification builder for json-renderers, compiling UI skeletons and data into JSON-to-DOM specs using json-to-spec",
   "type": "module",
   "main": "src/index.js",
@@ -44,4 +44,4 @@
     "@keshavsoft/json-transformer": "^1.13.2",
     "json-to-spec": "^32.1.3"
   }
-}
+}

package/src/index.js

@@ -1,2 +1,2 @@
-export * from "./v5/index.js";
-export { default } from "./v5/index.js";
+export * from "./v6/index.js";
+export { default } from "./v6/index.js";

package/src/v5/selectOptionsOnly/index.js

@@ -13,7 +13,7 @@ const startFunc = ({
     }, skeletonJson);
     // console.log("specAsJsonToDom: ", specAsJsonToDom);
 
-    return specAsJsonToDom;
+    return specAsJsonToDom?.children;
 };
 
 export default startFunc;

package/src/v5/tableHeadCells/index.js

@@ -0,0 +1,19 @@
+import jsonTransform from "@keshavsoft/json-transformer";
+
+import skeletonJson from './skeleton.json' with { type: 'json' };
+
+// --- Story of Table Render ---
+const startFunc = ({
+    inData,
+} = {}) => {
+    const localData = inData ?? [];
+
+    let thAsArray = jsonTransform({
+        children: localData
+    }, skeletonJson);
+    // console.log("specAsJsonToDom: ", specAsJsonToDom);
+
+    return thAsArray?.children;
+};
+
+export default startFunc;

package/src/v5/tableHeadCells/skeleton.json

@@ -0,0 +1,17 @@
+{
+    "transform": {
+        "children": ""
+    },
+    "operation": {
+        "children": {
+            "operationType": "loopArray",
+            "template": {
+                "tagName": "th",
+                "attributes": {
+                    "value": "${}"
+                },
+                "textContent": "${}"
+            }
+        }
+    }
+}

package/src/v6/common/deriveColumnsFromData.js

@@ -0,0 +1,20 @@
+const deriveColumnsFromData = ({ inData = [] } = {}) => {
+    const localData = inData;
+
+    if (!Array.isArray(localData) || localData.length === 0) {
+        return [];
+    }
+
+    const firstRow = localData[0];
+    if (!firstRow || typeof firstRow !== "object") {
+        return [];
+    }
+
+    return Object.keys(firstRow).map(key => ({
+        key,
+        label: key
+    }));
+};
+
+export { deriveColumnsFromData };
+export default deriveColumnsFromData;

package/src/v6/index.js

@@ -0,0 +1,40 @@
+import registerGlobal from "./registerGlobal.js";
+
+import renderTable from "./table/index.js";
+import renderSelect from "./select/index.js";
+import renderSelectOptionsOnly from "./selectOptionsOnly/index.js";
+
+const RENDERER_MAP = {
+    table: renderTable,
+    select: renderSelect,
+    selectOptionsOnly: renderSelectOptionsOnly
+};
+
+const render = ({
+    type = "table",
+    data,
+    columns
+} = {}) => {
+    const rawType = type;
+    const renderer = RENDERER_MAP[rawType];
+
+    if (!renderer) {
+        console.error(
+            `[Renderer] Unknown renderer type "${rawType}". Available types: ${Object.keys(RENDERER_MAP).join(", ")}`
+        );
+        return null;
+    }
+
+    const localData = data;
+    const localColumns = columns;
+
+    // Default to table renderer
+    return renderer({
+        inColumns: localColumns,
+        inData: localData
+    });
+};
+
+registerGlobal(render);
+
+export default render;

package/src/v6/meta.js

@@ -0,0 +1,6 @@
+export const meta = {
+    version: "v4.0.0",
+    description: "build table from store data and render to DOM uses json-to-spec, json-to-dom under the hood"
+};
+
+export default meta;

package/src/v6/registerGlobal.js

@@ -0,0 +1,14 @@
+import meta from "./meta.js";
+
+export const registerGlobal = (inFuncDefinition) => {
+    if (typeof globalThis === "undefined" || !inFuncDefinition) return;
+
+    globalThis.ks ??= {};
+
+    globalThis.ks.jsonRenderersBuild ??= {
+        meta,
+        renderToDom: inFuncDefinition
+    };
+};
+
+export default registerGlobal;

package/src/v6/select/index.js

@@ -0,0 +1,20 @@
+import selectOptionsOnly from "../selectOptionsOnly/index.js";
+
+import skeletonJson from './skeleton.json' with { type: 'json' };
+
+// --- Story of Table Render ---
+const startFunc = ({
+    inData,
+} = {}) => {
+    const localData = inData ?? [];
+
+    let localChildren = selectOptionsOnly({
+        inData: localData
+    });
+    // console.log("specAsJsonToDom: ", specAsJsonToDom);
+    skeletonJson.children = localChildren;
+
+    return skeletonJson;
+};
+
+export default startFunc;

package/src/v6/select/skeleton.json

@@ -0,0 +1,7 @@
+{
+    "tagName": "select",
+    "attributes": {
+        "id": "LedgerName"
+    },
+    "children": []
+}

package/src/v6/selectOptionsOnly/index.js

@@ -0,0 +1,19 @@
+import jsonTransform from "@keshavsoft/json-transformer";
+
+import skeletonJson from './skeleton.json' with { type: 'json' };
+
+// --- Story of Table Render ---
+const startFunc = ({
+    inData,
+} = {}) => {
+    const localData = inData ?? [];
+
+    let specAsJsonToDom = jsonTransform({
+        children: localData
+    }, skeletonJson);
+    // console.log("specAsJsonToDom: ", specAsJsonToDom);
+
+    return specAsJsonToDom?.children;
+};
+
+export default startFunc;

package/src/v6/selectOptionsOnly/skeleton.json

@@ -0,0 +1,17 @@
+{
+    "transform": {
+        "children": ""
+    },
+    "operation": {
+        "children": {
+            "operationType": "loopArray",
+            "template": {
+                "tagName": "option",
+                "attributes": {
+                    "value": "${}"
+                },
+                "textContent": "${}"
+            }
+        }
+    }
+}

package/src/v6/table/index.js

@@ -0,0 +1,20 @@
+import jsonToSpec from "json-to-spec";
+
+import skeletonJson from './skeleton.json' with { type: 'json' };
+
+// --- Story of Table Render ---
+const startFunc = ({
+    inColumns,
+    inData,
+} = {}) => {
+    const localData = inData ?? [];
+    const localColumns = inColumns;
+
+    let specAsJsonToDom = jsonToSpec(skeletonJson.default, {
+        columns: localColumns, data: localData
+    });
+
+    return specAsJsonToDom;
+};
+
+export default startFunc;

package/src/v6/table/skeleton.json

@@ -0,0 +1,47 @@
+{
+    "default": {
+        "tagName": "table",
+        "attributes": {
+            "class": "table table-hover table-striped mb-0"
+        },
+        "children": [
+            {
+                "tagName": "thead",
+                "children": [
+                    {
+                        "tagName": "tr",
+                        "jsonToSpec": {
+                            "operation": "loopCollection",
+                            "source": "columns",
+                            "template": {
+                                "tagName": "th",
+                                "textContent": "${title}"
+                            }
+                        },
+                        "children": []
+                    }
+                ]
+            },
+            {
+                "tagName": "tbody",
+                "jsonToSpec": {
+                    "operation": "loopCollection",
+                    "source": "data",
+                    "template": {
+                        "tagName": "tr",
+                        "jsonToSpec": {
+                            "operation": "loopObject",
+                            "source": "data",
+                            "template": {
+                                "tagName": "td",
+                                "textContent": "${value}"
+                            }
+                        },
+                        "children": []
+                    }
+                },
+                "children": []
+            }
+        ]
+    }
+}

package/src/v6/tableHeadCells/index.js

@@ -0,0 +1,19 @@
+import jsonTransform from "@keshavsoft/json-transformer";
+
+import skeletonJson from './skeleton.json' with { type: 'json' };
+
+// --- Story of Table Render ---
+const startFunc = ({
+    inData,
+} = {}) => {
+    const localData = inData ?? [];
+
+    let thAsArray = jsonTransform({
+        children: localData
+    }, skeletonJson);
+    // console.log("specAsJsonToDom: ", specAsJsonToDom);
+
+    return thAsArray?.children;
+};
+
+export default startFunc;

package/src/v6/tableHeadCells/skeleton.json

@@ -0,0 +1,17 @@
+{
+    "transform": {
+        "children": ""
+    },
+    "operation": {
+        "children": {
+            "operationType": "loopArray",
+            "template": {
+                "tagName": "th",
+                "attributes": {
+                    "value": "${}"
+                },
+                "textContent": "${}"
+            }
+        }
+    }
+}