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

package/dist/assets/{App-DCuHdq4D.css → App-CfJuBHc_.css}

@@ -845,6 +845,9 @@ video {
 .whitespace-nowrap {
   white-space: nowrap;
 }
+.whitespace-pre {
+  white-space: pre;
+}
 .whitespace-pre-wrap {
   white-space: pre-wrap;
 }

package/dist/rozenite.json

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

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

@@ -7,20 +7,23 @@ export type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD';
 export type RequestId = string;
 export type Timestamp = number;
 export type XHRPostData = string | Blob | FormData | ArrayBuffer | ArrayBufferView | unknown | null | undefined;
-export type RequestPostData = {
+export type RequestTextPostData = {
     type: 'text';
     value: string;
-} | {
-    type: 'form-data';
-    value: Record<string, unknown>;
-} | {
+};
+export type RequestBinaryPostData = {
     type: 'binary';
     value: {
         size: number;
         type?: string;
         name?: string;
     };
-} | null | undefined;
+};
+export type RequestFormDataPostData = {
+    type: 'form-data';
+    value: Record<string, RequestTextPostData | RequestBinaryPostData>;
+};
+export type RequestPostData = RequestTextPostData | RequestFormDataPostData | RequestBinaryPostData | null | undefined;
 export type Cookie = {
     name: string;
     value: string;

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

@@ -0,0 +1,7 @@
+import { HttpNetworkEntry, SSENetworkEntry } from '../state/model';
+type NetworkEntry = HttpNetworkEntry | SSENetworkEntry;
+type CopyDropdownProps = {
+    selectedRequest: NetworkEntry;
+};
+export declare const CopyRequestDropdown: ({ selectedRequest }: CopyDropdownProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,6 @@
+import { HttpRequestData } from '../state/model';
+type RequestBodyProps = {
+    data: HttpRequestData['data'];
+};
+export declare const RequestBody: ({ data }: RequestBodyProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/src/ui/utils/checkRequestBodyBinary.d.ts

@@ -0,0 +1,2 @@
+import { NetworkEntry } from '../state/model';
+export declare const checkRequestBodyBinary: (request: NetworkEntry) => boolean;

package/dist/src/ui/utils/generateCurlCommand.d.ts

@@ -1,7 +1,2 @@
-import { RequestPostData } from '../../shared/client';
-export declare function generateCurlCommand(request: {
-    method: string;
-    url: string;
-    headers?: Record<string, string>;
-    postData?: RequestPostData;
-}): string;
+import { HttpNetworkEntry, SSENetworkEntry } from '../state/model';
+export declare function generateCurlCommand(request: HttpNetworkEntry | SSENetworkEntry): string;

package/dist/src/ui/utils/generateFetchCall.d.ts

@@ -0,0 +1,2 @@
+import { HttpNetworkEntry, SSENetworkEntry } from '../state/model';
+export declare const generateFetchCall: (request: HttpNetworkEntry | SSENetworkEntry) => string;

package/dist/src/ui/utils/generateMultipartBody.d.ts

@@ -0,0 +1,4 @@
+export declare const generateMultipartBody: (formData: Record<string, unknown>) => {
+    body: string;
+    contentType: string;
+};

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

@@ -2,7 +2,6 @@ import { HttpHeaders, RequestPostData } from '../shared/client';
 /**
  * Partially emulates React Native's behavior for setting HTTP headers.
  *
- * See:
- * https://github.com/facebook/react-native/blob/de5093c88771977b58f7bec3f3ffa64a9595334e/packages/react-native/Libraries/Network/RCTNetworking.mm#L345-L349
+ * @see https://github.com/facebook/react-native/blob/de5093c88771977b58f7bec3f3ffa64a9595334e/packages/react-native/Libraries/Network/RCTNetworking.mm#L345-L349
  */
 export declare function applyReactNativeRequestHeadersLogic(headers: HttpHeaders, postData?: RequestPostData): HttpHeaders;

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

@@ -4,7 +4,6 @@ import { HttpHeaders, XHRHeaders } from '../shared/client';
  * 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
+ * @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/getHttpHeaderValueAsString.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Combines multiple HTTP header values according to RFC 7230 Section 3.2.2
+ *
+ * Per RFC 7230 Section 3.2.2: "A recipient MAY combine multiple header fields
+ * with the same field name into one 'field-name: field-value' pair, without
+ * changing the semantics of the message, by appending each subsequent field
+ * value to the combined field value in order, separated by a comma."
+ *
+ * @see https://tools.ietf.org/html/rfc7230#section-3.2.2
+ */
+export declare function getHttpHeaderValueAsString(value: string | string[]): string;

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

@@ -0,0 +1,9 @@
+export declare const isBlob: (value: unknown) => value is Blob;
+export declare const isArrayBuffer: (value: unknown) => value is ArrayBuffer | ArrayBufferView;
+export declare const isFormData: (value: unknown) => value is FormData;
+export declare const isNullOrUndefined: (value: unknown) => value is null | undefined;
+export declare const isString: (value: unknown) => value is string;
+export declare const isNumber: (value: unknown) => value is number;
+export declare const isBoolean: (value: unknown) => value is boolean;
+export declare const isObject: (value: unknown) => value is object;
+export declare const isArray: (value: unknown) => value is unknown[];

package/dist/useNetworkActivityDevTools.cjs

@@ -255,40 +255,60 @@ const applyReactNativeResponseHeadersLogic = (headers) => {
   }
   return parsedHeaders;
 };
+const isBlob = (value) => value instanceof Blob;
+const isArrayBuffer = (value) => value instanceof ArrayBuffer || ArrayBuffer.isView(value);
+const isFormData = (value) => value instanceof FormData;
+const isNullOrUndefined = (value) => value === null || value === void 0;
 const networkRequestsRegistry = getNetworkRequestsRegistry();
-function getRequestBody(body) {
-  if (body === null || body === void 0) {
-    return body;
+const getBinaryPostData = (body) => ({
+  type: "binary",
+  value: {
+    size: body.size,
+    type: body.type,
+    name: getBlobName(body)
   }
-  if (body instanceof Blob) {
-    return {
-      type: "binary",
-      value: {
-        size: body.size,
-        type: body.type,
-        name: getBlobName(body)
-      }
-    };
+});
+const getArrayBufferPostData = (body) => ({
+  type: "binary",
+  value: {
+    size: body.byteLength
   }
-  if (body instanceof ArrayBuffer || ArrayBuffer.isView(body)) {
-    return {
-      type: "binary",
-      value: {
-        size: body.byteLength
+});
+const getTextPostData = (body) => ({
+  type: "text",
+  value: safeStringify(body)
+});
+const getFormDataPostData = (body) => ({
+  type: "form-data",
+  value: getFormDataEntries(body).reduce(
+    (acc, [key, value]) => {
+      if (isBlob(value)) {
+        acc[key] = getBinaryPostData(value);
+      } else if (isArrayBuffer(value)) {
+        acc[key] = getArrayBufferPostData(value);
+      } else {
+        acc[key] = getTextPostData(value);
       }
-    };
+      return acc;
+    },
+    {}
+  )
+});
+const getRequestBody = (body) => {
+  if (isNullOrUndefined(body)) {
+    return body;
   }
-  if (body instanceof FormData) {
-    return {
-      type: "form-data",
-      value: Object.fromEntries(getFormDataEntries(body))
-    };
+  if (isBlob(body)) {
+    return getBinaryPostData(body);
   }
-  return {
-    type: "text",
-    value: safeStringify(body)
-  };
-}
+  if (isArrayBuffer(body)) {
+    return getArrayBufferPostData(body);
+  }
+  if (isFormData(body)) {
+    return getFormDataPostData(body);
+  }
+  return getTextPostData(body);
+};
 const getResponseSize = (request) => {
   try {
     const { responseType, response } = request;
@@ -732,9 +752,7 @@ const getSSEInspector = () => {
     var _a;
     const requestId = (_a = eventSource2._xhr) == null ? void 0 : _a._rozeniteRequestId;
     if (!requestId) {
-      throw new Error(
-        "No request ID found for EventSource. This should never happen!"
-      );
+      return null;
     }
     return requestId;
   };
@@ -743,6 +761,9 @@ const getSSEInspector = () => {
       SSEInterceptor.setOpenEventCallback((_, eventSource2) => {
         const sseEventSource = eventSource2;
         const requestId = getRequestId(sseEventSource);
+        if (!requestId) {
+          return;
+        }
         const sseXhr = sseEventSource._xhr;
         const event = {
           type: "sse-open",
@@ -763,6 +784,9 @@ const getSSEInspector = () => {
       SSEInterceptor.setMessageCallback((messageEvent, eventSource2) => {
         const sseEventSource = eventSource2;
         const requestId = getRequestId(sseEventSource);
+        if (!requestId) {
+          return;
+        }
         const event = {
           type: "sse-message",
           requestId,
@@ -777,6 +801,9 @@ const getSSEInspector = () => {
       SSEInterceptor.setErrorCallback((errorEvent, eventSource2) => {
         const sseEventSource = eventSource2;
         const requestId = getRequestId(sseEventSource);
+        if (!requestId) {
+          return;
+        }
         const event = {
           type: "sse-error",
           requestId,
@@ -791,6 +818,9 @@ const getSSEInspector = () => {
       SSEInterceptor.setCloseCallback((_, eventSource2) => {
         const sseEventSource = eventSource2;
         const requestId = getRequestId(sseEventSource);
+        if (!requestId) {
+          return;
+        }
         const event = {
           type: "sse-close",
           requestId,

package/dist/useNetworkActivityDevTools.js

@@ -251,40 +251,60 @@ const applyReactNativeResponseHeadersLogic = (headers) => {
   }
   return parsedHeaders;
 };
+const isBlob = (value) => value instanceof Blob;
+const isArrayBuffer = (value) => value instanceof ArrayBuffer || ArrayBuffer.isView(value);
+const isFormData = (value) => value instanceof FormData;
+const isNullOrUndefined = (value) => value === null || value === void 0;
 const networkRequestsRegistry = getNetworkRequestsRegistry();
-function getRequestBody(body) {
-  if (body === null || body === void 0) {
-    return body;
+const getBinaryPostData = (body) => ({
+  type: "binary",
+  value: {
+    size: body.size,
+    type: body.type,
+    name: getBlobName(body)
   }
-  if (body instanceof Blob) {
-    return {
-      type: "binary",
-      value: {
-        size: body.size,
-        type: body.type,
-        name: getBlobName(body)
-      }
-    };
+});
+const getArrayBufferPostData = (body) => ({
+  type: "binary",
+  value: {
+    size: body.byteLength
   }
-  if (body instanceof ArrayBuffer || ArrayBuffer.isView(body)) {
-    return {
-      type: "binary",
-      value: {
-        size: body.byteLength
+});
+const getTextPostData = (body) => ({
+  type: "text",
+  value: safeStringify(body)
+});
+const getFormDataPostData = (body) => ({
+  type: "form-data",
+  value: getFormDataEntries(body).reduce(
+    (acc, [key, value]) => {
+      if (isBlob(value)) {
+        acc[key] = getBinaryPostData(value);
+      } else if (isArrayBuffer(value)) {
+        acc[key] = getArrayBufferPostData(value);
+      } else {
+        acc[key] = getTextPostData(value);
       }
-    };
+      return acc;
+    },
+    {}
+  )
+});
+const getRequestBody = (body) => {
+  if (isNullOrUndefined(body)) {
+    return body;
   }
-  if (body instanceof FormData) {
-    return {
-      type: "form-data",
-      value: Object.fromEntries(getFormDataEntries(body))
-    };
+  if (isBlob(body)) {
+    return getBinaryPostData(body);
   }
-  return {
-    type: "text",
-    value: safeStringify(body)
-  };
-}
+  if (isArrayBuffer(body)) {
+    return getArrayBufferPostData(body);
+  }
+  if (isFormData(body)) {
+    return getFormDataPostData(body);
+  }
+  return getTextPostData(body);
+};
 const getResponseSize = (request) => {
   try {
     const { responseType, response } = request;
@@ -728,9 +748,7 @@ const getSSEInspector = () => {
     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 null;
     }
     return requestId;
   };
@@ -739,6 +757,9 @@ const getSSEInspector = () => {
       SSEInterceptor.setOpenEventCallback((_, eventSource) => {
         const sseEventSource = eventSource;
         const requestId = getRequestId(sseEventSource);
+        if (!requestId) {
+          return;
+        }
         const sseXhr = sseEventSource._xhr;
         const event = {
           type: "sse-open",
@@ -759,6 +780,9 @@ const getSSEInspector = () => {
       SSEInterceptor.setMessageCallback((messageEvent, eventSource) => {
         const sseEventSource = eventSource;
         const requestId = getRequestId(sseEventSource);
+        if (!requestId) {
+          return;
+        }
         const event = {
           type: "sse-message",
           requestId,
@@ -773,6 +797,9 @@ const getSSEInspector = () => {
       SSEInterceptor.setErrorCallback((errorEvent, eventSource) => {
         const sseEventSource = eventSource;
         const requestId = getRequestId(sseEventSource);
+        if (!requestId) {
+          return;
+        }
         const event = {
           type: "sse-error",
           requestId,
@@ -787,6 +814,9 @@ const getSSEInspector = () => {
       SSEInterceptor.setCloseCallback((_, eventSource) => {
         const sseEventSource = eventSource;
         const requestId = getRequestId(sseEventSource);
+        if (!requestId) {
+          return;
+        }
         const event = {
           type: "sse-close",
           requestId,

package/package.json

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

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

@@ -3,6 +3,9 @@ import {
   HttpMethod,
   NetworkActivityDevToolsClient,
   RequestPostData,
+  RequestTextPostData,
+  RequestBinaryPostData,
+  RequestFormDataPostData,
   XHRPostData,
 } from '../../shared/client';
 import { getContentType } from '../utils';
@@ -12,46 +15,75 @@ import { getFormDataEntries } from '../utils/getFormDataEntries';
 import { XHRInterceptor } from './xhr-interceptor';
 import { getStringSizeInBytes } from '../../utils/getStringSizeInBytes';
 import { applyReactNativeResponseHeadersLogic } from '../../utils/applyReactNativeResponseHeadersLogic';
+import {
+  isBlob,
+  isArrayBuffer,
+  isFormData,
+  isNullOrUndefined,
+} from '../../utils/typeChecks';
 
 const networkRequestsRegistry = getNetworkRequestsRegistry();
 
-function getRequestBody(body: XHRPostData): RequestPostData {
-  if (body === null || body === undefined) {
+const getBinaryPostData = (body: Blob): RequestBinaryPostData => ({
+  type: 'binary',
+  value: {
+    size: body.size,
+    type: body.type,
+    name: getBlobName(body),
+  },
+});
+
+const getArrayBufferPostData = (
+  body: ArrayBuffer | ArrayBufferView
+): RequestBinaryPostData => ({
+  type: 'binary',
+  value: {
+    size: body.byteLength,
+  },
+});
+
+const getTextPostData = (body: unknown): RequestTextPostData => ({
+  type: 'text',
+  value: safeStringify(body),
+});
+
+const getFormDataPostData = (body: FormData): RequestFormDataPostData => ({
+  type: 'form-data',
+  value: getFormDataEntries(body).reduce<RequestFormDataPostData['value']>(
+    (acc, [key, value]) => {
+      if (isBlob(value)) {
+        acc[key] = getBinaryPostData(value);
+      } else if (isArrayBuffer(value)) {
+        acc[key] = getArrayBufferPostData(value);
+      } else {
+        acc[key] = getTextPostData(value);
+      }
+
+      return acc;
+    },
+    {}
+  ),
+});
+
+const getRequestBody = (body: XHRPostData): RequestPostData => {
+  if (isNullOrUndefined(body)) {
     return body;
   }
 
-  if (body instanceof Blob) {
-    return {
-      type: 'binary',
-      value: {
-        size: body.size,
-        type: body.type,
-        name: getBlobName(body),
-      },
-    };
+  if (isBlob(body)) {
+    return getBinaryPostData(body);
   }
 
-  if (body instanceof ArrayBuffer || ArrayBuffer.isView(body)) {
-    return {
-      type: 'binary',
-      value: {
-        size: body.byteLength,
-      },
-    };
+  if (isArrayBuffer(body)) {
+    return getArrayBufferPostData(body);
   }
 
-  if (body instanceof FormData) {
-    return {
-      type: 'form-data',
-      value: Object.fromEntries(getFormDataEntries(body)),
-    };
+  if (isFormData(body)) {
+    return getFormDataPostData(body);
   }
 
-  return {
-    type: 'text',
-    value: safeStringify(body),
-  };
-}
+  return getTextPostData(body);
+};
 
 const getResponseSize = (request: XMLHttpRequest): number | null => {
   try {

package/src/react-native/sse/sse-inspector.ts

@@ -22,13 +22,14 @@ export type SSEInspector = {
 export const getSSEInspector = (): SSEInspector => {
   const eventEmitter = createNanoEvents<NanoEventsMap>();
 
-  const getRequestId = (eventSource: EventSourceWithInternals): string => {
+  const getRequestId = (
+    eventSource: EventSourceWithInternals
+  ): string | null => {
     const requestId = eventSource._xhr?._rozeniteRequestId;
 
     if (!requestId) {
-      throw new Error(
-        'No request ID found for EventSource. This should never happen!'
-      );
+      // It means that the EventSource was created before the inspector was enabled.
+      return null;
     }
 
     return requestId;
@@ -39,6 +40,11 @@ export const getSSEInspector = (): SSEInspector => {
       SSEInterceptor.setOpenEventCallback((_, eventSource) => {
         const sseEventSource = eventSource as EventSourceWithInternals;
         const requestId = getRequestId(sseEventSource);
+
+        if (!requestId) {
+          return;
+        }
+
         const sseXhr = sseEventSource._xhr as XMLHttpRequest;
 
         const event: SSEEvent = {
@@ -62,6 +68,10 @@ export const getSSEInspector = (): SSEInspector => {
         const sseEventSource = eventSource as EventSourceWithInternals;
         const requestId = getRequestId(sseEventSource);
 
+        if (!requestId) {
+          return;
+        }
+
         const event: SSEEvent = {
           type: 'sse-message',
           requestId,
@@ -78,6 +88,10 @@ export const getSSEInspector = (): SSEInspector => {
         const sseEventSource = eventSource as EventSourceWithInternals;
         const requestId = getRequestId(sseEventSource);
 
+        if (!requestId) {
+          return;
+        }
+
         const event: SSEEvent = {
           type: 'sse-error',
           requestId,
@@ -95,6 +109,10 @@ export const getSSEInspector = (): SSEInspector => {
         const sseEventSource = eventSource as EventSourceWithInternals;
         const requestId = getRequestId(sseEventSource);
 
+        if (!requestId) {
+          return;
+        }
+
         const event: SSEEvent = {
           type: 'sse-close',
           requestId,

package/src/shared/client.ts

@@ -20,13 +20,29 @@ export type XHRPostData =
   | null
   | undefined;
 
+export type RequestTextPostData = {
+  type: 'text';
+  value: string;
+};
+
+export type RequestBinaryPostData = {
+  type: 'binary';
+  value: {
+    size: number;
+    type?: string;
+    name?: string;
+  };
+};
+
+export type RequestFormDataPostData = {
+  type: 'form-data';
+  value: Record<string, RequestTextPostData | RequestBinaryPostData>;
+};
+
 export type RequestPostData =
-  | { type: 'text'; value: string }
-  | { type: 'form-data'; value: Record<string, unknown> }
-  | {
-      type: 'binary';
-      value: { size: number; type?: string; name?: string };
-    }
+  | RequestTextPostData
+  | RequestFormDataPostData
+  | RequestBinaryPostData
   | null
   | undefined;
 

package/src/ui/components/CodeBlock.tsx

@@ -4,7 +4,7 @@ import { cn } from '../utils/cn';
 export type CodeBlockProps = HTMLProps<HTMLPreElement>;
 
 const codeBlockClassNames =
-  'text-sm font-mono text-gray-300 whitespace-pre-wrap bg-gray-800 p-3 rounded border border-gray-700 overflow-x-auto wrap-anywhere';
+  'text-sm font-mono text-gray-300 whitespace-pre-wrap bg-gray-800 p-3 rounded-md border border-gray-700 overflow-x-auto wrap-anywhere';
 
 export const CodeBlock = ({
   children,