json-renderers-build 1.7.1 → 1.9.2

package/src/v7/select/index.js

@@ -1,21 +1,21 @@
-import renderSelectOptions from "./options/index.js";
-
-import skeletonJson from './skeleton.json' with { type: 'json' };
-
-const startFunc = ({
-    inData,
-} = {}) => {
-    const localData = inData ?? [];
-
-    let localChildren = renderSelectOptions({
-        inData: localData
-    });
-
-    const select = structuredClone(skeletonJson);
-    select.children = localChildren;
-
-    return select;
-};
-
-export { renderSelectOptions };
+import renderSelectOptions from "./options/index.js";
+
+import skeletonJson from './skeleton.json' with { type: 'json' };
+
+const startFunc = ({
+    inData,
+} = {}) => {
+    const localData = inData ?? [];
+
+    let localChildren = renderSelectOptions({
+        inData: localData
+    });
+
+    const select = structuredClone(skeletonJson);
+    select.children = localChildren;
+
+    return select;
+};
+
+export { renderSelectOptions };
 export default startFunc;

package/src/v7/select/options/index.js

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

package/src/v7/select/options/skeleton.json

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

package/src/v7/table/body/cells/index.js

@@ -1,23 +1,23 @@
-import jsonTransform from "@keshavsoft/json-transformer";
-
-import skeletonJson from './skeleton.json' with { type: 'json' };
-
-const startFunc = ({
-    inData,
-} = {}) => {
-    const rawData = inData ?? [];
-    const localData = rawData.map(val => {
-        if (typeof val === "object" && val !== null) {
-            return JSON.stringify(val);
-        }
-        return String(val ?? "");
-    });
-
-    const tdAsArray = jsonTransform({
-        children: localData
-    }, skeletonJson);
-
-    return tdAsArray?.children ?? [];
-};
-
-export default startFunc;
+import jsonTransform from "@keshavsoft/json-transformer";
+
+import skeletonJson from './skeleton.json' with { type: 'json' };
+
+const startFunc = ({
+    inData,
+} = {}) => {
+    const rawData = inData ?? [];
+    const localData = rawData.map(val => {
+        if (typeof val === "object" && val !== null) {
+            return JSON.stringify(val);
+        }
+        return String(val ?? "");
+    });
+
+    const tdAsArray = jsonTransform({
+        children: localData
+    }, skeletonJson);
+
+    return tdAsArray?.children ?? [];
+};
+
+export default startFunc;

package/src/v7/table/body/cells/skeleton.json

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

package/src/v7/table/body/index.js

@@ -1,15 +1,15 @@
-import bodyRows from "./rows/index.js";
-import skeletonJson from './skeleton.json' with { type: 'json' };
-
-const startFunc = ({
-    inData,
-    inColumns
-} = {}) => {
-    const tbody = structuredClone(skeletonJson);
-
-    tbody.children = bodyRows({ inData, inColumns });
-
-    return tbody;
-};
-
-export default startFunc;
+import bodyRows from "./rows/index.js";
+import skeletonJson from './skeleton.json' with { type: 'json' };
+
+const startFunc = ({
+    inData,
+    inColumns
+} = {}) => {
+    const tbody = structuredClone(skeletonJson);
+
+    tbody.children = bodyRows({ inData, inColumns });
+
+    return tbody;
+};
+
+export default startFunc;

package/src/v7/table/body/rows/index.js

