react-native-xenon 0.2.1 → 0.4.0

package/src/interceptors/WebSocketInterceptor.ts

@@ -1,14 +1,7 @@
 import { NativeEventEmitter, type EmitterSubscription } from 'react-native';
 import NativeWebSocketModule from 'react-native/Libraries/WebSocket/NativeWebSocketModule';
-import type {
-  WebSocketCloseCallback,
-  WebSocketConnectCallback,
-  WebSocketOnCloseCallback,
-  WebSocketOnErrorCallback,
-  WebSocketOnMessageCallback,
-  WebSocketOnOpenCallback,
-  WebSocketSendCallback,
-} from '../types';
+import { frozen, singleton } from '../core/utils';
+import type { WebSocketHandlers } from '../types';
 import { NetworkInterceptor } from './NetworkInterceptor';
 
 const originalWebSocketConnect = NativeWebSocketModule.connect;
@@ -16,83 +9,21 @@ const originalWebSocketSend = NativeWebSocketModule.send;
 const originalWebSocketSendBinary = NativeWebSocketModule.sendBinary;
 const originalWebSocketClose = NativeWebSocketModule.close;
 
-export default class WebSocketInterceptor extends NetworkInterceptor {
-  static readonly instance = new WebSocketInterceptor();
-
-  private constructor() {
-    super();
-  }
-
-  private connectCallback: WebSocketConnectCallback = null;
-  private sendCallback: WebSocketSendCallback = null;
-  private closeCallback: WebSocketCloseCallback = null;
-  private onOpenCallback: WebSocketOnOpenCallback = null;
-  private onMessageCallback: WebSocketOnMessageCallback = null;
-  private onErrorCallback: WebSocketOnErrorCallback = null;
-  private onCloseCallback: WebSocketOnCloseCallback = null;
-
-  setConnectCallback(callback: typeof this.connectCallback) {
-    this.connectCallback = callback;
-    return this;
-  }
-
-  setSendCallback(callback: typeof this.sendCallback) {
-    this.sendCallback = callback;
-    return this;
-  }
-
-  setCloseCallback(callback: typeof this.closeCallback) {
-    this.closeCallback = callback;
-    return this;
-  }
-
-  setOnOpenCallback(callback: typeof this.onOpenCallback) {
-    this.onOpenCallback = callback;
-    return this;
-  }
-
-  setOnMessageCallback(callback: typeof this.onMessageCallback) {
-    this.onMessageCallback = callback;
-    return this;
-  }
-
-  setOnErrorCallback(callback: typeof this.onErrorCallback) {
-    this.onErrorCallback = callback;
-    return this;
-  }
-
-  setOnCloseCallback(callback: typeof this.onCloseCallback) {
-    this.onCloseCallback = callback;
-    return this;
-  }
-
-  protected getCallbacks() {
-    const connectCallback = this.connectCallback?.bind(this);
-    const sendCallback = this.sendCallback?.bind(this);
-    const closeCallback = this.closeCallback?.bind(this);
-    const arrayBufferToString = this.arrayBufferToString?.bind(this);
-
-    return {
-      connectCallback,
-      sendCallback,
-      closeCallback,
-      arrayBufferToString,
-    };
-  }
-
-  protected clearCallbacks(): void {
-    this.connectCallback = null;
-    this.sendCallback = null;
-    this.closeCallback = null;
-    this.onOpenCallback = null;
-    this.onMessageCallback = null;
-    this.onErrorCallback = null;
-    this.onCloseCallback = null;
-  }
+@singleton
+export default class WebSocketInterceptor extends NetworkInterceptor<WebSocketHandlers> {
+  protected handlers: WebSocketHandlers = {
+    connect: null,
+    send: null,
+    close: null,
+    onOpen: null,
+    onMessage: null,
+    onError: null,
+    onClose: null,
+  };
 
   private eventEmitter: NativeEventEmitter | null = null;
   private subscriptions: EmitterSubscription[] = [];
-  private readonly timeStart: Map<number, number> = new Map();
+  private readonly startTimes: Map<number, number> = new Map();
 
   private arrayBufferToString(data?: string) {
     try {
@@ -113,24 +44,24 @@ export default class WebSocketInterceptor extends NetworkInterceptor {
 
     this.subscriptions = [
       this.eventEmitter.addListener('websocketOpen', ev => {
-        const timeStart = this.timeStart.get(ev.id);
-        const timeEnd = Date.now();
-        const duration = timeEnd - (timeStart ?? 0);
-        this.timeStart.delete(ev.id);
+        const startTime = this.startTimes.get(ev.id);
+        const endTime = Date.now();
+        const duration = endTime - (startTime ?? 0);
+        this.startTimes.delete(ev.id);
 
-        this.onOpenCallback?.(ev.id, duration);
+        this.handlers.onOpen?.(ev.id, duration);
       }),
       this.eventEmitter.addListener('websocketMessage', ev => {
-        this.onMessageCallback?.(
+        this.handlers.onMessage?.(
           ev.id,
           ev.type === 'binary' ? this.arrayBufferToString(ev.data) : ev.data,
         );
       }),
       this.eventEmitter.addListener('websocketClosed', ev => {
-        this.onCloseCallback?.(ev.id, { code: ev.code, reason: ev.reason });
+        this.handlers.onClose?.(ev.id, { code: ev.code, reason: ev.reason });
       }),
       this.eventEmitter.addListener('websocketFailed', ev => {
-        this.onErrorCallback?.(ev.id, { message: ev.message });
+        this.handlers.onError?.(ev.id, { message: ev.message });
       }),
     ];
   }
@@ -141,6 +72,7 @@ export default class WebSocketInterceptor extends NetworkInterceptor {
     this.eventEmitter = null;
   }
 
+  @frozen
   enableInterception(): void {
     if (this.isInterceptorEnabled) return;
 
@@ -148,14 +80,13 @@ export default class WebSocketInterceptor extends NetworkInterceptor {
 
     this.registerEvents();
 
-    const { connectCallback, sendCallback, closeCallback, arrayBufferToString } =
-      this.getCallbacks();
+    const { connectCallback, sendCallback, closeCallback } = this.getCallbacks();
 
-    const timeStart = this.timeStart;
+    const startTimes = this.startTimes;
     NativeWebSocketModule.connect = function (...args) {
       connectCallback?.(...args);
 
-      timeStart.set(args[3], Date.now());
+      startTimes.set(args[3], Date.now());
 
       originalWebSocketConnect.call(this, ...args);
     };
@@ -166,6 +97,7 @@ export default class WebSocketInterceptor extends NetworkInterceptor {
       originalWebSocketSend.call(this, ...args);
     };
 
+    const arrayBufferToString = this.arrayBufferToString;
     NativeWebSocketModule.sendBinary = function (base64String, socketId) {
       sendCallback?.(arrayBufferToString(base64String), socketId);
 
@@ -181,6 +113,7 @@ export default class WebSocketInterceptor extends NetworkInterceptor {
     this.isInterceptorEnabled = true;
   }
 
+  @frozen
   disableInterception(): void {
     if (!this.isInterceptorEnabled) return;
 

package/src/interceptors/XHRInterceptor.ts

@@ -1,18 +1,14 @@
+import { frozen, getHttpInterceptorId, singleton } from '../core/utils';
 import { NetworkType } from '../types';
-import { getHttpInterceptorId } from '../utils';
 import HttpInterceptor from './HttpInterceptor';
 
 const originalXHROpen = XMLHttpRequest.prototype.open;
 const originalXHRSend = XMLHttpRequest.prototype.send;
 const originalXHRSetRequestHeader = XMLHttpRequest.prototype.setRequestHeader;
 
+@singleton
 export default class XHRInterceptor extends HttpInterceptor {
-  static readonly instance = new XHRInterceptor();
-
-  private constructor() {
-    super();
-  }
-
+  @frozen
   enableInterception() {
     if (this.isInterceptorEnabled) return;
 
@@ -43,7 +39,7 @@ export default class XHRInterceptor extends HttpInterceptor {
     XMLHttpRequest.prototype.send = function (data) {
       sendCallback?.(this._interceptionId, data);
 
-      const timeStart = Date.now();
+      const startTime = Date.now();
 
       this.addEventListener?.('readystatechange', () => {
         if (!isInterceptorEnabled()) return;
@@ -52,12 +48,11 @@ export default class XHRInterceptor extends HttpInterceptor {
           const contentTypeString = this.getResponseHeader('Content-Type');
           const contentLengthString = this.getResponseHeader('Content-Length');
 
-          let responseContentType: string | undefined;
-          let responseSize: number | undefined;
-
-          if (contentTypeString) responseContentType = contentTypeString.split(';')[0];
+          const responseContentType = contentTypeString
+            ? contentTypeString.split(';')[0]
+            : undefined;
 
-          if (contentLengthString) responseSize = parseInt(contentLengthString, 10);
+          const responseSize = contentLengthString ? parseInt(contentLengthString, 10) : undefined;
 
           headerReceivedCallback?.(
             this._interceptionId,
@@ -68,8 +63,8 @@ export default class XHRInterceptor extends HttpInterceptor {
         }
 
         if (this.readyState === this.DONE) {
-          const timeEnd = Date.now();
-          const duration = timeEnd - timeStart;
+          const endTime = Date.now();
+          const duration = endTime - startTime;
 
           responseCallback?.(
             this._interceptionId,
@@ -89,6 +84,7 @@ export default class XHRInterceptor extends HttpInterceptor {
     this.isInterceptorEnabled = true;
   }
 
+  @frozen
   disableInterception() {
     if (!this.isInterceptorEnabled) return;
 

package/src/theme/icons.ts

@@ -0,0 +1,9 @@
+const icons = Object.freeze({
+  bug: require('../assets/icons/bug.png'),
+  delete: require('../assets/icons/delete.png'),
+  hide: require('../assets/icons/hide.png'),
+  move: require('../assets/icons/move.png'),
+  record: require('../assets/icons/record.png'),
+});
+
+export default icons;

package/src/types/common.ts

@@ -1,5 +1,3 @@
-import type { Dispatch, SetStateAction } from 'react';
-
 export enum NetworkType {
   XHR = 'xhr',
   Fetch = 'fetch',
@@ -11,6 +9,8 @@ export enum DebuggerPanel {
   Console = 'console',
 }
 
+export type AnyFunction = (...args: any[]) => any;
+
 export type ID = string | undefined;
 
 export interface NetworkRequest {
@@ -19,10 +19,10 @@ export interface NetworkRequest {
   duration?: number;
 }
 
-export type DebuggerVisibility = 'hidden' | 'bubble' | 'panel';
-
-export type DebuggerPosition = 'top' | 'bottom';
-
-export type SetState<T> = Dispatch<SetStateAction<T>>;
-
 export type NetworkTab = 'headers' | 'queryStringParameters' | 'body' | 'response' | 'messages';
+
+export interface DebuggerState {
+  visibility: 'hidden' | 'bubble' | 'panel';
+  position: 'top' | 'bottom';
+  selectedPanel: DebuggerPanel | null;
+}

package/src/types/console.ts

@@ -2,3 +2,7 @@ export interface LogMessage {
   type: string;
   values: any[];
 }
+
+export interface ConsoleHandlers {
+  callback: ((type: string, args: any[]) => void) | null;
+}

package/src/types/http.ts

@@ -14,31 +14,27 @@ export interface HttpRequest extends NetworkRequest {
   responseType?: string;
 }
 
-export type HttpOpenCallback =
-  | ((id: ID, type: HttpRequest['type'], method: string, url: string) => void)
-  | null;
-
-export type HttpRequestHeaderCallback = ((id: ID, header: string, value: string) => void) | null;
-
-export type HttpSendCallback = ((id: ID, data?: any) => void) | null;
-
-export type HttpHeaderReceivedCallback =
-  | ((
-      id: ID,
-      responseContentType: string | undefined,
-      responseSize: number | undefined,
-      responseHeaders: string,
-    ) => void)
-  | null;
-
-export type HttpResponseCallback =
-  | ((
-      id: ID,
-      status: number | undefined,
-      timeout: number | undefined,
-      duration: number,
-      response: any,
-      responseURL: string | undefined,
-      responseType: string | undefined,
-    ) => void)
-  | null;
+export interface HttpHandlers {
+  open: ((id: ID, type: HttpRequest['type'], method: string, url: string) => void) | null;
+  requestHeader: ((id: ID, header: string, value: string) => void) | null;
+  send: ((id: ID, data?: any) => void) | null;
+  headerReceived:
+    | ((
+        id: ID,
+        responseContentType: string | undefined,
+        responseSize: number | undefined,
+        responseHeaders: string,
+      ) => void)
+    | null;
+  response:
+    | ((
+        id: ID,
+        status: number | undefined,
+        timeout: number | undefined,
+        duration: number,
+        response: any,
+        responseURL: string | undefined,
+        responseType: string | undefined,
+      ) => void)
+    | null;
+}

package/src/types/websocket.ts

@@ -13,29 +13,19 @@ export interface WebSocketRequest extends NetworkRequest {
   serverClose?: { code?: number; reason?: string };
 }
 
-export type WebSocketConnectCallback =
-  | ((
-      url: string,
-      protocols?: WebSocketRequest['protocols'],
-      options?: WebSocketRequest['options'],
-      socketId?: number,
-    ) => void)
-  | null;
-
-export type WebSocketSendCallback = ((data: string, socketId: number) => void) | null;
-
-export type WebSocketCloseCallback =
-  | ((code: number, reason: string, socketId: number) => void)
-  | null;
-
-export type WebSocketOnOpenCallback = ((socketId: number, duration: number) => void) | null;
-
-export type WebSocketOnMessageCallback = ((socketId: number, message: any) => void) | null;
-
-export type WebSocketOnErrorCallback =
-  | ((socketId: number, error: WebSocketRequest['serverError']) => void)
-  | null;
-
-export type WebSocketOnCloseCallback =
-  | ((socketId: number, data: WebSocketRequest['serverClose']) => void)
-  | null;
+export interface WebSocketHandlers {
+  connect:
+    | ((
+        url: string,
+        protocols?: WebSocketRequest['protocols'],
+        options?: WebSocketRequest['options'],
+        socketId?: number,
+      ) => void)
+    | null;
+  send: ((data: string, socketId: number) => void) | null;
+  close: ((code: number, reason: string, socketId: number) => void) | null;
+  onOpen: ((socketId: number, duration: number) => void) | null;
+  onMessage: ((socketId: number, message: any) => void) | null;
+  onError: ((socketId: number, error: WebSocketRequest['serverError']) => void) | null;
+  onClose: ((socketId: number, data: WebSocketRequest['serverClose']) => void) | null;
+}

package/src/ui/Xenon.tsx

@@ -3,18 +3,23 @@ import {
   createRef,
   memo,
   useImperativeHandle,
+  useMemo,
   useRef,
-  useState,
   type NamedExoticComponent,
 } from 'react';
-import { Animated, SafeAreaView, StyleSheet, useWindowDimensions, View } from 'react-native';
-import colors from '../colors';
-import MainContext, { type MainContextValue } from '../contexts/MainContext';
+import { Animated, StyleSheet, useWindowDimensions } from 'react-native';
+import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
+import { useImmer } from 'use-immer';
+import MainContext from '../contexts/MainContext';
+import { detailsData } from '../core/data';
+import { getVerticalSafeMargin } from '../core/utils';
 import { useConsoleInterceptor, useNetworkInterceptor } from '../hooks';
-import { DebuggerPanel, type DebuggerPosition, type DebuggerVisibility } from '../types';
+import colors from '../theme/colors';
+import { DebuggerPanel, type DebuggerState } from '../types';
 import { Bubble, ConsolePanel, DebuggerHeader, DetailsViewer, NetworkPanel } from './components';
 
 interface XenonComponentMethods {
+  isVisible(): boolean;
   show(): void;
   hide(): void;
 }
@@ -23,6 +28,7 @@ interface XenonComponentProps {
   autoInspectNetworkEnabled?: boolean;
   autoInspectConsoleEnabled?: boolean;
   bubbleSize?: number;
+  idleBubbleOpacity?: number;
 }
 
 interface ReactNativeXenon extends XenonComponentMethods {
@@ -34,19 +40,25 @@ enableMapSet();
 const rootRef = createRef<XenonComponentMethods>();
 
 const XenonComponent = memo<XenonComponentProps>(
-  ({ autoInspectNetworkEnabled = true, autoInspectConsoleEnabled = true, bubbleSize = 40 }) => {
-    const { width: screenWidth, height: screenHeight } = useWindowDimensions();
-    const verticalSafeMargin = screenHeight / 8;
-
-    const pan = useRef(new Animated.ValueXY({ x: 0, y: verticalSafeMargin }));
-
-    const detailsData: MainContextValue['detailsData'] = useRef(null);
-
-    const [debuggerVisibility, setDebuggerVisibility] = useState<DebuggerVisibility>('hidden');
-
-    const [debuggerPosition, setDebuggerPosition] = useState<DebuggerPosition>('bottom');
+  ({
+    autoInspectNetworkEnabled = true,
+    autoInspectConsoleEnabled = true,
+    bubbleSize = 40,
+    idleBubbleOpacity = 0.5,
+  }) => {
+    const { width, height } = useWindowDimensions();
+    const pan = useRef(new Animated.ValueXY({ x: 0, y: getVerticalSafeMargin(height) }));
+
+    const [debuggerState, setDebuggerState] = useImmer<DebuggerState>({
+      visibility: 'hidden',
+      position: 'bottom',
+      selectedPanel: DebuggerPanel.Network,
+    });
 
-    const [panelSelected, setPanelSelected] = useState<DebuggerPanel | null>(DebuggerPanel.Network);
+    const detailsShown = useMemo(
+      () => !debuggerState.selectedPanel && !!detailsData.value,
+      [debuggerState.selectedPanel],
+    );
 
     const networkInterceptor = useNetworkInterceptor({
       autoEnabled: autoInspectNetworkEnabled,
@@ -56,72 +68,70 @@ const XenonComponent = memo<XenonComponentProps>(
       autoEnabled: autoInspectConsoleEnabled,
     });
 
-    useImperativeHandle(
-      rootRef,
-      () => ({
+    useImperativeHandle(rootRef, () => {
+      const changeVisibility = (condition: boolean, value: DebuggerState['visibility']) => {
+        if (!condition) return;
+
+        setDebuggerState(draft => {
+          draft.visibility = value;
+        });
+      };
+
+      return {
+        isVisible() {
+          return debuggerState.visibility !== 'hidden';
+        },
         show() {
-          setDebuggerVisibility('bubble');
+          changeVisibility(!this.isVisible(), 'bubble');
         },
         hide() {
-          setDebuggerVisibility('hidden');
+          changeVisibility(this.isVisible(), 'hidden');
         },
-      }),
-      [],
-    );
-
-    let content;
-
-    switch (debuggerVisibility) {
-      case 'bubble':
-        content = (
-          <View style={styles.bubbleBackdrop}>
-            <Bubble bubbleSize={bubbleSize} pan={pan} />
-          </View>
-        );
-        break;
-      case 'panel':
-        content = (
-          <SafeAreaView
-            style={[
-              styles.container,
-              // eslint-disable-next-line react-native/no-inline-styles
-              {
-                [debuggerPosition]: 0,
-                height: Math.min(screenWidth, screenHeight) * 0.75,
-              },
-            ]}
-          >
-            <DebuggerHeader />
-
-            {panelSelected === DebuggerPanel.Network && <NetworkPanel />}
-            {panelSelected === DebuggerPanel.Console && <ConsolePanel />}
-
-            {!panelSelected && !!detailsData.current && <DetailsViewer />}
-          </SafeAreaView>
-        );
-        break;
-      default:
-        content = null;
-    }
+      };
+    }, [debuggerState.visibility, setDebuggerState]);
+
+    const renderContent = () => {
+      switch (debuggerState.visibility) {
+        case 'bubble':
+          return (
+            <Bubble
+              bubbleSize={bubbleSize}
+              idleBubbleOpacity={idleBubbleOpacity}
+              pan={pan}
+              screenWidth={width}
+              screenHeight={height}
+            />
+          );
+        case 'panel':
+          return (
+            <SafeAreaProvider
+              style={[
+                styles.container,
+                // eslint-disable-next-line react-native/no-inline-styles
+                {
+                  [debuggerState.position]: 0,
+                  height: Math.min(width, height) * 0.75,
+                },
+              ]}
+            >
+              <SafeAreaView style={styles.safeArea}>
+                <DebuggerHeader detailsShown={detailsShown} />
+                {debuggerState.selectedPanel === DebuggerPanel.Network && <NetworkPanel />}
+                {debuggerState.selectedPanel === DebuggerPanel.Console && <ConsolePanel />}
+                {detailsShown && <DetailsViewer />}
+              </SafeAreaView>
+            </SafeAreaProvider>
+          );
+        default:
+          return null;
+      }
+    };
 
     return (
       <MainContext.Provider
-        value={{
-          debuggerVisibility,
-          setDebuggerVisibility,
-          debuggerPosition,
-          setDebuggerPosition,
-          panelSelected,
-          setPanelSelected,
-          networkInterceptor,
-          logInterceptor,
-          detailsData,
-          screenWidth,
-          screenHeight,
-          verticalSafeMargin,
-        }}
+        value={{ debuggerState, setDebuggerState, networkInterceptor, logInterceptor }}
       >
-        {content}
+        {renderContent()}
       </MainContext.Provider>
     );
   },
@@ -136,16 +146,17 @@ const styles = StyleSheet.create({
     zIndex: 9999,
     backgroundColor: colors.lightGray,
   },
-  bubbleBackdrop: {
+  safeArea: {
     flex: 1,
-    ...StyleSheet.absoluteFillObject,
-    pointerEvents: 'box-none',
   },
 });
 
 XenonComponent.displayName = 'Xenon';
 
 const Xenon: ReactNativeXenon = {
+  isVisible() {
+    return rootRef.current?.isVisible() ?? false;
+  },
   show() {
     rootRef.current?.show();
   },