@rozenite/network-activity-plugin 1.0.0-alpha.5 → 1.0.0-alpha.6

package/dist/useNetworkActivityDevTools.js

@@ -1,7 +1,5 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("react");
-const pluginBridge = require("@rozenite/plugin-bridge");
+import { useEffect } from "react";
+import { useRozeniteDevToolsClient } from "@rozenite/plugin-bridge";
 const REQUEST_TTL = 1e3 * 60 * 5;
 const getNetworkRequestsRegistry = () => {
   const registry = /* @__PURE__ */ new Map();
@@ -14,35 +12,17 @@ const getNetworkRequestsRegistry = () => {
       registry.delete(entry.id);
     });
   };
-  const addEntry = (id, request, metadata) => {
+  const addEntry = (id, request) => {
     trimRegistry();
-    const fullMetadata = {
-      id,
-      method: metadata.method || "GET",
-      url: metadata.url || "",
-      headers: metadata.headers || {},
-      startTime: metadata.startTime || Date.now(),
-      status: metadata.status || "pending",
-      ...metadata
-    };
     registry.set(id, {
       id,
       request,
-      metadata: fullMetadata,
       sentAt: Date.now()
     });
   };
   const getEntry = (id) => {
-    return registry.get(id) ?? null;
-  };
-  const updateEntry = (id, updates) => {
-    const entry = registry.get(id);
-    if (entry) {
-      entry.metadata = { ...entry.metadata, ...updates };
-    }
-  };
-  const getAllEntries = () => {
-    return Array.from(registry.values());
+    var _a;
+    return ((_a = registry.get(id)) == null ? void 0 : _a.request) ?? null;
   };
   const clear = () => {
     registry.clear();
@@ -50,8 +30,6 @@ const getNetworkRequestsRegistry = () => {
   return {
     addEntry,
     getEntry,
-    updateEntry,
-    getAllEntries,
     clear
   };
 };
@@ -181,11 +159,15 @@ const XHRInterceptor = {
   }
 };
 const networkRequestsRegistry = getNetworkRequestsRegistry();
-const mimeTypeFromResponseType = (responseType) => {
+const getContentType = (request) => {
+  const responseHeaders = request.responseHeaders;
+  const responseType = request.responseType;
+  if (responseHeaders == null ? void 0 : responseHeaders["content-type"]) {
+    return responseHeaders["content-type"].split(";")[0].trim();
+  }
   switch (responseType) {
     case "arraybuffer":
     case "blob":
-    case "base64":
       return "application/octet-stream";
     case "text":
     case "":
@@ -195,67 +177,31 @@ const mimeTypeFromResponseType = (responseType) => {
     case "document":
       return "text/html";
   }
-  return void 0;
 };
-const parseHeaders = (headersString) => {
-  const headers = {};
-  if (!headersString) return headers;
-  const lines = headersString.split("\r\n");
-  for (const line of lines) {
-    const colonIndex = line.indexOf(":");
-    if (colonIndex > 0) {
-      const key = line.substring(0, colonIndex).trim();
-      const value = line.substring(colonIndex + 1).trim();
-      headers[key] = value;
-    }
+const getResponseSize = (request) => {
+  if (typeof request.response === "object") {
+    return request.response.size;
   }
-  return headers;
+  return request.response.length || 0;
 };
 const getResponseBody = async (request) => {
-  try {
-    if (request.responseType === "arraybuffer") {
-      const arrayBuffer = request.response;
-      return {
-        body: btoa(String.fromCharCode(...new Uint8Array(arrayBuffer))),
-        base64Encoded: true
-      };
-    }
-    if (request.responseType === "blob") {
-      const contentType = request.getResponseHeader("Content-Type") || "";
-      if (contentType.startsWith("text/") || contentType.startsWith("application/json")) {
-        return new Promise((resolve) => {
-          const reader = new FileReader();
-          reader.onload = () => {
-            resolve({
-              body: reader.result,
-              base64Encoded: false
-            });
-          };
-          reader.readAsText(request.response);
-        });
-      }
-    }
-    if (request.responseType === "text") {
-      return {
-        body: request.responseText || request.response || "",
-        base64Encoded: false
-      };
+  const responseType = request.responseType;
+  if (responseType === "text") {
+    return request.responseText;
+  }
+  if (responseType === "blob") {
+    const contentType = request.getResponseHeader("Content-Type") || "";
+    if (contentType.startsWith("text/") || contentType.startsWith("application/json")) {
+      return new Promise((resolve) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+          resolve(reader.result);
+        };
+        reader.readAsText(request.response);
+      });
     }
-    return {
-      body: request.responseText || request.response || "",
-      base64Encoded: false
-    };
-  } catch (error) {
-    return {
-      body: `[Error reading response: ${error}]`,
-      base64Encoded: false
-    };
   }
-};
-const findRequestId = (request) => {
-  const allRequests = networkRequestsRegistry.getAllEntries();
-  const entry = allRequests.find(({ request: req }) => req === request);
-  return (entry == null ? void 0 : entry.id) ?? null;
+  return null;
 };
 const getInitiatorFromStack = () => {
   try {
@@ -277,154 +223,81 @@ const getInitiatorFromStack = () => {
   }
   return { type: "other" };
 };
+const READY_STATE_HEADERS_RECEIVED = 2;
 const getNetworkInspector = (pluginClient) => {
   const generateRequestId = () => {
     return `req_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
   };
-  const generateLoaderId = () => {
-    return `loader_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-  };
-  const enable = () => {
-    XHRInterceptor.disableInterception();
-    XHRInterceptor.setOpenCallback(
-      (method, url, request) => {
-        const requestId = generateRequestId();
-        const loaderId = generateLoaderId();
-        const startTime = Date.now();
-        const initiator = getInitiatorFromStack();
-        networkRequestsRegistry.addEntry(requestId, request, {
-          id: requestId,
-          loaderId,
-          documentURL: typeof document !== "undefined" ? document.URL : void 0,
-          method,
-          url,
-          headers: (request == null ? void 0 : request._headers) || {},
-          startTime,
-          status: "pending",
-          type: "XHR",
-          initiator
-        });
+  const handleRequestSend = (data, request) => {
+    const sendTime = Date.now();
+    const requestId = generateRequestId();
+    const initiator = getInitiatorFromStack();
+    networkRequestsRegistry.addEntry(requestId, request);
+    let ttfb = 0;
+    pluginClient.send("request-sent", {
+      requestId,
+      timestamp: sendTime / 1e3,
+      request: {
+        url: request._url,
+        method: request._method,
+        headers: request._headers,
+        postData: data
+      },
+      type: "XHR",
+      initiator
+    });
+    request.addEventListener("readystatechange", () => {
+      if (request.readyState === READY_STATE_HEADERS_RECEIVED) {
+        ttfb = Date.now() - sendTime;
       }
-    );
-    XHRInterceptor.setSendCallback((data, request) => {
-      const requestId = findRequestId(request);
-      if (!requestId) return;
-      const entry = networkRequestsRegistry.getEntry(requestId);
-      if (!entry) return;
-      const metadata = entry.metadata;
-      networkRequestsRegistry.updateEntry(requestId, {
-        postData: data,
-        hasPostData: !!data,
-        headers: (request == null ? void 0 : request._headers) || {}
+    });
+    request.addEventListener("load", () => {
+      pluginClient.send("response-received", {
+        requestId,
+        timestamp: Date.now() / 1e3,
+        type: "XHR",
+        response: {
+          url: request._url,
+          status: request.status,
+          statusText: request.statusText,
+          headers: request.responseHeaders,
+          contentType: getContentType(request),
+          size: getResponseSize(request),
+          responseTime: Date.now() / 1e3
+        }
       });
-      pluginClient.send("Network.requestWillBeSent", {
+    });
+    request.addEventListener("loadend", () => {
+      pluginClient.send("request-completed", {
         requestId,
-        loaderId: metadata.loaderId || "",
-        documentURL: metadata.documentURL || "",
-        request: {
-          url: metadata.url,
-          method: metadata.method,
-          headers: metadata.headers,
-          postData: data,
-          hasPostData: !!data
-        },
-        timestamp: metadata.startTime,
-        wallTime: metadata.startTime,
-        initiator: metadata.initiator || { type: "other" },
-        type: metadata.type
+        timestamp: Date.now() / 1e3,
+        duration: Date.now() - sendTime,
+        size: getResponseSize(request),
+        ttfb
       });
     });
-    XHRInterceptor.setHeaderReceivedCallback(
-      (responseContentType, responseSize, allHeaders, request) => {
-        const requestId = findRequestId(request);
-        if (!requestId) return;
-        const entry = networkRequestsRegistry.getEntry(requestId);
-        if (!entry) return;
-        const metadata = entry.metadata;
-        const headers = parseHeaders(allHeaders);
-        const mimeType = responseContentType || mimeTypeFromResponseType(request.responseType) || "text/plain";
-        networkRequestsRegistry.updateEntry(requestId, {
-          status: "loading",
-          response: {
-            url: metadata.url,
-            status: request.status,
-            statusText: request.statusText,
-            headers,
-            mimeType,
-            encodedDataLength: responseSize || 0,
-            responseTime: Date.now()
-          }
-        });
-        pluginClient.send("Network.responseReceived", {
-          requestId,
-          loaderId: metadata.loaderId || "",
-          timestamp: Date.now(),
-          type: metadata.type || "Other",
-          response: {
-            url: metadata.url,
-            status: request.status,
-            statusText: request.statusText,
-            headers,
-            mimeType,
-            encodedDataLength: responseSize || 0,
-            responseTime: Date.now()
-          }
-        });
-      }
-    );
-    XHRInterceptor.setResponseCallback(
-      (status, timeout, response, responseURL, responseType, request) => {
-        const requestId = findRequestId(request);
-        if (!requestId) return;
-        const entry = networkRequestsRegistry.getEntry(requestId);
-        if (!entry) return;
-        const metadata = entry.metadata;
-        if (!metadata) return;
-        const endTime = Date.now();
-        const duration = endTime - metadata.startTime;
-        const dataLength = response ? response.length : 0;
-        networkRequestsRegistry.updateEntry(requestId, {
-          endTime,
-          duration,
-          dataLength,
-          encodedDataLength: dataLength
-        });
-        if (status >= 400 || request.readyState === 0) {
-          const errorText = request.statusText || "Request failed";
-          const canceled = request.readyState === 0;
-          networkRequestsRegistry.updateEntry(requestId, {
-            status: "failed",
-            errorText,
-            canceled
-          });
-          pluginClient.send("Network.loadingFailed", {
-            requestId,
-            timestamp: endTime,
-            type: metadata.type || "Other",
-            errorText,
-            canceled
-          });
-        } else {
-          networkRequestsRegistry.updateEntry(requestId, {
-            status: "finished",
-            encodedDataLength: dataLength
-          });
-          if (dataLength > 0) {
-            pluginClient.send("Network.dataReceived", {
-              requestId,
-              timestamp: endTime,
-              dataLength,
-              encodedDataLength: dataLength
-            });
-          }
-          pluginClient.send("Network.loadingFinished", {
-            requestId,
-            timestamp: endTime,
-            encodedDataLength: dataLength
-          });
-        }
-      }
-    );
+    request.addEventListener("error", () => {
+      pluginClient.send("request-failed", {
+        requestId,
+        timestamp: Date.now() / 1e3,
+        type: "XHR",
+        error: "Failed",
+        canceled: false
+      });
+    });
+    request.addEventListener("abort", () => {
+      pluginClient.send("request-failed", {
+        requestId,
+        timestamp: Date.now() / 1e3,
+        type: "XHR",
+        error: "Aborted",
+        canceled: true
+      });
+    });
+  };
+  const enable = () => {
+    XHRInterceptor.disableInterception();
+    XHRInterceptor.setSendCallback(handleRequestSend);
     XHRInterceptor.enableInterception();
   };
   const disable = () => {
@@ -441,19 +314,16 @@ const getNetworkInspector = (pluginClient) => {
     disable();
   });
   const handleBodySubscription = pluginClient.onMessage(
-    "Network.getResponseBody",
-    async (payload) => {
-      const requestId = payload.requestId;
-      const entry = networkRequestsRegistry.getEntry(requestId);
-      if (!entry) {
+    "get-response-body",
+    async ({ requestId }) => {
+      const request = networkRequestsRegistry.getEntry(requestId);
+      if (!request) {
         return;
       }
-      const { request } = entry;
-      const { body, base64Encoded } = await getResponseBody(request);
-      pluginClient.send("Network.responseBodyReceived", {
+      const body = await getResponseBody(request);
+      pluginClient.send("response-body", {
         requestId,
-        body,
-        base64Encoded
+        body
       });
     }
   );
@@ -471,10 +341,10 @@ const getNetworkInspector = (pluginClient) => {
   };
 };
 const useNetworkActivityDevTools = () => {
-  const client = pluginBridge.useRozeniteDevToolsClient({
+  const client = useRozeniteDevToolsClient({
     pluginId: "@rozenite/network-activity-plugin"
   });
-  react.useEffect(() => {
+  useEffect(() => {
     if (!client) {
       return;
     }
@@ -485,4 +355,6 @@ const useNetworkActivityDevTools = () => {
   }, [client]);
   return client;
 };
-exports.useNetworkActivityDevTools = useNetworkActivityDevTools;
+export {
+  useNetworkActivityDevTools
+};

package/package.json

@@ -1,30 +1,37 @@
 {
   "name": "@rozenite/network-activity-plugin",
-  "version": "1.0.0-alpha.5",
+  "version": "1.0.0-alpha.6",
   "description": "Network Activity for Rozenite.",
   "type": "module",
   "main": "./dist/react-native.cjs",
   "module": "./dist/react-native.js",
   "types": "./dist/react-native.d.ts",
   "dependencies": {
-    "@tanstack/react-virtual": "^3.0.0",
-    "@floating-ui/react": "^0.26.0",
-    "@rozenite/plugin-bridge": "1.0.0-alpha.5"
+    "@rozenite/plugin-bridge": "1.0.0-alpha.6"
   },
   "devDependencies": {
-    "vite": "^6.0.0",
-    "typescript": "^5.7.3",
-    "react-native-web": "0.21.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.0",
-    "react-native": "0.76.0",
-    "@types/react": "~18.3.12",
-    "@rozenite/vite-plugin": "1.0.0-alpha.5",
-    "rozenite": "1.0.0-alpha.5"
-  },
-  "peerDependencies": {
+    "@radix-ui/react-scroll-area": "^1.2.9",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tabs": "^1.1.12",
+    "@tanstack/react-table": "^8.21.3",
+    "autoprefixer": "^10.4.21",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "postcss": "^8.5.6",
     "react": "*",
-    "react-native": "*"
+    "react-json-tree": "^0.20.0",
+    "react-native": "*",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss": "^3.4.17",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.7.3",
+    "vite": "^6.0.0",
+    "@floating-ui/react": "^0.26.0",
+    "@tanstack/react-virtual": "^3.0.0",
+    "lucide-react": "^0.263.1",
+    "@rozenite/vite-plugin": "1.0.0-alpha.6",
+    "rozenite": "1.0.0-alpha.6"
   },
   "license": "MIT",
   "scripts": {

package/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/rozenite.config.ts

@@ -2,7 +2,7 @@ export default {
   panels: [
     {
       name: 'Network Activity',
-      source: './src/ui/panel.tsx',
+      source: './src/ui/App.tsx',
     },
   ],
 };