@rozenite/network-activity-plugin 1.0.0-alpha.1 → 1.0.0-alpha.10

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

@@ -0,0 +1,86 @@
+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: HttpMethod;
+  headers: HttpHeaders;
+  postData?: string;
+};
+
+export type Response = {
+  url: string;
+  status: number;
+  statusText: string;
+  headers: HttpHeaders;
+  contentType: string;
+  size: number;
+  responseTime: Timestamp;
+};
+
+export type Initiator = {
+  type: string;
+  url?: string;
+  lineNumber?: number;
+  columnNumber?: number;
+};
+
+export type ResourceType = 'XHR' | 'Fetch' | 'Other';
+
+export type NetworkActivityEventMap = {
+  // Control events
+  'network-enable': unknown;
+  'network-disable': unknown;
+
+  // Network request events
+  'request-sent': {
+    requestId: RequestId;
+    request: Request;
+    timestamp: Timestamp;
+    initiator: Initiator;
+    type: ResourceType;
+  };
+
+  'response-received': {
+    requestId: RequestId;
+    timestamp: Timestamp;
+    type: ResourceType;
+    response: Response;
+  };
+
+  'request-completed': {
+    requestId: RequestId;
+    timestamp: Timestamp;
+    duration: number;
+    size: number;
+    ttfb: number;
+  };
+
+  'request-failed': {
+    requestId: RequestId;
+    timestamp: Timestamp;
+    type: ResourceType;
+    error: string;
+    canceled: boolean;
+  };
+
+  'get-response-body': {
+    requestId: RequestId;
+  };
+
+  'response-body': {
+    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/App.tsx

@@ -0,0 +1,19 @@
+import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
+import { NetworkActivityEventMap } from '../shared/client';
+
+import { InspectorView } from './views/InspectorView';
+import { LoadingView } from './views/LoadingView';
+
+import './globals.css';
+
+export default function NetworkActivityPanel() {
+  const client = useRozeniteDevToolsClient<NetworkActivityEventMap>({
+    pluginId: '@rozenite/network-activity-plugin',
+  });
+
+  if (!client) {
+    return <LoadingView />;
+  }
+
+  return <InspectorView client={client} />;
+}

package/src/ui/components/Badge.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+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',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };

package/src/ui/components/Button.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+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',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-gray-700 hover:text-gray-100',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

package/src/ui/components/Input.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { cn } from '../utils/cn';
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = 'Input';
+
+export { Input };