json-to-spec 19.1.0

package/samples/table/input/structure copy.json

@@ -0,0 +1,47 @@
+{
+    "tagName": "table",
+    "attributes": {
+        "class": "table"
+    },
+    "children": [
+        {
+            "tagName": "thead",
+            "children": [
+                {
+                    "tagName": "tr",
+                    "children": [
+                        {
+                            "tagName": "th",
+                            "textContent": "Name"
+                        },
+                        {
+                            "tagName": "th",
+                            "textContent": "LedgerParentName"
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "tagName": "tbody",
+            "jsonToSpec": {
+                "operation": "iterate",
+                "source": "data",
+                "template": {
+                    "tagName": "tr",
+                    "children": [
+                        {
+                            "tagName": "td",
+                            "textContent": "${LedgerName}"
+                        },
+                        {
+                            "tagName": "td",
+                            "textContent": "${LedgerParentName}"
+                        }
+                    ]
+                }
+            },
+            "children": []
+        }
+    ]
+}

package/samples/table/input/structure.json

@@ -0,0 +1,86 @@
+{
+    "tagName": "div",
+    "attributes": {
+        "class": "card shadow-sm"
+    },
+    "children": [
+        {
+            "tagName": "div",
+            "attributes": {
+                "class": "card-header"
+            },
+            "children": [
+                {
+                    "tagName": "input",
+                    "attributes": {
+                        "type": "search",
+                        "class": "form-control",
+                        "placeholder": "Search...",
+                        "id": "table-search"
+                    }
+                }
+            ]
+        },
+        {
+            "tagName": "div",
+            "attributes": {
+                "class": "table-responsive"
+            },
+            "children": [
+                {
+                    "tagName": "table",
+                    "attributes": {
+                        "class": "table table-hover table-striped mb-0"
+                    },
+                    "children": [
+                        {
+                            "tagName": "thead",
+                            "attributes": {
+                                "class": "table-dark"
+                            },
+                            "children": [
+                                {
+                                    "tagName": "tr",
+                                    "children": [
+                                        {
+                                            "tagName": "th",
+                                            "textContent": "Name"
+                                        },
+                                        {
+                                            "tagName": "th",
+                                            "textContent": "LedgerParentName"
+                                        }
+                                    ]
+                                }
+                            ]
+                        },
+                        {
+                            "tagName": "tbody",
+                            "attributes": {
+                                "id": "table-body"
+                            },
+                            "jsonToSpec": {
+                                "operation": "iterate",
+                                "source": "data",
+                                "template": {
+                                    "tagName": "tr",
+                                    "children": [
+                                        {
+                                            "tagName": "td",
+                                            "textContent": "${LedgerName}"
+                                        },
+                                        {
+                                            "tagName": "td",
+                                            "textContent": "${LedgerParentName}"
+                                        }
+                                    ]
+                                }
+                            },
+                            "children": []
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+}

package/samples/table/input/table.json

@@ -0,0 +1,135 @@
+{
+    "simple": {
+        "tagName": "table",
+        "attributes": {
+            "class": "table"
+        },
+        "children": [
+            {
+                "tagName": "thead",
+                "children": [
+                    {
+                        "tagName": "tr",
+                        "children": [
+                            {
+                                "tagName": "th",
+                                "textContent": "Name"
+                            },
+                            {
+                                "tagName": "th",
+                                "textContent": "LedgerParentName"
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "tagName": "tbody",
+                "jsonToSpec": {
+                    "operation": "iterate",
+                    "source": "data",
+                    "template": {
+                        "tagName": "tr",
+                        "children": [
+                            {
+                                "tagName": "td",
+                                "textContent": "${LedgerName}"
+                            },
+                            {
+                                "tagName": "td",
+                                "textContent": "${LedgerParentName}"
+                            }
+                        ]
+                    }
+                },
+                "children": []
+            }
+        ]
+    },
+    "withSearch": {
+        "tagName": "div",
+        "attributes": {
+            "class": "card shadow-sm"
+        },
+        "children": [
+            {
+                "tagName": "div",
+                "attributes": {
+                    "class": "card-header"
+                },
+                "children": [
+                    {
+                        "tagName": "input",
+                        "attributes": {
+                            "type": "search",
+                            "class": "form-control",
+                            "placeholder": "Search...",
+                            "id": "table-search"
+                        }
+                    }
+                ]
+            },
+            {
+                "tagName": "div",
+                "attributes": {
+                    "class": "table-responsive"
+                },
+                "children": [
+                    {
+                        "tagName": "table",
+                        "attributes": {
+                            "class": "table table-hover table-striped mb-0"
+                        },
+                        "children": [
+                            {
+                                "tagName": "thead",
+                                "attributes": {
+                                    "class": "table-dark"
+                                },
+                                "children": [
+                                    {
+                                        "tagName": "tr",
+                                        "children": [
+                                            {
+                                                "tagName": "th",
+                                                "textContent": "Name"
+                                            },
+                                            {
+                                                "tagName": "th",
+                                                "textContent": "LedgerParentName"
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "tagName": "tbody",
+                                "attributes": {
+                                    "id": "table-body"
+                                },
+                                "jsonToSpec": {
+                                    "operation": "iterate",
+                                    "source": "data",
+                                    "template": {
+                                        "tagName": "tr",
+                                        "children": [
+                                            {
+                                                "tagName": "td",
+                                                "textContent": "${LedgerName}"
+                                            },
+                                            {
+                                                "tagName": "td",
+                                                "textContent": "${LedgerParentName}"
+                                            }
+                                        ]
+                                    }
+                                },
+                                "children": []
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    }
+}

package/samples/table-/data.json

@@ -0,0 +1,68 @@
+{
+  "columns": [
+    {
+      "columnName": "Category",
+      "title": "Category",
+      "field": "Category",
+      "isVisible": true
+    },
+    {
+      "columnName": "ItemName",
+      "title": "Item Name",
+      "field": "ItemName",
+      "isVisible": true
+    },
+    {
+      "columnName": "Service",
+      "title": "Service",
+      "field": "Service",
+      "isVisible": true
+    },
+    {
+      "columnName": "Rate",
+      "title": "Rate (₹)",
+      "field": "Rate",
+      "isVisible": true
+    },
+    {
+      "columnName": "pk",
+      "title": "pk",
+      "field": "pk",
+      "isVisible": false
+    }
+  ],
+  "rows": [
+    {
+      "pk": "item-001",
+      "Category": "Beverages",
+      "ItemName": "Green Tea",
+      "Service": "Packaging",
+      "Rate": 150
+    },
+    {
+      "pk": "item-002",
+      "Category": "Beverages",
+      "ItemName": "Espresso Coffee",
+      "Service": "Grinding",
+      "Rate": 220
+    },
+    {
+      "pk": "item-003",
+      "Category": "Bakery",
+      "ItemName": "Almond Cookies",
+      "Service": "Baking",
+      "Rate": 95
+    },
+    {
+      "pk": "item-004",
+      "Category": "Beverages",
+      "ItemName": "Orange Juice",
+      "Service": "Bottling",
+      "Rate": 120
+    }
+  ],
+  "summary": {
+    "totalItems": 4,
+    "avgRate": 146.25
+  }
+}

package/samples/table-/structure.json

@@ -0,0 +1,235 @@
+{
+  "tagName": "div",
+  "attributes": {
+    "class": "card shadow-sm border border-slate-200 rounded-xl overflow-hidden max-w-4xl mx-auto"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "attributes": {
+        "class": "card-header bg-slate-100 px-6 py-4 border-b border-slate-200 d-flex justify-content-between align-items-center"
+      },
+      "children": [
+        {
+          "tagName": "div",
+          "children": [
+            {
+              "tagName": "h2",
+              "textContent": "Item Master Table",
+              "attributes": {
+                "class": "h5 mb-0 fw-bold text-slate-800"
+              }
+            },
+            {
+              "tagName": "p",
+              "textContent": "Rendered via 2-file compiler: thead & tbody iteration over data.columns & data.rows",
+              "attributes": {
+                "class": "small text-muted mb-0"
+              }
+            }
+          ]
+        },
+        {
+          "tagName": "span",
+          "textContent": "${summary.totalItems} Items",
+          "attributes": {
+            "class": "badge bg-indigo-600 text-white font-mono px-3 py-1.5"
+          }
+        }
+      ]
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "class": "table-responsive"
+      },
+      "children": [
+        {
+          "tagName": "table",
+          "attributes": {
+            "class": "table table-hover table-striped align-middle mb-0"
+          },
+          "children": [
+            {
+              "tagName": "thead",
+              "attributes": {
+                "class": "table-light"
+              },
+              "children": [
+                {
+                  "tagName": "tr",
+                  "children": [
+                    {
+                      "tagName": "th",
+                      "textContent": "#",
+                      "attributes": {
+                        "class": "text-center py-3",
+                        "style": "width: 50px;"
+                      }
+                    },
+                    {
+                      "operation": "iterate",
+                      "source": "columns",
+                      "filter": {
+                        "isVisible": true
+                      },
+                      "template": {
+                        "tagName": "th",
+                        "textContent": "${title}",
+                        "attributes": {
+                          "class": "text-start py-3"
+                        }
+                      }
+                    },
+                    {
+                      "tagName": "th",
+                      "textContent": "Status",
+                      "attributes": {
+                        "class": "text-center py-3",
+                        "style": "width: 100px;"
+                      }
+                    },
+                    {
+                      "tagName": "th",
+                      "textContent": "Action",
+                      "attributes": {
+                        "class": "text-end py-3 px-4",
+                        "style": "width: 100px;"
+                      }
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "tagName": "tbody",
+              "children": [
+                {
+                  "operation": "iterate",
+                  "source": "rows",
+                  "template": {
+                    "tagName": "tr",
+                    "children": [
+                      {
+                        "tagName": "td",
+                        "textContent": "${$number}",
+                        "attributes": {
+                          "class": "text-center font-mono small text-muted py-2.5"
+                        }
+                      },
+                      {
+                        "operation": "iterate",
+                        "source": "columns",
+                        "filter": {
+                          "isVisible": true
+                        },
+                        "template": {
+                          "tagName": "td",
+                          "textContent": "${value}",
+                          "attributes": {
+                            "class": "text-start py-2.5"
+                          }
+                        }
+                      },
+                      {
+                        "tagName": "td",
+                        "attributes": {
+                          "class": "text-center py-2.5"
+                        },
+                        "children": [
+                          {
+                            "tagName": "span",
+                            "textContent": "Active",
+                            "attributes": {
+                              "class": "badge bg-success-subtle text-success border border-success-subtle font-mono text-xs"
+                            }
+                          }
+                        ]
+                      },
+                      {
+                        "tagName": "td",
+                        "attributes": {
+                          "class": "text-end py-2.5 px-4"
+                        },
+                        "children": [
+                          {
+                            "tagName": "button",
+                            "textContent": "View",
+                            "attributes": {
+                              "type": "button",
+                              "class": "btn btn-outline-primary btn-sm py-0 px-2 text-xs"
+                            }
+                          }
+                        ]
+                      }
+                    ]
+                  }
+                }
+              ]
+            },
+            {
+              "tagName": "tfoot",
+              "attributes": {
+                "class": "table-light border-top"
+              },
+              "children": [
+                {
+                  "tagName": "tr",
+                  "children": [
+                    {
+                      "tagName": "td",
+                      "textContent": "Summary: Total Items: ${summary.totalItems} | Average Rate: ₹${summary.avgRate}",
+                      "attributes": {
+                        "colspan": "7",
+                        "class": "small text-muted py-2.5 px-4 fw-semibold"
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "class": "card-footer bg-slate-50 px-6 py-3 border-t border-slate-200 d-flex justify-content-between align-items-center"
+      },
+      "children": [
+        {
+          "tagName": "span",
+          "textContent": "Showing 4 of 4 records",
+          "attributes": {
+            "class": "text-xs text-muted font-mono"
+          }
+        },
+        {
+          "tagName": "div",
+          "attributes": {
+            "class": "d-flex gap-2"
+          },
+          "children": [
+            {
+              "tagName": "button",
+              "textContent": "Export CSV",
+              "attributes": {
+                "type": "button",
+                "class": "btn btn-outline-secondary btn-sm text-xs"
+              }
+            },
+            {
+              "tagName": "button",
+              "textContent": "Add New Row",
+              "attributes": {
+                "type": "button",
+                "class": "btn btn-primary btn-sm text-xs"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/src/index.js

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

package/src/v10/index.js

@@ -0,0 +1,96 @@
+/**
+ * json-to-spec v9
+ *
+ * Modular 3-Stage Specification Compiler:
+ * 1. operation: detects and expands iterations and structural directives
+ * 2. replace: resolves dynamic token interpolation in strings, text, attributes & properties
+ * 3. other: applies form control value bindings, story injection, and cleans up metadata
+ *
+ * All three applications can be invoked independently, chained in custom pipelines,
+ * or executed via compile().
+ */
+
+import operation from "./instructionEngine/operation/operation.js";
+import replace from "./instructionEngine/replace/replace.js";
+import other from "./instructionEngine/other/other.js";
+import { pipeline, pipe, defaultPipeline } from "./instructionEngine/pipeline/pipeline.js";
+
+export const meta = {
+    version: "10.0.0",
+    name: "json-to-spec/v10",
+    description: "Pure JSON Specification Compiler with decoupled operation, replace, and other pipeline stages"
+};
+
+/**
+ * Compiles a JSON UI structure tree containing `jsonToSpec` operations with a data payload.
+ *
+ * Outside API:
+ * - compile(structureJson, dataJson)
+ * - compile({ inStructure, inData, inSteps })
+ * - compile({ structure, data, steps })
+ *
+ * @param {Object|Array} inStructureOrOptions - The UI structure JSON tree or options object
+ * @param {Object} [inData] - Data payload containing collections and values
+ * @returns {Object|Array} - Compiled 100% pure JSON specification ready for json-to-dom
+ */
+export const compile = (inStructureOrOptions, inData = {}) => {
+    let localStructure = inStructureOrOptions;
+    let localData = inData || {};
+    let localSteps = defaultPipeline;
+
+    if (inStructureOrOptions && typeof inStructureOrOptions === "object" && !Array.isArray(inStructureOrOptions)) {
+        if ("inStructure" in inStructureOrOptions || "inTree" in inStructureOrOptions || "inNode" in inStructureOrOptions) {
+            localStructure = inStructureOrOptions.inStructure || inStructureOrOptions.inTree || inStructureOrOptions.inNode;
+            localData = inStructureOrOptions.inData || localData;
+            localSteps = inStructureOrOptions.inSteps || localSteps;
+        } else if ("structure" in inStructureOrOptions) {
+            localStructure = inStructureOrOptions.structure;
+            localData = inStructureOrOptions.data || localData;
+            localSteps = inStructureOrOptions.steps || localSteps;
+        } else if ("context" in inStructureOrOptions) {
+            localStructure = inStructureOrOptions.context;
+            localData = inStructureOrOptions.data || localData;
+            localSteps = inStructureOrOptions.steps || localSteps;
+        }
+    }
+
+    return pipeline({
+        inStructure: localStructure,
+        inData: localData,
+        inSteps: localSteps
+    });
+};
+
+export const jsonToSpec = {
+    operation,
+    replace,
+    other,
+    pipeline,
+    pipe,
+    compile
+};
+
+export {
+    operation,
+    replace,
+    other,
+    pipeline,
+    pipe,
+    defaultPipeline
+};
+
+if (typeof globalThis !== "undefined") {
+    globalThis.ks ??= {};
+    globalThis.ks["json-to-spec"] = {
+        meta,
+        compile,
+        pipeline,
+        pipe,
+        operation,
+        replace,
+        other,
+        jsonToSpec
+    };
+}
+
+export default compile;