json-renderers 1.9.1 → 1.12.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "json-renderers",
-  "version": "1.9.1",
+  "version": "1.12.2",
   "description": "Standalone, config-driven Table renderer built on top of json-to-dom",
   "type": "module",
   "main": "src/index.js",
@@ -29,8 +29,7 @@
     "vite": "^5.4.2"
   },
   "dependencies": {
-    "@keshavsoft/json-to-tag": "^1.4.2",
-    "json-to-spec": "^32.1.1",
-    "json-traversal": "^1.19.1"
+    "@keshavsoft/json-to-tag": "^1.9.3",
+    "json-to-spec": "^32.1.2"
   }
 }

package/src/index.js

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

package/src/v10/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/v10/dataLists/fragments.json

@@ -0,0 +1 @@
+{}

package/src/v10/dataLists/index.js

@@ -0,0 +1,32 @@
+// import jsonToSpec from "../../../node_modules/json-to-spec/index.js";
+import jsonToTag from "@keshavsoft/json-to-tag";
+import jsonTraversal from "../../../node_modules/json-traversal/index.js";
+
+import skeletonJson from "./skeleton.json" with { type: "json" };
+
+const startFunc = ({ targetHtmlId, inData, inSkeletonType = "default" } = {}) => {
+
+    // const specAsJsonToDom = jsonToSpec({
+    //     specJson: skeletonJson[inSkeletonType],
+    //     dataJson: inData
+    // });
+    const skeletonNeeded = skeletonJson[inSkeletonType];
+
+    const specAsJsonToDom = jsonTraversal.transform(inData, skeletonNeeded);
+
+
+    const container = document.getElementById(targetHtmlId);
+
+    if (container) container.innerHTML = "";
+
+    const createdElement = jsonToTag(specAsJsonToDom);
+
+    if (Array.isArray(createdElement)) {
+        // container.appendChild(createdElement)
+        createdElement.forEach(element => container.append(element));
+    } else {
+        container.append(createdElement);
+    };
+};
+
+export default startFunc;

package/src/v10/dataLists/skeleton.json

@@ -0,0 +1,38 @@
+{
+    "old": {
+        "tagName": "datalist",
+        "attributes": {
+            "id": "LedgerName"
+        },
+        "jsonToSpec": {
+            "operation": "loopArray",
+            "source": "LedgerName",
+            "template": {
+                "tagName": "option",
+                "attributes": {
+                    "value": "${}"
+                },
+                "textContent": "${}"
+            }
+        },
+        "children": []
+    },
+    "default": {
+        "mapping": {
+            "tagName": "$datalist",
+            "attributes": {
+                "id": "$LedgerName"
+            },
+            "children": {
+                "list": "LedgerName",
+                "item": {
+                    "tagName": "$option",
+                    "attributes": {
+                        "value": ""
+                    },
+                    "textContent": ""
+                }
+            }
+        }
+    }
+}

package/src/v10/index.js

@@ -0,0 +1,142 @@
+import registerGlobal from "./registerGlobal.js";
+
+import renderTable from "./table/index.js";
+
+// import renderDataList from "./dataLists/index.js";
+// import renderSelect from "./select/index.js";
+
+const RENDERER_MAP = {
+    table: renderTable
+};
+
+// const RENDERER_MAP = {
+//     table: renderTable,
+//     datalist: renderDataList,
+//     select: renderSelect
+// };
+
+/**
+ * Unified Renderer
+ * Dispatches to the corresponding renderer strategy (table, navTabs, form)
+ * based on the provided type.
+ */
+
+// render({ type: "select", data, targetHtmlId: "dom-render-container" });
+
+const render = ({
+    type = "table",
+    targetHtmlId,
+    data,
+    classToApply,
+    inTargetHtmlId,
+    inData,
+    columns,
+    inColumns,
+    fields,
+    inFields,
+    tabs,
+    inTabs,
+    options,
+    inOptions,
+    datalistId,
+    inDatalistId,
+    listId,
+    inListId,
+    id,
+    valueField,
+    inValueField,
+    labelField,
+    inLabelField,
+    colGroup,
+    inColGroup,
+    footerData,
+    inFooterData,
+    config,
+    inConfig,
+    variant,
+    skeletonType,
+    inSkeletonType,
+    showLog = false,
+    inShowLog,
+    ...restProps
+} = {}) => {
+    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 localFields = inFields ?? fields;
+    const localTabs = inTabs ?? tabs;
+    const localOptions = inOptions ?? options ?? localData;
+    const localSkeletonType = inSkeletonType ?? skeletonType ?? variant ?? "default";
+    const localShowLog = inShowLog ?? showLog ?? false;
+
+    if (resolvedType === "form") {
+        return renderer({
+            targetHtmlId: localTargetHtmlId,
+            inFields: localFields,
+            inData: localData,
+            inColumns: localColumns,
+            inVariant: localSkeletonType,
+            inSkeletonType: localSkeletonType,
+            inShowLog: localShowLog,
+            onSave: restProps?.onSave,
+            afterSave: restProps?.afterSave,
+            onNew: restProps?.onNew
+        });
+    }
+
+    if (resolvedType === "navtabs" || resolvedType === "nav" || resolvedType === "tabs") {
+        return renderer({
+            targetHtmlId: localTargetHtmlId,
+            inTabs: localTabs,
+            inData: localData,
+            inSkeletonType: localSkeletonType,
+            inShowLog: localShowLog
+        });
+    }
+
+    if (resolvedType === "datalist" || resolvedType === "data-list") {
+        return renderer({
+            targetHtmlId: localTargetHtmlId,
+            inData: localData,
+            inSkeletonType: localSkeletonType,
+            inShowLog: localShowLog
+        });
+    }
+
+    if (resolvedType === "select") {
+        return renderer({
+            targetHtmlId: localTargetHtmlId,
+            inData: localData,
+            inSkeletonType: localSkeletonType,
+            inShowLog: localShowLog,
+            inClassToApply: classToApply
+        });
+    };
+
+    // Default to table renderer
+    return renderer({
+        targetHtmlId: localTargetHtmlId,
+        inColumns: localColumns,
+        inData: localData,
+        inColGroup: inColGroup ?? colGroup,
+        inFooterData: inFooterData ?? footerData ?? [],
+        inConfig: inConfig ?? config ?? {},
+        inSkeletonType: localSkeletonType,
+        inShowLog: localShowLog
+    });
+};
+
+registerGlobal(render);
+
+export default render;

