json-renderers 1.17.7 → 1.18.4
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/dist/min.js +1352 -1047
- package/docs/dist/v17/min.js +85 -83
- package/docs/dist/v18/min.js +1352 -0
- package/docs/index.html +91 -2
- package/docs/subDoc/advanceDoc.html +1140 -0
- package/docs/subDoc/index.html +244 -0
- package/docs/subDoc/simpleDoc.html +476 -0
- package/package.json +3 -2
- package/src/index.js +2 -2
- package/src/v18/buildSpec/index.js +25 -0
- package/src/v18/common/deriveColumnsFromData.js +20 -0
- package/src/v18/index.js +33 -0
- package/src/v18/meta.js +6 -0
- package/src/v18/registerGlobal.js +16 -0
- package/src/v18/renderToDom/index.js +47 -0
|
@@ -0,0 +1,244 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en" class="dark">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<title>SubDoc Hub | json-renderers Guides & Documentation</title>
|
|
8
|
+
<meta name="description"
|
|
9
|
+
content="Documentation Hub for KeshavSoft json-renderers: explore both the Simple conceptual guide and the Comprehensive Advanced architectural reference.">
|
|
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
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
16
|
+
<script>
|
|
17
|
+
tailwind.config = {
|
|
18
|
+
darkMode: 'class',
|
|
19
|
+
theme: {
|
|
20
|
+
extend: {
|
|
21
|
+
colors: {
|
|
22
|
+
brand: {
|
|
23
|
+
50: '#eef2ff',
|
|
24
|
+
100: '#e0e7ff',
|
|
25
|
+
500: '#6366f1',
|
|
26
|
+
600: '#4f46e5',
|
|
27
|
+
700: '#4338ca',
|
|
28
|
+
800: '#3730a3',
|
|
29
|
+
900: '#312e81'
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
fontFamily: {
|
|
33
|
+
sans: ['Inter', 'sans-serif'],
|
|
34
|
+
mono: ['Fira Code', 'monospace']
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
</script>
|
|
40
|
+
<style>
|
|
41
|
+
pre,
|
|
42
|
+
code {
|
|
43
|
+
font-family: 'Fira Code', monospace;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.glass-panel {
|
|
47
|
+
background: rgba(15, 23, 42, 0.75);
|
|
48
|
+
backdrop-filter: blur(12px);
|
|
49
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.glass-card {
|
|
53
|
+
background: rgba(30, 41, 59, 0.5);
|
|
54
|
+
backdrop-filter: blur(8px);
|
|
55
|
+
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.custom-scrollbar::-webkit-scrollbar {
|
|
59
|
+
width: 6px;
|
|
60
|
+
height: 6px;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.custom-scrollbar::-webkit-scrollbar-track {
|
|
64
|
+
background: rgba(15, 23, 42, 0.6);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
68
|
+
background: rgba(99, 102, 241, 0.3);
|
|
69
|
+
border-radius: 4px;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
73
|
+
background: rgba(99, 102, 241, 0.6);
|
|
74
|
+
}
|
|
75
|
+
</style>
|
|
76
|
+
</head>
|
|
77
|
+
|
|
78
|
+
<body
|
|
79
|
+
class="bg-slate-950 text-slate-100 min-h-screen antialiased flex flex-col font-sans selection:bg-indigo-500 selection:text-white">
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
<!-- Main Body Content -->
|
|
84
|
+
<main class="flex-1 max-w-7xl w-full mx-auto p-4 sm:p-6 lg:p-8 space-y-12">
|
|
85
|
+
|
|
86
|
+
<!-- Breadcrumb -->
|
|
87
|
+
<div class="flex items-center gap-2 text-xs text-slate-400 font-mono">
|
|
88
|
+
<a href="../index.html" class="hover:text-white transition flex items-center gap-1">
|
|
89
|
+
<span>🏠</span> Home
|
|
90
|
+
</a>
|
|
91
|
+
<span>/</span>
|
|
92
|
+
<span class="text-slate-500">docs</span>
|
|
93
|
+
<span>/</span>
|
|
94
|
+
<span class="text-indigo-400 font-semibold">subDoc</span>
|
|
95
|
+
</div>
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
<!-- Two Tracks Showcase Grid -->
|
|
99
|
+
<section class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
100
|
+
|
|
101
|
+
<!-- Track 1: Simple Guide Card -->
|
|
102
|
+
<div
|
|
103
|
+
class="glass-panel p-6 sm:p-8 rounded-3xl border border-emerald-500/30 flex flex-col justify-between relative overflow-hidden group hover:border-emerald-500/60 transition shadow-lg">
|
|
104
|
+
<div
|
|
105
|
+
class="absolute -right-12 -top-12 w-48 h-48 bg-emerald-500/10 rounded-full blur-3xl pointer-events-none group-hover:bg-emerald-500/20 transition">
|
|
106
|
+
</div>
|
|
107
|
+
<div class="space-y-4">
|
|
108
|
+
<div class="flex items-center justify-between">
|
|
109
|
+
<span
|
|
110
|
+
class="px-2.5 py-1 rounded-full text-xs font-mono font-semibold bg-emerald-500/20 text-emerald-300 border border-emerald-500/30 flex items-center gap-1.5">
|
|
111
|
+
<span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span> Quick Concept • 3 min read
|
|
112
|
+
</span>
|
|
113
|
+
<span class="text-3xl">🌱</span>
|
|
114
|
+
</div>
|
|
115
|
+
|
|
116
|
+
<h2 class="text-2xl font-bold text-white group-hover:text-emerald-300 transition">Simple Guide</h2>
|
|
117
|
+
<p class="text-slate-300 text-sm leading-relaxed">
|
|
118
|
+
Fast, beginner-friendly explanation structured around the famous <strong>House-Building Story</strong>.
|
|
119
|
+
Clarifies who prepares the blueprint, who builds the HTML elements, and who mounts them in the DOM.
|
|
120
|
+
</p>
|
|
121
|
+
|
|
122
|
+
<div class="space-y-2 pt-2">
|
|
123
|
+
<div class="text-xs font-semibold text-slate-400 uppercase tracking-wider font-mono">What you will learn:
|
|
124
|
+
</div>
|
|
125
|
+
<ul class="text-xs text-slate-300 space-y-1.5">
|
|
126
|
+
<li class="flex items-start gap-2">
|
|
127
|
+
<span class="text-emerald-400 font-bold">1.</span>
|
|
128
|
+
<span><strong>The Architect:</strong> <code
|
|
129
|
+
class="text-indigo-300 font-mono">json-renderers-build</code> prepares the blueprint.</span>
|
|
130
|
+
</li>
|
|
131
|
+
<li class="flex items-start gap-2">
|
|
132
|
+
<span class="text-emerald-400 font-bold">2.</span>
|
|
133
|
+
<span><strong>The Construction Worker:</strong> <code
|
|
134
|
+
class="text-emerald-300 font-mono">@keshavsoft/json-to-tag</code> creates real DOM elements.</span>
|
|
135
|
+
</li>
|
|
136
|
+
<li class="flex items-start gap-2">
|
|
137
|
+
<span class="text-emerald-400 font-bold">3.</span>
|
|
138
|
+
<span><strong>The Site Manager:</strong> <code class="text-teal-300 font-mono">json-renderers</code>
|
|
139
|
+
mounts the elements on the web page.</span>
|
|
140
|
+
</li>
|
|
141
|
+
<li class="flex items-start gap-2">
|
|
142
|
+
<span class="text-emerald-400 font-bold">4.</span>
|
|
143
|
+
<span>Minimal runnable snippet showing a student table rendering in workbench.</span>
|
|
144
|
+
</li>
|
|
145
|
+
</ul>
|
|
146
|
+
</div>
|
|
147
|
+
</div>
|
|
148
|
+
|
|
149
|
+
<div class="pt-6">
|
|
150
|
+
<a href="simpleDoc.html"
|
|
151
|
+
class="w-full py-3 px-4 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-semibold text-sm transition flex items-center justify-center gap-2 shadow-md shadow-emerald-600/30">
|
|
152
|
+
<span>Read Simple Guide</span>
|
|
153
|
+
<span>→</span>
|
|
154
|
+
</a>
|
|
155
|
+
</div>
|
|
156
|
+
</div>
|
|
157
|
+
|
|
158
|
+
<!-- Track 2: Advanced Guide Card -->
|
|
159
|
+
<div
|
|
160
|
+
class="glass-panel p-6 sm:p-8 rounded-3xl border border-purple-500/30 flex flex-col justify-between relative overflow-hidden group hover:border-purple-500/60 transition shadow-lg">
|
|
161
|
+
<div
|
|
162
|
+
class="absolute -right-12 -top-12 w-48 h-48 bg-purple-500/10 rounded-full blur-3xl pointer-events-none group-hover:bg-purple-500/20 transition">
|
|
163
|
+
</div>
|
|
164
|
+
<div class="space-y-4">
|
|
165
|
+
<div class="flex items-center justify-between">
|
|
166
|
+
<span
|
|
167
|
+
class="px-2.5 py-1 rounded-full text-xs font-mono font-semibold bg-purple-500/20 text-purple-300 border border-purple-500/30 flex items-center gap-1.5">
|
|
168
|
+
<span class="w-1.5 h-1.5 rounded-full bg-purple-400"></span> Deep Dive • 15 min read
|
|
169
|
+
</span>
|
|
170
|
+
<span class="text-3xl">🚀</span>
|
|
171
|
+
</div>
|
|
172
|
+
|
|
173
|
+
<h2 class="text-2xl font-bold text-white group-hover:text-purple-300 transition">Advanced Documentation</h2>
|
|
174
|
+
<p class="text-slate-300 text-sm leading-relaxed">
|
|
175
|
+
Exhaustive technical handbook covering system architecture, component lifecycles, configuration
|
|
176
|
+
specifications, pipeline stages, Vite and CDN bundling, and troubleshooting.
|
|
177
|
+
</p>
|
|
178
|
+
|
|
179
|
+
<div class="space-y-2 pt-2">
|
|
180
|
+
<div class="text-xs font-semibold text-slate-400 uppercase tracking-wider font-mono">What you will learn:
|
|
181
|
+
</div>
|
|
182
|
+
<ul class="text-xs text-slate-300 space-y-1.5">
|
|
183
|
+
<li class="flex items-start gap-2">
|
|
184
|
+
<span class="text-purple-400 font-bold">•</span>
|
|
185
|
+
<span><strong>Architectural Pipeline:</strong> Detailed multi-stage sequence from caller arguments to
|
|
186
|
+
container replacement.</span>
|
|
187
|
+
</li>
|
|
188
|
+
<li class="flex items-start gap-2">
|
|
189
|
+
<span class="text-purple-400 font-bold">•</span>
|
|
190
|
+
<span><strong>Full API Reference:</strong> Complete option breakdown for <code
|
|
191
|
+
class="text-purple-300 font-mono">type</code>, <code
|
|
192
|
+
class="text-purple-300 font-mono">targetHtmlId</code>, <code
|
|
193
|
+
class="text-purple-300 font-mono">data</code>, and <code
|
|
194
|
+
class="text-purple-300 font-mono">columns</code>.</span>
|
|
195
|
+
</li>
|
|
196
|
+
<li class="flex items-start gap-2">
|
|
197
|
+
<span class="text-purple-400 font-bold">•</span>
|
|
198
|
+
<span><strong>Component Types:</strong> Table generation, select dropdowns, and pre-existing host
|
|
199
|
+
attachment (<code class="text-purple-300 font-mono">selectOptionsOnly</code>).</span>
|
|
200
|
+
</li>
|
|
201
|
+
<li class="flex items-start gap-2">
|
|
202
|
+
<span class="text-purple-400 font-bold">•</span>
|
|
203
|
+
<span><strong>Packaging & Tooling:</strong> Vite build workflow, Rollup configurations, browser
|
|
204
|
+
global <code class="text-purple-300 font-mono">window.ks</code>, and CDN distribution.</span>
|
|
205
|
+
</li>
|
|
206
|
+
</ul>
|
|
207
|
+
</div>
|
|
208
|
+
|
|
209
|
+
|
|
210
|
+
</div>
|
|
211
|
+
|
|
212
|
+
<div class="pt-6">
|
|
213
|
+
<a href="advanceDoc.html"
|
|
214
|
+
class="w-full py-3 px-4 rounded-xl bg-purple-600 hover:bg-purple-500 text-white font-semibold text-sm transition flex items-center justify-center gap-2 shadow-md shadow-purple-600/30">
|
|
215
|
+
<span>Read Advanced Guide</span>
|
|
216
|
+
<span>→</span>
|
|
217
|
+
</a>
|
|
218
|
+
</div>
|
|
219
|
+
</div>
|
|
220
|
+
|
|
221
|
+
</section>
|
|
222
|
+
|
|
223
|
+
|
|
224
|
+
</main>
|
|
225
|
+
|
|
226
|
+
<!-- Footer -->
|
|
227
|
+
<footer class="border-t border-slate-900 bg-slate-950 py-6 text-center text-xs text-slate-500 mt-12">
|
|
228
|
+
<div class="max-w-7xl mx-auto px-4 flex flex-col sm:flex-row items-center justify-between gap-3">
|
|
229
|
+
<div>
|
|
230
|
+
<strong class="text-slate-400">json-renderers</strong> • SubDoc Hub • KeshavSoft • MIT License
|
|
231
|
+
</div>
|
|
232
|
+
<div class="flex items-center gap-4 text-slate-400">
|
|
233
|
+
<a href="../index.html" class="hover:text-white transition">Main Docs</a>
|
|
234
|
+
<a href="simpleDoc.html" class="hover:text-white transition">Simple Guide</a>
|
|
235
|
+
<a href="advanceDoc.html" class="hover:text-white transition">Advanced Guide</a>
|
|
236
|
+
<a href="https://github.com/keshavsoft/json-renderers" target="_blank" rel="noopener noreferrer"
|
|
237
|
+
class="hover:text-white transition">GitHub</a>
|
|
238
|
+
</div>
|
|
239
|
+
</div>
|
|
240
|
+
</footer>
|
|
241
|
+
|
|
242
|
+
</body>
|
|
243
|
+
|
|
244
|
+
</html>
|