react-native-xenon 1.0.1 → 1.1.0

package/src/core/utils.ts

@@ -1,23 +1,45 @@
 import { URL } from 'react-native-url-polyfill';
 import { NetworkType, type HttpRequest, type LogMessage, type WebSocketRequest } from '../types';
 import colors from '../theme/colors';
+import { Share } from 'react-native';
+import refs, { DebuggerVisibility } from './refs';
+
+let isSharing = false;
+
+export const shareText = async (text: string) => {
+  if (isSharing) return;
+
+  try {
+    isSharing = true;
+    refs.debugger.current?.setCurrentIndex(DebuggerVisibility.Bubble);
+
+    await Share.share({
+      message: text.trim(),
+    });
+  } catch (error) {
+    // Handle error
+  } finally {
+    refs.debugger.current?.setCurrentIndex(DebuggerVisibility.Panel);
+    isSharing = false;
+  }
+};
 
 export const getNetworkUtils = (data?: HttpRequest | WebSocketRequest) => {
   if (!data || !data.url) return {};
 
-  const isHttp = data?.type !== NetworkType.WS;
+  const isWS = data?.type === NetworkType.WS;
   const requestUrl = new URL(data.url);
 
   const overviewShown = !!data.url;
-  const httpHeadersShown = isHttp && (!!data.requestHeaders?.size || !!data.responseHeaders?.size);
-  const websocketHeadersShown = !isHttp && !!Object.keys(data.options?.headers ?? {}).length;
+  const httpHeadersShown = !isWS && (!!data.requestHeaders?.size || !!data.responseHeaders?.size);
+  const websocketHeadersShown = isWS && !!Object.keys(data.options?.headers ?? {}).length;
   const headersShown = httpHeadersShown || websocketHeadersShown;
-  const requestShown = isHttp && (!!requestUrl.search || !!data.body);
-  const responseShown = isHttp && !!data.response;
-  const messagesShown = !isHttp && !!data.messages;
+  const requestShown = !isWS && (!!requestUrl.search || !!data.body);
+  const responseShown = !isWS && !!data.response;
+  const messagesShown = isWS && !!data.messages;
 
   return {
-    isHttp,
+    isWS,
     requestUrl,
     overviewShown,
     headersShown,
@@ -68,6 +90,8 @@ export const getHttpInterceptorId = () => {
 //#endregion
 
 //#region formatters
+export const showNewLine = (when: boolean) => (when ? '\n' : '');
+
 const limitChar = (value: any, limit = 5000) => {
   const stringValue = typeof value === 'string' ? value : JSON.stringify(value ?? '');
 
@@ -81,7 +105,7 @@ export const keyValueToString = (
   value: any,
   newLine: 'leading' | 'trailing' | null = 'trailing',
 ): string =>
-  `${newLine === 'leading' ? '\n' : ''}${key}: ${limitChar(value)}${newLine === 'trailing' ? '\n' : ''}`;
+  `${newLine === 'leading' ? '\n' : ''}${key}: ${limitChar(value)}${showNewLine(newLine === 'trailing')}`;
 
 export const formatRequestMethod = (method?: string) => method ?? 'GET';
 
@@ -116,7 +140,7 @@ export const convertToCurl = (
   let curlCommand = `curl -X ${method.toUpperCase()} "${url}"`;
 
   if (headers) {
-    for (const [key, value] of Object.entries(headers)) {
+    for (const [key, value] of headers.entries()) {
       curlCommand += ` -H "${key}: ${value}"`;
     }
   }

package/src/hooks/useNetworkInterceptor.ts

@@ -14,6 +14,7 @@ import { keyValueToString } from '../core/utils';
 
 interface NetworkInterceptorParams {
   autoEnabled: boolean;
+  includeDomains?: string[];
 }
 
 type NetworkRequests<T> = Map<NonNullable<ID>, T>;
@@ -24,7 +25,11 @@ const xhrInterceptor = new XHRInterceptor();
 const fetchInterceptor = new FetchInterceptor();
 const webSocketInterceptor = new WebSocketInterceptor();
 
-export default function useNetworkInterceptor({ autoEnabled }: NetworkInterceptorParams) {
+export default function useNetworkInterceptor({
+  autoEnabled,
+  includeDomains,
+}: NetworkInterceptorParams) {
+  const joinedIncludeDomains = includeDomains?.join(',') ?? '';
   const [isInterceptorEnabled, setIsInterceptorEnabled] = useState(autoEnabled);
 
   const [networkRequests, setNetworkRequests] = useImmer(initRequests);
@@ -42,6 +47,11 @@ export default function useNetworkInterceptor({ autoEnabled }: NetworkIntercepto
     const openCallback: HttpHandlers['open'] = (id, type, method, url) => {
       if (!id) return;
 
+      const isNotMatchedDomain =
+        !!joinedIncludeDomains.length && !includeDomains?.some(domain => url.includes(domain));
+
+      if (isNotMatchedDomain) return;
+
       setNetworkRequests((draft: NetworkRequests<HttpRequest>) => {
         draft.set(id, { type, method, url });
       });
@@ -139,7 +149,8 @@ export default function useNetworkInterceptor({ autoEnabled }: NetworkIntercepto
       .set('headerReceived', headerReceivedCallback)
       .set('response', responseCallback)
       .enableInterception();
-  }, [setNetworkRequests]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [joinedIncludeDomains, setNetworkRequests]);
 
   const enableWebSocketInterception = useCallback(() => {
     const connectCallback: WebSocketHandlers['connect'] = (

package/src/interceptors/FetchInterceptor.ts

@@ -86,7 +86,7 @@ export default class FetchInterceptor extends HttpInterceptor {
       const responseContentType = contentTypeString ? contentTypeString.split(';')[0] : undefined;
       const responseSize = contentLengthString ? parseInt(contentLengthString, 10) : undefined;
 
-      let responseHeaders: Map<string, string> = new Map();
+      const responseHeaders: Map<string, string> = new Map();
 
       clonedResponseHeaders.forEach((headerValue: string, headerKey: string) => {
         responseHeaders.set(headerKey, headerValue);

package/src/ui/Xenon.tsx

@@ -1,18 +1,15 @@
 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 { 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 } from './components';
 
 namespace Xenon {
   interface Methods {
@@ -22,12 +19,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();
@@ -50,8 +76,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,6 +100,7 @@ namespace Xenon {
       autoInspectConsoleEnabled = true,
       bubbleSize = 40,
       idleBubbleOpacity = 0.5,
+      includeDomains,
     }: Props) => {
       const { width, height } = useWindowDimensions();
 
@@ -78,6 +119,7 @@ namespace Xenon {
 
       const networkInterceptor = useNetworkInterceptor({
         autoEnabled: autoInspectNetworkEnabled,
+        includeDomains,
       });
 
       const consoleInterceptor = useConsoleInterceptor({
@@ -132,8 +174,8 @@ namespace Xenon {
     },
   );
 
-  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/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/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/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.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" />}
 
-        {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,4 @@
 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 Header } from './headers/Header';
+export { default as Panel } from './panels/Panel';
+export { default as IndexedStack } from './common/IndexedStack';

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,