@rozenite/network-activity-plugin 1.0.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. package/README.md +9 -0
  2. package/dist/App.html +1 -1
  3. package/dist/assets/{App-C6wCDVkW.js → App-o_iVtD-5.js} +50 -7
  4. package/dist/boot-recording.cjs +1092 -0
  5. package/dist/boot-recording.js +1091 -0
  6. package/dist/react-native.cjs +3 -0
  7. package/dist/react-native.d.ts +3 -0
  8. package/dist/react-native.js +5 -1
  9. package/dist/rozenite.json +1 -1
  10. package/dist/src/react-native/boot-recording.d.ts +41 -0
  11. package/dist/src/react-native/config.d.ts +7 -4
  12. package/dist/src/react-native/events-listener.d.ts +44 -0
  13. package/dist/src/react-native/http/http-inspector.d.ts +10 -0
  14. package/dist/src/react-native/http/http-utils.d.ts +15 -0
  15. package/dist/src/react-native/inspector.d.ts +7 -0
  16. package/dist/src/react-native/network-inspector.d.ts +16 -0
  17. package/dist/src/react-native/sse/sse-inspector.d.ts +4 -7
  18. package/dist/src/react-native/useHttpInspector.d.ts +3 -0
  19. package/dist/src/react-native/useSSEInspector.d.ts +3 -0
  20. package/dist/src/react-native/useWebSocketInspector.d.ts +3 -0
  21. package/dist/src/react-native/websocket/websocket-inspector.d.ts +4 -7
  22. package/dist/src/shared/client.d.ts +3 -98
  23. package/dist/src/shared/http-events.d.ts +106 -0
  24. package/dist/src/shared/sse-events.d.ts +1 -1
  25. package/dist/src/ui/state/hooks.d.ts +3 -3
  26. package/dist/src/ui/state/model.d.ts +10 -0
  27. package/dist/useNetworkActivityDevTools.cjs +112 -993
  28. package/dist/useNetworkActivityDevTools.js +110 -989
  29. package/package.json +4 -4
  30. package/react-native.ts +8 -0
  31. package/src/react-native/boot-recording.ts +90 -0
  32. package/src/react-native/config.ts +9 -4
  33. package/src/react-native/events-listener.ts +102 -0
  34. package/src/react-native/http/http-inspector.ts +174 -0
  35. package/src/react-native/http/http-utils.ts +217 -0
  36. package/src/react-native/inspector.ts +10 -0
  37. package/src/react-native/network-inspector.ts +78 -0
  38. package/src/react-native/sse/sse-inspector.ts +12 -10
  39. package/src/react-native/useHttpInspector.ts +59 -0
  40. package/src/react-native/useNetworkActivityDevTools.ts +60 -115
  41. package/src/react-native/useSSEInspector.ts +35 -0
  42. package/src/react-native/useWebSocketInspector.ts +35 -0
  43. package/src/react-native/websocket/websocket-inspector.ts +18 -10
  44. package/src/shared/client.ts +4 -132
  45. package/src/shared/http-events.ts +140 -0
  46. package/src/shared/sse-events.ts +1 -1
  47. package/src/ui/components/RequestList.tsx +18 -6
  48. package/src/ui/components/Toolbar.tsx +3 -2
  49. package/src/ui/state/derived.ts +9 -3
  50. package/src/ui/state/model.ts +10 -0
  51. package/src/ui/state/store.ts +34 -3
  52. package/dist/src/react-native/http/network-inspector.d.ts +0 -8
  53. package/src/react-native/http/network-inspector.ts +0 -388
package/README.md CHANGED
@@ -50,6 +50,15 @@ function App() {
50
50
  }