@@ -1,36 +1,36 @@
-import bodyCells from "../cells/index.js";
-import skeletonJson from './skeleton.json' with { type: 'json' };
-
-const startFunc = ({
-    inData,
-    inColumns
-} = {}) => {
-    const localData = inData ?? [];
-    const localColumns = inColumns;
-
-    return localData.map(row => {
-        let cellValues;
-
-        if (Array.isArray(row)) {
-            cellValues = row;
-        } else if (typeof row === "object" && row !== null) {
-            if (Array.isArray(localColumns) && localColumns.length > 0) {
-                cellValues = localColumns.map(col => {
-                    const key = typeof col === "object" ? (col.key || col.dataKey || col.title || col.name) : col;
-                    return row[key] ?? "";
-                });
-            } else {
-                cellValues = Object.values(row);
-            }
-        } else {
-            cellValues = [row];
-        }
-
-        const tr = structuredClone(skeletonJson);
-        tr.children = bodyCells({ inData: cellValues });
-
-        return tr;
-    });
-};
-
-export default startFunc;
+import bodyCells from "../cells/index.js";
+import skeletonJson from './skeleton.json' with { type: 'json' };
+
+const startFunc = ({
+    inData,
+    inColumns
+} = {}) => {
+    const localData = inData ?? [];
+    const localColumns = inColumns;
+
+    return localData.map(row => {
+        let cellValues;
+
+        if (Array.isArray(row)) {
+            cellValues = row;
+        } else if (typeof row === "object" && row !== null) {
+            if (Array.isArray(localColumns) && localColumns.length > 0) {
+                cellValues = localColumns.map(col => {
+                    const key = typeof col === "object" ? (col.key || col.dataKey || col.title || col.name) : col;
+                    return row[key] ?? "";
+                });
+            } else {
+                cellValues = Object.values(row);
+            }
+        } else {
+            cellValues = [row];
+        }
+
+        const tr = structuredClone(skeletonJson);
+        tr.children = bodyCells({ inData: cellValues });
+
+        return tr;
+    });
+};
+
+export default startFunc;

package/src/v7/table/body/rows/skeleton.json

@@ -1,4 +1,4 @@
-{
-    "tagName": "tr",
-    "children": []
-}
+{
+    "tagName": "tr",
+    "children": []
+}

package/src/v7/table/body/skeleton.json

@@ -1,4 +1,4 @@
-{
-    "tagName": "tbody",
-    "children": []
-}
+{
+    "tagName": "tbody",
+    "children": []
+}

package/src/v7/table/head/cells/index.js

@@ -1,23 +1,23 @@
-import jsonTransform from "@keshavsoft/json-transformer";
-
-import skeletonJson from './skeleton.json' with { type: 'json' };
-
-const startFunc = ({
-    inData,
-} = {}) => {
-    const rawData = inData ?? [];
-    const localData = rawData.map(col => {
-        if (typeof col === "object" && col !== null) {
-            return col.title || col.name || col.key || "";
-        }
-        return String(col);
-    });
-
-    const thAsArray = jsonTransform({
-        children: localData
-    }, skeletonJson);
-
-    return thAsArray?.children ?? [];
-};
-
-export default startFunc;
+import jsonTransform from "@keshavsoft/json-transformer";
+
+import skeletonJson from './skeleton.json' with { type: 'json' };
+
+const startFunc = ({
+    inData,
+} = {}) => {
+    const rawData = inData ?? [];
+    const localData = rawData.map(col => {
+        if (typeof col === "object" && col !== null) {
+            return col.title || col.name || col.key || "";
+        }
+        return String(col);
+    });
+
+    const thAsArray = jsonTransform({
+        children: localData
+    }, skeletonJson);
+
+    return thAsArray?.children ?? [];
+};
+
+export default startFunc;

package/src/v7/table/head/cells/skeleton.json

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

package/src/v7/table/head/index.js

@@ -1,15 +1,15 @@
-import headRow from "./row/index.js";
-import skeletonJson from './skeleton.json' with { type: 'json' };
-
-const startFunc = ({
-    inData,
-} = {}) => {
-    const localData = inData ?? [];
-    const thead = structuredClone(skeletonJson);
-
-    thead.children = [headRow({ inData: localData })];
-
-    return thead;
-};
-
-export default startFunc;
+import headRow from "./row/index.js";
+import skeletonJson from './skeleton.json' with { type: 'json' };
+
+const startFunc = ({
+    inData,
+} = {}) => {
+    const localData = inData ?? [];
+    const thead = structuredClone(skeletonJson);
+
+    thead.children = [headRow({ inData: localData })];
+
+    return thead;
+};
+
+export default startFunc;

package/src/v7/table/head/row/index.js

