json-renderers 1.19.1 → 1.20.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "json-renderers",
-  "version": "1.19.1",
+  "version": "1.20.1",
   "description": "Browser DOM component renderer built on top of json-renderers-build and @keshavsoft/json-to-tag",
   "type": "module",
   "main": "src/index.js",
@@ -40,6 +40,7 @@
     "vite": "^5.4.2"
   },
   "dependencies": {
+    "@keshavsoft/json-to-dom": "^1.41.5",
     "@keshavsoft/json-to-tag": "^1.10.3",
     "json-renderers-build": "^1.26.1",
     "json-renderers-guard": "^1.5.3"

package/src/index.js

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

package/src/v20/buildSpec/index.js

@@ -0,0 +1,28 @@
+import jsonRenderBuild from "json-renderers-build";
+
+// --- Story of Spec Build ---
+const startFunc = ({
+    inColumns,
+    inType = "table",
+    inData,
+    inShowLog = false,
+    inOptions
+} = {}) => {
+    const localData = inData ?? [];
+    const localColumns = inColumns;
+    const localType = inType;
+    const localShowLog = inShowLog;
+    const localOptions = inOptions;
+
+    const specAsJsonToDom = jsonRenderBuild({
+        type: localType,
+        data: localData,
+        columns: localColumns,
+        showLog: localShowLog,
+        options: localOptions
+    });
+
+    return specAsJsonToDom;
+};
+
+export default startFunc;

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

@@ -0,0 +1,41 @@
+import registerGlobal from "./registerGlobal.js";
+
+import guardFunc from "json-renderers-guard";
+import jsonToTag from "@keshavsoft/json-to-tag";
+import jsonToDom from "@keshavsoft/json-to-dom";
+
+import buildSpec from "./buildSpec/index.js";
+import renderToDom from "./renderToDom/index.js";
+
+// Main orchestrator: coordinates validation, spec building, and DOM rendering
+const render = (config = {}) => {
+    guardFunc(config);
+    const showLog = config?.showLog;
+    const localOptions = config?.options;
+
+    if (showLog) console.log("first : ", config?.options, config?.columns, config?.data, config?.appendPosition);
+
+    const spec = buildSpec({
+        inColumns: config.columns,
+        inData: config.data,
+        inType: config.type,
+        inShowLog: config.showLog,
+        inOptions: localOptions
+    });
+
+    const builtSpec = jsonToTag(spec);
+
+    const dom = jsonToDom({
+        buildSpec: builtSpec,
+        targetHtmlId: config.targetHtmlId,
+        appendPosition: config.appendPosition,
+        showLog: config.showLog
+    });
+
+    return dom;
+};
+
+registerGlobal(render);
+
+export { render };
+export default render;

package/src/v20/meta.js

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

@@ -0,0 +1,16 @@
+import meta from "./meta.js";
+
+export const registerGlobal = (inDefinition) => {
+    const localDefinition = inDefinition;
+
+    if (typeof globalThis === "undefined" || !localDefinition) return;
+
+    globalThis.ks ??= {};
+
+    globalThis.ks.jsonRenderers = {
+        meta,
+        render: localDefinition
+    };
+};
+
+export default registerGlobal;

package/src/v20/renderToDom/index.js

@@ -0,0 +1,47 @@
+import jsonToTag from "@keshavsoft/json-to-tag";
+
+// --- Story of DOM Rendering and Mounting ---
+const renderToDom = ({
+    inSpec,
+    inTargetHtmlId,
+    inAppendPosition,
+    inShowLog = false
+} = {}) => {
+    const localSpec = inSpec;
+    const localTargetHtmlId = inTargetHtmlId;
+    const localAppendPosition = inAppendPosition;
+    const localShowLog = inShowLog;
+
+    const content = jsonToTag(localSpec);
+
+    if (localShowLog) console.log("renderToDom 1 (content):", content);
+
+    const container = document.getElementById(localTargetHtmlId);
+    if (!container) return null;
+
+    const isCollection = Array.isArray(content) ||
+        content instanceof NodeList ||
+        content instanceof HTMLCollection;
+
+    if (isCollection) {
+        if (localAppendPosition === "prepend") {
+            container.prepend(...content);
+        } else {
+            container.append(...content);
+        }
+    } else {
+        if (localAppendPosition === "prepend") {
+            container.prepend(content);
+        } else {
+            container.innerHTML = "";
+            container.append(content);
+        }
+    }
+
+    if (localShowLog) console.log("renderToDom 2 (mounted):", container);
+
+    return container;
+};
+
+export { renderToDom };
+export default renderToDom;