react-native-xenon 0.3.0 → 0.4.0

package/src/interceptors/NetworkInterceptor.ts

@@ -1,6 +1,21 @@
 import Interceptor from './Interceptor';
 
+type Callbacks<T> = { [K in keyof T as `${string & K}Callback`]: T[K] };
+
 export abstract class NetworkInterceptor<T extends Object> extends Interceptor<T> {
-  protected abstract getCallbacks(): any;
-  protected abstract clearCallbacks(): void;
+  protected getCallbacks(): Callbacks<T> {
+    const callbacks = {} as Callbacks<T>;
+
+    for (const key in this.handlers) {
+      (callbacks as any)[`${key}Callback`] = this.handlers[key as keyof T];
+    }
+
+    return callbacks;
+  }
+
+  protected clearCallbacks(): void {
+    for (const key in this.handlers) {
+      (this.handlers as any)[key] = null;
+    }
+  }
 }

package/src/interceptors/WebSocketInterceptor.ts

@@ -1,17 +1,16 @@
 import { NativeEventEmitter, type EmitterSubscription } from 'react-native';
 import NativeWebSocketModule from 'react-native/Libraries/WebSocket/NativeWebSocketModule';
+import { frozen, singleton } from '../core/utils';
 import type { WebSocketHandlers } from '../types';
 import { NetworkInterceptor } from './NetworkInterceptor';
-import { frozen } from '../utils';
 
 const originalWebSocketConnect = NativeWebSocketModule.connect;
 const originalWebSocketSend = NativeWebSocketModule.send;
 const originalWebSocketSendBinary = NativeWebSocketModule.sendBinary;
 const originalWebSocketClose = NativeWebSocketModule.close;
 
