zero-query 1.0.9 → 1.2.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.
- package/LICENSE +21 -21
- package/README.md +2 -0
- package/cli/args.js +33 -33
- package/cli/commands/build-api.js +443 -0
- package/cli/commands/build.js +254 -216
- package/cli/commands/bundle.js +1228 -1183
- package/cli/commands/create.js +137 -121
- package/cli/commands/dev/devtools/index.js +56 -56
- package/cli/commands/dev/devtools/js/components.js +49 -49
- package/cli/commands/dev/devtools/js/core.js +423 -423
- package/cli/commands/dev/devtools/js/elements.js +421 -421
- package/cli/commands/dev/devtools/js/network.js +166 -166
- package/cli/commands/dev/devtools/js/performance.js +73 -73
- package/cli/commands/dev/devtools/js/router.js +105 -105
- package/cli/commands/dev/devtools/js/source.js +132 -132
- package/cli/commands/dev/devtools/js/stats.js +35 -35
- package/cli/commands/dev/devtools/js/tabs.js +79 -79
- package/cli/commands/dev/devtools/panel.html +95 -95
- package/cli/commands/dev/devtools/styles.css +244 -244
- package/cli/commands/dev/index.js +107 -107
- package/cli/commands/dev/logger.js +75 -75
- package/cli/commands/dev/overlay.js +858 -858
- package/cli/commands/dev/server.js +220 -167
- package/cli/commands/dev/validator.js +94 -94
- package/cli/commands/dev/watcher.js +172 -172
- package/cli/help.js +114 -112
- package/cli/index.js +52 -52
- package/cli/scaffold/default/LICENSE +21 -21
- package/cli/scaffold/default/app/app.js +207 -207
- package/cli/scaffold/default/app/components/about.js +201 -201
- package/cli/scaffold/default/app/components/api-demo.js +143 -143
- package/cli/scaffold/default/app/components/contact-card.js +231 -231
- package/cli/scaffold/default/app/components/contacts/contacts.css +706 -706
- package/cli/scaffold/default/app/components/contacts/contacts.html +200 -200
- package/cli/scaffold/default/app/components/contacts/contacts.js +196 -196
- package/cli/scaffold/default/app/components/counter.js +127 -127
- package/cli/scaffold/default/app/components/home.js +249 -249
- package/cli/scaffold/default/app/components/not-found.js +16 -16
- package/cli/scaffold/default/app/components/playground/playground.css +115 -115
- package/cli/scaffold/default/app/components/playground/playground.html +161 -161
- package/cli/scaffold/default/app/components/playground/playground.js +116 -116
- package/cli/scaffold/default/app/components/todos.js +225 -225
- package/cli/scaffold/default/app/components/toolkit/toolkit.css +97 -97
- package/cli/scaffold/default/app/components/toolkit/toolkit.html +146 -146
- package/cli/scaffold/default/app/components/toolkit/toolkit.js +280 -280
- package/cli/scaffold/default/app/routes.js +15 -15
- package/cli/scaffold/default/app/store.js +101 -101
- package/cli/scaffold/default/global.css +552 -552
- package/cli/scaffold/default/index.html +99 -99
- package/cli/scaffold/minimal/app/app.js +85 -85
- package/cli/scaffold/minimal/app/components/about.js +68 -68
- package/cli/scaffold/minimal/app/components/counter.js +122 -122
- package/cli/scaffold/minimal/app/components/home.js +68 -68
- package/cli/scaffold/minimal/app/components/not-found.js +16 -16
- package/cli/scaffold/minimal/app/routes.js +9 -9
- package/cli/scaffold/minimal/app/store.js +36 -36
- package/cli/scaffold/minimal/global.css +300 -300
- package/cli/scaffold/minimal/index.html +44 -44
- package/cli/scaffold/ssr/app/app.js +41 -41
- package/cli/scaffold/ssr/app/components/about.js +55 -55
- package/cli/scaffold/ssr/app/components/blog/index.js +65 -65
- package/cli/scaffold/ssr/app/components/blog/post.js +86 -86
- package/cli/scaffold/ssr/app/components/home.js +37 -37
- package/cli/scaffold/ssr/app/components/not-found.js +15 -15
- package/cli/scaffold/ssr/app/routes.js +8 -8
- package/cli/scaffold/ssr/global.css +228 -228
- package/cli/scaffold/ssr/index.html +37 -37
- package/cli/scaffold/ssr/package.json +8 -8
- package/cli/scaffold/ssr/server/data/posts.js +144 -144
- package/cli/scaffold/ssr/server/index.js +213 -213
- package/cli/scaffold/webrtc/app/app.js +11 -0
- package/cli/scaffold/webrtc/app/components/video-room.js +295 -0
- package/cli/scaffold/webrtc/app/lib/room.js +252 -0
- package/cli/scaffold/webrtc/assets/.gitkeep +0 -0
- package/cli/scaffold/webrtc/global.css +250 -0
- package/cli/scaffold/webrtc/index.html +21 -0
- package/cli/utils.js +305 -287
- package/dist/API.md +7264 -0
- package/dist/zquery.dist.zip +0 -0
- package/dist/zquery.js +10313 -6252
- package/dist/zquery.min.js +8 -601
- package/index.d.ts +570 -365
- package/index.js +311 -232
- package/package.json +76 -69
- package/src/component.js +1709 -1454
- package/src/core.js +921 -921
- package/src/diff.js +497 -497
- package/src/errors.js +209 -209
- package/src/expression.js +922 -922
- package/src/http.js +242 -242
- package/src/package.json +1 -1
- package/src/reactive.js +255 -254
- package/src/router.js +843 -773
- package/src/ssr.js +418 -418
- package/src/store.js +318 -272
- package/src/utils.js +515 -515
- package/src/webrtc/e2ee.js +351 -0
- package/src/webrtc/errors.js +116 -0
- package/src/webrtc/ice.js +301 -0
- package/src/webrtc/index.js +131 -0
- package/src/webrtc/joinToken.js +119 -0
- package/src/webrtc/observe.js +172 -0
- package/src/webrtc/peer.js +351 -0
- package/src/webrtc/reactive.js +268 -0
- package/src/webrtc/room.js +625 -0
- package/src/webrtc/sdp.js +302 -0
- package/src/webrtc/sfu/index.js +43 -0
- package/src/webrtc/sfu/livekit.js +131 -0
- package/src/webrtc/sfu/mediasoup.js +150 -0
- package/src/webrtc/signaling.js +373 -0
- package/src/webrtc/turn.js +237 -0
- package/tests/_helpers/webrtcFakes.js +289 -0
- package/tests/audit.test.js +4158 -4158
- package/tests/cli.test.js +1136 -1023
- package/tests/compare.test.js +497 -0
- package/tests/component.test.js +3969 -3938
- package/tests/core.test.js +1910 -1910
- package/tests/dev-server.test.js +489 -0
- package/tests/diff.test.js +1416 -1416
- package/tests/docs.test.js +1664 -0
- package/tests/electron-features.test.js +864 -0
- package/tests/errors.test.js +619 -619
- package/tests/expression.test.js +1056 -1056
- package/tests/http.test.js +648 -648
- package/tests/reactive.test.js +819 -819
- package/tests/router.test.js +2327 -2327
- package/tests/ssr.test.js +870 -870
- package/tests/store.test.js +830 -830
- package/tests/test-minifier.js +153 -153
- package/tests/test-ssr.js +27 -27
- package/tests/utils.test.js +1377 -1377
- package/tests/webrtc/e2ee.test.js +283 -0
- package/tests/webrtc/ice.test.js +202 -0
- package/tests/webrtc/joinToken.test.js +89 -0
- package/tests/webrtc/observe.test.js +111 -0
- package/tests/webrtc/peer.test.js +373 -0
- package/tests/webrtc/reactive.test.js +235 -0
- package/tests/webrtc/room.test.js +406 -0
- package/tests/webrtc/sdp.test.js +151 -0
- package/tests/webrtc/sfu-livekit.test.js +119 -0
- package/tests/webrtc/sfu.test.js +160 -0
- package/tests/webrtc/signaling.test.js +251 -0
- package/tests/webrtc/turn.test.js +256 -0
- package/types/collection.d.ts +383 -383
- package/types/component.d.ts +186 -186
- package/types/errors.d.ts +135 -135
- package/types/http.d.ts +92 -92
- package/types/misc.d.ts +201 -201
- package/types/reactive.d.ts +98 -98
- package/types/router.d.ts +190 -190
- package/types/ssr.d.ts +102 -102
- package/types/store.d.ts +146 -145
- package/types/utils.d.ts +245 -245
- package/types/webrtc.d.ts +653 -0
|
@@ -1,105 +1,105 @@
|
|
|
1
|
-
// ===================================================================
|
|
2
|
-
// Router panel
|
|
3
|
-
// ===================================================================
|
|
4
|
-
function renderRouter() {
|
|
5
|
-
var content = document.getElementById('router-content');
|
|
6
|
-
if (!content) return;
|
|
7
|
-
var html = '';
|
|
8
|
-
|
|
9
|
-
// Current route card
|
|
10
|
-
var router = null;
|
|
11
|
-
try { router = targetWin && targetWin.$ && targetWin.$.getRouter(); } catch(e) {}
|
|
12
|
-
|
|
13
|
-
html += '<div class="router-card">';
|
|
14
|
-
html += '<div class="router-title">Current Route</div>';
|
|
15
|
-
if (router && router.current) {
|
|
16
|
-
var cur = router.current;
|
|
17
|
-
html += '<div class="router-row"><span class="router-key">Path</span><span class="router-val">' + esc(cur.path || '/') + '</span></div>';
|
|
18
|
-
if (cur.route && cur.route.component) {
|
|
19
|
-
html += '<div class="router-row"><span class="router-key">Component</span><span class="router-val" style="color:var(--purple)">' + esc(cur.route.component) + '</span></div>';
|
|
20
|
-
}
|
|
21
|
-
if (cur.params && Object.keys(cur.params).length) {
|
|
22
|
-
html += '<div class="router-row"><span class="router-key">Params</span><span class="router-val">' + esc(JSON.stringify(cur.params)) + '</span></div>';
|
|
23
|
-
}
|
|
24
|
-
if (cur.query && Object.keys(cur.query).length) {
|
|
25
|
-
html += '<div class="router-row"><span class="router-key">Query</span><span class="router-val">' + esc(JSON.stringify(cur.query)) + '</span></div>';
|
|
26
|
-
}
|
|
27
|
-
html += '<div class="router-row"><span class="router-key">Mode</span><span class="router-val">' + esc(router._mode || 'history') + '</span></div>';
|
|
28
|
-
if (router._base) {
|
|
29
|
-
html += '<div class="router-row"><span class="router-key">Base</span><span class="router-val">' + esc(router._base) + '</span></div>';
|
|
30
|
-
}
|
|
31
|
-
} else {
|
|
32
|
-
html += '<div class="router-row" style="color:var(--text2)">No router detected</div>';
|
|
33
|
-
}
|
|
34
|
-
html += '</div>';
|
|
35
|
-
|
|
36
|
-
// Guards & listeners
|
|
37
|
-
if (router) {
|
|
38
|
-
html += '<div class="router-card">';
|
|
39
|
-
html += '<div class="router-title">Guards & Listeners</div>';
|
|
40
|
-
var beforeCt = router._guards ? router._guards.before.length : 0;
|
|
41
|
-
var afterCt = router._guards ? router._guards.after.length : 0;
|
|
42
|
-
var substateCt = router._substateListeners ? router._substateListeners.length : 0;
|
|
43
|
-
var onChangeCt = router._listeners ? router._listeners.size : 0;
|
|
44
|
-
html += '<div class="router-row"><span class="router-key">beforeEach</span><span class="router-val">' + beforeCt + ' guard' + (beforeCt !== 1 ? 's' : '') + '</span></div>';
|
|
45
|
-
html += '<div class="router-row"><span class="router-key">afterEach</span><span class="router-val">' + afterCt + ' guard' + (afterCt !== 1 ? 's' : '') + '</span></div>';
|
|
46
|
-
html += '<div class="router-row"><span class="router-key">onSubstate</span><span class="router-val">' + substateCt + ' listener' + (substateCt !== 1 ? 's' : '') + '</span></div>';
|
|
47
|
-
html += '<div class="router-row"><span class="router-key">onChange</span><span class="router-val">' + onChangeCt + ' watcher' + (onChangeCt !== 1 ? 's' : '') + '</span></div>';
|
|
48
|
-
// Active substates in the history stack (computed from timeline)
|
|
49
|
-
var activeSubs = 0;
|
|
50
|
-
for (var si = 0; si < routerEvents.length; si++) {
|
|
51
|
-
var act = routerEvents[si].action;
|
|
52
|
-
if (act === 'substate') activeSubs++;
|
|
53
|
-
else if (act === 'pop-substate') activeSubs = Math.max(0, activeSubs - 1);
|
|
54
|
-
else if (act === 'navigate' || act === 'pop') activeSubs = 0;
|
|
55
|
-
}
|
|
56
|
-
html += '<div class="router-row"><span class="router-key">Substates</span><span class="router-val" style="color:' + (activeSubs > 0 ? 'var(--purple)' : 'var(--text2)') + '">' + activeSubs + ' in stack</span></div>';
|
|
57
|
-
html += '</div>';
|
|
58
|
-
|
|
59
|
-
// Registered routes
|
|
60
|
-
html += '<div class="router-card">';
|
|
61
|
-
html += '<div class="router-title">Registered Routes <span style="color:var(--text2);font-weight:400">(' + router._routes.length + ')</span></div>';
|
|
62
|
-
for (var ri = 0; ri < router._routes.length; ri++) {
|
|
63
|
-
var r = router._routes[ri];
|
|
64
|
-
html += '<div class="router-row">';
|
|
65
|
-
html += '<span class="router-val" style="color:var(--accent)">' + esc(r.path) + '</span>';
|
|
66
|
-
if (r.component) html += '<span style="color:var(--purple);margin-left:8px">' + esc(r.component) + '</span>';
|
|
67
|
-
if (r.load) html += '<span style="color:var(--yellow);margin-left:4px;font-size:9px">[lazy]</span>';
|
|
68
|
-
html += '</div>';
|
|
69
|
-
}
|
|
70
|
-
html += '</div>';
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
// History timeline
|
|
74
|
-
html += '<div class="router-card">';
|
|
75
|
-
html += '<div class="router-title">History Timeline <span style="color:var(--text2);font-weight:400">(' + routerEvents.length + ')</span></div>';
|
|
76
|
-
if (routerEvents.length === 0) {
|
|
77
|
-
html += '<div style="color:var(--text2);padding:8px 0;font-size:11px">No navigation events recorded yet</div>';
|
|
78
|
-
} else {
|
|
79
|
-
html += '<div class="router-timeline">';
|
|
80
|
-
for (var i = routerEvents.length - 1; i >= Math.max(0, routerEvents.length - 50); i--) {
|
|
81
|
-
var ev = routerEvents[i];
|
|
82
|
-
var badgeClass = 'nav';
|
|
83
|
-
if (ev.action === 'replace') badgeClass = 'replace';
|
|
84
|
-
else if (ev.action === 'substate' || ev.action === 'pop-substate') badgeClass = 'substate';
|
|
85
|
-
else if (ev.action === 'pop') badgeClass = 'pop';
|
|
86
|
-
else if (ev.action === 'hashchange') badgeClass = 'hash';
|
|
87
|
-
html += '<div class="router-event">';
|
|
88
|
-
html += '<span class="router-badge ' + badgeClass + '">' + esc(ev.action.toUpperCase()) + '</span>';
|
|
89
|
-
html += '<div style="flex:1;min-width:0">';
|
|
90
|
-
html += '<div class="router-url">' + esc(ev.url || '') + '</div>';
|
|
91
|
-
if (ev.key) {
|
|
92
|
-
html += '<div class="router-detail">key: <span style="color:var(--purple)">' + esc(ev.key) + '</span>';
|
|
93
|
-
if (ev.data != null) html += ' · data: <span style="color:var(--green)">' + esc(JSON.stringify(ev.data)) + '</span>';
|
|
94
|
-
html += '</div>';
|
|
95
|
-
}
|
|
96
|
-
html += '</div>';
|
|
97
|
-
html += '<span class="timestamp">' + formatTime(ev.timestamp) + '</span>';
|
|
98
|
-
html += '</div>';
|
|
99
|
-
}
|
|
100
|
-
html += '</div>';
|
|
101
|
-
}
|
|
102
|
-
html += '</div>';
|
|
103
|
-
|
|
104
|
-
content.innerHTML = html;
|
|
105
|
-
}
|
|
1
|
+
// ===================================================================
|
|
2
|
+
// Router panel
|
|
3
|
+
// ===================================================================
|
|
4
|
+
function renderRouter() {
|
|
5
|
+
var content = document.getElementById('router-content');
|
|
6
|
+
if (!content) return;
|
|
7
|
+
var html = '';
|
|
8
|
+
|
|
9
|
+
// Current route card
|
|
10
|
+
var router = null;
|
|
11
|
+
try { router = targetWin && targetWin.$ && targetWin.$.getRouter(); } catch(e) {}
|
|
12
|
+
|
|
13
|
+
html += '<div class="router-card">';
|
|
14
|
+
html += '<div class="router-title">Current Route</div>';
|
|
15
|
+
if (router && router.current) {
|
|
16
|
+
var cur = router.current;
|
|
17
|
+
html += '<div class="router-row"><span class="router-key">Path</span><span class="router-val">' + esc(cur.path || '/') + '</span></div>';
|
|
18
|
+
if (cur.route && cur.route.component) {
|
|
19
|
+
html += '<div class="router-row"><span class="router-key">Component</span><span class="router-val" style="color:var(--purple)">' + esc(cur.route.component) + '</span></div>';
|
|
20
|
+
}
|
|
21
|
+
if (cur.params && Object.keys(cur.params).length) {
|
|
22
|
+
html += '<div class="router-row"><span class="router-key">Params</span><span class="router-val">' + esc(JSON.stringify(cur.params)) + '</span></div>';
|
|
23
|
+
}
|
|
24
|
+
if (cur.query && Object.keys(cur.query).length) {
|
|
25
|
+
html += '<div class="router-row"><span class="router-key">Query</span><span class="router-val">' + esc(JSON.stringify(cur.query)) + '</span></div>';
|
|
26
|
+
}
|
|
27
|
+
html += '<div class="router-row"><span class="router-key">Mode</span><span class="router-val">' + esc(router._mode || 'history') + '</span></div>';
|
|
28
|
+
if (router._base) {
|
|
29
|
+
html += '<div class="router-row"><span class="router-key">Base</span><span class="router-val">' + esc(router._base) + '</span></div>';
|
|
30
|
+
}
|
|
31
|
+
} else {
|
|
32
|
+
html += '<div class="router-row" style="color:var(--text2)">No router detected</div>';
|
|
33
|
+
}
|
|
34
|
+
html += '</div>';
|
|
35
|
+
|
|
36
|
+
// Guards & listeners
|
|
37
|
+
if (router) {
|
|
38
|
+
html += '<div class="router-card">';
|
|
39
|
+
html += '<div class="router-title">Guards & Listeners</div>';
|
|
40
|
+
var beforeCt = router._guards ? router._guards.before.length : 0;
|
|
41
|
+
var afterCt = router._guards ? router._guards.after.length : 0;
|
|
42
|
+
var substateCt = router._substateListeners ? router._substateListeners.length : 0;
|
|
43
|
+
var onChangeCt = router._listeners ? router._listeners.size : 0;
|
|
44
|
+
html += '<div class="router-row"><span class="router-key">beforeEach</span><span class="router-val">' + beforeCt + ' guard' + (beforeCt !== 1 ? 's' : '') + '</span></div>';
|
|
45
|
+
html += '<div class="router-row"><span class="router-key">afterEach</span><span class="router-val">' + afterCt + ' guard' + (afterCt !== 1 ? 's' : '') + '</span></div>';
|
|
46
|
+
html += '<div class="router-row"><span class="router-key">onSubstate</span><span class="router-val">' + substateCt + ' listener' + (substateCt !== 1 ? 's' : '') + '</span></div>';
|
|
47
|
+
html += '<div class="router-row"><span class="router-key">onChange</span><span class="router-val">' + onChangeCt + ' watcher' + (onChangeCt !== 1 ? 's' : '') + '</span></div>';
|
|
48
|
+
// Active substates in the history stack (computed from timeline)
|
|
49
|
+
var activeSubs = 0;
|
|
50
|
+
for (var si = 0; si < routerEvents.length; si++) {
|
|
51
|
+
var act = routerEvents[si].action;
|
|
52
|
+
if (act === 'substate') activeSubs++;
|
|
53
|
+
else if (act === 'pop-substate') activeSubs = Math.max(0, activeSubs - 1);
|
|
54
|
+
else if (act === 'navigate' || act === 'pop') activeSubs = 0;
|
|
55
|
+
}
|
|
56
|
+
html += '<div class="router-row"><span class="router-key">Substates</span><span class="router-val" style="color:' + (activeSubs > 0 ? 'var(--purple)' : 'var(--text2)') + '">' + activeSubs + ' in stack</span></div>';
|
|
57
|
+
html += '</div>';
|
|
58
|
+
|
|
59
|
+
// Registered routes
|
|
60
|
+
html += '<div class="router-card">';
|
|
61
|
+
html += '<div class="router-title">Registered Routes <span style="color:var(--text2);font-weight:400">(' + router._routes.length + ')</span></div>';
|
|
62
|
+
for (var ri = 0; ri < router._routes.length; ri++) {
|
|
63
|
+
var r = router._routes[ri];
|
|
64
|
+
html += '<div class="router-row">';
|
|
65
|
+
html += '<span class="router-val" style="color:var(--accent)">' + esc(r.path) + '</span>';
|
|
66
|
+
if (r.component) html += '<span style="color:var(--purple);margin-left:8px">' + esc(r.component) + '</span>';
|
|
67
|
+
if (r.load) html += '<span style="color:var(--yellow);margin-left:4px;font-size:9px">[lazy]</span>';
|
|
68
|
+
html += '</div>';
|
|
69
|
+
}
|
|
70
|
+
html += '</div>';
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
// History timeline
|
|
74
|
+
html += '<div class="router-card">';
|
|
75
|
+
html += '<div class="router-title">History Timeline <span style="color:var(--text2);font-weight:400">(' + routerEvents.length + ')</span></div>';
|
|
76
|
+
if (routerEvents.length === 0) {
|
|
77
|
+
html += '<div style="color:var(--text2);padding:8px 0;font-size:11px">No navigation events recorded yet</div>';
|
|
78
|
+
} else {
|
|
79
|
+
html += '<div class="router-timeline">';
|
|
80
|
+
for (var i = routerEvents.length - 1; i >= Math.max(0, routerEvents.length - 50); i--) {
|
|
81
|
+
var ev = routerEvents[i];
|
|
82
|
+
var badgeClass = 'nav';
|
|
83
|
+
if (ev.action === 'replace') badgeClass = 'replace';
|
|
84
|
+
else if (ev.action === 'substate' || ev.action === 'pop-substate') badgeClass = 'substate';
|
|
85
|
+
else if (ev.action === 'pop') badgeClass = 'pop';
|
|
86
|
+
else if (ev.action === 'hashchange') badgeClass = 'hash';
|
|
87
|
+
html += '<div class="router-event">';
|
|
88
|
+
html += '<span class="router-badge ' + badgeClass + '">' + esc(ev.action.toUpperCase()) + '</span>';
|
|
89
|
+
html += '<div style="flex:1;min-width:0">';
|
|
90
|
+
html += '<div class="router-url">' + esc(ev.url || '') + '</div>';
|
|
91
|
+
if (ev.key) {
|
|
92
|
+
html += '<div class="router-detail">key: <span style="color:var(--purple)">' + esc(ev.key) + '</span>';
|
|
93
|
+
if (ev.data != null) html += ' · data: <span style="color:var(--green)">' + esc(JSON.stringify(ev.data)) + '</span>';
|
|
94
|
+
html += '</div>';
|
|
95
|
+
}
|
|
96
|
+
html += '</div>';
|
|
97
|
+
html += '<span class="timestamp">' + formatTime(ev.timestamp) + '</span>';
|
|
98
|
+
html += '</div>';
|
|
99
|
+
}
|
|
100
|
+
html += '</div>';
|
|
101
|
+
}
|
|
102
|
+
html += '</div>';
|
|
103
|
+
|
|
104
|
+
content.innerHTML = html;
|
|
105
|
+
}
|
|
@@ -1,132 +1,132 @@
|
|
|
1
|
-
// ===================================================================
|
|
2
|
-
// Source Viewer Overlay
|
|
3
|
-
// ===================================================================
|
|
4
|
-
var sourceOverlay = document.getElementById('source-overlay');
|
|
5
|
-
var sourceTitle = document.getElementById('source-title');
|
|
6
|
-
var sourceContent = document.getElementById('source-content');
|
|
7
|
-
document.getElementById('source-close').addEventListener('click', function() {
|
|
8
|
-
sourceOverlay.classList.remove('open');
|
|
9
|
-
});
|
|
10
|
-
sourceOverlay.addEventListener('click', function(e) {
|
|
11
|
-
if (e.target === sourceOverlay) sourceOverlay.classList.remove('open');
|
|
12
|
-
});
|
|
13
|
-
document.addEventListener('keydown', function(e) {
|
|
14
|
-
if (e.key === 'Escape' && sourceOverlay.classList.contains('open')) {
|
|
15
|
-
sourceOverlay.classList.remove('open');
|
|
16
|
-
}
|
|
17
|
-
});
|
|
18
|
-
|
|
19
|
-
function openSourceViewer(label, text, isCSS) {
|
|
20
|
-
sourceTitle.innerHTML = label || 'Source';
|
|
21
|
-
var body = sourceOverlay.querySelector('.source-body');
|
|
22
|
-
if (isCSS) {
|
|
23
|
-
body.innerHTML = buildCSSTree(text || '');
|
|
24
|
-
} else {
|
|
25
|
-
body.innerHTML = '<pre id="source-content"></pre>';
|
|
26
|
-
body.querySelector('pre').textContent = text || '';
|
|
27
|
-
}
|
|
28
|
-
sourceOverlay.classList.add('open');
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
// Delegated click for CSS tree toggle (always wired, doesn't stack)
|
|
32
|
-
sourceOverlay.querySelector('.source-body').addEventListener('click', function(e) {
|
|
33
|
-
var sel = e.target.closest('.css-sel');
|
|
34
|
-
if (!sel) return;
|
|
35
|
-
var arrow = sel.querySelector('.css-arrow');
|
|
36
|
-
var props = sel.nextElementSibling;
|
|
37
|
-
if (props && props.classList.contains('css-props')) {
|
|
38
|
-
props.classList.toggle('open');
|
|
39
|
-
if (arrow) arrow.classList.toggle('open');
|
|
40
|
-
}
|
|
41
|
-
});
|
|
42
|
-
|
|
43
|
-
function buildCSSTree(css) {
|
|
44
|
-
var html = '<div class="css-tree">';
|
|
45
|
-
// Simple CSS parser: split into rules, comments, and at-rules
|
|
46
|
-
var i = 0, len = css.length;
|
|
47
|
-
while (i < len) {
|
|
48
|
-
// Skip whitespace
|
|
49
|
-
while (i < len && /\s/.test(css[i])) i++;
|
|
50
|
-
if (i >= len) break;
|
|
51
|
-
// Comment
|
|
52
|
-
if (css[i] === '/' && css[i+1] === '*') {
|
|
53
|
-
var end = css.indexOf('*/', i + 2);
|
|
54
|
-
if (end === -1) end = len;
|
|
55
|
-
else end += 2;
|
|
56
|
-
html += '<div class="css-comment">' + esc(css.slice(i, end)) + '</div>';
|
|
57
|
-
i = end;
|
|
58
|
-
continue;
|
|
59
|
-
}
|
|
60
|
-
// Find selector (everything up to {)
|
|
61
|
-
var bracePos = css.indexOf('{', i);
|
|
62
|
-
if (bracePos === -1) {
|
|
63
|
-
// Remaining text (malformed)
|
|
64
|
-
html += '<div class="css-comment">' + esc(css.slice(i).trim()) + '</div>';
|
|
65
|
-
break;
|
|
66
|
-
}
|
|
67
|
-
var selector = css.slice(i, bracePos).trim();
|
|
68
|
-
i = bracePos + 1;
|
|
69
|
-
// Find matching closing brace (handle nesting for @media etc, skip comments and strings)
|
|
70
|
-
var depth = 1, bodyStart = i;
|
|
71
|
-
while (i < len && depth > 0) {
|
|
72
|
-
// Skip comments
|
|
73
|
-
if (css[i] === '/' && css[i+1] === '*') {
|
|
74
|
-
i += 2;
|
|
75
|
-
while (i < len && !(css[i] === '*' && css[i+1] === '/')) i++;
|
|
76
|
-
i += 2;
|
|
77
|
-
continue;
|
|
78
|
-
}
|
|
79
|
-
// Skip quoted strings
|
|
80
|
-
if (css[i] === '"' || css[i] === "'") {
|
|
81
|
-
var q = css[i]; i++;
|
|
82
|
-
while (i < len && css[i] !== q) { if (css[i] === '\\') i++; i++; }
|
|
83
|
-
i++;
|
|
84
|
-
continue;
|
|
85
|
-
}
|
|
86
|
-
if (css[i] === '{') depth++;
|
|
87
|
-
else if (css[i] === '}') depth--;
|
|
88
|
-
if (depth > 0) i++;
|
|
89
|
-
}
|
|
90
|
-
var body = css.slice(bodyStart, i).trim();
|
|
91
|
-
i++; // skip }
|
|
92
|
-
// Check if body contains nested rules (e.g. @media)
|
|
93
|
-
if (body.indexOf('{') !== -1) {
|
|
94
|
-
html += '<div class="css-rule">';
|
|
95
|
-
html += '<div class="css-sel"><span class="css-arrow">▶</span><span>' + esc(selector) + '</span><span class="css-brace">{</span></div>';
|
|
96
|
-
html += '<div class="css-props">' + buildCSSTree(body) + '</div>';
|
|
97
|
-
html += '</div>';
|
|
98
|
-
} else {
|
|
99
|
-
// Parse properties
|
|
100
|
-
html += '<div class="css-rule">';
|
|
101
|
-
html += '<div class="css-sel"><span class="css-arrow">▶</span><span>' + esc(selector) + '</span><span class="css-brace">{</span></div>';
|
|
102
|
-
html += '<div class="css-props">';
|
|
103
|
-
var declarations = body.split(';');
|
|
104
|
-
for (var d = 0; d < declarations.length; d++) {
|
|
105
|
-
var decl = declarations[d].trim();
|
|
106
|
-
if (!decl) continue;
|
|
107
|
-
var colonIdx = decl.indexOf(':');
|
|
108
|
-
if (colonIdx !== -1) {
|
|
109
|
-
var prop = decl.slice(0, colonIdx).trim();
|
|
110
|
-
var val = decl.slice(colonIdx + 1).trim();
|
|
111
|
-
html += '<div class="css-prop"><span class="css-prop-name">' + esc(prop) + '</span>: <span class="css-prop-val">' + esc(val) + '</span>;</div>';
|
|
112
|
-
} else {
|
|
113
|
-
html += '<div class="css-prop">' + esc(decl) + '</div>';
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
html += '</div></div>';
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
html += '</div>';
|
|
120
|
-
return html;
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
// Delegated peek handler on the DOM tree
|
|
124
|
-
document.getElementById('dom-tree').addEventListener('click', function(e) {
|
|
125
|
-
var peek = e.target.closest('.tree-peek');
|
|
126
|
-
if (!peek) return;
|
|
127
|
-
e.stopPropagation();
|
|
128
|
-
var row = peek.closest('.tree-row');
|
|
129
|
-
if (row && row.__sourceText) {
|
|
130
|
-
openSourceViewer(row.__sourceLabel || 'Source', row.__sourceText, row.__sourceIsCSS);
|
|
131
|
-
}
|
|
132
|
-
});
|
|
1
|
+
// ===================================================================
|
|
2
|
+
// Source Viewer Overlay
|
|
3
|
+
// ===================================================================
|
|
4
|
+
var sourceOverlay = document.getElementById('source-overlay');
|
|
5
|
+
var sourceTitle = document.getElementById('source-title');
|
|
6
|
+
var sourceContent = document.getElementById('source-content');
|
|
7
|
+
document.getElementById('source-close').addEventListener('click', function() {
|
|
8
|
+
sourceOverlay.classList.remove('open');
|
|
9
|
+
});
|
|
10
|
+
sourceOverlay.addEventListener('click', function(e) {
|
|
11
|
+
if (e.target === sourceOverlay) sourceOverlay.classList.remove('open');
|
|
12
|
+
});
|
|
13
|
+
document.addEventListener('keydown', function(e) {
|
|
14
|
+
if (e.key === 'Escape' && sourceOverlay.classList.contains('open')) {
|
|
15
|
+
sourceOverlay.classList.remove('open');
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
function openSourceViewer(label, text, isCSS) {
|
|
20
|
+
sourceTitle.innerHTML = label || 'Source';
|
|
21
|
+
var body = sourceOverlay.querySelector('.source-body');
|
|
22
|
+
if (isCSS) {
|
|
23
|
+
body.innerHTML = buildCSSTree(text || '');
|
|
24
|
+
} else {
|
|
25
|
+
body.innerHTML = '<pre id="source-content"></pre>';
|
|
26
|
+
body.querySelector('pre').textContent = text || '';
|
|
27
|
+
}
|
|
28
|
+
sourceOverlay.classList.add('open');
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
// Delegated click for CSS tree toggle (always wired, doesn't stack)
|
|
32
|
+
sourceOverlay.querySelector('.source-body').addEventListener('click', function(e) {
|
|
33
|
+
var sel = e.target.closest('.css-sel');
|
|
34
|
+
if (!sel) return;
|
|
35
|
+
var arrow = sel.querySelector('.css-arrow');
|
|
36
|
+
var props = sel.nextElementSibling;
|
|
37
|
+
if (props && props.classList.contains('css-props')) {
|
|
38
|
+
props.classList.toggle('open');
|
|
39
|
+
if (arrow) arrow.classList.toggle('open');
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
|
|
43
|
+
function buildCSSTree(css) {
|
|
44
|
+
var html = '<div class="css-tree">';
|
|
45
|
+
// Simple CSS parser: split into rules, comments, and at-rules
|
|
46
|
+
var i = 0, len = css.length;
|
|
47
|
+
while (i < len) {
|
|
48
|
+
// Skip whitespace
|
|
49
|
+
while (i < len && /\s/.test(css[i])) i++;
|
|
50
|
+
if (i >= len) break;
|
|
51
|
+
// Comment
|
|
52
|
+
if (css[i] === '/' && css[i+1] === '*') {
|
|
53
|
+
var end = css.indexOf('*/', i + 2);
|
|
54
|
+
if (end === -1) end = len;
|
|
55
|
+
else end += 2;
|
|
56
|
+
html += '<div class="css-comment">' + esc(css.slice(i, end)) + '</div>';
|
|
57
|
+
i = end;
|
|
58
|
+
continue;
|
|
59
|
+
}
|
|
60
|
+
// Find selector (everything up to {)
|
|
61
|
+
var bracePos = css.indexOf('{', i);
|
|
62
|
+
if (bracePos === -1) {
|
|
63
|
+
// Remaining text (malformed)
|
|
64
|
+
html += '<div class="css-comment">' + esc(css.slice(i).trim()) + '</div>';
|
|
65
|
+
break;
|
|
66
|
+
}
|
|
67
|
+
var selector = css.slice(i, bracePos).trim();
|
|
68
|
+
i = bracePos + 1;
|
|
69
|
+
// Find matching closing brace (handle nesting for @media etc, skip comments and strings)
|
|
70
|
+
var depth = 1, bodyStart = i;
|
|
71
|
+
while (i < len && depth > 0) {
|
|
72
|
+
// Skip comments
|
|
73
|
+
if (css[i] === '/' && css[i+1] === '*') {
|
|
74
|
+
i += 2;
|
|
75
|
+
while (i < len && !(css[i] === '*' && css[i+1] === '/')) i++;
|
|
76
|
+
i += 2;
|
|
77
|
+
continue;
|
|
78
|
+
}
|
|
79
|
+
// Skip quoted strings
|
|
80
|
+
if (css[i] === '"' || css[i] === "'") {
|
|
81
|
+
var q = css[i]; i++;
|
|
82
|
+
while (i < len && css[i] !== q) { if (css[i] === '\\') i++; i++; }
|
|
83
|
+
i++;
|
|
84
|
+
continue;
|
|
85
|
+
}
|
|
86
|
+
if (css[i] === '{') depth++;
|
|
87
|
+
else if (css[i] === '}') depth--;
|
|
88
|
+
if (depth > 0) i++;
|
|
89
|
+
}
|
|
90
|
+
var body = css.slice(bodyStart, i).trim();
|
|
91
|
+
i++; // skip }
|
|
92
|
+
// Check if body contains nested rules (e.g. @media)
|
|
93
|
+
if (body.indexOf('{') !== -1) {
|
|
94
|
+
html += '<div class="css-rule">';
|
|
95
|
+
html += '<div class="css-sel"><span class="css-arrow">▶</span><span>' + esc(selector) + '</span><span class="css-brace">{</span></div>';
|
|
96
|
+
html += '<div class="css-props">' + buildCSSTree(body) + '</div>';
|
|
97
|
+
html += '</div>';
|
|
98
|
+
} else {
|
|
99
|
+
// Parse properties
|
|
100
|
+
html += '<div class="css-rule">';
|
|
101
|
+
html += '<div class="css-sel"><span class="css-arrow">▶</span><span>' + esc(selector) + '</span><span class="css-brace">{</span></div>';
|
|
102
|
+
html += '<div class="css-props">';
|
|
103
|
+
var declarations = body.split(';');
|
|
104
|
+
for (var d = 0; d < declarations.length; d++) {
|
|
105
|
+
var decl = declarations[d].trim();
|
|
106
|
+
if (!decl) continue;
|
|
107
|
+
var colonIdx = decl.indexOf(':');
|
|
108
|
+
if (colonIdx !== -1) {
|
|
109
|
+
var prop = decl.slice(0, colonIdx).trim();
|
|
110
|
+
var val = decl.slice(colonIdx + 1).trim();
|
|
111
|
+
html += '<div class="css-prop"><span class="css-prop-name">' + esc(prop) + '</span>: <span class="css-prop-val">' + esc(val) + '</span>;</div>';
|
|
112
|
+
} else {
|
|
113
|
+
html += '<div class="css-prop">' + esc(decl) + '</div>';
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
html += '</div></div>';
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
html += '</div>';
|
|
120
|
+
return html;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
// Delegated peek handler on the DOM tree
|
|
124
|
+
document.getElementById('dom-tree').addEventListener('click', function(e) {
|
|
125
|
+
var peek = e.target.closest('.tree-peek');
|
|
126
|
+
if (!peek) return;
|
|
127
|
+
e.stopPropagation();
|
|
128
|
+
var row = peek.closest('.tree-row');
|
|
129
|
+
if (row && row.__sourceText) {
|
|
130
|
+
openSourceViewer(row.__sourceLabel || 'Source', row.__sourceText, row.__sourceIsCSS);
|
|
131
|
+
}
|
|
132
|
+
});
|
|
@@ -1,35 +1,35 @@
|
|
|
1
|
-
// ===================================================================
|
|
2
|
-
// Stats bar
|
|
3
|
-
// ===================================================================
|
|
4
|
-
function updateStats() {
|
|
5
|
-
try {
|
|
6
|
-
var elCount = targetDoc ? targetDoc.querySelectorAll('*').length : 0;
|
|
7
|
-
document.getElementById('el-count').textContent = elCount + ' elements';
|
|
8
|
-
} catch(e) {}
|
|
9
|
-
document.getElementById('morph-count').textContent = morphCount + ' renders';
|
|
10
|
-
document.getElementById('req-count').textContent = requests.length + ' requests';
|
|
11
|
-
|
|
12
|
-
// Route stat - show current path
|
|
13
|
-
try {
|
|
14
|
-
var router = targetWin && targetWin.$ && targetWin.$.getRouter();
|
|
15
|
-
var routeStat = document.getElementById('route-stat');
|
|
16
|
-
if (routeStat && router && router.current) {
|
|
17
|
-
routeStat.textContent = router.current.path || '/';
|
|
18
|
-
}
|
|
19
|
-
} catch(e) {}
|
|
20
|
-
|
|
21
|
-
var status = document.getElementById('status');
|
|
22
|
-
var statusText = document.getElementById('status-text');
|
|
23
|
-
if (isConnected()) {
|
|
24
|
-
status.className = 'topbar-status';
|
|
25
|
-
statusText.textContent = 'Connected';
|
|
26
|
-
} else {
|
|
27
|
-
status.className = 'topbar-status err';
|
|
28
|
-
statusText.textContent = 'Disconnected';
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
// ===================================================================
|
|
33
|
-
// Boot
|
|
34
|
-
// ===================================================================
|
|
35
|
-
init();
|
|
1
|
+
// ===================================================================
|
|
2
|
+
// Stats bar
|
|
3
|
+
// ===================================================================
|
|
4
|
+
function updateStats() {
|
|
5
|
+
try {
|
|
6
|
+
var elCount = targetDoc ? targetDoc.querySelectorAll('*').length : 0;
|
|
7
|
+
document.getElementById('el-count').textContent = elCount + ' elements';
|
|
8
|
+
} catch(e) {}
|
|
9
|
+
document.getElementById('morph-count').textContent = morphCount + ' renders';
|
|
10
|
+
document.getElementById('req-count').textContent = requests.length + ' requests';
|
|
11
|
+
|
|
12
|
+
// Route stat - show current path
|
|
13
|
+
try {
|
|
14
|
+
var router = targetWin && targetWin.$ && targetWin.$.getRouter();
|
|
15
|
+
var routeStat = document.getElementById('route-stat');
|
|
16
|
+
if (routeStat && router && router.current) {
|
|
17
|
+
routeStat.textContent = router.current.path || '/';
|
|
18
|
+
}
|
|
19
|
+
} catch(e) {}
|
|
20
|
+
|
|
21
|
+
var status = document.getElementById('status');
|
|
22
|
+
var statusText = document.getElementById('status-text');
|
|
23
|
+
if (isConnected()) {
|
|
24
|
+
status.className = 'topbar-status';
|
|
25
|
+
statusText.textContent = 'Connected';
|
|
26
|
+
} else {
|
|
27
|
+
status.className = 'topbar-status err';
|
|
28
|
+
statusText.textContent = 'Disconnected';
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
// ===================================================================
|
|
33
|
+
// Boot
|
|
34
|
+
// ===================================================================
|
|
35
|
+
init();
|