@rozenite/network-activity-plugin 1.0.0-alpha.8 → 1.0.0-alpha.9

package/dist/useNetworkActivityDevTools.js

@@ -1,5 +1,9 @@
 import { useEffect } from "react";
 import { useRozeniteDevToolsClient } from "@rozenite/plugin-bridge";
+import { createNanoEvents } from "nanoevents";
+import { Platform } from "react-native";
+import WebSocketInterceptor from "react-native/Libraries/WebSocket/WebSocketInterceptor";
+import { g as getEventSource } from "./event-source.js";
 function getHttpHeaderValue(headers, name) {
   const lowerName = name.toLowerCase();
   for (const key in headers) {
@@ -9,6 +13,26 @@ function getHttpHeaderValue(headers, name) {
   }
   return void 0;
 }
+const getContentType = (request) => {
+  const responseHeaders = request.responseHeaders;
+  const responseType = request.responseType;
+  const contentType = getHttpHeaderValue(responseHeaders || {}, "content-type");
+  if (contentType) {
+    return contentType.split(";")[0].trim();
+  }
+  switch (responseType) {
+    case "arraybuffer":
+    case "blob":
+      return "application/octet-stream";
+    case "text":
+    case "":
+      return "text/plain";
+    case "json":
+      return "application/json";
+    case "document":
+      return "text/html";
+  }
+};
 const REQUEST_TTL = 1e3 * 60 * 5;
 const getNetworkRequestsRegistry = () => {
   const registry = /* @__PURE__ */ new Map();
@@ -50,7 +74,7 @@ let sendCallback;
 let requestHeaderCallback;
 let headerReceivedCallback;
 let responseCallback;
-let isInterceptorEnabled = false;
+let isInterceptorEnabled$1 = false;
 const XHRInterceptor = {
   /**
    * Invoked before XMLHttpRequest.open(...) is called.
@@ -83,10 +107,10 @@ const XHRInterceptor = {
     requestHeaderCallback = callback;
   },
   isInterceptorEnabled() {
-    return isInterceptorEnabled;
+    return isInterceptorEnabled$1;
   },
   enableInterception() {
-    if (isInterceptorEnabled) {
+    if (isInterceptorEnabled$1) {
       return;
     }
     XMLHttpRequest.prototype.open = function(method, url) {
@@ -109,7 +133,7 @@ const XHRInterceptor = {
         this.addEventListener(
           "readystatechange",
           () => {
-            if (!isInterceptorEnabled) {
+            if (!isInterceptorEnabled$1) {
               return;
             }
             if (this.readyState === this.HEADERS_RECEIVED) {
@@ -149,14 +173,14 @@ const XHRInterceptor = {
       }
       originalXHRSend.apply(this, arguments);
     };
-    isInterceptorEnabled = true;
+    isInterceptorEnabled$1 = true;
   },
   // Unpatch XMLHttpRequest methods and remove the callbacks.
   disableInterception() {
-    if (!isInterceptorEnabled) {
+    if (!isInterceptorEnabled$1) {
       return;
     }
-    isInterceptorEnabled = false;
+    isInterceptorEnabled$1 = false;
     XMLHttpRequest.prototype.send = originalXHRSend;
     XMLHttpRequest.prototype.open = originalXHROpen;
     XMLHttpRequest.prototype.setRequestHeader = originalXHRSetRequestHeader;
@@ -168,26 +192,6 @@ const XHRInterceptor = {
   }
 };
 const networkRequestsRegistry = getNetworkRequestsRegistry();
-const getContentType = (request) => {
-  const responseHeaders = request.responseHeaders;
-  const responseType = request.responseType;
-  const contentType = getHttpHeaderValue(responseHeaders || {}, "content-type");
-  if (contentType) {
-    return contentType.split(";")[0].trim();
-  }
-  switch (responseType) {
-    case "arraybuffer":
-    case "blob":
-      return "application/octet-stream";
-    case "text":
-    case "":
-      return "text/plain";
-    case "json":
-      return "application/json";
-    case "document":
-      return "text/html";
-  }
-};
 const getResponseSize = (request) => {
   if (typeof request.response === "object") {
     return request.response.size;
@@ -196,7 +200,7 @@ const getResponseSize = (request) => {
 };
 const getResponseBody = async (request) => {
   const responseType = request.responseType;
-  if (responseType === "text") {
+  if (responseType === "" || responseType === "text") {
     return request.responseText;
   }
   if (responseType === "blob") {
@@ -241,12 +245,13 @@ const getNetworkInspector = (pluginClient) => {
   const handleRequestSend = (data, request) => {
     const sendTime = Date.now();
     const requestId = generateRequestId();
+    request._rozeniteRequestId = requestId;
     const initiator = getInitiatorFromStack();
     networkRequestsRegistry.addEntry(requestId, request);
     let ttfb = 0;
     pluginClient.send("request-sent", {
       requestId,
-      timestamp: sendTime / 1e3,
+      timestamp: sendTime,
       request: {
         url: request._url,
         method: request._method,
@@ -264,7 +269,7 @@ const getNetworkInspector = (pluginClient) => {
     request.addEventListener("load", () => {
       pluginClient.send("response-received", {
         requestId,
-        timestamp: Date.now() / 1e3,
+        timestamp: Date.now(),
         type: "XHR",
         response: {
           url: request._url,
@@ -273,14 +278,14 @@ const getNetworkInspector = (pluginClient) => {
           headers: request.responseHeaders || {},
           contentType: getContentType(request),
           size: getResponseSize(request),
-          responseTime: Date.now() / 1e3
+          responseTime: Date.now()
         }
       });
     });
     request.addEventListener("loadend", () => {
       pluginClient.send("request-completed", {
         requestId,
-        timestamp: Date.now() / 1e3,
+        timestamp: Date.now(),
         duration: Date.now() - sendTime,
         size: getResponseSize(request),
         ttfb
@@ -289,7 +294,7 @@ const getNetworkInspector = (pluginClient) => {
     request.addEventListener("error", () => {
       pluginClient.send("request-failed", {
         requestId,
-        timestamp: Date.now() / 1e3,
+        timestamp: Date.now(),
         type: "XHR",
         error: "Failed",
         canceled: false
@@ -298,7 +303,7 @@ const getNetworkInspector = (pluginClient) => {
     request.addEventListener("abort", () => {
       pluginClient.send("request-failed", {
         requestId,
-        timestamp: Date.now() / 1e3,
+        timestamp: Date.now(),
         type: "XHR",
         error: "Aborted",
         canceled: true
@@ -350,6 +355,333 @@ const getNetworkInspector = (pluginClient) => {
     dispose
   };
 };
+const getWebSocketInterceptor = () => {
+  if (Platform.constants.reactNativeVersion.minor >= 79) {
+    return WebSocketInterceptor;
+  } else {
+    const WebSocketInterceptorPreRN079 = WebSocketInterceptor;
+    return {
+      ...WebSocketInterceptorPreRN079,
+      setOnMessageCallback: (callback) => {
+        WebSocketInterceptorPreRN079.setOnMessageCallback((socketId, data) => {
+          callback(data, socketId);
+        });
+      },
+      setOnCloseCallback: (callback) => {
+        WebSocketInterceptorPreRN079.setOnCloseCallback((error, socketId) => {
+          callback(socketId, error);
+        });
+      },
+      setOnErrorCallback: (callback) => {
+        WebSocketInterceptorPreRN079.setOnErrorCallback((error, socketId) => {
+          callback(socketId, error);
+        });
+      }
+    };
+  }
+};
+const getWebSocketInspector = () => {
+  const eventEmitter = createNanoEvents();
+  const socketUrlMap = /* @__PURE__ */ new Map();
+  const webSocketInterceptor = getWebSocketInterceptor();
+  return {
+    enable: () => {
+      webSocketInterceptor.setConnectCallback(
+        (url, protocols, options, socketId) => {
+          socketUrlMap.set(socketId, url);
+          const event = {
+            type: "websocket-connect",
+            url,
+            socketId,
+            timestamp: Date.now(),
+            protocols,
+            options
+          };
+          eventEmitter.emit("websocket-connect", event);
+        }
+      );
+      webSocketInterceptor.setCloseCallback(
+        (code, reason, socketId) => {
+          const url = socketUrlMap.get(socketId);
+          if (!url) {
+            return;
+          }
+          const event = {
+            type: "websocket-close",
+            url,
+            socketId,
+            timestamp: Date.now(),
+            code: code || 0,
+            reason: reason || void 0
+          };
+          eventEmitter.emit("websocket-close", event);
+          socketUrlMap.delete(socketId);
+        }
+      );
+      webSocketInterceptor.setOnMessageCallback(
+        (data, socketId) => {
+          const url = socketUrlMap.get(socketId);
+          if (!url) {
+            return;
+          }
+          const event = {
+            type: "websocket-message-received",
+            url,
+            socketId,
+            timestamp: Date.now(),
+            data,
+            messageType: typeof data === "string" ? "text" : "binary"
+          };
+          eventEmitter.emit("websocket-message-received", event);
+        }
+      );
+      webSocketInterceptor.setOnErrorCallback(
+        (error, socketId) => {
+          const url = socketUrlMap.get(socketId);
+          if (!url) {
+            return;
+          }
+          const event = {
+            type: "websocket-error",
+            url,
+            socketId,
+            timestamp: Date.now(),
+            error
+          };
+          eventEmitter.emit("websocket-error", event);
+        }
+      );
+      webSocketInterceptor.setSendCallback((data, socketId) => {
+        const url = socketUrlMap.get(socketId);
+        if (!url) {
+          return;
+        }
+        const event = {
+          type: "websocket-message-sent",
+          url,
+          socketId,
+          timestamp: Date.now(),
+          data,
+          messageType: typeof data === "string" ? "text" : "binary"
+        };
+        eventEmitter.emit("websocket-message-sent", event);
+      });
+      webSocketInterceptor.setOnOpenCallback((socketId) => {
+        const url = socketUrlMap.get(socketId);
+        if (!url) {
+          return;
+        }
+        const event = {
+          type: "websocket-open",
+          url,
+          socketId,
+          timestamp: Date.now()
+        };
+        eventEmitter.emit("websocket-open", event);
+      });
+      webSocketInterceptor.setOnCloseCallback(
+        (error, socketId) => {
+          const url = socketUrlMap.get(socketId);
+          if (!url) {
+            return;
+          }
+          const event = {
+            type: "websocket-close",
+            url,
+            socketId,
+            timestamp: Date.now(),
+            code: error.code,
+            reason: error.reason
+          };
+          eventEmitter.emit("websocket-close", event);
+          socketUrlMap.delete(socketId);
+        }
+      );
+      webSocketInterceptor.enableInterception();
+    },
+    disable: () => {
+      webSocketInterceptor.disableInterception();
+    },
+    isEnabled: () => webSocketInterceptor.isInterceptorEnabled(),
+    dispose: () => {
+      eventEmitter.events = {};
+      socketUrlMap.clear();
+    },
+    on: (event, callback) => eventEmitter.on(event, callback)
+  };
+};
+let connectCallback;
+let messageCallback;
+let errorCallback;
+let openEventCallback;
+let closeCallback;
+let isInterceptorEnabled = false;
+const eventSourceClass = getEventSource();
+const originalOpen = eventSourceClass.prototype.open;
+const SSEInterceptor = {
+  /**
+   * Invoked when EventSource.open() is called (connection attempt starting).
+   */
+  setConnectCallback(callback) {
+    connectCallback = callback;
+  },
+  /**
+   * Invoked when a message event is received.
+   */
+  setMessageCallback(callback) {
+    messageCallback = callback;
+  },
+  /**
+   * Invoked when an error event occurs.
+   */
+  setErrorCallback(callback) {
+    errorCallback = callback;
+  },
+  /**
+   * Invoked when the connection is successfully opened (open event fired).
+   */
+  setOpenEventCallback(callback) {
+    openEventCallback = callback;
+  },
+  /**
+   * Invoked when the connection is closed.
+   */
+  setCloseCallback(callback) {
+    closeCallback = callback;
+  },
+  isInterceptorEnabled() {
+    return isInterceptorEnabled;
+  },
+  enableInterception() {
+    if (isInterceptorEnabled) {
+      return;
+    }
+    eventSourceClass.prototype.open = function() {
+      if (connectCallback) {
+        connectCallback(this.url, this);
+      }
+      this.addEventListener("open", (event) => {
+        if (openEventCallback) {
+          openEventCallback(event, this);
+        }
+      });
+      this.addEventListener("message", (event) => {
+        if (messageCallback) {
+          messageCallback(event, this);
+        }
+      });
+      this.addEventListener(
+        "error",
+        (event) => {
+          if (errorCallback) {
+            errorCallback(event, this);
+          }
+        }
+      );
+      this.addEventListener("close", (event) => {
+        if (closeCallback) {
+          closeCallback(event, this);
+        }
+      });
+      return originalOpen.call(this);
+    };
+    isInterceptorEnabled = true;
+  },
+  // Unpatch EventSource open method and remove the callbacks.
+  disableInterception() {
+    if (!isInterceptorEnabled) {
+      return;
+    }
+    isInterceptorEnabled = false;
+    eventSourceClass.prototype.open = originalOpen;
+    connectCallback = null;
+    messageCallback = null;
+    errorCallback = null;
+    openEventCallback = null;
+    closeCallback = null;
+  }
+};
+const getSSEInspector = () => {
+  const eventEmitter = createNanoEvents();
+  const getRequestId = (eventSource) => {
+    var _a;
+    const requestId = (_a = eventSource._xhr) == null ? void 0 : _a._rozeniteRequestId;
+    if (!requestId) {
+      throw new Error(
+        "No request ID found for EventSource. This should never happen!"
+      );
+    }
+    return requestId;
+  };
+  return {
+    enable: () => {
+      SSEInterceptor.setOpenEventCallback((_, eventSource) => {
+        const sseEventSource = eventSource;
+        const requestId = getRequestId(sseEventSource);
+        const sseXhr = sseEventSource._xhr;
+        const event = {
+          type: "sse-open",
+          requestId,
+          timestamp: Date.now(),
+          response: {
+            url: sseXhr._url,
+            status: sseXhr.status,
+            statusText: sseXhr.statusText,
+            headers: sseXhr.responseHeaders || {},
+            contentType: getContentType(sseXhr),
+            size: 0,
+            responseTime: Date.now()
+          }
+        };
+        eventEmitter.emit("sse-open", event);
+      });
+      SSEInterceptor.setMessageCallback((messageEvent, eventSource) => {
+        const sseEventSource = eventSource;
+        const requestId = getRequestId(sseEventSource);
+        const event = {
+          type: "sse-message",
+          requestId,
+          timestamp: Date.now(),
+          data: messageEvent.data || ""
+        };
+        eventEmitter.emit("sse-message", event);
+      });
+      SSEInterceptor.setErrorCallback((errorEvent, eventSource) => {
+        const sseEventSource = eventSource;
+        const requestId = getRequestId(sseEventSource);
+        const event = {
+          type: "sse-error",
+          requestId,
+          timestamp: Date.now(),
+          error: {
+            type: errorEvent.type,
+            message: errorEvent.type === "timeout" ? "Timeout" : errorEvent.message
+          }
+        };
+        eventEmitter.emit("sse-error", event);
+      });
+      SSEInterceptor.setCloseCallback((_, eventSource) => {
+        const sseEventSource = eventSource;
+        const requestId = getRequestId(sseEventSource);
+        const event = {
+          type: "sse-close",
+          requestId,
+          timestamp: Date.now()
+        };
+        eventEmitter.emit("sse-close", event);
+      });
+      SSEInterceptor.enableInterception();
+    },
+    disable: () => {
+      SSEInterceptor.disableInterception();
+    },
+    isEnabled: () => SSEInterceptor.isInterceptorEnabled(),
+    dispose: () => {
+      eventEmitter.events = {};
+    },
+    on: (event, callback) => eventEmitter.on(event, callback)
+  };
+};
 const useNetworkActivityDevTools = () => {
   const client = useRozeniteDevToolsClient({
     pluginId: "@rozenite/network-activity-plugin"
@@ -363,6 +695,61 @@ const useNetworkActivityDevTools = () => {
       networkInspector.dispose();
     };
   }, [client]);
+  useEffect(() => {
+    if (!client) {
+      return;
+    }
+    const eventsToForward = [
+      "websocket-connect",
+      "websocket-open",
+      "websocket-close",
+      "websocket-message-sent",
+      "websocket-message-received",
+      "websocket-error",
+      "websocket-connection-status-changed"
+    ];
+    const websocketInspector = getWebSocketInspector();
+    eventsToForward.forEach((event) => {
+      websocketInspector.on(event, (event2) => {
+        client.send(event2.type, event2);
+      });
+    });
+    client.onMessage("network-enable", () => {
+      websocketInspector.enable();
+    });
+    client.onMessage("network-disable", () => {
+      websocketInspector.disable();
+    });
+    return () => {
+      websocketInspector.dispose();
+    };
+  }, [client]);
+  useEffect(() => {
+    if (!client) {
+      return;
+    }
+    const eventsToForward = [
+      "sse-open",
+      "sse-message",
+      "sse-error",
+      "sse-close"
+    ];
+    const sseInspector = getSSEInspector();
+    eventsToForward.forEach((event) => {
+      sseInspector.on(event, (event2) => {
+        client.send(event2.type, event2);
+      });
+    });
+    client.onMessage("network-enable", () => {
+      sseInspector.enable();
+    });
+    client.onMessage("network-disable", () => {
+      sseInspector.disable();
+    });
+    return () => {
+      sseInspector.dispose();
+    };
+  }, [client]);
   return client;
 };
 export {

package/package.json

@@ -1,37 +1,48 @@
 {
   "name": "@rozenite/network-activity-plugin",
-  "version": "1.0.0-alpha.8",
+  "version": "1.0.0-alpha.9",
   "description": "Network Activity for Rozenite.",
   "type": "module",
   "main": "./dist/react-native.cjs",
   "module": "./dist/react-native.js",
   "types": "./dist/react-native.d.ts",
   "dependencies": {
-    "@rozenite/plugin-bridge": "1.0.0-alpha.8"
+    "nanoevents": "^9.1.0",
+    "@rozenite/plugin-bridge": "1.0.0-alpha.9"
   },
   "devDependencies": {
+    "@floating-ui/react": "^0.26.0",
     "@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",
+    "@tanstack/react-virtual": "^3.0.0",
     "autoprefixer": "^10.4.21",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "lucide-react": "^0.263.1",
     "postcss": "^8.5.6",
+    "proxy-memoize": "^3.0.1",
     "react": "*",
     "react-json-tree": "^0.20.0",
-    "react-native": "*",
+    "react-native-sse": "^1.2.1",
     "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.8",
-    "rozenite": "1.0.0-alpha.8"
+    "zustand": "^5.0.6",
+    "@rozenite/vite-plugin": "1.0.0-alpha.9",
+    "rozenite": "1.0.0-alpha.9"
+  },
+  "peerDependencies": {
+    "react-native-sse": "*"
+  },
+  "peerDependenciesMeta": {
+    "react-native-sse": {
+      "optional": true
+    }
   },
   "license": "MIT",
   "scripts": {