json-renderers 1.13.2 → 1.13.6

package/docs/dist/v13/min.js

@@ -1,48 +1,48 @@
-const R = {
-  version: "v12.0.0",
+const x = {
+  version: "v13.1.0",
   description: "build table from store data and render to DOM uses json-to-spec, json-to-dom under the hood"
-}, F = (t) => {
+}, j = (t) => {
   var e;
   typeof globalThis > "u" || !t || (globalThis.ks ?? (globalThis.ks = {}), (e = globalThis.ks).jsonRenderers ?? (e.jsonRenderers = {
-    meta: R,
+    meta: x,
     renderToDom: t
   }));
-}, G = {
-  version: "v2.0.0",
+}, v = {
+  version: "v3.0.0",
   description: "build table from store data and render to DOM uses json-to-spec, json-to-dom under the hood"
-}, H = (t) => {
+}, N = (t) => {
   var e;
   typeof globalThis > "u" || !t || (globalThis.ks ?? (globalThis.ks = {}), (e = globalThis.ks).jsonRenderersBuild ?? (e.jsonRenderersBuild = {
-    meta: G,
+    meta: v,
     renderToDom: t
   }));
-}, S = {
+}, $ = {
   version: "v32",
   description: "JSON-to-DOM engine with centralized traversal and responsibility-focused construction"
-}, L = ({ inFuncDefinition: t } = {}) => {
+}, k = ({ inFuncDefinition: t } = {}) => {
   if (typeof globalThis > "u" || !t) return;
   globalThis.ks ?? (globalThis.ks = {});
   const e = {
-    meta: S,
+    meta: $,
     buildSpecElement: t
   };
   globalThis.ks.jsonToSpec = e;
-}, M = (t, e) => d(t, e), C = (t, e) => Array.isArray(t) ? t.map((l) => M(l, e)).flat(1 / 0).filter(Boolean) : [], z = (t, e) => {
+}, D = (t, e) => g(t, e), m = (t, e) => Array.isArray(t) ? t.map((l) => D(l, e)).flat(1 / 0).filter(Boolean) : [], O = (t, e) => {
   if ("source" in t && (t == null ? void 0 : t.source) in e) {
     const l = e[t == null ? void 0 : t.source];
     if (Array.isArray(l))
       return l.map((n) => {
         const r = t == null ? void 0 : t.template;
         if (r)
-          return d(r, n);
+          return g(r, n);
       });
   }
-}, P = (t, e) => {
+}, E = (t, e) => {
   let l = [];
   for (const [o, n] of Object.entries(e)) {
     const r = t == null ? void 0 : t.template;
     if (r) {
-      const a = d(r, {
+      const a = g(r, {
         key: o,
         value: n
       });
@@ -50,26 +50,26 @@ const R = {
     }
   }
   return l;
-}, V = (t, e) => {
+}, S = (t, e) => {
   if ("source" in t && (t == null ? void 0 : t.source) in e) {
     const l = e[t == null ? void 0 : t.source];
     if (Array.isArray(l))
       return l.map((n) => {
         const r = t == null ? void 0 : t.template;
         if (r)
-          return d(r, n);
+          return g(r, n);
       });
   }
-}, q = (t, e) => {
+}, L = (t, e) => {
   if ("operation" in t) {
     if (t.operation === "loopArray")
-      return z(t, e);
+      return O(t, e);
     if (t.operation === "loopObject")
-      return P(t, e);
+      return E(t, e);
     if (t.operation === "loopCollection")
-      return V(t, e);
+      return S(t, e);
   }
-}, A = (t, e) => {
+}, p = (t, e) => {
   if (typeof e == "string") return e;
   if (typeof t != "string") return t;
   if (t === "${value}")
@@ -80,46 +80,42 @@ const R = {
     return (e == null ? void 0 : e[o]) ?? "";
   }
   return t;
-}, B = (t, e) => {
+}, F = (t, e) => {
   let l = {};
   for (const [o, n] of Object.entries(t)) {
-    const r = A(n, e);
+    const r = p(n, e);
     l[o] = r;
   }
   return l;
-}, _ = (t, e) => {
+}, G = (t, e) => {
   if ("tagName" in t) {
     if ("textContent" in t) {
-      const l = A(t.textContent, e);
+      const l = p(t.textContent, e);
       t.textContent = l;
     }
     if ("attributes" in t) {
-      const l = B(t.attributes, e);
+      const l = F(t.attributes, e);
       t.attributes = l;
     }
   }
-}, U = (t, e) => {
+}, M = (t, e) => {
   if (!t || typeof t != "object" || Array.isArray(t)) return null;
   const l = structuredClone(t);
   if (!l) return null;
-  if ("tagName" in l && _(l, e), "jsonToSpec" in l) {
-    const o = l == null ? void 0 : l.jsonToSpec, n = q(o, e);
+  if ("tagName" in l && G(l, e), "jsonToSpec" in l) {
+    const o = l == null ? void 0 : l.jsonToSpec, n = L(o, e);
     Array.isArray(n) ? l.children = n : l.children = [n], delete l.jsonToSpec;
   }
   if (Array.isArray(l == null ? void 0 : l.children)) {
-    const o = C(l == null ? void 0 : l.children, e);
+    const o = m(l == null ? void 0 : l.children, e);
     l.children = o;
   }
   return l;
-}, d = (t, e) => {
-  if (t == null) return null;
-  debugger;
-  return typeof Node < "u" && t instanceof Node ? t : Array.isArray(t) ? C(t, e) : typeof t == "object" ? U(t, e) : typeof t == "string" || typeof t == "number" ? document.createTextNode(String(t)) : t;
-}, x = (t, e) => d(t, e);
-L({
-  inFuncDefinition: x
+}, g = (t, e) => t == null ? null : typeof Node < "u" && t instanceof Node ? t : Array.isArray(t) ? m(t, e) : typeof t == "object" ? M(t, e) : typeof t == "string" || typeof t == "number" ? document.createTextNode(String(t)) : t, h = (t, e) => g(t, e);
+k({
+  inFuncDefinition: h
 });
-const K = {
+const R = {
   default: {
     tagName: "table",
     attributes: {
@@ -165,55 +161,71 @@ const K = {
       }
     ]
   }
-}, X = ({
-  targetHtmlId: t,
-  inTargetHtmlId: e,
-  inColumns: l,
-  inData: o
+}, z = ({
+  inColumns: t,
+  inData: e
 } = {}) => {
-  const n = o ?? [], r = l;
-  return x(K.default, {
-    columns: r,
-    data: n
+  const l = e ?? [], o = t;
+  return h(R.default, {
+    columns: o,
+    data: l
   });
-}, y = {
-  table: X
-}, v = ({
+}, I = "select", V = {
+  id: "LedgerName"
+}, q = {
+  operation: "loopArray",
+  source: "arrayOfStrings",
+  template: {
+    tagName: "option",
+    attributes: {
+      value: "${}"
+    },
+    textContent: "${}"
+  }
+}, B = [], P = {
+  tagName: I,
+  attributes: V,
+  jsonToSpec: q,
+  children: B
+}, H = ({
+  inData: t
+} = {}) => h(P, {
+  arrayOfStrings: t ?? []
+}), _ = {
+  operation: "loopArray",
+  source: "arrayOfStrings",
+  template: {
+    tagName: "option",
+    attributes: {
+      value: "${}"
+    },
+    textContent: "${}"
+  }
+}, U = [], K = {
+  jsonToSpec: _,
+  children: U
+}, X = ({
+  inData: t
+} = {}) => h(K, {
+  arrayOfStrings: t ?? []
+}), w = {
+  table: z,
+  select: H,
+  selectOptionsOnly: X
+}, y = ({
   type: t = "table",
-  targetHtmlId: e,
-  data: l,
-  classToApply: o,
-  inTargetHtmlId: n,
-  inData: r,
-  columns: a,
-  inColumns: s,
-  colGroup: u,
-  inColGroup: c,
-  footerData: i,
-  inFooterData: f,
-  config: b,
-  inConfig: w,
-  variant: m,
-  skeletonType: $,
-  inSkeletonType: E,
-  showLog: D = !1,
-  inShowLog: O
+  data: e,
+  columns: l
 } = {}) => {
-  const g = t, I = typeof g == "string" ? g.toLowerCase() : "table", p = y[I];
-  return p ? p({
-    targetHtmlId: n ?? e,
-    inColumns: s ?? a,
-    inData: r ?? l,
-    inColGroup: c ?? u,
-    inFooterData: f ?? i ?? [],
-    inConfig: w ?? b ?? {},
-    inSkeletonType: E ?? $ ?? m ?? "default",
-    inShowLog: O ?? D ?? !1
+  const o = t, n = w[o];
+  return n ? n({
+    inColumns: l,
+    inData: e
   }) : (console.error(
-    `[Renderer] Unknown renderer type "${g}". Available types: ${Object.keys(y).join(", ")}`
+    `[Renderer] Unknown renderer type "${o}". Available types: ${Object.keys(w).join(", ")}`
   ), null);
 };
-H(v);
+N(y);
 const Q = {
   version: "v9",
   description: "JSON-to-DOM engine with SVG namespace support, mixed text content, and centralized traversal"
@@ -226,7 +238,7 @@ const Q = {
     reviewSpec: e
   };
   globalThis.ks["json-to-tag"] = l, globalThis.ks.jsonToTag = l;
-}, Y = (t) => t == null ? null : typeof Node < "u" && t instanceof Node ? t : typeof t == "string" || typeof t == "number" ? document.createTextNode(String(t)) : typeof t == "object" && (t.nodeType === 3 || t.tagName === "#text" || !t.tagName && (t.textContent !== void 0 || t.text !== void 0)) ? document.createTextNode(t.textContent ?? t.text ?? "") : N(t), j = (t) => Array.isArray(t) ? t.map(Y).flat(1 / 0).filter(Boolean) : [], Z = (t) => (t == null, t), J = "http://www.w3.org/2000/svg", tt = /* @__PURE__ */ new Set([
+}, Y = (t) => t == null ? null : typeof Node < "u" && t instanceof Node ? t : typeof t == "string" || typeof t == "number" ? document.createTextNode(String(t)) : typeof t == "object" && (t.nodeType === 3 || t.tagName === "#text" || !t.tagName && (t.textContent !== void 0 || t.text !== void 0)) ? document.createTextNode(t.textContent ?? t.text ?? "") : C(t), T = (t) => Array.isArray(t) ? t.map(Y).flat(1 / 0).filter(Boolean) : [], Z = (t) => (t == null, t), J = "http://www.w3.org/2000/svg", tt = /* @__PURE__ */ new Set([
   "svg",
   "path",
   "symbol",
@@ -261,7 +273,7 @@ const Q = {
     return l.type = "checkbox", l;
   }
   return tt.has(e) ? document.createElementNS(J, e) : document.createElement(e);
-}, lt = ({ inElement: t, inTextContent: e }) => (!t || e === void 0 || e === null || (t.textContent = e), t), rt = ({ inElement: t, inProperties: e }) => (t && e && typeof e == "object" && Object.assign(t, e), t), ot = "http://www.w3.org/1999/xlink", nt = ({ inElement: t, inAttributes: e }) => {
+}, lt = ({ inElement: t, inTextContent: e }) => (!t || e === void 0 || e === null || (t.textContent = e), t), ot = ({ inElement: t, inProperties: e }) => (t && e && typeof e == "object" && Object.assign(t, e), t), rt = "http://www.w3.org/1999/xlink", nt = ({ inElement: t, inAttributes: e }) => {
   const l = t, o = e;
   if (!l || !o || typeof o != "object")
     return l;
@@ -273,13 +285,13 @@ const Q = {
     }
     if (r === "xlink:href" || r === "href") {
       if (a != null) {
-        const s = String(a);
+        const i = String(a);
         if (n)
           try {
-            l.setAttributeNS(ot, "href", s);
+            l.setAttributeNS(rt, "href", i);
           } catch {
           }
-        l.setAttribute("href", s), l.setAttribute("xlink:href", s);
+        l.setAttribute("href", i), l.setAttribute("xlink:href", i);
       }
       return;
     }
@@ -301,7 +313,7 @@ const Q = {
     inElement: e,
     inTextContent: Z(t.textContent),
     inTagName: t.tagName
-  }), rt({
+  }), ot({
     inElement: e,
     inProperties: t.properties
   }), nt({
@@ -311,11 +323,11 @@ const Q = {
     inElement: e,
     inClassList: t.classList
   }), Array.isArray(t.children)) {
-    const l = j(t.children);
+    const l = T(t.children);
     l.length && e.append(...l);
   }
   return e;
-}, N = (t) => t == null ? null : typeof Node < "u" && t instanceof Node ? t : Array.isArray(t) ? j(t) : typeof t == "object" ? st(t) : typeof t == "string" || typeof t == "number" ? document.createTextNode(String(t)) : null, it = "./tags.schema.json", ut = {
+}, C = (t) => t == null ? null : typeof Node < "u" && t instanceof Node ? t : Array.isArray(t) ? T(t) : typeof t == "object" ? st(t) : typeof t == "string" || typeof t == "number" ? document.createTextNode(String(t)) : null, it = "./tags.schema.json", ct = {
   allowsTextContent: !1,
   allowsChildren: !0,
   allowedAttributes: [
@@ -323,7 +335,7 @@ const Q = {
     "role"
   ],
   childTags: []
-}, ct = {
+}, ut = {
   allowsTextContent: !1,
   allowsChildren: !1,
   allowedAttributes: [
@@ -453,14 +465,14 @@ const Q = {
     "tfoot",
     "tr"
   ]
-}, vt = {
+}, jt = {
   allowsTextContent: !1,
   allowsChildren: !0,
   allowedAttributes: [],
   childTags: [
     "tr"
   ]
-}, jt = {
+}, vt = {
   allowsTextContent: !1,
   allowsChildren: !0,
   allowedAttributes: [],
@@ -474,7 +486,7 @@ const Q = {
   childTags: [
     "tr"
   ]
-}, kt = {
+}, $t = {
   allowsTextContent: !1,
   allowsChildren: !0,
   allowedAttributes: [],
@@ -482,7 +494,7 @@ const Q = {
     "td",
     "th"
   ]
-}, $t = {
+}, kt = {
   allowsTextContent: !0,
   allowsChildren: !0,
   allowedAttributes: [
@@ -491,7 +503,7 @@ const Q = {
     "rowspan"
   ],
   childTags: []
-}, Et = {
+}, Dt = {
   allowsTextContent: !0,
   allowsChildren: !0,
   allowedAttributes: [
@@ -499,14 +511,14 @@ const Q = {
     "rowspan"
   ],
   childTags: []
-}, Dt = {
+}, Ot = {
   allowsTextContent: !1,
   allowsChildren: !0,
   allowedAttributes: [],
   childTags: [
     "option"
   ]
-}, Ot = {
+}, Et = {
   allowsTextContent: !0,
   allowsChildren: !1,
   allowedAttributes: [
@@ -515,14 +527,14 @@ const Q = {
     "selected",
     "disabled"
   ]
-}, It = {
+}, St = {
   allowsTextContent: !1,
   allowsChildren: !0,
   allowedAttributes: [
     "role"
   ],
   childTags: []
-}, Rt = {
+}, Lt = {
   allowsTextContent: !0,
   allowsChildren: !0,
   allowedAttributes: [
@@ -545,7 +557,7 @@ const Q = {
   allowsChildren: !0,
   allowedAttributes: [],
   childTags: []
-}, Ht = {
+}, Mt = {
   allowsTextContent: !1,
   allowsChildren: !0,
   allowedAttributes: [
@@ -554,21 +566,21 @@ const Q = {
   childTags: [
     "li"
   ]
-}, St = {
+}, Rt = {
   allowsTextContent: !0,
   allowsChildren: !0,
   allowedAttributes: [
     "value"
   ],
   childTags: []
-}, Lt = {
+}, zt = {
   allowsTextContent: !1,
   allowsChildren: !1,
   allowedAttributes: []
-}, Mt = {
+}, It = {
   $schema: it,
-  div: ut,
-  input: ct,
+  div: ct,
+  input: ut,
   checkbox: dt,
   colgroup: ft,
   col: gt,
@@ -582,50 +594,50 @@ const Q = {
   img: Ct,
   button: At,
   table: xt,
-  thead: vt,
-  tbody: jt,
+  thead: jt,
+  tbody: vt,
   tfoot: Nt,
-  tr: kt,
-  th: $t,
-  td: Et,
-  datalist: Dt,
-  option: Ot,
-  header: It,
-  a: Rt,
+  tr: $t,
+  th: kt,
+  td: Dt,
+  datalist: Ot,
+  option: Et,
+  header: St,
+  a: Lt,
   i: Ft,
   small: Gt,
-  ul: Ht,
-  li: St,
-  hr: Lt
-}, h = ({ inSpec: t }) => {
+  ul: Mt,
+  li: Rt,
+  hr: zt
+}, b = ({ inSpec: t }) => {
   const e = t;
   if (!e) return [];
   if (Array.isArray(e))
-    return e.flatMap((o) => h({ inSpec: o }));
+    return e.flatMap((o) => b({ inSpec: o }));
   if (typeof e != "object") return [];
   const l = [];
   return typeof e.tagName == "string" && e.tagName.trim().length > 0 && l.push(e.tagName.toLowerCase()), Array.isArray(e.children) && e.children.length > 0 && e.children.forEach((o) => {
-    const n = h({ inSpec: o });
+    const n = b({ inSpec: o });
     l.push(...n);
   }), l;
-}, zt = ({ inTagsFound: t, inAllowedTags: e }) => {
+}, Vt = ({ inTagsFound: t, inAllowedTags: e }) => {
   const l = t ?? [], o = e ?? {}, n = new Set(
-    Object.keys(o).filter((i) => i !== "$schema").map((i) => i.toLowerCase())
-  ), r = {}, a = [], s = [];
-  l.forEach((i) => {
-    r[i] = (r[i] || 0) + 1, n.has(i) ? a.includes(i) || a.push(i) : s.includes(i) || s.push(i);
+    Object.keys(o).filter((s) => s !== "$schema").map((s) => s.toLowerCase())
+  ), r = {}, a = [], i = [];
+  l.forEach((s) => {
+    r[s] = (r[s] || 0) + 1, n.has(s) ? a.includes(s) || a.push(s) : i.includes(s) || i.push(s);
   });
-  const u = l.length, c = s.length === 0;
+  const c = l.length, f = i.length === 0;
   return {
-    totalTags: u,
+    totalTags: c,
     tagCounts: r,
     uniqueTags: Object.keys(r),
     recognizedTags: a,
-    unrecognizedTags: s,
-    areAllTagsPresent: c
+    unrecognizedTags: i,
+    areAllTagsPresent: f
   };
-}, Pt = ({ inSpec: t, inTags: e = Mt } = {}) => {
-  const l = t, o = e, n = h({ inSpec: l }), r = zt({
+}, qt = ({ inSpec: t, inTags: e = It } = {}) => {
+  const l = t, o = e, n = b({ inSpec: l }), r = Vt({
     inTagsFound: n,
     inAllowedTags: o
   });
@@ -637,55 +649,54 @@ const Q = {
     recognizedTags: r.recognizedTags,
     unrecognizedTags: r.unrecognizedTags
   };
-}, k = (t = {}) => {
+}, A = (t = {}) => {
   const e = (t == null ? void 0 : t.spec) ?? (t == null ? void 0 : t.inSpec) ?? t;
-  return N(e);
+  return C(e);
 };
 W({
-  inFuncDefinition: k,
-  inReviewSpec: Pt
+  inFuncDefinition: A,
+  inReviewSpec: qt
 });
-const Vt = ({
+const Bt = ({
   inTargetHtmlId: t,
   inColumns: e,
-  inData: l,
-  inAppendPosition: o
+  type: l,
+  inData: o,
+  showLog: n
 } = {}) => {
-  debugger;
-  const n = t;
-  let s = v({
-    type: "table",
-    targetHtmlId: n,
-    data: l ?? [],
-    columns: e
-  });
-  console.log("specAsJsonToDom : ", o, s);
-  const u = document.getElementById(n), c = k(s);
-  o === "prepend" ? u.prepend(c) : (u && (u.innerHTML = ""), u.append(c));
-}, T = {
-  table: Vt
-}, qt = ({
+  const r = t, a = o ?? [], i = e;
+  console.log("buildSpec 1 :", r, a.localColumns);
+  let c = y({
+    type: l,
+    data: a,
+    columns: i
+  }), f = c;
+  !("tagName" in c) && "children" in c && (f = c.children);
+  const s = A(f);
+  return console.log("buildSpec 3 :", s), s;
+}, Pt = ({
   type: t = "table",
   targetHtmlId: e,
   data: l,
   classToApply: o,
-  inTargetHtmlId: n,
-  inData: r,
-  columns: a,
-  inColumns: s,
-  appendPosition: u
+  columns: n,
+  appendPosition: r,
+  showLog: a = !1
 } = {}) => {
-  const c = t, i = typeof c == "string" ? c.toLowerCase() : "table", f = T[i];
-  return f ? f({
-    inTargetHtmlId: n ?? e,
-    inColumns: s ?? a,
-    inData: r ?? l,
-    inAppendPosition: u
-  }) : (console.error(
-    `[Renderer] Unknown renderer type "${c}". Available types: ${Object.keys(T).join(", ")}`
-  ), null);
+  const i = t, c = e, f = l, s = n;
+  console.log("showLog 1 :", i, e, l, o, n, r);
+  const u = Bt({
+    inTargetHtmlId: c,
+    inColumns: s,
+    showLog: a,
+    inData: f,
+    type: i
+  });
+  console.log("showLog 2 :", u);
+  const d = document.getElementById(c);
+  return console.log("showLog 3 :", d), r === "prepend" ? d.prepend(u) : (d && (d.innerHTML = ""), console.log("showLog 4:1 :", u instanceof Node), console.log("showLog 4:2 :", u instanceof NodeList), console.log("showLog 4:3 :", u instanceof HTMLCollection), u != null && typeof u[Symbol.iterator] == "function" ? d.append(...u) : d.append(u)), console.log("showLog 5 :", d), d;
 };
-F(qt);
+j(Pt);
 export {
-  qt as default
+  Pt as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "json-renderers",
-  "version": "1.13.2",
+  "version": "1.13.6",
   "description": "Standalone, config-driven Table renderer built on top of json-to-dom",
   "type": "module",
   "main": "src/index.js",
@@ -30,6 +30,6 @@
   },
   "dependencies": {
     "@keshavsoft/json-to-tag": "^1.9.3",
-    "json-renderers-build": "^1.2.1"
+    "json-renderers-build": "^1.3.6"
   }
-}
+}

package/src/v13/buildSpec/index.js

@@ -0,0 +1,38 @@
+import jsonRenderBuild from "json-renderers-build";
+import jsonToTag from "@keshavsoft/json-to-tag";
+
+// --- Story of Table Render ---
+const startFunc = ({
+    inTargetHtmlId,
+    inColumns, type,
+    inData, showLog
+} = {}) => {
+    // debugger
+    const localTargetHtmlId = inTargetHtmlId;
+    const localData = inData ?? [];
+    const localColumns = inColumns;
+
+    console.log("buildSpec 1 :", localTargetHtmlId, localData.localColumns);
+
+    let specAsJsonToDom = jsonRenderBuild({
+        type,
+        targetHtmlId: localTargetHtmlId,
+        data: localData,
+        columns: localColumns
+    });
+
+    let jsonToSend = specAsJsonToDom;
+    // console.log("buildSpec 2 :", specAsJsonToDom);
+
+    if (!("tagName" in specAsJsonToDom) && "children" in specAsJsonToDom) {
+        jsonToSend = specAsJsonToDom.children;
+    };
+
+    const content = jsonToTag(jsonToSend);
+
+    console.log("buildSpec 3 :", content);
+
+    return content;
+};
+
+export default startFunc;

package/src/v13/index.js

@@ -1,44 +1,56 @@
 import registerGlobal from "./registerGlobal.js";
 
-import renderTable from "./table/index.js";
-
-const RENDERER_MAP = {
-    table: renderTable
-};
+import buildSpec from "./buildSpec/index.js";
 
 const render = ({
     type = "table",
     targetHtmlId,
     data,
     classToApply,
-    inTargetHtmlId,
-    inData,
     columns,
-    inColumns,
-    appendPosition
+    appendPosition,
+    showLog = false
 } = {}) => {
     const rawType = type;
-    const resolvedType = typeof rawType === "string" ? rawType.toLowerCase() : "table";
-    const renderer = RENDERER_MAP[resolvedType];
-
-    if (!renderer) {
-        console.error(
-            `[Renderer] Unknown renderer type "${rawType}". Available types: ${Object.keys(RENDERER_MAP).join(", ")}`
-        );
-        return null;
-    }
 
-    const localTargetHtmlId = inTargetHtmlId ?? targetHtmlId;
-    const localData = inData ?? data;
-    const localColumns = inColumns ?? columns;
+    const localTargetHtmlId = targetHtmlId;
+    const localData = data;
+    const localColumns = columns;
+    console.log("showLog 1 :", rawType, targetHtmlId, data, classToApply, columns, appendPosition);
 
     // Default to table renderer
-    return renderer({
+    const content = buildSpec({
         inTargetHtmlId: localTargetHtmlId,
-        inColumns: localColumns,
-        inData: localData,
-        inAppendPosition: appendPosition
+        inColumns: localColumns, showLog,
+        inData: localData, type: rawType
     });
+    console.log("showLog 2 :", content);
+    const container = document.getElementById(localTargetHtmlId);
+    console.log("showLog 3 :", container);
+    if (appendPosition === "prepend") {
+        container.prepend(content);
+    } else {
+        if (container) container.innerHTML = "";
+
+        console.log("showLog 4:1 :", content instanceof Node);
+        console.log("showLog 4:2 :", content instanceof NodeList);
+        console.log("showLog 4:3 :", content instanceof HTMLCollection);
+
+        if (content != null && typeof content[Symbol.iterator] === "function") {
+            container.append(...content);
+        } else {
+            container.append(content);
+        };
+
+        // if (content instanceof Node) {
+        //     container.append(content);
+        // } else if (content instanceof NodeList || content instanceof HTMLCollection) {
+        //     container.append(...content);
+        // };
+        // container.append(...content);
+    };
+    console.log("showLog 5 :", container);
+    return container;
 };
 
 registerGlobal(render);

package/src/v13/meta.js

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

package/src/v13/select/index.js

@@ -1,32 +0,0 @@
-import jsonToSpec from "json-to-spec";
-import jsonToTag from "@keshavsoft/json-to-tag";
-
-import skeletonJson from './skeleton.json' with { type: 'json' };
-
-// --- Story of Table Render ---
-const startFunc = ({
-    inTargetHtmlId,
-    inData
-} = {}) => {
-    const localTargetHtmlId = inTargetHtmlId ?? targetHtmlId;
-    const localData = inData ?? [];
-    const localColumns = inColumns;
-
-    let specAsJsonToDom = jsonToSpec(skeletonJson, {
-        arrayOfStrings: localData
-    });
-
-    if (!("tagName" in specAsJsonToDom)) {
-        specAsJsonToDom = specAsJsonToDom.children;
-    };
-
-    const container = document.getElementById(localTargetHtmlId);
-
-    if (container) container.innerHTML = "";
-
-    const content = jsonToTag(specAsJsonToDom);
-
-    container.append(content);
-};
-
-export default startFunc;

package/src/v13/select/skeleton.json

@@ -1,18 +0,0 @@
-{
-    "tagName": "select",
-    "attributes": {
-        "id": "arrayOfStrings"
-    },
-    "jsonToSpec": {
-        "operation": "loopArray",
-        "source": "arrayOfStrings",
-        "template": {
-            "tagName": "option",
-            "attributes": {
-                "value": "${}"
-            },
-            "textContent": "${}"
-        }
-    },
-    "children": []
-}

package/src/v13/table/index.js

@@ -1,39 +0,0 @@
-import jsonRenderBuild from "json-renderers-build";
-import jsonToTag from "@keshavsoft/json-to-tag";
-
-import skeletonJson from './skeleton.json' with { type: 'json' };
-
-// --- Story of Table Render ---
-const startFunc = ({
-    inTargetHtmlId,
-    inColumns,
-    inData, inAppendPosition
-} = {}) => {
-    debugger
-    const localTargetHtmlId = inTargetHtmlId;
-    const localData = inData ?? [];
-    const localColumns = inColumns;
-
-    let specAsJsonToDom = jsonRenderBuild({
-        type: "table",
-        targetHtmlId: localTargetHtmlId,
-        data: localData,
-        columns: localColumns
-    });
-    console.log("specAsJsonToDom : ", inAppendPosition, specAsJsonToDom);
-
-    const container = document.getElementById(localTargetHtmlId);
-
-    const content = jsonToTag(specAsJsonToDom);
-
-    if (inAppendPosition === "prepend") {
-        container.prepend(content);
-    } else {
-
-        if (container) container.innerHTML = "";
-
-        container.append(content);
-    };
-};
-
-export default startFunc;

package/src/v13/table/skeleton.json

@@ -1,47 +0,0 @@
-{
-    "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": []
-            }
-        ]
-    }
-}