@rozenite/network-activity-plugin 1.0.0-alpha.1 → 1.0.0-alpha.3

package/dist/react-native.js

@@ -1,174 +1,9 @@
-import { useEffect as v } from "react";
-import { useRozeniteDevToolsClient as S } from "@rozenite/plugin-bridge";
-let E = 0;
-function g() {
-  return (++E).toString();
+let useNetworkActivityDevTools;
+if (process.env.NODE_ENV !== "production") {
+  useNetworkActivityDevTools = require("./useNetworkActivityDevTools.js").useNetworkActivityDevTools;
+} else {
+  useNetworkActivityDevTools = () => null;
 }
-function h(t) {
-  if (t instanceof Headers) {
-    const e = {};
-    return t.forEach((r, o) => {
-      e[o] = r;
-    }), e;
-  } else if (Array.isArray(t)) {
-    const e = {};
-    return t.forEach(([r, o]) => {
-      e[r] = o;
-    }), e;
-  }
-  return t;
-}
-function I(t, e) {
-  let r, o, n, s;
-  return typeof t == "string" ? (r = t, o = (e == null ? void 0 : e.method) || "GET", n = h((e == null ? void 0 : e.headers) || {}), s = (e == null ? void 0 : e.body) || void 0) : t instanceof Request ? (r = t.url, o = t.method, n = h(t.headers), s = t.body || void 0) : (r = t.toString(), o = (e == null ? void 0 : e.method) || "GET", n = h((e == null ? void 0 : e.headers) || {}), s = (e == null ? void 0 : e.body) || void 0), { url: r, method: o, headers: n, body: s };
-}
-const T = () => {
-  const t = S({
-    pluginId: "@rozenite/network-activity-plugin"
-  });
-  return v(() => {
-    if (!t)
-      return;
-    const e = window.fetch.bind(window), r = (o, n) => {
-      t.send(o, n);
-    };
-    return window.fetch = async function(o, n) {
-      const s = g(), d = I(o, n), c = Date.now() / 1e3, w = c;
-      r("Network.requestWillBeSent", {
-        requestId: s,
-        loaderId: s,
-        documentURL: "",
-        request: {
-          url: d.url,
-          method: d.method,
-          headers: d.headers,
-          postData: d.body,
-          hasPostData: !!d.body
-        },
-        timestamp: c,
-        wallTime: w,
-        initiator: {
-          type: "script",
-          stack: {
-            callFrames: [
-              {
-                functionName: "fetch",
-                scriptId: "1",
-                url: "",
-                lineNumber: 1,
-                columnNumber: 1
-              }
-            ]
-          }
-        },
-        redirectHasExtraInfo: !1,
-        redirectResponse: null,
-        referrerPolicy: "no-referrer",
-        type: "Fetch",
-        frameId: "1",
-        hasUserGesture: !1
-      }), r("Network.requestWillBeSentExtraInfo", {
-        requestId: s,
-        blockedCookies: [],
-        headers: d.headers,
-        connectTiming: {
-          requestTime: c
-        },
-        clientSecurityState: {
-          initiatorIsSecureContext: !1,
-          initiatorIPAddressSpace: "Public",
-          privateNetworkRequestPolicy: "Allow"
-        },
-        siteHasCookieInOtherPartition: !1
-      });
-      let a;
-      try {
-        a = await e(o, n);
-        const l = {};
-        a.headers.forEach((m, y) => {
-          l[y] = m;
-        });
-        const k = a.headers.get("content-type") || "", i = a.headers.get("content-length"), u = i ? parseInt(i, 10) : 0;
-        let f = u;
-        try {
-          f = (await a.clone().arrayBuffer()).byteLength;
-        } catch {
-          f = u;
-        }
-        return r("Network.responseReceived", {
-          requestId: s,
-          loaderId: s,
-          timestamp: Date.now() / 1e3,
-          type: "Fetch",
-          response: {
-            url: d.url,
-            status: a.status,
-            statusText: a.statusText,
-            headers: l,
-            mimeType: k,
-            requestHeaders: d.headers,
-            requestHeadersText: void 0,
-            connectionReused: !1,
-            connectionId: 0,
-            remoteIPAddress: void 0,
-            remotePort: void 0,
-            protocol: void 0,
-            securityState: "unknown",
-            encodedDataLength: u,
-            timing: {
-              requestTime: c,
-              proxyStart: -1,
-              proxyEnd: -1,
-              dnsStart: -1,
-              dnsEnd: -1,
-              connectStart: -1,
-              connectEnd: -1,
-              sslStart: -1,
-              sslEnd: -1,
-              workerStart: -1,
-              workerReadyStart: -1,
-              workerReadyEnd: -1,
-              sendStart: c,
-              sendEnd: c,
-              pushStart: -1,
-              pushEnd: -1,
-              receiveHeadersEnd: Date.now() / 1e3
-            },
-            responseTime: Date.now() / 1e3,
-            fromDiskCache: !1,
-            fromServiceWorker: !1,
-            fromPrefetchCache: !1,
-            encodedBodySize: u,
-            decodedBodySize: f,
-            headersText: void 0,
-            serviceWorkerResponseSource: void 0,
-            responseSource: "network",
-            statusCode: a.status
-          },
-          hasExtraInfo: !1
-        }), r("Network.loadingFinished", {
-          requestId: s,
-          timestamp: Date.now() / 1e3,
-          encodedDataLength: u,
-          shouldReportCorbBlocking: !1
-        }), a;
-      } catch (l) {
-        throw r("Network.loadingFailed", {
-          requestId: s,
-          timestamp: Date.now() / 1e3,
-          type: "Fetch",
-          errorText: l instanceof Error ? l.message : "Unknown error",
-          canceled: !1,
-          blockedReason: void 0
-        }), l;
-      }
-    }, () => {
-      window.fetch = e;
-    };
-  }, [t]), t;
-};
-let p;
-process.env.NODE_ENV !== "production" ? p = T : p = () => null;
 export {
-  p as useNetworkActivityDevTools
+  useNetworkActivityDevTools
 };

package/dist/rozenite.json

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

package/dist/useNetworkActivityDevTools.js

@@ -0,0 +1,488 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const pluginBridge = require("@rozenite/plugin-bridge");
+const REQUEST_TTL = 1e3 * 60 * 5;
+const getNetworkRequestsRegistry = () => {
+  const registry = /* @__PURE__ */ new Map();
+  const trimRegistry = () => {
+    const now = Date.now();
+    registry.forEach((entry) => {
+      if (now - entry.sentAt < REQUEST_TTL) {
+        return;
+      }
+      registry.delete(entry.id);
+    });
+  };
+  const addEntry = (id, request, metadata) => {
+    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());
+  };
+  const clear = () => {
+    registry.clear();
+  };
+  return {
+    addEntry,
+    getEntry,
+    updateEntry,
+    getAllEntries,
+    clear
+  };
+};
+const originalXHROpen = XMLHttpRequest.prototype.open;
+const originalXHRSend = XMLHttpRequest.prototype.send;
+const originalXHRSetRequestHeader = XMLHttpRequest.prototype.setRequestHeader;
+let openCallback;
+let sendCallback;
+let requestHeaderCallback;
+let headerReceivedCallback;
+let responseCallback;
+let isInterceptorEnabled = false;
+const XHRInterceptor = {
+  /**
+   * Invoked before XMLHttpRequest.open(...) is called.
+   */
+  setOpenCallback(callback) {
+    openCallback = callback;
+  },
+  /**
+   * Invoked before XMLHttpRequest.send(...) is called.
+   */
+  setSendCallback(callback) {
+    sendCallback = callback;
+  },
+  /**
+   * Invoked after xhr's readyState becomes xhr.HEADERS_RECEIVED.
+   */
+  setHeaderReceivedCallback(callback) {
+    headerReceivedCallback = callback;
+  },
+  /**
+   * Invoked after xhr's readyState becomes xhr.DONE.
+   */
+  setResponseCallback(callback) {
+    responseCallback = callback;
+  },
+  /**
+   * Invoked before XMLHttpRequest.setRequestHeader(...) is called.
+   */
+  setRequestHeaderCallback(callback) {
+    requestHeaderCallback = callback;
+  },
+  isInterceptorEnabled() {
+    return isInterceptorEnabled;
+  },
+  enableInterception() {
+    if (isInterceptorEnabled) {
+      return;
+    }
+    XMLHttpRequest.prototype.open = function(method, url) {
+      if (openCallback) {
+        openCallback(method, url, this);
+      }
+      originalXHROpen.apply(this, arguments);
+    };
+    XMLHttpRequest.prototype.setRequestHeader = function(header, value) {
+      if (requestHeaderCallback) {
+        requestHeaderCallback(header, value, this);
+      }
+      originalXHRSetRequestHeader.apply(this, arguments);
+    };
+    XMLHttpRequest.prototype.send = function(data) {
+      if (sendCallback) {
+        sendCallback(data, this);
+      }
+      if (this.addEventListener) {
+        this.addEventListener(
+          "readystatechange",
+          () => {
+            if (!isInterceptorEnabled) {
+              return;
+            }
+            if (this.readyState === this.HEADERS_RECEIVED) {
+              const contentTypeString = this.getResponseHeader("Content-Type");
+              const contentLengthString = this.getResponseHeader("Content-Length");
+              let responseContentType, responseSize;
+              if (contentTypeString) {
+                responseContentType = contentTypeString.split(";")[0];
+              }
+              if (contentLengthString) {
+                responseSize = parseInt(contentLengthString, 10);
+              }
+              if (headerReceivedCallback) {
+                headerReceivedCallback(
+                  responseContentType,
+                  responseSize,
+                  this.getAllResponseHeaders(),
+                  this
+                );
+              }
+            }
+            if (this.readyState === this.DONE) {
+              if (responseCallback) {
+                responseCallback(
+                  this.status,
+                  this.timeout,
+                  this.response,
+                  this.responseURL,
+                  this.responseType,
+                  this
+                );
+              }
+            }
+          },
+          false
+        );
+      }
+      originalXHRSend.apply(this, arguments);
+    };
+    isInterceptorEnabled = true;
+  },
+  // Unpatch XMLHttpRequest methods and remove the callbacks.
+  disableInterception() {
+    if (!isInterceptorEnabled) {
+      return;
+    }
+    isInterceptorEnabled = false;
+    XMLHttpRequest.prototype.send = originalXHRSend;
+    XMLHttpRequest.prototype.open = originalXHROpen;
+    XMLHttpRequest.prototype.setRequestHeader = originalXHRSetRequestHeader;
+    responseCallback = null;
+    openCallback = null;
+    sendCallback = null;
+    headerReceivedCallback = null;
+    requestHeaderCallback = null;
+  }
+};
+const networkRequestsRegistry = getNetworkRequestsRegistry();
+const mimeTypeFromResponseType = (responseType) => {
+  switch (responseType) {
+    case "arraybuffer":
+    case "blob":
+    case "base64":
+      return "application/octet-stream";
+    case "text":
+    case "":
+      return "text/plain";
+    case "json":
+      return "application/json";
+    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;
+    }
+  }
+  return headers;
+};
+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
+      };
+    }
+    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;
+};
+const getInitiatorFromStack = () => {
+  try {
+    const stack = new Error().stack;
+    if (!stack) {
+      return { type: "other" };
+    }
+    const line = stack.split("\n")[9];
+    const match = line.match(/at\s+(.+?)\s+\((.+?):(\d+):(\d+)\)/);
+    if (match) {
+      return {
+        type: "script",
+        url: match[2],
+        lineNumber: parseInt(match[3]),
+        columnNumber: parseInt(match[4])
+      };
+    }
+  } catch {
+  }
+  return { type: "other" };
+};
+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
+        });
+      }
+    );
+    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) || {}
+      });
+      pluginClient.send("Network.requestWillBeSent", {
+        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
+      });
+    });
+    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
+          });
+        }
+      }
+    );
+    XHRInterceptor.enableInterception();
+  };
+  const disable = () => {
+    XHRInterceptor.disableInterception();
+    networkRequestsRegistry.clear();
+  };
+  const isEnabled = () => {
+    return XHRInterceptor.isInterceptorEnabled();
+  };
+  const enableSubscription = pluginClient.onMessage("network-enable", () => {
+    enable();
+  });
+  const disableSubscription = pluginClient.onMessage("network-disable", () => {
+    disable();
+  });
+  const handleBodySubscription = pluginClient.onMessage(
+    "Network.getResponseBody",
+    async (payload) => {
+      const requestId = payload.requestId;
+      const entry = networkRequestsRegistry.getEntry(requestId);
+      if (!entry) {
+        return;
+      }
+      const { request } = entry;
+      const { body, base64Encoded } = await getResponseBody(request);
+      pluginClient.send("Network.responseBodyReceived", {
+        requestId,
+        body,
+        base64Encoded
+      });
+    }
+  );
+  const dispose = () => {
+    disable();
+    enableSubscription.remove();
+    disableSubscription.remove();
+    handleBodySubscription.remove();
+  };
+  return {
+    enable,
+    disable,
+    isEnabled,
+    dispose
+  };
+};
+const useNetworkActivityDevTools = () => {
+  const client = pluginBridge.useRozeniteDevToolsClient({
+    pluginId: "@rozenite/network-activity-plugin"
+  });
+  react.useEffect(() => {
+    if (!client) {
+      return;
+    }
+    const networkInspector = getNetworkInspector(client);
+    return () => {
+      networkInspector.dispose();
+    };
+  }, [client]);
+  return client;
+};
+exports.useNetworkActivityDevTools = useNetworkActivityDevTools;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rozenite/network-activity-plugin",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.3",
   "description": "Network Activity for Rozenite.",
   "type": "module",
   "main": "./dist/react-native.cjs",
