mates-devtools 0.1.0-beta.1 → 0.1.0-beta.3
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/README.md +188 -0
- package/dist/mates-devtools.es.js +29 -30
- package/dist/mates-devtools.umd.js +70 -70
- package/package.json +3 -2
package/README.md
ADDED
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
# mates-devtools
|
|
2
|
+
|
|
3
|
+
In-app developer tools panel for the [Mates](https://www.npmjs.com/package/mates) framework.
|
|
4
|
+
|
|
5
|
+
Renders a floating FAB button that opens a resizable panel giving you full
|
|
6
|
+
visibility into your running app — components, atoms, hooks, logs, network
|
|
7
|
+
requests, and performance timings — all without leaving the browser.
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
## Installation
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install mates-devtools
|
|
15
|
+
# mates is a required peer dependency
|
|
16
|
+
npm install mates
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
## Quick start
|
|
22
|
+
|
|
23
|
+
Call `renderMatesDevTools()` **before** `renderX()` so hooks are installed
|
|
24
|
+
before any component mounts.
|
|
25
|
+
|
|
26
|
+
```ts
|
|
27
|
+
import { renderX } from "mates";
|
|
28
|
+
import { renderMatesDevTools } from "mates-devtools";
|
|
29
|
+
import { App } from "./App";
|
|
30
|
+
|
|
31
|
+
renderMatesDevTools(); // 👈 must come first
|
|
32
|
+
renderX(App, document.getElementById("app")!);
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
A ⚙️ FAB appears in the bottom-right corner of the page. Click it to open the
|
|
36
|
+
panel.
|
|
37
|
+
|
|
38
|
+
---
|
|
39
|
+
|
|
40
|
+
## API
|
|
41
|
+
|
|
42
|
+
### `renderMatesDevTools()`
|
|
43
|
+
|
|
44
|
+
Installs the framework hooks and renders the FAB + panel into `document.body`.
|
|
45
|
+
Safe to call multiple times — subsequent calls are no-ops.
|
|
46
|
+
|
|
47
|
+
```ts
|
|
48
|
+
import { renderMatesDevTools } from "mates-devtools";
|
|
49
|
+
renderMatesDevTools();
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### `destroyMatesDevTools()`
|
|
53
|
+
|
|
54
|
+
Tears down the FAB, the panel, all subscriptions, and the framework hooks.
|
|
55
|
+
Safe to call even if DevTools was never started.
|
|
56
|
+
|
|
57
|
+
```ts
|
|
58
|
+
import { destroyMatesDevTools } from "mates-devtools";
|
|
59
|
+
destroyMatesDevTools();
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
---
|
|
63
|
+
|
|
64
|
+
## Panel tabs
|
|
65
|
+
|
|
66
|
+
| Tab | What you see |
|
|
67
|
+
|-----|-------------|
|
|
68
|
+
| **Components** | Live component tree with mount count, render count, and version badges that flash on every re-render. Click any component to inspect its props, scopes, atoms, hooks, and `useState` values. |
|
|
69
|
+
| **Logs** | Timestamped stream of component lifecycle events (mount / render / unmount), atom reads/writes, event triggers, and Fetch requests/responses/errors. |
|
|
70
|
+
| **Performance** | Per-component render timing: total time, average time, slowest render, and a micro bar chart of the last 20 renders. |
|
|
71
|
+
| **Timers** | Active `setInterval` / `setTimeout` calls tracked by the devtools timer interceptor, so you can spot runaway timers. |
|
|
72
|
+
|
|
73
|
+
---
|
|
74
|
+
|
|
75
|
+
## Component inspector
|
|
76
|
+
|
|
77
|
+
Selecting a component in the left-hand list reveals a right-hand inspector with
|
|
78
|
+
five collapsible sections:
|
|
79
|
+
|
|
80
|
+
- **Props** — current prop values rendered as a collapsible value tree.
|
|
81
|
+
- **Scopes** — reactive scopes owned by the component with their current atom snapshots.
|
|
82
|
+
- **Atoms** — all atoms read by the component and their current values.
|
|
83
|
+
- **Hooks** — lifecycle hooks (`onMount`, `onUnmount`, `onChange`, …) registered by the component.
|
|
84
|
+
- **useState** — local `useState` values.
|
|
85
|
+
|
|
86
|
+
---
|
|
87
|
+
|
|
88
|
+
## Low-level exports
|
|
89
|
+
|
|
90
|
+
Advanced usage only — these are the internal building blocks used by the panel
|
|
91
|
+
itself.
|
|
92
|
+
|
|
93
|
+
### Registry
|
|
94
|
+
|
|
95
|
+
```ts
|
|
96
|
+
import {
|
|
97
|
+
registerComponent, unregisterComponent, notifyRender,
|
|
98
|
+
getComponentName, getComponentGroups, getComponentsByView,
|
|
99
|
+
getComponentDepth, getAllComponents, getRenderVersion,
|
|
100
|
+
devToolsEvent,
|
|
101
|
+
} from "mates-devtools";
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
### Log store
|
|
105
|
+
|
|
106
|
+
```ts
|
|
107
|
+
import {
|
|
108
|
+
connectLogStore, disconnectLogStore, getLogs,
|
|
109
|
+
getLogCount, getUnreadLogCount, isLogStoreConnected,
|
|
110
|
+
onLogEntry, markLogsRead, clearLogs,
|
|
111
|
+
logAtomSet, logAtomUpdate, logComponentMount,
|
|
112
|
+
logComponentRender, logComponentUnmount, logEventTrigger,
|
|
113
|
+
logCleanupEventTrigger,
|
|
114
|
+
} from "mates-devtools";
|
|
115
|
+
import type { LogEntry, LogCategory } from "mates-devtools";
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
### Perf store
|
|
119
|
+
|
|
120
|
+
```ts
|
|
121
|
+
import {
|
|
122
|
+
connectPerfStore, disconnectPerfStore, isPerfStoreConnected,
|
|
123
|
+
recordRender, startRenderTiming, getPerfSummaries,
|
|
124
|
+
getRecentTimings, getSlowestRenders, clearPerfData,
|
|
125
|
+
onPerfEntry,
|
|
126
|
+
} from "mates-devtools";
|
|
127
|
+
import type { RenderTiming, ComponentPerfSummary } from "mates-devtools";
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
### Component fragments
|
|
131
|
+
|
|
132
|
+
Each panel section is independently exported if you want to embed a single
|
|
133
|
+
viewer in your own UI:
|
|
134
|
+
|
|
135
|
+
```ts
|
|
136
|
+
import { renderAtomsViewer } from "mates-devtools";
|
|
137
|
+
import { renderComponentInspector } from "mates-devtools";
|
|
138
|
+
import { renderComponentList } from "mates-devtools";
|
|
139
|
+
import { renderComponentTree } from "mates-devtools";
|
|
140
|
+
import { renderHooksViewer } from "mates-devtools";
|
|
141
|
+
import { renderLogsViewer } from "mates-devtools";
|
|
142
|
+
import { renderPerfViewer } from "mates-devtools";
|
|
143
|
+
import { renderPropsViewer } from "mates-devtools";
|
|
144
|
+
import { renderScopesViewer } from "mates-devtools";
|
|
145
|
+
import { renderUseStateViewer } from "mates-devtools";
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
### Styles
|
|
149
|
+
|
|
150
|
+
The CSS-in-JS style map used internally — handy if you're theming the panel:
|
|
151
|
+
|
|
152
|
+
```ts
|
|
153
|
+
import { styles } from "mates-devtools";
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
---
|
|
157
|
+
|
|
158
|
+
## Types
|
|
159
|
+
|
|
160
|
+
```ts
|
|
161
|
+
import type {
|
|
162
|
+
DevToolsPosition, // "bottom-right" | "bottom-left" | "top-right" | "top-left"
|
|
163
|
+
DevToolsTab, // "components" | "logs" | "perf" | "timers"
|
|
164
|
+
ComponentInfo,
|
|
165
|
+
ComponentGroup,
|
|
166
|
+
LogEntry,
|
|
167
|
+
LogCategory,
|
|
168
|
+
RenderTiming,
|
|
169
|
+
ComponentPerfSummary,
|
|
170
|
+
} from "mates-devtools";
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
---
|
|
174
|
+
|
|
175
|
+
## Peer dependencies
|
|
176
|
+
|
|
177
|
+
| Package | Version |
|
|
178
|
+
|---------|---------|
|
|
179
|
+
| `mates` | `*` (any version) |
|
|
180
|
+
|
|
181
|
+
`mates-devtools` does **not** bundle mates — it is listed as a peer dependency
|
|
182
|
+
so you always get a single shared copy of the framework at runtime.
|
|
183
|
+
|
|
184
|
+
---
|
|
185
|
+
|
|
186
|
+
## License
|
|
187
|
+
|
|
188
|
+
MIT
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
const Kt = "selected", Pe = "selected", He = Re("mates-dt-flash", {
|
|
1
|
+
import { keyframes as Ce, globalCSS as Te, event as Me, html as s, nothing as k, repeat as T, atom as qt, effect as Ie, x as Be, render as Jt, isDevToolsInstalled as Le, installDevToolsHooks as Ee, interceptBefore as Ae, interceptAfter as Re, interceptError as ze } from "mates";
|
|
2
|
+
const Kt = "selected", Pe = "selected", He = Ce("mates-dt-flash", {
|
|
4
3
|
"0%": { background: "var(--dt-flash-bg)", color: "#fff" },
|
|
5
4
|
"100%": { background: "transparent", color: "var(--dt-text-muted)" }
|
|
6
5
|
}), ot = {
|
|
@@ -13,7 +12,7 @@ const Kt = "selected", Pe = "selected", He = Re("mates-dt-flash", {
|
|
|
13
12
|
"&::-webkit-scrollbar-thumb:hover": {
|
|
14
13
|
background: "var(--dt-scrollbar-hover)"
|
|
15
14
|
}
|
|
16
|
-
}, r =
|
|
15
|
+
}, r = Te({
|
|
17
16
|
// ─── Floating Action Button ───────────────────────────────────────────────
|
|
18
17
|
fab: {
|
|
19
18
|
position: "fixed",
|
|
@@ -809,7 +808,7 @@ const Kt = "selected", Pe = "selected", He = Re("mates-dt-flash", {
|
|
|
809
808
|
color: "var(--dt-text-dim)",
|
|
810
809
|
marginLeft: "5px"
|
|
811
810
|
}
|
|
812
|
-
}), At = /* @__PURE__ */ new Set(), lt = /* @__PURE__ */ new WeakMap(), dt = /* @__PURE__ */ new WeakMap(), bt =
|
|
811
|
+
}), At = /* @__PURE__ */ new Set(), lt = /* @__PURE__ */ new WeakMap(), dt = /* @__PURE__ */ new WeakMap(), bt = Me("devtools");
|
|
813
812
|
function Fe(t, e) {
|
|
814
813
|
try {
|
|
815
814
|
At.add(t);
|
|
@@ -866,7 +865,7 @@ function Qt() {
|
|
|
866
865
|
}
|
|
867
866
|
return [];
|
|
868
867
|
}
|
|
869
|
-
function
|
|
868
|
+
function $r(t) {
|
|
870
869
|
try {
|
|
871
870
|
const e = lt.get(t);
|
|
872
871
|
return e ? Array.from(e) : [];
|
|
@@ -1190,7 +1189,7 @@ function O(t, e, n, o = "root", i = 0) {
|
|
|
1190
1189
|
return s``;
|
|
1191
1190
|
}
|
|
1192
1191
|
}
|
|
1193
|
-
function
|
|
1192
|
+
function _r(t, e, n = "root") {
|
|
1194
1193
|
try {
|
|
1195
1194
|
const o = Object.keys(e);
|
|
1196
1195
|
return o.length === 0 ? s`<div style="color:#777;font-size:13px;padding:2px 0;">
|
|
@@ -2038,7 +2037,7 @@ function hn({
|
|
|
2038
2037
|
return s``;
|
|
2039
2038
|
}
|
|
2040
2039
|
}
|
|
2041
|
-
const se = () => (
|
|
2040
|
+
const se = () => (Ie(() => {
|
|
2042
2041
|
try {
|
|
2043
2042
|
console.log(ft());
|
|
2044
2043
|
} catch {
|
|
@@ -2103,7 +2102,7 @@ function gn({
|
|
|
2103
2102
|
</nav>
|
|
2104
2103
|
</div>
|
|
2105
2104
|
<div>
|
|
2106
|
-
<button style="margin-left: 10px">${
|
|
2105
|
+
<button style="margin-left: 10px">${Be(se)}</button>
|
|
2107
2106
|
</div>
|
|
2108
2107
|
<div class="${r.controls}">
|
|
2109
2108
|
<button
|
|
@@ -2155,7 +2154,7 @@ function yn() {
|
|
|
2155
2154
|
function bn() {
|
|
2156
2155
|
v = !1;
|
|
2157
2156
|
}
|
|
2158
|
-
function
|
|
2157
|
+
function wr() {
|
|
2159
2158
|
return v;
|
|
2160
2159
|
}
|
|
2161
2160
|
const xn = 100, R = [];
|
|
@@ -2195,7 +2194,7 @@ function Rt(t) {
|
|
|
2195
2194
|
function vn() {
|
|
2196
2195
|
return R;
|
|
2197
2196
|
}
|
|
2198
|
-
function
|
|
2197
|
+
function kr() {
|
|
2199
2198
|
return R.length;
|
|
2200
2199
|
}
|
|
2201
2200
|
function $n() {
|
|
@@ -2463,7 +2462,7 @@ function Fn() {
|
|
|
2463
2462
|
} catch {
|
|
2464
2463
|
}
|
|
2465
2464
|
}
|
|
2466
|
-
function
|
|
2465
|
+
function Sr() {
|
|
2467
2466
|
return et;
|
|
2468
2467
|
}
|
|
2469
2468
|
const On = 100, Q = /* @__PURE__ */ new Map();
|
|
@@ -2500,7 +2499,7 @@ function he(t, e, n) {
|
|
|
2500
2499
|
} catch {
|
|
2501
2500
|
}
|
|
2502
2501
|
}
|
|
2503
|
-
function
|
|
2502
|
+
function Cr(t, e) {
|
|
2504
2503
|
try {
|
|
2505
2504
|
if (!et) return Xt;
|
|
2506
2505
|
const n = performance.now();
|
|
@@ -2545,7 +2544,7 @@ function ge() {
|
|
|
2545
2544
|
}
|
|
2546
2545
|
return [];
|
|
2547
2546
|
}
|
|
2548
|
-
function
|
|
2547
|
+
function Tr(t = 50) {
|
|
2549
2548
|
try {
|
|
2550
2549
|
const e = ge();
|
|
2551
2550
|
return e.sort((n, o) => o.ts - n.ts), e.length > t ? e.slice(0, t) : e;
|
|
@@ -3333,21 +3332,21 @@ const at = [];
|
|
|
3333
3332
|
let Bt = null, Lt = null, Et = null;
|
|
3334
3333
|
function mr() {
|
|
3335
3334
|
try {
|
|
3336
|
-
Bt =
|
|
3335
|
+
Bt = Ae((t, e) => {
|
|
3337
3336
|
try {
|
|
3338
3337
|
const n = (e.method ?? "GET").toUpperCase();
|
|
3339
3338
|
at.push({ method: n, url: t, startTs: performance.now() });
|
|
3340
3339
|
} catch {
|
|
3341
3340
|
}
|
|
3342
3341
|
return { url: t, options: e };
|
|
3343
|
-
}), Lt =
|
|
3342
|
+
}), Lt = Re((t) => {
|
|
3344
3343
|
try {
|
|
3345
3344
|
const e = at.shift(), n = e?.method ?? "", o = e?.url ?? t.url ?? "", i = e ? performance.now() - e.startTs : 0;
|
|
3346
3345
|
ue(n, o, t.status, i);
|
|
3347
3346
|
} catch {
|
|
3348
3347
|
}
|
|
3349
3348
|
return t;
|
|
3350
|
-
}), Et =
|
|
3349
|
+
}), Et = ze((t) => {
|
|
3351
3350
|
try {
|
|
3352
3351
|
const e = at.shift(), n = e ? performance.now() - e.startTs : 0;
|
|
3353
3352
|
pe(
|
|
@@ -3370,8 +3369,8 @@ function yr() {
|
|
|
3370
3369
|
}
|
|
3371
3370
|
function br() {
|
|
3372
3371
|
try {
|
|
3373
|
-
if (
|
|
3374
|
-
|
|
3372
|
+
if (Le()) return;
|
|
3373
|
+
Ee({
|
|
3375
3374
|
registerComponent: Fe,
|
|
3376
3375
|
unregisterComponent: Oe,
|
|
3377
3376
|
notifyRender: De,
|
|
@@ -3392,14 +3391,14 @@ function br() {
|
|
|
3392
3391
|
}
|
|
3393
3392
|
}
|
|
3394
3393
|
let yt = !1;
|
|
3395
|
-
function
|
|
3394
|
+
function Mr() {
|
|
3396
3395
|
try {
|
|
3397
3396
|
if (yt) return;
|
|
3398
3397
|
yt = !0, br(), hr();
|
|
3399
3398
|
} catch {
|
|
3400
3399
|
}
|
|
3401
3400
|
}
|
|
3402
|
-
function
|
|
3401
|
+
function Ir() {
|
|
3403
3402
|
try {
|
|
3404
3403
|
if (!yt) return;
|
|
3405
3404
|
yt = !1, yr(), gr();
|
|
@@ -3412,7 +3411,7 @@ export {
|
|
|
3412
3411
|
yn as connectLogStore,
|
|
3413
3412
|
Hn as connectPerfStore,
|
|
3414
3413
|
gr as destroyDevTools,
|
|
3415
|
-
|
|
3414
|
+
Ir as destroyMatesDevTools,
|
|
3416
3415
|
bt as devToolsEvent,
|
|
3417
3416
|
bn as disconnectLogStore,
|
|
3418
3417
|
Fn as disconnectPerfStore,
|
|
@@ -3420,16 +3419,16 @@ export {
|
|
|
3420
3419
|
Z as getComponentDepth,
|
|
3421
3420
|
je as getComponentGroups,
|
|
3422
3421
|
tt as getComponentName,
|
|
3423
|
-
|
|
3424
|
-
|
|
3422
|
+
$r as getComponentsByView,
|
|
3423
|
+
kr as getLogCount,
|
|
3425
3424
|
vn as getLogs,
|
|
3426
3425
|
Nn as getPerfSummaries,
|
|
3427
|
-
|
|
3426
|
+
Tr as getRecentTimings,
|
|
3428
3427
|
xt as getRenderVersion,
|
|
3429
3428
|
jn as getSlowestRenders,
|
|
3430
3429
|
$n as getUnreadLogCount,
|
|
3431
|
-
|
|
3432
|
-
|
|
3430
|
+
wr as isLogStoreConnected,
|
|
3431
|
+
Sr as isPerfStoreConnected,
|
|
3433
3432
|
Tn as logAtomSet,
|
|
3434
3433
|
Mn as logAtomUpdate,
|
|
3435
3434
|
Ln as logCleanupEventTrigger,
|
|
@@ -3450,15 +3449,15 @@ export {
|
|
|
3450
3449
|
gn as renderHeader,
|
|
3451
3450
|
ne as renderHooksViewer,
|
|
3452
3451
|
Pn as renderLogsViewer,
|
|
3453
|
-
|
|
3452
|
+
Mr as renderMatesDevTools,
|
|
3454
3453
|
Yn as renderPerfViewer,
|
|
3455
3454
|
Xe as renderPropsViewer,
|
|
3456
3455
|
qe as renderScopesViewer,
|
|
3457
3456
|
Qe as renderUseStateViewer,
|
|
3458
3457
|
O as renderValueTree,
|
|
3459
|
-
|
|
3458
|
+
_r as renderValueTreeEntries,
|
|
3460
3459
|
te as setValueTreeRenderCallback,
|
|
3461
|
-
|
|
3460
|
+
Cr as startRenderTiming,
|
|
3462
3461
|
r as styles,
|
|
3463
3462
|
Oe as unregisterComponent
|
|
3464
3463
|
};
|
|
@@ -1,32 +1,32 @@
|
|
|
1
|
-
(function(s,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("mates"),require("mates/css-in-js")):typeof define=="function"&&define.amd?define(["exports","mates","mates/css-in-js"],i):(s=typeof globalThis<"u"?globalThis:s||self,i(s.MatesDevTools={},s.Mates,s.Mates))})(this,(function(s,i,Wt){"use strict";const Gt="selected",on="selected",cn=Wt.keyframes("mates-dt-flash",{"0%":{background:"var(--dt-flash-bg)",color:"#fff"},"100%":{background:"transparent",color:"var(--dt-text-muted)"}}),ot={"&::-webkit-scrollbar":{width:"6px"},"&::-webkit-scrollbar-track":{background:"transparent"},"&::-webkit-scrollbar-thumb":{background:"var(--dt-scrollbar)",borderRadius:"3px"},"&::-webkit-scrollbar-thumb:hover":{background:"var(--dt-scrollbar-hover)"}},r=Wt.globalCSS({fab:{position:"fixed",bottom:"50px",right:"50px",width:"44px",height:"44px",borderRadius:"50%",background:"var(--dt-bg)",border:"2px solid var(--dt-border)",color:"var(--dt-text-bright)",fontSize:"20px",lineHeight:"1",display:"flex",alignItems:"center",justifyContent:"center",cursor:"grab",zIndex:"100000",boxShadow:"0 2px 10px rgba(0,0,0,0.4)",userSelect:"none",transition:"box-shadow 0.15s ease, border-color 0.15s ease, transform 0.1s ease","-webkit-tap-highlight-color":"transparent","&:hover":{borderColor:"var(--dt-accent)",boxShadow:"0 4px 16px rgba(0,119,230,0.3)"},"&:active":{cursor:"grabbing",transform:"scale(0.95)"}},fabDragging:{cursor:"grabbing",transform:"scale(0.95)"},panel:{position:"fixed",bottom:"0",left:"0",right:"0",width:"100%",height:"320px",background:"var(--dt-bg)",borderTop:"1px solid var(--dt-border)",boxShadow:"0 -2px 12px rgba(0,0,0,0.4)",zIndex:"99999",display:"flex",flexDirection:"column",fontFamily:"'SF Mono', 'Fira Code', 'Consolas', monospace",fontSize:"13px",color:"var(--dt-text)",opacity:"0",transform:"translateY(12px)",transition:"opacity 0.2s ease, transform 0.2s ease",pointerEvents:"none"},panelVisible:{opacity:"1",transform:"translateY(0)",pointerEvents:"all"},minimized:{display:"none"},resizeHandle:{position:"absolute",top:"0",left:"0",right:"0",height:"4px",cursor:"ns-resize",zIndex:"1","&:hover":{background:"rgba(0,119,230,0.4)"}},header:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"0 10px",height:"38px",borderBottom:"1px solid var(--dt-border-2)",flexShrink:"0",gap:"16px"},headerLeft:{display:"flex",alignItems:"center",gap:"16px",minWidth:"0"},title:{fontWeight:"700",fontSize:"12px",color:"var(--dt-text-bright)",letterSpacing:"0.06em",textTransform:"uppercase",whiteSpace:"nowrap",flexShrink:"0"},controls:{display:"flex",alignItems:"center",gap:"4px",flexShrink:"0"},button:{background:"none",border:"none",color:"var(--dt-text-muted)",cursor:"pointer",padding:"4px 6px",borderRadius:"4px",fontSize:"13px",lineHeight:"1",display:"flex",alignItems:"center",justifyContent:"center",transition:"background 0.1s, color 0.1s","&:hover":{background:"var(--dt-bg-3)",color:"var(--dt-text-bright)"}},tabBar:{display:"flex",alignItems:"center",gap:"4px"},tabBtn:{background:"none",border:"none",color:"var(--dt-text-muted)",cursor:"pointer",padding:"4px 12px",borderRadius:"4px",fontSize:"12px",fontFamily:"inherit",fontWeight:"500",letterSpacing:"0.03em",transition:"background 0.1s, color 0.1s",position:"relative","&:hover":{background:"var(--dt-bg-3)",color:"var(--dt-text)"},"&.active":{color:"var(--dt-text-selected)",background:"var(--dt-bg-selected)"}},tabBadge:{display:"inline-flex",alignItems:"center",justifyContent:"center",background:"var(--dt-accent)",color:"#fff",borderRadius:"8px",fontSize:"10px",fontWeight:"700",minWidth:"16px",height:"16px",padding:"0 4px",marginLeft:"5px",lineHeight:"1"},body:{display:"flex",flex:"1",minHeight:"0",overflow:"hidden"},leftColumn:{width:"260px",minWidth:"160px",borderRight:"1px solid var(--dt-border-2)",display:"flex",flexDirection:"column",flexShrink:"0"},leftTabs:{display:"flex",gap:"4px",padding:"5px 8px",borderBottom:"1px solid var(--dt-border-2)",flexShrink:"0"},leftTabBtn:{background:"none",border:"none",color:"var(--dt-text-dim)",cursor:"pointer",padding:"3px 6px",borderRadius:"3px",display:"flex",alignItems:"center",justifyContent:"center",transition:"background 0.1s, color 0.1s","&:hover":{background:"var(--dt-bg-3)",color:"var(--dt-text)"},"&.active":{background:"var(--dt-bg-selected)",color:"var(--dt-text-selected)"}},content:{flex:"1",overflowY:"auto",...ot},componentSearch:{width:"100%",boxSizing:"border-box",background:"var(--dt-bg-input)",border:"none",borderBottom:"1px solid var(--dt-border-2)",color:"var(--dt-text)",fontFamily:"inherit",fontSize:"12px",padding:"6px 10px",outline:"none",flexShrink:"0","&::placeholder":{color:"var(--dt-text-dimmer)"},"&:focus":{borderBottomColor:"var(--dt-accent)"}},componentList:{listStyle:"none",margin:"0",padding:"4px 0"},componentItem:{display:"flex",alignItems:"center",gap:"6px",justifyContent:"space-between",padding:"5px 8px",cursor:"pointer",borderRadius:"3px",margin:"1px 4px",transition:"background 0.1s","&:hover":{background:"var(--dt-bg-hover)"},"&.selected":{background:"var(--dt-bg-selected)",color:"var(--dt-text-selected)"}},componentName:{flex:"1",minWidth:"0",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontSize:"12px",color:"var(--dt-text)"},componentBadge:{display:"flex",alignItems:"center",gap:"6px",flexShrink:"0"},componentBadgeSelected:{display:"flex",alignItems:"center",gap:"6px",flexShrink:"0",color:"var(--dt-accent)"},componentCount:{fontSize:"11px",color:"var(--dt-text-dim)",background:"var(--dt-bg-3)",borderRadius:"8px",padding:"1px 6px",minWidth:"18px",textAlign:"center"},componentCountSelected:{fontSize:"11px",color:"var(--dt-accent)",background:"var(--dt-bg-3)",borderRadius:"8px",padding:"1px 6px",minWidth:"18px",textAlign:"center"},componentHighlightBtn:{background:"none",border:"none",color:"var(--dt-text-dim)",cursor:"pointer",padding:"2px 4px",borderRadius:"3px",fontSize:"11px",lineHeight:"1",display:"flex",alignItems:"center",opacity:"1",transition:"color 0.1s","&:hover":{color:"var(--dt-accent)"}},componentHighlightBtnSelected:{background:"none",border:"none",color:"var(--dt-accent)",cursor:"pointer",padding:"2px 4px",borderRadius:"3px",fontSize:"11px",lineHeight:"1",display:"flex",alignItems:"center",opacity:"1",transition:"color 0.1s","&:hover":{color:"var(--dt-accent)"}},empty:{padding:"16px 12px",color:"var(--dt-text-dimmer)",fontSize:"12px",textAlign:"center"},treeToggle:{background:"none",border:"none",color:"var(--dt-text-dim)",cursor:"pointer",padding:"0 3px",fontSize:"11px",lineHeight:"1",flexShrink:"0",width:"16px",textAlign:"center","&:hover":{color:"var(--dt-text)"}},treeLeaf:{display:"inline-block",width:"16px",flexShrink:"0",textAlign:"center",color:"var(--dt-text-dim)"},inspector:{flex:"1",minWidth:"0",overflowY:"auto",padding:"10px",...ot},inspectorBreadcrumb:{display:"flex",alignItems:"center",gap:"4px",marginBottom:"10px",flexWrap:"wrap"},breadcrumbSegment:{color:"var(--dt-text-dim)",cursor:"pointer",fontSize:"11px","&:hover":{color:"var(--dt-text-selected)"}},breadcrumbSeparator:{color:"var(--dt-border)",fontSize:"11px"},breadcrumbCurrent:{color:"var(--dt-text-selected)",fontSize:"11px"},inspectorTitle:{fontWeight:"600",fontSize:"13px",color:"var(--dt-text-bright)",marginBottom:"8px"},instanceCount:{fontSize:"11px",color:"var(--dt-text-dim)",marginBottom:"8px"},instanceList:{listStyle:"none",margin:"0 0 8px 0",padding:"0",display:"flex",flexDirection:"column",gap:"4px"},instanceGroup:{border:"1px solid var(--dt-border-2)",borderRadius:"4px",overflow:"hidden"},instanceItem:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:"6px",padding:"5px 10px",cursor:"pointer",transition:"background 0.1s","&:hover":{background:"var(--dt-bg-hover)"},"&.selected":{background:"var(--dt-bg-selected)"}},instanceToggle:{background:"none",border:"none",color:"var(--dt-text-dim)",cursor:"pointer",padding:"0 3px",fontSize:"11px",flexShrink:"0","&:hover":{color:"var(--dt-text)"}},instanceToggleSelected:{background:"none",border:"none",color:"var(--dt-accent)",cursor:"pointer",padding:"0 3px",fontSize:"11px",flexShrink:"0","&:hover":{color:"var(--dt-accent)"}},instanceId:{fontSize:"11px",color:"var(--dt-text-dim)",flexShrink:"0",marginRight:"2px"},instanceDetails:{margin:"0 0 6px 0",padding:"8px 12px",borderLeft:"2px solid var(--dt-instance-border)",background:"var(--dt-instance-bg)",borderRadius:"0 4px 4px 0"},highlightBtn:{background:"none",border:"1px solid var(--dt-border)",color:"var(--dt-text-muted)",cursor:"pointer",padding:"2px 7px",borderRadius:"3px",fontSize:"11px",fontFamily:"inherit",transition:"border-color 0.1s, color 0.1s","&:hover":{borderColor:"var(--dt-accent)",color:"var(--dt-accent)"}},domHighlight:{position:"absolute",zIndex:"100001",pointerEvents:"none",border:"2px solid #e53e3e",background:"rgba(229,62,62,0.18)",borderRadius:"3px",transition:"opacity 0.6s ease"},hooksSummary:{display:"flex",flexWrap:"wrap",gap:"5px",marginBottom:"10px"},hookPill:{display:"inline-flex",alignItems:"center",gap:"4px",background:"var(--dt-bg-2)",border:"1px solid var(--dt-border)",borderRadius:"10px",padding:"2px 8px",fontSize:"11px"},hookPillLabel:{color:"var(--dt-text-muted)"},hookPillCount:{color:"var(--dt-hook-count)",fontWeight:"600"},sectionHeader:{fontSize:"10px",fontWeight:"700",textTransform:"uppercase",letterSpacing:"0.08em",color:"var(--dt-text-dim)",marginBottom:"4px",marginTop:"12px","&:first-child":{marginTop:"0"}},propItem:{display:"flex",alignItems:"baseline",gap:"8px",padding:"3px 0",fontSize:"12px",borderBottom:"1px solid var(--dt-border-3)"},propKey:{color:"var(--dt-prop-key)",flexShrink:"0",minWidth:"80px"},propValue:{color:"var(--dt-prop-val)",wordBreak:"break-all"},scopeItem:{padding:"3px 0",fontSize:"12px",borderBottom:"1px solid var(--dt-border-3)"},scopeName:{color:"var(--dt-scope-name)"},atomItem:{display:"flex",alignItems:"baseline",gap:"8px",padding:"3px 0",fontSize:"12px",borderBottom:"1px solid var(--dt-border-3)"},atomName:{color:"var(--dt-prop-key)",flexShrink:"0",minWidth:"80px"},atomValue:{color:"var(--dt-prop-val)",wordBreak:"break-all"},highlight:{display:"inline-block",padding:"1px 5px",borderRadius:"8px",fontSize:"11px",color:"var(--dt-text-muted)",background:"transparent",transition:"background 0.1s, color 0.1s"},highlightFlash:{animation:`${cn} 0.6s ease forwards`},logsPanel:{flex:"1",display:"flex",flexDirection:"column",minHeight:"0",overflow:"hidden"},logsToolbar:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"5px 10px",borderBottom:"1px solid var(--dt-border-2)",flexShrink:"0",gap:"10px"},logsFilterRow:{display:"flex",gap:"4px"},logsFilterBtn:{background:"none",border:"1px solid var(--dt-border)",color:"var(--dt-text-muted)",cursor:"pointer",padding:"2px 9px",borderRadius:"3px",fontSize:"11px",fontFamily:"inherit",transition:"border-color 0.1s, color 0.1s, background 0.1s","&:hover":{borderColor:"var(--dt-text-dim)",color:"var(--dt-text)"},"&.active":{borderColor:"var(--dt-border-selected)",color:"var(--dt-text-selected)",background:"var(--dt-bg-active)"}},logsActions:{display:"flex",gap:"6px",alignItems:"center"},logsCount:{fontSize:"11px",color:"var(--dt-text-dimmer)"},logsContainer:{flex:"1",overflowY:"auto",padding:"4px 0",...ot},logEntry:{display:"flex",alignItems:"baseline",gap:"8px",padding:"3px 10px",fontSize:"12px",borderBottom:"1px solid var(--dt-border-3)","&:hover":{background:"var(--dt-bg-hover)"}},logTs:{color:"var(--dt-text-dimmer)",flexShrink:"0",fontSize:"11px",minWidth:"56px"},logBadge:{flexShrink:"0",padding:"1px 5px",borderRadius:"3px",fontSize:"10px",fontWeight:"700",textTransform:"uppercase",letterSpacing:"0.05em"},logLabel:{color:"var(--dt-text)",flexShrink:"0"},logDetail:{color:"var(--dt-text-muted)",wordBreak:"break-all",flex:"1",minWidth:"0"},perfPanel:{flex:"1",display:"flex",flexDirection:"column",minHeight:"0",overflow:"hidden"},perfToolbar:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"5px 10px",borderBottom:"1px solid var(--dt-border-2)",flexShrink:"0",gap:"10px"},perfTabs:{display:"flex",gap:"4px"},perfTabBtn:{background:"none",border:"1px solid var(--dt-border)",color:"var(--dt-text-muted)",cursor:"pointer",padding:"2px 9px",borderRadius:"3px",fontSize:"11px",fontFamily:"inherit",transition:"border-color 0.1s, color 0.1s, background 0.1s","&:hover":{borderColor:"var(--dt-text-dim)",color:"var(--dt-text)"},"&.active":{borderColor:"var(--dt-border-selected)",color:"var(--dt-text-selected)",background:"var(--dt-bg-active)"}},perfActions:{display:"flex",gap:"6px",alignItems:"center"},perfContent:{flex:"1",overflowY:"auto",...ot},perfTable:{width:"100%",borderCollapse:"collapse",fontSize:"12px"},perfTh:{padding:"5px 10px",textAlign:"left",color:"var(--dt-text-dim)",fontWeight:"600",fontSize:"10px",textTransform:"uppercase",letterSpacing:"0.06em",borderBottom:"1px solid var(--dt-border-2)",position:"sticky",top:"0",background:"var(--dt-bg)"},perfThRight:{textAlign:"right"},perfRow:{borderBottom:"1px solid var(--dt-border-3)","&:hover":{background:"var(--dt-bg-hover)"}},perfRowClickable:{cursor:"pointer"},perfCell:{padding:"4px 10px",verticalAlign:"middle"},perfName:{color:"var(--dt-text)",fontWeight:"500"},perfNum:{textAlign:"right",color:"var(--dt-text-muted)",fontVariantNumeric:"tabular-nums"},perfBarWrap:{width:"80px",height:"6px",background:"var(--dt-bg-3)",borderRadius:"3px",overflow:"hidden",display:"inline-block",verticalAlign:"middle"},perfBar:{height:"100%",background:"var(--dt-accent)",borderRadius:"3px",transition:"width 0.2s ease"},perfBarLabel:{fontSize:"11px",color:"var(--dt-text-dim)",marginLeft:"5px"}}),_t=new Set,it=new WeakMap,ct=new WeakMap,N=i.event("devtools");function Ut(t,e){try{_t.add(t);let n=it.get(e);n||(n=new Set,it.set(e,n)),n.add(t),ct.set(t,1),N.trigger({type:"mount",component:t})}catch{}}function Yt(t,e){try{if(_t.delete(t),e){const n=it.get(e);n&&n.delete(t)}N.trigger({type:"unmount",component:t})}catch{}}function qt(t){try{const e=ct.get(t)??0;ct.set(t,e+1),N.trigger({type:"render",component:t})}catch{}}function j(t){try{return ct.get(t)??0}catch{}return 0}function E(t){try{return t._depth??0}catch{}return 0}function wt(t){try{return t._parentComponent??null}catch{}return null}function St(){try{return Array.from(_t).filter(t=>{const e=t._view||t.oldView;return!e?.__devtools__&&!e?.skipDevToolsRender})}catch{}return[]}function ln(t){try{const e=it.get(t);return e?Array.from(e):[]}catch{}return[]}function A(t){try{return(t._view||t.oldView)?.name||"Anonymous"}catch{}return""}function an(t){try{return t._view||t.oldView||null}catch{}return null}function Xt(){try{const t=St(),e=new Map;for(const o of t){const c=an(o);if(!c)continue;let l=e.get(c);l||(l=[],e.set(c,l)),l.push(o)}const n=[];for(const[o,c]of e)n.push({viewFn:o,name:o.name||"Anonymous",instances:c});try{n.sort((o,c)=>{const l=a=>a.instances.reduce((u,d)=>Math.min(u,E(d)),1/0);return l(o)-l(c)})}catch{}return n}catch{}return[]}const h={row:"display:flex;align-items:baseline;gap:4px;font-size:13px;line-height:20px;font-family:'SF Mono',Monaco,Consolas,monospace;",toggle:"cursor:pointer;background:none;border:none;color:#888;font-size:10px;padding:0 2px;width:14px;text-align:center;flex-shrink:0;",key:"color:#9cdcfe;white-space:nowrap;",colon:"color:#777;",string:"color:#ce9178;",number:"color:#b5cea8;",boolean:"color:#569cd6;",null:"color:#569cd6;font-style:italic;",undefined:"color:#777;font-style:italic;",function:"color:#dcdcaa;font-style:italic;",symbol:"color:#c586c0;",preview:"color:#888;font-style:italic;",children:"margin-left:14px;padding-left:6px;border-left:1px solid #333;",badge:"color:#777;font-size:11px;margin-left:4px;background:#2a2a2a;padding:0 4px;border-radius:3px;"},Kt=new WeakMap;let Jt=null;function kt(t){try{Jt=t}catch{}}function Qt(t){try{let e=Kt.get(t);return e||(e=new Set,Kt.set(t,e)),e}catch{return new Set}}function sn(t,e){try{return Qt(t).has(e)}catch{return!1}}function dn(t,e){try{const n=Qt(t);n.has(e)?n.delete(e):n.add(e);try{Jt?.()}catch{}}catch{}}function un(t){try{return t==null?!1:typeof t=="object"}catch{return!1}}function lt(t){try{return t===null?"null":t===void 0?"undefined":Array.isArray(t)?"array":t instanceof Date?"date":t instanceof RegExp?"regexp":t instanceof Map?"map":t instanceof Set?"set":typeof t}catch{return""}}function Zt(t,e=60){try{const n=lt(t);if(n==="array"){const o=t;if(o.length===0)return"[]";const c=o.slice(0,5).map(a=>te(a)).join(", "),l=o.length>5?", …":"";return`[${c}${l}] (${o.length})`}if(n==="map")return`Map(${t.size})`;if(n==="set")return`Set(${t.size})`;if(n==="date")return`Date(${t.toISOString()})`;if(n==="regexp")return String(t);if(n==="object"){const o=t,c=Object.keys(o);if(c.length===0)return"{}";const l=c.slice(0,4).map(d=>`${d}: ${te(o[d])}`).join(", "),a=c.length>4?", …":"",u=`{${l}${a}}`;return u.length>e?u.slice(0,e-1)+"…}":u}return String(t)}catch{return""}}function te(t){try{switch(lt(t)){case"string":{const n=t;return n.length>30?`"${n.slice(0,27)}…"`:`"${n}"`}case"number":case"boolean":return String(t);case"null":return"null";case"undefined":return"undefined";case"function":return"ƒ()";case"symbol":return String(t);case"array":return`Array(${t.length})`;case"object":return"{…}";case"date":return"Date";case"map":return`Map(${t.size})`;case"set":return`Set(${t.size})`;default:return String(t)}}catch{return""}}function pn(t){try{switch(lt(t)){case"string":return i.html`<span style="${h.string}">"${String(t)}"</span>`;case"number":return i.html`<span style="${h.number}">${String(t)}</span>`;case"boolean":return i.html`<span style="${h.boolean}">${String(t)}</span>`;case"null":return i.html`<span style="${h.null}">null</span>`;case"undefined":return i.html`<span style="${h.undefined}">undefined</span>`;case"function":return i.html`<span style="${h.function}"
|
|
1
|
+
(function(s,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("mates")):typeof define=="function"&&define.amd?define(["exports","mates"],i):(s=typeof globalThis<"u"?globalThis:s||self,i(s.MatesDevTools={},s.Mates))})(this,(function(s,i){"use strict";const Wt="selected",rn="selected",on=i.keyframes("mates-dt-flash",{"0%":{background:"var(--dt-flash-bg)",color:"#fff"},"100%":{background:"transparent",color:"var(--dt-text-muted)"}}),ot={"&::-webkit-scrollbar":{width:"6px"},"&::-webkit-scrollbar-track":{background:"transparent"},"&::-webkit-scrollbar-thumb":{background:"var(--dt-scrollbar)",borderRadius:"3px"},"&::-webkit-scrollbar-thumb:hover":{background:"var(--dt-scrollbar-hover)"}},r=i.globalCSS({fab:{position:"fixed",bottom:"50px",right:"50px",width:"44px",height:"44px",borderRadius:"50%",background:"var(--dt-bg)",border:"2px solid var(--dt-border)",color:"var(--dt-text-bright)",fontSize:"20px",lineHeight:"1",display:"flex",alignItems:"center",justifyContent:"center",cursor:"grab",zIndex:"100000",boxShadow:"0 2px 10px rgba(0,0,0,0.4)",userSelect:"none",transition:"box-shadow 0.15s ease, border-color 0.15s ease, transform 0.1s ease","-webkit-tap-highlight-color":"transparent","&:hover":{borderColor:"var(--dt-accent)",boxShadow:"0 4px 16px rgba(0,119,230,0.3)"},"&:active":{cursor:"grabbing",transform:"scale(0.95)"}},fabDragging:{cursor:"grabbing",transform:"scale(0.95)"},panel:{position:"fixed",bottom:"0",left:"0",right:"0",width:"100%",height:"320px",background:"var(--dt-bg)",borderTop:"1px solid var(--dt-border)",boxShadow:"0 -2px 12px rgba(0,0,0,0.4)",zIndex:"99999",display:"flex",flexDirection:"column",fontFamily:"'SF Mono', 'Fira Code', 'Consolas', monospace",fontSize:"13px",color:"var(--dt-text)",opacity:"0",transform:"translateY(12px)",transition:"opacity 0.2s ease, transform 0.2s ease",pointerEvents:"none"},panelVisible:{opacity:"1",transform:"translateY(0)",pointerEvents:"all"},minimized:{display:"none"},resizeHandle:{position:"absolute",top:"0",left:"0",right:"0",height:"4px",cursor:"ns-resize",zIndex:"1","&:hover":{background:"rgba(0,119,230,0.4)"}},header:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"0 10px",height:"38px",borderBottom:"1px solid var(--dt-border-2)",flexShrink:"0",gap:"16px"},headerLeft:{display:"flex",alignItems:"center",gap:"16px",minWidth:"0"},title:{fontWeight:"700",fontSize:"12px",color:"var(--dt-text-bright)",letterSpacing:"0.06em",textTransform:"uppercase",whiteSpace:"nowrap",flexShrink:"0"},controls:{display:"flex",alignItems:"center",gap:"4px",flexShrink:"0"},button:{background:"none",border:"none",color:"var(--dt-text-muted)",cursor:"pointer",padding:"4px 6px",borderRadius:"4px",fontSize:"13px",lineHeight:"1",display:"flex",alignItems:"center",justifyContent:"center",transition:"background 0.1s, color 0.1s","&:hover":{background:"var(--dt-bg-3)",color:"var(--dt-text-bright)"}},tabBar:{display:"flex",alignItems:"center",gap:"4px"},tabBtn:{background:"none",border:"none",color:"var(--dt-text-muted)",cursor:"pointer",padding:"4px 12px",borderRadius:"4px",fontSize:"12px",fontFamily:"inherit",fontWeight:"500",letterSpacing:"0.03em",transition:"background 0.1s, color 0.1s",position:"relative","&:hover":{background:"var(--dt-bg-3)",color:"var(--dt-text)"},"&.active":{color:"var(--dt-text-selected)",background:"var(--dt-bg-selected)"}},tabBadge:{display:"inline-flex",alignItems:"center",justifyContent:"center",background:"var(--dt-accent)",color:"#fff",borderRadius:"8px",fontSize:"10px",fontWeight:"700",minWidth:"16px",height:"16px",padding:"0 4px",marginLeft:"5px",lineHeight:"1"},body:{display:"flex",flex:"1",minHeight:"0",overflow:"hidden"},leftColumn:{width:"260px",minWidth:"160px",borderRight:"1px solid var(--dt-border-2)",display:"flex",flexDirection:"column",flexShrink:"0"},leftTabs:{display:"flex",gap:"4px",padding:"5px 8px",borderBottom:"1px solid var(--dt-border-2)",flexShrink:"0"},leftTabBtn:{background:"none",border:"none",color:"var(--dt-text-dim)",cursor:"pointer",padding:"3px 6px",borderRadius:"3px",display:"flex",alignItems:"center",justifyContent:"center",transition:"background 0.1s, color 0.1s","&:hover":{background:"var(--dt-bg-3)",color:"var(--dt-text)"},"&.active":{background:"var(--dt-bg-selected)",color:"var(--dt-text-selected)"}},content:{flex:"1",overflowY:"auto",...ot},componentSearch:{width:"100%",boxSizing:"border-box",background:"var(--dt-bg-input)",border:"none",borderBottom:"1px solid var(--dt-border-2)",color:"var(--dt-text)",fontFamily:"inherit",fontSize:"12px",padding:"6px 10px",outline:"none",flexShrink:"0","&::placeholder":{color:"var(--dt-text-dimmer)"},"&:focus":{borderBottomColor:"var(--dt-accent)"}},componentList:{listStyle:"none",margin:"0",padding:"4px 0"},componentItem:{display:"flex",alignItems:"center",gap:"6px",justifyContent:"space-between",padding:"5px 8px",cursor:"pointer",borderRadius:"3px",margin:"1px 4px",transition:"background 0.1s","&:hover":{background:"var(--dt-bg-hover)"},"&.selected":{background:"var(--dt-bg-selected)",color:"var(--dt-text-selected)"}},componentName:{flex:"1",minWidth:"0",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontSize:"12px",color:"var(--dt-text)"},componentBadge:{display:"flex",alignItems:"center",gap:"6px",flexShrink:"0"},componentBadgeSelected:{display:"flex",alignItems:"center",gap:"6px",flexShrink:"0",color:"var(--dt-accent)"},componentCount:{fontSize:"11px",color:"var(--dt-text-dim)",background:"var(--dt-bg-3)",borderRadius:"8px",padding:"1px 6px",minWidth:"18px",textAlign:"center"},componentCountSelected:{fontSize:"11px",color:"var(--dt-accent)",background:"var(--dt-bg-3)",borderRadius:"8px",padding:"1px 6px",minWidth:"18px",textAlign:"center"},componentHighlightBtn:{background:"none",border:"none",color:"var(--dt-text-dim)",cursor:"pointer",padding:"2px 4px",borderRadius:"3px",fontSize:"11px",lineHeight:"1",display:"flex",alignItems:"center",opacity:"1",transition:"color 0.1s","&:hover":{color:"var(--dt-accent)"}},componentHighlightBtnSelected:{background:"none",border:"none",color:"var(--dt-accent)",cursor:"pointer",padding:"2px 4px",borderRadius:"3px",fontSize:"11px",lineHeight:"1",display:"flex",alignItems:"center",opacity:"1",transition:"color 0.1s","&:hover":{color:"var(--dt-accent)"}},empty:{padding:"16px 12px",color:"var(--dt-text-dimmer)",fontSize:"12px",textAlign:"center"},treeToggle:{background:"none",border:"none",color:"var(--dt-text-dim)",cursor:"pointer",padding:"0 3px",fontSize:"11px",lineHeight:"1",flexShrink:"0",width:"16px",textAlign:"center","&:hover":{color:"var(--dt-text)"}},treeLeaf:{display:"inline-block",width:"16px",flexShrink:"0",textAlign:"center",color:"var(--dt-text-dim)"},inspector:{flex:"1",minWidth:"0",overflowY:"auto",padding:"10px",...ot},inspectorBreadcrumb:{display:"flex",alignItems:"center",gap:"4px",marginBottom:"10px",flexWrap:"wrap"},breadcrumbSegment:{color:"var(--dt-text-dim)",cursor:"pointer",fontSize:"11px","&:hover":{color:"var(--dt-text-selected)"}},breadcrumbSeparator:{color:"var(--dt-border)",fontSize:"11px"},breadcrumbCurrent:{color:"var(--dt-text-selected)",fontSize:"11px"},inspectorTitle:{fontWeight:"600",fontSize:"13px",color:"var(--dt-text-bright)",marginBottom:"8px"},instanceCount:{fontSize:"11px",color:"var(--dt-text-dim)",marginBottom:"8px"},instanceList:{listStyle:"none",margin:"0 0 8px 0",padding:"0",display:"flex",flexDirection:"column",gap:"4px"},instanceGroup:{border:"1px solid var(--dt-border-2)",borderRadius:"4px",overflow:"hidden"},instanceItem:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:"6px",padding:"5px 10px",cursor:"pointer",transition:"background 0.1s","&:hover":{background:"var(--dt-bg-hover)"},"&.selected":{background:"var(--dt-bg-selected)"}},instanceToggle:{background:"none",border:"none",color:"var(--dt-text-dim)",cursor:"pointer",padding:"0 3px",fontSize:"11px",flexShrink:"0","&:hover":{color:"var(--dt-text)"}},instanceToggleSelected:{background:"none",border:"none",color:"var(--dt-accent)",cursor:"pointer",padding:"0 3px",fontSize:"11px",flexShrink:"0","&:hover":{color:"var(--dt-accent)"}},instanceId:{fontSize:"11px",color:"var(--dt-text-dim)",flexShrink:"0",marginRight:"2px"},instanceDetails:{margin:"0 0 6px 0",padding:"8px 12px",borderLeft:"2px solid var(--dt-instance-border)",background:"var(--dt-instance-bg)",borderRadius:"0 4px 4px 0"},highlightBtn:{background:"none",border:"1px solid var(--dt-border)",color:"var(--dt-text-muted)",cursor:"pointer",padding:"2px 7px",borderRadius:"3px",fontSize:"11px",fontFamily:"inherit",transition:"border-color 0.1s, color 0.1s","&:hover":{borderColor:"var(--dt-accent)",color:"var(--dt-accent)"}},domHighlight:{position:"absolute",zIndex:"100001",pointerEvents:"none",border:"2px solid #e53e3e",background:"rgba(229,62,62,0.18)",borderRadius:"3px",transition:"opacity 0.6s ease"},hooksSummary:{display:"flex",flexWrap:"wrap",gap:"5px",marginBottom:"10px"},hookPill:{display:"inline-flex",alignItems:"center",gap:"4px",background:"var(--dt-bg-2)",border:"1px solid var(--dt-border)",borderRadius:"10px",padding:"2px 8px",fontSize:"11px"},hookPillLabel:{color:"var(--dt-text-muted)"},hookPillCount:{color:"var(--dt-hook-count)",fontWeight:"600"},sectionHeader:{fontSize:"10px",fontWeight:"700",textTransform:"uppercase",letterSpacing:"0.08em",color:"var(--dt-text-dim)",marginBottom:"4px",marginTop:"12px","&:first-child":{marginTop:"0"}},propItem:{display:"flex",alignItems:"baseline",gap:"8px",padding:"3px 0",fontSize:"12px",borderBottom:"1px solid var(--dt-border-3)"},propKey:{color:"var(--dt-prop-key)",flexShrink:"0",minWidth:"80px"},propValue:{color:"var(--dt-prop-val)",wordBreak:"break-all"},scopeItem:{padding:"3px 0",fontSize:"12px",borderBottom:"1px solid var(--dt-border-3)"},scopeName:{color:"var(--dt-scope-name)"},atomItem:{display:"flex",alignItems:"baseline",gap:"8px",padding:"3px 0",fontSize:"12px",borderBottom:"1px solid var(--dt-border-3)"},atomName:{color:"var(--dt-prop-key)",flexShrink:"0",minWidth:"80px"},atomValue:{color:"var(--dt-prop-val)",wordBreak:"break-all"},highlight:{display:"inline-block",padding:"1px 5px",borderRadius:"8px",fontSize:"11px",color:"var(--dt-text-muted)",background:"transparent",transition:"background 0.1s, color 0.1s"},highlightFlash:{animation:`${on} 0.6s ease forwards`},logsPanel:{flex:"1",display:"flex",flexDirection:"column",minHeight:"0",overflow:"hidden"},logsToolbar:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"5px 10px",borderBottom:"1px solid var(--dt-border-2)",flexShrink:"0",gap:"10px"},logsFilterRow:{display:"flex",gap:"4px"},logsFilterBtn:{background:"none",border:"1px solid var(--dt-border)",color:"var(--dt-text-muted)",cursor:"pointer",padding:"2px 9px",borderRadius:"3px",fontSize:"11px",fontFamily:"inherit",transition:"border-color 0.1s, color 0.1s, background 0.1s","&:hover":{borderColor:"var(--dt-text-dim)",color:"var(--dt-text)"},"&.active":{borderColor:"var(--dt-border-selected)",color:"var(--dt-text-selected)",background:"var(--dt-bg-active)"}},logsActions:{display:"flex",gap:"6px",alignItems:"center"},logsCount:{fontSize:"11px",color:"var(--dt-text-dimmer)"},logsContainer:{flex:"1",overflowY:"auto",padding:"4px 0",...ot},logEntry:{display:"flex",alignItems:"baseline",gap:"8px",padding:"3px 10px",fontSize:"12px",borderBottom:"1px solid var(--dt-border-3)","&:hover":{background:"var(--dt-bg-hover)"}},logTs:{color:"var(--dt-text-dimmer)",flexShrink:"0",fontSize:"11px",minWidth:"56px"},logBadge:{flexShrink:"0",padding:"1px 5px",borderRadius:"3px",fontSize:"10px",fontWeight:"700",textTransform:"uppercase",letterSpacing:"0.05em"},logLabel:{color:"var(--dt-text)",flexShrink:"0"},logDetail:{color:"var(--dt-text-muted)",wordBreak:"break-all",flex:"1",minWidth:"0"},perfPanel:{flex:"1",display:"flex",flexDirection:"column",minHeight:"0",overflow:"hidden"},perfToolbar:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"5px 10px",borderBottom:"1px solid var(--dt-border-2)",flexShrink:"0",gap:"10px"},perfTabs:{display:"flex",gap:"4px"},perfTabBtn:{background:"none",border:"1px solid var(--dt-border)",color:"var(--dt-text-muted)",cursor:"pointer",padding:"2px 9px",borderRadius:"3px",fontSize:"11px",fontFamily:"inherit",transition:"border-color 0.1s, color 0.1s, background 0.1s","&:hover":{borderColor:"var(--dt-text-dim)",color:"var(--dt-text)"},"&.active":{borderColor:"var(--dt-border-selected)",color:"var(--dt-text-selected)",background:"var(--dt-bg-active)"}},perfActions:{display:"flex",gap:"6px",alignItems:"center"},perfContent:{flex:"1",overflowY:"auto",...ot},perfTable:{width:"100%",borderCollapse:"collapse",fontSize:"12px"},perfTh:{padding:"5px 10px",textAlign:"left",color:"var(--dt-text-dim)",fontWeight:"600",fontSize:"10px",textTransform:"uppercase",letterSpacing:"0.06em",borderBottom:"1px solid var(--dt-border-2)",position:"sticky",top:"0",background:"var(--dt-bg)"},perfThRight:{textAlign:"right"},perfRow:{borderBottom:"1px solid var(--dt-border-3)","&:hover":{background:"var(--dt-bg-hover)"}},perfRowClickable:{cursor:"pointer"},perfCell:{padding:"4px 10px",verticalAlign:"middle"},perfName:{color:"var(--dt-text)",fontWeight:"500"},perfNum:{textAlign:"right",color:"var(--dt-text-muted)",fontVariantNumeric:"tabular-nums"},perfBarWrap:{width:"80px",height:"6px",background:"var(--dt-bg-3)",borderRadius:"3px",overflow:"hidden",display:"inline-block",verticalAlign:"middle"},perfBar:{height:"100%",background:"var(--dt-accent)",borderRadius:"3px",transition:"width 0.2s ease"},perfBarLabel:{fontSize:"11px",color:"var(--dt-text-dim)",marginLeft:"5px"}}),_t=new Set,it=new WeakMap,ct=new WeakMap,N=i.event("devtools");function Gt(t,e){try{_t.add(t);let n=it.get(e);n||(n=new Set,it.set(e,n)),n.add(t),ct.set(t,1),N.trigger({type:"mount",component:t})}catch{}}function Ut(t,e){try{if(_t.delete(t),e){const n=it.get(e);n&&n.delete(t)}N.trigger({type:"unmount",component:t})}catch{}}function Yt(t){try{const e=ct.get(t)??0;ct.set(t,e+1),N.trigger({type:"render",component:t})}catch{}}function j(t){try{return ct.get(t)??0}catch{}return 0}function E(t){try{return t._depth??0}catch{}return 0}function wt(t){try{return t._parentComponent??null}catch{}return null}function St(){try{return Array.from(_t).filter(t=>{const e=t._view||t.oldView;return!e?.__devtools__&&!e?.skipDevToolsRender})}catch{}return[]}function cn(t){try{const e=it.get(t);return e?Array.from(e):[]}catch{}return[]}function A(t){try{return(t._view||t.oldView)?.name||"Anonymous"}catch{}return""}function ln(t){try{return t._view||t.oldView||null}catch{}return null}function Xt(){try{const t=St(),e=new Map;for(const o of t){const c=ln(o);if(!c)continue;let l=e.get(c);l||(l=[],e.set(c,l)),l.push(o)}const n=[];for(const[o,c]of e)n.push({viewFn:o,name:o.name||"Anonymous",instances:c});try{n.sort((o,c)=>{const l=a=>a.instances.reduce((u,d)=>Math.min(u,E(d)),1/0);return l(o)-l(c)})}catch{}return n}catch{}return[]}const h={row:"display:flex;align-items:baseline;gap:4px;font-size:13px;line-height:20px;font-family:'SF Mono',Monaco,Consolas,monospace;",toggle:"cursor:pointer;background:none;border:none;color:#888;font-size:10px;padding:0 2px;width:14px;text-align:center;flex-shrink:0;",key:"color:#9cdcfe;white-space:nowrap;",colon:"color:#777;",string:"color:#ce9178;",number:"color:#b5cea8;",boolean:"color:#569cd6;",null:"color:#569cd6;font-style:italic;",undefined:"color:#777;font-style:italic;",function:"color:#dcdcaa;font-style:italic;",symbol:"color:#c586c0;",preview:"color:#888;font-style:italic;",children:"margin-left:14px;padding-left:6px;border-left:1px solid #333;",badge:"color:#777;font-size:11px;margin-left:4px;background:#2a2a2a;padding:0 4px;border-radius:3px;"},qt=new WeakMap;let Jt=null;function kt(t){try{Jt=t}catch{}}function Kt(t){try{let e=qt.get(t);return e||(e=new Set,qt.set(t,e)),e}catch{return new Set}}function an(t,e){try{return Kt(t).has(e)}catch{return!1}}function sn(t,e){try{const n=Kt(t);n.has(e)?n.delete(e):n.add(e);try{Jt?.()}catch{}}catch{}}function dn(t){try{return t==null?!1:typeof t=="object"}catch{return!1}}function lt(t){try{return t===null?"null":t===void 0?"undefined":Array.isArray(t)?"array":t instanceof Date?"date":t instanceof RegExp?"regexp":t instanceof Map?"map":t instanceof Set?"set":typeof t}catch{return""}}function Qt(t,e=60){try{const n=lt(t);if(n==="array"){const o=t;if(o.length===0)return"[]";const c=o.slice(0,5).map(a=>Zt(a)).join(", "),l=o.length>5?", …":"";return`[${c}${l}] (${o.length})`}if(n==="map")return`Map(${t.size})`;if(n==="set")return`Set(${t.size})`;if(n==="date")return`Date(${t.toISOString()})`;if(n==="regexp")return String(t);if(n==="object"){const o=t,c=Object.keys(o);if(c.length===0)return"{}";const l=c.slice(0,4).map(d=>`${d}: ${Zt(o[d])}`).join(", "),a=c.length>4?", …":"",u=`{${l}${a}}`;return u.length>e?u.slice(0,e-1)+"…}":u}return String(t)}catch{return""}}function Zt(t){try{switch(lt(t)){case"string":{const n=t;return n.length>30?`"${n.slice(0,27)}…"`:`"${n}"`}case"number":case"boolean":return String(t);case"null":return"null";case"undefined":return"undefined";case"function":return"ƒ()";case"symbol":return String(t);case"array":return`Array(${t.length})`;case"object":return"{…}";case"date":return"Date";case"map":return`Map(${t.size})`;case"set":return`Set(${t.size})`;default:return String(t)}}catch{return""}}function un(t){try{switch(lt(t)){case"string":return i.html`<span style="${h.string}">"${String(t)}"</span>`;case"number":return i.html`<span style="${h.number}">${String(t)}</span>`;case"boolean":return i.html`<span style="${h.boolean}">${String(t)}</span>`;case"null":return i.html`<span style="${h.null}">null</span>`;case"undefined":return i.html`<span style="${h.undefined}">undefined</span>`;case"function":return i.html`<span style="${h.function}"
|
|
2
2
|
>ƒ ${t.name||"anonymous"}()</span
|
|
3
3
|
>`;case"symbol":return i.html`<span style="${h.symbol}">${String(t)}</span>`;case"date":return i.html`<span style="${h.string}"
|
|
4
4
|
>${t.toISOString()}</span
|
|
5
|
-
>`;case"regexp":return i.html`<span style="${h.string}">${String(t)}</span>`;default:return i.html`<span style="${h.preview}">${String(t)}</span>`}}catch{return i.html``}}function
|
|
5
|
+
>`;case"regexp":return i.html`<span style="${h.string}">${String(t)}</span>`;default:return i.html`<span style="${h.preview}">${String(t)}</span>`}}catch{return i.html``}}function pn(t){try{if(t instanceof Map)return Array.from(t.entries()).map(([e,n])=>({key:String(e),value:n}));if(t instanceof Set)return Array.from(t).map((e,n)=>({key:String(n),value:e}));if(Array.isArray(t))return t.map((e,n)=>({key:String(n),value:e}));if(typeof t=="object"&&t!==null){const e=[],n=new Set;for(const c of Object.keys(t)){n.add(c);try{e.push({key:c,value:t[c]})}catch{e.push({key:c,value:"[error reading]"})}}let o=Object.getPrototypeOf(t);for(;o&&o!==Object.prototype;){for(const c of Object.getOwnPropertyNames(o)){if(n.has(c)||c==="constructor")continue;if(Object.getOwnPropertyDescriptor(o,c)?.get){n.add(c);try{e.push({key:c,value:t[c]})}catch{e.push({key:c,value:"[error reading]"})}}}o=Object.getPrototypeOf(o)}return e}return[]}catch{return[]}}function T(t,e,n,o="root",c=0){try{if(c>15)return i.html`
|
|
6
6
|
<div style="${h.row}">
|
|
7
7
|
${e!=null?i.html`<span style="${h.key}">${e}</span
|
|
8
8
|
><span style="${h.colon}">:</span>`:i.nothing}
|
|
9
9
|
<span style="${h.preview}">[max depth]</span>
|
|
10
10
|
</div>
|
|
11
|
-
`;const l=
|
|
11
|
+
`;const l=dn(n),a=l&&an(t,o);if(!l)return i.html`
|
|
12
12
|
<div style="${h.row}">
|
|
13
13
|
<span style="${h.toggle}"></span>
|
|
14
14
|
${e!=null?i.html`<span style="${h.key}">${e}</span
|
|
15
15
|
><span style="${h.colon}">:</span>`:i.nothing}
|
|
16
|
-
${
|
|
16
|
+
${un(n)}
|
|
17
17
|
</div>
|
|
18
|
-
`;const u=a?
|
|
18
|
+
`;const u=a?pn(n):[],d=lt(n);return i.html`
|
|
19
19
|
<div>
|
|
20
20
|
<div
|
|
21
21
|
style="${h.row}cursor:pointer;user-select:none;"
|
|
22
|
-
@click=${p=>{try{p.stopPropagation(),
|
|
22
|
+
@click=${p=>{try{p.stopPropagation(),sn(t,o)}catch{}}}
|
|
23
23
|
>
|
|
24
24
|
<span style="${h.toggle}">${a?"▼":"▶"}</span>
|
|
25
25
|
${e!=null?i.html`<span style="${h.key}">${e}</span
|
|
26
26
|
><span style="${h.colon}">:</span>`:i.nothing}
|
|
27
27
|
${a?i.html`<span style="${h.preview}"
|
|
28
|
-
>${d==="array"?`Array(${n.length})`:d==="object"?"{":
|
|
29
|
-
>`:i.html`<span style="${h.preview}">${
|
|
28
|
+
>${d==="array"?`Array(${n.length})`:d==="object"?"{":Qt(n)}</span
|
|
29
|
+
>`:i.html`<span style="${h.preview}">${Qt(n)}</span>`}
|
|
30
30
|
</div>
|
|
31
31
|
${a?i.html`
|
|
32
32
|
<div style="${h.children}">
|
|
@@ -40,13 +40,13 @@
|
|
|
40
40
|
</div>`:i.nothing}
|
|
41
41
|
`:i.nothing}
|
|
42
42
|
</div>
|
|
43
|
-
`}catch{return i.html``}}function
|
|
43
|
+
`}catch{return i.html``}}function fn(t,e,n="root"){try{const o=Object.keys(e);return o.length===0?i.html`<div style="color:#777;font-size:13px;padding:2px 0;">
|
|
44
44
|
No data
|
|
45
45
|
</div>`:i.html`
|
|
46
46
|
${o.map(c=>T(t,c,e[c],`${n}.${c}`,0))}
|
|
47
|
-
`}catch{return i.html``}}function
|
|
47
|
+
`}catch{return i.html``}}function te(t){try{const e=Object.keys(t);return e.length===0?i.html`<div style="color: #777; font-size: 13px;">No props</div>`:i.html`
|
|
48
48
|
${i.repeat(e,n=>n,n=>T(t,n,t[n],`props.${n}`,0))}
|
|
49
|
-
`}catch{return i.html``}}function
|
|
49
|
+
`}catch{return i.html``}}function ee(t){try{return!t||t.size===0?i.html`<div style="color: #777; font-size: 13px;">No scopes</div>`:i.html`
|
|
50
50
|
${[...t?.entries()||[]].map(([e,n])=>{try{const o=e.name||"AnonymousScope",c={},l=new Set;for(const d of Object.keys(n))if(!(d==="__isScope___"||d==="reset")){l.add(d);try{const p=n[d];p&&typeof p=="function"&&p.__isAtom___?c[`${d} (atom)`]=p.get():c[d]=p}catch{c[d]="[error reading]"}}let a=Object.getPrototypeOf(n);for(;a&&a!==Object.prototype;){for(const d of Object.getOwnPropertyNames(a)){if(l.has(d)||d==="constructor"||d==="__isScope___"||d==="reset")continue;if(Object.getOwnPropertyDescriptor(a,d)?.get){l.add(d);try{c[`${d} (get)`]=n[d]}catch{c[`${d} (get)`]="[error reading]"}}}a=Object.getPrototypeOf(a)}const u=n;return i.html`
|
|
51
51
|
<div style="margin-bottom:6px;">
|
|
52
52
|
<div
|
|
@@ -63,20 +63,20 @@
|
|
|
63
63
|
</div>
|
|
64
64
|
</div>
|
|
65
65
|
`}catch{return i.html``}})}
|
|
66
|
-
`}catch{return i.html``}}function
|
|
66
|
+
`}catch{return i.html``}}function hn(t){try{if(!t)return[];const e=[];for(const n of t.keys())if(n&&typeof n=="function"&&n.__isAtom___)try{e.push({id:n.__id__??"?",value:n.get(),key:n})}catch{}return e}catch{return[]}}function ne(t){try{const e=hn(t);return e.length===0?i.html`<div style="color: #777; font-size: 13px;">No atoms</div>`:i.html`
|
|
67
67
|
${i.repeat(e,n=>n.id,(n,o)=>{const c=e.length===1?"atom":`atom#${o+1}`,l=typeof n.value=="object"&&n.value!==null?n.value:n.key;return T(l,c,n.value,`atom_${n.id}`,0)})}
|
|
68
|
-
`}catch{return i.html``}}function
|
|
68
|
+
`}catch{return i.html``}}function re(t){try{return!t||t.length===0?i.html`<div style="color: #777; font-size: 13px;">No state</div>`:i.html`
|
|
69
69
|
${t.map((e,n)=>{const o=t.length===1?"state":`state#${n+1}`;let c;try{c=e.atom.get()}catch{c=e.state}return T(c,o,c,`useState_${n}`,0)})}
|
|
70
|
-
`}catch{return i.html``}}function
|
|
70
|
+
`}catch{return i.html``}}function gn(t){try{const e={onMount:0,onCleanup:0,onPaint:0,onAllMount:0,effects:0,on:0,setters:0,useState:0,atoms:0,events:0,channels:0},n=t._useStates;n&&(e.useState=n.length);const o=t.cleanups;if(!o)return e;for(const c of o.keys())if(c!=null){if(c.__isAtom___){e.atoms++;continue}if(c.__isSetter___){e.setters++;continue}if(c.__isCleanupEvent___){e.events++;continue}if(c.__isEvent___){e.events++;continue}if(c.__isChannel___){e.channels++;continue}if(c.__isOnMount__){e.onMount++;continue}if(c.__isOnCleanup__){e.onCleanup++;continue}if(c.__isOnPaint__){e.onPaint++;continue}if(c.__isOnAllMount__){e.onAllMount++;continue}if(c.__isEffect__){e.effects++;continue}if(c.__isOn__){e.on++;continue}}return e}catch{return{onMount:0,onCleanup:0,onPaint:0,onAllMount:0,effects:0,on:0,setters:0,useState:0,atoms:0,events:0,channels:0}}}function mn(t,e){try{return i.html`
|
|
71
71
|
<span class="${r.hookPill}">
|
|
72
72
|
<span class="${r.hookPillLabel}">${t}</span>
|
|
73
73
|
<span class="${r.hookPillCount}">${e}</span>
|
|
74
74
|
</span>
|
|
75
|
-
`}catch{return i.html``}}function Ct(t){try{const e=
|
|
75
|
+
`}catch{return i.html``}}function Ct(t){try{const e=gn(t),n=[];return e.onMount>0&&n.push({label:"onMount",count:e.onMount}),e.onCleanup>0&&n.push({label:"onCleanup",count:e.onCleanup}),e.onPaint>0&&n.push({label:"onPaint",count:e.onPaint}),e.onAllMount>0&&n.push({label:"onAllMount",count:e.onAllMount}),e.effects>0&&n.push({label:"effect",count:e.effects}),e.on>0&&n.push({label:"on",count:e.on}),e.setters>0&&n.push({label:"setter",count:e.setters}),e.useState>0&&n.push({label:"useState",count:e.useState}),e.atoms>0&&n.push({label:"atom",count:e.atoms}),e.events>0&&n.push({label:"event",count:e.events}),e.channels>0&&n.push({label:"channel",count:e.channels}),n.length===0?i.nothing:i.html`
|
|
76
76
|
<div class="${r.hooksSummary}">
|
|
77
|
-
${n.map(o=>
|
|
77
|
+
${n.map(o=>mn(o.label,o.count))}
|
|
78
78
|
</div>
|
|
79
|
-
`}catch{return i.html``}}function
|
|
79
|
+
`}catch{return i.html``}}function yn(t,e){try{t.stopPropagation(),mt(e)}catch{}}function bn(t){try{const e=[];let n=wt(t);for(;n;)e.push(A(n)),n=wt(n);return e.reverse(),e}catch{return[]}}function oe(t){try{const e=bn(t),n=A(t);if(e.length===0)return i.html`
|
|
80
80
|
<div class="${r.inspectorBreadcrumb}">
|
|
81
81
|
<span class="${r.breadcrumbSegment} ${r.breadcrumbCurrent}"
|
|
82
82
|
>${n}</span
|
|
@@ -84,27 +84,27 @@
|
|
|
84
84
|
</div>
|
|
85
85
|
`;const o=[];for(let c=0;c<e.length;c++)c>0&&o.push(i.html`<span class="${r.breadcrumbSeparator}">›</span>`),o.push(i.html`<span class="${r.breadcrumbSegment}">${e[c]}</span>`);return o.push(i.html`<span class="${r.breadcrumbSeparator}">›</span>`),o.push(i.html`<span class="${r.breadcrumbSegment} ${r.breadcrumbCurrent}"
|
|
86
86
|
>${n}</span
|
|
87
|
-
>`),i.html` <div class="${r.inspectorBreadcrumb}">${o}</div> `}catch{return i.html``}}function
|
|
87
|
+
>`),i.html` <div class="${r.inspectorBreadcrumb}">${o}</div> `}catch{return i.html``}}function ie(t){try{return i.html`
|
|
88
88
|
<div class="${r.instanceDetails}">
|
|
89
89
|
<div class="${r.sectionHeader}">Props</div>
|
|
90
|
-
${
|
|
90
|
+
${te(t._props||{})}
|
|
91
91
|
|
|
92
92
|
<div class="${r.sectionHeader}">State</div>
|
|
93
|
-
${
|
|
93
|
+
${re(t._useStates)}
|
|
94
94
|
|
|
95
95
|
<div class="${r.sectionHeader}">Atoms</div>
|
|
96
|
-
${
|
|
96
|
+
${ne(t.cleanups)}
|
|
97
97
|
|
|
98
98
|
<div class="${r.sectionHeader}">Scopes</div>
|
|
99
|
-
${
|
|
99
|
+
${ee(t.scopes)}
|
|
100
100
|
</div>
|
|
101
|
-
`}catch{return i.html``}}function
|
|
101
|
+
`}catch{return i.html``}}function ce(){try{return i.html`
|
|
102
102
|
<div class="${r.inspector}">
|
|
103
103
|
<div class="${r.empty}">Select a component to inspect</div>
|
|
104
104
|
</div>
|
|
105
|
-
`}catch{return i.html``}}function
|
|
105
|
+
`}catch{return i.html``}}function le(t){try{const e=A(t),n=t.componentId,o=E(t),c=j(t);return i.html`
|
|
106
106
|
<div class="${r.inspector}">
|
|
107
|
-
${
|
|
107
|
+
${oe(t)}
|
|
108
108
|
<div class="${r.inspectorTitle}">
|
|
109
109
|
<span>${e}</span>
|
|
110
110
|
<span class="${r.instanceCount}">
|
|
@@ -113,7 +113,7 @@
|
|
|
113
113
|
<button
|
|
114
114
|
class="${r.highlightBtn}"
|
|
115
115
|
style="opacity: 1;"
|
|
116
|
-
@click=${l=>{try{
|
|
116
|
+
@click=${l=>{try{yn(l,t)}catch{}}}
|
|
117
117
|
title="Highlight in DOM"
|
|
118
118
|
>
|
|
119
119
|
<svg
|
|
@@ -133,9 +133,9 @@
|
|
|
133
133
|
</button>
|
|
134
134
|
</div>
|
|
135
135
|
|
|
136
|
-
${Ct(t)} ${
|
|
136
|
+
${Ct(t)} ${ie(t)}
|
|
137
137
|
</div>
|
|
138
|
-
`}catch{return i.html``}}function
|
|
138
|
+
`}catch{return i.html``}}function vn(t,e,n,o){try{const{name:c,instances:l}=t;return i.html`
|
|
139
139
|
<div class="${r.inspector}">
|
|
140
140
|
<div class="${r.inspectorTitle}">
|
|
141
141
|
<span>${c}</span>
|
|
@@ -148,7 +148,7 @@
|
|
|
148
148
|
${i.repeat(l,a=>a.componentId,a=>{const u=a.componentId,d=E(a),p=j(a),b=e===u;return i.html`
|
|
149
149
|
<li class="${r.instanceGroup}">
|
|
150
150
|
<div
|
|
151
|
-
class="${r.instanceItem} ${b?
|
|
151
|
+
class="${r.instanceItem} ${b?rn:""}"
|
|
152
152
|
@click=${()=>{try{n(u)}catch{}}}
|
|
153
153
|
>
|
|
154
154
|
<span
|
|
@@ -184,14 +184,14 @@
|
|
|
184
184
|
</button>
|
|
185
185
|
</div>
|
|
186
186
|
${b?i.html`
|
|
187
|
-
${
|
|
188
|
-
${
|
|
187
|
+
${oe(a)} ${Ct(a)}
|
|
188
|
+
${ie(a)}
|
|
189
189
|
`:i.nothing}
|
|
190
190
|
</li>
|
|
191
191
|
`})}
|
|
192
192
|
</ul>
|
|
193
193
|
</div>
|
|
194
|
-
`}catch{return i.html``}}function Tt(t){try{if("selectedComponent"in t&&t.selectedComponent!==void 0)return t.selectedComponent?
|
|
194
|
+
`}catch{return i.html``}}function Tt(t){try{if("selectedComponent"in t&&t.selectedComponent!==void 0)return t.selectedComponent?le(t.selectedComponent):ce();const{selectedGroup:e,selectedInstanceId:n,onSelectInstance:o,onHighlight:c}=t;return e?e.instances.length===1?le(e.instances[0]):vn(e,n,o,c):ce()}catch{return i.html``}}const M=new Set;let W=null,G=null,U=null,Y=null,at=!1,st=!1;const dt=i.atom(0);dt.skipDevToolsLog=!0;function R(){try{dt.set(M.size)}catch{}}function X(t){st=!0;try{return t()}finally{st=!1}}function xn(){try{if(at)return;at=!0,W=window.setTimeout,G=window.setInterval,U=window.clearTimeout,Y=window.clearInterval;const t=W,e=G,n=U,o=Y;window.setTimeout=function(l,a,...u){let d;try{if(typeof l!="function")return d=t(l,a,...u),d;const p=l;d=t(function(...m){try{return M.delete(d)&&R(),p.apply(this,m.length?m:u)}catch{}},a,...u),st||(M.add(d),R())}catch{d=t(l,a,...u)}return d},window.setInterval=function(l,a,...u){let d;try{if(typeof l!="function")return d=e(l,a,...u),d;const p=l;d=e(function(...m){try{return p.apply(this,m.length?m:u)}catch{}},a,...u),st||(M.add(d),R())}catch{d=e(l,a,...u)}return d},window.clearTimeout=function(l){try{l!==void 0&&M.delete(l)&&R()}catch{}n(l)},window.clearInterval=function(l){try{l!==void 0&&M.delete(l)&&R()}catch{}o(l)}}catch{}}function $n(){try{if(!at)return;at=!1,W&&(window.setTimeout=W),G&&(window.setInterval=G),U&&(window.clearTimeout=U),Y&&(window.clearInterval=Y),W=null,G=null,U=null,Y=null,M.clear(),R()}catch{}}const Mt=new WeakMap;let _n=0;function wn(t){return Mt.has(t)||Mt.set(t,`mdt-hl-${++_n}`),Mt.get(t)}function ae(t,e,n){try{const o=n.get(e),c=o!==void 0&&o!==t;n.set(e,t);const l=wn(e);return c&&X(()=>setTimeout(()=>{try{const a=document.getElementById(l);if(!a)return;a.classList.remove("mdt-highlight-flash"),a.offsetWidth,a.classList.add("mdt-highlight-flash"),setTimeout(()=>{try{a.classList.remove("mdt-highlight-flash")}catch{}},600)}catch{}},0)),i.html`<span id="${l}" class="mdt-highlight">${t}</span>`}catch{return i.html``}}const Sn=new WeakMap;let It="";function kn(t){try{let e=0;for(const n of t.instances){const o=j(n);o>e&&(e=o)}return e}catch{return 0}}function Bt(t){try{let e=1/0;for(const n of t.instances){const o=E(n);o<e&&(e=o)}return e===1/0?0:e}catch{return 0}}function se({groups:t,selectedViewFn:e,onSelectGroup:n,onHighlight:o,renderCallback:c}){try{const l=It.trim().toLowerCase(),u=[...l?t.filter(p=>p.name.toLowerCase().includes(l)):t].sort((p,b)=>{const m=Bt(p),v=Bt(b);return m-v||p.name.localeCompare(b.name)}),d=p=>{try{It=p.target.value,c()}catch{}};return i.html`
|
|
195
195
|
<div class="${r.content}">
|
|
196
196
|
<div style="padding: 0 0 6px 0; flex-shrink: 0;">
|
|
197
197
|
<input
|
|
@@ -206,12 +206,12 @@
|
|
|
206
206
|
${l?"No matching components":"No components mounted"}
|
|
207
207
|
</div>`:i.html`
|
|
208
208
|
<ul class="${r.componentList}">
|
|
209
|
-
${i.repeat(u,p=>p.viewFn,p=>{const b=
|
|
209
|
+
${i.repeat(u,p=>p.viewFn,p=>{const b=kn(p),m=e===p.viewFn,v=Bt(p),$t=p.instances.length,en=p.instances[0];return i.html`
|
|
210
210
|
<li
|
|
211
|
-
class="${r.componentItem} ${m?
|
|
211
|
+
class="${r.componentItem} ${m?Wt:""}"
|
|
212
212
|
@click=${()=>{try{n(p.viewFn)}catch{}}}
|
|
213
213
|
>
|
|
214
|
-
${
|
|
214
|
+
${ae(b,en,Sn)}
|
|
215
215
|
<span class="${r.componentName}"
|
|
216
216
|
>${p.name}</span
|
|
217
217
|
>
|
|
@@ -225,7 +225,7 @@
|
|
|
225
225
|
>
|
|
226
226
|
<button
|
|
227
227
|
class="${r.componentHighlightBtn} ${m?r.componentHighlightBtnSelected:""}"
|
|
228
|
-
@click=${
|
|
228
|
+
@click=${nn=>{try{nn.stopPropagation(),o(en)}catch{}}}
|
|
229
229
|
title="Highlight in page"
|
|
230
230
|
>
|
|
231
231
|
<svg
|
|
@@ -250,16 +250,16 @@
|
|
|
250
250
|
</ul>
|
|
251
251
|
`}
|
|
252
252
|
</div>
|
|
253
|
-
`}catch{return i.html``}}const
|
|
253
|
+
`}catch{return i.html``}}const Cn=new WeakMap,Lt=new WeakSet;function Tn(t){try{const e=new Set(t),n=new Map;for(const l of t)n.set(l,{component:l,name:A(l),depth:E(l),id:l.componentId,children:[]});const o=[];for(const l of t){const a=n.get(l),u=wt(l);if(u&&e.has(u)){const d=n.get(u);if(d){d.children.push(a);continue}}o.push(a)}const c=l=>{try{l.sort((a,u)=>a.depth-u.depth||a.name.localeCompare(u.name));for(const a of l)c(a.children)}catch{}};return c(o),o}catch{return[]}}function de(t,e,n,o,c){try{const l=t.children.length>0,a=Lt.has(t.component),u=j(t.component),d=e===t.id,p=t.depth*16,b=v=>{try{v.stopPropagation(),a?Lt.delete(t.component):Lt.add(t.component),c()}catch{}},m=()=>{try{n(t.id)}catch{}};return i.html`
|
|
254
254
|
<li
|
|
255
|
-
class="${r.componentItem} ${d?
|
|
255
|
+
class="${r.componentItem} ${d?Wt:""}"
|
|
256
256
|
style="margin-left: ${p}px;"
|
|
257
257
|
@click=${m}
|
|
258
258
|
>
|
|
259
259
|
${l?i.html`<span class="${r.treeToggle}" @click=${b}
|
|
260
260
|
>${a?"▶":"▼"}</span
|
|
261
261
|
>`:i.html`<span class="${r.treeLeaf}">·</span>`}
|
|
262
|
-
${
|
|
262
|
+
${ae(u,t.component,Cn)}
|
|
263
263
|
<span class="${r.componentName}">${t.name}</span>
|
|
264
264
|
<span class="${r.componentBadge}"
|
|
265
265
|
>#${t.id.toString().slice(2,6)}</span
|
|
@@ -287,16 +287,16 @@
|
|
|
287
287
|
</svg>
|
|
288
288
|
</button>
|
|
289
289
|
</li>
|
|
290
|
-
${l&&!a?i.repeat(t.children,v=>v.component,v=>
|
|
291
|
-
`}catch{return i.html``}}function
|
|
290
|
+
${l&&!a?i.repeat(t.children,v=>v.component,v=>de(v,e,n,o,c)):i.nothing}
|
|
291
|
+
`}catch{return i.html``}}function ue({selectedComponentId:t,onSelectComponent:e,onHighlight:n,renderCallback:o}){try{const c=St(),l=Tn(c);return i.html`
|
|
292
292
|
<div class="${r.content}">
|
|
293
293
|
${l.length===0?i.html`<div class="${r.empty}">No components mounted</div>`:i.html`
|
|
294
294
|
<ul class="${r.componentList}">
|
|
295
|
-
${i.repeat(l,a=>a.component,a=>
|
|
295
|
+
${i.repeat(l,a=>a.component,a=>de(a,t,e,n,o))}
|
|
296
296
|
</ul>
|
|
297
297
|
`}
|
|
298
298
|
</div>
|
|
299
|
-
`}catch{return i.html``}}const
|
|
299
|
+
`}catch{return i.html``}}const pe=()=>(i.effect(()=>{try{console.log(dt())}catch{}}),()=>{try{return i.html`Active Timers (${dt()})`}catch{return i.html``}});pe.skipDevToolsRender=!0;function fe({activeTab:t,onTabChange:e,onMinimise:n,onClose:o,unreadLogCount:c}){try{return i.html`
|
|
300
300
|
<div class="${r.header}">
|
|
301
301
|
<div class="${r.headerLeft}">
|
|
302
302
|
<div class="${r.title}">🔧 Mates DevTools</div>
|
|
@@ -325,7 +325,7 @@
|
|
|
325
325
|
</nav>
|
|
326
326
|
</div>
|
|
327
327
|
<div>
|
|
328
|
-
<button style="margin-left: 10px">${i.x(
|
|
328
|
+
<button style="margin-left: 10px">${i.x(pe)}</button>
|
|
329
329
|
</div>
|
|
330
330
|
<div class="${r.controls}">
|
|
331
331
|
<button
|
|
@@ -344,7 +344,7 @@
|
|
|
344
344
|
</button>
|
|
345
345
|
</div>
|
|
346
346
|
</div>
|
|
347
|
-
`}catch{return i.html``}}let ut=null;function
|
|
347
|
+
`}catch{return i.html``}}let ut=null;function he(t){try{return ut=t,()=>{ut===t&&(ut=null)}}catch{}return()=>{}}let x=!1;function ge(){x=!0}function me(){x=!1}function Mn(){return x}const In=100,P=[];let ye=1,pt=0;const be=new Set(["devtools","DOMReady","Paint"]);function k(t,e,n){try{P.length>=In&&P.shift(),P.push({id:ye++,ts:performance.now(),category:t,label:e,detail:n}),pt++;try{ut?.()}catch{}}catch{}}function Et(t){try{if(t===void 0)return"undefined";if(t===null)return"null";if(typeof t=="function")return"ƒ()";try{const e=JSON.stringify(t);return e.length>120?e.slice(0,117)+"...":e}catch{return String(t)}}catch{}return""}function ve(){return P}function Bn(){return P.length}function xe(){return pt}function $e(){try{pt=0}catch{}}function _e(){try{P.length=0,pt=0,ye=1}catch{}}function we(t){try{if(!x)return;k("mount",t,"mounted")}catch{}}function Se(t,e){try{if(!x)return;k("update",t,`updated (${e.toFixed(2)}ms)`)}catch{}}function ke(t){try{if(!x)return;k("cleanup",t,"cleaned up")}catch{}}function Ce(t,e){try{if(!x)return;k("setter",t,Et(e))}catch{}}function Te(t){try{if(!x)return;k("action",t)}catch{}}function Me(t,e){try{if(!x||be.has(t))return;k("event",t,e!==void 0?Et(e):void 0)}catch{}}const At=80,Ie=120;function z(t,e){try{return t.length>e?t.slice(0,e-1)+"…":t}catch{}return""}function Ln(t,e,n){try{if(!x)return;const o=n?`pending · ${z(n,50)}`:"pending";k("fetch",z(`${t} ${e}`,At),o)}catch{}}function Be(t,e,n,o){try{if(!x)return;k("fetch",z(`${t} ${e}`,At),z(`${n} · ${o.toFixed(0)}ms`,Ie))}catch{}}function Le(t,e,n,o){try{if(!x)return;k("fetch",z(`${t} ${e}`,At),z(`error · ${o.toFixed(0)}ms · ${n}`,Ie))}catch{}}function Ee(t,e){try{if(!x||be.has(t))return;k("event",`${t} (cleanup)`,e!==void 0?Et(e):void 0)}catch{}}const H={mount:"#66bb6a",update:"#42a5f5",cleanup:"#ef5350",setter:"#4fc3f7",action:"#81c784",event:"#ffb74d",fetch:"#ce93d8"},En={mount:"MNT",update:"UPD",cleanup:"CLN",setter:"SET",action:"ACT",event:"EVT",fetch:"NET"};let _="all";const An={all:null,lifecycle:["mount","update","cleanup"],logs:["setter","action","event"],network:["fetch"]};function Rn(t){try{const e=t/1e3|0,n=t%1e3,o=e/60|0,c=e%60;return`${String(o).padStart(2,"0")}:${String(c).padStart(2,"0")}.${String(n|0).padStart(3,"0")}`}catch{return""}}function Pn(){try{const t=ve(),e=An[_];if(!e)return t;const n=new Set(e);return t.filter(o=>n.has(o.category))}catch{return[]}}function Ae({onClear:t,renderCallback:e}){try{$e();const n=Pn();return i.html`
|
|
348
348
|
<div class="${r.logsPanel}">
|
|
349
349
|
<div class="${r.logsToolbar}">
|
|
350
350
|
<div class="${r.logsFilterRow}">
|
|
@@ -380,7 +380,7 @@
|
|
|
380
380
|
<span class="${r.logsCount}">${n.length} entries</span>
|
|
381
381
|
<button
|
|
382
382
|
class="${r.button}"
|
|
383
|
-
@click=${()=>{try{
|
|
383
|
+
@click=${()=>{try{_e(),t()}catch{}}}
|
|
384
384
|
title="Clear logs"
|
|
385
385
|
>
|
|
386
386
|
🗑
|
|
@@ -393,11 +393,11 @@
|
|
|
393
393
|
No logs yet. Interact with the app to see activity.
|
|
394
394
|
</div>`:i.repeat(n,o=>o.id,o=>i.html`
|
|
395
395
|
<div class="${r.logEntry}">
|
|
396
|
-
<span class="${r.logTs}">${
|
|
396
|
+
<span class="${r.logTs}">${Rn(o.ts)}</span>
|
|
397
397
|
<span
|
|
398
398
|
class="${r.logBadge}"
|
|
399
399
|
style="background: ${H[o.category]}22; color: ${H[o.category]}; border-color: ${H[o.category]}44;"
|
|
400
|
-
>${
|
|
400
|
+
>${En[o.category]}</span
|
|
401
401
|
>
|
|
402
402
|
<span class="${r.logLabel}">${o.label}</span>
|
|
403
403
|
${o.detail?i.html`<span class="${r.logDetail}"
|
|
@@ -407,7 +407,7 @@
|
|
|
407
407
|
`)}
|
|
408
408
|
</div>
|
|
409
409
|
</div>
|
|
410
|
-
`}catch{return i.html``}}let
|
|
410
|
+
`}catch{return i.html``}}let q=!1;function Re(){try{q=!0}catch{}}function Pe(){try{q=!1}catch{}}function zn(){return q}const Hn=100,J=new Map;let ze=1,ft=null;function He(t){try{return ft=t,()=>{try{ft===t&&(ft=null)}catch{}}}catch{}return()=>{}}function Rt(t,e,n){try{if(!q)return;const o={id:ze++,ts:performance.now(),durationMs:n,componentName:t,instanceId:e};let c=J.get(t);c||(c=[],J.set(t,c)),c.length>=Hn&&c.shift(),c.push(o);try{ft?.()}catch{}}catch{}}function Fn(t,e){try{if(!q)return Fe;const n=performance.now();return()=>Rt(t,e,performance.now()-n)}catch{}return Fe}function Fe(){}function De(){try{const t=[];for(const[e,n]of J){if(n.length===0)continue;let o=0,c=0,l=1/0;for(const a of n)o+=a.durationMs,a.durationMs>c&&(c=a.durationMs),a.durationMs<l&&(l=a.durationMs);t.push({name:e,renderCount:n.length,avgMs:o/n.length,maxMs:c,minMs:l,lastMs:n[n.length-1].durationMs,totalMs:o,timings:n})}return t.sort((e,n)=>n.totalMs-e.totalMs),t}catch{}return[]}function Oe(){try{const t=[];for(const e of J.values())for(let n=0;n<e.length;n++)t.push(e[n]);return t}catch{}return[]}function Dn(t=50){try{const e=Oe();return e.sort((n,o)=>o.ts-n.ts),e.length>t?e.slice(0,t):e}catch{}return[]}function Ve(t=20){try{const e=Oe();return e.sort((n,o)=>o.durationMs-n.durationMs),e.length>t?e.slice(0,t):e}catch{}return[]}function Ne(){try{J.clear(),ze=1}catch{}}i.atom(0);function K(t){try{return t<.01?"<0.01ms":t<1?`${t.toFixed(2)}ms`:t<10?`${t.toFixed(1)}ms`:`${t.toFixed(0)}ms`}catch{return""}}function je(t,e){try{return e<=0?0:Math.max(2,Math.min(100,t/e*100))}catch{return 0}}function We(t){try{return t<16?"#66bb6a":t<=20?"#ffb74d":"#ef5350"}catch{return""}}let Q="summary";function On(t){try{if(t.length===0)return i.html`<div class="${r.empty}">
|
|
411
411
|
No render data yet. Interact with the app to see component performance.
|
|
412
412
|
</div>`;const e=Math.max(...t.map(n=>n.totalMs));return i.html`
|
|
413
413
|
<table class="${r.perfTable}">
|
|
@@ -422,7 +422,7 @@
|
|
|
422
422
|
</tr>
|
|
423
423
|
</thead>
|
|
424
424
|
<tbody>
|
|
425
|
-
${i.repeat(t,n=>n.name,n=>{const o=
|
|
425
|
+
${i.repeat(t,n=>n.name,n=>{const o=We(n.lastMs);return i.html`
|
|
426
426
|
<tr class="${r.perfRow}">
|
|
427
427
|
<td class="${r.perfCell} ${r.perfName}">
|
|
428
428
|
${n.name}
|
|
@@ -431,22 +431,22 @@
|
|
|
431
431
|
${n.renderCount}
|
|
432
432
|
</td>
|
|
433
433
|
<td class="${r.perfCell} ${r.perfNum}">
|
|
434
|
-
${
|
|
434
|
+
${K(n.avgMs)}
|
|
435
435
|
</td>
|
|
436
436
|
<td class="${r.perfCell} ${r.perfNum}">
|
|
437
|
-
${
|
|
437
|
+
${K(n.maxMs)}
|
|
438
438
|
</td>
|
|
439
439
|
<td class="${r.perfCell} ${r.perfNum}">
|
|
440
|
-
${
|
|
440
|
+
${K(n.lastMs)}
|
|
441
441
|
</td>
|
|
442
442
|
<td class="${r.perfCell}">
|
|
443
443
|
<div class="${r.perfBarWrap}">
|
|
444
444
|
<div
|
|
445
445
|
class="${r.perfBar}"
|
|
446
|
-
style="width: ${
|
|
446
|
+
style="width: ${je(n.totalMs,e)}%; background: ${o};"
|
|
447
447
|
></div>
|
|
448
448
|
<span class="${r.perfBarLabel}"
|
|
449
|
-
>${
|
|
449
|
+
>${K(n.totalMs)}</span
|
|
450
450
|
>
|
|
451
451
|
</div>
|
|
452
452
|
</td>
|
|
@@ -454,7 +454,7 @@
|
|
|
454
454
|
`})}
|
|
455
455
|
</tbody>
|
|
456
456
|
</table>
|
|
457
|
-
`}catch{return i.html``}}function
|
|
457
|
+
`}catch{return i.html``}}function Vn(t,e){try{if(t.length===0)return i.html`<div class="${r.empty}">
|
|
458
458
|
No render data yet. Interact with the app to see slow renders.
|
|
459
459
|
</div>`;const n=Math.max(...t.map(c=>c.durationMs)),o=!!e;return i.html`
|
|
460
460
|
<table class="${r.perfTable}">
|
|
@@ -466,7 +466,7 @@
|
|
|
466
466
|
</tr>
|
|
467
467
|
</thead>
|
|
468
468
|
<tbody>
|
|
469
|
-
${i.repeat(t,c=>c.id,c=>{const l=
|
|
469
|
+
${i.repeat(t,c=>c.id,c=>{const l=We(c.durationMs),a=o?()=>{try{e(c.instanceId)}catch{}}:void 0;return i.html`
|
|
470
470
|
<tr
|
|
471
471
|
class="${r.perfRow} ${o?r.perfRowClickable:""}"
|
|
472
472
|
@click=${a}
|
|
@@ -476,13 +476,13 @@
|
|
|
476
476
|
${c.componentName}
|
|
477
477
|
</td>
|
|
478
478
|
<td class="${r.perfCell} ${r.perfNum}">
|
|
479
|
-
${
|
|
479
|
+
${K(c.durationMs)}
|
|
480
480
|
</td>
|
|
481
481
|
<td class="${r.perfCell}">
|
|
482
482
|
<div class="${r.perfBarWrap}">
|
|
483
483
|
<div
|
|
484
484
|
class="${r.perfBar}"
|
|
485
|
-
style="width: ${
|
|
485
|
+
style="width: ${je(c.durationMs,n)}%; background: ${l};"
|
|
486
486
|
></div>
|
|
487
487
|
</div>
|
|
488
488
|
</td>
|
|
@@ -490,7 +490,7 @@
|
|
|
490
490
|
`})}
|
|
491
491
|
</tbody>
|
|
492
492
|
</table>
|
|
493
|
-
`}catch{return i.html``}}function
|
|
493
|
+
`}catch{return i.html``}}function Ge({onClear:t,renderCallback:e,onNavigateToComponent:n}){try{const o=De(),c=Ve(30);return i.html`
|
|
494
494
|
<div class="${r.perfPanel}">
|
|
495
495
|
<div class="${r.perfToolbar}">
|
|
496
496
|
<div class="${r.perfTabs}">
|
|
@@ -510,7 +510,7 @@
|
|
|
510
510
|
<div class="${r.perfActions}">
|
|
511
511
|
<button
|
|
512
512
|
class="${r.button}"
|
|
513
|
-
@click=${()=>{try{
|
|
513
|
+
@click=${()=>{try{Ne(),t()}catch{}}}
|
|
514
514
|
title="Clear performance data"
|
|
515
515
|
>
|
|
516
516
|
🗑
|
|
@@ -519,10 +519,10 @@
|
|
|
519
519
|
</div>
|
|
520
520
|
|
|
521
521
|
<div class="${r.perfContent}">
|
|
522
|
-
${Q==="summary"?
|
|
522
|
+
${Q==="summary"?On(o):Vn(c,n??null)}
|
|
523
523
|
</div>
|
|
524
524
|
</div>
|
|
525
|
-
`}catch{return i.html``}}let I=!1,C=!1,Z="components",B="list",$=null,w=null,y=null,F=[],f=null,S=null,D=0;const
|
|
525
|
+
`}catch{return i.html``}}let I=!1,C=!1,Z="components",B="list",$=null,w=null,y=null,F=[],f=null,S=null,D=0;const Nn=150,jn=.8,Wn=.5;let L=null;function Pt(){try{const t=document.documentElement;L===null&&(L=parseFloat(getComputedStyle(t).paddingBottom)||0),t.style.paddingBottom=`${L+D}px`}catch{}}function zt(){try{if(L===null)return;document.documentElement.style.paddingBottom=L===0?"":`${L}px`,L=null}catch{}}let Ht=!1,Ue=0,Ye=0,ht=!1,tt=null,et=null,nt=null,O=null,V=null;function Gn(){try{V!==null&&(clearTimeout(V),V=null)}catch{}}function gt(){try{Gn(),O&&(O.remove(),O=null)}catch{}}function mt(t){try{let e=function(){try{const l=document.createElement("div");l.className=r.domHighlight,document.body.appendChild(l),O=l;const a=n.getBoundingClientRect();c?(l.style.position="fixed",l.style.top=`${a.top}px`,l.style.left=`${a.left}px`):(l.style.top=`${a.top+window.scrollY}px`,l.style.left=`${a.left+window.scrollX}px`),l.style.width=`${a.width}px`,l.style.height=`${a.height}px`,V=X(()=>setTimeout(()=>{try{O===l&&(l.classList.add("fade-out"),V=X(()=>setTimeout(()=>{try{O===l&>()}catch{}},600)))}catch{}},1500))}catch{}};gt();const n=t.firstElementChild??t,o=getComputedStyle(n).position,c=o==="fixed"||o==="sticky";if(c)e();else{const l=n.getBoundingClientRect(),a=l.top>=0&&l.bottom<=(window.innerHeight||document.documentElement.clientHeight);a||n.scrollIntoView({behavior:"smooth",block:"center"}),V=X(()=>setTimeout(e,a?0:400))}}catch{}}function Xe(){try{if($===null)return null;for(const t of F)for(const e of t.instances)if(e.componentId===$)return e;return null}catch{}return null}function Ft(){try{return w===null?null:F.find(t=>t.viewFn===w)??null}catch{}return null}function Un(){try{if(y===null)return null;const t=Ft();return t?t.instances.find(e=>e.componentId===y)??null:null}catch{}return null}function yt(){try{F=Xt(),$!==null&&!Xe()&&($=null),w!==null&&!Ft()?(w=null,y=null):y!==null&&!Un()&&(y=null)}catch{}}function bt(){try{return I&&!C}catch{}return!1}function rt(){try{return S?.querySelector(`.${r.panel}`)??null}catch{}return null}function Yn(t){try{$=$===t?null:t,g()}catch{}}function Xn(t){try{w===t?(w=null,y=null):(w=t,y=null),g()}catch{}}function qn(t){try{y=y===t?null:t,g()}catch{}}function Jn(t){try{$=t,Z="components",yt(),w=null,y=null;for(const e of F){for(const n of e.instances)if(n.componentId===t){w=e.viewFn,y=t;break}if(w)break}g()}catch{}}function Kn(t){try{Z=t,g()}catch{}}function Qn(){try{if(!I||C)return;C=!0,rt()?.classList.remove(r.panelVisible),f&&(f.style.display=""),zt()}catch{}}function Zn(){try{if(!C)return;C=!1,f&&(f.style.display="none"),yt(),g(),Pt(),requestAnimationFrame(()=>{try{requestAnimationFrame(()=>{try{rt()?.classList.add(r.panelVisible)}catch{}})}catch{}})}catch{}}function tr(){try{I=!1,C=!1,$=null,qe(),gt(),zt();const t=rt();if(t){t.classList.remove(r.panelVisible);let e=!1;const n=()=>{try{if(e)return;e=!0,t.removeEventListener("transitionend",n),Ot()}catch{}};t.addEventListener("transitionend",n,{once:!0}),X(()=>setTimeout(n,350))}else Ot();f&&(f.style.display="")}catch{}}function er(){try{if(I)return;I=!0,C=!1,f&&(f.style.display="none"),D=Math.round(window.innerHeight*Wn),nr(),ir(),yt(),g(),Pt(),requestAnimationFrame(()=>{try{requestAnimationFrame(()=>{try{rt()?.classList.add(r.panelVisible)}catch{}})}catch{}})}catch{}}function nr(){try{Re(),tt||(tt=he(()=>{try{bt()&&g()}catch{}})),et||(et=He(()=>{try{bt()&&g()}catch{}}))}catch{}}function qe(){try{Pe(),tt&&(tt(),tt=null),et&&(et(),et=null)}catch{}}const Dt="mates-devtools-vars";function rr(){try{if(document.getElementById(Dt))return;const t=document.createElement("style");t.id=Dt,t.textContent=`
|
|
526
526
|
#mates-devtools {
|
|
527
527
|
--dt-bg: #1a1a1a;
|
|
528
528
|
--dt-bg-2: #222222;
|
|
@@ -586,7 +586,7 @@
|
|
|
586
586
|
--dt-flash-bg: rgba(0,160,90,0.3);
|
|
587
587
|
}
|
|
588
588
|
}
|
|
589
|
-
`,document.head.appendChild(t)}catch{}}function
|
|
589
|
+
`,document.head.appendChild(t)}catch{}}function or(){try{document.getElementById(Dt)?.remove()}catch{}}function ir(){try{if(S)return;rr(),S=document.createElement("div"),S.id="mates-devtools",document.body.appendChild(S)}catch{}}function Ot(){try{if(!S)return;i.render(i.html``,S),S.remove(),S=null,or()}catch{}}function g(){try{if(!S||!I)return;const t=(()=>{try{switch(Z){case"components":return i.html`
|
|
590
590
|
<div class="${r.body}">
|
|
591
591
|
<div class="${r.leftColumn}">
|
|
592
592
|
<div class="${r.leftTabs}">
|
|
@@ -637,14 +637,14 @@
|
|
|
637
637
|
</svg>
|
|
638
638
|
</button>
|
|
639
639
|
</div>
|
|
640
|
-
${B==="list"?
|
|
640
|
+
${B==="list"?se({groups:F,selectedViewFn:w,onSelectGroup:Xn,onHighlight:e=>mt(e),renderCallback:g}):ue({selectedComponentId:$,onSelectComponent:Yn,onHighlight:e=>mt(e),renderCallback:g})}
|
|
641
641
|
</div>
|
|
642
|
-
${Tt(B==="list"?{selectedGroup:Ft(),selectedInstanceId:y,onSelectInstance:
|
|
642
|
+
${Tt(B==="list"?{selectedGroup:Ft(),selectedInstanceId:y,onSelectInstance:qn,onHighlight:e=>mt(e)}:{selectedComponent:Xe()})}
|
|
643
643
|
</div>
|
|
644
|
-
`;case"logs":return
|
|
644
|
+
`;case"logs":return Ae({onClear:g,renderCallback:g});case"performance":return Ge({onClear:g,renderCallback:g,onNavigateToComponent:Jn});default:return i.html``}}catch{}return i.html``})();i.render(i.html`
|
|
645
645
|
<div class="${r.panel}" style="height: ${D}px;">
|
|
646
|
-
<div class="${r.resizeHandle}" @mousedown=${
|
|
647
|
-
${
|
|
646
|
+
<div class="${r.resizeHandle}" @mousedown=${cr}></div>
|
|
647
|
+
${fe({activeTab:Z,onTabChange:Kn,onMinimise:Qn,onClose:tr,unreadLogCount:Z==="logs"?0:xe()})}
|
|
648
648
|
${t}
|
|
649
649
|
</div>
|
|
650
|
-
`,S)}catch{}}function
|
|
650
|
+
`,S)}catch{}}function cr(t){try{t.preventDefault();const e=t.clientY,n=D,o=l=>{try{const a=window.innerHeight*jn;D=Math.max(Nn,Math.min(a,n+(e-l.clientY)));const u=rt();u&&(u.style.height=`${D}px`),Pt()}catch{}},c=()=>{try{document.removeEventListener("mousemove",o),document.removeEventListener("mouseup",c)}catch{}};document.addEventListener("mousemove",o),document.addEventListener("mouseup",c)}catch{}}function lr(){try{if(f)return;f=document.createElement("div"),f.className=r.fab,f.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>',f.style.bottom="50px",f.style.right="50px",f.addEventListener("mousedown",Ke),f.addEventListener("click",Je),document.body.appendChild(f)}catch{}}function ar(){try{if(!f)return;f.removeEventListener("mousedown",Ke),f.removeEventListener("click",Je),f.remove(),f=null}catch{}}function Je(){try{if(ht){ht=!1;return}C?Zn():er()}catch{}}function Ke(t){try{t.preventDefault(),Ht=!0,ht=!1;const e=f.getBoundingClientRect();Ue=t.clientX-e.left,Ye=t.clientY-e.top,f.classList.add(r.fabDragging),document.addEventListener("mousemove",Qe),document.addEventListener("mouseup",Ze)}catch{}}function Qe(t){try{if(!Ht||!f)return;ht=!0,f.style.bottom="auto",f.style.right="auto",f.style.left=`${Math.max(0,Math.min(window.innerWidth-48,t.clientX-Ue))}px`,f.style.top=`${Math.max(0,Math.min(window.innerHeight-48,t.clientY-Ye))}px`}catch{}}function Ze(){try{Ht=!1,f?.classList.remove(r.fabDragging),document.removeEventListener("mousemove",Qe),document.removeEventListener("mouseup",Ze)}catch{}}function sr(){try{xn(),lr(),nt||(nt=N.__subscribe(t=>{try{t?.type==="unmount"&&($!==null&&t.component.componentId===$&&($=null),y!==null&&t.component.componentId===y&&(y=null)),yt(),bt()&&g()}catch{}})),kt(()=>{try{bt()&&g()}catch{}})}catch{}}function tn(){try{$n(),kt(null),gt(),qe(),me(),zt(),nt&&(nt(),nt=null),I=!1,C=!1,B="list",$=null,w=null,y=null,F=[],Ot(),ar()}catch{}}const vt=[];let Vt=null,Nt=null,jt=null;function dr(){try{Vt=i.interceptBefore((t,e)=>{try{const n=(e.method??"GET").toUpperCase();vt.push({method:n,url:t,startTs:performance.now()})}catch{}return{url:t,options:e}}),Nt=i.interceptAfter(t=>{try{const e=vt.shift(),n=e?.method??"",o=e?.url??t.url??"",c=e?performance.now()-e.startTs:0;Be(n,o,t.status,c)}catch{}return t}),jt=i.interceptError(t=>{try{const e=vt.shift(),n=e?performance.now()-e.startTs:0;Le(e?.method??"",e?.url??"",t.message,n)}catch{}})}catch{}}function ur(){try{Vt?.(),Nt?.(),jt?.(),Vt=null,Nt=null,jt=null,vt.length=0}catch{}}function pr(){try{if(i.isDevToolsInstalled())return;i.installDevToolsHooks({registerComponent:Gt,unregisterComponent:Ut,notifyRender:Yt,getComponentName:A,logComponentMount:we,logComponentRender:Se,logComponentUnmount:ke,logAtomSet:Ce,logAtomUpdate:Te,logEventTrigger:Me,logCleanupEventTrigger:Ee,logFetchRequest:Ln,logFetchResponse:Be,logFetchError:Le,recordRender:Rt}),ge(),dr()}catch{}}let xt=!1;function fr(){try{if(xt)return;xt=!0,pr(),sr()}catch{}}function hr(){try{if(!xt)return;xt=!1,ur(),tn()}catch{}}s.clearLogs=_e,s.clearPerfData=Ne,s.connectLogStore=ge,s.connectPerfStore=Re,s.destroyDevTools=tn,s.destroyMatesDevTools=hr,s.devToolsEvent=N,s.disconnectLogStore=me,s.disconnectPerfStore=Pe,s.getAllComponents=St,s.getComponentDepth=E,s.getComponentGroups=Xt,s.getComponentName=A,s.getComponentsByView=cn,s.getLogCount=Bn,s.getLogs=ve,s.getPerfSummaries=De,s.getRecentTimings=Dn,s.getRenderVersion=j,s.getSlowestRenders=Ve,s.getUnreadLogCount=xe,s.isLogStoreConnected=Mn,s.isPerfStoreConnected=zn,s.logAtomSet=Ce,s.logAtomUpdate=Te,s.logCleanupEventTrigger=Ee,s.logComponentMount=we,s.logComponentRender=Se,s.logComponentUnmount=ke,s.logEventTrigger=Me,s.markLogsRead=$e,s.notifyRender=Yt,s.onLogEntry=he,s.onPerfEntry=He,s.recordRender=Rt,s.registerComponent=Gt,s.renderAtomsViewer=ne,s.renderComponentInspector=Tt,s.renderComponentList=se,s.renderComponentTree=ue,s.renderHeader=fe,s.renderHooksViewer=Ct,s.renderLogsViewer=Ae,s.renderMatesDevTools=fr,s.renderPerfViewer=Ge,s.renderPropsViewer=te,s.renderScopesViewer=ee,s.renderUseStateViewer=re,s.renderValueTree=T,s.renderValueTreeEntries=fn,s.setValueTreeRenderCallback=kt,s.startRenderTiming=Fn,s.styles=r,s.unregisterComponent=Ut,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mates-devtools",
|
|
3
|
-
"version": "0.1.0-beta.
|
|
3
|
+
"version": "0.1.0-beta.3",
|
|
4
4
|
"description": "In-app DevTools panel for the Mates framework",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/mates-devtools.umd.js",
|
|
@@ -14,7 +14,8 @@
|
|
|
14
14
|
}
|
|
15
15
|
},
|
|
16
16
|
"files": [
|
|
17
|
-
"dist"
|
|
17
|
+
"dist",
|
|
18
|
+
"README.md"
|
|
18
19
|
],
|
|
19
20
|
"scripts": {
|
|
20
21
|
"build": "vite build && tsc -p tsconfig.build.json",
|