@@ -1,15 +1,15 @@
-import headCells from "../cells/index.js";
-import skeletonJson from './skeleton.json' with { type: 'json' };
-
-const startFunc = ({
-    inData,
-} = {}) => {
-    const localData = inData ?? [];
-    const row = structuredClone(skeletonJson);
-
-    row.children = headCells({ inData: localData });
-
-    return row;
-};
-
-export default startFunc;
+import headCells from "../cells/index.js";
+import skeletonJson from './skeleton.json' with { type: 'json' };
+
+const startFunc = ({
+    inData,
+} = {}) => {
+    const localData = inData ?? [];
+    const row = structuredClone(skeletonJson);
+
+    row.children = headCells({ inData: localData });
+
+    return row;
+};
+
+export default startFunc;

package/src/v7/table/head/row/skeleton.json

@@ -1,4 +1,4 @@
-{
-    "tagName": "tr",
-    "children": []
-}
+{
+    "tagName": "tr",
+    "children": []
+}

package/src/v7/table/head/skeleton.json

@@ -1,4 +1,4 @@
-{
-    "tagName": "thead",
-    "children": []
-}
+{
+    "tagName": "thead",
+    "children": []
+}

package/src/v7/table/index.js

@@ -1,26 +1,26 @@
-import renderTableHead from "./head/index.js";
-import renderTableBody from "./body/index.js";
-import skeletonJson from './skeleton.json' with { type: 'json' };
-
-const startFunc = ({
-    inColumns,
-    inData
-} = {}) => {
-    const localColumns = inColumns ?? [];
-    const localData = inData ?? [];
-
-    const table = structuredClone(skeletonJson);
-
-    table.children = [
-        renderTableHead({ inData: localColumns }),
-        renderTableBody({ inData: localData, inColumns: localColumns })
-    ];
-
-    return table;
-};
-
-export {
-    renderTableHead,
-    renderTableBody
-};
-export default startFunc;
+import renderTableHead from "./head/index.js";
+import renderTableBody from "./body/index.js";
+import skeletonJson from './skeleton.json' with { type: 'json' };
+
+const startFunc = ({
+    inColumns,
+    inData
+} = {}) => {
+    const localColumns = inColumns ?? [];
+    const localData = inData ?? [];
+
+    const table = structuredClone(skeletonJson);
+
+    table.children = [
+        renderTableHead({ inData: localColumns }),
+        renderTableBody({ inData: localData, inColumns: localColumns })
+    ];
+
+    return table;
+};
+
+export {
+    renderTableHead,
+    renderTableBody
+};
+export default startFunc;

package/src/v7/table/skeleton.json

@@ -1,7 +1,7 @@
-{
-    "tagName": "table",
-    "attributes": {
-        "class": "table table-hover table-striped mb-0"
-    },
-    "children": []
+{
+    "tagName": "table",
+    "attributes": {
+        "class": "table table-hover table-striped mb-0"
+    },
+    "children": []
 }

package/src/v8/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/v8/index.js

@@ -0,0 +1,40 @@
+import registerGlobal from "./registerGlobal.js";
+
+import renderTable, { renderTableHead, renderTableBody } from "./table/index.js";
+import renderSelect, { renderSelectOptions } from "./select/index.js";
+
+const RENDERER_MAP = {
+    table: renderTable,
+    select: renderSelect,
+    selectOptionsOnly: renderSelectOptions,
+    tableHead: renderTableHead,
+    tableBody: renderTableBody
+};
+
+const render = ({
+    type = "table",
+    data,
+    columns
+}) => {
+    const rawType = type;
+    const renderer = RENDERER_MAP[rawType];
+
+    const localData = data;
+    const localColumns = columns;
+
+    return renderer({
+        inColumns: localColumns,
+        inData: localData
+    });
+};
+
+registerGlobal(render);
+
+export {
+    renderTable,
+    renderTableHead,
+    renderTableBody,
+    renderSelect,
+    renderSelectOptions
+};
+export default render;

package/src/v8/meta.js

@@ -0,0 +1,6 @@
+export const meta = {
+    version: "v8.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/v8/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/v8/select/index.js

@@ -0,0 +1,21 @@
+import renderSelectOptions from "./options/index.js";
+
+import skeletonJson from './skeleton.json' with { type: 'json' };
+
+const startFunc = ({
+    inData,
+}) => {
+    const localData = inData;
+
+    let localChildren = renderSelectOptions({
+        inData: localData
+    });
+
+    const select = structuredClone(skeletonJson);
+    select.children = localChildren;
+
+    return select;
+};
+
+export { renderSelectOptions };
+export default startFunc;