package/src/v10/meta.js

@@ -0,0 +1,6 @@
+export const meta = {
+    version: "v10.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/v10/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.jsonRenderers ??= {
+        meta,
+        renderToDom: inFuncDefinition
+    };
+};
+
+export default registerGlobal;

package/src/v10/select/fragments.json

@@ -0,0 +1 @@
+{}

package/src/v10/select/index.js

@@ -0,0 +1,34 @@
+import jsonTraversal from "../../../node_modules/json-traversal/index.js";
+
+// import jsonToSpec from "../../../node_modules/json-to-spec/index.js";
+// import jsonToTag from "@keshavsoft/json-to-tag";
+import jsonToTag from "@keshavsoft/json-to-tag";
+
+import skeletonJson from "./skeleton.json" with { type: "json" };
+
+const startFunc = ({ targetHtmlId, inData,
+    inSkeletonType = "default", inClassToApply } = {}) => {
+
+    console.log("aaaaaaaaaa");
+
+    const skeletonNeeded = skeletonJson[inSkeletonType];
+    skeletonNeeded.mapping.attributes.class = `$${inClassToApply}`;
+    // skeletonNeeded.mapping.attributes.class = inClassToApply;
+    debugger;
+
+    const specAsJsonToDom = jsonTraversal.transform(inData, skeletonNeeded);
+
+    const container = document.getElementById(targetHtmlId);
+    if (container) container.innerHTML = "";
+
+    const createdElement = jsonToTag(specAsJsonToDom);
+
+    if (Array.isArray(createdElement)) {
+        // container.appendChild(createdElement)
+        createdElement.forEach(element => container.append(element));
+    } else {
+        container.append(createdElement);
+    };
+};
+
+export default startFunc;

package/src/v10/select/skeleton.json

@@ -0,0 +1,23 @@
+{
+    "default": {
+        "mapping": {
+            "tagName": "$select",
+            "attributes": {
+                "id": "$LedgerName",
+                "class": "$keshav"
+            },
+            "children": [
+                {
+                    "list": "LedgerName",
+                    "item": {
+                        "tagName": "$option",
+                        "attributes": {
+                            "value": ""
+                        },
+                        "textContent": ""
+                    }
+                }
+            ]
+        }
+    }
+}

package/src/v10/table/index.js

