@next-rsc-debug/devtools 0.1.6 → 0.1.8
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/components/DevTools.d.ts.map +1 -1
- package/dist/components/DevTools.js +1 -1
- package/dist/components/FetchInspector.d.ts.map +1 -1
- package/dist/components/FetchInspector.js +1 -1
- package/dist/components/Filters.d.ts +3 -0
- package/dist/components/Filters.d.ts.map +1 -1
- package/dist/components/Warnings.d.ts.map +1 -1
- package/dist/components/Warnings.js +2 -2
- package/dist/styles.css +15 -0
- package/package.json +6 -7
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DevTools.d.ts","sourceRoot":"","sources":["../../src/components/DevTools.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DevTools.d.ts","sourceRoot":"","sources":["../../src/components/DevTools.tsx"],"names":[],"mappings":"AAcA,MAAM,WAAW,aAAa;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,wBAAgB,QAAQ,CAAC,EACvB,GAAgC,EAChC,gBAAsB,GACvB,EAAE,aAAa,+BA0Df;AAED,eAAe,QAAQ,CAAC"}
|
|
@@ -17,6 +17,6 @@ export function DevTools({ url = "/__next-rsc-debug/events", defaultThreshold =
|
|
|
17
17
|
const [selectedId, setSelectedId] = useState(undefined);
|
|
18
18
|
const filtered = useMemo(() => filterEvents(events, filter, threshold), [events, filter, threshold]);
|
|
19
19
|
const selectedEvent = useMemo(() => filtered.find((e) => e.id === selectedId) ?? null, [filtered, selectedId]);
|
|
20
|
-
return (_jsxs("div", { className: "nrpd-dashboard", children: [_jsxs("header", { className: "nrpd-header", children: [_jsx("h1", { children: "Next RSC Debug" }), _jsx("span", { className: `nrpd-connection ${connected ? "connected" : "disconnected"}`, children: connected ? "● Connected" : "○ Disconnected" }), error && _jsx("span", { className: "nrpd-error", children: error })] }), _jsx(Summary, { events: events, threshold: threshold }), _jsx(FilterControls, { activeFilter: filter, onFilterChange: setFilter, threshold: threshold, onThresholdChange: setThreshold }), _jsxs("div", { className: "nrpd-main", children: [_jsxs("div", { className: "nrpd-panel nrpd-panel-timeline", children: [_jsx("h2", { children: "Timeline" }), _jsx(Timeline, { events: filtered, selectedId: selectedId, onSelect: (event) => setSelectedId(event.id) })] }), _jsxs("div", { className: "nrpd-panel nrpd-panel-inspector", children: [_jsx("h2", { children: "Event details" }), _jsx(FetchInspector, { event: selectedEvent })] })] }),
|
|
20
|
+
return (_jsxs("div", { className: "nrpd-dashboard", children: [_jsxs("header", { className: "nrpd-header", children: [_jsx("h1", { children: "Next RSC Debug" }), _jsx("span", { className: `nrpd-connection ${connected ? "connected" : "disconnected"}`, children: connected ? "● Connected" : "○ Disconnected" }), error && _jsx("span", { className: "nrpd-error", children: error })] }), _jsx(Summary, { events: events, threshold: threshold }), _jsx(FilterControls, { activeFilter: filter, onFilterChange: setFilter, threshold: threshold, onThresholdChange: setThreshold }), _jsxs("div", { className: "nrpd-main", children: [_jsxs("div", { className: "nrpd-panel nrpd-panel-timeline", children: [_jsx("h2", { children: "Timeline" }), _jsx(Timeline, { events: filtered, selectedId: selectedId, onSelect: (event) => setSelectedId(event.id) })] }), _jsxs("div", { className: "nrpd-panel nrpd-panel-inspector", children: [_jsx("h2", { children: "Event details" }), _jsx(FetchInspector, { event: selectedEvent })] })] }), _jsx("div", { className: "nrpd-panel nrpd-panel-warnings", children: _jsx(Warnings, { events: events, threshold: threshold }) })] }));
|
|
21
21
|
}
|
|
22
22
|
export default DevTools;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FetchInspector.d.ts","sourceRoot":"","sources":["../../src/components/FetchInspector.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAEvD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;CAC1B;AAOD,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,EAAE,mBAAmB,+
|
|
1
|
+
{"version":3,"file":"FetchInspector.d.ts","sourceRoot":"","sources":["../../src/components/FetchInspector.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAEvD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;CAC1B;AAOD,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,EAAE,mBAAmB,+BAkE5D"}
|
|
@@ -38,5 +38,5 @@ export function FetchInspector({ event }) {
|
|
|
38
38
|
const warnings = Array.isArray(metadata.warnings)
|
|
39
39
|
? metadata.warnings
|
|
40
40
|
: [];
|
|
41
|
-
return (_jsxs("div", { className: "nrpd-inspector", children: [_jsx("
|
|
41
|
+
return (_jsxs("div", { className: "nrpd-inspector", children: [_jsx("table", { className: "nrpd-inspector-table", children: _jsx("tbody", { children: rows.map((row) => (_jsxs("tr", { children: [_jsx("td", { className: "nrpd-inspector-label", children: row.label }), _jsx("td", { className: "nrpd-inspector-value", children: row.value })] }, row.label))) }) }), warnings.length > 0 && (_jsxs("div", { className: "nrpd-warnings", children: [_jsx("h4", { children: "Warnings" }), _jsx("ul", { children: warnings.map((w, i) => (_jsx("li", { children: typeof w === "string" ? w : (w.message ?? "") }, i))) })] }))] }));
|
|
42
42
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Filters.d.ts","sourceRoot":"","sources":["../../src/components/Filters.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Filters.d.ts","sourceRoot":"","sources":["../../src/components/Filters.tsx"],"names":[],"mappings":"AAEA;;GAEG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAEvD,MAAM,MAAM,UAAU,GAClB,KAAK,GACL,YAAY,GACZ,KAAK,GACL,OAAO,GACP,OAAO,GACP,QAAQ,GACR,OAAO,GACP,MAAM,GACN,QAAQ,CAAC;AAEb,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,UAAU,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,cAAc,EAAE,YAAY,EAUxC,CAAC;AAEF,wBAAgB,YAAY,CAC1B,MAAM,EAAE,UAAU,EAAE,EACpB,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,MAAM,GAChB,UAAU,EAAE,CAiCd;AAED,MAAM,WAAW,mBAAmB;IAClC,YAAY,EAAE,UAAU,CAAC;IACzB,cAAc,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAChD;AAED,wBAAgB,cAAc,CAAC,EAC7B,YAAY,EACZ,cAAc,EACd,SAAS,EACT,iBAAiB,GAClB,EAAE,mBAAmB,+BA+BrB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Warnings.d.ts","sourceRoot":"","sources":["../../src/components/Warnings.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAW,MAAM,sBAAsB,CAAC;AAGhE,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,QAAQ,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,aAAa,+
|
|
1
|
+
{"version":3,"file":"Warnings.d.ts","sourceRoot":"","sources":["../../src/components/Warnings.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAW,MAAM,sBAAsB,CAAC;AAGhE,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,QAAQ,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,aAAa,+BA8B5D"}
|
|
@@ -8,7 +8,7 @@ import { analyzeEvents } from "@next-rsc-debug/core";
|
|
|
8
8
|
export function Warnings({ events, threshold }) {
|
|
9
9
|
const { warnings } = useMemo(() => analyzeEvents(events, { slowThreshold: threshold }), [events, threshold]);
|
|
10
10
|
if (warnings.length === 0) {
|
|
11
|
-
return (_jsx("div", { className: "nrpd-empty", children: _jsx("span", { children: "No warnings detected." }) }));
|
|
11
|
+
return (_jsxs("div", { className: "nrpd-panel-body", children: [_jsx("h2", { children: "Warnings" }), _jsx("div", { className: "nrpd-empty", children: _jsx("span", { children: "No warnings detected." }) })] }));
|
|
12
12
|
}
|
|
13
|
-
return (_jsxs("div", { className: "nrpd-
|
|
13
|
+
return (_jsxs("div", { className: "nrpd-panel-body", children: [_jsxs("h2", { children: ["Warnings (", warnings.length, ")"] }), _jsx("ul", { className: "nrpd-warning-list", children: warnings.map((w) => (_jsxs("li", { className: `nrpd-warning nrpd-warning-${w.type}`, children: [_jsx("span", { className: "nrpd-warning-type", children: w.type }), _jsx("span", { className: "nrpd-warning-message", children: w.message })] }, w.id))) })] }));
|
|
14
14
|
}
|
package/dist/styles.css
CHANGED
|
@@ -3,15 +3,26 @@
|
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
5
|
.nrpd-dashboard {
|
|
6
|
+
box-sizing: border-box;
|
|
6
7
|
font-family:
|
|
7
8
|
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
8
9
|
background: #0f1115;
|
|
9
10
|
color: #e6e6e6;
|
|
11
|
+
width: 100%;
|
|
10
12
|
min-height: 100vh;
|
|
13
|
+
/* Respect the dynamic viewport so mobile browser chrome cannot push the
|
|
14
|
+
dashboard into a spurious scrollbar. */
|
|
15
|
+
min-height: 100dvh;
|
|
11
16
|
padding: 16px;
|
|
12
17
|
font-size: 13px;
|
|
13
18
|
}
|
|
14
19
|
|
|
20
|
+
.nrpd-dashboard *,
|
|
21
|
+
.nrpd-dashboard *::before,
|
|
22
|
+
.nrpd-dashboard *::after {
|
|
23
|
+
box-sizing: border-box;
|
|
24
|
+
}
|
|
25
|
+
|
|
15
26
|
.nrpd-header {
|
|
16
27
|
display: flex;
|
|
17
28
|
align-items: center;
|
|
@@ -93,11 +104,13 @@
|
|
|
93
104
|
|
|
94
105
|
.nrpd-filter-group {
|
|
95
106
|
display: flex;
|
|
107
|
+
flex-wrap: wrap;
|
|
96
108
|
gap: 4px;
|
|
97
109
|
background: #161b22;
|
|
98
110
|
border: 1px solid #1f2430;
|
|
99
111
|
border-radius: 8px;
|
|
100
112
|
padding: 4px;
|
|
113
|
+
max-width: 100%;
|
|
101
114
|
}
|
|
102
115
|
|
|
103
116
|
.nrpd-filter-btn {
|
|
@@ -137,6 +150,7 @@
|
|
|
137
150
|
grid-template-columns: 1fr 1fr;
|
|
138
151
|
gap: 16px;
|
|
139
152
|
margin-bottom: 16px;
|
|
153
|
+
min-width: 0;
|
|
140
154
|
}
|
|
141
155
|
|
|
142
156
|
.nrpd-panel {
|
|
@@ -144,6 +158,7 @@
|
|
|
144
158
|
border: 1px solid #1f2430;
|
|
145
159
|
border-radius: 8px;
|
|
146
160
|
padding: 12px;
|
|
161
|
+
min-width: 0;
|
|
147
162
|
}
|
|
148
163
|
|
|
149
164
|
.nrpd-panel h2 {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@next-rsc-debug/devtools",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.8",
|
|
4
4
|
"description": "React-based DevTools UI for Next RSC Debug",
|
|
5
5
|
"author": "Samith Mendis",
|
|
6
6
|
"license": "MIT",
|
|
@@ -20,11 +20,10 @@
|
|
|
20
20
|
"scripts": {
|
|
21
21
|
"build": "tsc -p tsconfig.json && node ./scripts/copy-css.mjs",
|
|
22
22
|
"typecheck": "tsc --noEmit -p tsconfig.json",
|
|
23
|
-
"test": "vitest run --config vitest.config.ts"
|
|
24
|
-
"lint": "eslint src --ext .tsx,.ts"
|
|
23
|
+
"test": "vitest run --config vitest.config.ts"
|
|
25
24
|
},
|
|
26
25
|
"dependencies": {
|
|
27
|
-
"@next-rsc-debug/core": "0.1.
|
|
26
|
+
"@next-rsc-debug/core": "0.1.8"
|
|
28
27
|
},
|
|
29
28
|
"publishConfig": {
|
|
30
29
|
"access": "public",
|
|
@@ -34,15 +33,15 @@
|
|
|
34
33
|
"peerDependencies": {
|
|
35
34
|
"react": "^19.0.0",
|
|
36
35
|
"react-dom": "^19.0.0",
|
|
37
|
-
"typescript": "
|
|
36
|
+
"typescript": ">=5.0.0 <6.1.0"
|
|
38
37
|
},
|
|
39
38
|
"devDependencies": {
|
|
40
39
|
"@testing-library/jest-dom": "^6.6.0",
|
|
41
40
|
"@testing-library/react": "^16.0.0",
|
|
42
|
-
"jsdom": "^
|
|
41
|
+
"jsdom": "^30.1.1",
|
|
43
42
|
"react": "^19.0.0",
|
|
44
43
|
"react-dom": "^19.0.0",
|
|
45
|
-
"typescript": "^
|
|
44
|
+
"typescript": "^6.0.3",
|
|
46
45
|
"vitest": "^3.2.4"
|
|
47
46
|
}
|
|
48
47
|
}
|