json-renderers-build 1.2.1 → 1.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "json-renderers-build",
-  "version": "1.2.1",
+  "version": "1.3.2",
   "description": "Standalone, config-driven Table renderer built on top of json-to-dom",
   "type": "module",
   "main": "src/index.js",

package/src/index.js

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

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

@@ -0,0 +1,39 @@
+import registerGlobal from "./registerGlobal.js";
+
+import renderTable from "./table/index.js";
+import renderSelect from "./select/index.js";
+
+const RENDERER_MAP = {
+    table: renderTable,
+    select: renderSelect
+};
+
+const render = ({
+    type = "table",
+    data,
+    columns
+} = {}) => {
+    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 localData = data;
+    const localColumns = columns;
+
+    // Default to table renderer
+    return renderer({
+        inColumns: localColumns,
+        inData: localData
+    });
+};
+
+registerGlobal(render);
+
+export default render;

package/src/v3/meta.js

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

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

package/src/v3/select/skeleton.json

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

package/src/v3/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/v3/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": []
+            }
+        ]
+    }
+}