@@ -0,0 +1,35 @@
+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 = ({
+    targetHtmlId,
+    inTargetHtmlId,
+    inColumns,
+    inData,
+} = {}) => {
+    const localTargetHtmlId = inTargetHtmlId ?? targetHtmlId;
+    const localData = inData ?? [];
+    const localColumns = inColumns;
+
+    let specAsJsonToDom = jsonToSpec(skeletonJson.default, {
+        columns: localColumns, data: localData
+    });
+
+    // console.log("specAsJsonToDom : ", specAsJsonToDom);
+
+    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/v10/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/v11/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/v11/dataLists/fragments.json

@@ -0,0 +1 @@
+{}

package/src/v11/dataLists/index.js

@@ -0,0 +1,32 @@
+// import jsonToSpec from "../../../node_modules/json-to-spec/index.js";
+import jsonToTag from "@keshavsoft/json-to-tag";
+import jsonTraversal from "../../../node_modules/json-traversal/index.js";
+
+import skeletonJson from "./skeleton.json" with { type: "json" };
+
+const startFunc = ({ targetHtmlId, inData, inSkeletonType = "default" } = {}) => {
+
+    // const specAsJsonToDom = jsonToSpec({
+    //     specJson: skeletonJson[inSkeletonType],
+    //     dataJson: inData
+    // });
+    const skeletonNeeded = skeletonJson[inSkeletonType];
+
+    const specAsJsonToDom = jsonTraversal.transform(inData, skeletonNeeded);
+
+
+    const container = document.getElementById(targetHtmlId);
+
+    if (container) container.innerHTML = "";
+
+    const createdElement = jsonToTag(specAsJsonToDom);
+
+    if (Array.isArray(createdElement)) {
+        // container.appendChild(createdElement)
+        createdElement.forEach(element => container.append(element));
+    } else {
+        container.append(createdElement);
+    };
+};
+
+export default startFunc;

package/src/v11/dataLists/skeleton.json

@@ -0,0 +1,38 @@
+{
+    "old": {
+        "tagName": "datalist",
+        "attributes": {
+            "id": "LedgerName"
+        },
+        "jsonToSpec": {
+            "operation": "loopArray",
+            "source": "LedgerName",
+            "template": {
+                "tagName": "option",
+                "attributes": {
+                    "value": "${}"
+                },
+                "textContent": "${}"
+            }
+        },
+        "children": []
+    },
+    "default": {
+        "mapping": {
+            "tagName": "$datalist",
+            "attributes": {
+                "id": "$LedgerName"
+            },
+            "children": {
+                "list": "LedgerName",
+                "item": {
+                    "tagName": "$option",
+                    "attributes": {
+                        "value": ""
+                    },
+                    "textContent": ""
+                }
+            }
+        }
+    }
+}

package/src/v11/index.js

@@ -0,0 +1,62 @@
+import registerGlobal from "./registerGlobal.js";
+
+import renderTable from "./table/index.js";
+
+const RENDERER_MAP = {
+    table: renderTable
+};
+
+const render = ({
+    type = "table",
+    targetHtmlId,
+    data,
+    classToApply,
+    inTargetHtmlId,
+    inData,
+    columns,
+    inColumns,
+    colGroup,
+    inColGroup,
+    footerData,
+    inFooterData,
+    config,
+    inConfig,
+    variant,
+    skeletonType,
+    inSkeletonType,
+    showLog = false,
+    inShowLog
+} = {}) => {
+    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 localSkeletonType = inSkeletonType ?? skeletonType ?? variant ?? "default";
+    const localShowLog = inShowLog ?? showLog ?? false;
+
+    // Default to table renderer
+    return renderer({
+        targetHtmlId: localTargetHtmlId,
+        inColumns: localColumns,
+        inData: localData,
+        inColGroup: inColGroup ?? colGroup,
+        inFooterData: inFooterData ?? footerData ?? [],
+        inConfig: inConfig ?? config ?? {},
+        inSkeletonType: localSkeletonType,
+        inShowLog: localShowLog
+    });
+};
+
+registerGlobal(render);
+
+export default render;

package/src/v11/meta.js

@@ -0,0 +1,6 @@
+export const meta = {
+    version: "v10.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/v11/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.jsonRenderers ??= {
+        meta,
+        renderToDom: inFuncDefinition
+    };
+};
+
+export default registerGlobal;

package/src/v11/select/fragments.json

@@ -0,0 +1 @@
+{}

package/src/v11/select/index.js

@@ -0,0 +1,34 @@
+import jsonTraversal from "../../../node_modules/json-traversal/index.js";
+
+// import jsonToSpec from "../../../node_modules/json-to-spec/index.js";
+// import jsonToTag from "@keshavsoft/json-to-tag";
+import jsonToTag from "@keshavsoft/json-to-tag";
+
+import skeletonJson from "./skeleton.json" with { type: "json" };
+
+const startFunc = ({ targetHtmlId, inData,
+    inSkeletonType = "default", inClassToApply } = {}) => {
+
+    console.log("aaaaaaaaaa");
+
+    const skeletonNeeded = skeletonJson[inSkeletonType];
+    skeletonNeeded.mapping.attributes.class = `$${inClassToApply}`;
+    // skeletonNeeded.mapping.attributes.class = inClassToApply;
+    debugger;
+
+    const specAsJsonToDom = jsonTraversal.transform(inData, skeletonNeeded);
+
+    const container = document.getElementById(targetHtmlId);
+    if (container) container.innerHTML = "";
+
+    const createdElement = jsonToTag(specAsJsonToDom);
+
+    if (Array.isArray(createdElement)) {
+        // container.appendChild(createdElement)
+        createdElement.forEach(element => container.append(element));
+    } else {
+        container.append(createdElement);
+    };
+};
+
+export default startFunc;

package/src/v11/select/skeleton.json

@@ -0,0 +1,23 @@
+{
+    "default": {
+        "mapping": {
+            "tagName": "$select",
+            "attributes": {
+                "id": "$LedgerName",
+                "class": "$keshav"
+            },
+            "children": [
+                {
+                    "list": "LedgerName",
+                    "item": {
+                        "tagName": "$option",
+                        "attributes": {
+                            "value": ""
+                        },
+                        "textContent": ""
+                    }
+                }
+            ]
+        }
+    }
+}