json-renderers 1.16.1 → 1.17.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "json-renderers",
-  "version": "1.16.1",
+  "version": "1.17.7",
   "description": "Browser DOM component renderer built on top of json-renderers-build and @keshavsoft/json-to-tag",
   "type": "module",
   "main": "src/index.js",
@@ -41,6 +41,6 @@
   },
   "dependencies": {
     "@keshavsoft/json-to-tag": "^1.9.3",
-    "json-renderers-build": "^1.9.2"
+    "json-renderers-build": "^1.20.1"
   }
 }

package/src/index.js

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

package/src/v16/buildSpec/index.js

@@ -1,40 +1,40 @@
-import jsonRenderBuild from "json-renderers-build";
-import jsonToTag from "@keshavsoft/json-to-tag";
-
-// --- Story of Table Render ---
-const startFunc = ({
-    inTargetHtmlId,
-    inColumns,
-    inType = "table",
-    inData,
-    inShowLog = false
-} = {}) => {
-    const localTargetHtmlId = inTargetHtmlId;
-    const localData = inData ?? [];
-    const localColumns = inColumns;
-    const localType = inType;
-    const localShowLog = inShowLog;
-
-    if (localShowLog) console.log("buildSpec 1 :", localTargetHtmlId, localData, localColumns);
-
-    let specAsJsonToDom = jsonRenderBuild({
-        type: localType,
-        targetHtmlId: localTargetHtmlId,
-        data: localData,
-        columns: localColumns
-    });
-
-    let jsonToSend = specAsJsonToDom;
-
-    const content = jsonToTag(jsonToSend);
-
-    if (localShowLog) {
-        console.log("buildSpec 2 :", jsonToSend, content);
-        console.log("buildSpec 3 :", content);
-    }
-
-    return content;
-};
-
-export { startFunc };
-export default startFunc;
+import jsonRenderBuild from "json-renderers-build";
+import jsonToTag from "@keshavsoft/json-to-tag";
+
+// --- Story of Table Render ---
+const startFunc = ({
+    inTargetHtmlId,
+    inColumns,
+    inType = "table",
+    inData,
+    inShowLog = false
+} = {}) => {
+    const localTargetHtmlId = inTargetHtmlId;
+    const localData = inData ?? [];
+    const localColumns = inColumns;
+    const localType = inType;
+    const localShowLog = inShowLog;
+
+    if (localShowLog) console.log("buildSpec 1 :", localTargetHtmlId, localData, localColumns);
+
+    let specAsJsonToDom = jsonRenderBuild({
+        type: localType,
+        targetHtmlId: localTargetHtmlId,
+        data: localData,
+        columns: localColumns
+    });
+
+    let jsonToSend = specAsJsonToDom;
+
+    const content = jsonToTag(jsonToSend);
+
+    if (localShowLog) {
+        console.log("buildSpec 2 :", jsonToSend, content);
+        console.log("buildSpec 3 :", content);
+    }
+
+    return content;
+};
+
+export { startFunc };
+export default startFunc;

package/src/v16/common/deriveColumnsFromData.js

@@ -1,20 +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;
+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/v16/guard.js

@@ -1,38 +1,38 @@
-const guardFunc = ({ inConfig } = {}) => {
-    const localConfig = inConfig;
-
-    if (!localConfig || typeof localConfig !== "object") {
-        console.error("Config must be an object");
-        throw new TypeError("Config must be an object");
-    }
-
-    if (localConfig.type !== "table") {
-        console.error("type must be 'table'");
-        throw new Error("type must be 'table'");
-    }
-
-    if (!Array.isArray(localConfig.data)) {
-        console.error("data must be an Array");
-        throw new TypeError("data must be an Array");
-    }
-
-    if (typeof localConfig.targetHtmlId !== "string" || !localConfig.targetHtmlId.trim()) {
-        console.error("targetHtmlId must be a non-empty string");
-        throw new TypeError("targetHtmlId must be a non-empty string");
-    }
-
-    if (!Array.isArray(localConfig.columns)) {
-        console.error("columns must be an array");
-        throw new TypeError("columns must be an array");
-    }
-
-    if (localConfig.showLog !== undefined && typeof localConfig.showLog !== "boolean") {
-        console.error("showLog must be a boolean");
-        throw new TypeError("showLog must be a boolean");
-    }
-
-    return true;
-};
-
-export { guardFunc };
-export default guardFunc;
+const guardFunc = ({ inConfig } = {}) => {
+    const localConfig = inConfig;
+
+    if (!localConfig || typeof localConfig !== "object") {
+        console.error("Config must be an object");
+        throw new TypeError("Config must be an object");
+    }
+
+    if (typeof localConfig?.type !== "string") {
+        console.error("type must be string only");
+        throw new Error("type must be string only");
+    };
+
+    if (!Array.isArray(localConfig.data)) {
+        console.error("data must be an Array");
+        throw new TypeError("data must be an Array");
+    }
+
+    if (typeof localConfig.targetHtmlId !== "string" || !localConfig.targetHtmlId.trim()) {
+        console.error("targetHtmlId must be a non-empty string");
+        throw new TypeError("targetHtmlId must be a non-empty string");
+    }
+
+    if (!Array.isArray(localConfig.columns)) {
+        console.error("columns must be an array");
+        throw new TypeError("columns must be an array");
+    }
+
+    if (localConfig.showLog !== undefined && typeof localConfig.showLog !== "boolean") {
+        console.error("showLog must be a boolean");
+        throw new TypeError("showLog must be a boolean");
+    }
+
+    return true;
+};
+
+export { guardFunc };
+export default guardFunc;

