@rozenite/network-activity-plugin 1.0.0-alpha.11 → 1.0.0-alpha.12

package/dist/rozenite.json

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

package/dist/src/react-native/config.d.ts

@@ -0,0 +1,13 @@
+export type InspectorType = 'http' | 'websocket' | 'sse';
+export type NetworkActivityDevToolsConfig = {
+    /**
+     * Specifies which network inspectors are enabled.
+     * Set to `false` to disable monitoring for a specific type of network traffic.
+     * @default { http: true, websocket: true, sse: true }
+     */
+    inspectors?: {
+        [key in InspectorType]?: boolean;
+    };
+};
+export declare const DEFAULT_CONFIG: NetworkActivityDevToolsConfig;
+export declare const validateConfig: (config: NetworkActivityDevToolsConfig) => void;

package/dist/src/react-native/useNetworkActivityDevTools.d.ts

@@ -1,2 +1,3 @@
 import { NetworkActivityEventMap } from '../shared/client';
-export declare const useNetworkActivityDevTools: () => import('@rozenite/plugin-bridge').RozeniteDevToolsClient<NetworkActivityEventMap> | null;
+import { NetworkActivityDevToolsConfig } from './config';
+export declare const useNetworkActivityDevTools: (config?: NetworkActivityDevToolsConfig) => import('@rozenite/plugin-bridge').RozeniteDevToolsClient<NetworkActivityEventMap> | null;

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

@@ -1,7 +1,8 @@
 import { RozeniteDevToolsClient } from '@rozenite/plugin-bridge';
 import { WebSocketEventMap } from './websocket-events';
 import { SSEEventMap } from './sse-events';
-export type HttpHeaders = Record<string, string>;
+export type HttpHeaders = Record<string, string | string[]>;
+export type XHRHeaders = NonNullable<XMLHttpRequest['responseHeaders']>;
 export type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD';
 export type RequestId = string;
 export type Timestamp = number;
@@ -20,6 +21,17 @@ export type RequestPostData = {
         name?: string;
     };
 } | null | undefined;
