@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.
@@ -1 +1 @@
1
- {"version":3,"file":"DevTools.d.ts","sourceRoot":"","sources":["../../src/components/DevTools.tsx"],"names":[],"mappings":"AAeA,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,+BA2Df;AAED,eAAe,QAAQ,CAAC"}
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 })] })] }), _jsxs("div", { className: "nrpd-panel nrpd-panel-warnings", children: [_jsx("h2", { children: "Warnings" }), _jsx(Warnings, { events: events, threshold: threshold })] })] }));
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,+BAmE5D"}
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("h3", { children: "Event details" }), _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))) })] }))] }));
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,3 +1,6 @@
1
+ /**
2
+ * Filter controls for the DevTools dashboard.
3
+ */
1
4
  import type { DebugEvent } from "@next-rsc-debug/core";
2
5
  export type FilterType = "all" | "navigation" | "rsc" | "fetch" | "cache" | "action" | "error" | "slow" | "errors";
3
6
  export interface FilterOption {
@@ -1 +1 @@
1
- {"version":3,"file":"Filters.d.ts","sourceRoot":"","sources":["../../src/components/Filters.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,sBAAsB,CAAC;AAEvE,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
+ {"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,+BA2B5D"}
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-warnings", children: [_jsxs("h3", { 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))) })] }));
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.6",
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.6"
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": "^5.0.0"
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": "^26.1.0",
41
+ "jsdom": "^30.1.1",
43
42
  "react": "^19.0.0",
44
43
  "react-dom": "^19.0.0",
45
- "typescript": "^5.9.3",
44
+ "typescript": "^6.0.3",
46
45
  "vitest": "^3.2.4"
47
46
  }
48
47
  }