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

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,12 +1,17 @@
 import { RozeniteDevToolsClient } from '@rozenite/plugin-bridge';
+import { WebSocketEventMap } from './websocket-events';
+import { SSEEventMap } from './sse-events';
+
+export type HttpHeaders = Record<string, string>;
+export type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD';
 
 export type RequestId = string;
 export type Timestamp = number;
 
 export type Request = {
   url: string;
-  method: string;
-  headers: Record<string, string>;
+  method: HttpMethod;
+  headers: HttpHeaders;
   postData?: string;
 };
 
@@ -14,7 +19,7 @@ export type Response = {
   url: string;
   status: number;
   statusText: string;
-  headers: Record<string, string>;
+  headers: HttpHeaders;
   contentType: string;
   size: number;
   responseTime: Timestamp;
@@ -74,7 +79,8 @@ export type NetworkActivityEventMap = {
     requestId: RequestId;
     body: string | null;
   };
-};
+} & WebSocketEventMap &
+  SSEEventMap;
 
 export type NetworkActivityDevToolsClient =
   RozeniteDevToolsClient<NetworkActivityEventMap>;

package/src/shared/sse-events.ts

@@ -0,0 +1,44 @@
+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;
+  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/Badge.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from '../utils';
+import { cn } from '../utils/cn';
 
 const badgeVariants = cva(
   'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',

package/src/ui/components/Button.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from '../utils';
+import { cn } from '../utils/cn';
 
 const buttonVariants = cva(
   'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',

package/src/ui/components/Input.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { cn } from '../utils';
+import { cn } from '../utils/cn';
 
 const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
   ({ className, type, ...props }, ref) => {

package/src/ui/components/JsonTree.tsx

@@ -1,4 +1,5 @@
 import { JSONTree } from 'react-json-tree';
+import { JsonTreeCopyableItem } from './JsonTreeCopyableItem';
 
 export type JsonTreeProps = {
   data: unknown;
@@ -32,6 +33,18 @@ export const JsonTree = ({
       }}
       invertTheme={false}
       shouldExpandNodeInitially={shouldExpandNodeInitially}
+      // For objects and arrays
+      getItemString={(_type, data, itemType, itemString) => (
+        <JsonTreeCopyableItem getCopyableValue={() => JSON.stringify(data, null, 2)}>
+          <>{itemType} {itemString}</>
+        </JsonTreeCopyableItem>
+      )}
+      // For primitives
+      valueRenderer={(valueAsString, value) => (
+        <JsonTreeCopyableItem getCopyableValue={() => String(value)} className="ml-2">
+          {String(valueAsString)}
+        </JsonTreeCopyableItem>
+      )}
     />
   );
 };

package/src/ui/components/JsonTreeCopyableItem.tsx

@@ -0,0 +1,33 @@
+import { Check, Copy } from "lucide-react";
+import { MouseEvent, PropsWithChildren } from "react";
+import { useCopyToClipboard } from "../hooks/useCopyToClipboard";
+import { cn } from "../utils/cn";
+
+type JsonTreeCopyableItemProps = PropsWithChildren<{
+  getCopyableValue: () => string;
+  className?: string;
+}>;
+
+export const JsonTreeCopyableItem = ({ children, getCopyableValue, className }: JsonTreeCopyableItemProps) => {
+  const { isCopied, copy } = useCopyToClipboard();
+  
+  const handleCopy = (event: MouseEvent) => {
+    event.stopPropagation();
+
+    copy(getCopyableValue());
+  }
+
+  const Icon = isCopied ? Check : Copy;
+
+  return (
+    <span className={cn('inline-block group', className)}>
+      {children}
+      <div 
+        className="inline-block cursor-pointer opacity-0 group-hover:opacity-100 text-gray-500 hover:text-gray-300 transition-all p-2 -m-2 ml-0 translate-y-0.75"
+        onClick={handleCopy}
+      >
+        <Icon className='h-4 w-4' />
+      </div>
+    </span>
+  );
+}