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/pages/what.html ADDED
@@ -0,0 +1,105 @@
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>What is json-to-spec? | Pure JSON Specification Compiler</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
11
+ <style>
12
+ body { font-family: 'Inter', sans-serif; }
13
+ code, pre { font-family: 'JetBrains Mono', monospace; }
14
+ </style>
15
+ </head>
16
+ <body class="bg-slate-50 text-slate-800 min-h-screen flex flex-col antialiased">
17
+
18
+ <!-- Top Navbar -->
19
+ <header class="sticky top-0 z-50 bg-white/95 backdrop-blur border-b border-slate-200">
20
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
21
+ <div class="flex items-center space-x-3">
22
+ <a href="../index.html" class="flex items-center space-x-2 font-black text-lg text-slate-900 hover:text-indigo-600 transition">
23
+ <span class="w-8 h-8 rounded-lg bg-indigo-600 text-white flex items-center justify-center font-black text-sm">JS</span>
24
+ <span>json-to-spec</span>
25
+ </a>
26
+ <span class="text-xs bg-indigo-50 text-indigo-700 font-semibold px-2 py-0.5 rounded-full border border-indigo-200">What</span>
27
+ </div>
28
+ <nav class="flex items-center space-x-4 text-sm font-medium">
29
+ <a href="../index.html" class="text-slate-600 hover:text-slate-900 transition">Home</a>
30
+ <a href="./what.html" class="text-indigo-600 font-bold">What</a>
31
+ <a href="./why.html" class="text-slate-600 hover:text-slate-900 transition">Why</a>
32
+ <a href="./what-not.html" class="text-slate-600 hover:text-slate-900 transition">What Not</a>
33
+ <a href="./architecture.html" class="text-slate-600 hover:text-slate-900 transition">Architecture</a>
34
+ <a href="./how-it-works.html" class="text-slate-600 hover:text-slate-900 transition">How It Works</a>
35
+ <a href="../demo.html" class="px-3 py-1.5 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 shadow-sm transition">Playground</a>
36
+ </nav>
37
+ </div>
38
+ </header>
39
+
40
+ <main class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12 flex-1 w-full space-y-8">
41
+
42
+ <div class="space-y-3">
43
+ <span class="text-xs uppercase font-bold text-indigo-600 tracking-wider font-mono">Overview</span>
44
+ <h1 class="text-4xl font-black text-slate-900 tracking-tight">What is json-to-spec?</h1>
45
+ <p class="text-base text-slate-600 leading-relaxed">
46
+ A pure, zero-dependency JSON specification compiler that turns decoupled blueprints and data payloads into valid specifications ready for downstream DOM engines.
47
+ </p>
48
+ </div>
49
+
50
+ <div class="bg-white p-6 sm:p-8 rounded-2xl border border-slate-200 shadow-sm space-y-6">
51
+ <h2 class="text-xl font-bold text-slate-900">The 2-File Contract</h2>
52
+
53
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs">
54
+ <div class="p-4 rounded-xl bg-purple-50 border border-purple-200 space-y-2">
55
+ <span class="px-2 py-0.5 bg-purple-200 text-purple-800 rounded font-bold font-mono">Input A</span>
56
+ <h3 class="text-base font-bold text-purple-950">structure.json (HOW)</h3>
57
+ <p class="text-slate-600 leading-relaxed">
58
+ Pure UI blueprint. Defines HTML tag hierarchies (<code class="text-purple-700">tagName</code>), styling classes, attributes, and declarative loop points via <code class="text-purple-700">"operation": "iterate"</code>.
59
+ </p>
60
+ </div>
61
+
62
+ <div class="p-4 rounded-xl bg-emerald-50 border border-emerald-200 space-y-2">
63
+ <span class="px-2 py-0.5 bg-emerald-200 text-emerald-800 rounded font-bold font-mono">Input B</span>
64
+ <h3 class="text-base font-bold text-emerald-950">data.json (WHAT)</h3>
65
+ <p class="text-slate-600 leading-relaxed">
66
+ The single source of truth for all business values, column metadata, row records, summary calculations, and control visibility flags.
67
+ </p>
68
+ </div>
69
+ </div>
70
+
71
+ <div class="p-4 rounded-xl bg-slate-900 text-slate-100 font-mono text-xs overflow-x-auto leading-relaxed border border-slate-800">
72
+ <span class="text-slate-500">// Resulting Compilation Contract</span>
73
+ <span class="text-indigo-400">import</span> { compile } <span class="text-indigo-400">from</span> <span class="text-emerald-300">"https://keshavsoft.github.io/json-to-spec/dist/v1/min.js"</span>;
74
+
75
+ <span class="text-indigo-400">const</span> spec = compile({
76
+ inStructure: structureBlueprint,
77
+ inData: dataPayload
78
+ });
79
+
80
+ <span class="text-slate-500">// Returns standard spec JSON ready for json-to-dom</span>
81
+ </div>
82
+ </div>
83
+
84
+ <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
85
+ <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm space-y-2">
86
+ <h3 class="font-bold text-slate-800 text-sm">Deterministic & Pure</h3>
87
+ <p class="text-xs text-slate-600">No side effects, no mutation of inputs. Given the same inputs, outputs are identical every time.</p>
88
+ </div>
89
+ <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm space-y-2">
90
+ <h3 class="font-bold text-slate-800 text-sm">Environment Agnostic</h3>
91
+ <p class="text-xs text-slate-600">Runs in browsers, Node.js, Web Workers, and serverless edge functions with zero DOM requirements.</p>
92
+ </div>
93
+ <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm space-y-2">
94
+ <h3 class="font-bold text-slate-800 text-sm">Sub-Millisecond Fast</h3>
95
+ <p class="text-xs text-slate-600">Stamps out hundreds of rows and columns in 0.1ms to 0.4ms across complex structures.</p>
96
+ </div>
97
+ </div>
98
+
99
+ </main>
100
+
101
+ <footer class="mt-auto bg-white border-t border-slate-200 py-6 text-center text-xs text-slate-500">
102
+ json-to-spec &bull; KeshavSoft Declarative UI Architecture &bull; MIT License
103
+ </footer>
104
+ </body>
105
+ </html>
package/docs/pages/why.html ADDED
@@ -0,0 +1,88 @@
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>Why json-to-spec? | Rationale & Problem Solved</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
11
+ <style>
12
+ body { font-family: 'Inter', sans-serif; }
13
+ code, pre { font-family: 'JetBrains Mono', monospace; }
14
+ </style>
15
+ </head>
16
+ <body class="bg-slate-50 text-slate-800 min-h-screen flex flex-col antialiased">
17
+
18
+ <!-- Top Navbar -->
19
+ <header class="sticky top-0 z-50 bg-white/95 backdrop-blur border-b border-slate-200">
20
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
21
+ <div class="flex items-center space-x-3">
22
+ <a href="../index.html" class="flex items-center space-x-2 font-black text-lg text-slate-900 hover:text-indigo-600 transition">
23
+ <span class="w-8 h-8 rounded-lg bg-indigo-600 text-white flex items-center justify-center font-black text-sm">JS</span>
24
+ <span>json-to-spec</span>
25
+ </a>
26
+ <span class="text-xs bg-indigo-50 text-indigo-700 font-semibold px-2 py-0.5 rounded-full border border-indigo-200">Why</span>
27
+ </div>
28
+ <nav class="flex items-center space-x-4 text-sm font-medium">
29
+ <a href="../index.html" class="text-slate-600 hover:text-slate-900 transition">Home</a>
30
+ <a href="./what.html" class="text-slate-600 hover:text-slate-900 transition">What</a>
31
+ <a href="./why.html" class="text-indigo-600 font-bold">Why</a>
32
+ <a href="./what-not.html" class="text-slate-600 hover:text-slate-900 transition">What Not</a>
33
+ <a href="./architecture.html" class="text-slate-600 hover:text-slate-900 transition">Architecture</a>
34
+ <a href="./how-it-works.html" class="text-slate-600 hover:text-slate-900 transition">How It Works</a>
35
+ <a href="../demo.html" class="px-3 py-1.5 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 shadow-sm transition">Playground</a>
36
+ </nav>
37
+ </div>
38
+ </header>
39
+
40
+ <main class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12 flex-1 w-full space-y-8">
41
+
42
+ <div class="space-y-3">
43
+ <span class="text-xs uppercase font-bold text-indigo-600 tracking-wider font-mono">Rationale</span>
44
+ <h1 class="text-4xl font-black text-slate-900 tracking-tight">Why this compiler exists.</h1>
45
+ <p class="text-base text-slate-600 leading-relaxed">
46
+ In data-driven business applications, backend schemas and metadata already exist as JSON. Forcing them into template strings or heavy framework components causes synchronization friction and security headaches.
47
+ </p>
48
+ </div>
49
+
50
+ <div class="bg-white p-6 sm:p-8 rounded-2xl border border-slate-200 shadow-sm space-y-6">
51
+ <h2 class="text-xl font-bold text-slate-900">The 3 Traditional Approaches & Their Flaws</h2>
52
+
53
+ <div class="space-y-4 text-xs">
54
+ <div class="p-4 rounded-xl bg-slate-50 border border-slate-200 space-y-1">
55
+ <strong class="text-slate-900 text-sm block font-bold">1. Brittle String Templates (Handlebars, Mustache, template literals)</strong>
56
+ <p class="text-slate-600 leading-relaxed">
57
+ Fragile escaping, difficult nested iterations, and security risks with <code>innerHTML</code>. Custom helpers must be registered just to do simple checks or loops.
58
+ </p>
59
+ </div>
60
+
61
+ <div class="p-4 rounded-xl bg-slate-50 border border-slate-200 space-y-1">
62
+ <strong class="text-slate-900 text-sm block font-bold">2. Heavy Component Frameworks (React, Vue, Angular)</strong>
63
+ <p class="text-slate-600 leading-relaxed">
64
+ Huge bundle sizes and build toolchain requirements (Webpack, Babel) just to render data-driven forms or grids. Data schemas become tightly coupled with framework lifecycle hooks.
65
+ </p>
66
+ </div>
67
+
68
+ <div class="p-4 rounded-xl bg-slate-50 border border-slate-200 space-y-1">
69
+ <strong class="text-slate-900 text-sm block font-bold">3. Multi-File Orchestrator Synchronization Drift</strong>
70
+ <p class="text-slate-600 leading-relaxed">
71
+ Splitting code across instruction files, template files, and schema files creates synchronization drift. Changing one field name forces edits across 4 different files.
72
+ </p>
73
+ </div>
74
+ </div>
75
+
76
+ <div class="p-5 rounded-xl bg-indigo-50 border border-indigo-200 text-indigo-900 text-xs leading-relaxed">
77
+ <strong class="block text-sm font-bold mb-1">The json-to-spec Breakthrough:</strong>
78
+ Reduce everything to strictly <strong>2 files</strong>: <code class="text-indigo-800 font-bold">structure.json</code> (the visual blueprint) + <code class="text-indigo-800 font-bold">data.json</code> (the business payload). The compiler marries the two and emits clean, valid spec JSON in under 0.5ms.
79
+ </div>
80
+ </div>
81
+
82
+ </main>
83
+
84
+ <footer class="mt-auto bg-white border-t border-slate-200 py-6 text-center text-xs text-slate-500">
85
+ json-to-spec &bull; KeshavSoft Declarative UI Architecture &bull; MIT License
86
+ </footer>
87
+ </body>
88
+ </html>
package/docs/samples/form.html ADDED
@@ -0,0 +1,265 @@
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>Form 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-indigo-600 transition">
24
+ <span class="w-8 h-8 rounded-lg bg-indigo-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-indigo-50 text-indigo-700 font-semibold px-2.5 py-0.5 rounded-full border border-indigo-200">Form 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-indigo-600 font-semibold">&larr; All Samples</a>
31
+ <a href="table.html" class="text-slate-600 hover:text-slate-900 transition">Table Sample</a>
32
+ <a href="../demo.html" class="px-3 py-1.5 bg-indigo-600 text-white rounded-md hover:bg-indigo-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-indigo-600 font-mono">Sample 01 &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 via CDN...
46
+ </span>
47
+ </div>
48
+ <h1 class="text-2xl font-black text-slate-900">Dynamic Form Engine</h1>
49
+ <p class="text-xs text-slate-600 leading-relaxed max-w-3xl">
50
+ Takes a declarative form shell blueprint with <code class="text-indigo-600">operation: "iterate"</code> on the columns metadata, excludes hidden keys (<code class="text-indigo-600">isVisible: false</code>), binds values, and renders standard form controls via <code class="text-indigo-600">json-to-dom</code>.
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 DOM Output
59
+ </span>
60
+ <button id="re-render-btn" class="px-3 py-1 text-xs font-semibold bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">
61
+ ⚡ Re-Compile & Render
62
+ </button>
63
+ </div>
64
+ <div class="p-8 bg-slate-100/50 flex justify-center">
65
+ <div id="form-container" class="w-full max-w-xl">
66
+ <!-- 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-indigo-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-purple-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-xl mx-auto"
118
+ },
119
+ "children": [
120
+ {
121
+ "tagName": "div",
122
+ "attributes": { "class": "card-header bg-slate-100 px-6 py-4 border-b border-slate-200" },
123
+ "children": [
124
+ { "tagName": "h2", "textContent": "Item Master Form", "attributes": { "class": "h5 mb-0 fw-bold text-slate-800" } },
125
+ { "tagName": "p", "textContent": "Dynamic rows generated by node-level iteration operation", "attributes": { "class": "small text-muted mb-0" } }
126
+ ]
127
+ },
128
+ {
129
+ "tagName": "div",
130
+ "attributes": { "id": "form-body", "class": "card-body p-6 space-y-3" },
131
+ "children": [
132
+ {
133
+ "operation": "iterate",
134
+ "source": "columns",
135
+ "filter": { "isVisible": true },
136
+ "template": {
137
+ "tagName": "div",
138
+ "attributes": { "class": "row align-items-center g-2 mb-3" },
139
+ "children": [
140
+ {
141
+ "tagName": "label",
142
+ "textContent": "${title}",
143
+ "attributes": { "class": "col-sm-4 col-form-label text-sm-end mb-0 fw-semibold text-secondary small" }
144
+ },
145
+ {
146
+ "tagName": "div",
147
+ "attributes": { "class": "col-sm-8" },
148
+ "children": [
149
+ {
150
+ "tagName": "input",
151
+ "attributes": {
152
+ "type": "text",
153
+ "name": "${field}",
154
+ "placeholder": "Enter ${title}...",
155
+ "class": "form-control"
156
+ }
157
+ }
158
+ ]
159
+ }
160
+ ]
161
+ }
162
+ }
163
+ ]
164
+ },
165
+ {
166
+ "tagName": "div",
167
+ "attributes": { "class": "card-footer bg-slate-50 px-6 py-3 border-t border-slate-200 d-flex justify-content-end gap-2" },
168
+ "children": [
169
+ { "tagName": "button", "textContent": "Cancel", "attributes": { "type": "button", "class": "btn btn-outline-secondary btn-sm" } },
170
+ { "tagName": "button", "textContent": "Save Item", "attributes": { "type": "submit", "class": "btn btn-primary btn-sm" } }
171
+ ]
172
+ }
173
+ ]
174
+ };
175
+
176
+ const SAMPLE_DATA = {
177
+ "columns": [
178
+ { "columnName": "Category", "title": "Category", "field": "Category", "value": "Beverages", "isVisible": true },
179
+ { "columnName": "ItemName", "title": "Item Name", "field": "ItemName", "value": "Green Tea", "isVisible": true },
180
+ { "columnName": "Service", "title": "Service", "field": "Service", "value": "Packaging", "isVisible": true },
181
+ { "columnName": "Rate", "title": "Rate", "field": "Rate", "value": 150, "isVisible": true },
182
+ { "columnName": "pk", "title": "pk", "field": "pk", "isVisible": false }
183
+ ],
184
+ "Category": "Beverages",
185
+ "ItemName": "Green Tea",
186
+ "Service": "Packaging",
187
+ "Rate": 150
188
+ };
189
+
190
+ let currentTab = "struct";
191
+ let compiledSpecResult = null;
192
+
193
+ const codeDisplay = document.getElementById("code-display");
194
+ const formContainer = document.getElementById("form-container");
195
+ const statusBadge = document.getElementById("status-badge");
196
+
197
+ function updateCodeDisplay() {
198
+ if (currentTab === "struct") {
199
+ codeDisplay.textContent = JSON.stringify(SAMPLE_STRUCTURE, null, 2);
200
+ codeDisplay.className = "text-xs text-purple-300 leading-relaxed";
201
+ } else if (currentTab === "data") {
202
+ codeDisplay.textContent = JSON.stringify(SAMPLE_DATA, null, 2);
203
+ codeDisplay.className = "text-xs text-emerald-300 leading-relaxed";
204
+ } else {
205
+ codeDisplay.textContent = JSON.stringify(compiledSpecResult, null, 2);
206
+ codeDisplay.className = "text-xs text-amber-300 leading-relaxed";
207
+ }
208
+ }
209
+
210
+ function runCompilation() {
211
+ try {
212
+ const t0 = performance.now();
213
+ compiledSpecResult = compile({ inStructure: SAMPLE_STRUCTURE, inData: SAMPLE_DATA });
214
+ const elapsed = (performance.now() - t0).toFixed(2);
215
+
216
+ formContainer.innerHTML = "";
217
+ const dom = buildSpecElement({ inSpec: compiledSpecResult });
218
+ if (Array.isArray(dom)) formContainer.append(...dom);
219
+ else if (dom) formContainer.appendChild(dom);
220
+
221
+ statusBadge.textContent = `Compiled in ${elapsed}ms via CDN`;
222
+ updateCodeDisplay();
223
+ } catch (err) {
224
+ console.error(err);
225
+ statusBadge.textContent = `Error: ${err.message}`;
226
+ }
227
+ }
228
+
229
+ document.getElementById("tab-struct").addEventListener("click", (e) => {
230
+ currentTab = "struct";
231
+ resetTabButtons(e.target);
232
+ updateCodeDisplay();
233
+ });
234
+ document.getElementById("tab-data").addEventListener("click", (e) => {
235
+ currentTab = "data";
236
+ resetTabButtons(e.target);
237
+ updateCodeDisplay();
238
+ });
239
+ document.getElementById("tab-spec").addEventListener("click", (e) => {
240
+ currentTab = "spec";
241
+ resetTabButtons(e.target);
242
+ updateCodeDisplay();
243
+ });
244
+
245
+ function resetTabButtons(activeBtn) {
246
+ [document.getElementById("tab-struct"), document.getElementById("tab-data"), document.getElementById("tab-spec")].forEach(b => {
247
+ b.className = "px-3 py-1 rounded-lg bg-slate-200 text-slate-700 hover:bg-slate-300 transition";
248
+ });
249
+ activeBtn.className = "px-3 py-1 rounded-lg bg-indigo-600 text-white transition";
250
+ }
251
+
252
+ document.getElementById("re-render-btn").addEventListener("click", runCompilation);
253
+
254
+ document.getElementById("copy-btn").addEventListener("click", () => {
255
+ navigator.clipboard.writeText(codeDisplay.textContent).then(() => {
256
+ const btn = document.getElementById("copy-btn");
257
+ btn.textContent = "Copied!";
258
+ setTimeout(() => { btn.textContent = "Copy JSON"; }, 1500);
259
+ });
260
+ });
261
+
262
+ runCompilation();
263
+ </script>
264
+ </body>
265
+ </html>
package/docs/samples/index.html ADDED
@@ -0,0 +1,112 @@
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>Samples Library | json-to-spec</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <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">
11
+ <style>
12
+ body { font-family: 'Inter', sans-serif; }
13
+ code { font-family: 'JetBrains Mono', monospace; }
14
+ </style>
15
+ </head>
16
+ <body class="bg-slate-50 text-slate-800 min-h-screen flex flex-col">
17
+ <!-- Navbar -->
18
+ <header class="sticky top-0 z-50 bg-white/90 backdrop-blur border-b border-slate-200">
19
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
20
+ <div class="flex items-center space-x-3">
21
+ <a href="../index.html" class="flex items-center space-x-2 font-black text-lg text-slate-900 hover:text-indigo-600 transition">
22
+ <span class="w-8 h-8 rounded-lg bg-indigo-600 text-white flex items-center justify-center font-black text-sm">JS</span>
23
+ <span>json-to-spec</span>
24
+ </a>
25
+ <span class="text-xs bg-indigo-50 text-indigo-700 font-semibold px-2 py-0.5 rounded-full border border-indigo-200">Samples Library</span>
26
+ </div>
27
+ <nav class="flex items-center space-x-4 text-sm font-medium">
28
+ <a href="../index.html" class="text-slate-600 hover:text-slate-900 transition">Docs Hub</a>
29
+ <a href="../demo.html" class="text-slate-600 hover:text-indigo-600 transition">Playground</a>
30
+ <a href="form.html" class="text-slate-600 hover:text-indigo-600 transition">Form Sample</a>
31
+ <a href="table.html" class="text-slate-600 hover:text-indigo-600 transition">Table Sample</a>
32
+ <a href="../demo.html" class="px-3 py-1.5 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 shadow-sm transition">Playground</a>
33
+ </nav>
34
+ </div>
35
+ </header>
36
+
37
+ <!-- Hero Header -->
38
+ <section class="bg-gradient-to-b from-white to-slate-50 border-b border-slate-200 py-12 px-4 sm:px-6 lg:px-8">
39
+ <div class="max-w-4xl mx-auto text-center space-y-3">
40
+ <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-50 border border-indigo-200 text-indigo-700 text-xs font-mono font-semibold">
41
+ <span>CDN Samples &bull; Zero Server Dependencies</span>
42
+ </div>
43
+ <h1 class="text-3xl sm:text-4xl font-black text-slate-900 tracking-tight">
44
+ Interactive CDN Samples & Examples
45
+ </h1>
46
+ <p class="text-sm text-slate-600 max-w-2xl mx-auto">
47
+ Explore real-world implementations demonstrating the 2-file compilation pipeline. All samples load the latest compiler bundle from GitHub Pages CDN.
48
+ </p>
49
+ </div>
50
+ </section>
51
+
52
+ <!-- Samples Grid -->
53
+ <main class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-10 flex-1 w-full">
54
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
55
+
56
+ <!-- Sample 1 -->
57
+ <a href="form.html" class="group bg-white p-6 rounded-2xl border border-slate-200 hover:border-indigo-500 hover:shadow-lg transition flex flex-col justify-between">
58
+ <div>
59
+ <div class="flex items-center justify-between mb-4">
60
+ <div class="w-12 h-12 rounded-xl bg-indigo-50 text-indigo-600 flex items-center justify-center text-xl font-bold group-hover:bg-indigo-600 group-hover:text-white transition">
61
+ 📝
62
+ </div>
63
+ <span class="px-2.5 py-1 text-xs font-mono rounded-full bg-indigo-50 text-indigo-700 border border-indigo-200">
64
+ CDN Sample 01
65
+ </span>
66
+ </div>
67
+ <h2 class="text-lg font-bold text-slate-900 group-hover:text-indigo-600 transition mb-2">
68
+ Dynamic Form Engine Sample
69
+ </h2>
70
+ <p class="text-xs text-slate-600 leading-relaxed mb-4">
71
+ Demonstrates dynamic row generation from <code class="text-indigo-600">operation: "iterate"</code> on columns metadata, excluding hidden keys (<code class="text-indigo-600">isVisible: false</code>), binding values, and rendering live Bootstrap form controls.
72
+ </p>
73
+ </div>
74
+ <div class="pt-4 border-t border-slate-100 flex items-center justify-between text-xs text-slate-500 font-mono">
75
+ <span>Source: structure.json + data.json</span>
76
+ <span class="text-indigo-600 font-bold group-hover:translate-x-1 transition">&rarr; Open</span>
77
+ </div>
78
+ </a>
79
+
80
+ <!-- Sample 2 -->
81
+ <a href="table.html" class="group bg-white p-6 rounded-2xl border border-slate-200 hover:border-emerald-500 hover:shadow-lg transition flex flex-col justify-between">
82
+ <div>
83
+ <div class="flex items-center justify-between mb-4">
84
+ <div class="w-12 h-12 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center text-xl font-bold group-hover:bg-emerald-600 group-hover:text-white transition">
85
+ 📊
86
+ </div>
87
+ <span class="px-2.5 py-1 text-xs font-mono rounded-full bg-emerald-50 text-emerald-700 border border-emerald-200">
88
+ CDN Sample 02
89
+ </span>
90
+ </div>
91
+ <h2 class="text-lg font-bold text-slate-900 group-hover:text-emerald-600 transition mb-2">
92
+ Data Table / Grid Engine Sample
93
+ </h2>
94
+ <p class="text-xs text-slate-600 leading-relaxed mb-4">
95
+ Demonstrates nested iterations: <code class="text-emerald-600">thead</code> loops over columns, <code class="text-emerald-600">tbody</code> loops over rows &times; columns to render cell values, and <code class="text-emerald-600">tfoot</code> computes aggregations.
96
+ </p>
97
+ </div>
98
+ <div class="pt-4 border-t border-slate-100 flex items-center justify-between text-xs text-slate-500 font-mono">
99
+ <span>Source: nested thead/tbody</span>
100
+ <span class="text-emerald-600 font-bold group-hover:translate-x-1 transition">&rarr; Open</span>
101
+ </div>
102
+ </a>
103
+
104
+ </div>
105
+ </main>
106
+
107
+ <!-- Footer -->
108
+ <footer class="mt-auto bg-white border-t border-slate-200 py-6 text-center text-xs text-slate-500">
109
+ json-to-spec &bull; KeshavSoft &bull; MIT License
110
+ </footer>
111
+ </body>
112
+ </html>