@reckona/mreact-devtools 0.0.66 → 0.0.68
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/index.js.map +1 -1
- package/dist/overlay.js.map +1 -1
- package/package.json +3 -2
- package/src/index.ts +73 -0
- package/src/overlay.ts +246 -0
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAqBA,MAAM,UAAU,cAAc;IAC5B,MAAM,QAAQ,GAAoB,EAAE,CAAC;IACrC,MAAM,SAAS,GAAG,IAAI,GAAG,EAAoB,CAAC;IAE9C,OAAO;QACL,OAAO;YACL,SAAS,CAAC,KAAK,EAAE,CAAC;YAClB,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;YACpB,IAAI,UAAU,CAAC,gBAAgB,KAAK,IAAI,EAAE,CAAC;gBACzC,UAAU,CAAC,gBAAgB,GAAG,SAAS,CAAC;YAC1C,CAAC;QACH,CAAC;QACD,IAAI,CAAC,KAAK;YACR,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAErB,KAAK,MAAM,QAAQ,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC;gBAC7C,QAAQ,CAAC,KAAK,CAAC,CAAC;YAClB,CAAC;QACH,CAAC;QACD,MAAM;YACJ,OAAO,CAAC,GAAG,QAAQ,CAAC,CAAC;QACvB,CAAC;QACD,SAAS,CAAC,QAAQ;YAChB,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;YAExB,OAAO,GAAG,EAAE;gBACV,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;YAC7B,CAAC,CAAC;QACJ,CAAC;KACF,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,WAAqB,cAAc,EAAE;IACnE,UAAU,CAAC,gBAAgB,GAAG,QAAQ,CAAC;IAEvC,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,MAAM,UAAU,oBAAoB;IAClC,OAAO,UAAU,CAAC,gBAAgB,CAAC;AACrC,CAAC;AAED,MAAM,UAAU,uBAAuB,CACrC,WAAmB,EACnB,KAAiD;IAEjD,UAAU,CAAC,gBAAgB,EAAE,IAAI,EAAE,CAAC;QAClC,OAAO,EAAE,WAAW;QACpB,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;QACrB,GAAG,KAAK;KACT,CAAC,CAAC;AACL,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAqBA,MAAM,UAAU,cAAc;IAC5B,MAAM,QAAQ,GAAoB,EAAE,CAAC;IACrC,MAAM,SAAS,GAAG,IAAI,GAAG,EAAoB,CAAC;IAE9C,OAAO;QACL,OAAO;YACL,SAAS,CAAC,KAAK,EAAE,CAAC;YAClB,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;YACpB,IAAI,UAAU,CAAC,gBAAgB,KAAK,IAAI,EAAE,CAAC;gBACzC,UAAU,CAAC,gBAAgB,GAAG,SAAS,CAAC;YAC1C,CAAC;QACH,CAAC;QACD,IAAI,CAAC,KAAK;YACR,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAErB,KAAK,MAAM,QAAQ,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC;gBAC7C,QAAQ,CAAC,KAAK,CAAC,CAAC;YAClB,CAAC;QACH,CAAC;QACD,MAAM;YACJ,OAAO,CAAC,GAAG,QAAQ,CAAC,CAAC;QACvB,CAAC;QACD,SAAS,CAAC,QAAQ;YAChB,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;YAExB,OAAO,GAAG,EAAE;gBACV,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;YAC7B,CAAC,CAAC;QACJ,CAAC;KACF,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,WAAqB,cAAc,EAAE;IACnE,UAAU,CAAC,gBAAgB,GAAG,QAAQ,CAAC;IAEvC,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,MAAM,UAAU,oBAAoB;IAClC,OAAO,UAAU,CAAC,gBAAgB,CAAC;AACrC,CAAC;AAED,MAAM,UAAU,uBAAuB,CACrC,WAAmB,EACnB,KAAiD;IAEjD,UAAU,CAAC,gBAAgB,EAAE,IAAI,EAAE,CAAC;QAClC,OAAO,EAAE,WAAW;QACpB,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;QACrB,GAAG,KAAK;KACT,CAAC,CAAC;AACL,CAAC","sourcesContent":["export interface DevtoolsEvent {\n package: string;\n timestamp?: number;\n type: string;\n [key: string]: unknown;\n}\n\nexport type DevtoolsListener = (event: DevtoolsEvent) => void;\n\nexport interface Devtools {\n dispose(): void;\n emit(event: DevtoolsEvent): void;\n events(): DevtoolsEvent[];\n subscribe(listener: DevtoolsListener): () => void;\n}\n\ndeclare global {\n // eslint-disable-next-line no-var\n var __mreactDevtools: Devtools | undefined;\n}\n\nexport function createDevtools(): Devtools {\n const recorded: DevtoolsEvent[] = [];\n const listeners = new Set<DevtoolsListener>();\n\n return {\n dispose() {\n listeners.clear();\n recorded.length = 0;\n if (globalThis.__mreactDevtools === this) {\n globalThis.__mreactDevtools = undefined;\n }\n },\n emit(event) {\n recorded.push(event);\n\n for (const listener of Array.from(listeners)) {\n listener(event);\n }\n },\n events() {\n return [...recorded];\n },\n subscribe(listener) {\n listeners.add(listener);\n\n return () => {\n listeners.delete(listener);\n };\n },\n };\n}\n\nexport function installDevtools(devtools: Devtools = createDevtools()): Devtools {\n globalThis.__mreactDevtools = devtools;\n\n return devtools;\n}\n\nexport function getInstalledDevtools(): Devtools | undefined {\n return globalThis.__mreactDevtools;\n}\n\nexport function emitMreactDevtoolsEvent(\n packageName: string,\n event: { type: string } & Record<string, unknown>,\n): void {\n globalThis.__mreactDevtools?.emit?.({\n package: packageName,\n timestamp: Date.now(),\n ...event,\n });\n}\n"]}
|
package/dist/overlay.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"overlay.js","sourceRoot":"","sources":["../src/overlay.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"overlay.js","sourceRoot":"","sources":["../src/overlay.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n createDevtools,\n getInstalledDevtools,\n installDevtools,\n type Devtools,\n type DevtoolsEvent,\n} from \"./index.js\";\n\nexport type { Devtools, DevtoolsEvent, DevtoolsListener } from \"./index.js\";\n\nexport type DevtoolsOverlayTab = \"query\" | \"reactive\" | \"router\";\n\nexport interface DevtoolsOverlayOptions {\n devtools?: Devtools | undefined;\n document?: Document | undefined;\n maxEvents?: number | undefined;\n}\n\nexport interface MountedDevtoolsOverlay {\n devtools: Devtools;\n dispose(): void;\n element: HTMLElement;\n}\n\ninterface TabDefinition {\n label: string;\n tab: DevtoolsOverlayTab;\n}\n\nconst tabs: readonly TabDefinition[] = [\n { label: \"Reactive\", tab: \"reactive\" },\n { label: \"Query\", tab: \"query\" },\n { label: \"Router\", tab: \"router\" },\n];\n\nconst defaultMaxEvents = 200;\n\nexport function mountDevtoolsOverlay(\n options: DevtoolsOverlayOptions = {},\n): MountedDevtoolsOverlay {\n const ownerDocument = options.document ?? documentFromGlobal();\n const maxEvents = normalizeMaxEvents(options.maxEvents);\n const devtools = options.devtools ?? getInstalledDevtools() ?? installDevtools(createDevtools());\n const events = devtools.events().slice(-maxEvents);\n const element = ownerDocument.createElement(\"section\");\n const tabList = ownerDocument.createElement(\"nav\");\n const eventList = ownerDocument.createElement(\"ol\");\n let activeTab: DevtoolsOverlayTab = \"reactive\";\n let disposed = false;\n let renderScheduled = false;\n\n element.dataset.mreactDevtoolsOverlay = \"\";\n element.setAttribute(\"aria-label\", \"mreact devtools\");\n Object.assign(element.style, {\n background: \"#10151f\",\n border: \"1px solid #3b4350\",\n borderRadius: \"8px\",\n bottom: \"16px\",\n boxShadow: \"0 18px 50px rgb(0 0 0 / 0.35)\",\n color: \"#eef2f8\",\n display: \"grid\",\n font: \"12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace\",\n gap: \"8px\",\n maxHeight: \"min(420px, calc(100vh - 32px))\",\n overflow: \"hidden\",\n padding: \"10px\",\n position: \"fixed\",\n right: \"16px\",\n width: \"min(520px, calc(100vw - 32px))\",\n zIndex: \"2147483647\",\n });\n Object.assign(tabList.style, {\n display: \"grid\",\n gap: \"6px\",\n gridTemplateColumns: \"repeat(3, minmax(0, 1fr))\",\n });\n Object.assign(eventList.style, {\n display: \"grid\",\n gap: \"6px\",\n listStyle: \"none\",\n margin: \"0\",\n overflow: \"auto\",\n padding: \"0\",\n });\n\n element.append(tabList, eventList);\n ownerDocument.body.append(element);\n\n const unsubscribe = devtools.subscribe((event) => {\n events.push(event);\n if (events.length > maxEvents) {\n events.splice(0, events.length - maxEvents);\n }\n scheduleRender();\n });\n\n render();\n\n return {\n devtools,\n dispose() {\n disposed = true;\n unsubscribe();\n element.remove();\n },\n element,\n };\n\n function render(): void {\n if (disposed) {\n return;\n }\n\n tabList.replaceChildren(...tabs.map((tab) => renderTab(ownerDocument, tab)));\n const visibleEvents = [...events].filter((event) => eventTab(event) === activeTab).reverse();\n\n if (visibleEvents.length === 0) {\n const empty = ownerDocument.createElement(\"li\");\n empty.textContent = \"No events\";\n Object.assign(empty.style, {\n color: \"#9aa8bc\",\n padding: \"12px 4px\",\n });\n eventList.replaceChildren(empty);\n return;\n }\n\n eventList.replaceChildren(...visibleEvents.map((event) => renderEvent(ownerDocument, event)));\n }\n\n function scheduleRender(): void {\n if (renderScheduled || disposed) {\n return;\n }\n\n renderScheduled = true;\n queueMicrotask(() => {\n renderScheduled = false;\n render();\n });\n }\n\n function renderTab(doc: Document, definition: TabDefinition): HTMLButtonElement {\n const button = doc.createElement(\"button\");\n const count = events.filter((event) => eventTab(event) === definition.tab).length;\n button.type = \"button\";\n button.textContent = `${definition.label} ${count}`;\n button.setAttribute(\"aria-pressed\", String(definition.tab === activeTab));\n Object.assign(button.style, {\n background: definition.tab === activeTab ? \"#d8e7ff\" : \"#1b2330\",\n border: \"1px solid #3b4350\",\n borderRadius: \"6px\",\n color: definition.tab === activeTab ? \"#111827\" : \"#d8e7ff\",\n cursor: \"pointer\",\n font: \"inherit\",\n minHeight: \"32px\",\n overflow: \"hidden\",\n padding: \"6px 8px\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n });\n button.addEventListener(\"click\", () => {\n activeTab = definition.tab;\n render();\n });\n\n return button;\n }\n}\n\nfunction renderEvent(doc: Document, event: DevtoolsEvent): HTMLLIElement {\n const item = doc.createElement(\"li\");\n const title = doc.createElement(\"div\");\n const meta = doc.createElement(\"div\");\n const details = doc.createElement(\"pre\");\n\n title.textContent = event.type;\n meta.textContent = [event.package, formatTimestamp(event.timestamp)].filter(Boolean).join(\" | \");\n details.textContent = eventDetails(event);\n\n Object.assign(item.style, {\n background: \"#161d28\",\n border: \"1px solid #303846\",\n borderRadius: \"6px\",\n display: \"grid\",\n gap: \"3px\",\n padding: \"8px\",\n });\n Object.assign(title.style, {\n color: \"#ffffff\",\n fontWeight: \"700\",\n overflowWrap: \"anywhere\",\n });\n Object.assign(meta.style, {\n color: \"#9aa8bc\",\n overflowWrap: \"anywhere\",\n });\n Object.assign(details.style, {\n color: \"#c8d7ec\",\n margin: \"0\",\n overflow: \"auto\",\n whiteSpace: \"pre-wrap\",\n });\n\n item.append(title, meta, details);\n\n return item;\n}\n\nfunction eventDetails(event: DevtoolsEvent): string {\n const { package: _packageName, timestamp: _timestamp, type: _type, ...details } = event;\n\n return Object.keys(details).length === 0 ? \"{}\" : JSON.stringify(details);\n}\n\nfunction eventTab(event: DevtoolsEvent): DevtoolsOverlayTab {\n const search = `${event.package} ${event.type}`.toLowerCase();\n\n if (search.includes(\"router\") || search.includes(\"route\") || search.includes(\"navigation\")) {\n return \"router\";\n }\n\n if (search.includes(\"query\") || search.includes(\"mutation\")) {\n return \"query\";\n }\n\n return \"reactive\";\n}\n\nfunction formatTimestamp(timestamp: number | undefined): string {\n return typeof timestamp === \"number\" ? new Date(timestamp).toISOString() : \"\";\n}\n\nfunction normalizeMaxEvents(value: number | undefined): number {\n return Number.isFinite(value) && value !== undefined && value > 0\n ? Math.floor(value)\n : defaultMaxEvents;\n}\n\nfunction documentFromGlobal(): Document {\n if (typeof document === \"undefined\") {\n throw new Error(\"mountDevtoolsOverlay requires a browser document.\");\n }\n\n return document;\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@reckona/mreact-devtools",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.68",
|
|
4
4
|
"description": "Runtime event bridge for mreact developer tooling.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"debugging",
|
|
@@ -24,7 +24,8 @@
|
|
|
24
24
|
"dist/**/*.js",
|
|
25
25
|
"dist/**/*.js.map",
|
|
26
26
|
"dist/**/*.d.ts",
|
|
27
|
-
"dist/**/*.d.ts.map"
|
|
27
|
+
"dist/**/*.d.ts.map",
|
|
28
|
+
"src/**/*"
|
|
28
29
|
],
|
|
29
30
|
"type": "module",
|
|
30
31
|
"sideEffects": false,
|
package/src/index.ts
ADDED
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
export interface DevtoolsEvent {
|
|
2
|
+
package: string;
|
|
3
|
+
timestamp?: number;
|
|
4
|
+
type: string;
|
|
5
|
+
[key: string]: unknown;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
export type DevtoolsListener = (event: DevtoolsEvent) => void;
|
|
9
|
+
|
|
10
|
+
export interface Devtools {
|
|
11
|
+
dispose(): void;
|
|
12
|
+
emit(event: DevtoolsEvent): void;
|
|
13
|
+
events(): DevtoolsEvent[];
|
|
14
|
+
subscribe(listener: DevtoolsListener): () => void;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
declare global {
|
|
18
|
+
// eslint-disable-next-line no-var
|
|
19
|
+
var __mreactDevtools: Devtools | undefined;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
export function createDevtools(): Devtools {
|
|
23
|
+
const recorded: DevtoolsEvent[] = [];
|
|
24
|
+
const listeners = new Set<DevtoolsListener>();
|
|
25
|
+
|
|
26
|
+
return {
|
|
27
|
+
dispose() {
|
|
28
|
+
listeners.clear();
|
|
29
|
+
recorded.length = 0;
|
|
30
|
+
if (globalThis.__mreactDevtools === this) {
|
|
31
|
+
globalThis.__mreactDevtools = undefined;
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
emit(event) {
|
|
35
|
+
recorded.push(event);
|
|
36
|
+
|
|
37
|
+
for (const listener of Array.from(listeners)) {
|
|
38
|
+
listener(event);
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
events() {
|
|
42
|
+
return [...recorded];
|
|
43
|
+
},
|
|
44
|
+
subscribe(listener) {
|
|
45
|
+
listeners.add(listener);
|
|
46
|
+
|
|
47
|
+
return () => {
|
|
48
|
+
listeners.delete(listener);
|
|
49
|
+
};
|
|
50
|
+
},
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
export function installDevtools(devtools: Devtools = createDevtools()): Devtools {
|
|
55
|
+
globalThis.__mreactDevtools = devtools;
|
|
56
|
+
|
|
57
|
+
return devtools;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
export function getInstalledDevtools(): Devtools | undefined {
|
|
61
|
+
return globalThis.__mreactDevtools;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
export function emitMreactDevtoolsEvent(
|
|
65
|
+
packageName: string,
|
|
66
|
+
event: { type: string } & Record<string, unknown>,
|
|
67
|
+
): void {
|
|
68
|
+
globalThis.__mreactDevtools?.emit?.({
|
|
69
|
+
package: packageName,
|
|
70
|
+
timestamp: Date.now(),
|
|
71
|
+
...event,
|
|
72
|
+
});
|
|
73
|
+
}
|
package/src/overlay.ts
ADDED
|
@@ -0,0 +1,246 @@
|
|
|
1
|
+
import {
|
|
2
|
+
createDevtools,
|
|
3
|
+
getInstalledDevtools,
|
|
4
|
+
installDevtools,
|
|
5
|
+
type Devtools,
|
|
6
|
+
type DevtoolsEvent,
|
|
7
|
+
} from "./index.js";
|
|
8
|
+
|
|
9
|
+
export type { Devtools, DevtoolsEvent, DevtoolsListener } from "./index.js";
|
|
10
|
+
|
|
11
|
+
export type DevtoolsOverlayTab = "query" | "reactive" | "router";
|
|
12
|
+
|
|
13
|
+
export interface DevtoolsOverlayOptions {
|
|
14
|
+
devtools?: Devtools | undefined;
|
|
15
|
+
document?: Document | undefined;
|
|
16
|
+
maxEvents?: number | undefined;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
export interface MountedDevtoolsOverlay {
|
|
20
|
+
devtools: Devtools;
|
|
21
|
+
dispose(): void;
|
|
22
|
+
element: HTMLElement;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
interface TabDefinition {
|
|
26
|
+
label: string;
|
|
27
|
+
tab: DevtoolsOverlayTab;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
const tabs: readonly TabDefinition[] = [
|
|
31
|
+
{ label: "Reactive", tab: "reactive" },
|
|
32
|
+
{ label: "Query", tab: "query" },
|
|
33
|
+
{ label: "Router", tab: "router" },
|
|
34
|
+
];
|
|
35
|
+
|
|
36
|
+
const defaultMaxEvents = 200;
|
|
37
|
+
|
|
38
|
+
export function mountDevtoolsOverlay(
|
|
39
|
+
options: DevtoolsOverlayOptions = {},
|
|
40
|
+
): MountedDevtoolsOverlay {
|
|
41
|
+
const ownerDocument = options.document ?? documentFromGlobal();
|
|
42
|
+
const maxEvents = normalizeMaxEvents(options.maxEvents);
|
|
43
|
+
const devtools = options.devtools ?? getInstalledDevtools() ?? installDevtools(createDevtools());
|
|
44
|
+
const events = devtools.events().slice(-maxEvents);
|
|
45
|
+
const element = ownerDocument.createElement("section");
|
|
46
|
+
const tabList = ownerDocument.createElement("nav");
|
|
47
|
+
const eventList = ownerDocument.createElement("ol");
|
|
48
|
+
let activeTab: DevtoolsOverlayTab = "reactive";
|
|
49
|
+
let disposed = false;
|
|
50
|
+
let renderScheduled = false;
|
|
51
|
+
|
|
52
|
+
element.dataset.mreactDevtoolsOverlay = "";
|
|
53
|
+
element.setAttribute("aria-label", "mreact devtools");
|
|
54
|
+
Object.assign(element.style, {
|
|
55
|
+
background: "#10151f",
|
|
56
|
+
border: "1px solid #3b4350",
|
|
57
|
+
borderRadius: "8px",
|
|
58
|
+
bottom: "16px",
|
|
59
|
+
boxShadow: "0 18px 50px rgb(0 0 0 / 0.35)",
|
|
60
|
+
color: "#eef2f8",
|
|
61
|
+
display: "grid",
|
|
62
|
+
font: "12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
|
|
63
|
+
gap: "8px",
|
|
64
|
+
maxHeight: "min(420px, calc(100vh - 32px))",
|
|
65
|
+
overflow: "hidden",
|
|
66
|
+
padding: "10px",
|
|
67
|
+
position: "fixed",
|
|
68
|
+
right: "16px",
|
|
69
|
+
width: "min(520px, calc(100vw - 32px))",
|
|
70
|
+
zIndex: "2147483647",
|
|
71
|
+
});
|
|
72
|
+
Object.assign(tabList.style, {
|
|
73
|
+
display: "grid",
|
|
74
|
+
gap: "6px",
|
|
75
|
+
gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
|
|
76
|
+
});
|
|
77
|
+
Object.assign(eventList.style, {
|
|
78
|
+
display: "grid",
|
|
79
|
+
gap: "6px",
|
|
80
|
+
listStyle: "none",
|
|
81
|
+
margin: "0",
|
|
82
|
+
overflow: "auto",
|
|
83
|
+
padding: "0",
|
|
84
|
+
});
|
|
85
|
+
|
|
86
|
+
element.append(tabList, eventList);
|
|
87
|
+
ownerDocument.body.append(element);
|
|
88
|
+
|
|
89
|
+
const unsubscribe = devtools.subscribe((event) => {
|
|
90
|
+
events.push(event);
|
|
91
|
+
if (events.length > maxEvents) {
|
|
92
|
+
events.splice(0, events.length - maxEvents);
|
|
93
|
+
}
|
|
94
|
+
scheduleRender();
|
|
95
|
+
});
|
|
96
|
+
|
|
97
|
+
render();
|
|
98
|
+
|
|
99
|
+
return {
|
|
100
|
+
devtools,
|
|
101
|
+
dispose() {
|
|
102
|
+
disposed = true;
|
|
103
|
+
unsubscribe();
|
|
104
|
+
element.remove();
|
|
105
|
+
},
|
|
106
|
+
element,
|
|
107
|
+
};
|
|
108
|
+
|
|
109
|
+
function render(): void {
|
|
110
|
+
if (disposed) {
|
|
111
|
+
return;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
tabList.replaceChildren(...tabs.map((tab) => renderTab(ownerDocument, tab)));
|
|
115
|
+
const visibleEvents = [...events].filter((event) => eventTab(event) === activeTab).reverse();
|
|
116
|
+
|
|
117
|
+
if (visibleEvents.length === 0) {
|
|
118
|
+
const empty = ownerDocument.createElement("li");
|
|
119
|
+
empty.textContent = "No events";
|
|
120
|
+
Object.assign(empty.style, {
|
|
121
|
+
color: "#9aa8bc",
|
|
122
|
+
padding: "12px 4px",
|
|
123
|
+
});
|
|
124
|
+
eventList.replaceChildren(empty);
|
|
125
|
+
return;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
eventList.replaceChildren(...visibleEvents.map((event) => renderEvent(ownerDocument, event)));
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
function scheduleRender(): void {
|
|
132
|
+
if (renderScheduled || disposed) {
|
|
133
|
+
return;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
renderScheduled = true;
|
|
137
|
+
queueMicrotask(() => {
|
|
138
|
+
renderScheduled = false;
|
|
139
|
+
render();
|
|
140
|
+
});
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
function renderTab(doc: Document, definition: TabDefinition): HTMLButtonElement {
|
|
144
|
+
const button = doc.createElement("button");
|
|
145
|
+
const count = events.filter((event) => eventTab(event) === definition.tab).length;
|
|
146
|
+
button.type = "button";
|
|
147
|
+
button.textContent = `${definition.label} ${count}`;
|
|
148
|
+
button.setAttribute("aria-pressed", String(definition.tab === activeTab));
|
|
149
|
+
Object.assign(button.style, {
|
|
150
|
+
background: definition.tab === activeTab ? "#d8e7ff" : "#1b2330",
|
|
151
|
+
border: "1px solid #3b4350",
|
|
152
|
+
borderRadius: "6px",
|
|
153
|
+
color: definition.tab === activeTab ? "#111827" : "#d8e7ff",
|
|
154
|
+
cursor: "pointer",
|
|
155
|
+
font: "inherit",
|
|
156
|
+
minHeight: "32px",
|
|
157
|
+
overflow: "hidden",
|
|
158
|
+
padding: "6px 8px",
|
|
159
|
+
textOverflow: "ellipsis",
|
|
160
|
+
whiteSpace: "nowrap",
|
|
161
|
+
});
|
|
162
|
+
button.addEventListener("click", () => {
|
|
163
|
+
activeTab = definition.tab;
|
|
164
|
+
render();
|
|
165
|
+
});
|
|
166
|
+
|
|
167
|
+
return button;
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
function renderEvent(doc: Document, event: DevtoolsEvent): HTMLLIElement {
|
|
172
|
+
const item = doc.createElement("li");
|
|
173
|
+
const title = doc.createElement("div");
|
|
174
|
+
const meta = doc.createElement("div");
|
|
175
|
+
const details = doc.createElement("pre");
|
|
176
|
+
|
|
177
|
+
title.textContent = event.type;
|
|
178
|
+
meta.textContent = [event.package, formatTimestamp(event.timestamp)].filter(Boolean).join(" | ");
|
|
179
|
+
details.textContent = eventDetails(event);
|
|
180
|
+
|
|
181
|
+
Object.assign(item.style, {
|
|
182
|
+
background: "#161d28",
|
|
183
|
+
border: "1px solid #303846",
|
|
184
|
+
borderRadius: "6px",
|
|
185
|
+
display: "grid",
|
|
186
|
+
gap: "3px",
|
|
187
|
+
padding: "8px",
|
|
188
|
+
});
|
|
189
|
+
Object.assign(title.style, {
|
|
190
|
+
color: "#ffffff",
|
|
191
|
+
fontWeight: "700",
|
|
192
|
+
overflowWrap: "anywhere",
|
|
193
|
+
});
|
|
194
|
+
Object.assign(meta.style, {
|
|
195
|
+
color: "#9aa8bc",
|
|
196
|
+
overflowWrap: "anywhere",
|
|
197
|
+
});
|
|
198
|
+
Object.assign(details.style, {
|
|
199
|
+
color: "#c8d7ec",
|
|
200
|
+
margin: "0",
|
|
201
|
+
overflow: "auto",
|
|
202
|
+
whiteSpace: "pre-wrap",
|
|
203
|
+
});
|
|
204
|
+
|
|
205
|
+
item.append(title, meta, details);
|
|
206
|
+
|
|
207
|
+
return item;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
function eventDetails(event: DevtoolsEvent): string {
|
|
211
|
+
const { package: _packageName, timestamp: _timestamp, type: _type, ...details } = event;
|
|
212
|
+
|
|
213
|
+
return Object.keys(details).length === 0 ? "{}" : JSON.stringify(details);
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
function eventTab(event: DevtoolsEvent): DevtoolsOverlayTab {
|
|
217
|
+
const search = `${event.package} ${event.type}`.toLowerCase();
|
|
218
|
+
|
|
219
|
+
if (search.includes("router") || search.includes("route") || search.includes("navigation")) {
|
|
220
|
+
return "router";
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
if (search.includes("query") || search.includes("mutation")) {
|
|
224
|
+
return "query";
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
return "reactive";
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
function formatTimestamp(timestamp: number | undefined): string {
|
|
231
|
+
return typeof timestamp === "number" ? new Date(timestamp).toISOString() : "";
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
function normalizeMaxEvents(value: number | undefined): number {
|
|
235
|
+
return Number.isFinite(value) && value !== undefined && value > 0
|
|
236
|
+
? Math.floor(value)
|
|
237
|
+
: defaultMaxEvents;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
function documentFromGlobal(): Document {
|
|
241
|
+
if (typeof document === "undefined") {
|
|
242
|
+
throw new Error("mountDevtoolsOverlay requires a browser document.");
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
return document;
|
|
246
|
+
}
|