react-native-xenon 1.0.2 → 2.0.0

package/src/ui/Xenon.tsx

@@ -1,18 +1,16 @@
 import { enableMapSet } from 'immer';
-import { createRef, memo, useImperativeHandle, useMemo, type ReactNode } from 'react';
+import { createRef, memo, useImperativeHandle, useMemo, type JSX, type ReactNode } from 'react';
 import { Platform, StyleSheet, useWindowDimensions, View } from 'react-native';
-import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { FullWindowOverlay } from 'react-native-screens';
 import { useImmer } from 'use-immer';
-import MainContext from '../contexts/MainContext';
+import { MainContext } from '../contexts';
 import refs, { DebuggerVisibility } from '../core/refs';
 import { useConsoleInterceptor, useNetworkInterceptor } from '../hooks';
 import colors from '../theme/colors';
 import { type DebuggerState } from '../types';
-import { Bubble } from './components';
-import IndexedStack from './components/common/IndexedStack';
-import Header from './components/headers/Header';
-import Panel from './components/panels/Panel';
+import { Bubble, Header, IndexedStack, Panel, SearchBar } from './components';
+import SafeArea from './components/common/SafeArea';
 
 namespace Xenon {
   interface Methods {
@@ -22,12 +20,41 @@ namespace Xenon {
   }
 
   interface Props {
-    disabled?: boolean;
+    /**
+     * Determines whether the network inspector is automatically enabled upon initialization.
+     * @default true
+     */
     autoInspectNetworkEnabled?: boolean;
+    /**
+     * Determines whether the console inspector is automatically enabled upon initialization.
+     * @default true
+     */
     autoInspectConsoleEnabled?: boolean;
+    /**
+     * Defines the size of the interactive bubble used in the UI.
+     * @default 40
+     */
     bubbleSize?: number;
+    /**
+     * Defines the opacity level of the bubble when it is idle.
+     * @default 0.5
+     */
     idleBubbleOpacity?: number;
-    children?: ReactNode;
+    /**
+     * Domains to include in network interception. Defaults to all domains.
+     * @default undefined
+     * @example ['example1.com', 'api.example2.com']
+     */
+    includeDomains?: string[];
+  }
+
+  interface WrapperProps extends Props {
+    /**
+     * If true, completely disables the debugger by rendering only the children components without any debugging functionality.
+     * @default false
+     */
+    disabled?: boolean;
+    children: ReactNode;
   }
 
   enableMapSet();
@@ -38,9 +65,9 @@ namespace Xenon {
       flex: 1,
       ...StyleSheet.absoluteFillObject,
       pointerEvents: 'box-none',
+      ...(Platform.OS === 'android' ? { zIndex: 9999 } : {}),
       top: undefined,
       bottom: undefined,
-      ...(Platform.OS === 'android' ? { zIndex: 9999 } : {}),
       backgroundColor: colors.lightGray,
       borderBottomColor: colors.gray,
       borderBottomWidth: StyleSheet.hairlineWidth,
@@ -50,8 +77,22 @@ namespace Xenon {
     },
   });
 
+  /**
+   * Checks whether the debugger is currently visible.
+   * @returns `true` if the debugger is currently visible, otherwise `false`.
+   */
   export const isVisible = () => ref.current?.isVisible() ?? false;
+
+  /**
+   * Makes the debugger visible. If it is already visible, this method has no additional effect.
+   * @returns `void`
+   */
   export const show = (): void => ref.current?.show();
+
+  /**
+   * Hides the debugger. If it is already hidden, this method has no additional effect.
+   * @returns `void`
+   */
   export const hide = (): void => ref.current?.hide();
 
   const Debugger = memo(
@@ -60,12 +101,14 @@ namespace Xenon {
       autoInspectConsoleEnabled = true,
       bubbleSize = 40,
       idleBubbleOpacity = 0.5,
+      includeDomains,
     }: Props) => {
       const { width, height } = useWindowDimensions();
 
       const [debuggerState, setDebuggerState] = useImmer<DebuggerState>({
         position: 'bottom',
         detailsData: null,
+        searchQuery: '',
       });
 
       const containerStyle = useMemo(
@@ -78,6 +121,7 @@ namespace Xenon {
 
       const networkInterceptor = useNetworkInterceptor({
         autoEnabled: autoInspectNetworkEnabled,
+        includeDomains,
       });
 
       const consoleInterceptor = useConsoleInterceptor({
@@ -120,20 +164,22 @@ namespace Xenon {
 
             <View style={containerStyle}>
               <SafeAreaProvider>
-                <SafeAreaView style={styles.safeArea}>
-                  <Header />
-                  <Panel />
-                </SafeAreaView>
+                {debuggerState.position === 'top' && <SafeArea inset="top" />}
+                <Header />
+                <Panel />
+                {debuggerState.position === 'bottom' && <SafeArea inset="bottom" />}
               </SafeAreaProvider>
             </View>
+
+            <SearchBar />
           </IndexedStack>
         </MainContext.Provider>
       );
     },
   );
 
-  export function Wrapper({ disabled = false, children, ...props }: Props) {
-    if (disabled) return children;
+  export function Wrapper({ disabled = false, children, ...props }: WrapperProps): JSX.Element {
+    if (disabled) return children as JSX.Element;
 
     return (
       <>

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

@@ -36,7 +36,7 @@ const Bubble = forwardRef<View, BubbleProps>(
 
       const blur = () => {
         opacityTimer.current = setTimeout(() => {
-          setIdleOpacity(0.5);
+          setIdleOpacity(idleBubbleOpacity);
           clearTimer();
         }, 1000);
       };
@@ -94,7 +94,7 @@ const Bubble = forwardRef<View, BubbleProps>(
           });
         },
       });
-    }, [bubbleSize, pan, screenHeight, screenWidth]);
+    }, [bubbleSize, idleBubbleOpacity, screenHeight, screenWidth]);
 
     return (
       <View ref={ref} style={[styles.bubbleBackdrop, style]}>

package/src/ui/components/common/SafeArea.tsx

@@ -0,0 +1,10 @@
+import { View } from 'react-native';
+import { useSafeAreaInsets, type EdgeInsets } from 'react-native-safe-area-context';
+
+export default function SafeArea({
+  inset,
+}: {
+  inset: Extract<keyof EdgeInsets, 'top' | 'bottom'>;
+}) {
+  return <View style={{ height: useSafeAreaInsets()[inset] }} />;
+}

package/src/ui/components/common/ShareableText.tsx

@@ -0,0 +1,21 @@
+import { Text, type TextProps } from 'react-native';
+import { shareText } from '../../../core/utils';
+
+interface ShareableTextProps extends TextProps {
+  children: string | string[];
+}
+
+export default function ShareableText({ children, ...props }: ShareableTextProps) {
+  return (
+    <Text
+      selectionColor={'transparent'}
+      suppressHighlighting={true}
+      onLongPress={async () => {
+        shareText(Array.isArray(children) ? children.join('') : children);
+      }}
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+}

package/src/ui/components/common/Touchable.tsx

@@ -1,20 +1,10 @@
-import { TouchableOpacity, type StyleProp, type ViewStyle } from 'react-native';
+import { TouchableOpacity, type TouchableOpacityProps } from 'react-native';
 
-interface TouchableProps {
-  onPress: () => void;
-  children: React.ReactNode;
-  activeOpacity?: number;
-  style?: StyleProp<ViewStyle>;
-}
+interface TouchableProps extends TouchableOpacityProps {}
 
-export default function Touchable({
-  onPress,
-  children,
-  activeOpacity = 0.8,
-  style,
-}: TouchableProps) {
+export default function Touchable({ children, activeOpacity = 0.8, ...props }: TouchableProps) {
   return (
-    <TouchableOpacity onPress={onPress} activeOpacity={activeOpacity} style={style}>
+    <TouchableOpacity activeOpacity={activeOpacity} {...props}>
       {children}
     </TouchableOpacity>
   );

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

@@ -21,6 +21,7 @@ const LogMessageDetails = forwardRef<ScrollView, { style?: StyleProp<ViewStyle>
           { backgroundColor: getConsoleTypeColor(item?.type ?? '') },
           style,
         ]}
+        contentContainerStyle={styles.contentContainer}
       >
         <Text style={styles.text}>{formatLogMessage(item?.values ?? [])}</Text>
       </ScrollView>
@@ -31,6 +32,8 @@ const LogMessageDetails = forwardRef<ScrollView, { style?: StyleProp<ViewStyle>
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+  },
+  contentContainer: {
     padding: 8,
   },
   text: {

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

@@ -1,5 +1,5 @@
-import { forwardRef, useContext, useRef, type JSX } from 'react';
-import { ScrollView, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { forwardRef, useContext, useRef, type JSX, type ReactNode } from 'react';
+import { ScrollView, StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
 import { MainContext } from '../../../contexts';
 import {
   beautify,
@@ -12,7 +12,13 @@ import colors from '../../../theme/colors';
 import { type DetailTab, type HttpRequest, type WebSocketRequest } from '../../../types';
 import NetworkRequestDetailsItem from '../items/NetworkRequestDetailsItem';
 
-const NetworkRequestDetails = forwardRef<ScrollView, { style?: StyleProp<ViewStyle> }>(
+const TabScrollView = ({ id, children }: { id: string; children: ReactNode }) => (
+  <ScrollView key={id} contentContainerStyle={styles.contentContainer}>
+    {children}
+  </ScrollView>
+);
+
+const NetworkRequestDetails = forwardRef<View, { style?: StyleProp<ViewStyle> }>(
   ({ style }, ref) => {
     const {
       debuggerState: { detailsData },
@@ -26,7 +32,7 @@ const NetworkRequestDetails = forwardRef<ScrollView, { style?: StyleProp<ViewSty
       typeof detailsData?.beautified === 'boolean';
 
     const {
-      isHttp,
+      isWS,
       requestUrl,
       overviewShown,
       headersShown,
@@ -54,14 +60,14 @@ const NetworkRequestDetails = forwardRef<ScrollView, { style?: StyleProp<ViewSty
 
     if (overviewShown && !content.current.overview && item) {
       content.current.overview = (
-        <>
+        <TabScrollView id="overview">
           <NetworkRequestDetailsItem label="Request Type" content={item.type} />
 
           <NetworkRequestDetailsItem label="Request URL" content={item.url} />
 
           <NetworkRequestDetailsItem
             label="Request Method"
-            content={formatRequestMethod(isHttp ? (item as HttpRequest).method : undefined)}
+            content={formatRequestMethod(isWS ? undefined : (item as HttpRequest).method)}
           />
 
           <NetworkRequestDetailsItem
@@ -71,32 +77,30 @@ const NetworkRequestDetails = forwardRef<ScrollView, { style?: StyleProp<ViewSty
 
           <NetworkRequestDetailsItem
             label="Start Time"
-            content={new Date(item.startTime ?? 0).toUTCString()}
+            content={new Date(item.startTime ?? 0).toISOString()}
           />
 
           <NetworkRequestDetailsItem
             label="End Time"
-            content={new Date(item.endTime ?? 0).toUTCString()}
+            content={new Date(item.endTime ?? 0).toISOString()}
           />
 
           <NetworkRequestDetailsItem
             label="Duration"
             content={formatRequestDuration(item.startTime, item.endTime)}
           />
-        </>
+        </TabScrollView>
       );
     }
 
     if (headersShown && !content.current.headers && item) {
       let headers: [string, string][] = [];
-      let requestHeaders: [string, string][] = [];
-      let responseHeaders: [string, string][] = [];
+      const requestHeaders: [string, string][] = [];
+      const responseHeaders: [string, string][] = [];
 
-      if (!isHttp) {
+      if (isWS) {
         headers = Object.entries((item as WebSocketRequest).options?.headers ?? {});
-      }
-
-      if (isHttp) {
+      } else {
         for (const [key, value] of ((item as HttpRequest).requestHeaders ?? new Map()).entries()) {
           requestHeaders.push([key, value]);
         }
@@ -106,24 +110,24 @@ const NetworkRequestDetails = forwardRef<ScrollView, { style?: StyleProp<ViewSty
       }
 
       content.current.headers = (
-        <>
-          {!isHttp && !!headers.length && (
+        <TabScrollView id="headers">
+          {isWS && !!headers.length && (
             <NetworkRequestDetailsItem label="Headers" content={headers} />
           )}
 
-          {isHttp && !!requestHeaders.length && (
+          {!isWS && !!requestHeaders.length && (
             <NetworkRequestDetailsItem label="Request Headers" content={requestHeaders} />
           )}
 
-          {isHttp && !!responseHeaders.length && (
+          {!isWS && !!responseHeaders.length && (
             <NetworkRequestDetailsItem label="Response Headers" content={responseHeaders} />
           )}
-        </>
+        </TabScrollView>
       );
     }
 
-    if (requestShown && shouldBeautifiedRefUpdate && item && requestUrl.searchParams) {
-      let queryStringParameters: [string, string][] = [];
+    if (requestShown && shouldBeautifiedRefUpdate && item) {
+      const queryStringParameters: [string, string][] = [];
 
       requestUrl.searchParams.forEach((value, name) => {
         queryStringParameters.push([name, value]);
@@ -132,31 +136,33 @@ const NetworkRequestDetails = forwardRef<ScrollView, { style?: StyleProp<ViewSty
       const body = beautify((item as HttpRequest).body, detailsData?.beautified ?? false);
 
       content.current.request = (
-        <>
+        <TabScrollView id="request">
           {!!queryStringParameters.length && (
             <NetworkRequestDetailsItem label="Query String" content={queryStringParameters} />
           )}
 
           {!!body && <NetworkRequestDetailsItem label="Body" content={body} />}
-        </>
+        </TabScrollView>
       );
     }
 
     if (responseShown && shouldBeautifiedRefUpdate && item) {
+      const response = beautify((item as HttpRequest).response, detailsData?.beautified ?? false);
       content.current.response = (
-        <NetworkRequestDetailsItem
-          label="Response"
-          content={beautify((item as HttpRequest).response, detailsData?.beautified ?? false)}
-        />
+        <TabScrollView id="response">
+          <NetworkRequestDetailsItem label="Response" content={response} />
+        </TabScrollView>
       );
     }
 
     if (messagesShown && !content.current.messages && item) {
       content.current.messages = (
-        <NetworkRequestDetailsItem
-          label="Messages"
-          content={(item as WebSocketRequest).messages!}
-        />
+        <TabScrollView id="messages">
+          <NetworkRequestDetailsItem
+            label="Messages"
+            content={(item as WebSocketRequest).messages!}
+          />
+        </TabScrollView>
       );
     }
 
@@ -165,9 +171,9 @@ const NetworkRequestDetails = forwardRef<ScrollView, { style?: StyleProp<ViewSty
     }
 
     return (
-      <ScrollView ref={ref} style={[styles.container, style]}>
+      <View ref={ref} style={[styles.container, style]}>
         {content.current[detailsData?.selectedTab as keyof typeof content.current]}
-      </ScrollView>
+      </View>
     );
   },
 );
@@ -175,6 +181,8 @@ const NetworkRequestDetails = forwardRef<ScrollView, { style?: StyleProp<ViewSty
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+  },
+  contentContainer: {
     padding: 8,
   },
   text: {

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

@@ -16,7 +16,7 @@ const ConsoleHeader = forwardRef<ScrollView, ConsoleHeaderProps>(
         <HeaderComponents.Back selectedPanel={selectedPanel} />
         <HeaderComponents.MainButtons />
         <Divider type="vertical" />
-        <HeaderComponents.TabItem tab="logMessage" label="Console" />
+        <HeaderComponents.DetailTabItem tab="logMessage" label="Console" />
       </HeaderComponents.Wrapper>
     );
   },

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

@@ -1,7 +1,7 @@
 import { forwardRef, useContext } from 'react';
 import type { ScrollView, StyleProp, ViewStyle } from 'react-native';
 import { MainContext } from '../../../contexts';
-import refs, { PanelState } from '../../../core/refs';
+import refs, { DebuggerVisibility, PanelState } from '../../../core/refs';
 import icons from '../../../theme/icons';
 import Divider from '../common/Divider';
 import DebuggerHeaderItem from '../items/DebuggerHeaderItem';
@@ -38,8 +38,15 @@ const DebuggerHeader = forwardRef<ScrollView, DebuggerHeaderProps>(
         : consoleInterceptor.enableInterception();
     };
 
+    const onShowSearchInput = () => {
+      refs.debugger.current?.setCurrentIndex(DebuggerVisibility.Search);
+      refs.searchInput.current?.focus();
+    };
+
     return (
       <HeaderComponents.Wrapper ref={ref} style={style}>
+        <DebuggerHeaderItem onPress={onShowSearchInput} content={icons.search} />
+
         <HeaderComponents.MainButtons />
 
         <Divider type="vertical" />

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

@@ -24,7 +24,7 @@ const Back = ({ selectedPanel }: { selectedPanel: PanelState }) => {
   );
 };
 
-const TabItem = ({ tab, label }: { tab: DetailTab; label: string }) => {
+const DetailTabItem = ({ tab, label }: { tab: DetailTab; label: string }) => {
   const {
     debuggerState: { detailsData },
     setDebuggerState,
@@ -95,6 +95,6 @@ const styles = StyleSheet.create({
   },
 });
 
-const HeaderComponents = { Back, TabItem, MainButtons, Wrapper };
+const HeaderComponents = { Back, DetailTabItem, MainButtons, Wrapper };
 
 export default HeaderComponents;

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

@@ -1,8 +1,8 @@
 import { forwardRef, useContext } from 'react';
-import { Share, type ScrollView, type StyleProp, type ViewStyle } from 'react-native';
+import { type ScrollView, type StyleProp, type ViewStyle } from 'react-native';
 import { MainContext } from '../../../contexts';
-import refs, { DebuggerVisibility, type PanelState } from '../../../core/refs';
-import { convertToCurl, getNetworkUtils } from '../../../core/utils';
+import { type PanelState } from '../../../core/refs';
+import { convertToCurl, getNetworkUtils, shareText } from '../../../core/utils';
 import colors from '../../../theme/colors';
 import icons from '../../../theme/icons';
 import { NetworkType, type HttpRequest, type WebSocketRequest } from '../../../types';
@@ -15,8 +15,6 @@ interface NetworkHeaderProps {
   style?: StyleProp<ViewStyle>;
 }
 
-let isSharing = false;
-
 const NetworkHeader = forwardRef<ScrollView, NetworkHeaderProps>(
   ({ selectedPanel, style }, ref) => {
     const {
@@ -26,7 +24,7 @@ const NetworkHeader = forwardRef<ScrollView, NetworkHeaderProps>(
 
     const data = detailsData?.data as HttpRequest | WebSocketRequest | undefined;
 
-    const { isHttp, overviewShown, headersShown, requestShown, responseShown, messagesShown } =
+    const { isWS, overviewShown, headersShown, requestShown, responseShown, messagesShown } =
       getNetworkUtils(data);
 
     return (
@@ -36,13 +34,13 @@ const NetworkHeader = forwardRef<ScrollView, NetworkHeaderProps>(
 
         <Divider type="vertical" />
 
-        {overviewShown && <HeaderComponents.TabItem tab="overview" label="Overview" />}
-        {headersShown && <HeaderComponents.TabItem tab="headers" label="Headers" />}
-        {requestShown && <HeaderComponents.TabItem tab="request" label="Request" />}
-        {responseShown && <HeaderComponents.TabItem tab="response" label="Response" />}
-        {messagesShown && <HeaderComponents.TabItem tab="messages" label="Messages" />}
+        {!!overviewShown && <HeaderComponents.DetailTabItem tab="overview" label="Overview" />}
+        {!!headersShown && <HeaderComponents.DetailTabItem tab="headers" label="Headers" />}
+        {!!requestShown && <HeaderComponents.DetailTabItem tab="request" label="Request" />}
+        {!!responseShown && <HeaderComponents.DetailTabItem tab="response" label="Response" />}
+        {!!messagesShown && <HeaderComponents.DetailTabItem tab="messages" label="Messages" />}
 
-        {isHttp && (
+        {!isWS && (
           <>
             <Divider type="vertical" />
 
@@ -59,20 +57,10 @@ const NetworkHeader = forwardRef<ScrollView, NetworkHeaderProps>(
             <DebuggerHeaderItem
               content={icons.share}
               onPress={async () => {
-                if (isSharing || !data || data.type === NetworkType.WS) return;
-
-                try {
-                  isSharing = true;
-                  refs.debugger.current?.setCurrentIndex(DebuggerVisibility.Bubble);
-
-                  await Share.share({
-                    message: convertToCurl(data.method, data.url, data.requestHeaders, data.body),
-                  });
-                } catch (error) {
-                  // Handle error
-                } finally {
-                  isSharing = false;
-                }
+                if (data?.type === NetworkType.WS) return;
+                await shareText(
+                  convertToCurl(data!.method, data!.url, data!.requestHeaders, data!.body),
+                );
               }}
             />
           </>

package/src/ui/components/index.ts

@@ -1,4 +1,5 @@
 export { default as Bubble } from './bubble/Bubble';
-export { default as DebuggerHeader } from './headers/DebuggerHeader';
-export { default as ConsolePanel } from './panels/ConsolePanel';
-export { default as NetworkPanel } from './panels/NetworkPanel';
+export { default as IndexedStack } from './common/IndexedStack';
+export { default as Header } from './headers/Header';
+export { default as Panel } from './panels/Panel';
+export { default as SearchBar } from './search-bar/SearchBar';

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

@@ -1,5 +1,7 @@
-import { StyleSheet, Text } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 import colors from '../../../theme/colors';
+import { showNewLine } from '../../../core/utils';
+import ShareableText from '../common/ShareableText';
 
 interface NetworkRequestDetailsItemProps {
   label: string;
@@ -10,32 +12,57 @@ export default function NetworkRequestDetailsItem({
   label,
   content,
 }: NetworkRequestDetailsItemProps) {
+  const renderContent = () => {
+    switch (true) {
+      case typeof content === 'string':
+        return (
+          <ShareableText style={styles.text}>
+            {content}
+            {showNewLine(!content.endsWith('\n'))}
+          </ShareableText>
+        );
+      case Array.isArray(content):
+        return (
+          <View>
+            {content.map(([key, value], index) => (
+              <View style={styles.pairContainer} key={`${key}-${index}`}>
+                <Text style={[styles.label, styles.subLabel]}>
+                  {key}
+                  {':'}
+                </Text>
+
+                <ShareableText style={styles.text}>
+                  {value}
+                  {showNewLine(index === content.length - 1)}
+                </ShareableText>
+              </View>
+            ))}
+          </View>
+        );
+    }
+  };
+
   return (
-    <Text style={styles.text}>
-      <Text style={styles.label}>
-        {label}
-        {'\n'}
-      </Text>
-      {typeof content === 'string'
-        ? content
-        : content.map(([key, value]) => (
-            <Text key={key} style={[styles.label, styles.subLabel]}>
-              {key}
-              {': '}
-              <Text style={styles.text}>{value}</Text>
-              {'\n'}
-            </Text>
-          ))}
-      {Array.isArray(content) || content?.endsWith('\n') ? '' : '\n'}
-    </Text>
+    <View style={styles.container}>
+      <Text style={styles.label}>{label}</Text>
+      {renderContent()}
+    </View>
   );
 }
 
 const styles = StyleSheet.create({
+  container: {
+    rowGap: 2,
+  },
+  pairContainer: {
+    flexDirection: 'row',
+    columnGap: 4,
+  },
   text: {
     fontSize: 14,
     fontWeight: 'normal',
     color: colors.black,
+    flexShrink: 1,
   },
   label: {
     fontSize: 16,