react-native-xenon 0.1.0 → 0.2.1

package/src/ui/Xenon.tsx

@@ -1,9 +1,18 @@
-import { createRef, useImperativeHandle, useRef, useState, type JSX } from 'react';
+import { enableMapSet } from 'immer';
+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';
-import MainContext, { type MainContextValue } from '../contexts/MainContext';
 
 interface XenonComponentMethods {
   show(): void;
@@ -11,112 +20,112 @@ interface XenonComponentMethods {
 }
 
 interface XenonComponentProps {
-  autoInspectNetwork?: boolean;
-  autoInspectConsole?: boolean;
+  autoInspectNetworkEnabled?: boolean;
+  autoInspectConsoleEnabled?: boolean;
   bubbleSize?: number;
 }
 
 interface ReactNativeXenon extends XenonComponentMethods {
-  Component(props: XenonComponentProps): JSX.Element;
+  Component: NamedExoticComponent<XenonComponentProps>;
 }
 
+enableMapSet();
+
 const rootRef = createRef<XenonComponentMethods>();
 
-function XenonComponent({
-  autoInspectNetwork = true,
-  autoInspectConsole = 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: autoInspectNetwork,
-  });
-
-  const logInterceptor = useConsoleInterceptor({
-    autoEnabled: autoInspectConsole,
-  });
-
-  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;
-  }
-
-  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,
+      () => ({
+        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;
+    }
+
+    return (
+      <MainContext.Provider
+        value={{
+          debuggerVisibility,
+          setDebuggerVisibility,
+          debuggerPosition,
+          setDebuggerPosition,
+          panelSelected,
+          setPanelSelected,
+          networkInterceptor,
+          logInterceptor,
+          detailsData,
+          screenWidth,
+          screenHeight,
+          verticalSafeMargin,
+        }}
+      >
+        {content}
+      </MainContext.Provider>
+    );
+  },
+);
 
 const styles = StyleSheet.create({
   container: {
@@ -125,7 +134,7 @@ const styles = StyleSheet.create({
     top: undefined,
     bottom: undefined,
     zIndex: 9999,
-    backgroundColor: '#AAAAAA',
+    backgroundColor: colors.lightGray,
   },
   bubbleBackdrop: {
     flex: 1,

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;
@@ -73,7 +75,7 @@ export default function Bubble({ bubbleSize, pan }: BubbleProps) {
       ]}
     >
       <Image
-        source={require('../../../assets/code.png')}
+        source={icons.code}
         style={{
           width: bubbleSize * 0.75,
           height: bubbleSize * 0.75,
@@ -85,7 +87,7 @@ export default function Bubble({ bubbleSize, pan }: BubbleProps) {
 
 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 {
@@ -7,9 +7,16 @@ import {
   type NetworkTab,
   type WebSocketRequest,
 } from '../../../types';
-import { convertToCurl, formatMethod, formatStatusCode, limitChar } from '../../../utils';
+import {
+  convertToCurl,
+  formatRequestDuration,
+  formatRequestMethod,
+  formatRequestStatusCode,
+  limitChar,
+} from '../../../utils';
 import NetworkDetailsHeader from '../headers/NetworkRequestDetailsHeader';
 import NetworkRequestDetailsItem from '../items/NetworkRequestDetailsItem';
+import colors from '../../../colors';
 
 interface NetworkRequestDetailsProps {
   item: HttpRequest | WebSocketRequest;
@@ -20,9 +27,9 @@ export default function NetworkRequestDetails({ item }: NetworkRequestDetailsPro
 
   const isWebSocket = item.type === NetworkType.WS;
 
-  const requestUrl = new URL(isWebSocket ? item.uri : item.url);
+  const requestUrl = new URL(item.url);
 
-  const headerShown = (isWebSocket ? 'uri' : 'url') in item;
+  const headerShown = !!item.url;
   const queryStringParametersShown = !!requestUrl.search;
   const bodyShown = !isWebSocket && !!item.body;
   const responseShown = !isWebSocket && !!item.response;
@@ -41,17 +48,22 @@ export default function NetworkRequestDetails({ item }: NetworkRequestDetailsPro
       <>
         <NetworkRequestDetailsItem label="Request Type" content={item.type} />
 
+        <NetworkRequestDetailsItem label="Request URL" content={item.url} />
+
         <NetworkRequestDetailsItem
-          label="Request URL"
-          content={isWebSocket ? item.uri : item.url}
+          label="Request Method"
+          content={formatRequestMethod(isWebSocket ? undefined : item.method)}
         />
 
         <NetworkRequestDetailsItem
-          label="Request Method"
-          content={formatMethod(isWebSocket ? undefined : item.method)}
+          label="Duration"
+          content={formatRequestDuration(item.duration)}
         />
 
-        <NetworkRequestDetailsItem label="Status Code" content={formatStatusCode(item.status)} />
+        <NetworkRequestDetailsItem
+          label="Status Code"
+          content={formatRequestStatusCode(item.status)}
+        />
 
         {isWebSocket && (
           <NetworkRequestDetailsItem label="Headers" content={limitChar(item.options?.headers)} />
@@ -76,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) {
@@ -126,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,9 +1,18 @@
 import { StyleSheet, Text, View } from 'react-native';
+import colors from '../../../colors';
 
 export default function NetworkPanelHeader() {
   return (
     <View style={styles.container}>
-      <View style={[styles.headerColumn, styles.headerMainColumn]}>
+      <View style={styles.headerColumn}>
+        <Text numberOfLines={1} style={styles.itemText}>
+          Method
+        </Text>
+      </View>
+
+      <View style={styles.divider} />
+
+      <View style={[styles.headerColumn, styles.headerNameColumn]}>
         <Text numberOfLines={1} style={styles.itemText}>
           Name
         </Text>
@@ -11,9 +20,9 @@ export default function NetworkPanelHeader() {
 
       <View style={styles.divider} />
 
-      <View style={styles.headerColumn}>
+      <View style={[styles.headerColumn, styles.headerDurationColumn]}>
         <Text numberOfLines={1} style={styles.itemText}>
-          Method
+          Duration
         </Text>
       </View>
 
@@ -33,12 +42,14 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
-    backgroundColor: '#888888',
+    backgroundColor: colors.gray,
     borderRadius: 4,
   },
-  headerMainColumn: {
-    flex: 7,
-    flexShrink: 1,
+  headerNameColumn: {
+    flex: 5,
+  },
+  headerDurationColumn: {
+    flex: 2,
   },
   headerColumn: {
     flex: 1.5,
@@ -49,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/index.ts

@@ -1,5 +1,5 @@
 export { default as Bubble } from './bubble/Bubble';
+export { default as DetailsViewer } from './details/DetailsViewer';
 export { default as DebuggerHeader } from './headers/DebuggerHeader';
-export { default as NetworkPanel } from './panels/NetworkPanel';
 export { default as ConsolePanel } from './panels/ConsolePanel';
-export { default as DetailsViewer } from './details/DetailsViewer';
+export { default as NetworkPanel } from './panels/NetworkPanel';

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,
   },
 });

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

@@ -1,4 +1,5 @@
 import { Image, StyleSheet, Text, TouchableOpacity, type ImageRequireSource } from 'react-native';
+import colors from '../../../colors';
 
 interface DebuggerHeaderItemProps {
   content?: ImageRequireSource | string;
@@ -7,26 +8,31 @@ interface DebuggerHeaderItemProps {
   onPress: () => void;
 }
 
-export default function DebuggerHeaderItem(props: DebuggerHeaderItemProps) {
+export default function DebuggerHeaderItem({
+  content,
+  isLabel,
+  isActive,
+  onPress,
+}: DebuggerHeaderItemProps) {
   return (
     <TouchableOpacity
-      onPress={props.onPress}
+      onPress={onPress}
       activeOpacity={0.8}
       style={[
         styles.container,
-        props.isLabel
-          ? props.isActive
+        isLabel
+          ? isActive
             ? styles.activeLabelContainer
             : styles.labelContainer
-          : props.isActive
+          : isActive
             ? styles.activeContainer
             : undefined,
       ]}
     >
-      {typeof props.content === 'string' ? (
-        <Text style={styles.title}>{props.content}</Text>
+      {typeof content === 'string' ? (
+        <Text style={styles.title}>{content}</Text>
       ) : (
-        <Image source={props.content} style={styles.icon} />
+        <Image source={content} style={styles.icon} />
       )}
     </TouchableOpacity>
   );
@@ -37,7 +43,7 @@ const styles = StyleSheet.create({
     paddingVertical: 4,
     paddingHorizontal: 8,
     borderRadius: 4,
-    backgroundColor: '#888888',
+    backgroundColor: colors.gray,
     borderWidth: 1,
     borderColor: 'transparent',
   },
@@ -47,16 +53,16 @@ const styles = StyleSheet.create({
   activeLabelContainer: {
     backgroundColor: 'transparent',
     borderWidth: 1,
-    borderColor: '#000000',
+    borderColor: colors.black,
   },
   activeContainer: {
-    backgroundColor: '#ef4444',
+    backgroundColor: colors.red,
   },
   title: {
     fontSize: 14,
     lineHeight: 17,
     fontWeight: '500',
-    color: '#000000',
+    color: colors.black,
   },
   icon: {
     width: 17,