sibujs 1.5.0 → 2.0.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/dist/browser.cjs +238 -69
- package/dist/browser.d.cts +5 -0
- package/dist/browser.d.ts +5 -0
- package/dist/browser.js +6 -6
- package/dist/build.cjs +916 -292
- package/dist/build.js +15 -13
- package/dist/cdn.global.js +17 -16
- package/dist/chunk-2RA7SHDA.js +65 -0
- package/dist/chunk-2UPRY23K.js +80 -0
- package/dist/chunk-3JHCYHWN.js +125 -0
- package/dist/{chunk-VAPYJN4X.js → chunk-3LR7GLWQ.js} +93 -23
- package/dist/{chunk-RJ46C3CS.js → chunk-3NSGB5JN.js} +71 -20
- package/dist/{chunk-XUEEGU5O.js → chunk-52YJLLRO.js} +16 -4
- package/dist/{chunk-XHK6BDAJ.js → chunk-54EDRCEF.js} +25 -8
- package/dist/chunk-7JDB7I65.js +1327 -0
- package/dist/{chunk-WZSPOOER.js → chunk-CC65Y57T.js} +8 -5
- package/dist/{chunk-23VV7YD3.js → chunk-DFPFITST.js} +25 -30
- package/dist/{chunk-BGN5ZMP4.js → chunk-GTBNNBJ6.js} +14 -2
- package/dist/chunk-HB24TBAF.js +121 -0
- package/dist/{chunk-CZUGLNJS.js → chunk-ITX6OO3F.js} +3 -3
- package/dist/{chunk-BGTHZHJ5.js → chunk-JA6667UN.js} +188 -44
- package/dist/{chunk-7GRNSCFT.js → chunk-JXMMDLBY.js} +306 -183
- package/dist/{chunk-3X2YG6YM.js → chunk-JYD2PWXH.js} +59 -28
- package/dist/{chunk-SFKNRVCU.js → chunk-KLRMB5ZS.js} +135 -79
- package/dist/{chunk-5X6PP2UK.js → chunk-LMLD24FC.js} +2 -2
- package/dist/{chunk-M4NLBH4I.js → chunk-LYTCUZ7H.js} +3 -2
- package/dist/{chunk-BMPL52BF.js → chunk-MIUAXB7K.js} +118 -66
- package/dist/{chunk-JCDUJN2F.js → chunk-ND2664SF.js} +486 -153
- package/dist/{chunk-VQDZK23A.js → chunk-O2MNQFLP.js} +181 -66
- package/dist/{chunk-NHUC2QWH.js → chunk-R73P76YZ.js} +1 -1
- package/dist/{chunk-2BYQDGN3.js → chunk-SAHNHTFC.js} +234 -63
- package/dist/chunk-UCS6AMJ7.js +79 -0
- package/dist/{chunk-K4G4ZQNR.js → chunk-VLPPXTYG.js} +84 -38
- package/dist/{chunk-OUZZEE4S.js → chunk-WOMYAHHI.js} +17 -11
- package/dist/{customElement-BL3Uo8dL.d.cts → customElement-CPfIrbvg.d.cts} +14 -10
- package/dist/{customElement-BL3Uo8dL.d.ts → customElement-CPfIrbvg.d.ts} +14 -10
- package/dist/data.cjs +410 -99
- package/dist/data.d.cts +20 -2
- package/dist/data.d.ts +20 -2
- package/dist/data.js +11 -9
- package/dist/devtools.cjs +513 -223
- package/dist/devtools.d.cts +1 -1
- package/dist/devtools.d.ts +1 -1
- package/dist/devtools.js +12 -6
- package/dist/ecosystem.cjs +475 -144
- package/dist/ecosystem.d.cts +9 -7
- package/dist/ecosystem.d.ts +9 -7
- package/dist/ecosystem.js +12 -11
- package/dist/extras.cjs +3355 -1541
- package/dist/extras.d.cts +9 -9
- package/dist/extras.d.ts +9 -9
- package/dist/extras.js +58 -45
- package/dist/index.cjs +920 -292
- package/dist/index.d.cts +71 -8
- package/dist/index.d.ts +71 -8
- package/dist/index.js +28 -16
- package/dist/{introspect-BumjnBKr.d.cts → introspect-BWNjNw64.d.cts} +22 -2
- package/dist/{introspect-CZrlcaYy.d.ts → introspect-cY2pg9pW.d.ts} +22 -2
- package/dist/motion.cjs +77 -34
- package/dist/motion.js +4 -4
- package/dist/patterns.cjs +335 -69
- package/dist/patterns.d.cts +11 -12
- package/dist/patterns.d.ts +11 -12
- package/dist/patterns.js +7 -7
- package/dist/performance.cjs +279 -108
- package/dist/performance.d.cts +23 -16
- package/dist/performance.d.ts +23 -16
- package/dist/performance.js +13 -8
- package/dist/plugin-D30wlGW5.d.cts +71 -0
- package/dist/plugin-D30wlGW5.d.ts +71 -0
- package/dist/plugins.cjs +635 -260
- package/dist/plugins.d.cts +10 -3
- package/dist/plugins.d.ts +10 -3
- package/dist/plugins.js +106 -38
- package/dist/{ssr-Do_SiVoL.d.cts → ssr-CrVNy6Pa.d.cts} +9 -15
- package/dist/{ssr-Do_SiVoL.d.ts → ssr-CrVNy6Pa.d.ts} +9 -15
- package/dist/{ssr-4PBXAOO3.js → ssr-FXD2PPMC.js} +4 -3
- package/dist/ssr.cjs +642 -222
- package/dist/ssr.d.cts +26 -6
- package/dist/ssr.d.ts +26 -6
- package/dist/ssr.js +12 -11
- package/dist/{tagFactory-DaJ0YWX6.d.cts → tagFactory-S17H2qxu.d.cts} +9 -1
- package/dist/{tagFactory-DaJ0YWX6.d.ts → tagFactory-S17H2qxu.d.ts} +9 -1
- package/dist/testing.cjs +252 -63
- package/dist/testing.d.cts +17 -4
- package/dist/testing.d.ts +17 -4
- package/dist/testing.js +100 -44
- package/dist/ui.cjs +463 -137
- package/dist/ui.d.cts +1 -1
- package/dist/ui.d.ts +1 -1
- package/dist/ui.js +20 -17
- package/dist/widgets.cjs +977 -94
- package/dist/widgets.d.cts +104 -2
- package/dist/widgets.d.ts +104 -2
- package/dist/widgets.js +9 -7
- package/package.json +8 -2
- package/dist/chunk-32DY64NT.js +0 -282
- package/dist/chunk-3AIRKM3B.js +0 -1263
- package/dist/chunk-3ARAQO7B.js +0 -398
- package/dist/chunk-3CRQALYP.js +0 -877
- package/dist/chunk-4EI4AG32.js +0 -482
- package/dist/chunk-4MYMUBRS.js +0 -21
- package/dist/chunk-5ZYQ6KDD.js +0 -154
- package/dist/chunk-6BMPXPUW.js +0 -26
- package/dist/chunk-6HLLIF3K.js +0 -398
- package/dist/chunk-6LSNVCS2.js +0 -937
- package/dist/chunk-6SA3QQES.js +0 -61
- package/dist/chunk-77L6NL3X.js +0 -1097
- package/dist/chunk-7BF6TK55.js +0 -1097
- package/dist/chunk-7TQKR4PP.js +0 -294
- package/dist/chunk-7V26P53V.js +0 -712
- package/dist/chunk-AZ3ISID5.js +0 -298
- package/dist/chunk-B7SWRFUT.js +0 -332
- package/dist/chunk-BTU3TJDS.js +0 -365
- package/dist/chunk-BW3WT46K.js +0 -937
- package/dist/chunk-C6KFWOFV.js +0 -616
- package/dist/chunk-CHF5OHIA.js +0 -61
- package/dist/chunk-CHJ27IGK.js +0 -26
- package/dist/chunk-CMBFNA7L.js +0 -27
- package/dist/chunk-DAHRH4ON.js +0 -331
- package/dist/chunk-DKOHBI74.js +0 -924
- package/dist/chunk-DTCOOBMX.js +0 -725
- package/dist/chunk-EBGIRKQY.js +0 -616
- package/dist/chunk-EUZND3CB.js +0 -27
- package/dist/chunk-EVCZO745.js +0 -365
- package/dist/chunk-EWFVA3TJ.js +0 -282
- package/dist/chunk-F3FA4F32.js +0 -292
- package/dist/chunk-FGOEVHY3.js +0 -60
- package/dist/chunk-G3BOQPVO.js +0 -365
- package/dist/chunk-GCOK2LC3.js +0 -282
- package/dist/chunk-GJPXRJ45.js +0 -37
- package/dist/chunk-HGMJFBC7.js +0 -654
- package/dist/chunk-JAKHTMQU.js +0 -1000
- package/dist/chunk-JCI5M6U6.js +0 -956
- package/dist/chunk-K5ZUMYVS.js +0 -89
- package/dist/chunk-KQPDEVVS.js +0 -398
- package/dist/chunk-L6JRBDNS.js +0 -60
- package/dist/chunk-LA6KQEDU.js +0 -712
- package/dist/chunk-MB6QFH3I.js +0 -2776
- package/dist/chunk-MDVXJWFN.js +0 -304
- package/dist/chunk-MEZVEBPN.js +0 -2008
- package/dist/chunk-MK4ERFYL.js +0 -2249
- package/dist/chunk-MLKGABMK.js +0 -9
- package/dist/chunk-MQ5GOYPH.js +0 -2249
- package/dist/chunk-MYRV7VDM.js +0 -742
- package/dist/chunk-N6IZB6KJ.js +0 -567
- package/dist/chunk-NEKUBFPT.js +0 -60
- package/dist/chunk-NMRUZALC.js +0 -1097
- package/dist/chunk-NYVAC6P5.js +0 -37
- package/dist/chunk-NZIIMDWI.js +0 -84
- package/dist/chunk-OF7UZIVB.js +0 -725
- package/dist/chunk-P3XWXJZU.js +0 -282
- package/dist/chunk-P6W3STU4.js +0 -2249
- package/dist/chunk-PBHF5WKN.js +0 -616
- package/dist/chunk-PDZQY43A.js +0 -616
- package/dist/chunk-PTQJDMRT.js +0 -146
- package/dist/chunk-PZEGYCF5.js +0 -61
- package/dist/chunk-QBMDLBU2.js +0 -975
- package/dist/chunk-QWZG56ET.js +0 -2744
- package/dist/chunk-RQGQSLQK.js +0 -725
- package/dist/chunk-SDLZDHKP.js +0 -107
- package/dist/chunk-TDGZL5CU.js +0 -365
- package/dist/chunk-TNQWPPE6.js +0 -37
- package/dist/chunk-TSOKIX5Z.js +0 -654
- package/dist/chunk-UHNL42EF.js +0 -2730
- package/dist/chunk-UNXCEF6S.js +0 -21
- package/dist/chunk-V2XTI523.js +0 -347
- package/dist/chunk-VAU366PN.js +0 -2241
- package/dist/chunk-VMVDTCXB.js +0 -712
- package/dist/chunk-VQNQZCWJ.js +0 -61
- package/dist/chunk-VRW3FULF.js +0 -725
- package/dist/chunk-WADYRCO2.js +0 -304
- package/dist/chunk-WILQZRO4.js +0 -282
- package/dist/chunk-WR5D4EGH.js +0 -26
- package/dist/chunk-WUHJISPP.js +0 -298
- package/dist/chunk-XYU6TZOW.js +0 -182
- package/dist/chunk-Y6GP4QGG.js +0 -276
- package/dist/chunk-YECR7UIA.js +0 -347
- package/dist/chunk-YUTWTI4B.js +0 -654
- package/dist/chunk-Z65KYU7I.js +0 -26
- package/dist/chunk-Z6POF5YC.js +0 -975
- package/dist/chunk-ZBJP6WFL.js +0 -482
- package/dist/chunk-ZD6OAMTH.js +0 -277
- package/dist/chunk-ZWKZCBO6.js +0 -317
- package/dist/contracts-DDrwxvJ-.d.cts +0 -245
- package/dist/contracts-DDrwxvJ-.d.ts +0 -245
- package/dist/contracts-DOrhwbke.d.cts +0 -245
- package/dist/contracts-DOrhwbke.d.ts +0 -245
- package/dist/contracts-xo5ckdRP.d.cts +0 -240
- package/dist/contracts-xo5ckdRP.d.ts +0 -240
- package/dist/customElement-BKQfbSZQ.d.cts +0 -262
- package/dist/customElement-BKQfbSZQ.d.ts +0 -262
- package/dist/customElement-D2DJp_xn.d.cts +0 -313
- package/dist/customElement-D2DJp_xn.d.ts +0 -313
- package/dist/customElement-yz8uyk-0.d.cts +0 -308
- package/dist/customElement-yz8uyk-0.d.ts +0 -308
- package/dist/introspect-Cb0zgpi2.d.cts +0 -477
- package/dist/introspect-Y2xNXGSf.d.ts +0 -477
- package/dist/plugin-Bek4RhJY.d.cts +0 -43
- package/dist/plugin-Bek4RhJY.d.ts +0 -43
- package/dist/ssr-3RXHP5ES.js +0 -38
- package/dist/ssr-6GIMY5MX.js +0 -38
- package/dist/ssr-BA6sxxUd.d.cts +0 -135
- package/dist/ssr-BA6sxxUd.d.ts +0 -135
- package/dist/ssr-WKUPVSSK.js +0 -36
- package/dist/tagFactory-Dl8QCLga.d.cts +0 -23
- package/dist/tagFactory-Dl8QCLga.d.ts +0 -23
package/dist/chunk-NMRUZALC.js
DELETED
|
@@ -1,1097 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
effect
|
|
3
|
-
} from "./chunk-PZEGYCF5.js";
|
|
4
|
-
import {
|
|
5
|
-
signal
|
|
6
|
-
} from "./chunk-YECR7UIA.js";
|
|
7
|
-
import {
|
|
8
|
-
isDev
|
|
9
|
-
} from "./chunk-4MYMUBRS.js";
|
|
10
|
-
|
|
11
|
-
// src/devtools/debug.ts
|
|
12
|
-
var debugEnabled = false;
|
|
13
|
-
var perfMarks = /* @__PURE__ */ new Map();
|
|
14
|
-
function enableDebug() {
|
|
15
|
-
debugEnabled = true;
|
|
16
|
-
console.log("[SibuJS] Debug mode enabled");
|
|
17
|
-
}
|
|
18
|
-
function disableDebug() {
|
|
19
|
-
debugEnabled = false;
|
|
20
|
-
}
|
|
21
|
-
function isDebugEnabled() {
|
|
22
|
-
return debugEnabled;
|
|
23
|
-
}
|
|
24
|
-
function debugLog(component, action, data) {
|
|
25
|
-
if (!debugEnabled) return;
|
|
26
|
-
console.log(`[SibuJS:${component}] ${action}`, data !== void 0 ? data : "");
|
|
27
|
-
}
|
|
28
|
-
function perfTracker(label) {
|
|
29
|
-
if (!perfMarks.has(label)) {
|
|
30
|
-
perfMarks.set(label, []);
|
|
31
|
-
}
|
|
32
|
-
let startTime = 0;
|
|
33
|
-
function startMeasure2() {
|
|
34
|
-
startTime = globalThis.performance.now();
|
|
35
|
-
}
|
|
36
|
-
function endMeasure() {
|
|
37
|
-
const elapsed = globalThis.performance.now() - startTime;
|
|
38
|
-
perfMarks.get(label)?.push(elapsed);
|
|
39
|
-
if (debugEnabled) {
|
|
40
|
-
debugLog("Perf", `${label}: ${elapsed.toFixed(2)}ms`);
|
|
41
|
-
}
|
|
42
|
-
return elapsed;
|
|
43
|
-
}
|
|
44
|
-
function getAverageTime() {
|
|
45
|
-
const times = perfMarks.get(label) || [];
|
|
46
|
-
if (times.length === 0) return 0;
|
|
47
|
-
return times.reduce((a, b) => a + b, 0) / times.length;
|
|
48
|
-
}
|
|
49
|
-
function getRenderCount() {
|
|
50
|
-
return (perfMarks.get(label) || []).length;
|
|
51
|
-
}
|
|
52
|
-
return { startMeasure: startMeasure2, endMeasure, getAverageTime, getRenderCount };
|
|
53
|
-
}
|
|
54
|
-
function measureRender(label, component) {
|
|
55
|
-
const perf = perfTracker(label);
|
|
56
|
-
return (props) => {
|
|
57
|
-
perf.startMeasure();
|
|
58
|
-
const el = component(props);
|
|
59
|
-
perf.endMeasure();
|
|
60
|
-
return el;
|
|
61
|
-
};
|
|
62
|
-
}
|
|
63
|
-
function getPerformanceReport() {
|
|
64
|
-
const report = {};
|
|
65
|
-
for (const [label, times] of perfMarks) {
|
|
66
|
-
if (times.length === 0) continue;
|
|
67
|
-
report[label] = {
|
|
68
|
-
count: times.length,
|
|
69
|
-
average: times.reduce((a, b) => a + b, 0) / times.length,
|
|
70
|
-
min: Math.min(...times),
|
|
71
|
-
max: Math.max(...times),
|
|
72
|
-
total: times.reduce((a, b) => a + b, 0)
|
|
73
|
-
};
|
|
74
|
-
}
|
|
75
|
-
return report;
|
|
76
|
-
}
|
|
77
|
-
function clearPerformanceData() {
|
|
78
|
-
perfMarks.clear();
|
|
79
|
-
}
|
|
80
|
-
var trackedCleanups = /* @__PURE__ */ new Map();
|
|
81
|
-
function trackCleanup(component, cleanup) {
|
|
82
|
-
if (!trackedCleanups.has(component)) {
|
|
83
|
-
trackedCleanups.set(component, []);
|
|
84
|
-
}
|
|
85
|
-
trackedCleanups.get(component)?.push(cleanup);
|
|
86
|
-
}
|
|
87
|
-
function runCleanups(component) {
|
|
88
|
-
const cleanups = trackedCleanups.get(component);
|
|
89
|
-
if (cleanups) {
|
|
90
|
-
for (const cleanup of cleanups) {
|
|
91
|
-
try {
|
|
92
|
-
cleanup();
|
|
93
|
-
} catch {
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
trackedCleanups.delete(component);
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
function checkLeaks() {
|
|
100
|
-
const leaks = {};
|
|
101
|
-
for (const [component, cleanups] of trackedCleanups) {
|
|
102
|
-
if (cleanups.length > 0) {
|
|
103
|
-
leaks[component] = cleanups.length;
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
if (debugEnabled && Object.keys(leaks).length > 0) {
|
|
107
|
-
console.warn("[SibuJS] Potential memory leaks detected:", leaks);
|
|
108
|
-
}
|
|
109
|
-
return leaks;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
// src/devtools/devtools.ts
|
|
113
|
-
function createGlobalHook() {
|
|
114
|
-
const listeners = /* @__PURE__ */ new Map();
|
|
115
|
-
const events = [];
|
|
116
|
-
const nodes = /* @__PURE__ */ new Map();
|
|
117
|
-
const components = /* @__PURE__ */ new Map();
|
|
118
|
-
return {
|
|
119
|
-
on(event, fn) {
|
|
120
|
-
let set = listeners.get(event);
|
|
121
|
-
if (!set) {
|
|
122
|
-
set = /* @__PURE__ */ new Set();
|
|
123
|
-
listeners.set(event, set);
|
|
124
|
-
}
|
|
125
|
-
set.add(fn);
|
|
126
|
-
},
|
|
127
|
-
off(event, fn) {
|
|
128
|
-
listeners.get(event)?.delete(fn);
|
|
129
|
-
},
|
|
130
|
-
emit(event, payload) {
|
|
131
|
-
events.push({ event, payload, ts: Date.now() });
|
|
132
|
-
if (events.length > 2e3) events.splice(0, events.length - 2e3);
|
|
133
|
-
const set = listeners.get(event);
|
|
134
|
-
if (set)
|
|
135
|
-
for (const fn of set)
|
|
136
|
-
try {
|
|
137
|
-
fn(payload);
|
|
138
|
-
} catch {
|
|
139
|
-
}
|
|
140
|
-
},
|
|
141
|
-
nodes,
|
|
142
|
-
components,
|
|
143
|
-
events,
|
|
144
|
-
connected: false,
|
|
145
|
-
sibuVersion: "1.0.0"
|
|
146
|
-
};
|
|
147
|
-
}
|
|
148
|
-
function getOrCreateHook() {
|
|
149
|
-
const g = globalThis;
|
|
150
|
-
if (!g.__SIBU_DEVTOOLS_GLOBAL_HOOK__) {
|
|
151
|
-
g.__SIBU_DEVTOOLS_GLOBAL_HOOK__ = createGlobalHook();
|
|
152
|
-
}
|
|
153
|
-
return g.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
|
|
154
|
-
}
|
|
155
|
-
var activeDevTools = null;
|
|
156
|
-
var nextNodeId = 0;
|
|
157
|
-
function getActiveDevTools() {
|
|
158
|
-
return activeDevTools;
|
|
159
|
-
}
|
|
160
|
-
function initDevTools(config) {
|
|
161
|
-
const maxEvents = config?.maxEvents ?? 1e3;
|
|
162
|
-
const enabled = config?.enabled ?? isDev();
|
|
163
|
-
if (!enabled) return createNoopApi();
|
|
164
|
-
const hook = getOrCreateHook();
|
|
165
|
-
nextNodeId = 0;
|
|
166
|
-
const eventLog = [];
|
|
167
|
-
hook.on("signal:create", (payload) => {
|
|
168
|
-
const p = payload;
|
|
169
|
-
nextNodeId++;
|
|
170
|
-
const name = inferName();
|
|
171
|
-
const node = {
|
|
172
|
-
id: nextNodeId,
|
|
173
|
-
type: "signal",
|
|
174
|
-
name,
|
|
175
|
-
ref: p.signal,
|
|
176
|
-
getter: p.getter,
|
|
177
|
-
createdAt: Date.now()
|
|
178
|
-
};
|
|
179
|
-
hook.nodes.set(nextNodeId, node);
|
|
180
|
-
});
|
|
181
|
-
hook.on("signal:update", (payload) => {
|
|
182
|
-
if (!isActive) return;
|
|
183
|
-
const p = payload;
|
|
184
|
-
if (devStateManagedRefs.has(p.signal)) return;
|
|
185
|
-
const node = findNodeByRef(hook, p.signal);
|
|
186
|
-
pushEvent(eventLog, maxEvents, {
|
|
187
|
-
type: "state-change",
|
|
188
|
-
component: node?.name || "unknown",
|
|
189
|
-
key: "value",
|
|
190
|
-
oldValue: p.oldValue,
|
|
191
|
-
newValue: p.newValue,
|
|
192
|
-
timestamp: Date.now()
|
|
193
|
-
});
|
|
194
|
-
});
|
|
195
|
-
hook.on("computed:create", (payload) => {
|
|
196
|
-
const p = payload;
|
|
197
|
-
nextNodeId++;
|
|
198
|
-
const name = inferName();
|
|
199
|
-
const node = {
|
|
200
|
-
id: nextNodeId,
|
|
201
|
-
type: "computed",
|
|
202
|
-
name,
|
|
203
|
-
ref: p.signal,
|
|
204
|
-
getter: p.getter,
|
|
205
|
-
createdAt: Date.now()
|
|
206
|
-
};
|
|
207
|
-
hook.nodes.set(nextNodeId, node);
|
|
208
|
-
});
|
|
209
|
-
hook.on("computed:update", (payload) => {
|
|
210
|
-
const p = payload;
|
|
211
|
-
const node = findNodeByRef(hook, p.signal);
|
|
212
|
-
pushEvent(eventLog, maxEvents, {
|
|
213
|
-
type: "state-change",
|
|
214
|
-
component: node?.name || "computed",
|
|
215
|
-
key: "value",
|
|
216
|
-
oldValue: p.oldValue,
|
|
217
|
-
newValue: p.newValue,
|
|
218
|
-
timestamp: Date.now()
|
|
219
|
-
});
|
|
220
|
-
});
|
|
221
|
-
hook.on("effect:create", (payload) => {
|
|
222
|
-
nextNodeId++;
|
|
223
|
-
const name = inferName();
|
|
224
|
-
const p = payload;
|
|
225
|
-
const node = { id: nextNodeId, type: "effect", name, ref: p.effectFn, createdAt: Date.now() };
|
|
226
|
-
hook.nodes.set(nextNodeId, node);
|
|
227
|
-
});
|
|
228
|
-
hook.on("effect:run", (payload) => {
|
|
229
|
-
const p = payload;
|
|
230
|
-
const node = findNodeByRef(hook, p.effectFn);
|
|
231
|
-
pushEvent(eventLog, maxEvents, {
|
|
232
|
-
type: "render",
|
|
233
|
-
component: node?.name || "effect",
|
|
234
|
-
duration: 0,
|
|
235
|
-
timestamp: Date.now()
|
|
236
|
-
});
|
|
237
|
-
});
|
|
238
|
-
hook.on("app:init", (payload) => {
|
|
239
|
-
const p = payload;
|
|
240
|
-
pushEvent(eventLog, maxEvents, {
|
|
241
|
-
type: "render",
|
|
242
|
-
component: "App",
|
|
243
|
-
duration: p.duration,
|
|
244
|
-
timestamp: Date.now()
|
|
245
|
-
});
|
|
246
|
-
if (typeof document !== "undefined") {
|
|
247
|
-
queueMicrotask(() => discoverComponents(hook, eventLog, maxEvents));
|
|
248
|
-
}
|
|
249
|
-
});
|
|
250
|
-
function record(event) {
|
|
251
|
-
if (isActive) pushEvent(eventLog, maxEvents, event);
|
|
252
|
-
}
|
|
253
|
-
function getEvents(filter) {
|
|
254
|
-
if (!filter) return eventLog.slice();
|
|
255
|
-
return eventLog.filter((e) => {
|
|
256
|
-
if (filter.type && e.type !== filter.type) return false;
|
|
257
|
-
if (filter.component && e.component !== filter.component) return false;
|
|
258
|
-
return true;
|
|
259
|
-
});
|
|
260
|
-
}
|
|
261
|
-
function clearEvents() {
|
|
262
|
-
eventLog.length = 0;
|
|
263
|
-
}
|
|
264
|
-
function registerComponent(name, element, state) {
|
|
265
|
-
hook.components.set(name, { element, state });
|
|
266
|
-
}
|
|
267
|
-
function unregisterComponent(name) {
|
|
268
|
-
hook.components.delete(name);
|
|
269
|
-
}
|
|
270
|
-
function getComponents() {
|
|
271
|
-
return new Map(hook.components);
|
|
272
|
-
}
|
|
273
|
-
function getSignals() {
|
|
274
|
-
const result = [];
|
|
275
|
-
for (const [, node] of hook.nodes) {
|
|
276
|
-
let value;
|
|
277
|
-
try {
|
|
278
|
-
if (node.getter) value = node.getter();
|
|
279
|
-
else if (node.ref && "value" in node.ref) value = node.ref.value;
|
|
280
|
-
else value = void 0;
|
|
281
|
-
} catch {
|
|
282
|
-
value = "<error>";
|
|
283
|
-
}
|
|
284
|
-
const subs = node.ref?.__s;
|
|
285
|
-
result.push({
|
|
286
|
-
id: node.id,
|
|
287
|
-
name: node.name,
|
|
288
|
-
type: node.type,
|
|
289
|
-
value,
|
|
290
|
-
subscriberCount: subs instanceof Set ? subs.size : 0
|
|
291
|
-
});
|
|
292
|
-
}
|
|
293
|
-
return result;
|
|
294
|
-
}
|
|
295
|
-
let isActive = enabled;
|
|
296
|
-
function isEnabled() {
|
|
297
|
-
return isActive;
|
|
298
|
-
}
|
|
299
|
-
function setEnabled(v) {
|
|
300
|
-
isActive = v;
|
|
301
|
-
}
|
|
302
|
-
function snapshot() {
|
|
303
|
-
const snap = {};
|
|
304
|
-
for (const [name, entry] of hook.components) snap[name] = entry.state ? { ...entry.state } : {};
|
|
305
|
-
return snap;
|
|
306
|
-
}
|
|
307
|
-
function highlightElement(name) {
|
|
308
|
-
const prev = document.querySelector("[data-sibu-highlight]");
|
|
309
|
-
if (prev) {
|
|
310
|
-
prev.style.outline = "";
|
|
311
|
-
prev.removeAttribute("data-sibu-highlight");
|
|
312
|
-
}
|
|
313
|
-
const entry = hook.components.get(name);
|
|
314
|
-
if (entry?.element?.isConnected) {
|
|
315
|
-
entry.element.style.outline = "2px solid #89b4fa";
|
|
316
|
-
entry.element.setAttribute("data-sibu-highlight", "true");
|
|
317
|
-
entry.element.scrollIntoView({ behavior: "smooth", block: "center" });
|
|
318
|
-
setTimeout(() => {
|
|
319
|
-
entry.element.style.outline = "";
|
|
320
|
-
entry.element.removeAttribute("data-sibu-highlight");
|
|
321
|
-
}, 3e3);
|
|
322
|
-
}
|
|
323
|
-
}
|
|
324
|
-
function destroy() {
|
|
325
|
-
eventLog.length = 0;
|
|
326
|
-
hook.nodes.clear();
|
|
327
|
-
hook.components.clear();
|
|
328
|
-
hook.events.length = 0;
|
|
329
|
-
isActive = false;
|
|
330
|
-
activeDevTools = null;
|
|
331
|
-
const g = globalThis;
|
|
332
|
-
if (g.__SIBU_DEVTOOLS__ === api) delete g.__SIBU_DEVTOOLS__;
|
|
333
|
-
if (g.__SIBU_DEVTOOLS_GLOBAL_HOOK__ === hook) delete g.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
|
|
334
|
-
}
|
|
335
|
-
const api = {
|
|
336
|
-
record,
|
|
337
|
-
getEvents,
|
|
338
|
-
clearEvents,
|
|
339
|
-
registerComponent,
|
|
340
|
-
unregisterComponent,
|
|
341
|
-
getComponents,
|
|
342
|
-
getSignals,
|
|
343
|
-
isEnabled,
|
|
344
|
-
setEnabled,
|
|
345
|
-
snapshot,
|
|
346
|
-
highlightElement,
|
|
347
|
-
destroy
|
|
348
|
-
};
|
|
349
|
-
if (typeof window !== "undefined") {
|
|
350
|
-
window.__SIBU_DEVTOOLS__ = api;
|
|
351
|
-
let changeVersion = 0;
|
|
352
|
-
const origPush = eventLog.push.bind(eventLog);
|
|
353
|
-
eventLog.push = (...args) => {
|
|
354
|
-
changeVersion++;
|
|
355
|
-
return origPush(...args);
|
|
356
|
-
};
|
|
357
|
-
const origNodeSet = hook.nodes.set.bind(hook.nodes);
|
|
358
|
-
hook.nodes.set = (k, v) => {
|
|
359
|
-
changeVersion++;
|
|
360
|
-
return origNodeSet(k, v);
|
|
361
|
-
};
|
|
362
|
-
const origCompSet = hook.components.set.bind(hook.components);
|
|
363
|
-
hook.components.set = (k, v) => {
|
|
364
|
-
changeVersion++;
|
|
365
|
-
return origCompSet(k, v);
|
|
366
|
-
};
|
|
367
|
-
window.__SIBU_DEVTOOLS_VERSION__ = () => changeVersion;
|
|
368
|
-
window.__SIBU_DEVTOOLS_DATA__ = () => {
|
|
369
|
-
const sArr = [];
|
|
370
|
-
for (const [, node] of hook.nodes) {
|
|
371
|
-
let val = "";
|
|
372
|
-
try {
|
|
373
|
-
let raw;
|
|
374
|
-
if (node.type === "signal" && node.ref && "value" in node.ref) {
|
|
375
|
-
raw = node.ref.value;
|
|
376
|
-
} else if (node.type === "computed" && node.ref) {
|
|
377
|
-
if (node.ref._d && node.ref._g) {
|
|
378
|
-
try {
|
|
379
|
-
raw = node.ref._g();
|
|
380
|
-
} catch {
|
|
381
|
-
raw = node.ref._v;
|
|
382
|
-
}
|
|
383
|
-
} else {
|
|
384
|
-
raw = node.ref._v;
|
|
385
|
-
}
|
|
386
|
-
} else if (node.type === "effect") {
|
|
387
|
-
raw = void 0;
|
|
388
|
-
} else if (node.ref && "value" in node.ref) {
|
|
389
|
-
raw = node.ref.value;
|
|
390
|
-
}
|
|
391
|
-
if (raw === void 0) val = "undefined";
|
|
392
|
-
else if (raw === null) val = "null";
|
|
393
|
-
else if (typeof raw === "object") val = JSON.stringify(raw);
|
|
394
|
-
else val = String(raw);
|
|
395
|
-
} catch {
|
|
396
|
-
val = "?";
|
|
397
|
-
}
|
|
398
|
-
const fullVal = val;
|
|
399
|
-
const shortVal = val.length > 80 ? `${val.substring(0, 80)}...` : val;
|
|
400
|
-
const subs = node.ref?.__s;
|
|
401
|
-
sArr.push({
|
|
402
|
-
id: node.id,
|
|
403
|
-
n: node.name,
|
|
404
|
-
tp: node.type,
|
|
405
|
-
v: shortVal,
|
|
406
|
-
fv: fullVal,
|
|
407
|
-
sc: subs instanceof Set ? subs.size : 0
|
|
408
|
-
});
|
|
409
|
-
}
|
|
410
|
-
function walkElement(el, depth) {
|
|
411
|
-
if (depth > 8) return [];
|
|
412
|
-
const result = [];
|
|
413
|
-
const max = Math.min(el.children.length, 50);
|
|
414
|
-
for (let i = 0; i < max; i++) {
|
|
415
|
-
const child = el.children[i];
|
|
416
|
-
const txtParts = [];
|
|
417
|
-
for (let ti = 0; ti < child.childNodes.length; ti++) {
|
|
418
|
-
const cn = child.childNodes[ti];
|
|
419
|
-
if (cn.nodeType === 3) {
|
|
420
|
-
const t = cn.textContent?.trim();
|
|
421
|
-
if (t) txtParts.push(t);
|
|
422
|
-
} else if (cn.nodeType === 1) {
|
|
423
|
-
const el2 = cn;
|
|
424
|
-
let directTxt = "";
|
|
425
|
-
for (let ci = 0; ci < el2.childNodes.length; ci++) {
|
|
426
|
-
if (el2.childNodes[ci].nodeType === 3) {
|
|
427
|
-
const t2 = el2.childNodes[ci].textContent?.trim();
|
|
428
|
-
if (t2) {
|
|
429
|
-
directTxt = t2;
|
|
430
|
-
break;
|
|
431
|
-
}
|
|
432
|
-
}
|
|
433
|
-
}
|
|
434
|
-
if (directTxt) txtParts.push(directTxt);
|
|
435
|
-
}
|
|
436
|
-
}
|
|
437
|
-
let txt = txtParts.join(" | ");
|
|
438
|
-
if (txt.length > 120) txt = `${txt.substring(0, 120)}...`;
|
|
439
|
-
let html = "";
|
|
440
|
-
try {
|
|
441
|
-
const outer = child.outerHTML || "";
|
|
442
|
-
html = outer.length > 500 ? `${outer.substring(0, 500)}...` : outer;
|
|
443
|
-
} catch {
|
|
444
|
-
html = "";
|
|
445
|
-
}
|
|
446
|
-
const ev = child.__sibu_events__ || [];
|
|
447
|
-
result.push({
|
|
448
|
-
tg: child.tagName ? child.tagName.toLowerCase() : "?",
|
|
449
|
-
id: child.id || "",
|
|
450
|
-
cl: (child.className || "").toString().split(" ").slice(0, 3).join(" "),
|
|
451
|
-
txt: txt.length > 60 ? `${txt.substring(0, 60)}...` : txt,
|
|
452
|
-
html,
|
|
453
|
-
ev,
|
|
454
|
-
ch: child.childElementCount > 0 ? walkElement(child, depth + 1) : []
|
|
455
|
-
});
|
|
456
|
-
}
|
|
457
|
-
return result;
|
|
458
|
-
}
|
|
459
|
-
const cArr = [];
|
|
460
|
-
for (const [name, entry] of hook.components) {
|
|
461
|
-
const el = entry.element;
|
|
462
|
-
cArr.push({
|
|
463
|
-
n: name,
|
|
464
|
-
tg: el?.tagName ? el.tagName.toLowerCase() : "?",
|
|
465
|
-
ch: el?.childElementCount || 0,
|
|
466
|
-
cn: !!el?.isConnected,
|
|
467
|
-
kids: el ? walkElement(el, 0) : []
|
|
468
|
-
});
|
|
469
|
-
}
|
|
470
|
-
const eArr = [];
|
|
471
|
-
const start = eventLog.length > 500 ? eventLog.length - 500 : 0;
|
|
472
|
-
for (let i = start; i < eventLog.length; i++) {
|
|
473
|
-
const e = eventLog[i];
|
|
474
|
-
let detail = "";
|
|
475
|
-
let ov = "";
|
|
476
|
-
let nv = "";
|
|
477
|
-
let key = "";
|
|
478
|
-
if (e.type === "state-change") {
|
|
479
|
-
const sc = e;
|
|
480
|
-
key = sc.key || "";
|
|
481
|
-
try {
|
|
482
|
-
ov = sc.oldValue === void 0 ? "undefined" : sc.oldValue === null ? "null" : typeof sc.oldValue === "object" ? JSON.stringify(sc.oldValue, null, 2) : String(sc.oldValue);
|
|
483
|
-
} catch {
|
|
484
|
-
ov = "?";
|
|
485
|
-
}
|
|
486
|
-
try {
|
|
487
|
-
nv = sc.newValue === void 0 ? "undefined" : sc.newValue === null ? "null" : typeof sc.newValue === "object" ? JSON.stringify(sc.newValue, null, 2) : String(sc.newValue);
|
|
488
|
-
} catch {
|
|
489
|
-
nv = "?";
|
|
490
|
-
}
|
|
491
|
-
const ovShort = ov.length > 40 ? `${ov.substring(0, 40)}...` : ov;
|
|
492
|
-
const nvShort = nv.length > 40 ? `${nv.substring(0, 40)}...` : nv;
|
|
493
|
-
detail = `${ovShort} \u2192 ${nvShort}`;
|
|
494
|
-
} else if (e.type === "render") {
|
|
495
|
-
detail = `${e.duration.toFixed(1)}ms`;
|
|
496
|
-
}
|
|
497
|
-
eArr.push({ t: e.type, c: e.component, ts: e.timestamp, d: detail, ov, nv, k: key });
|
|
498
|
-
}
|
|
499
|
-
return JSON.stringify({ s: sArr, c: cArr, e: eArr });
|
|
500
|
-
};
|
|
501
|
-
}
|
|
502
|
-
activeDevTools = api;
|
|
503
|
-
if (typeof document !== "undefined") {
|
|
504
|
-
const observer = new MutationObserver((mutations) => {
|
|
505
|
-
for (const m of mutations) {
|
|
506
|
-
for (const node of m.addedNodes) {
|
|
507
|
-
if (node instanceof HTMLElement) {
|
|
508
|
-
const name = node.getAttribute("data-component") || node.id;
|
|
509
|
-
if (name && !hook.components.has(name)) {
|
|
510
|
-
hook.components.set(name, { element: node });
|
|
511
|
-
pushEvent(eventLog, maxEvents, { type: "mount", component: name, element: node, timestamp: Date.now() });
|
|
512
|
-
}
|
|
513
|
-
}
|
|
514
|
-
}
|
|
515
|
-
for (const node of m.removedNodes) {
|
|
516
|
-
if (node instanceof HTMLElement) {
|
|
517
|
-
const name = node.getAttribute("data-component") || node.id;
|
|
518
|
-
if (name && hook.components.has(name)) {
|
|
519
|
-
pushEvent(eventLog, maxEvents, { type: "unmount", component: name, timestamp: Date.now() });
|
|
520
|
-
hook.components.delete(name);
|
|
521
|
-
}
|
|
522
|
-
}
|
|
523
|
-
}
|
|
524
|
-
}
|
|
525
|
-
});
|
|
526
|
-
queueMicrotask(() => {
|
|
527
|
-
if (!document.body) return;
|
|
528
|
-
observer.observe(document.body, { childList: true, subtree: true });
|
|
529
|
-
document.querySelectorAll("[data-component]").forEach((el) => {
|
|
530
|
-
const name = el.getAttribute("data-component");
|
|
531
|
-
if (!hook.components.has(name)) {
|
|
532
|
-
hook.components.set(name, { element: el });
|
|
533
|
-
pushEvent(eventLog, maxEvents, {
|
|
534
|
-
type: "mount",
|
|
535
|
-
component: name,
|
|
536
|
-
element: el,
|
|
537
|
-
timestamp: Date.now()
|
|
538
|
-
});
|
|
539
|
-
}
|
|
540
|
-
});
|
|
541
|
-
document.querySelectorAll("[id]").forEach((el) => {
|
|
542
|
-
if (el.id && !hook.components.has(el.id)) {
|
|
543
|
-
hook.components.set(el.id, { element: el });
|
|
544
|
-
pushEvent(eventLog, maxEvents, {
|
|
545
|
-
type: "mount",
|
|
546
|
-
component: el.id,
|
|
547
|
-
element: el,
|
|
548
|
-
timestamp: Date.now()
|
|
549
|
-
});
|
|
550
|
-
}
|
|
551
|
-
});
|
|
552
|
-
const semanticTags = ["section", "aside", "nav", "main", "header", "footer", "article"];
|
|
553
|
-
for (const tag of semanticTags) {
|
|
554
|
-
document.querySelectorAll(tag).forEach((el, i) => {
|
|
555
|
-
const name = el.getAttribute("data-component") || el.id || `${tag}-${i}`;
|
|
556
|
-
if (!hook.components.has(name)) {
|
|
557
|
-
hook.components.set(name, { element: el });
|
|
558
|
-
pushEvent(eventLog, maxEvents, {
|
|
559
|
-
type: "mount",
|
|
560
|
-
component: name,
|
|
561
|
-
element: el,
|
|
562
|
-
timestamp: Date.now()
|
|
563
|
-
});
|
|
564
|
-
}
|
|
565
|
-
});
|
|
566
|
-
}
|
|
567
|
-
});
|
|
568
|
-
}
|
|
569
|
-
return api;
|
|
570
|
-
}
|
|
571
|
-
function inferName() {
|
|
572
|
-
try {
|
|
573
|
-
const stack = new Error().stack || "";
|
|
574
|
-
for (const line of stack.split("\n")) {
|
|
575
|
-
const t = line.trim();
|
|
576
|
-
if (t.includes("signal") || t.includes("derived") || t.includes("effect") || t.includes("initDevTools") || t.includes("devtools") || t.includes("Error") || t.includes("emit") || t.includes("getOrCreateHook"))
|
|
577
|
-
continue;
|
|
578
|
-
const m = t.match(/at\s+(\w+)/);
|
|
579
|
-
if (m && m[1] !== "Object" && m[1] !== "Module" && m[1] !== "anonymous") return m[1];
|
|
580
|
-
const f = t.match(/\/([^/]+?)\.(?:ts|js|tsx|jsx)/);
|
|
581
|
-
if (f) return f[1];
|
|
582
|
-
}
|
|
583
|
-
} catch {
|
|
584
|
-
}
|
|
585
|
-
return "anonymous";
|
|
586
|
-
}
|
|
587
|
-
function findNodeByRef(hook, ref) {
|
|
588
|
-
for (const [, node] of hook.nodes) {
|
|
589
|
-
if (node.ref === ref) return node;
|
|
590
|
-
}
|
|
591
|
-
return void 0;
|
|
592
|
-
}
|
|
593
|
-
function pushEvent(log, max, event) {
|
|
594
|
-
log.push(event);
|
|
595
|
-
if (log.length > max) log.splice(0, log.length - max);
|
|
596
|
-
}
|
|
597
|
-
function discoverComponents(hook, log, max) {
|
|
598
|
-
if (!document.body) return;
|
|
599
|
-
document.querySelectorAll("[id]").forEach((el) => {
|
|
600
|
-
if (el.id && !hook.components.has(el.id)) {
|
|
601
|
-
hook.components.set(el.id, { element: el });
|
|
602
|
-
pushEvent(log, max, { type: "mount", component: el.id, element: el, timestamp: Date.now() });
|
|
603
|
-
}
|
|
604
|
-
});
|
|
605
|
-
document.querySelectorAll("[data-component]").forEach((el) => {
|
|
606
|
-
const name = el.getAttribute("data-component");
|
|
607
|
-
if (!hook.components.has(name)) {
|
|
608
|
-
hook.components.set(name, { element: el });
|
|
609
|
-
pushEvent(log, max, { type: "mount", component: name, element: el, timestamp: Date.now() });
|
|
610
|
-
}
|
|
611
|
-
});
|
|
612
|
-
}
|
|
613
|
-
function createNoopApi() {
|
|
614
|
-
const noop = () => {
|
|
615
|
-
};
|
|
616
|
-
return {
|
|
617
|
-
record: noop,
|
|
618
|
-
getEvents: () => [],
|
|
619
|
-
clearEvents: noop,
|
|
620
|
-
registerComponent: noop,
|
|
621
|
-
unregisterComponent: noop,
|
|
622
|
-
getComponents: () => /* @__PURE__ */ new Map(),
|
|
623
|
-
getSignals: () => [],
|
|
624
|
-
isEnabled: () => false,
|
|
625
|
-
setEnabled: noop,
|
|
626
|
-
snapshot: () => ({}),
|
|
627
|
-
highlightElement: noop,
|
|
628
|
-
destroy: noop
|
|
629
|
-
};
|
|
630
|
-
}
|
|
631
|
-
var devStateManagedRefs = /* @__PURE__ */ new WeakSet();
|
|
632
|
-
function devState(name, initial) {
|
|
633
|
-
const hook = globalThis.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
|
|
634
|
-
const nodeCountBefore = hook ? hook.nodes.size : 0;
|
|
635
|
-
const [get, set] = signal(initial);
|
|
636
|
-
if (hook && hook.nodes.size > nodeCountBefore) {
|
|
637
|
-
const entries = Array.from(hook.nodes.values());
|
|
638
|
-
const lastNode = entries[entries.length - 1];
|
|
639
|
-
if (lastNode) {
|
|
640
|
-
lastNode.name = name;
|
|
641
|
-
if (lastNode.ref) devStateManagedRefs.add(lastNode.ref);
|
|
642
|
-
}
|
|
643
|
-
}
|
|
644
|
-
const dotIndex = name.indexOf(".");
|
|
645
|
-
const component = dotIndex !== -1 ? name.slice(0, dotIndex) : name;
|
|
646
|
-
const key = dotIndex !== -1 ? name.slice(dotIndex + 1) : name;
|
|
647
|
-
function trackedSet(next) {
|
|
648
|
-
const oldValue = get();
|
|
649
|
-
set(next);
|
|
650
|
-
const newValue = get();
|
|
651
|
-
const dt = activeDevTools;
|
|
652
|
-
if (dt?.isEnabled() && !Object.is(oldValue, newValue)) {
|
|
653
|
-
dt.record({ type: "state-change", component, key, oldValue, newValue, timestamp: Date.now() });
|
|
654
|
-
}
|
|
655
|
-
}
|
|
656
|
-
return [get, trackedSet];
|
|
657
|
-
}
|
|
658
|
-
|
|
659
|
-
// src/devtools/hmr.ts
|
|
660
|
-
var hmrStateStore = /* @__PURE__ */ new Map();
|
|
661
|
-
var hmrRegistry = /* @__PURE__ */ new Map();
|
|
662
|
-
function hmrState(id, initial) {
|
|
663
|
-
const restored = hmrStateStore.has(id) ? hmrStateStore.get(id) : initial;
|
|
664
|
-
const [get, set] = signal(restored);
|
|
665
|
-
function hmrSet(next) {
|
|
666
|
-
set(next);
|
|
667
|
-
hmrStateStore.set(id, get());
|
|
668
|
-
}
|
|
669
|
-
hmrStateStore.set(id, restored);
|
|
670
|
-
return [get, hmrSet];
|
|
671
|
-
}
|
|
672
|
-
function registerHMR(id, component, container) {
|
|
673
|
-
const currentElement = component();
|
|
674
|
-
const entry = {
|
|
675
|
-
component,
|
|
676
|
-
container,
|
|
677
|
-
currentElement,
|
|
678
|
-
disposeCallbacks: []
|
|
679
|
-
};
|
|
680
|
-
hmrRegistry.set(id, entry);
|
|
681
|
-
if (container) {
|
|
682
|
-
container.appendChild(currentElement);
|
|
683
|
-
}
|
|
684
|
-
function update(newComponent) {
|
|
685
|
-
const reg = hmrRegistry.get(id);
|
|
686
|
-
if (!reg) return;
|
|
687
|
-
for (const cb of reg.disposeCallbacks) {
|
|
688
|
-
try {
|
|
689
|
-
cb();
|
|
690
|
-
} catch {
|
|
691
|
-
}
|
|
692
|
-
}
|
|
693
|
-
reg.disposeCallbacks.length = 0;
|
|
694
|
-
const newElement = newComponent();
|
|
695
|
-
if (reg.currentElement?.parentNode) {
|
|
696
|
-
reg.currentElement.parentNode.replaceChild(newElement, reg.currentElement);
|
|
697
|
-
}
|
|
698
|
-
reg.component = newComponent;
|
|
699
|
-
reg.currentElement = newElement;
|
|
700
|
-
}
|
|
701
|
-
function dispose() {
|
|
702
|
-
const reg = hmrRegistry.get(id);
|
|
703
|
-
if (!reg) return;
|
|
704
|
-
for (const cb of reg.disposeCallbacks) {
|
|
705
|
-
try {
|
|
706
|
-
cb();
|
|
707
|
-
} catch {
|
|
708
|
-
}
|
|
709
|
-
}
|
|
710
|
-
if (reg.currentElement?.parentNode) {
|
|
711
|
-
reg.currentElement.parentNode.removeChild(reg.currentElement);
|
|
712
|
-
}
|
|
713
|
-
hmrRegistry.delete(id);
|
|
714
|
-
}
|
|
715
|
-
return { update, dispose };
|
|
716
|
-
}
|
|
717
|
-
function createHMRBoundary(id) {
|
|
718
|
-
let currentElement = null;
|
|
719
|
-
let currentComponent = null;
|
|
720
|
-
const acceptCallbacks = [];
|
|
721
|
-
const disposeCallbacks = [];
|
|
722
|
-
function wrap(component) {
|
|
723
|
-
currentComponent = component;
|
|
724
|
-
const wrapper = document.createElement("div");
|
|
725
|
-
wrapper.setAttribute("data-hmr-boundary", id);
|
|
726
|
-
const element = component();
|
|
727
|
-
currentElement = element;
|
|
728
|
-
wrapper.appendChild(element);
|
|
729
|
-
hmrRegistry.set(`boundary:${id}`, {
|
|
730
|
-
component,
|
|
731
|
-
container: wrapper,
|
|
732
|
-
currentElement: element,
|
|
733
|
-
disposeCallbacks
|
|
734
|
-
});
|
|
735
|
-
return wrapper;
|
|
736
|
-
}
|
|
737
|
-
function accept(callback) {
|
|
738
|
-
if (callback) {
|
|
739
|
-
acceptCallbacks.push(callback);
|
|
740
|
-
}
|
|
741
|
-
if (typeof globalThis.__SIBU_HMR_ACCEPT__ === "function") {
|
|
742
|
-
globalThis.__SIBU_HMR_ACCEPT__(
|
|
743
|
-
id,
|
|
744
|
-
() => {
|
|
745
|
-
for (const cb of disposeCallbacks) {
|
|
746
|
-
try {
|
|
747
|
-
cb();
|
|
748
|
-
} catch {
|
|
749
|
-
}
|
|
750
|
-
}
|
|
751
|
-
disposeCallbacks.length = 0;
|
|
752
|
-
if (currentComponent && currentElement?.parentNode) {
|
|
753
|
-
const newElement = currentComponent();
|
|
754
|
-
currentElement.parentNode.replaceChild(newElement, currentElement);
|
|
755
|
-
currentElement = newElement;
|
|
756
|
-
}
|
|
757
|
-
for (const cb of acceptCallbacks) {
|
|
758
|
-
try {
|
|
759
|
-
cb();
|
|
760
|
-
} catch {
|
|
761
|
-
}
|
|
762
|
-
}
|
|
763
|
-
}
|
|
764
|
-
);
|
|
765
|
-
}
|
|
766
|
-
}
|
|
767
|
-
function disposeFn(callback) {
|
|
768
|
-
disposeCallbacks.push(callback);
|
|
769
|
-
}
|
|
770
|
-
return { wrap, accept, dispose: disposeFn };
|
|
771
|
-
}
|
|
772
|
-
function clearHMRState() {
|
|
773
|
-
hmrStateStore.clear();
|
|
774
|
-
hmrRegistry.clear();
|
|
775
|
-
}
|
|
776
|
-
function isHMRAvailable() {
|
|
777
|
-
const g = globalThis;
|
|
778
|
-
if (g.module?.hot) {
|
|
779
|
-
return true;
|
|
780
|
-
}
|
|
781
|
-
if (typeof g.__SIBU_HMR_ACCEPT__ === "function") {
|
|
782
|
-
return true;
|
|
783
|
-
}
|
|
784
|
-
if (g.module?.hot) {
|
|
785
|
-
return true;
|
|
786
|
-
}
|
|
787
|
-
return false;
|
|
788
|
-
}
|
|
789
|
-
|
|
790
|
-
// src/devtools/sourceMaps.ts
|
|
791
|
-
var SibuError = class _SibuError extends Error {
|
|
792
|
-
constructor(message, options) {
|
|
793
|
-
super(message);
|
|
794
|
-
if (options?.cause) {
|
|
795
|
-
this.cause = options.cause;
|
|
796
|
-
}
|
|
797
|
-
this.name = "SibuError";
|
|
798
|
-
this.component = options?.component;
|
|
799
|
-
this.props = options?.props;
|
|
800
|
-
Object.setPrototypeOf(this, _SibuError.prototype);
|
|
801
|
-
}
|
|
802
|
-
};
|
|
803
|
-
function createErrorReporter(options) {
|
|
804
|
-
const logToConsole = options?.logToConsole ?? true;
|
|
805
|
-
const maxErrors = options?.maxErrors ?? 500;
|
|
806
|
-
const errors = [];
|
|
807
|
-
function report(error, context) {
|
|
808
|
-
let sibuError;
|
|
809
|
-
if (error instanceof SibuError) {
|
|
810
|
-
sibuError = error;
|
|
811
|
-
if (context?.component && !sibuError.component) {
|
|
812
|
-
sibuError.component = context.component;
|
|
813
|
-
}
|
|
814
|
-
if (context?.props && !sibuError.props) {
|
|
815
|
-
sibuError.props = context.props;
|
|
816
|
-
}
|
|
817
|
-
} else {
|
|
818
|
-
sibuError = new SibuError(error.message, {
|
|
819
|
-
component: context?.component,
|
|
820
|
-
props: context?.props,
|
|
821
|
-
cause: error
|
|
822
|
-
});
|
|
823
|
-
sibuError.stack = error.stack;
|
|
824
|
-
}
|
|
825
|
-
errors.push(sibuError);
|
|
826
|
-
if (errors.length > maxErrors) {
|
|
827
|
-
errors.splice(0, errors.length - maxErrors);
|
|
828
|
-
}
|
|
829
|
-
if (logToConsole) {
|
|
830
|
-
console.error(formatError(sibuError, { component: sibuError.component }));
|
|
831
|
-
}
|
|
832
|
-
if (options?.onError) {
|
|
833
|
-
try {
|
|
834
|
-
options.onError(sibuError);
|
|
835
|
-
} catch {
|
|
836
|
-
}
|
|
837
|
-
}
|
|
838
|
-
}
|
|
839
|
-
function getErrors() {
|
|
840
|
-
return errors.slice();
|
|
841
|
-
}
|
|
842
|
-
function clear() {
|
|
843
|
-
errors.length = 0;
|
|
844
|
-
}
|
|
845
|
-
function getErrorsByComponent() {
|
|
846
|
-
const map = /* @__PURE__ */ new Map();
|
|
847
|
-
for (const err of errors) {
|
|
848
|
-
const key = err.component ?? "<unknown>";
|
|
849
|
-
let list = map.get(key);
|
|
850
|
-
if (!list) {
|
|
851
|
-
list = [];
|
|
852
|
-
map.set(key, list);
|
|
853
|
-
}
|
|
854
|
-
list.push(err);
|
|
855
|
-
}
|
|
856
|
-
return map;
|
|
857
|
-
}
|
|
858
|
-
return { report, getErrors, clear, getErrorsByComponent };
|
|
859
|
-
}
|
|
860
|
-
function withErrorTracking(name, component, reporter) {
|
|
861
|
-
const rep = reporter ?? createErrorReporter();
|
|
862
|
-
return () => {
|
|
863
|
-
try {
|
|
864
|
-
return component();
|
|
865
|
-
} catch (err) {
|
|
866
|
-
const error = err instanceof Error ? err : new Error(String(err));
|
|
867
|
-
rep.report(error, { component: name });
|
|
868
|
-
const fallback = document.createElement("div");
|
|
869
|
-
fallback.setAttribute("data-sibu-error", name);
|
|
870
|
-
fallback.style.cssText = "border:2px solid red;padding:12px;margin:4px;font-family:monospace;color:red;background:#fff0f0;";
|
|
871
|
-
fallback.textContent = `[SibuJS] ${name}: ${error.message}`;
|
|
872
|
-
return fallback;
|
|
873
|
-
}
|
|
874
|
-
};
|
|
875
|
-
}
|
|
876
|
-
function formatError(error, context) {
|
|
877
|
-
const lines = [];
|
|
878
|
-
const componentLabel = context?.component ?? (error instanceof SibuError ? error.component : void 0);
|
|
879
|
-
if (componentLabel) {
|
|
880
|
-
lines.push(`[SibuJS:${componentLabel}] ${error.name}: ${error.message}`);
|
|
881
|
-
} else {
|
|
882
|
-
lines.push(`[SibuJS] ${error.name}: ${error.message}`);
|
|
883
|
-
}
|
|
884
|
-
if (error instanceof SibuError && error.props) {
|
|
885
|
-
try {
|
|
886
|
-
lines.push(` Props: ${JSON.stringify(error.props)}`);
|
|
887
|
-
} catch {
|
|
888
|
-
lines.push(" Props: [unserializable]");
|
|
889
|
-
}
|
|
890
|
-
}
|
|
891
|
-
if (error.stack) {
|
|
892
|
-
const rawStack = error.stack;
|
|
893
|
-
const stackStart = rawStack.indexOf("\n");
|
|
894
|
-
const stackBody = stackStart !== -1 ? rawStack.slice(stackStart) : rawStack;
|
|
895
|
-
if (componentLabel) {
|
|
896
|
-
lines.push(` --- in <${componentLabel}> ---`);
|
|
897
|
-
}
|
|
898
|
-
lines.push(stackBody);
|
|
899
|
-
}
|
|
900
|
-
const cause = error.cause;
|
|
901
|
-
if (cause instanceof Error) {
|
|
902
|
-
lines.push("");
|
|
903
|
-
lines.push("Caused by:");
|
|
904
|
-
lines.push(formatError(cause));
|
|
905
|
-
}
|
|
906
|
-
return lines.join("\n");
|
|
907
|
-
}
|
|
908
|
-
|
|
909
|
-
// src/devtools/debugValue.ts
|
|
910
|
-
var debugValues = [];
|
|
911
|
-
function debugValue(value, formatter) {
|
|
912
|
-
const format = formatter ?? ((v) => String(v));
|
|
913
|
-
const entry = { value: void 0, label: "" };
|
|
914
|
-
debugValues.push(entry);
|
|
915
|
-
const dispose = effect(() => {
|
|
916
|
-
const resolved = value();
|
|
917
|
-
entry.value = resolved;
|
|
918
|
-
entry.label = format(resolved);
|
|
919
|
-
});
|
|
920
|
-
return () => {
|
|
921
|
-
dispose();
|
|
922
|
-
const idx = debugValues.indexOf(entry);
|
|
923
|
-
if (idx !== -1) debugValues.splice(idx, 1);
|
|
924
|
-
};
|
|
925
|
-
}
|
|
926
|
-
function getDebugValues() {
|
|
927
|
-
return [...debugValues];
|
|
928
|
-
}
|
|
929
|
-
function clearDebugValues() {
|
|
930
|
-
debugValues.length = 0;
|
|
931
|
-
}
|
|
932
|
-
|
|
933
|
-
// src/devtools/componentProfiler.ts
|
|
934
|
-
var RECORD = /* @__PURE__ */ Symbol("profiler.record");
|
|
935
|
-
function createProfiler(_name) {
|
|
936
|
-
const [renderCount, setRenderCount] = signal(0);
|
|
937
|
-
const [lastRenderTime, setLastRenderTime] = signal(0);
|
|
938
|
-
const [totalRenderTime, setTotalRenderTime] = signal(0);
|
|
939
|
-
const averageRenderTime = () => {
|
|
940
|
-
const count = renderCount();
|
|
941
|
-
if (count === 0) return 0;
|
|
942
|
-
return totalRenderTime() / count;
|
|
943
|
-
};
|
|
944
|
-
const reset = () => {
|
|
945
|
-
setRenderCount(0);
|
|
946
|
-
setLastRenderTime(0);
|
|
947
|
-
setTotalRenderTime(0);
|
|
948
|
-
};
|
|
949
|
-
const profiler = {
|
|
950
|
-
renderCount,
|
|
951
|
-
lastRenderTime,
|
|
952
|
-
averageRenderTime,
|
|
953
|
-
totalRenderTime,
|
|
954
|
-
reset,
|
|
955
|
-
[RECORD]: (elapsed) => {
|
|
956
|
-
setRenderCount((prev) => prev + 1);
|
|
957
|
-
setLastRenderTime(elapsed);
|
|
958
|
-
setTotalRenderTime((prev) => prev + elapsed);
|
|
959
|
-
}
|
|
960
|
-
};
|
|
961
|
-
return profiler;
|
|
962
|
-
}
|
|
963
|
-
function startMeasure(profiler) {
|
|
964
|
-
const start = performance.now();
|
|
965
|
-
return () => {
|
|
966
|
-
const elapsed = performance.now() - start;
|
|
967
|
-
const internal = profiler;
|
|
968
|
-
if (internal[RECORD]) {
|
|
969
|
-
internal[RECORD](elapsed);
|
|
970
|
-
}
|
|
971
|
-
};
|
|
972
|
-
}
|
|
973
|
-
|
|
974
|
-
// src/devtools/devtoolsOverlay.ts
|
|
975
|
-
function createDevtoolsOverlay(options) {
|
|
976
|
-
const [enabled, setEnabled] = signal(options?.enabled ?? false);
|
|
977
|
-
const panels = [];
|
|
978
|
-
const isEnabled = () => {
|
|
979
|
-
return enabled();
|
|
980
|
-
};
|
|
981
|
-
const toggle = () => {
|
|
982
|
-
setEnabled((prev) => !prev);
|
|
983
|
-
};
|
|
984
|
-
const addPanel = (name, render) => {
|
|
985
|
-
const existing = panels.findIndex((p) => p.name === name);
|
|
986
|
-
if (existing !== -1) {
|
|
987
|
-
panels[existing] = { name, render };
|
|
988
|
-
} else {
|
|
989
|
-
panels.push({ name, render });
|
|
990
|
-
}
|
|
991
|
-
};
|
|
992
|
-
const removePanel = (name) => {
|
|
993
|
-
const index = panels.findIndex((p) => p.name === name);
|
|
994
|
-
if (index !== -1) {
|
|
995
|
-
panels.splice(index, 1);
|
|
996
|
-
}
|
|
997
|
-
};
|
|
998
|
-
const getPanels = () => {
|
|
999
|
-
return [...panels];
|
|
1000
|
-
};
|
|
1001
|
-
const dispose = () => {
|
|
1002
|
-
panels.length = 0;
|
|
1003
|
-
setEnabled(false);
|
|
1004
|
-
};
|
|
1005
|
-
return { isEnabled, toggle, addPanel, removePanel, getPanels, dispose };
|
|
1006
|
-
}
|
|
1007
|
-
|
|
1008
|
-
// src/devtools/introspect.ts
|
|
1009
|
-
var SUBS = "__s";
|
|
1010
|
-
function getSignalName(getter) {
|
|
1011
|
-
return getter.__name;
|
|
1012
|
-
}
|
|
1013
|
-
function getSubscriberCount(getter) {
|
|
1014
|
-
const signal2 = getter.__signal;
|
|
1015
|
-
if (!signal2) return 0;
|
|
1016
|
-
const subs = signal2[SUBS];
|
|
1017
|
-
return subs ? subs.size : 0;
|
|
1018
|
-
}
|
|
1019
|
-
function getDependencies(subscriberFn) {
|
|
1020
|
-
const deps = subscriberFn._deps;
|
|
1021
|
-
return deps ? Array.from(deps) : [];
|
|
1022
|
-
}
|
|
1023
|
-
function inspectSignal(getter) {
|
|
1024
|
-
const signal2 = getter.__signal;
|
|
1025
|
-
if (!signal2) return null;
|
|
1026
|
-
const subs = signal2[SUBS];
|
|
1027
|
-
return {
|
|
1028
|
-
name: getter.__name,
|
|
1029
|
-
signal: signal2,
|
|
1030
|
-
subscriberCount: subs ? subs.size : 0
|
|
1031
|
-
};
|
|
1032
|
-
}
|
|
1033
|
-
function walkDependencyGraph(getter, maxDepth = 10) {
|
|
1034
|
-
const signal2 = getter.__signal;
|
|
1035
|
-
if (!signal2 || maxDepth <= 0) {
|
|
1036
|
-
return { name: getSignalName(getter), subscribers: 0, downstream: [] };
|
|
1037
|
-
}
|
|
1038
|
-
const subs = signal2[SUBS];
|
|
1039
|
-
const downstream = [];
|
|
1040
|
-
if (subs) {
|
|
1041
|
-
for (const sub of subs) {
|
|
1042
|
-
const subSig = sub._sig;
|
|
1043
|
-
if (subSig) {
|
|
1044
|
-
const subName = subSig.__name;
|
|
1045
|
-
const subSubs = subSig[SUBS];
|
|
1046
|
-
downstream.push({
|
|
1047
|
-
name: subName,
|
|
1048
|
-
subscribers: subSubs ? subSubs.size : 0,
|
|
1049
|
-
downstream: []
|
|
1050
|
-
// Could recurse but we keep it simple
|
|
1051
|
-
});
|
|
1052
|
-
}
|
|
1053
|
-
}
|
|
1054
|
-
}
|
|
1055
|
-
return {
|
|
1056
|
-
name: getSignalName(getter),
|
|
1057
|
-
subscribers: subs ? subs.size : 0,
|
|
1058
|
-
downstream
|
|
1059
|
-
};
|
|
1060
|
-
}
|
|
1061
|
-
|
|
1062
|
-
export {
|
|
1063
|
-
enableDebug,
|
|
1064
|
-
disableDebug,
|
|
1065
|
-
isDebugEnabled,
|
|
1066
|
-
debugLog,
|
|
1067
|
-
perfTracker,
|
|
1068
|
-
measureRender,
|
|
1069
|
-
getPerformanceReport,
|
|
1070
|
-
clearPerformanceData,
|
|
1071
|
-
trackCleanup,
|
|
1072
|
-
runCleanups,
|
|
1073
|
-
checkLeaks,
|
|
1074
|
-
getActiveDevTools,
|
|
1075
|
-
initDevTools,
|
|
1076
|
-
devState,
|
|
1077
|
-
hmrState,
|
|
1078
|
-
registerHMR,
|
|
1079
|
-
createHMRBoundary,
|
|
1080
|
-
clearHMRState,
|
|
1081
|
-
isHMRAvailable,
|
|
1082
|
-
SibuError,
|
|
1083
|
-
createErrorReporter,
|
|
1084
|
-
withErrorTracking,
|
|
1085
|
-
formatError,
|
|
1086
|
-
debugValue,
|
|
1087
|
-
getDebugValues,
|
|
1088
|
-
clearDebugValues,
|
|
1089
|
-
createProfiler,
|
|
1090
|
-
startMeasure,
|
|
1091
|
-
createDevtoolsOverlay,
|
|
1092
|
-
getSignalName,
|
|
1093
|
-
getSubscriberCount,
|
|
1094
|
-
getDependencies,
|
|
1095
|
-
inspectSignal,
|
|
1096
|
-
walkDependencyGraph
|
|
1097
|
-
};
|