json-renderers 1.12.2 → 1.13.2

package/src/v13/index.js

@@ -0,0 +1,46 @@
+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,
+    appendPosition
+} = {}) => {
+    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;
+
+    // Default to table renderer
+    return renderer({
+        inTargetHtmlId: localTargetHtmlId,
+        inColumns: localColumns,
+        inData: localData,
+        inAppendPosition: appendPosition
+    });
+};
+
+registerGlobal(render);
+
+export default render;

package/src/{v10 → v13}/meta.js

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

package/src/{v9/table → v13/select}/index.js

@@ -5,21 +5,17 @@ import skeletonJson from './skeleton.json' with { type: 'json' };
 
 // --- Story of Table Render ---
 const startFunc = ({
-    targetHtmlId,
     inTargetHtmlId,
-    inColumns,
-    inData,
+    inData
 } = {}) => {
     const localTargetHtmlId = inTargetHtmlId ?? targetHtmlId;
     const localData = inData ?? [];
     const localColumns = inColumns;
 
-    let specAsJsonToDom = jsonToSpec(skeletonJson.default, {
-        columns: localColumns, data: localData
+    let specAsJsonToDom = jsonToSpec(skeletonJson, {
+        arrayOfStrings: localData
     });
 
-    // console.log("specAsJsonToDom : ", specAsJsonToDom);
-
     if (!("tagName" in specAsJsonToDom)) {
         specAsJsonToDom = specAsJsonToDom.children;
     };
@@ -29,6 +25,7 @@ const startFunc = ({
     if (container) container.innerHTML = "";
 
     const content = jsonToTag(specAsJsonToDom);
+
     container.append(content);
 };
 

package/src/v13/select/skeleton.json

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

package/src/v13/table/index.js

@@ -0,0 +1,39 @@
+import jsonRenderBuild from "json-renderers-build";
+import jsonToTag from "@keshavsoft/json-to-tag";
+
+import skeletonJson from './skeleton.json' with { type: 'json' };
+
+// --- Story of Table Render ---
+const startFunc = ({
+    inTargetHtmlId,
+    inColumns,
+    inData, inAppendPosition
+} = {}) => {
+    debugger
+    const localTargetHtmlId = inTargetHtmlId;
+    const localData = inData ?? [];
+    const localColumns = inColumns;
+
+    let specAsJsonToDom = jsonRenderBuild({
+        type: "table",
+        targetHtmlId: localTargetHtmlId,
+        data: localData,
+        columns: localColumns
+    });
+    console.log("specAsJsonToDom : ", inAppendPosition, specAsJsonToDom);
+
+    const container = document.getElementById(localTargetHtmlId);
+
+    const content = jsonToTag(specAsJsonToDom);
+
+    if (inAppendPosition === "prepend") {
+        container.prepend(content);
+    } else {
+
+        if (container) container.innerHTML = "";
+
+        container.append(content);
+    };
+};
+
+export default startFunc;

package/src/v10/dataLists/fragments.json

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

package/src/v10/dataLists/index.js

@@ -1,32 +0,0 @@
-// 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

@@ -1,38 +0,0 @@
-{
-    "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

@@ -1,142 +0,0 @@
-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/select/fragments.json

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

package/src/v10/select/index.js

@@ -1,34 +0,0 @@
-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

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

package/src/v10/table/index.js

@@ -1,35 +0,0 @@
-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/v5/dataLists/fragments.json

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

package/src/v5/dataLists/index.js

@@ -1,26 +0,0 @@
-import jsonToSpec from "../../../node_modules/json-to-spec/index.js";
-import jsonToTag from "../../../node_modules/@keshavsoft/json-to-tag/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 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/v5/dataLists/skeleton.json

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

package/src/v5/form/attachFormClickEventListener.js

@@ -1,27 +0,0 @@
-import clickFunc from "./clickFunc/index.js";
-
-/**
- * Story: Attach click event listener for Form action buttons
- */
-const startFunc = ({
-    inTargetContainer,
-    onSave,
-    afterSave,
-    onNew,
-    onClear
-} = {}) => {
-    if (!inTargetContainer) return;
-
-    inTargetContainer.addEventListener("click", (event) => {
-        clickFunc({
-            inEvent: event,
-            inFormContainer: inTargetContainer,
-            onSave,
-            afterSave,
-            onNew,
-            onClear
-        });
-    });
-};
-
-export default startFunc;

package/src/v5/form/clickFunc/extractFormData.js

@@ -1,27 +0,0 @@
-/**
- * Step 1: Convert Form DOM inputs to clean JavaScript Object
- */
-const extractFormData = ({ inFormContainer } = {}) => {
-    if (!inFormContainer) return {};
-
-    const inputs = inFormContainer.querySelectorAll("input[name], select[name], textarea[name]");
-    const data = {};
-
-    inputs.forEach(input => {
-        const key = input.name || input.getAttribute("name");
-        if (!key) return;
-
-        if (input.type === "checkbox") {
-            data[key] = input.checked;
-        } else if (input.type === "radio") {
-            if (input.checked) data[key] = input.value;
-        } else {
-            data[key] = input.value;
-        }
-    });
-
-    return data;
-};
-
-export { extractFormData };
-export default extractFormData;

package/src/v5/form/clickFunc/handleNew.js

@@ -1,24 +0,0 @@
-/**
- * Step 3: Handle New / Clear button action - reset inputs and trigger callbacks
- */
-const handleNew = ({ inEvent, inFormContainer, onNew, onClear } = {}) => {
-    if (inFormContainer) {
-        const inputs = inFormContainer.querySelectorAll("input[name], textarea[name]");
-        inputs.forEach(input => {
-            if (input.type === "checkbox" || input.type === "radio") {
-                input.checked = false;
-            } else {
-                input.value = "";
-            }
-        });
-    }
-
-    if (typeof onNew === "function") {
-        onNew({ inEvent });
-    } else if (typeof onClear === "function") {
-        onClear({ inEvent });
-    }
-};
-
-export { handleNew };
-export default handleNew;

package/src/v5/form/clickFunc/handleSave.js

@@ -1,33 +0,0 @@
-import extractFormData from "./extractFormData.js";
-
-/**
- * Step 2: Handle Save button action - serialize form DOM and dispatch callbacks
- */
-const handleSave = ({ inEvent, inFormContainer, onSave, afterSave } = {}) => {
-    const clickedButton = inEvent?.target?.closest("button");
-    const formData = extractFormData({ inFormContainer });
-
-    // Visual button feedback
-    if (clickedButton) {
-        const originalText = clickedButton.textContent;
-        clickedButton.textContent = "Saved!";
-        clickedButton.classList.replace("btn-primary", "btn-success");
-        setTimeout(() => {
-            clickedButton.textContent = originalText;
-            clickedButton.classList.replace("btn-success", "btn-primary");
-        }, 1000);
-    }
-
-    if (typeof onSave === "function") {
-        onSave({ inData: formData, inEvent });
-    }
-
-    if (typeof afterSave === "function") {
-        afterSave({ inData: formData, inEvent });
-    }
-
-    return formData;
-};
-
-export { handleSave };
-export default handleSave;

package/src/v5/form/clickFunc/index.js

@@ -1,32 +0,0 @@
-import handleSave from "./handleSave.js";
-import handleNew from "./handleNew.js";
-
-/**
- * Main form click router: identifies button action and routes to dedicated handlers
- */
-const clickFunc = ({
-    inEvent,
-    inFormContainer,
-    onSave,
-    afterSave,
-    onNew,
-    onClear
-} = {}) => {
-    const clickedButton = inEvent?.target?.closest("button");
-    if (!clickedButton) return;
-
-    const buttonId = clickedButton.id || "";
-    const buttonAction = clickedButton.dataset.action || "";
-    const buttonText = clickedButton.textContent.trim().toLowerCase();
-
-    if (buttonId === "btn-form-save" || buttonAction === "save" || buttonText === "save") {
-        return handleSave({ inEvent, inFormContainer, onSave, afterSave });
-    }
-
-    if (buttonId === "btn-form-new" || buttonAction === "new" || buttonText === "new" || buttonText === "clear") {
-        return handleNew({ inEvent, inFormContainer, onNew, onClear });
-    }
-};
-
-export { clickFunc };
-export default clickFunc;