json-renderers 1.14.1 → 1.16.1
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.
- package/docs/aboutSelect.html +964 -0
- package/docs/aboutTable.html +12 -0
- package/docs/dist/min.js +1510 -1063
- package/docs/dist/v14/min.js +1063 -1063
- package/docs/dist/v15/min.js +1510 -0
- package/docs/index.html +283 -79
- package/docs/select.html +33 -11
- package/docs/table/cdn.html +634 -0
- package/docs/table/index.html +607 -0
- package/docs/table/windowKs.html +332 -0
- package/docs/table/windowKsV1.html +647 -0
- package/docs/table.html +34 -11
- package/package.json +1 -1
- package/src/index.js +2 -2
- package/src/v15/buildSpec/index.js +39 -0
- package/src/v15/common/deriveColumnsFromData.js +20 -0
- package/src/v15/guard.js +35 -0
- package/src/v15/index.js +70 -0
- package/src/v15/meta.js +6 -0
- package/src/v15/registerGlobal.js +14 -0
- package/src/v16/buildSpec/index.js +40 -0
- package/src/v16/common/deriveColumnsFromData.js +20 -0
- package/src/v16/guard.js +38 -0
- package/src/v16/index.js +110 -0
- package/src/v16/meta.js +6 -0
- package/src/v16/registerGlobal.js +27 -0
|
@@ -0,0 +1,607 @@
|
|
|
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.0" />
|
|
7
|
+
<title>HTML Table Process & Architecture | json-renderers</title>
|
|
8
|
+
<meta name="description"
|
|
9
|
+
content="Learn the internal process of rendering HTML tables from JSON data using json-renderers, json-renderers-build, and @keshavsoft/json-to-tag." />
|
|
10
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
11
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
12
|
+
<link
|
|
13
|
+
href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700;800&display=swap"
|
|
14
|
+
rel="stylesheet" />
|
|
15
|
+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
|
|
16
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
17
|
+
<script>
|
|
18
|
+
tailwind.config = {
|
|
19
|
+
theme: {
|
|
20
|
+
extend: {
|
|
21
|
+
colors: {
|
|
22
|
+
brand: {
|
|
23
|
+
50: '#f0fdf4',
|
|
24
|
+
100: '#dcfce7',
|
|
25
|
+
500: '#10b981',
|
|
26
|
+
600: '#059669',
|
|
27
|
+
700: '#047857',
|
|
28
|
+
800: '#065f46',
|
|
29
|
+
900: '#064e3b'
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
fontFamily: {
|
|
33
|
+
sans: ['Inter', 'sans-serif'],
|
|
34
|
+
mono: ['Fira Code', 'monospace']
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
</script>
|
|
40
|
+
<style>
|
|
41
|
+
body {
|
|
42
|
+
font-family: 'Inter', sans-serif;
|
|
43
|
+
background-color: #ffffff;
|
|
44
|
+
color: #1e293b;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
pre,
|
|
48
|
+
code {
|
|
49
|
+
font-family: 'Fira Code', monospace;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.custom-scrollbar::-webkit-scrollbar {
|
|
53
|
+
width: 6px;
|
|
54
|
+
height: 6px;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.custom-scrollbar::-webkit-scrollbar-track {
|
|
58
|
+
background: #f1f5f9;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
62
|
+
background: #cbd5e1;
|
|
63
|
+
border-radius: 4px;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
67
|
+
background: #94a3b8;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.step-badge {
|
|
71
|
+
width: 2.25rem;
|
|
72
|
+
height: 2.25rem;
|
|
73
|
+
border-radius: 9999px;
|
|
74
|
+
display: inline-flex;
|
|
75
|
+
align-items: center;
|
|
76
|
+
justify-content: center;
|
|
77
|
+
font-weight: 700;
|
|
78
|
+
font-size: 0.875rem;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/* Style bootstrap table inside our light container */
|
|
82
|
+
#live-process-output table {
|
|
83
|
+
width: 100%;
|
|
84
|
+
margin-bottom: 0;
|
|
85
|
+
color: #1e293b;
|
|
86
|
+
border-collapse: separate;
|
|
87
|
+
border-spacing: 0;
|
|
88
|
+
border-radius: 0.75rem;
|
|
89
|
+
overflow: hidden;
|
|
90
|
+
border: 1px solid #e2e8f0;
|
|
91
|
+
background-color: #ffffff;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
#live-process-output th {
|
|
95
|
+
background: #f8fafc;
|
|
96
|
+
color: #0f172a;
|
|
97
|
+
font-weight: 600;
|
|
98
|
+
padding: 0.75rem 1rem;
|
|
99
|
+
border-bottom: 2px solid #e2e8f0;
|
|
100
|
+
text-transform: capitalize;
|
|
101
|
+
font-size: 0.875rem;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
#live-process-output td {
|
|
105
|
+
padding: 0.65rem 1rem;
|
|
106
|
+
border-bottom: 1px solid #f1f5f9;
|
|
107
|
+
background: #ffffff;
|
|
108
|
+
font-size: 0.875rem;
|
|
109
|
+
color: #334155;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
#live-process-output tr:hover td {
|
|
113
|
+
background: #f8fafc;
|
|
114
|
+
}
|
|
115
|
+
</style>
|
|
116
|
+
</head>
|
|
117
|
+
|
|
118
|
+
<body
|
|
119
|
+
class="bg-white text-slate-800 min-h-screen antialiased flex flex-col font-sans selection:bg-emerald-500 selection:text-white">
|
|
120
|
+
|
|
121
|
+
<!-- Top Sticky Navigation Bar -->
|
|
122
|
+
<header class="border-b border-slate-200 bg-white/95 backdrop-blur sticky top-0 z-50 shadow-sm">
|
|
123
|
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 py-3.5 flex items-center justify-between gap-4">
|
|
124
|
+
<div class="flex items-center gap-3">
|
|
125
|
+
<a href="../index.html"
|
|
126
|
+
class="w-10 h-10 rounded-xl bg-gradient-to-br from-emerald-500 via-teal-600 to-indigo-600 flex items-center justify-center font-bold text-white shadow-md text-lg hover:scale-105 transition">
|
|
127
|
+
📊
|
|
128
|
+
</a>
|
|
129
|
+
<div>
|
|
130
|
+
<div class="flex items-center gap-2">
|
|
131
|
+
<a href="../index.html"
|
|
132
|
+
class="text-base font-bold text-slate-900 tracking-tight hover:text-emerald-600 transition">json-renderers</a>
|
|
133
|
+
<span
|
|
134
|
+
class="px-2 py-0.5 text-xs bg-emerald-100 text-emerald-800 rounded-full border border-emerald-200 font-mono font-medium">Table
|
|
135
|
+
Documentation</span>
|
|
136
|
+
</div>
|
|
137
|
+
<p class="text-xs text-slate-500">HTML Table Generation Process & Architecture</p>
|
|
138
|
+
</div>
|
|
139
|
+
</div>
|
|
140
|
+
|
|
141
|
+
<nav class="flex items-center gap-1.5 sm:gap-2 text-sm">
|
|
142
|
+
<a href="../index.html"
|
|
143
|
+
class="px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 font-medium transition text-xs sm:text-sm">Home</a>
|
|
144
|
+
<a href="index.html"
|
|
145
|
+
class="px-3 py-1.5 rounded-lg bg-emerald-600 text-white font-semibold shadow-sm transition text-xs sm:text-sm">HTML
|
|
146
|
+
Process</a>
|
|
147
|
+
<a href="cdn.html"
|
|
148
|
+
class="px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 font-medium transition text-xs sm:text-sm">Using
|
|
149
|
+
CDN</a>
|
|
150
|
+
<a href="windowKs.html"
|
|
151
|
+
class="px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 font-medium transition text-xs sm:text-sm">window.ks</a>
|
|
152
|
+
<a href="../aboutSelect.html"
|
|
153
|
+
class="px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 font-medium transition hidden md:inline text-xs sm:text-sm">About
|
|
154
|
+
Select</a>
|
|
155
|
+
<a href="https://github.com/keshavsoft/json-renderers" target="_blank" rel="noopener noreferrer"
|
|
156
|
+
class="px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 border border-slate-200 font-medium transition hidden lg:inline-flex items-center gap-1.5 text-xs sm:text-sm">
|
|
157
|
+
<svg class="w-4 h-4 fill-current text-slate-700" viewBox="0 0 24 24">
|
|
158
|
+
<path
|
|
159
|
+
d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
|
|
160
|
+
</svg>
|
|
161
|
+
<span>GitHub</span>
|
|
162
|
+
</a>
|
|
163
|
+
</nav>
|
|
164
|
+
</div>
|
|
165
|
+
</header>
|
|
166
|
+
|
|
167
|
+
<main class="flex-1 max-w-7xl w-full mx-auto p-4 sm:p-6 lg:p-8 space-y-10">
|
|
168
|
+
|
|
169
|
+
<!-- Hero Section -->
|
|
170
|
+
<section
|
|
171
|
+
class="bg-gradient-to-br from-slate-50 via-emerald-50/40 to-teal-50/30 rounded-3xl p-6 sm:p-10 border border-slate-200 shadow-sm relative overflow-hidden">
|
|
172
|
+
<div class="relative z-10 space-y-5">
|
|
173
|
+
<div
|
|
174
|
+
class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-100 border border-emerald-200 text-xs text-emerald-800 font-mono font-medium">
|
|
175
|
+
<span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
|
|
176
|
+
HTML Rendering Pipeline • Mental Model
|
|
177
|
+
</div>
|
|
178
|
+
|
|
179
|
+
<h1 class="text-3xl sm:text-5xl font-extrabold text-slate-900 tracking-tight leading-tight">
|
|
180
|
+
The Process of Rendering HTML Tables <br class="hidden sm:inline" />
|
|
181
|
+
<span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 via-teal-600 to-indigo-600">From
|
|
182
|
+
Raw JSON to Browser DOM</span>
|
|
183
|
+
</h1>
|
|
184
|
+
|
|
185
|
+
<p class="max-w-4xl text-slate-600 text-base sm:text-lg leading-relaxed">
|
|
186
|
+
Understanding the inner mechanics of how <code
|
|
187
|
+
class="text-emerald-700 bg-emerald-50 px-1.5 py-0.5 rounded font-mono font-semibold">json-renderers</code>
|
|
188
|
+
orchestrates data parsing, JSON blueprint generation via <code
|
|
189
|
+
class="text-teal-700 bg-teal-50 px-1.5 py-0.5 rounded font-mono font-semibold">json-renderers-build</code>,
|
|
190
|
+
and tag construction via <code
|
|
191
|
+
class="text-indigo-700 bg-indigo-50 px-1.5 py-0.5 rounded font-mono font-semibold">@keshavsoft/json-to-tag</code>.
|
|
192
|
+
</p>
|
|
193
|
+
|
|
194
|
+
|
|
195
|
+
</div>
|
|
196
|
+
</section>
|
|
197
|
+
|
|
198
|
+
<!-- SHORT NOTE SECTION -->
|
|
199
|
+
<section id="short-note"
|
|
200
|
+
class="bg-gradient-to-r from-emerald-50 via-teal-50 to-indigo-50 rounded-2xl p-6 sm:p-8 border-2 border-emerald-200 shadow-sm space-y-4">
|
|
201
|
+
<div class="flex items-center gap-3">
|
|
202
|
+
<span class="text-2xl">📝</span>
|
|
203
|
+
<div>
|
|
204
|
+
<span class="text-xs uppercase font-mono tracking-wider text-emerald-800 font-bold">Executive Summary</span>
|
|
205
|
+
<h2 class="text-xl sm:text-2xl font-bold text-slate-900 tracking-tight">Short Note: How the HTML Process Works
|
|
206
|
+
</h2>
|
|
207
|
+
</div>
|
|
208
|
+
</div>
|
|
209
|
+
|
|
210
|
+
<div class="text-slate-700 text-sm sm:text-base leading-relaxed space-y-3">
|
|
211
|
+
<p>
|
|
212
|
+
In traditional frontend development, rendering an HTML table from dynamic data requires manual <code
|
|
213
|
+
class="text-slate-800 bg-white px-1.5 py-0.5 rounded border border-slate-200 font-mono text-xs"><tr></code>
|
|
214
|
+
and <code
|
|
215
|
+
class="text-slate-800 bg-white px-1.5 py-0.5 rounded border border-slate-200 font-mono text-xs"><td></code>
|
|
216
|
+
loops, repetitive string concatenation, or hazardous <code
|
|
217
|
+
class="text-rose-700 bg-white px-1.5 py-0.5 rounded border border-slate-200 font-mono text-xs">innerHTML</code>
|
|
218
|
+
assignments.
|
|
219
|
+
</p>
|
|
220
|
+
<p>
|
|
221
|
+
<strong>json-renderers</strong> abstracts this entirely into a clean, 4-stage pipeline:
|
|
222
|
+
</p>
|
|
223
|
+
<div class="grid grid-cols-1 md:grid-cols-4 gap-3 pt-2">
|
|
224
|
+
<div class="bg-white p-3.5 rounded-xl border border-emerald-200 shadow-xs">
|
|
225
|
+
<div class="text-xs font-mono font-bold text-emerald-700 mb-1">1. Business JSON</div>
|
|
226
|
+
<p class="text-xs text-slate-600">You pass an array of raw JavaScript objects (from API or static file) and
|
|
227
|
+
chosen columns.</p>
|
|
228
|
+
</div>
|
|
229
|
+
<div class="bg-white p-3.5 rounded-xl border border-teal-200 shadow-xs">
|
|
230
|
+
<div class="text-xs font-mono font-bold text-teal-700 mb-1">2. Runtime Call</div>
|
|
231
|
+
<p class="text-xs text-slate-600"><code class="font-mono text-[11px] text-teal-800">render({...})</code>
|
|
232
|
+
acts as orchestrator and initiates the transformation.</p>
|
|
233
|
+
</div>
|
|
234
|
+
<div class="bg-white p-3.5 rounded-xl border border-indigo-200 shadow-xs">
|
|
235
|
+
<div class="text-xs font-mono font-bold text-indigo-700 mb-1">3. Spec to DOM</div>
|
|
236
|
+
<p class="text-xs text-slate-600"><code class="font-mono text-[11px] text-indigo-800">json-to-tag</code>
|
|
237
|
+
transforms the JSON schema into native browser table elements.</p>
|
|
238
|
+
</div>
|
|
239
|
+
<div class="bg-white p-3.5 rounded-xl border border-cyan-200 shadow-xs">
|
|
240
|
+
<div class="text-xs font-mono font-bold text-cyan-700 mb-1">4. DOM Mount</div>
|
|
241
|
+
<p class="text-xs text-slate-600">The browser mounts the live table directly into your target container with
|
|
242
|
+
zero reload.</p>
|
|
243
|
+
</div>
|
|
244
|
+
</div>
|
|
245
|
+
<p class="text-xs sm:text-sm text-slate-600 bg-white p-3.5 rounded-xl border border-slate-200 mt-2">
|
|
246
|
+
💡 <strong>Key Takeaway:</strong> You never write loop code. The library converts your data specification into
|
|
247
|
+
an abstract syntax tree and converts that tree into true HTML nodes using standard DOM APIs.
|
|
248
|
+
</p>
|
|
249
|
+
</div>
|
|
250
|
+
</section>
|
|
251
|
+
|
|
252
|
+
<!-- 4 PROCESS STAGES DEEP DIVE -->
|
|
253
|
+
<section id="pipeline-steps" class="space-y-6">
|
|
254
|
+
<div class="border-b border-slate-200 pb-4">
|
|
255
|
+
<span class="text-xs uppercase font-mono tracking-wider text-emerald-700 font-bold">Deep Dive</span>
|
|
256
|
+
<h2 class="text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight mt-1">The 4 Process Stages of HTML Table
|
|
257
|
+
Generation</h2>
|
|
258
|
+
<p class="text-slate-600 text-sm mt-1">What happens behind the scenes from the moment you call render to when
|
|
259
|
+
pixels draw on screen.</p>
|
|
260
|
+
</div>
|
|
261
|
+
|
|
262
|
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
|
|
263
|
+
|
|
264
|
+
<!-- Stage 1 -->
|
|
265
|
+
<div
|
|
266
|
+
class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm flex flex-col justify-between hover:border-emerald-400 hover:shadow-md transition">
|
|
267
|
+
<div class="space-y-3">
|
|
268
|
+
<div class="flex items-center justify-between">
|
|
269
|
+
<span class="step-badge bg-emerald-100 text-emerald-800 border border-emerald-300">1</span>
|
|
270
|
+
<span class="text-xs font-mono text-slate-500 font-medium">Input Phase</span>
|
|
271
|
+
</div>
|
|
272
|
+
<h3 class="font-bold text-slate-900 text-base">Raw Business Data</h3>
|
|
273
|
+
<p class="text-xs text-slate-600 leading-relaxed">
|
|
274
|
+
Your application supplies data as plain JSON records:
|
|
275
|
+
</p>
|
|
276
|
+
<pre class="bg-slate-950 p-3 rounded-xl text-[11px] text-emerald-300 font-mono overflow-x-auto"><code>[
|
|
277
|
+
{ "itemName": "Steel Wire", "baseUnit": "kgs" },
|
|
278
|
+
{ "itemName": "Alloy Rod", "baseUnit": "pcs" }
|
|
279
|
+
]</code></pre>
|
|
280
|
+
</div>
|
|
281
|
+
<div class="text-[11px] font-mono text-emerald-700 pt-3 border-t border-slate-100 mt-3 font-semibold">
|
|
282
|
+
Input Data →
|
|
283
|
+
</div>
|
|
284
|
+
</div>
|
|
285
|
+
|
|
286
|
+
<!-- Stage 2 -->
|
|
287
|
+
<div
|
|
288
|
+
class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm flex flex-col justify-between hover:border-teal-400 hover:shadow-md transition">
|
|
289
|
+
<div class="space-y-3">
|
|
290
|
+
<div class="flex items-center justify-between">
|
|
291
|
+
<span class="step-badge bg-teal-100 text-teal-800 border border-teal-300">2</span>
|
|
292
|
+
<span class="text-xs font-mono text-slate-500 font-medium">Invocation</span>
|
|
293
|
+
</div>
|
|
294
|
+
<h3 class="font-bold text-slate-900 text-base">Runtime Orchestration</h3>
|
|
295
|
+
<p class="text-xs text-slate-600 leading-relaxed">
|
|
296
|
+
You invoke the renderer with column definitions and container id:
|
|
297
|
+
</p>
|
|
298
|
+
<pre class="bg-slate-950 p-3 rounded-xl text-[11px] text-teal-300 font-mono overflow-x-auto"><code>render({
|
|
299
|
+
type: "table",
|
|
300
|
+
data: data,
|
|
301
|
+
columns: ["itemName", "baseUnit"],
|
|
302
|
+
targetHtmlId: "dom-container"
|
|
303
|
+
});</code></pre>
|
|
304
|
+
</div>
|
|
305
|
+
<div class="text-[11px] font-mono text-teal-700 pt-3 border-t border-slate-100 mt-3 font-semibold">
|
|
306
|
+
Orchestrator →
|
|
307
|
+
</div>
|
|
308
|
+
</div>
|
|
309
|
+
|
|
310
|
+
<!-- Stage 3 -->
|
|
311
|
+
<div
|
|
312
|
+
class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm flex flex-col justify-between hover:border-indigo-400 hover:shadow-md transition">
|
|
313
|
+
<div class="space-y-3">
|
|
314
|
+
<div class="flex items-center justify-between">
|
|
315
|
+
<span class="step-badge bg-indigo-100 text-indigo-800 border border-indigo-300">3</span>
|
|
316
|
+
<span class="text-xs font-mono text-slate-500 font-medium">Schema to Tag</span>
|
|
317
|
+
</div>
|
|
318
|
+
<h3 class="font-bold text-slate-900 text-base">Blueprint to DOM Nodes</h3>
|
|
319
|
+
<p class="text-xs text-slate-600 leading-relaxed">
|
|
320
|
+
<code class="text-indigo-700 font-mono text-[11px]">json-renderers-build</code> creates an AST spec, and
|
|
321
|
+
<code class="text-indigo-700 font-mono text-[11px]">json-to-tag</code> instantiates real browser nodes:
|
|
322
|
+
</p>
|
|
323
|
+
<div class="text-[11px] font-mono bg-slate-950 p-3 rounded-xl text-indigo-200 leading-relaxed">
|
|
324
|
+
<table class="table"><br />
|
|
325
|
+
<thead><tr><th>...</th></tr></thead><br />
|
|
326
|
+
<tbody><tr><td>...</td></tr></tbody><br />
|
|
327
|
+
</table>
|
|
328
|
+
</div>
|
|
329
|
+
</div>
|
|
330
|
+
<div class="text-[11px] font-mono text-indigo-700 pt-3 border-t border-slate-100 mt-3 font-semibold">
|
|
331
|
+
Native DOM Creation →
|
|
332
|
+
</div>
|
|
333
|
+
</div>
|
|
334
|
+
|
|
335
|
+
<!-- Stage 4 -->
|
|
336
|
+
<div
|
|
337
|
+
class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm flex flex-col justify-between hover:border-cyan-400 hover:shadow-md transition">
|
|
338
|
+
<div class="space-y-3">
|
|
339
|
+
<div class="flex items-center justify-between">
|
|
340
|
+
<span class="step-badge bg-cyan-100 text-cyan-800 border border-cyan-300">4</span>
|
|
341
|
+
<span class="text-xs font-mono text-slate-500 font-medium">Mounting</span>
|
|
342
|
+
</div>
|
|
343
|
+
<h3 class="font-bold text-slate-900 text-base">Container Mounted</h3>
|
|
344
|
+
<p class="text-xs text-slate-600 leading-relaxed">
|
|
345
|
+
The engine safely appends the generated table into the host DOM element:
|
|
346
|
+
</p>
|
|
347
|
+
<pre class="bg-slate-950 p-3 rounded-xl text-[11px] text-cyan-300 font-mono overflow-x-auto"><code><div id="dom-container">
|
|
348
|
+
<!-- Cleanly mounted table -->
|
|
349
|
+
<table ...>...</table>
|
|
350
|
+
</div></code></pre>
|
|
351
|
+
</div>
|
|
352
|
+
<div class="text-[11px] font-mono text-cyan-700 pt-3 border-t border-slate-100 mt-3 font-semibold">
|
|
353
|
+
✅ Live in Browser
|
|
354
|
+
</div>
|
|
355
|
+
</div>
|
|
356
|
+
|
|
357
|
+
</div>
|
|
358
|
+
</section>
|
|
359
|
+
|
|
360
|
+
<!-- LIVE PROCESS DEMONSTRATION -->
|
|
361
|
+
<section id="live-pipeline" class="bg-slate-50 rounded-2xl p-6 sm:p-8 border border-slate-200 space-y-6">
|
|
362
|
+
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-slate-200 pb-4">
|
|
363
|
+
<div>
|
|
364
|
+
<span class="text-xs uppercase font-mono tracking-wider text-emerald-700 font-bold">Interactive
|
|
365
|
+
Verification</span>
|
|
366
|
+
<h2 class="text-xl sm:text-2xl font-bold text-slate-900 tracking-tight mt-1">Live Process Pipeline in Action
|
|
367
|
+
</h2>
|
|
368
|
+
<p class="text-slate-600 text-xs sm:text-sm mt-0.5">Watch the HTML process transform sample data into live DOM
|
|
369
|
+
table elements right now.</p>
|
|
370
|
+
</div>
|
|
371
|
+
<button id="btn-trigger-pipeline"
|
|
372
|
+
class="px-4 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs sm:text-sm shadow-sm transition flex items-center gap-2 w-fit">
|
|
373
|
+
<span>⚡</span> Re-run Process Pipeline
|
|
374
|
+
</button>
|
|
375
|
+
</div>
|
|
376
|
+
|
|
377
|
+
<!-- Pipeline Steps Visualizer -->
|
|
378
|
+
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
|
|
379
|
+
|
|
380
|
+
<!-- Controls & Stages Summary -->
|
|
381
|
+
<div class="lg:col-span-5 space-y-4">
|
|
382
|
+
<div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm space-y-3">
|
|
383
|
+
<h3 class="text-xs font-bold text-slate-700 uppercase font-mono tracking-wider">Process Status Tracker</h3>
|
|
384
|
+
|
|
385
|
+
<div class="space-y-2 text-xs font-mono">
|
|
386
|
+
<div class="flex items-center justify-between p-2 rounded bg-slate-50 border border-slate-100">
|
|
387
|
+
<span class="text-slate-600">Stage 1: Input JSON</span>
|
|
388
|
+
<span class="text-emerald-700 font-bold">✓ 3 Records Loaded</span>
|
|
389
|
+
</div>
|
|
390
|
+
<div class="flex items-center justify-between p-2 rounded bg-slate-50 border border-slate-100">
|
|
391
|
+
<span class="text-slate-600">Stage 2: Orchestrator Call</span>
|
|
392
|
+
<span class="text-teal-700 font-bold">✓ Config Validated</span>
|
|
393
|
+
</div>
|
|
394
|
+
<div class="flex items-center justify-between p-2 rounded bg-slate-50 border border-slate-100">
|
|
395
|
+
<span class="text-slate-600">Stage 3: DOM Construction</span>
|
|
396
|
+
<span class="text-indigo-700 font-bold">✓ json-to-tag Active</span>
|
|
397
|
+
</div>
|
|
398
|
+
<div class="flex items-center justify-between p-2 rounded bg-slate-50 border border-slate-100">
|
|
399
|
+
<span class="text-slate-600">Stage 4: Mount Status</span>
|
|
400
|
+
<span id="pipeline-status" class="text-emerald-700 font-bold">✓ Table Mounted</span>
|
|
401
|
+
</div>
|
|
402
|
+
</div>
|
|
403
|
+
|
|
404
|
+
<!-- Console Log Output -->
|
|
405
|
+
<div class="pt-2">
|
|
406
|
+
<div class="text-[11px] font-mono text-slate-500 mb-1 flex items-center justify-between">
|
|
407
|
+
<span>Pipeline Event Log:</span>
|
|
408
|
+
<span class="text-[10px] text-emerald-600 font-bold">Live</span>
|
|
409
|
+
</div>
|
|
410
|
+
<pre id="process-log"
|
|
411
|
+
class="bg-slate-950 p-3 rounded-lg text-xs text-emerald-400 font-mono h-28 overflow-y-auto border border-slate-800"><code>[Process] Ready to execute pipeline...</code></pre>
|
|
412
|
+
</div>
|
|
413
|
+
</div>
|
|
414
|
+
</div>
|
|
415
|
+
|
|
416
|
+
<!-- Render Target Output -->
|
|
417
|
+
<div class="lg:col-span-7 bg-white p-5 sm:p-6 rounded-xl border border-slate-200 shadow-sm space-y-3">
|
|
418
|
+
<div class="flex items-center justify-between pb-3 border-b border-slate-100">
|
|
419
|
+
<div class="flex items-center gap-2">
|
|
420
|
+
<span class="w-2.5 h-2.5 rounded-full bg-emerald-500 animate-pulse"></span>
|
|
421
|
+
<h3 class="text-xs font-bold text-slate-800 uppercase font-mono tracking-wider">
|
|
422
|
+
Rendered HTML Output: <code class="text-emerald-700">#live-process-output</code>
|
|
423
|
+
</h3>
|
|
424
|
+
</div>
|
|
425
|
+
<span class="text-[11px] font-mono text-slate-500 bg-slate-100 px-2 py-0.5 rounded">Live HTML Table</span>
|
|
426
|
+
</div>
|
|
427
|
+
|
|
428
|
+
<div id="live-process-output"
|
|
429
|
+
class="overflow-x-auto min-h-[180px] flex items-center justify-center text-slate-400 text-sm">
|
|
430
|
+
Rendering table via json-renderers...
|
|
431
|
+
</div>
|
|
432
|
+
</div>
|
|
433
|
+
|
|
434
|
+
</div>
|
|
435
|
+
</section>
|
|
436
|
+
|
|
437
|
+
<!-- CHOOSE YOUR INTEGRATION (SEPARATE HTML FILES) -->
|
|
438
|
+
<section id="integration-files" class="space-y-6 pt-4">
|
|
439
|
+
<div class="border-b border-slate-200 pb-4">
|
|
440
|
+
<span class="text-xs uppercase font-mono tracking-wider text-indigo-700 font-bold">Integration Methods</span>
|
|
441
|
+
<h2 class="text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight mt-1">Ready to Use in Your Project?</h2>
|
|
442
|
+
<p class="text-slate-600 text-sm mt-1">We have prepared dedicated, standalone guides for each implementation
|
|
443
|
+
approach:</p>
|
|
444
|
+
</div>
|
|
445
|
+
|
|
446
|
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
447
|
+
|
|
448
|
+
<!-- Card 1: Using CDN -->
|
|
449
|
+
<div
|
|
450
|
+
class="bg-white p-6 sm:p-8 rounded-2xl border-2 border-emerald-200 shadow-sm hover:border-emerald-400 hover:shadow-md transition flex flex-col justify-between">
|
|
451
|
+
<div class="space-y-4">
|
|
452
|
+
<div
|
|
453
|
+
class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-100 text-emerald-800 text-xs font-mono font-bold">
|
|
454
|
+
<span>⚡</span> Method 1: Standalone Guide
|
|
455
|
+
</div>
|
|
456
|
+
<h3 class="text-2xl font-bold text-slate-900 tracking-tight">Using CDN (Direct Import)</h3>
|
|
457
|
+
<p class="text-slate-600 text-sm leading-relaxed">
|
|
458
|
+
Import the <code class="text-emerald-700 font-mono font-semibold">render</code> function directly from the
|
|
459
|
+
jsDelivr CDN into an ES Module. Clean scope, zero global variables, and modern modular structure.
|
|
460
|
+
</p>
|
|
461
|
+
<div class="bg-slate-50 p-3 rounded-xl border border-slate-200 text-xs font-mono text-slate-700">
|
|
462
|
+
<code>import render from "https://cdn.jsdelivr.net/...";</code>
|
|
463
|
+
</div>
|
|
464
|
+
<ul class="text-xs text-slate-600 space-y-1.5 list-disc list-inside">
|
|
465
|
+
<li>Complete <code class="font-mono">index.html</code> and <code class="font-mono">index.js</code>
|
|
466
|
+
breakdown</li>
|
|
467
|
+
<li>Parameter options guide</li>
|
|
468
|
+
<li>Dedicated live interactive playground</li>
|
|
469
|
+
<li>Direct link to <code class="font-mono text-emerald-700">samples/table/byCdn/</code></li>
|
|
470
|
+
</ul>
|
|
471
|
+
</div>
|
|
472
|
+
|
|
473
|
+
<div class="pt-6">
|
|
474
|
+
<a href="cdn.html"
|
|
475
|
+
class="w-full py-3 px-4 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-sm shadow-sm transition flex items-center justify-center gap-2">
|
|
476
|
+
<span>Open Using CDN Guide</span> →
|
|
477
|
+
</a>
|
|
478
|
+
</div>
|
|
479
|
+
</div>
|
|
480
|
+
|
|
481
|
+
<!-- Card 2: Using window.ks -->
|
|
482
|
+
<div
|
|
483
|
+
class="bg-white p-6 sm:p-8 rounded-2xl border-2 border-indigo-200 shadow-sm hover:border-indigo-400 hover:shadow-md transition flex flex-col justify-between">
|
|
484
|
+
<div class="space-y-4">
|
|
485
|
+
<div
|
|
486
|
+
class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-100 text-indigo-800 text-xs font-mono font-bold">
|
|
487
|
+
<span>🌐</span> Method 2: Standalone Guide
|
|
488
|
+
</div>
|
|
489
|
+
<h3 class="text-2xl font-bold text-slate-900 tracking-tight">Using window.ks (Global Namespace)</h3>
|
|
490
|
+
<p class="text-slate-600 text-sm leading-relaxed">
|
|
491
|
+
Load the bundle and call <code
|
|
492
|
+
class="text-indigo-700 font-mono font-semibold">window.ks.jsonRenderers.renderToDom</code> from anywhere
|
|
493
|
+
in your web app, multi-script layouts, or browser console.
|
|
494
|
+
</p>
|
|
495
|
+
<div class="bg-slate-50 p-3 rounded-xl border border-slate-200 text-xs font-mono text-slate-700">
|
|
496
|
+
<code>window.ks.jsonRenderers.renderToDom({ ... });</code>
|
|
497
|
+
</div>
|
|
498
|
+
<ul class="text-xs text-slate-600 space-y-1.5 list-disc list-inside">
|
|
499
|
+
<li>Ideal for multi-script, non-module, or legacy projects</li>
|
|
500
|
+
<li>Global window access without repetitive imports</li>
|
|
501
|
+
<li>Dedicated live interactive playground</li>
|
|
502
|
+
<li>Direct link to <code class="font-mono text-indigo-700">samples/table/byKs/</code></li>
|
|
503
|
+
</ul>
|
|
504
|
+
</div>
|
|
505
|
+
|
|
506
|
+
<div class="pt-6">
|
|
507
|
+
<a href="windowKs.html"
|
|
508
|
+
class="w-full py-3 px-4 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white font-bold text-sm shadow-sm transition flex items-center justify-center gap-2">
|
|
509
|
+
<span>Open window.ks Guide</span> →
|
|
510
|
+
</a>
|
|
511
|
+
</div>
|
|
512
|
+
</div>
|
|
513
|
+
|
|
514
|
+
</div>
|
|
515
|
+
</section>
|
|
516
|
+
|
|
517
|
+
|
|
518
|
+
</main>
|
|
519
|
+
|
|
520
|
+
<!-- Clean Light Footer -->
|
|
521
|
+
<footer class="border-t border-slate-200 bg-slate-50 py-6 mt-12">
|
|
522
|
+
<div
|
|
523
|
+
class="max-w-7xl mx-auto px-4 sm:px-6 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-slate-600">
|
|
524
|
+
<div>
|
|
525
|
+
<span class="text-slate-900 font-semibold">json-renderers</span> • HTML Table Process Guide
|
|
526
|
+
</div>
|
|
527
|
+
<div class="flex items-center gap-4">
|
|
528
|
+
<a href="cdn.html" class="text-emerald-700 hover:underline">Using CDN Guide</a>
|
|
529
|
+
<a href="windowKs.html" class="text-indigo-700 hover:underline">window.ks Guide</a>
|
|
530
|
+
<a href="../index.html" class="text-slate-700 hover:underline">Main Docs</a>
|
|
531
|
+
</div>
|
|
532
|
+
</div>
|
|
533
|
+
</footer>
|
|
534
|
+
|
|
535
|
+
<!-- Script for Live Pipeline Demonstration -->
|
|
536
|
+
<script type="module">
|
|
537
|
+
import renderDirect from "../dist/v14/min.js";
|
|
538
|
+
|
|
539
|
+
const sampleRows = [
|
|
540
|
+
{ itemName: "0.09/30mm Steel Wire", baseUnit: "kgs", category: "Raw Materials" },
|
|
541
|
+
{ itemName: "0.11-25 Copper Alloy", baseUnit: "kgs", category: "Metals" },
|
|
542
|
+
{ itemName: "Industrial Gear G-14", baseUnit: "pcs", category: "Machinery" }
|
|
543
|
+
];
|
|
544
|
+
|
|
545
|
+
const logEl = document.getElementById("process-log");
|
|
546
|
+
const statusEl = document.getElementById("pipeline-status");
|
|
547
|
+
const triggerBtn = document.getElementById("btn-trigger-pipeline");
|
|
548
|
+
|
|
549
|
+
function appendLog(msg) {
|
|
550
|
+
if (!logEl) return;
|
|
551
|
+
logEl.innerHTML += "\n" + msg;
|
|
552
|
+
logEl.scrollTop = logEl.scrollHeight;
|
|
553
|
+
}
|
|
554
|
+
|
|
555
|
+
function runPipeline() {
|
|
556
|
+
if (logEl) logEl.innerHTML = "<code>[Process] Starting table rendering pipeline...</code>";
|
|
557
|
+
if (statusEl) {
|
|
558
|
+
statusEl.textContent = "Processing...";
|
|
559
|
+
statusEl.className = "text-amber-600 font-bold";
|
|
560
|
+
}
|
|
561
|
+
|
|
562
|
+
setTimeout(() => {
|
|
563
|
+
appendLog("[Stage 1] 3 sample records provided as input data.");
|
|
564
|
+
}, 50);
|
|
565
|
+
|
|
566
|
+
setTimeout(() => {
|
|
567
|
+
appendLog("[Stage 2] Invoking render({ type: 'table', columns: ['itemName', 'baseUnit', 'category'] })...");
|
|
568
|
+
}, 120);
|
|
569
|
+
|
|
570
|
+
setTimeout(() => {
|
|
571
|
+
appendLog("[Stage 3] json-to-tag converting spec schema into native DOM elements...");
|
|
572
|
+
}, 200);
|
|
573
|
+
|
|
574
|
+
setTimeout(() => {
|
|
575
|
+
try {
|
|
576
|
+
renderDirect({
|
|
577
|
+
type: "table",
|
|
578
|
+
data: sampleRows,
|
|
579
|
+
targetHtmlId: "live-process-output",
|
|
580
|
+
columns: ["itemName", "baseUnit", "category"],
|
|
581
|
+
showLog: true
|
|
582
|
+
});
|
|
583
|
+
appendLog("[Stage 4] Successfully mounted table into #live-process-output!");
|
|
584
|
+
if (statusEl) {
|
|
585
|
+
statusEl.textContent = "✓ Table Mounted";
|
|
586
|
+
statusEl.className = "text-emerald-700 font-bold";
|
|
587
|
+
}
|
|
588
|
+
} catch (err) {
|
|
589
|
+
appendLog("[Error] Failed: " + err.message);
|
|
590
|
+
if (statusEl) {
|
|
591
|
+
statusEl.textContent = "Error";
|
|
592
|
+
statusEl.className = "text-rose-600 font-bold";
|
|
593
|
+
}
|
|
594
|
+
}
|
|
595
|
+
}, 280);
|
|
596
|
+
}
|
|
597
|
+
|
|
598
|
+
if (triggerBtn) {
|
|
599
|
+
triggerBtn.addEventListener("click", runPipeline);
|
|
600
|
+
}
|
|
601
|
+
|
|
602
|
+
// Auto-run once on page load
|
|
603
|
+
runPipeline();
|
|
604
|
+
</script>
|
|
605
|
+
</body>
|
|
606
|
+
|
|
607
|
+
</html>
|