npm - @rozenite/network-activity-plugin - Versions diffs - 1.0.0 → 1.1.0 - Mend

@rozenite/network-activity-plugin 1.0.0 → 1.1.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 (15) hide show

package/dist/App.html +1 -1
package/dist/assets/{App-C6wCDVkW.js → App-Kyi7zHUX.js} +40 -3
package/dist/rozenite.json +1 -1
package/dist/src/shared/client.d.ts +7 -0
package/dist/src/ui/state/model.d.ts +10 -0
package/dist/useNetworkActivityDevTools.cjs +18 -0
package/dist/useNetworkActivityDevTools.js +18 -0
package/package.json +4 -4
package/src/react-native/http/network-inspector.ts +20 -0
package/src/shared/client.ts +8 -0
package/src/ui/components/RequestList.tsx +9 -1
package/src/ui/components/Toolbar.tsx +3 -2
package/src/ui/state/derived.ts +2 -0
package/src/ui/state/model.ts +10 -0
package/src/ui/state/store.ts +30 -0

package/dist/App.html CHANGED Viewed

@@ -22,7 +22,7 @@
     <script>
       var __ROZENITE_PANEL__ = true;
     </script>
-    <script type="module" crossorigin src="./assets/App-C6wCDVkW.js"></script>
+    <script type="module" crossorigin src="./assets/App-Kyi7zHUX.js"></script>
     <link rel="stylesheet" crossorigin href="./assets/App-BrSkOkws.css">
   </head>
   <body>

package/dist/assets/{App-C6wCDVkW.js → App-Kyi7zHUX.js} RENAMED Viewed

@@ -15481,6 +15481,29 @@ const createNetworkActivityStore = () => createStore()(
             });
             break;
           }