51
51
  ```
52
52
 
53
+ Optional: To capture network requests before your React Native app initialization, add this to your entrypoint:
54
+
55
+ ```ts
56
+ // index.js
57
+ import { withOnBootNetworkActivityRecording } from '@rozenite/network-activity-plugin';
58
+
59
+ withOnBootNetworkActivityRecording();
60
+ ```
61
+
53
62
  ### 3. Access DevTools
54
63
 
55
64
  Start your development server and open React Native DevTools. You'll find the "Network Activity" panel in the DevTools interface.
package/dist/App.html CHANGED
@@ -22,7 +22,7 @@
22
22
  <script>
23
23
  var __ROZENITE_PANEL__ = true;
24
24
  </script>
25
- <script type="module" crossorigin src="./assets/App-C6wCDVkW.js"></script>
25
+ <script type="module" crossorigin src="./assets/App-o_iVtD-5.js"></script>
26
26
  <link rel="stylesheet" crossorigin href="./assets/App-BrSkOkws.css">
27
27
  </head>
28
28
  <body>
package/dist/assets/{App-C6wCDVkW.js → App-o_iVtD-5.js} RENAMED
@@ -15398,7 +15398,7 @@ const createNetworkActivityStore = () => createStore()(
15398
15398
  persist(
15399
15399
  (set, get) => ({
15400
15400
  // Initial state
15401
- isRecording: false,
15401
+ isRecording: true,
15402
15402
  selectedRequestId: null,
15403
15403
  networkEntries: /* @__PURE__ */ new Map(),
15404
15404
  websocketMessages: /* @__PURE__ */ new Map(),
@@ -15481,6 +15481,29 @@ const createNetworkActivityStore = () => createStore()(
15481
15481
  });
15482
15482
  break;
15483
15483
  }
15484
+ case "request-progress": {
15485
+ const eventData = data;
15486
+ set((state) => {
15487
+ const entry = state.networkEntries.get(eventData.requestId);
15488
+ if (!entry || entry.type !== "http") {
15489
+ return state;
15490
+ }
15491
+ const httpEntry = entry;
15492
+ const updatedEntry = {
15493
+ ...httpEntry,
15494
+ status: "loading",
15495
+ progress: {
15496
+ loaded: eventData.loaded,
15497
+ total: eventData.total,
15498
+ lengthComputable: eventData.lengthComputable
15499
+ }
15500
+ };
15501
+ const newEntries = new Map(state.networkEntries);
15502
+ newEntries.set(eventData.requestId, updatedEntry);
15503
+ return { networkEntries: newEntries };
15504
+ });
15505
+ break;
15506
+ }
15484
15507
  case "response-received": {
15485
15508
  const eventData = data;
15486
15509
  set((state) => {
@@ -15808,6 +15831,10 @@ const createNetworkActivityStore = () => createStore()(
15808
15831
  "request-sent",
15809
15832
  (data) => handleEvent("request-sent", data)
15810
15833
  ),
15834
+ client2.onMessage(
15835
+ "request-progress",
15836
+ (data) => handleEvent("request-progress", data)
15837
+ ),
15811
15838
  client2.onMessage(
15812
15839
  "response-received",
15813
15840
  (data) => handleEvent("response-received", data)
@@ -15906,7 +15933,7 @@ const createNetworkActivityStore = () => createStore()(
15906
15933
  return value;
15907
15934
  },
15908
15935
  reviver: (key, value) => {
15909
- if (typeof value === "object" && value !== null && "_type" in value && value._type === "map") {
15936
+ if (typeof value === "object" && value !== null && "_type" in value && value._type === "map" && "value" in value) {
15910
15937
  return new Map(value.value);
15911
15938
  }
15912
15939
  return value;
@@ -16209,9 +16236,10 @@ const getProcessedRequests = memoize((state) => {
16209
16236
  status: httpEntry.status,
16210
16237
  timestamp: httpEntry.timestamp,
16211
16238
  duration: httpEntry.duration,
16212
- size: httpEntry.size,
16239
+ size: httpEntry.size ?? null,
16213
16240
  method: httpEntry.request.method,
16214
- httpStatus: (_a = httpEntry.response) == null ? void 0 : _a.status
16241
+ httpStatus: (_a = httpEntry.response) == null ? void 0 : _a.status,
16242
+ progress: httpEntry.progress
16215
16243
  });
16216
16244
  } else if (entry.type === "websocket") {
16217
16245
  const wsEntry = entry;
@@ -16222,6 +16250,7 @@ const getProcessedRequests = memoize((state) => {
16222
16250
  status: wsEntry.status,
16223
16251
  timestamp: wsEntry.timestamp,
16224
16252
  duration: wsEntry.duration,
16253
+ size: null,
16225
16254
  method: "WS",
16226
16255
  httpStatus: 0
16227
16256
  });
@@ -16234,6 +16263,7 @@ const getProcessedRequests = memoize((state) => {
16234
16263
  status: sseEntry.status,
16235
16264
  timestamp: sseEntry.timestamp,
16236
16265
  duration: sseEntry.duration,
16266
+ size: null,
16237
16267
  method: "SSE",
16238
16268
  httpStatus: 0
16239
16269
  });
@@ -16298,7 +16328,8 @@ const Toolbar = () => {
16298
16328
  size: "sm",
16299
16329
  onClick: onToggleRecording,
16300
16330
  className: `h-8 w-8 p-0 ${isRecording ? "text-red-400 hover:text-red-300" : "text-gray-400 hover:text-blue-400"}`,
16301
- children: isRecording ? /* @__PURE__ */ jsxRuntimeExports.jsx(Circle, { className: "h-4 w-4 fill-current" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Square, { className: "h-4 w-4" })
16331
+ title: isRecording ? "Stop recording" : "Start recording",
16332
+ children: isRecording ? /* @__PURE__ */ jsxRuntimeExports.jsx(Square, { className: "h-4 w-4 fill-current" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Circle, { className: "h-4 w-4 fill-current" })
16302
16333
  }
16303
16334
  ),
16304
16335
  /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -19160,13 +19191,21 @@ const sortTime = (rowA, rowB, columnId) => {
19160
19191
  };
19161
19192
  const processNetworkRequests = (processedRequests, overrides, showEntirePathAsName = false) => {
19162
19193
  return processedRequests.map((request) => {
19194
+ var _a;
19163
19195
  const { domain, path } = extractDomainAndPath(request.name);
19164
19196
  const duration = request.duration || 0;
19165
19197
  const hasOverride = overrides.has(request.name);
19198
+ let statusDisplay = request.httpStatus || request.status;
19199
+ if (request.status === "loading" && ((_a = request.progress) == null ? void 0 : _a.lengthComputable)) {
19200
+ const percentage = Math.round(
19201
+ request.progress.loaded / request.progress.total * 100
19202
+ );
19203
+ statusDisplay = `${percentage}%`;
19204
+ }
19166
19205
  return {
19167
19206
  id: request.id,
19168
19207
  name: generateName(request.name, showEntirePathAsName),
19169
- status: request.httpStatus || request.status,
19208
+ status: statusDisplay,
19170
19209
  method: request.method,
19171
19210
  domain,
19172
19211
  path,
@@ -19252,7 +19291,11 @@ const RequestList = ({ filter: filter2 }) => {
19252
19291
  });
19253
19292
  }, [processedRequests, filter2]);
19254
19293
  const requests = reactExports.useMemo(() => {
19255
- return processNetworkRequests(filteredRequests, overrides, clientUISettings == null ? void 0 : clientUISettings.showUrlAsName);
19294
+ return processNetworkRequests(
19295
+ filteredRequests,
19296
+ overrides,
19297
+ clientUISettings == null ? void 0 : clientUISettings.showUrlAsName
19298
+ );
19256
19299
  }, [filteredRequests, overrides, clientUISettings == null ? void 0 : clientUISettings.showUrlAsName]);
19257
19300
  const table = useReactTable({
19258
19301
  data: requests,