+export type Cookie = {
+    name: string;
+    value: string;
+    domain?: string;
+    path?: string;
+    expires?: string;
+    maxAge?: string;
+    secure?: boolean;
+    httpOnly?: boolean;
+    sameSite?: string;
+};
 export type Request = {
     url: string;
     method: HttpMethod;
@@ -32,7 +44,7 @@ export type Response = {
     statusText: string;
     headers: HttpHeaders;
     contentType: string;
-    size: number;
+    size: number | null;
     responseTime: Timestamp;
 };
 export type Initiator = {
@@ -62,7 +74,7 @@ export type NetworkActivityEventMap = {
         requestId: RequestId;
         timestamp: Timestamp;
         duration: number;
-        size: number;
+        size: number | null;
         ttfb: number;
     };
     'request-failed': {

package/dist/src/ui/components/Button.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
     size?: "default" | "xs" | "sm" | "lg" | "icon" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {

package/dist/src/ui/components/CodeBlock.d.ts

@@ -0,0 +1,3 @@
+import { HTMLProps } from 'react';
+export type CodeBlockProps = HTMLProps<HTMLPreElement>;
+export declare const CodeBlock: ({ children, className, ...props }: CodeBlockProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/ui/components/CookieCard.d.ts

@@ -0,0 +1,7 @@
+import { Cookie } from '../../shared/client';
+type CookieCardProps = {
+    cookie: Cookie;
+    keyClassName?: string;
+};
+export declare const CookieCard: ({ cookie, keyClassName }: CookieCardProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/ui/components/JsonTreeCopyableItem.d.ts

@@ -3,5 +3,5 @@ type JsonTreeCopyableItemProps = PropsWithChildren<{
     getCopyableValue: () => string;
     className?: string;
 }>;
-export declare const JsonTreeCopyableItem: ({ children, getCopyableValue, className }: JsonTreeCopyableItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const JsonTreeCopyableItem: ({ children, getCopyableValue, className, }: JsonTreeCopyableItemProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/ui/components/Section.d.ts

@@ -2,5 +2,6 @@ import { default as React } from 'react';
 export type SectionProps = {
     title: string;
     children: React.ReactNode;
+    collapsible?: boolean;
 };
-export declare const Section: ({ title, children }: SectionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Section: ({ title, children, collapsible, }: SectionProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import { Initiator, ResourceType, RequestPostData } from '../../shared/client';
+import { Initiator, ResourceType, HttpHeaders, RequestPostData } from '../../shared/client';
 export type RequestId = string;
 export type Timestamp = number;
 export type SocketId = number;
@@ -15,14 +15,14 @@ export type HttpResponseData = {
 export type HttpRequest = {
     url: string;
     method: HttpMethod;
-    headers: Record<string, string>;
+    headers: HttpHeaders;
     body?: HttpRequestData;
 };
 export type HttpResponse = {
     url: string;
     status: number;
     statusText: string;
-    headers: Record<string, string>;
+    headers: HttpHeaders;
     contentType: string;
     size: number;
     responseTime: Timestamp;
@@ -97,7 +97,7 @@ export type ProcessedRequest = {
     status: HttpStatus | WebSocketStatus | SSEStatus;
     timestamp: Timestamp;
     duration?: number;
-    size?: number;
+    size: number | null;
     method: HttpMethod | 'WS' | 'SSE';
     httpStatus?: number;
 };

package/dist/src/utils/applyReactNativeResponseHeadersLogic.d.ts

@@ -0,0 +1,10 @@
+import { HttpHeaders, XHRHeaders } from '../shared/client';
+/**
+ * Applies React Native specific logic to response headers.
+ * React Native concatenates multiple header values into single strings,
+ * this function parses them back into arrays where appropriate.
+ *
+ * See:
+ * https://github.com/facebook/react-native/blob/588f0c5ce6c283f116228456da2170d2adc3cbf4/ReactAndroid/src/main/java/com/facebook/react/modules/network/NetworkingModule.java#L637
+ */
+export declare const applyReactNativeResponseHeadersLogic: (headers: XHRHeaders) => HttpHeaders;

package/dist/src/utils/cookieParser.d.ts

@@ -0,0 +1,6 @@
+import { Cookie, HttpHeaders } from '../shared/client';
+export declare const parseSetCookieHeader: (setCookieStr: string) => Cookie;
+export declare const splitSetCookieHeaderByComma: (header: string) => string[];
+export declare const parseCookieHeader: (cookieString: string) => Cookie[];
+export declare const parseRequestCookiesFromHeaders: (headers: HttpHeaders) => Cookie[];
+export declare const parseResponseCookiesFromHeaders: (headers: HttpHeaders) => Cookie[];

package/dist/src/utils/getHttpHeader.d.ts

@@ -0,0 +1,5 @@
+import { HttpHeaders, XHRHeaders } from '../shared/client';
+export declare function getHttpHeader<T extends HttpHeaders | XHRHeaders>(headers: T, name: string): {
+    value: T[Extract<keyof T, string>];
+    originalKey: Extract<keyof T, string>;
+} | undefined;

package/dist/src/utils/getStringSizeInBytes.d.ts

@@ -0,0 +1 @@
+export declare const getStringSizeInBytes: (value: string) => number;

package/dist/src/utils/isNumber.d.ts

@@ -0,0 +1 @@
+export declare const isNumber: (value: unknown) => value is number;

package/dist/useNetworkActivityDevTools.cjs

@@ -11,25 +11,27 @@ const WebSocketInterceptor__default = /* @__PURE__ */ _interopDefault(WebSocketI
 function safeStringify(data) {
   try {
     return typeof data === "string" ? data : JSON.stringify(data);
-  } catch (error) {
+  } catch {
     return String(data);
   }
 }
-function getHttpHeaderValue(headers, name) {
+function getHttpHeader(headers, name) {
   const lowerName = name.toLowerCase();
   for (const key in headers) {
     if (key.toLowerCase() === lowerName) {
-      return headers[key];
+      return { value: headers[key], originalKey: key };
     }
   }
   return void 0;
 }
 function getContentTypeMime(headers) {
-  const contentType = getHttpHeaderValue(headers, "content-type");
-  if (contentType) {
-    return contentType.split(";")[0].trim();
+  const contentType = getHttpHeader(headers, "content-type");
+  if (!contentType) {
+    return void 0;
   }
-  return void 0;
+  const { value } = contentType;
+  const actualValue = Array.isArray(value) ? value[0] : value;
+  return actualValue.split(";")[0].trim();
 }
 const getContentType = (request) => {
   const responseHeaders = request.responseHeaders;
@@ -231,6 +233,28 @@ const XHRInterceptor = {
     requestHeaderCallback = null;
   }
 };
+const getStringSizeInBytes = (value) => {
+  return new TextEncoder().encode(value).length;
+};
+const splitSetCookieHeaderByComma = (header) => {
+  const regex = /(?:^|,\s)([^=;,]+=[^;]+(?:;[^,]*)*)/g;
+  const matches = [];
+  let match;
+  while ((match = regex.exec(header)) !== null) {
+    matches.push(match[1].trim());
+  }
+  return matches;
+};
+const applyReactNativeResponseHeadersLogic = (headers) => {
+  const parsedHeaders = { ...headers };
+  const setCookieHeader = getHttpHeader(headers, "set-cookie");
+  if (setCookieHeader) {
+    const { value, originalKey } = setCookieHeader;
+    const cookies = splitSetCookieHeaderByComma(value);
+    parsedHeaders[originalKey] = cookies.length > 0 ? cookies : value;
+  }
+  return parsedHeaders;
+};
 const networkRequestsRegistry = getNetworkRequestsRegistry();
 function getRequestBody(body) {
   if (body === null || body === void 0) {
@@ -266,13 +290,27 @@ function getRequestBody(body) {
   };
 }
 const getResponseSize = (request) => {
-  if (request.response === null) {
+  try {
+    const { responseType, response } = request;
+    if (response === null) {
+      return 0;
+    }
+    if (responseType === "" || responseType === "text") {
+      return getStringSizeInBytes(request.responseText);
+    }
+    if (responseType === "json") {
+      return getStringSizeInBytes(safeStringify(response));
+    }
+    if (responseType === "blob") {
+      return response.size;
+    }
+    if (responseType === "arraybuffer") {
+      return response.byteLength;
+    }
     return 0;
+  } catch {
+    return null;
   }
-  if (typeof request.response === "object") {
-    return request.response.size;
-  }
-  return request.response.length || 0;
 };
 const getResponseBody = async (request) => {
   const responseType = request.responseType;
@@ -291,6 +329,9 @@ const getResponseBody = async (request) => {
       });
     }
   }
+  if (responseType === "json") {
+    return safeStringify(request.response);
+  }
   return null;
 };
 const getInitiatorFromStack = () => {
@@ -351,7 +392,9 @@ const getNetworkInspector = (pluginClient) => {
           url: request._url,
           status: request.status,
           statusText: request.statusText,
-          headers: request.responseHeaders || {},
+          headers: applyReactNativeResponseHeadersLogic(
+            request.responseHeaders || {}
+          ),
           contentType: getContentType(request),
           size: getResponseSize(request),
           responseTime: Date.now()
@@ -762,26 +805,73 @@ const getSSEInspector = () => {
     },
     isEnabled: () => SSEInterceptor.isInterceptorEnabled(),
     dispose: () => {
+      SSEInterceptor.disableInterception();
       eventEmitter.events = {};
     },
     on: (event, callback) => eventEmitter.on(event, callback)
   };
 };
-const useNetworkActivityDevTools = () => {
+const DEFAULT_CONFIG = {
+  inspectors: {
+    http: true,
+    websocket: true,
+    sse: true
+  }
+};
+const validateConfig = (config) => {
+  const inspectors = config.inspectors;
+  if (!inspectors) {
+    return;
+  }
+  if (inspectors.sse && !inspectors.http) {
+    throw new Error("SSE inspector requires HTTP inspector to be enabled.");
+  }
+};
+const useNetworkActivityDevTools = (config = DEFAULT_CONFIG) => {
+  var _a, _b, _c;
+  const isRecordingEnabledRef = react.useRef(false);
   const client = pluginBridge.useRozeniteDevToolsClient({
     pluginId: "@rozenite/network-activity-plugin"
   });
+  const isHttpInspectorEnabled = ((_a = config.inspectors) == null ? void 0 : _a.http) ?? true;
+  const isWebSocketInspectorEnabled = ((_b = config.inspectors) == null ? void 0 : _b.websocket) ?? true;
+  const isSSEInspectorEnabled = ((_c = config.inspectors) == null ? void 0 : _c.sse) ?? true;
+  react.useEffect(() => {
+    if (!client) {
+      return;
+    }
+    validateConfig(config);
+  }, [config]);
   react.useEffect(() => {
     if (!client) {
       return;
     }
+    const subscriptions = [
+      client.onMessage("network-enable", () => {
+        isRecordingEnabledRef.current = true;
+      }),
+      client.onMessage("network-disable", () => {
+        isRecordingEnabledRef.current = false;
+      })
+    ];
+    return () => {
+      subscriptions.forEach((subscription) => subscription.remove());
+    };
+  }, [client]);
+  react.useEffect(() => {
+    if (!client || !isHttpInspectorEnabled) {
+      return;
+    }
     const networkInspector = getNetworkInspector(client);
+    if (isRecordingEnabledRef.current) {
+      networkInspector.enable();
+    }
     return () => {
       networkInspector.dispose();
     };
-  }, [client]);
+  }, [client, isHttpInspectorEnabled]);
   react.useEffect(() => {
-    if (!client) {
+    if (!client || !isWebSocketInspectorEnabled) {
       return;
     }
     const eventsToForward = [
@@ -805,12 +895,15 @@ const useNetworkActivityDevTools = () => {
     client.onMessage("network-disable", () => {
       websocketInspector.disable();
     });
+    if (isRecordingEnabledRef.current) {
+      websocketInspector.enable();
+    }
     return () => {
       websocketInspector.dispose();
     };
-  }, [client]);
+  }, [client, isWebSocketInspectorEnabled]);
   react.useEffect(() => {
-    if (!client) {
+    if (!client || !isSSEInspectorEnabled) {
       return;
     }
     const eventsToForward = [
@@ -831,10 +924,13 @@ const useNetworkActivityDevTools = () => {
     client.onMessage("network-disable", () => {
       sseInspector.disable();
     });
+    if (isRecordingEnabledRef.current) {
+      sseInspector.enable();
+    }
     return () => {
       sseInspector.dispose();
     };
-  }, [client]);
+  }, [client, isSSEInspectorEnabled]);
   return client;
 };
 exports.useNetworkActivityDevTools = useNetworkActivityDevTools;

package/dist/useNetworkActivityDevTools.js

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useRef, useEffect } from "react";
 import { useRozeniteDevToolsClient } from "@rozenite/plugin-bridge";
 import { createNanoEvents } from "nanoevents";
 import { Platform } from "react-native";
@@ -7,25 +7,27 @@ import { g as getEventSource } from "./event-source.js";
 function safeStringify(data) {
   try {
     return typeof data === "string" ? data : JSON.stringify(data);
-  } catch (error) {
+  } catch {
     return String(data);
   }
 }
-function getHttpHeaderValue(headers, name) {
+function getHttpHeader(headers, name) {
   const lowerName = name.toLowerCase();
   for (const key in headers) {
     if (key.toLowerCase() === lowerName) {
-      return headers[key];
+      return { value: headers[key], originalKey: key };
     }
   }
   return void 0;
 }
 function getContentTypeMime(headers) {
-  const contentType = getHttpHeaderValue(headers, "content-type");
-  if (contentType) {
-    return contentType.split(";")[0].trim();
+  const contentType = getHttpHeader(headers, "content-type");
+  if (!contentType) {
+    return void 0;
   }
-  return void 0;
+  const { value } = contentType;
+  const actualValue = Array.isArray(value) ? value[0] : value;
+  return actualValue.split(";")[0].trim();
 }
 const getContentType = (request) => {
   const responseHeaders = request.responseHeaders;
@@ -227,6 +229,28 @@ const XHRInterceptor = {
     requestHeaderCallback = null;
   }
 };
+const getStringSizeInBytes = (value) => {
+  return new TextEncoder().encode(value).length;
+};
+const splitSetCookieHeaderByComma = (header) => {
+  const regex = /(?:^|,\s)([^=;,]+=[^;]+(?:;[^,]*)*)/g;
+  const matches = [];
+  let match;
+  while ((match = regex.exec(header)) !== null) {
+    matches.push(match[1].trim());
+  }
+  return matches;
+};
+const applyReactNativeResponseHeadersLogic = (headers) => {
+  const parsedHeaders = { ...headers };
+  const setCookieHeader = getHttpHeader(headers, "set-cookie");
+  if (setCookieHeader) {
+    const { value, originalKey } = setCookieHeader;
+    const cookies = splitSetCookieHeaderByComma(value);
+    parsedHeaders[originalKey] = cookies.length > 0 ? cookies : value;
+  }
+  return parsedHeaders;
+};
 const networkRequestsRegistry = getNetworkRequestsRegistry();
 function getRequestBody(body) {
   if (body === null || body === void 0) {
@@ -262,13 +286,27 @@ function getRequestBody(body) {
   };
 }
 const getResponseSize = (request) => {
-  if (request.response === null) {
+  try {
+    const { responseType, response } = request;
+    if (response === null) {
+      return 0;
+    }
+    if (responseType === "" || responseType === "text") {
+      return getStringSizeInBytes(request.responseText);
+    }
+    if (responseType === "json") {
+      return getStringSizeInBytes(safeStringify(response));
+    }
+    if (responseType === "blob") {
+      return response.size;
+    }
+    if (responseType === "arraybuffer") {
+      return response.byteLength;
+    }
     return 0;
+  } catch {
+    return null;
   }
-  if (typeof request.response === "object") {
-    return request.response.size;
-  }
-  return request.response.length || 0;
 };
 const getResponseBody = async (request) => {
   const responseType = request.responseType;
@@ -287,6 +325,9 @@ const getResponseBody = async (request) => {
       });
     }
   }
+  if (responseType === "json") {
+    return safeStringify(request.response);
+  }
   return null;
 };
 const getInitiatorFromStack = () => {
@@ -347,7 +388,9 @@ const getNetworkInspector = (pluginClient) => {
           url: request._url,
           status: request.status,
           statusText: request.statusText,
-          headers: request.responseHeaders || {},
+          headers: applyReactNativeResponseHeadersLogic(
+            request.responseHeaders || {}
+          ),
           contentType: getContentType(request),
           size: getResponseSize(request),
           responseTime: Date.now()
@@ -758,26 +801,73 @@ const getSSEInspector = () => {
     },
     isEnabled: () => SSEInterceptor.isInterceptorEnabled(),
     dispose: () => {
+      SSEInterceptor.disableInterception();
       eventEmitter.events = {};
     },
     on: (event, callback) => eventEmitter.on(event, callback)
   };
 };
-const useNetworkActivityDevTools = () => {
+const DEFAULT_CONFIG = {
+  inspectors: {
+    http: true,
+    websocket: true,
+    sse: true
+  }
+};
+const validateConfig = (config) => {
+  const inspectors = config.inspectors;
+  if (!inspectors) {
+    return;
+  }
+  if (inspectors.sse && !inspectors.http) {
+    throw new Error("SSE inspector requires HTTP inspector to be enabled.");
+  }
+};
+const useNetworkActivityDevTools = (config = DEFAULT_CONFIG) => {
+  var _a, _b, _c;
+  const isRecordingEnabledRef = useRef(false);
   const client = useRozeniteDevToolsClient({
     pluginId: "@rozenite/network-activity-plugin"
   });
+  const isHttpInspectorEnabled = ((_a = config.inspectors) == null ? void 0 : _a.http) ?? true;
+  const isWebSocketInspectorEnabled = ((_b = config.inspectors) == null ? void 0 : _b.websocket) ?? true;
+  const isSSEInspectorEnabled = ((_c = config.inspectors) == null ? void 0 : _c.sse) ?? true;
+  useEffect(() => {
+    if (!client) {
+      return;
+    }
+    validateConfig(config);
+  }, [config]);
   useEffect(() => {
     if (!client) {
       return;
     }
+    const subscriptions = [
+      client.onMessage("network-enable", () => {
+        isRecordingEnabledRef.current = true;
+      }),
+      client.onMessage("network-disable", () => {
+        isRecordingEnabledRef.current = false;
+      })
+    ];
+    return () => {
+      subscriptions.forEach((subscription) => subscription.remove());
+    };
+  }, [client]);
+  useEffect(() => {
+    if (!client || !isHttpInspectorEnabled) {
+      return;
+    }
     const networkInspector = getNetworkInspector(client);
+    if (isRecordingEnabledRef.current) {
+      networkInspector.enable();
+    }
     return () => {
       networkInspector.dispose();
     };
-  }, [client]);
+  }, [client, isHttpInspectorEnabled]);
   useEffect(() => {
-    if (!client) {
+    if (!client || !isWebSocketInspectorEnabled) {
       return;
     }
     const eventsToForward = [
@@ -801,12 +891,15 @@ const useNetworkActivityDevTools = () => {
     client.onMessage("network-disable", () => {
       websocketInspector.disable();
     });
+    if (isRecordingEnabledRef.current) {
+      websocketInspector.enable();
+    }
     return () => {
       websocketInspector.dispose();
     };
-  }, [client]);
+  }, [client, isWebSocketInspectorEnabled]);
   useEffect(() => {
-    if (!client) {
+    if (!client || !isSSEInspectorEnabled) {
       return;
     }
     const eventsToForward = [
@@ -827,10 +920,13 @@ const useNetworkActivityDevTools = () => {
     client.onMessage("network-disable", () => {
       sseInspector.disable();
     });
+    if (isRecordingEnabledRef.current) {
+      sseInspector.enable();
+    }
     return () => {
       sseInspector.dispose();
     };
-  }, [client]);
+  }, [client, isSSEInspectorEnabled]);
   return client;
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rozenite/network-activity-plugin",
-  "version": "1.0.0-alpha.11",
+  "version": "1.0.0-alpha.12",
   "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-alpha.11"
+    "@rozenite/plugin-bridge": "1.0.0-alpha.12"
   },
   "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": "1.0.0-alpha.11",
-    "@rozenite/vite-plugin": "1.0.0-alpha.11"
+    "@rozenite/vite-plugin": "1.0.0-alpha.12",
+    "rozenite": "1.0.0-alpha.12"
   },
   "peerDependencies": {
     "react-native-sse": "*"