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

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

@@ -0,0 +1,180 @@
+import { createNanoEvents } from 'nanoevents';
+import { getWebSocketInterceptor } from './websocket-interceptor';
+import {
+  WebSocketEvent,
+  WebSocketEventMap,
+} from '../../shared/websocket-events';
+
+type NanoEventsMap = {
+  [K in keyof WebSocketEventMap]: (data: WebSocketEventMap[K]) => void;
+};
+
+export type WebSocketInspector = {
+  enable: () => void;
+  disable: () => void;
+  isEnabled: () => boolean;
+  dispose: () => void;
+  on: <TEventType extends keyof WebSocketEventMap>(
+    event: TEventType,
+    callback: (data: WebSocketEventMap[TEventType]) => void
+  ) => () => void;
+};
+
+export const getWebSocketInspector = (): WebSocketInspector => {
+  const eventEmitter = createNanoEvents<NanoEventsMap>();
+  const socketUrlMap = new Map<number, string>();
+  const webSocketInterceptor = getWebSocketInterceptor();
+
+  return {
+    enable: () => {
+      webSocketInterceptor.setConnectCallback(
+        (
+          url: string,
+          protocols: string[] | null,
+          options: string[],
+          socketId: number
+        ) => {
+          socketUrlMap.set(socketId, url);
+          const event: WebSocketEvent = {
+            type: 'websocket-connect',
+            url,
+            socketId,
+            timestamp: Date.now(),
+            protocols,
+            options,
+          };
+          eventEmitter.emit('websocket-connect', event);
+        }
+      );
+
+      webSocketInterceptor.setCloseCallback(
+        (code: number | null, reason: string | null, socketId: number) => {
+          const url = socketUrlMap.get(socketId);
+
+          if (!url) {
+            return;
+          }
+
+          const event: WebSocketEvent = {
+            type: 'websocket-close',
+            url,
+            socketId,
+            timestamp: Date.now(),
+            code: code || 0,
+            reason: reason || undefined,
+          };
+          eventEmitter.emit('websocket-close', event);
+          socketUrlMap.delete(socketId);
+        }
+      );
+
+      webSocketInterceptor.setOnMessageCallback(
+        (data: string, socketId: number) => {
+          const url = socketUrlMap.get(socketId);
+
+          if (!url) {
+            return;
+          }
+
+          const event: WebSocketEvent = {
+            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: string, socketId: number) => {
+          const url = socketUrlMap.get(socketId);
+
+          if (!url) {
+            return;
+          }
+
+          const event: WebSocketEvent = {
+            type: 'websocket-error',
+            url,
+            socketId,
+            timestamp: Date.now(),
+            error,
+          };
+          eventEmitter.emit('websocket-error', event);
+        }
+      );
+
+      webSocketInterceptor.setSendCallback((data: string, socketId: number) => {
+        const url = socketUrlMap.get(socketId);
+
+        if (!url) {
+          return;
+        }
+
+        const event: WebSocketEvent = {
+          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: number) => {
+        const url = socketUrlMap.get(socketId);
+
+        if (!url) {
+          return;
+        }
+
+        const event: WebSocketEvent = {
+          type: 'websocket-open',
+          url,
+          socketId,
+          timestamp: Date.now(),
+        };
+        eventEmitter.emit('websocket-open', event);
+      });
+
+      webSocketInterceptor.setOnCloseCallback(
+        (error: { code: number; reason?: string }, socketId: number) => {
+          const url = socketUrlMap.get(socketId);
+
+          if (!url) {
+            return;
+          }
+
+          const event: WebSocketEvent = {
+            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: <TEventType extends keyof WebSocketEventMap>(
+      event: TEventType,
+      callback: (data: WebSocketEventMap[TEventType]) => void
+    ) => eventEmitter.on(event, callback as NanoEventsMap[TEventType]),
+  };
+};

package/src/react-native/websocket/websocket-interceptor.d.ts

@@ -0,0 +1,4 @@
+declare module 'react-native/Libraries/WebSocket/WebSocketInterceptor' {
+  const WebSocketInterceptor: unknown;
+  export default WebSocketInterceptor;
+}

package/src/react-native/websocket/websocket-interceptor.ts

@@ -0,0 +1,166 @@
+import { Platform } from 'react-native';
+import WebSocketInterceptor from 'react-native/Libraries/WebSocket/WebSocketInterceptor';
+
+export interface WebSocketInterceptor {
+  /**
+   * Invoked when RCTWebSocketModule.close(...) is called.
+   */
+  setCloseCallback(
+    callback: (
+      code: number | null,
+      reason: string | null,
+      socketId: number
+    ) => void
+  ): void;
+
+  /**
+   * Invoked when RCTWebSocketModule.send(...) or sendBinary(...) is called.
+   */
+  setSendCallback(callback: (data: string, socketId: number) => void): void;
+
+  /**
+   * Invoked when RCTWebSocketModule.connect(...) is called.
+   */
+  setConnectCallback(
+    callback: (
+      url: string,
+      protocols: string[] | null,
+      options: string[],
+      socketId: number
+    ) => void
+  ): void;
+
+  /**
+   * Invoked when event "websocketOpen" happens.
+   */
+  setOnOpenCallback(callback: (socketId: number) => void): void;
+
+  /**
+   * Invoked when event "websocketMessage" happens.
+   */
+  setOnMessageCallback(
+    callback: (data: string, socketId: number) => void
+  ): void;
+
+  /**
+   * Invoked when event "websocketFailed" happens.
+   */
+  setOnErrorCallback(callback: (error: string, socketId: number) => void): void;
+
+  /**
+   * Invoked when event "websocketClosed" happens.
+   */
+  setOnCloseCallback(
+    callback: (
+      error: { code: number; reason?: string },
+      socketId: number
+    ) => void
+  ): void;
+
+  isInterceptorEnabled(): boolean;
+  enableInterception(): void;
+  disableInterception(): void;
+}
+
+export interface WebSocketInterceptorPreRN079 {
+  /**
+   * Invoked when RCTWebSocketModule.close(...) is called.
+   */
+  setCloseCallback(
+    callback: (
+      code: number | null,
+      reason: string | null,
+      socketId: number
+    ) => void
+  ): void;
+
+  /**
+   * Invoked when RCTWebSocketModule.send(...) or sendBinary(...) is called.
+   */
+  setSendCallback(callback: (data: string, socketId: number) => void): void;
+
+  /**
+   * Invoked when RCTWebSocketModule.connect(...) is called.
+   */
+  setConnectCallback(
+    callback: (
+      url: string,
+      protocols: string[] | null,
+      options: string[],
+      socketId: number
+    ) => void
+  ): void;
+
+  /**
+   * Invoked when event "websocketOpen" happens.
+   */
+  setOnOpenCallback(callback: (socketId: number) => void): void;
+
+  /**
+   * Invoked when event "websocketMessage" happens.
+   */
+  setOnMessageCallback(
+    callback: (socketId: number, data: string) => void
+  ): void;
+
+  /**
+   * Invoked when event "websocketFailed" happens.
+   */
+  setOnErrorCallback(callback: (socketId: number, error: string) => void): void;
+
+  /**
+   * Invoked when event "websocketClosed" happens.
+   */
+  setOnCloseCallback(
+    callback: (
+      socketId: number,
+      error: { code: number; reason?: string }
+    ) => void
+  ): void;
+
+  isInterceptorEnabled(): boolean;
+  enableInterception(): void;
+  disableInterception(): void;
+}
+
+export const getWebSocketInterceptor = (): WebSocketInterceptor => {
+  /**
+   * Note: RN 0.79 changed the order of the arguments.
+   * @see https://github.com/facebook/react-native/commit/d2adb976abebcb0f38750903d98fbb5a3f50924b
+   */
+
+  if (Platform.constants.reactNativeVersion.minor >= 79) {
+    return WebSocketInterceptor as WebSocketInterceptor;
+  } else {
+    const WebSocketInterceptorPreRN079 =
+      WebSocketInterceptor as WebSocketInterceptorPreRN079;
+
+    return {
+      ...WebSocketInterceptorPreRN079,
+      setOnMessageCallback: (
+        callback: (data: string, socketId: number) => void
+      ) => {
+        WebSocketInterceptorPreRN079.setOnMessageCallback((socketId, data) => {
+          callback(data, socketId);
+        });
+      },
+      setOnCloseCallback: (
+        callback: (
+          error: { code: number; reason?: string },
+          socketId: number
+        ) => void
+      ) => {
+        WebSocketInterceptorPreRN079.setOnCloseCallback((error, socketId) => {
+          callback(socketId, error);
+        });
+      },
+      setOnErrorCallback: (
+        callback: (error: string, socketId: number) => void
+      ) => {
+        WebSocketInterceptorPreRN079.setOnErrorCallback((error, socketId) => {
+          callback(socketId, error);
+        });
+      },
+    } as WebSocketInterceptor;
+  }
+};

package/src/shared/client.ts

@@ -1,15 +1,68 @@
 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;
 
+export type XHRPostData =
+  | string
+  | Blob
+  | FormData
+  | ArrayBuffer
+  | ArrayBufferView
+  | unknown
+  | 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 =
+  | RequestTextPostData
+  | RequestFormDataPostData
+  | RequestBinaryPostData
+  | 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: string;
+  method: HttpMethod;
   headers: HttpHeaders;
-  postData?: string;
+  postData?: RequestPostData;
 };
 
 export type Response = {
@@ -18,7 +71,7 @@ export type Response = {
   statusText: string;
   headers: HttpHeaders;
   contentType: string;
-  size: number;
+  size: number | null;
   responseTime: Timestamp;
 };
 
@@ -31,11 +84,26 @@ export type Initiator = {
 
 export type ResourceType = 'XHR' | 'Fetch' | 'Other';
 
+export type RequestOverride = {
+  status?: number;
+  body?: string;
+};
+
+export type NetworkActivityClientUISettings = {
+  showUrlAsName?: boolean;
+};
+
 export type NetworkActivityEventMap = {
   // Control events
   'network-enable': unknown;
   'network-disable': unknown;
 
+  // Client UI settings events
+  'get-client-ui-settings': unknown;
+  'client-ui-settings': {
+    settings?: NetworkActivityClientUISettings;
+  };
+
   // Network request events
   'request-sent': {
     requestId: RequestId;
@@ -56,7 +124,7 @@ export type NetworkActivityEventMap = {
     requestId: RequestId;
     timestamp: Timestamp;
     duration: number;
-    size: number;
+    size: number | null;
     ttfb: number;
   };
 
@@ -76,7 +144,12 @@ export type NetworkActivityEventMap = {
     requestId: RequestId;
     body: string | null;
   };
-};
+
+  'set-overrides': {
+    overrides: [string, RequestOverride][];
+  };
+} & WebSocketEventMap &
+  SSEEventMap;
 
 export type NetworkActivityDevToolsClient =
   RozeniteDevToolsClient<NetworkActivityEventMap>;

package/src/shared/sse-events.ts

@@ -0,0 +1,47 @@
+import type { Response } from './client';
+
+export type SSEConnectionStatus = 'connecting' | 'open' | 'closed';
+export type SSERequestId = string;
+
+export type SSEOpenEvent = {
+  type: 'sse-open';
+  requestId: SSERequestId;
+  timestamp: number;
+  response: Response;
+};
+
+export type SSEMessageEvent = {
+  type: 'sse-message';
+  requestId: SSERequestId;
+  timestamp: number;
+  payload: {
+    type: string;
+    data: string;
+  };
+};
+
+export type SSEErrorEvent = {
+  type: 'sse-error';
+  requestId: SSERequestId;
+  timestamp: number;
+  error: {
+    type: 'error' | 'timeout' | 'exception';
+    message: string;
+  };
+};
+
+export type SSECloseEvent = {
+  type: 'sse-close';
+  requestId: SSERequestId;
+  timestamp: number;
+};
+
+export type SSEEvent =
+  | SSEOpenEvent
+  | SSEMessageEvent
+  | SSEErrorEvent
+  | SSECloseEvent;
+
+export type SSEEventMap = {
+  [K in SSEEvent['type']]: Extract<SSEEvent, { type: K }>;
+};

package/src/shared/websocket-events.ts

@@ -0,0 +1,79 @@
+export type WebSocketMessageType = 'text' | 'binary';
+
+export type WebSocketConnectionStatus =
+  | 'connecting'
+  | 'open'
+  | 'closing'
+  | 'closed';
+
+export type WebSocketConnectEvent = {
+  type: 'websocket-connect';
+  url: string;
+  socketId: number;
+  timestamp: number;
+  protocols: string[] | null;
+  options: string[];
+};
+
+export type WebSocketOpenEvent = {
+  type: 'websocket-open';
+  url: string;
+  socketId: number;
+  timestamp: number;
+};
+
+export type WebSocketCloseEvent = {
+  type: 'websocket-close';
+  url: string;
+  socketId: number;
+  timestamp: number;
+  code: number;
+  reason?: string;
+};
+
+export type WebSocketMessageSentEvent = {
+  type: 'websocket-message-sent';
+  url: string;
+  socketId: number;
+  timestamp: number;
+  data: string;
+  messageType: WebSocketMessageType;
+};
+
+export type WebSocketMessageReceivedEvent = {
+  type: 'websocket-message-received';
+  url: string;
+  socketId: number;
+  timestamp: number;
+  data: string;
+  messageType: WebSocketMessageType;
+};
+
+export type WebSocketErrorEvent = {
+  type: 'websocket-error';
+  url: string;
+  socketId: number;
+  timestamp: number;
+  error: string;
+};
+
+export type WebSocketConnectionStatusChangedEvent = {
+  type: 'websocket-connection-status-changed';
+  url: string;
+  socketId: number;
+  timestamp: number;
+  status: WebSocketConnectionStatus;
+};
+
+export type WebSocketEvent =
+  | WebSocketConnectEvent
+  | WebSocketOpenEvent
+  | WebSocketCloseEvent
+  | WebSocketMessageSentEvent
+  | WebSocketMessageReceivedEvent
+  | WebSocketErrorEvent
+  | WebSocketConnectionStatusChangedEvent;
+
+export type WebSocketEventMap = {
+  [K in WebSocketEvent['type']]: Extract<WebSocketEvent, { type: K }>;
+};

package/src/ui/components/Button.tsx

@@ -21,6 +21,7 @@ const buttonVariants = cva(
       },
       size: {
         default: 'h-10 px-4 py-2',
+        xs: 'h-7 rounded-md px-2 text-xs',
         sm: 'h-9 rounded-md px-3',
         lg: 'h-11 rounded-md px-8',
         icon: 'h-10 w-10',

package/src/ui/components/CodeBlock.tsx

@@ -0,0 +1,19 @@
+import { HTMLProps } from 'react';
+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-md border border-gray-700 overflow-x-auto wrap-anywhere';
+
+export const CodeBlock = ({
+  children,
+  className,
+  ...props
+}: CodeBlockProps) => {
+  return (
+    <pre className={cn(codeBlockClassNames, className)} {...props}>
+      {children}
+    </pre>
+  );
+};

package/src/ui/components/CodeEditor.tsx

@@ -0,0 +1,26 @@
+import { forwardRef } from 'react';
+
+export type CodeEditorProps = {
+  data: string | undefined;
+  onInput?: (event: React.FormEvent<HTMLPreElement>) => void;
+};
+
+export const CodeEditor = forwardRef<HTMLPreElement, CodeEditorProps>(
+  ({ data, onInput }, ref) => {
+    return (
+      <pre
+        ref={ref}
+        contentEditable
+        suppressContentEditableWarning
+        className={
+          'w-full 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 ring-offset-blue-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'
+        }
+        onInput={onInput}
+      >
+        {data}
+      </pre>
+    );
+  }
+);
+
+CodeEditor.displayName = 'CodeEditor';