package/src/v16/index.js

@@ -1,110 +1,106 @@
-import registerGlobal from "./registerGlobal.js";
-import guardFunc from "./guard.js";
-import buildSpec from "./buildSpec/index.js";
-
-// Pure function: builds and validates the JSON configuration without touching DOM
-const getSpec = ({
-    type = "table",
-    targetHtmlId,
-    data,
-    columns,
-    classToApply,
-    appendPosition,
-    showLog = false
-} = {}) => {
-    const localType = type;
-    const localTargetHtmlId = targetHtmlId;
-    const localData = data;
-    const localColumns = columns;
-    const localClassToApply = classToApply;
-    const localAppendPosition = appendPosition;
-    const localShowLog = showLog;
-
-    const specJson = {
-        type: localType,
-        targetHtmlId: localTargetHtmlId,
-        data: localData,
-        columns: localColumns,
-        classToApply: localClassToApply,
-        appendPosition: localAppendPosition,
-        showLog: localShowLog
-    };
-
-    // Internal call using the in-convention
-    guardFunc({ inConfig: specJson });
-
-    return specJson;
-};
-
-// Render function: Public API accepting clean single options object
-const render = ({
-    type = "table",
-    targetHtmlId,
-    data,
-    columns,
-    classToApply,
-    appendPosition,
-    showLog = false
-} = {}) => {
-    // 1. Get and validate the clean JSON specification
-    const specJson = getSpec({
-        type,
-        targetHtmlId,
-        data,
-        columns,
-        classToApply,
-        appendPosition,
-        showLog
-    });
-
-    if (specJson.showLog) console.log("showLog 1 (spec):", specJson);
-
-    // 2. Build DOM content via buildSpec
-    const content = buildSpec({
-        inTargetHtmlId: specJson.targetHtmlId,
-        inColumns: specJson.columns,
-        inData: specJson.data,
-        inType: specJson.type,
-        inShowLog: specJson.showLog
-    });
-
-    if (specJson.showLog) console.log("showLog 2 (content):", content);
-
-    const container = document.getElementById(specJson.targetHtmlId);
-    if (specJson.showLog) console.log("showLog 3 (container):", container);
-
-    if (!container) return null;
-
-    const isCollection = Array.isArray(content) ||
-        content instanceof NodeList ||
-        content instanceof HTMLCollection;
-
-    if (isCollection) {
-        if (specJson.appendPosition === "prepend") {
-            container.prepend(...content);
-        } else {
-            container.append(...content);
-        }
-    } else {
-        if (specJson.appendPosition === "prepend") {
-            container.prepend(content);
-        } else {
-            container.innerHTML = "";
-            container.append(content);
-        }
-    }
-
-    if (specJson.showLog) console.log("showLog 4 (mounted):", container);
-
-    return container;
-};
-
-// Register on global window.ks.jsonRenderers
-registerGlobal({ render, getSpec });
-
-// Export two ways:
-// 1. As an object (named exports)
-export { render, getSpec, guardFunc, buildSpec };
-
-// 2. As a single function (default export)
-export default render;
+import registerGlobal from "./registerGlobal.js";
+import guardFunc from "./guard.js";
+import buildSpec from "./buildSpec/index.js";
+
+// Pure function: builds and validates the JSON configuration without touching DOM
+const getSpec = ({
+    type = "table",
+    targetHtmlId,
+    data,
+    columns,
+    classToApply,
+    appendPosition,
+    showLog = false
+} = {}) => {
+    const localType = type;
+    const localTargetHtmlId = targetHtmlId;
+    const localData = data;
+    const localColumns = columns;
+    const localClassToApply = classToApply;
+    const localAppendPosition = appendPosition;
+    const localShowLog = showLog;
+
+    const specJson = {
+        type: localType,
+        targetHtmlId: localTargetHtmlId,
+        data: localData,
+        columns: localColumns,
+        classToApply: localClassToApply,
+        appendPosition: localAppendPosition,
+        showLog: localShowLog
+    };
+
+    // Internal call using the in-convention
+    guardFunc({ inConfig: specJson });
+
+    return specJson;
+};
+
+// Render function: Public API accepting clean single options object
+const render = ({
+    type = "table",
+    targetHtmlId,
+    data,
+    columns,
+    classToApply,
+    appendPosition,
+    showLog = false
+} = {}) => {
+    // 1. Get and validate the clean JSON specification
+    const specJson = getSpec({
+        type,
+        targetHtmlId,
+        data,
+        columns,
+        classToApply,
+        appendPosition,
+        showLog
+    });
+
+    if (specJson.showLog) console.log("showLog 1 (spec):", specJson);
+
+    // 2. Build DOM content via buildSpec
+    const content = buildSpec({
+        inTargetHtmlId: specJson.targetHtmlId,
+        inColumns: specJson.columns,
+        inData: specJson.data,
+        inType: specJson.type,
+        inShowLog: specJson.showLog
+    });
+
+    if (specJson.showLog) console.log("showLog 2 (content):", content);
+
+    const container = document.getElementById(specJson.targetHtmlId);
+    if (specJson.showLog) console.log("showLog 3 (container):", container);
+
+    if (!container) return null;
+
+    const isCollection = Array.isArray(content) ||
+        content instanceof NodeList ||
+        content instanceof HTMLCollection;
+
+    if (isCollection) {
+        if (specJson.appendPosition === "prepend") {
+            container.prepend(...content);
+        } else {
+            container.append(...content);
+        }
+    } else {
+        if (specJson.appendPosition === "prepend") {
+            container.prepend(content);
+        } else {
+            container.innerHTML = "";
+            container.append(content);
+        }
+    }
+
+    if (specJson.showLog) console.log("showLog 4 (mounted):", container);
+
+    return container;
+};
+
+registerGlobal({ render, getSpec });
+
+export { render, getSpec, buildSpec };
+
+export default render;