+          case "request-progress": {
+            const eventData = data;
+            set((state) => {
+              const entry = state.networkEntries.get(eventData.requestId);
+              if (!entry || entry.type !== "http") {
+                return state;
+              }
+              const httpEntry = entry;
+              const updatedEntry = {
+                ...httpEntry,
+                status: "loading",
+                progress: {
+                  loaded: eventData.loaded,
+                  total: eventData.total,
+                  lengthComputable: eventData.lengthComputable
+                }
+              };
+              const newEntries = new Map(state.networkEntries);
+              newEntries.set(eventData.requestId, updatedEntry);
+              return { networkEntries: newEntries };
+            });
+            break;
+          }
           case "response-received": {
             const eventData = data;
             set((state) => {
@@ -15808,6 +15831,10 @@ const createNetworkActivityStore = () => createStore()(
               "request-sent",
               (data) => handleEvent("request-sent", data)
             ),
+            client2.onMessage(
+              "request-progress",
+              (data) => handleEvent("request-progress", data)
+            ),
             client2.onMessage(
               "response-received",
               (data) => handleEvent("response-received", data)
@@ -16211,7 +16238,8 @@ const getProcessedRequests = memoize((state) => {
         duration: httpEntry.duration,
         size: httpEntry.size,
         method: httpEntry.request.method,
-        httpStatus: (_a = httpEntry.response) == null ? void 0 : _a.status
+        httpStatus: (_a = httpEntry.response) == null ? void 0 : _a.status,
+        progress: httpEntry.progress
       });
     } else if (entry.type === "websocket") {
       const wsEntry = entry;
@@ -16298,7 +16326,8 @@ const Toolbar = () => {
         size: "sm",
         onClick: onToggleRecording,
         className: `h-8 w-8 p-0 ${isRecording ? "text-red-400 hover:text-red-300" : "text-gray-400 hover:text-blue-400"}`,
-        children: isRecording ? /* @__PURE__ */ jsxRuntimeExports.jsx(Circle, { className: "h-4 w-4 fill-current" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Square, { className: "h-4 w-4" })
+        title: isRecording ? "Stop recording" : "Start recording",
+        children: isRecording ? /* @__PURE__ */ jsxRuntimeExports.jsx(Square, { className: "h-4 w-4 fill-current" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Circle, { className: "h-4 w-4 fill-current" })
       }
     ),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -19160,13 +19189,21 @@ const sortTime = (rowA, rowB, columnId) => {
 };
 const processNetworkRequests = (processedRequests, overrides, showEntirePathAsName = false) => {
   return processedRequests.map((request) => {
+    var _a;
     const { domain, path } = extractDomainAndPath(request.name);
     const duration = request.duration || 0;
     const hasOverride = overrides.has(request.name);
+    let statusDisplay = request.httpStatus || request.status;
+    if (request.status === "loading" && ((_a = request.progress) == null ? void 0 : _a.lengthComputable)) {
+      const percentage = Math.round(
+        request.progress.loaded / request.progress.total * 100
+      );
+      statusDisplay = `${percentage}%`;
+    }
     return {
       id: request.id,
       name: generateName(request.name, showEntirePathAsName),
-      status: request.httpStatus || request.status,
+      status: statusDisplay,
       method: request.method,
       domain,
       path,

package/dist/rozenite.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"name":"@rozenite/network-activity-plugin","version":"1.0.0~~-alpha.16~~","description":"Network Activity for Rozenite.","panels":[{"name":"Network Activity","source":"/App.html"}]}
1	+ {"name":"@rozenite/network-activity-plugin","version":"1.0.0","description":"Network Activity for Rozenite.","panels":[{"name":"Network Activity","source":"/App.html"}]}

package/dist/src/shared/client.d.ts CHANGED Viewed

@@ -98,6 +98,13 @@ export type NetworkActivityEventMap = {
         error: string;
         canceled: boolean;
     };
+    'request-progress': {
+        requestId: RequestId;
+        timestamp: Timestamp;
+        loaded: number;
+        total: number;
+        lengthComputable: boolean;
+    };
     'get-response-body': {
         requestId: RequestId;
     };

package/dist/src/ui/state/model.d.ts CHANGED Viewed

@@ -43,6 +43,11 @@ export type HttpNetworkEntry = {
     size?: number;
     initiator?: Initiator;
     resourceType?: ResourceType;
+    progress?: {
+        loaded: number;
+        total: number;
+        lengthComputable: boolean;
+    };
 };
 export type SSEMessage = {
     id: string;
@@ -100,4 +105,9 @@ export type ProcessedRequest = {
     size: number | null;
     method: HttpMethod | 'WS' | 'SSE';
     httpStatus?: number;
+    progress?: {
+        loaded: number;
+        total: number;
+        lengthComputable: boolean;
+    };
 };

package/dist/useNetworkActivityDevTools.cjs CHANGED Viewed

@@ -430,6 +430,15 @@ const getNetworkInspector = (pluginClient) => {
       type: "XHR",
       initiator
     });
+    request.addEventListener("progress", (event) => {
+      pluginClient.send("request-progress", {
+        requestId,
+        timestamp: Date.now(),
+        loaded: event.loaded,
+        total: event.total,
+        lengthComputable: event.lengthComputable
+      });
+    });
     request.addEventListener("readystatechange", () => {
       if (request.readyState === READY_STATE_HEADERS_RECEIVED) {
         ttfb = Date.now() - sendTime;
@@ -480,6 +489,15 @@ const getNetworkInspector = (pluginClient) => {
         canceled: true
       });
     });
+    request.addEventListener("timeout", () => {
+      pluginClient.send("request-failed", {
+        requestId,
+        timestamp: Date.now(),
+        type: "XHR",
+        error: "Timeout",
+        canceled: false
+      });
+    });
   };
   const handleRequestOverride = (request) => {
     const override = overridesRegistry$1.getOverrideForUrl(

package/dist/useNetworkActivityDevTools.js CHANGED Viewed

@@ -426,6 +426,15 @@ const getNetworkInspector = (pluginClient) => {
       type: "XHR",
       initiator
     });
+    request.addEventListener("progress", (event) => {
+      pluginClient.send("request-progress", {
+        requestId,
+        timestamp: Date.now(),
+        loaded: event.loaded,
+        total: event.total,
+        lengthComputable: event.lengthComputable
+      });
+    });
     request.addEventListener("readystatechange", () => {
       if (request.readyState === READY_STATE_HEADERS_RECEIVED) {
         ttfb = Date.now() - sendTime;
@@ -476,6 +485,15 @@ const getNetworkInspector = (pluginClient) => {
         canceled: true
       });
     });
+    request.addEventListener("timeout", () => {
+      pluginClient.send("request-failed", {
+        requestId,
+        timestamp: Date.now(),
+        type: "XHR",
+        error: "Timeout",
+        canceled: false
+      });
+    });
   };
   const handleRequestOverride = (request) => {
     const override = overridesRegistry$1.getOverrideForUrl(

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@rozenite/network-activity-plugin",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Network Activity for Rozenite.",
   "type": "module",
   "main": "./dist/react-native.cjs",
@@ -8,7 +8,7 @@
   "types": "./dist/react-native.d.ts",
   "dependencies": {
     "nanoevents": "^9.1.0",
-    "@rozenite/plugin-bridge": "1.0.0"
+    "@rozenite/plugin-bridge": "1.1.0"
   },
   "devDependencies": {
     "@floating-ui/react": "^0.26.0",
@@ -36,8 +36,8 @@
     "zustand": "^5.0.6",
     "@types/react": "~18.3.23",
     "@types/react-dom": "~18.3.1",
-    "@rozenite/vite-plugin": "1.0.0",
-    "rozenite": "1.0.0"
+    "@rozenite/vite-plugin": "1.1.0",
+    "rozenite": "1.1.0"
   },
   "peerDependencies": {
     "react-native-sse": "*"

package/src/react-native/http/network-inspector.ts CHANGED Viewed

@@ -227,6 +227,16 @@ export const getNetworkInspector = (
       initiator,
     });
+    request.addEventListener('progress', (event) => {
+      pluginClient.send('request-progress', {
+        requestId: requestId,
+        timestamp: Date.now(),
+        loaded: event.loaded,
+        total: event.total,
+        lengthComputable: event.lengthComputable,
+      });
+    });
     request.addEventListener('readystatechange', () => {
       if (request.readyState === READY_STATE_HEADERS_RECEIVED) {
         ttfb = Date.now() - sendTime;
@@ -281,6 +291,16 @@ export const getNetworkInspector = (
         canceled: true,
       });
     });
+    request.addEventListener('timeout', () => {
+      pluginClient.send('request-failed', {
+        requestId: requestId,
+        timestamp: Date.now(),
+        type: 'XHR',
+        error: 'Timeout',
+        canceled: false,
+      });
+    });
   };
   const handleRequestOverride = (request: XMLHttpRequest): void => {

package/src/shared/client.ts CHANGED Viewed

@@ -136,6 +136,14 @@ export type NetworkActivityEventMap = {
     canceled: boolean;
   };
+  'request-progress': {
+    requestId: RequestId;
+    timestamp: Timestamp;
+    loaded: number;
+    total: number;
+    lengthComputable: boolean;
+  };
   'get-response-body': {
     requestId: RequestId;
   };

package/src/ui/components/RequestList.tsx CHANGED Viewed

@@ -135,10 +135,18 @@ const processNetworkRequests = (
     const duration = request.duration || 0;
     const hasOverride = overrides.has(request.name);
+    let statusDisplay: string | number = request.httpStatus || request.status;
+    if (request.status === 'loading' && request.progress?.lengthComputable) {
+      const percentage = Math.round(
+        (request.progress.loaded / request.progress.total) * 100,
+      );
+      statusDisplay = `${percentage}%`;
+    }
     return {
       id: request.id,
       name: generateName(request.name, showEntirePathAsName),
-      status: request.httpStatus || request.status,
+      status: statusDisplay,
       method: request.method,
       domain,
       path,

package/src/ui/components/Toolbar.tsx CHANGED Viewed

@@ -25,11 +25,12 @@ export const Toolbar = () => {
             ? 'text-red-400 hover:text-red-300'
             : 'text-gray-400 hover:text-blue-400'
         }`}
+        title={isRecording ? 'Stop recording' : 'Start recording'}
       >
         {isRecording ? (
-          <Circle className="h-4 w-4 fill-current" />
+          <Square className="h-4 w-4 fill-current" />
         ) : (
-          <Square className="h-4 w-4" />
+          <Circle className="h-4 w-4 fill-current" />
         )}
       </Button>
       <Button

package/src/ui/state/derived.ts CHANGED Viewed

@@ -24,6 +24,7 @@ export const getProcessedRequests = memoize((state: NetworkActivityState) => {
         size: httpEntry.size,
         method: httpEntry.request.method,
         httpStatus: httpEntry.response?.status,
+        progress: httpEntry.progress,
       });
     } else if (entry.type === 'websocket') {
       const wsEntry = entry as WebSocketNetworkEntry;
@@ -81,6 +82,7 @@ export const getRequestSummary = (
         size: httpEntry.size,
         method: httpEntry.request.method,
         httpStatus: httpEntry.response?.status || 0,
+        progress: httpEntry.progress,
       };
     } else if (entry.type === 'websocket') {
       const wsEntry = entry as WebSocketNetworkEntry;

package/src/ui/state/model.ts CHANGED Viewed

@@ -58,6 +58,11 @@ export type HttpNetworkEntry = {
   size?: number;
   initiator?: Initiator;
   resourceType?: ResourceType;
+  progress?: {
+    loaded: number;
+    total: number;
+    lengthComputable: boolean;
+  };
 };
 /* SSE */
@@ -137,4 +142,9 @@ export type ProcessedRequest = {
   size: number | null;
   method: HttpMethod | 'WS' | 'SSE';
   httpStatus?: number;
+  progress?: {
+    loaded: number;
+    total: number;
+    lengthComputable: boolean;
+  };
 };

package/src/ui/state/store.ts CHANGED Viewed

@@ -168,6 +168,33 @@ export const createNetworkActivityStore = () =>
               break;
             }
+            case 'request-progress': {
+              const eventData =
+                data as NetworkActivityEventMap['request-progress'];
+              set((state) => {
+                const entry = state.networkEntries.get(eventData.requestId);
+                if (!entry || entry.type !== 'http') {
+                  return state;
+                }
+                const httpEntry = entry as HttpNetworkEntry;
+                const updatedEntry: HttpNetworkEntry = {
+                  ...httpEntry,
+                  status: 'loading',
+                  progress: {
+                    loaded: eventData.loaded,
+                    total: eventData.total,
+                    lengthComputable: eventData.lengthComputable,
+                  },
+                };
+                const newEntries = new Map(state.networkEntries);
+                newEntries.set(eventData.requestId, updatedEntry);
+                return { networkEntries: newEntries };
+              });
+              break;
+            }
             case 'response-received': {
               const eventData =
                 data as NetworkActivityEventMap['response-received'];
@@ -559,6 +586,9 @@ export const createNetworkActivityStore = () =>
               client.onMessage('request-sent', (data) =>
                 handleEvent('request-sent', data)
               ),
+              client.onMessage('request-progress', (data) =>
+                handleEvent('request-progress', data)
+              ),
               client.onMessage('response-received', (data) =>
                 handleEvent('response-received', data)
               ),