json-to-spec 19.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (217) hide show
  1. package/README.md +118 -0
  2. package/docs/demo.html +426 -0
  3. package/docs/dist/min.js +164 -0
  4. package/docs/dist/v1/min.js +124 -0
  5. package/docs/dist/v17/min.js +355 -0
  6. package/docs/dist/v18/min.js +160 -0
  7. package/docs/dist/v19/min.js +164 -0
  8. package/docs/dist/v2/min.js +129 -0
  9. package/docs/dist/v3/min.js +201 -0
  10. package/docs/index.html +248 -0
  11. package/docs/pages/architecture.html +115 -0
  12. package/docs/pages/how-it-works.html +125 -0
  13. package/docs/pages/what-not.html +100 -0
  14. package/docs/pages/what.html +105 -0
  15. package/docs/pages/why.html +88 -0
  16. package/docs/samples/form.html +265 -0
  17. package/docs/samples/index.html +112 -0
  18. package/docs/samples/table.html +306 -0
  19. package/index.js +2 -0
  20. package/package.json +50 -0
  21. package/samples/dataList/index.html +31 -0
  22. package/samples/dataList/index.js +62 -0
  23. package/samples/dataList/input/data.json +5043 -0
  24. package/samples/dataList/input/structure.json +38 -0
  25. package/samples/dataList copy/index.html +30 -0
  26. package/samples/dataList copy/index.js +61 -0
  27. package/samples/dataList copy/input/data.json +35307 -0
  28. package/samples/dataList copy/input/structure.json +18 -0
  29. package/samples/form/index.html +29 -0
  30. package/samples/form/index.js +64 -0
  31. package/samples/form/input/data.json +9 -0
  32. package/samples/form/input/structure.json +192 -0
  33. package/samples/form-/data.json +42 -0
  34. package/samples/form-/structure.json +110 -0
  35. package/samples/select/index.html +31 -0
  36. package/samples/select/index.js +61 -0
  37. package/samples/select/input/data.json +35287 -0
  38. package/samples/select/input/select.json +18 -0
  39. package/samples/select/input/structure.json +47 -0
  40. package/samples/table/index.html +29 -0
  41. package/samples/table/index.js +61 -0
  42. package/samples/table/input/data.json +35287 -0
  43. package/samples/table/input/structure copy.json +47 -0
  44. package/samples/table/input/structure.json +86 -0
  45. package/samples/table/input/table.json +135 -0
  46. package/samples/table-/data.json +68 -0
  47. package/samples/table-/structure.json +235 -0
  48. package/src/index.js +2 -0
  49. package/src/v10/index.js +96 -0
  50. package/src/v10/instructionEngine/compile/compileTree.js +191 -0
  51. package/src/v10/instructionEngine/compileTree.js +1 -0
  52. package/src/v10/instructionEngine/expandIteration.js +1 -0
  53. package/src/v10/instructionEngine/index.js +29 -0
  54. package/src/v10/instructionEngine/interpolate.js +2 -0
  55. package/src/v10/instructionEngine/iteration/expandIteration.js +95 -0
  56. package/src/v10/instructionEngine/operation/operation.js +237 -0
  57. package/src/v10/instructionEngine/other/other.js +150 -0
  58. package/src/v10/instructionEngine/pipeline/pipeline.js +47 -0
  59. package/src/v10/instructionEngine/replace/replace.js +173 -0
  60. package/src/v10/instructionEngine/resolve/resolvePath.js +18 -0
  61. package/src/v10/instructionEngine/resolve/resolveTokenValue.js +22 -0
  62. package/src/v10/instructionEngine/resolvePath.js +1 -0
  63. package/src/v10/instructionEngine/resolveTokenValue.js +1 -0
  64. package/src/v10/instructionEngine/story/storyInjector.js +50 -0
  65. package/src/v10/instructionEngine/storyInjector.js +1 -0
  66. package/src/v10/instructionEngine/value/interpolate.js +38 -0
  67. package/src/v11/index.js +116 -0
  68. package/src/v11/iterate.js +270 -0
  69. package/src/v11/replace.js +169 -0
  70. package/src/v11/resolvePath.js +29 -0
  71. package/src/v12/index.js +122 -0
  72. package/src/v12/iterate/bindFormValues.js +74 -0
  73. package/src/v12/iterate/expandIteration.js +181 -0
  74. package/src/v12/iterate/index.js +10 -0
  75. package/src/v12/iterate/iterate.js +56 -0
  76. package/src/v12/iterate/iterateNode.js +86 -0
  77. package/src/v12/iterate/resolveCollection.js +37 -0
  78. package/src/v12/iterate.js +270 -0
  79. package/src/v12/replace.js +169 -0
  80. package/src/v12/resolvePath.js +29 -0
  81. package/src/v13/index.js +110 -0
  82. package/src/v13/iterate/bindFormValues.js +74 -0
  83. package/src/v13/iterate/expandIteration.js +188 -0
  84. package/src/v13/iterate/index.js +9 -0
  85. package/src/v13/iterate/iterate.js +32 -0
  86. package/src/v13/iterate/iterateNode.js +86 -0
  87. package/src/v13/iterate/resolveCollection.js +37 -0
  88. package/src/v13/iterate/walk.js +90 -0
  89. package/src/v13/iterate.js +270 -0
  90. package/src/v13/replace.js +169 -0
  91. package/src/v13/resolvePath.js +29 -0
  92. package/src/v14/index.js +112 -0
  93. package/src/v14/iterate/bindFormValues.js +74 -0
  94. package/src/v14/iterate/expandIteration.js +188 -0
  95. package/src/v14/iterate/index.js +9 -0
  96. package/src/v14/iterate/iterate.js +32 -0
  97. package/src/v14/iterate/resolveCollection.js +37 -0
  98. package/src/v14/iterate/walk/walk copy 2.js +114 -0
  99. package/src/v14/iterate/walk/walk copy.js +90 -0
  100. package/src/v14/iterate/walk/walk.js +98 -0
  101. package/src/v14/iterate.js +270 -0
  102. package/src/v14/replace/index.js +16 -0
  103. package/src/v14/replace/walk.js +90 -0
  104. package/src/v14/replace.js +153 -0
  105. package/src/v14/resolvePath.js +29 -0
  106. package/src/v15/index.js +123 -0
  107. package/src/v15/iterate/bindFormValues.js +74 -0
  108. package/src/v15/iterate/expandIteration.js +188 -0
  109. package/src/v15/iterate/index.js +9 -0
  110. package/src/v15/iterate/iterate.js +32 -0
  111. package/src/v15/iterate/resolveCollection.js +37 -0
  112. package/src/v15/iterate/walk/walk copy 2.js +114 -0
  113. package/src/v15/iterate/walk/walk copy.js +90 -0
  114. package/src/v15/iterate/walk/walk.js +195 -0
  115. package/src/v15/iterate.js +270 -0
  116. package/src/v15/replace/index.js +16 -0
  117. package/src/v15/replace/walk.js +90 -0
  118. package/src/v15/replace.js +155 -0
  119. package/src/v15/resolvePath.js +29 -0
  120. package/src/v16/index.js +129 -0
  121. package/src/v16/iterate/bindFormValues.js +74 -0
  122. package/src/v16/iterate/expandIteration.js +188 -0
  123. package/src/v16/iterate/index.js +9 -0
  124. package/src/v16/iterate/iterate.js +32 -0
  125. package/src/v16/iterate/resolveCollection.js +37 -0
  126. package/src/v16/iterate/walk/walk copy 2.js +114 -0
  127. package/src/v16/iterate/walk/walk copy.js +90 -0
  128. package/src/v16/iterate/walk/walk.js +196 -0
  129. package/src/v16/iterate.js +270 -0
  130. package/src/v16/replace/index.js +16 -0
  131. package/src/v16/replace/walk.js +90 -0
  132. package/src/v16/replace.js +155 -0
  133. package/src/v16/resolvePath.js +29 -0
  134. package/src/v17/index.js +119 -0
  135. package/src/v17/iterate/bindFormValues.js +74 -0
  136. package/src/v17/iterate/expandIteration.js +188 -0
  137. package/src/v17/iterate/index.js +9 -0
  138. package/src/v17/iterate/iterate.js +32 -0
  139. package/src/v17/iterate/resolveCollection.js +37 -0
  140. package/src/v17/iterate/walk/iterateDo.js +42 -0
  141. package/src/v17/iterate/walk/replaceWithData.js +60 -0
  142. package/src/v17/iterate/walk/walk.js +94 -0
  143. package/src/v17/iterate.js +270 -0
  144. package/src/v17/replace/index.js +16 -0
  145. package/src/v17/replace/walk.js +90 -0
  146. package/src/v17/replace.js +160 -0
  147. package/src/v17/resolvePath.js +29 -0
  148. package/src/v18/index.js +66 -0
  149. package/src/v18/meta.js +7 -0
  150. package/src/v18/registerGlobal.js +17 -0
  151. package/src/v18/replace.js +18 -0
  152. package/src/v18/resolvePath.js +29 -0
  153. package/src/v18/walk/iterate/v1/index.js +42 -0
  154. package/src/v18/walk/iterate/v2/index.js +32 -0
  155. package/src/v18/walk/iterate/v3/index.js +46 -0
  156. package/src/v18/walk/iterate/v4/createChildren.js +24 -0
  157. package/src/v18/walk/iterate/v4/index.js +25 -0
  158. package/src/v18/walk/replaceWithData/v1/index.js +42 -0
  159. package/src/v18/walk/replaceWithData/v1/replaceCommon.js +21 -0
  160. package/src/v18/walk/replaceWithData/v2/index.js +105 -0
  161. package/src/v18/walk/replaceWithData/v2/replaceCommon.js +21 -0
  162. package/src/v18/walk/replaceWithData/v3/index.js +15 -0
  163. package/src/v18/walk/replaceWithData/v3/replaceAttributes.js +29 -0
  164. package/src/v18/walk/replaceWithData/v3/replaceCommon.js +23 -0
  165. package/src/v18/walk/replaceWithData/v3/replaceNodeValue.js +27 -0
  166. package/src/v18/walk/walk.js +94 -0
  167. package/src/v19/index.js +55 -0
  168. package/src/v19/meta.js +7 -0
  169. package/src/v19/registerGlobal.js +17 -0
  170. package/src/v19/replace.js +18 -0
  171. package/src/v19/resolvePath.js +29 -0
  172. package/src/v19/walk/iterate/v1/index.js +42 -0
  173. package/src/v19/walk/iterate/v2/index.js +32 -0
  174. package/src/v19/walk/iterate/v3/index.js +46 -0
  175. package/src/v19/walk/iterate/v4/createChildren.js +27 -0
  176. package/src/v19/walk/iterate/v4/index.js +25 -0
  177. package/src/v19/walk/replaceWithData/v1/index.js +42 -0
  178. package/src/v19/walk/replaceWithData/v1/replaceCommon.js +21 -0
  179. package/src/v19/walk/replaceWithData/v2/index.js +105 -0
  180. package/src/v19/walk/replaceWithData/v2/replaceCommon.js +21 -0
  181. package/src/v19/walk/replaceWithData/v3/index.js +15 -0
  182. package/src/v19/walk/replaceWithData/v3/replaceAttributes.js +29 -0
  183. package/src/v19/walk/replaceWithData/v3/replaceCommon.js +23 -0
  184. package/src/v19/walk/replaceWithData/v3/replaceNodeValue.js +27 -0
  185. package/src/v19/walk/walk.js +97 -0
  186. package/src/v8/index.js +69 -0
  187. package/src/v8/instructionEngine/compile/compileTree.js +191 -0
  188. package/src/v8/instructionEngine/compileTree.js +1 -0
  189. package/src/v8/instructionEngine/expandIteration.js +1 -0
  190. package/src/v8/instructionEngine/index.js +16 -0
  191. package/src/v8/instructionEngine/interpolate.js +2 -0
  192. package/src/v8/instructionEngine/iteration/expandIteration.js +95 -0
  193. package/src/v8/instructionEngine/resolve/resolvePath.js +18 -0
  194. package/src/v8/instructionEngine/resolve/resolveTokenValue.js +22 -0
  195. package/src/v8/instructionEngine/resolvePath.js +1 -0
  196. package/src/v8/instructionEngine/resolveTokenValue.js +1 -0
  197. package/src/v8/instructionEngine/story/storyInjector.js +50 -0
  198. package/src/v8/instructionEngine/storyInjector.js +1 -0
  199. package/src/v8/instructionEngine/value/interpolate.js +38 -0
  200. package/src/v9/index.js +96 -0
  201. package/src/v9/instructionEngine/compile/compileTree.js +191 -0
  202. package/src/v9/instructionEngine/compileTree.js +1 -0
  203. package/src/v9/instructionEngine/expandIteration.js +1 -0
  204. package/src/v9/instructionEngine/index.js +29 -0
  205. package/src/v9/instructionEngine/interpolate.js +2 -0
  206. package/src/v9/instructionEngine/iteration/expandIteration.js +95 -0
  207. package/src/v9/instructionEngine/operation/operation.js +237 -0
  208. package/src/v9/instructionEngine/other/other.js +150 -0
  209. package/src/v9/instructionEngine/pipeline/pipeline.js +47 -0
  210. package/src/v9/instructionEngine/replace/replace.js +173 -0
  211. package/src/v9/instructionEngine/resolve/resolvePath.js +18 -0
  212. package/src/v9/instructionEngine/resolve/resolveTokenValue.js +22 -0
  213. package/src/v9/instructionEngine/resolvePath.js +1 -0
  214. package/src/v9/instructionEngine/resolveTokenValue.js +1 -0
  215. package/src/v9/instructionEngine/story/storyInjector.js +50 -0
  216. package/src/v9/instructionEngine/storyInjector.js +1 -0
  217. package/src/v9/instructionEngine/value/interpolate.js +38 -0