@@ -9,15 +9,15 @@
   "dependencies": {
     "@tanstack/react-virtual": "^3.0.0",
     "@floating-ui/react": "^0.26.0",
-    "@rozenite/plugin-bridge": "1.0.0-alpha.0"
+    "@rozenite/plugin-bridge": "1.0.0-alpha.3"
   },
   "devDependencies": {
     "typescript": "^5.7.3",
     "vite": "^6.0.0",
     "react": "*",
     "react-native": "*",
-    "rozenite": "1.0.0-alpha.2",
-    "@rozenite/vite-plugin": "1.0.0-alpha.1"
+    "@rozenite/vite-plugin": "1.0.0-alpha.3",
+    "rozenite": "1.0.0-alpha.3"
   },
   "peerDependencies": {
     "react": ">= 17.0.0",

package/react-native.ts

@@ -1,7 +1,8 @@
 export let useNetworkActivityDevTools: typeof import('./src/react-native/useNetworkActivityDevTools').useNetworkActivityDevTools;
 
 if (process.env.NODE_ENV !== 'production') {
-  useNetworkActivityDevTools = require('./src/react-native/useNetworkActivityDevTools').useNetworkActivityDevTools;
+  useNetworkActivityDevTools =
+    require('./src/react-native/useNetworkActivityDevTools').useNetworkActivityDevTools;
 } else {
   useNetworkActivityDevTools = () => null;
 }