@rozenite/network-activity-plugin 1.1.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 (50) hide show
  1. package/README.md +9 -0
  2. package/dist/App.html +1 -1
  3. package/dist/assets/{App-Kyi7zHUX.js → App-o_iVtD-5.js} +10 -4
  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 -105
  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/useNetworkActivityDevTools.cjs +112 -1011
  27. package/dist/useNetworkActivityDevTools.js +110 -1007
  28. package/package.json +4 -4
  29. package/react-native.ts +8 -0
  30. package/src/react-native/boot-recording.ts +90 -0
  31. package/src/react-native/config.ts +9 -4
  32. package/src/react-native/events-listener.ts +102 -0
  33. package/src/react-native/http/http-inspector.ts +174 -0
  34. package/src/react-native/http/http-utils.ts +217 -0
  35. package/src/react-native/inspector.ts +10 -0
  36. package/src/react-native/network-inspector.ts +78 -0
  37. package/src/react-native/sse/sse-inspector.ts +12 -10
  38. package/src/react-native/useHttpInspector.ts +59 -0
  39. package/src/react-native/useNetworkActivityDevTools.ts +60 -115
  40. package/src/react-native/useSSEInspector.ts +35 -0
  41. package/src/react-native/useWebSocketInspector.ts +35 -0
  42. package/src/react-native/websocket/websocket-inspector.ts +18 -10
  43. package/src/shared/client.ts +4 -140
  44. package/src/shared/http-events.ts +140 -0
  45. package/src/shared/sse-events.ts +1 -1
  46. package/src/ui/components/RequestList.tsx +9 -5
  47. package/src/ui/state/derived.ts +7 -3
  48. package/src/ui/state/store.ts +4 -3
  49. package/dist/src/react-native/http/network-inspector.d.ts +0 -8
  50. package/src/react-native/http/network-inspector.ts +0 -408
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-Kyi7zHUX.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>
@@ -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(),
@@ -15933,7 +15933,7 @@ const createNetworkActivityStore = () => createStore()(
15933
15933
  return value;
15934
15934
  },
15935
15935
  reviver: (key, value) => {
15936
- 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) {
15937
15937
  return new Map(value.value);
15938
15938
  }
15939
15939
  return value;
@@ -16236,7 +16236,7 @@ const getProcessedRequests = memoize((state) => {
16236
16236
  status: httpEntry.status,
16237
16237
  timestamp: httpEntry.timestamp,
16238
16238
  duration: httpEntry.duration,
16239
- size: httpEntry.size,
16239
+ size: httpEntry.size ?? null,
16240
16240
  method: httpEntry.request.method,
16241
16241
  httpStatus: (_a = httpEntry.response) == null ? void 0 : _a.status,
16242
16242
  progress: httpEntry.progress
@@ -16250,6 +16250,7 @@ const getProcessedRequests = memoize((state) => {
16250
16250
  status: wsEntry.status,
16251
16251
  timestamp: wsEntry.timestamp,
16252
16252
  duration: wsEntry.duration,
16253
+ size: null,
16253
16254
  method: "WS",
16254
16255
  httpStatus: 0
16255
16256
  });
@@ -16262,6 +16263,7 @@ const getProcessedRequests = memoize((state) => {
16262
16263
  status: sseEntry.status,
16263
16264
  timestamp: sseEntry.timestamp,
16264
16265
  duration: sseEntry.duration,
16266
+ size: null,
16265
16267
  method: "SSE",
16266
16268
  httpStatus: 0
16267
16269
  });
@@ -19289,7 +19291,11 @@ const RequestList = ({ filter: filter2 }) => {
19289
19291
  });
19290
19292
  }, [processedRequests, filter2]);
19291
19293
  const requests = reactExports.useMemo(() => {
19292
- 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
+ );
19293
19299
  }, [filteredRequests, overrides, clientUISettings == null ? void 0 : clientUISettings.showUrlAsName]);
19294
19300
  const table = useReactTable({
19295
19301
  data: requests,