package/src/v16/meta.js

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

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

package/src/v17/buildSpec/index.js

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

package/src/v17/configSpec.json

@@ -0,0 +1,9 @@
+{
+  "type": "table",
+  "targetHtmlId": "",
+  "data": [],
+  "columns": [],
+  "classToApply": "",
+  "appendPosition": "replace",
+  "showLog": false
+}

package/src/v17/getSpec.js

@@ -0,0 +1,12 @@
+import spec from "./configSpec.json" with { type: "json" };
+
+// Returns the specification object when called
+const getSpec = () => {
+    return { ...spec };
+};
+
+// Also attach properties directly to getSpec so it functions as both an object and a callable function
+Object.assign(getSpec, spec);
+
+export { getSpec, spec };
+export default getSpec;

package/src/v17/guard.js

@@ -0,0 +1,41 @@
+import spec from "./configSpec.json" with { type: "json" };
+
+const guardFunc = ({ inConfig } = {}) => {
+    const localConfig = inConfig;
+
+    if (!localConfig || typeof localConfig !== "object") {
+        console.error("Config must be an object");
+        throw new TypeError("Config must be an object");
+    }
+
+    // Dynamic schema validation against spec.json keys and types
+    for (const key of Object.keys(spec)) {
+        // 1. All keys are compulsory
+        if (!(key in localConfig) || localConfig[key] === undefined) {
+            console.error(`Missing compulsory key: "${key}"`);
+            throw new Error(`Missing compulsory key: "${key}"`);
+        }
+
+        // 2. Type validation derived from spec.json
+        if (Array.isArray(spec[key])) {
+            if (!Array.isArray(localConfig[key])) {
+                console.error(`${key} must be an Array`);
+                throw new TypeError(`${key} must be an Array`);
+            }
+        } else if (typeof localConfig[key] !== typeof spec[key]) {
+            console.error(`${key} must be of type ${typeof spec[key]}`);
+            throw new TypeError(`${key} must be of type ${typeof spec[key]}`);
+        }
+    }
+
+    // Specific business rule: targetHtmlId must be a non-empty string
+    if (typeof localConfig.targetHtmlId === "string" && !localConfig.targetHtmlId.trim()) {
+        console.error("targetHtmlId must be a non-empty string");
+        throw new TypeError("targetHtmlId must be a non-empty string");
+    }
+
+    return true;
+};
+
+export { guardFunc };
+export default guardFunc;

package/src/v17/index.js

@@ -0,0 +1,32 @@
+import registerGlobal from "./registerGlobal.js";
+import validateConfig from "./validateConfig.js";
+import getSpec from "./getSpec.js";
+import buildSpec from "./buildSpec/index.js";
+import renderToDom from "./renderToDom/index.js";
+
+// Main orchestrator: coordinates validation, spec building, and DOM rendering
+const render = (options = {}) => {
+    const config = validateConfig(options);
+    const showLog = config?.showLog;
+
+    if (showLog) console.log("first : ", config?.columns, config?.data, config?.appendPosition);
+
+    const spec = buildSpec({
+        inColumns: config.columns,
+        inData: config.data,
+        inType: config.type,
+        inShowLog: config.showLog
+    });
+
+    return renderToDom({
+        inSpec: spec,
+        inTargetHtmlId: config.targetHtmlId,
+        inAppendPosition: config.appendPosition,
+        inShowLog: config.showLog
+    });
+};
+
+registerGlobal({ render, getSpec, validateConfig, buildSpec, renderToDom });
+
+export { render, getSpec, validateConfig, buildSpec, renderToDom };
+export default render;

package/src/{v11 → v17}/meta.js

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

package/src/v17/registerGlobal.js

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