package/docs/samples/table.html ADDED
@@ -0,0 +1,306 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Table Engine Sample (CDN) | json-to-spec</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
12
+ <style>
13
+ body { font-family: 'Inter', sans-serif; }
14
+ code, pre { font-family: 'JetBrains Mono', monospace; }
15
+ </style>
16
+ </head>
17
+ <body class="bg-slate-50 text-slate-800 min-h-screen flex flex-col">
18
+
19
+ <!-- Navbar -->
20
+ <header class="sticky top-0 z-50 bg-white/90 backdrop-blur border-b border-slate-200">
21
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
22
+ <div class="flex items-center space-x-3">
23
+ <a href="../index.html" class="flex items-center space-x-2 font-black text-lg text-slate-900 hover:text-emerald-600 transition">
24
+ <span class="w-8 h-8 rounded-lg bg-emerald-600 text-white flex items-center justify-center font-black text-sm">JS</span>
25
+ <span>json-to-spec</span>
26
+ </a>
27
+ <span class="text-xs bg-emerald-50 text-emerald-700 font-semibold px-2.5 py-0.5 rounded-full border border-emerald-200">Table Sample (CDN)</span>
28
+ </div>
29
+ <nav class="flex items-center space-x-4 text-sm font-medium">
30
+ <a href="index.html" class="text-emerald-600 font-semibold">&larr; All Samples</a>
31
+ <a href="form.html" class="text-slate-600 hover:text-slate-900 transition">Form Sample</a>
32
+ <a href="../demo.html" class="px-3 py-1.5 bg-emerald-600 text-white rounded-md hover:bg-emerald-700 shadow-sm transition">Playground</a>
33
+ </nav>
34
+ </div>
35
+ </header>
36
+
37
+ <!-- Main Container -->
38
+ <main class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8 flex-1 w-full space-y-6">
39
+
40
+ <!-- Header Info -->
41
+ <div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-2">
42
+ <div class="flex items-center justify-between">
43
+ <span class="text-xs uppercase font-bold text-emerald-600 font-mono">Sample 02 &bull; 100% CDN Engine</span>
44
+ <span id="status-badge" class="px-2.5 py-0.5 text-xs font-mono rounded-full bg-emerald-50 text-emerald-700 border border-emerald-200">
45
+ Loading Table via CDN...
46
+ </span>
47
+ </div>
48
+ <h1 class="text-2xl font-black text-slate-900">Data Grid / Table Engine</h1>
49
+ <p class="text-xs text-slate-600 leading-relaxed max-w-3xl">
50
+ Demonstrates nested iterations: <code class="text-emerald-600">thead</code> iterates over columns, <code class="text-emerald-600">tbody</code> iterates over rows &times; columns to bind cell values, and <code class="text-emerald-600">tfoot</code> computes aggregations.
51
+ </p>
52
+ </div>
53
+
54
+ <!-- Rendered DOM Target -->
55
+ <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
56
+ <div class="px-6 py-3.5 bg-slate-50 border-b border-slate-200 flex items-center justify-between">
57
+ <span class="text-xs font-bold text-slate-700 flex items-center gap-2">
58
+ <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span> Live Rendered Table Output
59
+ </span>
60
+ <button id="re-render-btn" class="px-3 py-1 text-xs font-semibold bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 transition">
61
+ ⚡ Re-Compile & Render
62
+ </button>
63
+ </div>
64
+ <div class="p-8 bg-slate-100/50 flex justify-center overflow-x-auto">
65
+ <div id="table-container" class="w-full max-w-4xl">
66
+ <!-- Table DOM will be injected here -->
67
+ </div>
68
+ </div>
69
+ </div>
70
+
71
+ <!-- Inspection Tabs: Structure, Data, Spec -->
72
+ <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
73
+ <div class="px-6 py-3 bg-slate-50 border-b border-slate-200 flex items-center justify-between">
74
+ <div class="flex items-center gap-2 text-xs font-semibold">
75
+ <button id="tab-struct" class="px-3 py-1 rounded-lg bg-emerald-600 text-white transition">structure.json</button>
76
+ <button id="tab-data" class="px-3 py-1 rounded-lg bg-slate-200 text-slate-700 hover:bg-slate-300 transition">data.json</button>
77
+ <button id="tab-spec" class="px-3 py-1 rounded-lg bg-slate-200 text-slate-700 hover:bg-slate-300 transition">spec.json (Output)</button>
78
+ </div>
79
+ <button id="copy-btn" class="px-3 py-1 text-xs font-mono bg-slate-100 hover:bg-slate-200 rounded border border-slate-200 text-slate-600 transition">
80
+ Copy JSON
81
+ </button>
82
+ </div>
83
+ <div class="p-4 bg-slate-900 overflow-auto max-h-96">
84
+ <pre id="code-display" class="text-xs text-teal-300 leading-relaxed"></pre>
85
+ </div>
86
+ </div>
87
+
88
+ </main>
89
+
90
+ <!-- Footer -->
91
+ <footer class="mt-auto bg-white border-t border-slate-200 py-6 text-center text-xs text-slate-500">
92
+ json-to-spec &bull; KeshavSoft &bull; MIT License
93
+ </footer>
94
+
95
+ <!-- Execution Script via CDN -->
96
+ <script type="module">
97
+ let compile;
98
+ const isLocal = window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1" || window.location.protocol === "file:";
99
+ try {
100
+ if (isLocal) {
101
+ const mod = await import("../dist/min.js");
102
+ compile = mod.compile;
103
+ } else {
104
+ const mod = await import("https://keshavsoft.github.io/json-to-spec/dist/v1/min.js");
105
+ compile = mod.compile;
106
+ }
107
+ } catch {
108
+ const mod = await import("../dist/min.js");
109
+ compile = mod.compile;
110
+ }
111
+
112
+ import { buildSpecElement } from "https://keshavsoft.github.io/json-to-dom/dist/v16/min.js";
113
+
114
+ const SAMPLE_STRUCTURE = {
115
+ "tagName": "div",
116
+ "attributes": {
117
+ "class": "card shadow-sm border border-slate-200 rounded-xl overflow-hidden max-w-4xl mx-auto"
118
+ },
119
+ "children": [
120
+ {
121
+ "tagName": "div",
122
+ "attributes": {
123
+ "class": "card-header bg-slate-100 px-6 py-4 border-b border-slate-200 d-flex justify-content-between align-items-center"
124
+ },
125
+ "children": [
126
+ {
127
+ "tagName": "div",
128
+ "children": [
129
+ { "tagName": "h2", "textContent": "Item Inventory Table", "attributes": { "class": "h5 mb-0 fw-bold text-slate-800" } },
130
+ { "tagName": "p", "textContent": "Rendered via thead + tbody nested iterations", "attributes": { "class": "small text-muted mb-0" } }
131
+ ]
132
+ },
133
+ { "tagName": "span", "textContent": "${summary.totalItems} Items", "attributes": { "class": "badge bg-indigo-600 text-white font-mono px-3 py-1.5" } }
134
+ ]
135
+ },
136
+ {
137
+ "tagName": "div",
138
+ "attributes": { "class": "table-responsive" },
139
+ "children": [
140
+ {
141
+ "tagName": "table",
142
+ "attributes": { "class": "table table-hover table-striped align-middle mb-0" },
143
+ "children": [
144
+ {
145
+ "tagName": "thead",
146
+ "attributes": { "class": "table-light" },
147
+ "children": [
148
+ {
149
+ "tagName": "tr",
150
+ "children": [
151
+ { "tagName": "th", "textContent": "#", "attributes": { "class": "text-center py-3", "style": "width: 50px;" } },
152
+ {
153
+ "operation": "iterate",
154
+ "source": "columns",
155
+ "filter": { "isVisible": true },
156
+ "template": {
157
+ "tagName": "th",
158
+ "textContent": "${title}",
159
+ "attributes": { "class": "text-start py-3" }
160
+ }
161
+ }
162
+ ]
163
+ }
164
+ ]
165
+ },
166
+ {
167
+ "tagName": "tbody",
168
+ "children": [
169
+ {
170
+ "operation": "iterate",
171
+ "source": "rows",
172
+ "template": {
173
+ "tagName": "tr",
174
+ "children": [
175
+ { "tagName": "td", "textContent": "${$number}", "attributes": { "class": "text-center font-mono small text-muted py-2.5" } },
176
+ {
177
+ "operation": "iterate",
178
+ "source": "columns",
179
+ "filter": { "isVisible": true },
180
+ "template": {
181
+ "tagName": "td",
182
+ "textContent": "${value}",
183
+ "attributes": { "class": "text-start py-2.5" }
184
+ }
185
+ }
186
+ ]
187
+ }
188
+ }
189
+ ]
190
+ },
191
+ {
192
+ "tagName": "tfoot",
193
+ "attributes": { "class": "table-light border-top" },
194
+ "children": [
195
+ {
196
+ "tagName": "tr",
197
+ "children": [
198
+ {
199
+ "tagName": "td",
200
+ "textContent": "Summary: Total Items: ${summary.totalItems} | Average Rate: ?${summary.avgRate}",
201
+ "attributes": { "colspan": "6", "class": "small text-muted py-2.5 px-4 fw-semibold" }
202
+ }
203
+ ]
204
+ }
205
+ ]
206
+ }
207
+ ]
208
+ }
209
+ ]
210
+ }
211
+ ]
212
+ };
213
+
214
+ const SAMPLE_DATA = {
215
+ "columns": [
216
+ { "columnName": "Category", "title": "Category", "field": "Category", "isVisible": true },
217
+ { "columnName": "ItemName", "title": "Item Name", "field": "ItemName", "isVisible": true },
218
+ { "columnName": "Service", "title": "Service", "field": "Service", "isVisible": true },
219
+ { "columnName": "Rate", "title": "Rate", "field": "Rate", "isVisible": true },
220
+ { "columnName": "pk", "title": "pk", "field": "pk", "isVisible": false }
221
+ ],
222
+ "rows": [
223
+ { "pk": "item-001", "Category": "Beverages", "ItemName": "Green Tea", "Service": "Packaging", "Rate": 150 },
224
+ { "pk": "item-002", "Category": "Beverages", "ItemName": "Espresso Coffee", "Service": "Grinding", "Rate": 220 },
225
+ { "pk": "item-003", "Category": "Bakery", "ItemName": "Almond Cookies", "Service": "Baking", "Rate": 95 },
226
+ { "pk": "item-004", "Category": "Beverages", "ItemName": "Orange Juice", "Service": "Bottling", "Rate": 120 }
227
+ ],
228
+ "summary": { "totalItems": 4, "avgRate": 146.25 }
229
+ };
230
+
231
+ let currentTab = "struct";
232
+ let compiledSpecResult = null;
233
+
234
+ const codeDisplay = document.getElementById("code-display");
235
+ const tableContainer = document.getElementById("table-container");
236
+ const statusBadge = document.getElementById("status-badge");
237
+
238
+ function updateCodeDisplay() {
239
+ if (currentTab === "struct") {
240
+ codeDisplay.textContent = JSON.stringify(SAMPLE_STRUCTURE, null, 2);
241
+ codeDisplay.className = "text-xs text-teal-300 leading-relaxed";
242
+ } else if (currentTab === "data") {
243
+ codeDisplay.textContent = JSON.stringify(SAMPLE_DATA, null, 2);
244
+ codeDisplay.className = "text-xs text-emerald-300 leading-relaxed";
245
+ } else {
246
+ codeDisplay.textContent = JSON.stringify(compiledSpecResult, null, 2);
247
+ codeDisplay.className = "text-xs text-amber-300 leading-relaxed";
248
+ }
249
+ }
250
+
251
+ function runCompilation() {
252
+ try {
253
+ const t0 = performance.now();
254
+ compiledSpecResult = compile({ inStructure: SAMPLE_STRUCTURE, inData: SAMPLE_DATA });
255
+ const elapsed = (performance.now() - t0).toFixed(2);
256
+
257
+ tableContainer.innerHTML = "";
258
+ const dom = buildSpecElement({ inSpec: compiledSpecResult });
259
+ if (Array.isArray(dom)) tableContainer.append(...dom);
260
+ else if (dom) tableContainer.appendChild(dom);
261
+
262
+ statusBadge.textContent = `Compiled in ${elapsed}ms via CDN`;
263
+ updateCodeDisplay();
264
+ } catch (err) {
265
+ console.error(err);
266
+ statusBadge.textContent = `Error: ${err.message}`;
267
+ }
268
+ }
269
+
270
+ document.getElementById("tab-struct").addEventListener("click", (e) => {
271
+ currentTab = "struct";
272
+ resetTabButtons(e.target);
273
+ updateCodeDisplay();
274
+ });
275
+ document.getElementById("tab-data").addEventListener("click", (e) => {
276
+ currentTab = "data";
277
+ resetTabButtons(e.target);
278
+ updateCodeDisplay();
279
+ });
280
+ document.getElementById("tab-spec").addEventListener("click", (e) => {
281
+ currentTab = "spec";
282
+ resetTabButtons(e.target);
283
+ updateCodeDisplay();
284
+ });
285
+
286
+ function resetTabButtons(activeBtn) {
287
+ [document.getElementById("tab-struct"), document.getElementById("tab-data"), document.getElementById("tab-spec")].forEach(b => {
288
+ b.className = "px-3 py-1 rounded-lg bg-slate-200 text-slate-700 hover:bg-slate-300 transition";
289
+ });
290
+ activeBtn.className = "px-3 py-1 rounded-lg bg-emerald-600 text-white transition";
291
+ }
292
+
293
+ document.getElementById("re-render-btn").addEventListener("click", runCompilation);
294
+
295
+ document.getElementById("copy-btn").addEventListener("click", () => {
296
+ navigator.clipboard.writeText(codeDisplay.textContent).then(() => {
297
+ const btn = document.getElementById("copy-btn");
298
+ btn.textContent = "Copied!";
299
+ setTimeout(() => { btn.textContent = "Copy JSON"; }, 1500);
300
+ });
301
+ });
302
+
303
+ runCompilation();
304
+ </script>
305
+ </body>
306
+ </html>
package/index.js ADDED
@@ -0,0 +1,2 @@
1
+ export * from "./src/index.js";
2
+ export { default } from "./src/index.js";
package/package.json ADDED
@@ -0,0 +1,50 @@
1
+ {
2
+ "name": "json-to-spec",
3
+ "version": "19.1.0",
4
+ "description": "Pure JSON Specification Compiler with jsonToSpec namespace: (structure, data) -> Spec JSON",
5
+ "main": "src/v19/index.js",
6
+ "module": "./src/v19/index.js",
7
+ "files": [
8
+ "index.js",
9
+ "src",
10
+ "docs",
11
+ "samples",
12
+ "README.md"
13
+ ],
14
+ "directories": {
15
+ "doc": "docs"
16
+ },
17
+ "scripts": {
18
+ "dev": "vite",
19
+ "build": "vite build"
20
+ },
21
+ "repository": {
22
+ "type": "git",
23
+ "url": "git+https://github.com/keshavsoft/json-to-spec.git"
24
+ },
25
+ "keywords": [
26
+ "json-to-spec",
27
+ "json-to-dom",
28
+ "template",
29
+ "compiler",
30
+ "spec",
31
+ "declarative-ui"
32
+ ],
33
+ "author": "KeshavSoft",
34
+ "license": "MIT",
35
+ "type": "module",
36
+ "exports": {
37
+ ".": {
38
+ "import": "./src/v19/index.js",
39
+ "require": "./src/v19/index.js",
40
+ "default": "./src/v19/index.js"
41
+ }
42
+ },
43
+ "bugs": {
44
+ "url": "https://github.com/keshavsoft/json-to-spec/issues"
45
+ },
46
+ "homepage": "https://keshavsoft.github.io/json-to-spec/",
47
+ "devDependencies": {
48
+ "vite": "^6.2.0"
49
+ }
50
+ }
package/samples/dataList/index.html ADDED
@@ -0,0 +1,31 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1">
7
+ <title>v30 - Input Only</title>
8
+ <script>
9
+ if (!location.pathname.endsWith('/') && !location.pathname.endsWith('.html')) {
10
+ location.replace(location.pathname + '/' + location.search + location.hash);
11
+ }
12
+ </script>
13
+
14
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
15
+ integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
16
+
17
+ </head>
18
+
19
+ <body>
20
+ <main>
21
+ <h1 id="head1" style="margin-top:0;font-size:1.25rem">Simple Input (v30)</h1>
22
+ <input list="LedgerName" class="form-control"></input>
23
+ <input list="LedgerType" class="form-control"></input>
24
+ <div id="dom-render-container">
25
+ <div class="text-center py-5 text-muted">Loading input demo...</div>
26
+ </div>
27
+ </main>
28
+ <script type="module" src="./index.js"></script>
29
+ </body>
30
+
31
+ </html>
package/samples/dataList/index.js ADDED
@@ -0,0 +1,62 @@
1
+ import { default as compile } from "../../src/index.js";
2
+ // import * as domEngine from "./json-to-dom.v27.min.js";
3
+
4
+ import { specToDom } from "https://keshavsoft.github.io/json-to-dom/dist/v31/min.js";
5
+
6
+ const folder = "input";
7
+ let actionBinding = null;
8
+ let state = { structure: null, data: null, compiled: null };
9
+
10
+ const loadInput = async () => {
11
+ const [structure, data] = await Promise.all([
12
+ fetch(`./${folder}/structure.json`).then((r) => r.json()),
13
+ fetch(`./${folder}/data.json`).then((r) => r.json())
14
+ ]);
15
+
16
+ return {
17
+ structure,
18
+ data
19
+ };
20
+ };
21
+
22
+ const render = (structure, data) => {
23
+ const t0 = performance.now();
24
+
25
+ console.log("lllllllllll : ", state);
26
+
27
+
28
+ const specAsJsonToDom = compile(structure, data);
29
+
30
+ const compileTime = (performance.now() - t0).toFixed(2);
31
+ const compileBadge = document.getElementById("compile-time-badge");
32
+ if (compileBadge) compileBadge.textContent = `Compiled in ${compileTime}ms`;
33
+
34
+ const container = document.getElementById("dom-render-container");
35
+ if (container) container.innerHTML = "";
36
+
37
+ // console.log("222222222 : ", specAsJsonToDom);
38
+
39
+ specToDom({ spec: specAsJsonToDom, targetHtmlId: "dom-render-container" });
40
+ };
41
+
42
+ const start = async () => {
43
+ try {
44
+ const {
45
+ structure,
46
+ data
47
+ } = await loadInput();
48
+
49
+ render(structure, data);
50
+ } catch (err) {
51
+ const container = document.getElementById("dom-render-container");
52
+ if (container) container.innerHTML = `<div style="color:#b91c1c">Error: ${err.message}</div>`;
53
+ }
54
+ };
55
+
56
+ start();
57
+
58
+ const head1 = document.getElementById("head1");
59
+ const version = window?.ks?.["json-to-spec"]?.meta?.version;
60
+ if (version && head1) {
61
+ head1.innerHTML += ` - ${version}`;
62
+ };