react-native-xenon 0.2.0 → 0.3.0

package/src/interceptors/XHRInterceptor.ts

@@ -1,5 +1,5 @@
 import { NetworkType } from '../types';
-import { getHttpInterceptorId } from '../utils';
+import { frozen, getHttpInterceptorId } from '../utils';
 import HttpInterceptor from './HttpInterceptor';
 
 const originalXHROpen = XMLHttpRequest.prototype.open;
@@ -7,12 +7,13 @@ const originalXHRSend = XMLHttpRequest.prototype.send;
 const originalXHRSetRequestHeader = XMLHttpRequest.prototype.setRequestHeader;
 
 export default class XHRInterceptor extends HttpInterceptor {
-  static instance = new XHRInterceptor();
+  static readonly instance = new XHRInterceptor();
 
   private constructor() {
     super();
   }
 
+  @frozen
   enableInterception() {
     if (this.isInterceptorEnabled) return;
 
@@ -52,12 +53,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;
+          const responseContentType = contentTypeString
+            ? contentTypeString.split(';')[0]
+            : undefined;
 
-          if (contentTypeString) responseContentType = contentTypeString.split(';')[0];
-
-          if (contentLengthString) responseSize = parseInt(contentLengthString, 10);
+          const responseSize = contentLengthString ? parseInt(contentLengthString, 10) : undefined;
 
           headerReceivedCallback?.(
             this._interceptionId,
@@ -89,6 +89,7 @@ export default class XHRInterceptor extends HttpInterceptor {
     this.isInterceptorEnabled = true;
   }
 
+  @frozen
   disableInterception() {
     if (!this.isInterceptorEnabled) return;
 

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,15 +14,15 @@ export interface HttpRequest extends NetworkRequest {
   responseType?: string;
 }
 
-export type HttpOpenCallback =
+type HttpOpenCallback =
   | ((id: ID, type: HttpRequest['type'], method: string, url: string) => void)
   | null;
 
-export type HttpRequestHeaderCallback = ((id: ID, header: string, value: string) => void) | null;
+type HttpRequestHeaderCallback = ((id: ID, header: string, value: string) => void) | null;
 
-export type HttpSendCallback = ((id: ID, data?: any) => void) | null;
+type HttpSendCallback = ((id: ID, data?: any) => void) | null;
 
-export type HttpHeaderReceivedCallback =
+type HttpHeaderReceivedCallback =
   | ((
       id: ID,
       responseContentType: string | undefined,
@@ -31,7 +31,7 @@ export type HttpHeaderReceivedCallback =
     ) => void)
   | null;
 
-export type HttpResponseCallback =
+type HttpResponseCallback =
   | ((
       id: ID,
       status: number | undefined,
@@ -42,3 +42,11 @@ export type HttpResponseCallback =
       responseType: string | undefined,
     ) => void)
   | null;
+
+export interface HttpHandlers {
+  open: HttpOpenCallback;
+  requestHeader: HttpRequestHeaderCallback;
+  send: HttpSendCallback;
+  headerReceived: HttpHeaderReceivedCallback;
+  response: HttpResponseCallback;
+}

package/src/types/websocket.ts

@@ -13,7 +13,7 @@ export interface WebSocketRequest extends NetworkRequest {
   serverClose?: { code?: number; reason?: string };
 }
 
-export type WebSocketConnectCallback =
+type WebSocketConnectCallback =
   | ((
       url: string,
       protocols?: WebSocketRequest['protocols'],
@@ -22,20 +22,28 @@ export type WebSocketConnectCallback =
     ) => void)
   | null;
 
-export type WebSocketSendCallback = ((data: string, socketId: number) => void) | null;
+type WebSocketSendCallback = ((data: string, socketId: number) => void) | null;
 
-export type WebSocketCloseCallback =
-  | ((code: number, reason: string, socketId: number) => void)
-  | null;
+type WebSocketCloseCallback = ((code: number, reason: string, socketId: number) => void) | null;
 
-export type WebSocketOnOpenCallback = ((socketId: number, duration: number) => void) | null;
+type WebSocketOnOpenCallback = ((socketId: number, duration: number) => void) | null;
 
-export type WebSocketOnMessageCallback = ((socketId: number, message: any) => void) | null;
+type WebSocketOnMessageCallback = ((socketId: number, message: any) => void) | null;
 
-export type WebSocketOnErrorCallback =
+type WebSocketOnErrorCallback =
   | ((socketId: number, error: WebSocketRequest['serverError']) => void)
   | null;
 
-export type WebSocketOnCloseCallback =
+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;
+}

package/src/ui/Xenon.tsx

@@ -1,12 +1,21 @@
 import { enableMapSet } from 'immer';
-import { createRef, useImperativeHandle, useRef, useState, type JSX } from 'react';
+import {
+  createRef,
+  memo,
+  useImperativeHandle,
+  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 { useConsoleInterceptor, useNetworkInterceptor } from '../hooks';
 import { DebuggerPanel, type DebuggerPosition, type DebuggerVisibility } from '../types';
 import { Bubble, ConsolePanel, DebuggerHeader, DetailsViewer, NetworkPanel } from './components';
 
 interface XenonComponentMethods {
+  isVisible(): boolean;
   show(): void;
   hide(): void;
 }
@@ -18,107 +27,101 @@ interface XenonComponentProps {
 }
 
 interface ReactNativeXenon extends XenonComponentMethods {
-  Component(props: XenonComponentProps): JSX.Element;
+  Component: NamedExoticComponent<XenonComponentProps>;
 }
 
 enableMapSet();
-const rootRef = createRef<XenonComponentMethods>();
-
-function XenonComponent({
-  autoInspectNetworkEnabled = true,
-  autoInspectConsoleEnabled = true,
-  bubbleSize = 40,
-}: XenonComponentProps) {
-  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);
-
-  const networkInterceptor = useNetworkInterceptor({
-    autoEnabled: autoInspectNetworkEnabled,
-  });
-
-  const logInterceptor = useConsoleInterceptor({
-    autoEnabled: autoInspectConsoleEnabled,
-  });
 
-  useImperativeHandle(
-    rootRef,
-    () => ({
-      show() {
-        setDebuggerVisibility('bubble');
-      },
-      hide() {
-        setDebuggerVisibility('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;
-  }
+const rootRef = createRef<XenonComponentMethods>();
 
-  return (
-    <MainContext.Provider
-      value={{
-        debuggerVisibility,
-        setDebuggerVisibility,
-        debuggerPosition,
-        setDebuggerPosition,
-        panelSelected,
-        setPanelSelected,
-        networkInterceptor,
-        logInterceptor,
-        detailsData,
-        screenWidth,
-        screenHeight,
-        verticalSafeMargin,
-      }}
-    >
-      {content}
-    </MainContext.Provider>
-  );
-}
+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);
+
+    const networkInterceptor = useNetworkInterceptor({
+      autoEnabled: autoInspectNetworkEnabled,
+    });
+
+    const logInterceptor = useConsoleInterceptor({
+      autoEnabled: autoInspectConsoleEnabled,
+    });
+
+    useImperativeHandle(
+      rootRef,
+      () => ({
+        isVisible() {
+          return debuggerVisibility !== 'hidden';
+        },
+        show() {
+          if (!this.isVisible()) setDebuggerVisibility('bubble');
+        },
+        hide() {
+          if (this.isVisible()) setDebuggerVisibility('hidden');
+        },
+      }),
+      [debuggerVisibility],
+    );
+
+    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;
+    }
+
+    return (
+      <MainContext.Provider
+        value={{
+          debuggerVisibility,
+          setDebuggerVisibility,
+          debuggerPosition,
+          setDebuggerPosition,
+          panelSelected,
+          setPanelSelected,
+          networkInterceptor,
+          logInterceptor,
+          detailsData,
+          screenWidth,
+          screenHeight,
+          verticalSafeMargin,
+        }}
+      >
+        {content}
+      </MainContext.Provider>
+    );
+  },
+);
 
 const styles = StyleSheet.create({
   container: {
@@ -127,7 +130,7 @@ const styles = StyleSheet.create({
     top: undefined,
     bottom: undefined,
     zIndex: 9999,
-    backgroundColor: '#AAAAAA',
+    backgroundColor: colors.lightGray,
   },
   bubbleBackdrop: {
     flex: 1,
@@ -139,6 +142,9 @@ const styles = StyleSheet.create({
 XenonComponent.displayName = 'Xenon';
 
 const Xenon: ReactNativeXenon = {
+  isVisible() {
+    return rootRef.current?.isVisible() ?? false;
+  },
   show() {
     rootRef.current?.show();
   },

package/src/ui/components/bubble/Bubble.tsx

@@ -7,6 +7,8 @@ import {
   type PanResponderGestureState,
 } from 'react-native';
 import { MainContext } from '../../../contexts';
+import icons from '../../../icons';
+import colors from '../../../colors';
 
 interface BubbleProps {
   bubbleSize: number;
@@ -14,6 +16,8 @@ interface BubbleProps {
 }
 
 export default function Bubble({ bubbleSize, pan }: BubbleProps) {
+  const iconSize = bubbleSize * 0.65;
+
   const { setDebuggerVisibility, screenWidth, screenHeight, verticalSafeMargin } =
     useContext(MainContext)!;
 
@@ -72,20 +76,14 @@ export default function Bubble({ bubbleSize, pan }: BubbleProps) {
         },
       ]}
     >
-      <Image
-        source={require('../../../assets/code.png')}
-        style={{
-          width: bubbleSize * 0.75,
-          height: bubbleSize * 0.75,
-        }}
-      />
+      <Image source={icons.bug} style={{ width: iconSize, height: iconSize }} />
     </Animated.View>
   );
 }
 
 const styles = StyleSheet.create({
   bubble: {
-    backgroundColor: '#AAAAAA',
+    backgroundColor: colors.lightGray,
     position: 'absolute',
     justifyContent: 'center',
     alignItems: 'center',

package/src/ui/components/details/LogMessageDetails.tsx

@@ -1,6 +1,7 @@
 import { ScrollView, StyleSheet, Text } from 'react-native';
 import type { LogMessage } from '../../../types';
 import { formatLogMessage } from '../../../utils';
+import colors from '../../../colors';
 
 interface LogMessageDetailsProps {
   item: LogMessage;
@@ -21,6 +22,6 @@ const styles = StyleSheet.create({
   },
   divider: {
     height: 1,
-    backgroundColor: '#888888',
+    backgroundColor: colors.gray,
   },
 });

package/src/ui/components/details/NetworkRequestDetails.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState, type JSX } from 'react';
+import { useRef, useState, type JSX, type ReactNode } from 'react';
 import { ScrollView, StyleSheet } from 'react-native';
 import { URL } from 'react-native-url-polyfill';
 import {
@@ -16,6 +16,7 @@ import {
 } from '../../../utils';
 import NetworkDetailsHeader from '../headers/NetworkRequestDetailsHeader';
 import NetworkRequestDetailsItem from '../items/NetworkRequestDetailsItem';
+import colors from '../../../colors';
 
 interface NetworkRequestDetailsProps {
   item: HttpRequest | WebSocketRequest;
@@ -87,19 +88,15 @@ export default function NetworkRequestDetails({ item }: NetworkRequestDetailsPro
   }
 
   if (queryStringParametersShown && !content.current.queryStringParameters) {
-    const queryStringParameters: Record<'name' | 'value', string>[] = [];
+    const queryStringParameters: ReactNode[] = [];
 
     requestUrl.searchParams.forEach((value, name) => {
-      queryStringParameters.push({ name, value });
+      queryStringParameters.push(
+        <NetworkRequestDetailsItem key={name} label={name} content={value} />,
+      );
     });
 
-    content.current.queryStringParameters = (
-      <>
-        {queryStringParameters.map(({ name, value }, index) => (
-          <NetworkRequestDetailsItem key={index} label={name} content={value} />
-        ))}
-      </>
-    );
+    content.current.queryStringParameters = <>{queryStringParameters}</>;
   }
 
   if (bodyShown && !content.current.body) {
@@ -137,15 +134,15 @@ const styles = StyleSheet.create({
   },
   divider: {
     height: 1,
-    backgroundColor: '#888888',
+    backgroundColor: colors.gray,
   },
   text: {
     fontSize: 14,
-    color: '#000000',
+    color: colors.black,
   },
   label: {
     fontSize: 14,
     fontWeight: 'bold',
-    color: '#000000',
+    color: colors.black,
   },
 });

package/src/ui/components/headers/DebuggerHeader.tsx

@@ -3,6 +3,8 @@ import { ScrollView, StyleSheet, View } from 'react-native';
 import { MainContext } from '../../../contexts';
 import { DebuggerPanel } from '../../../types';
 import DebuggerHeaderItem from '../items/DebuggerHeaderItem';
+import icons from '../../../icons';
+import colors from '../../../colors';
 
 export default function DebuggerHeader() {
   const {
@@ -49,12 +51,9 @@ export default function DebuggerHeader() {
       contentContainerStyle={styles.contentContainer}
       showsHorizontalScrollIndicator={false}
     >
-      <DebuggerHeaderItem onPress={hideDebugger} content={require('../../../assets/hide.png')} />
+      <DebuggerHeaderItem onPress={hideDebugger} content={icons.hide} />
 
-      <DebuggerHeaderItem
-        onPress={toggleDebuggerPosition}
-        content={require('../../../assets/move.png')}
-      />
+      <DebuggerHeaderItem onPress={toggleDebuggerPosition} content={icons.move} />
 
       <DebuggerHeaderItem
         isLabel
@@ -66,12 +65,12 @@ export default function DebuggerHeader() {
       <DebuggerHeaderItem
         onPress={toggleNetworkInterception}
         isActive={networkInterceptor.isInterceptorEnabled}
-        content={require('../../../assets/record.png')}
+        content={icons.record}
       />
 
       <DebuggerHeaderItem
         onPress={networkInterceptor.clearAllNetworkRequests}
-        content={require('../../../assets/delete.png')}
+        content={icons.delete}
       />
 
       <View style={styles.divider} />
@@ -86,13 +85,10 @@ export default function DebuggerHeader() {
       <DebuggerHeaderItem
         onPress={toggleLogInterception}
         isActive={logInterceptor.isInterceptorEnabled}
-        content={require('../../../assets/record.png')}
+        content={icons.record}
       />
 
-      <DebuggerHeaderItem
-        onPress={logInterceptor.clearAllLogMessages}
-        content={require('../../../assets/delete.png')}
-      />
+      <DebuggerHeaderItem onPress={logInterceptor.clearAllLogMessages} content={icons.delete} />
     </ScrollView>
   );
 }
@@ -107,6 +103,6 @@ const styles = StyleSheet.create({
   },
   divider: {
     width: 1,
-    backgroundColor: '#888888',
+    backgroundColor: colors.gray,
   },
 });

package/src/ui/components/headers/NetworkPanelHeader.tsx

@@ -1,4 +1,5 @@
 import { StyleSheet, Text, View } from 'react-native';
+import colors from '../../../colors';
 
 export default function NetworkPanelHeader() {
   return (
@@ -11,7 +12,7 @@ export default function NetworkPanelHeader() {
 
       <View style={styles.divider} />
 
-      <View style={[styles.headerColumn, styles.headerMainColumn]}>
+      <View style={[styles.headerColumn, styles.headerNameColumn]}>
         <Text numberOfLines={1} style={styles.itemText}>
           Name
         </Text>
@@ -19,7 +20,7 @@ export default function NetworkPanelHeader() {
 
       <View style={styles.divider} />
 
-      <View style={styles.headerColumn}>
+      <View style={[styles.headerColumn, styles.headerDurationColumn]}>
         <Text numberOfLines={1} style={styles.itemText}>
           Duration
         </Text>
@@ -38,15 +39,17 @@ export default function NetworkPanelHeader() {
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
+    marginHorizontal: 8,
     flexDirection: 'row',
     alignItems: 'center',
-    backgroundColor: '#888888',
+    backgroundColor: colors.gray,
     borderRadius: 4,
   },
-  headerMainColumn: {
-    flex: 5.5,
-    flexShrink: 1,
+  headerNameColumn: {
+    flex: 5,
+  },
+  headerDurationColumn: {
+    flex: 2,
   },
   headerColumn: {
     flex: 1.5,
@@ -57,10 +60,10 @@ const styles = StyleSheet.create({
   divider: {
     height: 16,
     width: 1,
-    backgroundColor: '#888888',
+    backgroundColor: colors.gray,
   },
   itemText: {
     fontSize: 14,
-    color: '#000000',
+    color: colors.black,
   },
 });

package/src/ui/components/items/ConsolePanelItem.tsx

@@ -1,6 +1,7 @@
 import { StyleSheet, Text, TouchableOpacity } from 'react-native';
 import type { LogMessage } from '../../../types';
 import { formatLogMessage } from '../../../utils';
+import colors from '../../../colors';
 
 interface ConsolePanelItemProps extends LogMessage {
   onPress: () => void;
@@ -22,7 +23,7 @@ const styles = StyleSheet.create({
     padding: 8,
   },
   text: {
-    color: '#000000',
+    color: colors.black,
     fontSize: 14,
   },
 });