+@singleton
 export default class WebSocketInterceptor extends NetworkInterceptor<WebSocketHandlers> {
-  static readonly instance = new WebSocketInterceptor();
-
   protected handlers: WebSocketHandlers = {
     connect: null,
     send: null,
@@ -22,32 +21,9 @@ export default class WebSocketInterceptor extends NetworkInterceptor<WebSocketHa
     onClose: null,
   };
 
-  private constructor() {
-    super();
-  }
-
-  protected getCallbacks() {
-    const connect = this.handlers.connect;
-    const send = this.handlers.send;
-    const close = this.handlers.close;
-    const arrayBufferToString = this.arrayBufferToString;
-
-    return { connect, send, close, arrayBufferToString };
-  }
-
-  protected clearCallbacks(): void {
-    this.handlers.connect = null;
-    this.handlers.send = null;
-    this.handlers.close = null;
-    this.handlers.onOpen = null;
-    this.handlers.onMessage = null;
-    this.handlers.onError = null;
-    this.handlers.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 {
@@ -68,10 +44,10 @@ export default class WebSocketInterceptor extends NetworkInterceptor<WebSocketHa
 
     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.handlers.onOpen?.(ev.id, duration);
       }),
@@ -104,31 +80,32 @@ export default class WebSocketInterceptor extends NetworkInterceptor<WebSocketHa
 
     this.registerEvents();
 
-    const { connect, send, close, arrayBufferToString } = this.getCallbacks();
+    const { connectCallback, sendCallback, closeCallback } = this.getCallbacks();
 
-    const timeStart = this.timeStart;
+    const startTimes = this.startTimes;
     NativeWebSocketModule.connect = function (...args) {
-      connect?.(...args);
+      connectCallback?.(...args);
 
-      timeStart.set(args[3], Date.now());
+      startTimes.set(args[3], Date.now());
 
       originalWebSocketConnect.call(this, ...args);
     };
 
     NativeWebSocketModule.send = function (...args) {
-      send?.(...args);
+      sendCallback?.(...args);
 
       originalWebSocketSend.call(this, ...args);
     };
 
+    const arrayBufferToString = this.arrayBufferToString;
     NativeWebSocketModule.sendBinary = function (base64String, socketId) {
-      send?.(arrayBufferToString(base64String), socketId);
+      sendCallback?.(arrayBufferToString(base64String), socketId);
 
       originalWebSocketSendBinary.call(this, base64String, socketId);
     };
 
     NativeWebSocketModule.close = function (code, reason, socketId) {
-      close?.(code, reason, socketId);
+      closeCallback?.(code, reason, socketId);
 
       originalWebSocketClose.call(this, code, reason, socketId);
     };

package/src/interceptors/XHRInterceptor.ts

@@ -1,18 +1,13 @@
+import { frozen, getHttpInterceptorId, singleton } from '../core/utils';
 import { NetworkType } from '../types';
-import { frozen, 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;
@@ -44,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;
@@ -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,

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/http.ts

@@ -14,39 +14,27 @@ export interface HttpRequest extends NetworkRequest {
   responseType?: string;
 }
 
-type HttpOpenCallback =
-  | ((id: ID, type: HttpRequest['type'], method: string, url: string) => void)
-  | null;
-
-type HttpRequestHeaderCallback = ((id: ID, header: string, value: string) => void) | null;
-
-type HttpSendCallback = ((id: ID, data?: any) => void) | null;
-
-type HttpHeaderReceivedCallback =
-  | ((
-      id: ID,
-      responseContentType: string | undefined,
-      responseSize: number | undefined,
-      responseHeaders: string,
-    ) => void)
-  | null;
-
-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: HttpOpenCallback;
-  requestHeader: HttpRequestHeaderCallback;
-  send: HttpSendCallback;
-  headerReceived: HttpHeaderReceivedCallback;
-  response: HttpResponseCallback;
+  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,37 +13,19 @@ export interface WebSocketRequest extends NetworkRequest {
   serverClose?: { code?: number; reason?: string };
 }
 
-type WebSocketConnectCallback =
-  | ((
-      url: string,
-      protocols?: WebSocketRequest['protocols'],
-      options?: WebSocketRequest['options'],
-      socketId?: number,
-    ) => void)
-  | null;
-
-type WebSocketSendCallback = ((data: string, socketId: number) => void) | null;
-
-type WebSocketCloseCallback = ((code: number, reason: string, socketId: number) => void) | null;
-
-type WebSocketOnOpenCallback = ((socketId: number, duration: number) => void) | null;
-
-type WebSocketOnMessageCallback = ((socketId: number, message: any) => void) | null;
-
-type WebSocketOnErrorCallback =
-  | ((socketId: number, error: WebSocketRequest['serverError']) => void)
-  | null;
-
-type WebSocketOnCloseCallback =
-  | ((socketId: number, data: WebSocketRequest['serverClose']) => void)
-  | null;
-
 export interface WebSocketHandlers {
-  connect: WebSocketConnectCallback;
-  send: WebSocketSendCallback;
-  close: WebSocketCloseCallback;
-  onOpen: WebSocketOnOpenCallback;
-  onMessage: WebSocketOnMessageCallback;
-  onError: WebSocketOnErrorCallback;
-  onClose: WebSocketOnCloseCallback;
+  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,15 +3,19 @@ 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 {
@@ -24,6 +28,7 @@ interface XenonComponentProps {
   autoInspectNetworkEnabled?: boolean;
   autoInspectConsoleEnabled?: boolean;
   bubbleSize?: number;
+  idleBubbleOpacity?: number;
 }
 
 interface ReactNativeXenon extends XenonComponentMethods {
@@ -35,14 +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');
-    const [panelSelected, setPanelSelected] = useState<DebuggerPanel | null>(DebuggerPanel.Network);
+  ({
+    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 detailsShown = useMemo(
+      () => !debuggerState.selectedPanel && !!detailsData.value,
+      [debuggerState.selectedPanel],
+    );
 
     const networkInterceptor = useNetworkInterceptor({
       autoEnabled: autoInspectNetworkEnabled,
@@ -52,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 debuggerVisibility !== 'hidden';
+          return debuggerState.visibility !== 'hidden';
         },
         show() {
-          if (!this.isVisible()) setDebuggerVisibility('bubble');
+          changeVisibility(!this.isVisible(), 'bubble');
         },
         hide() {
-          if (this.isVisible()) setDebuggerVisibility('hidden');
+          changeVisibility(this.isVisible(), 'hidden');
         },
-      }),
-      [debuggerVisibility],
-    );
+      };
+    }, [debuggerState.visibility, setDebuggerState]);
 
-    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;
-    }
+    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>
     );
   },
@@ -132,10 +146,8 @@ const styles = StyleSheet.create({
     zIndex: 9999,
     backgroundColor: colors.lightGray,
   },
-  bubbleBackdrop: {
+  safeArea: {
     flex: 1,
-    ...StyleSheet.absoluteFillObject,
-    pointerEvents: 'box-none',
   },
 });