react-native-xenon 2.3.0 → 2.4.1

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

@@ -1,33 +1,33 @@
-import { ScrollView, StyleSheet, Text, type StyleProp, type ViewStyle } from 'react-native';
+import { useContext, type Ref } from 'react';
+import { ScrollView, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { MainContext } from '../../../contexts';
 import { formatLogMessage, getConsoleTypeColor } from '../../../core/utils';
-import type { LogMessage } from '../../../types';
 import colors from '../../../theme/colors';
-import { forwardRef, useContext } from 'react';
-import { MainContext } from '../../../contexts';
+import type { LogMessage } from '../../../types';
+import ShareableText from '../common/ShareableText';
 
-const LogMessageDetails = forwardRef<ScrollView, { style?: StyleProp<ViewStyle> }>(
-  ({ style }, ref) => {
-    const {
-      debuggerState: { detailsData },
-    } = useContext(MainContext)!;
+interface LogMessageDetailsProps {
+  style?: StyleProp<ViewStyle>;
+  ref?: Ref<ScrollView>;
+}
 
-    const item = detailsData?.data as LogMessage | undefined;
+export default function LogMessageDetails({ style, ref }: LogMessageDetailsProps) {
+  const {
+    debuggerState: { detailsData },
+  } = useContext(MainContext)!;
 
-    return (
-      <ScrollView
-        ref={ref}
-        style={[
-          styles.container,
-          { backgroundColor: getConsoleTypeColor(item?.type ?? '') },
-          style,
-        ]}
-        contentContainerStyle={styles.contentContainer}
-      >
-        <Text style={styles.text}>{formatLogMessage(item?.values ?? [])}</Text>
-      </ScrollView>
-    );
-  },
-);
+  const item = detailsData?.data as LogMessage | undefined;
+
+  return (
+    <ScrollView
+      ref={ref}
+      style={[styles.container, { backgroundColor: getConsoleTypeColor(item?.type ?? '') }, style]}
+      contentContainerStyle={styles.contentContainer}
+    >
+      <ShareableText style={styles.text}>{formatLogMessage(item?.values ?? [])}</ShareableText>
+    </ScrollView>
+  );
+}
 
 const styles = StyleSheet.create({
   container: {
@@ -41,5 +41,3 @@ const styles = StyleSheet.create({
     fontSize: 14,
   },
 });
-
-export default LogMessageDetails;

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

@@ -1,5 +1,11 @@
-import { forwardRef, useContext, useRef, type JSX, type ReactNode } from 'react';
+import { useContext, useRef, type JSX, type ReactNode, type Ref } from 'react';
 import { ScrollView, StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+
+interface NetworkRequestDetailsProps {
+  style?: StyleProp<ViewStyle>;
+  ref?: Ref<View>;
+}
+
 import { MainContext } from '../../../contexts';
 import {
   beautify,
@@ -18,165 +24,162 @@ const TabScrollView = ({ id, children }: { id: string; children: ReactNode }) =>
   </ScrollView>
 );
 
-const NetworkRequestDetails = forwardRef<View, { style?: StyleProp<ViewStyle> }>(
-  ({ style }, ref) => {
-    const {
-      debuggerState: { detailsData },
-    } = useContext(MainContext)!;
-
-    const item = detailsData?.data as HttpRequest | WebSocketRequest | undefined;
-
-    const beautified = useRef<boolean | null>(null);
-    const shouldBeautifiedRefUpdate =
-      beautified.current !== detailsData?.beautified &&
-      typeof detailsData?.beautified === 'boolean';
-
-    const {
-      isWS,
-      requestUrl,
-      overviewShown,
-      headersShown,
-      requestShown,
-      responseShown,
-      messagesShown,
-    } = getNetworkUtils(item);
-
-    const content = useRef<Record<Exclude<DetailTab, 'logMessage'>, JSX.Element | null>>({
-      overview: null,
-      headers: null,
-      request: null,
-      response: null,
-      messages: null,
-    });
-
-    if (!item) {
-      content.current.overview = null;
-      content.current.headers = null;
-      content.current.request = null;
-      content.current.response = null;
-      content.current.messages = null;
-      beautified.current = null;
-    }
-
-    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(isWS ? undefined : (item as HttpRequest).method)}
-          />
-
-          <NetworkRequestDetailsItem
-            label="Status Code"
-            content={formatRequestStatusCode(item.status)}
-          />
-
-          <NetworkRequestDetailsItem
-            label="Start Time"
-            content={new Date(item.startTime ?? 0).toISOString()}
-          />
-
-          <NetworkRequestDetailsItem
-            label="End Time"
-            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][] = [];
-      const requestHeaders: [string, string][] = [];
-      const responseHeaders: [string, string][] = [];
-
-      if (isWS) {
-        headers = Object.entries((item as WebSocketRequest).options?.headers ?? {});
-      } else {
-        for (const [key, value] of ((item as HttpRequest).requestHeaders ?? new Map()).entries()) {
-          requestHeaders.push([key, value]);
-        }
-        for (const [key, value] of ((item as HttpRequest).responseHeaders ?? new Map()).entries()) {
-          responseHeaders.push([key, value]);
-        }
+export default function NetworkRequestDetails({ style, ref }: NetworkRequestDetailsProps) {
+  const {
+    debuggerState: { detailsData },
+  } = useContext(MainContext)!;
+
+  const item = detailsData?.data as HttpRequest | WebSocketRequest | undefined;
+
+  const beautified = useRef<boolean | null>(null);
+  const shouldBeautifiedRefUpdate =
+    beautified.current !== detailsData?.beautified && typeof detailsData?.beautified === 'boolean';
+
+  const {
+    isWS,
+    requestUrl,
+    overviewShown,
+    headersShown,
+    requestShown,
+    responseShown,
+    messagesShown,
+  } = getNetworkUtils(item);
+
+  const content = useRef<Record<Exclude<DetailTab, 'logMessage'>, JSX.Element | null>>({
+    overview: null,
+    headers: null,
+    request: null,
+    response: null,
+    messages: null,
+  });
+
+  if (!item) {
+    content.current.overview = null;
+    content.current.headers = null;
+    content.current.request = null;
+    content.current.response = null;
+    content.current.messages = null;
+    beautified.current = null;
+  }
+
+  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(isWS ? undefined : (item as HttpRequest).method)}
+        />
+
+        <NetworkRequestDetailsItem
+          label="Status Code"
+          content={formatRequestStatusCode(item.status)}
+        />
+
+        <NetworkRequestDetailsItem
+          label="Start Time"
+          content={new Date(item.startTime ?? 0).toISOString()}
+        />
+
+        <NetworkRequestDetailsItem
+          label="End Time"
+          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][] = [];
+    const requestHeaders: [string, string][] = [];
+    const responseHeaders: [string, string][] = [];
+
+    if (isWS) {
+      headers = Object.entries((item as WebSocketRequest).options?.headers ?? {});
+    } else {
+      for (const [key, value] of ((item as HttpRequest).requestHeaders ?? new Map()).entries()) {
+        requestHeaders.push([key, value]);
+      }
+      for (const [key, value] of ((item as HttpRequest).responseHeaders ?? new Map()).entries()) {
+        responseHeaders.push([key, value]);
       }
-
-      content.current.headers = (
-        <TabScrollView id="headers">
-          {isWS && !!headers.length && (
-            <NetworkRequestDetailsItem label="Headers" content={headers} />
-          )}
-
-          {!isWS && !!requestHeaders.length && (
-            <NetworkRequestDetailsItem label="Request Headers" content={requestHeaders} />
-          )}
-
-          {!isWS && !!responseHeaders.length && (
-            <NetworkRequestDetailsItem label="Response Headers" content={responseHeaders} />
-          )}
-        </TabScrollView>
-      );
     }
 
-    if (requestShown && shouldBeautifiedRefUpdate && item) {
-      const queryStringParameters: [string, string][] = [];
+    content.current.headers = (
+      <TabScrollView id="headers">
+        {isWS && !!headers.length && (
+          <NetworkRequestDetailsItem label="Headers" content={headers} />
+        )}
 
-      requestUrl.searchParams.forEach((value, name) => {
-        queryStringParameters.push([name, value]);
-      });
+        {!isWS && !!requestHeaders.length && (
+          <NetworkRequestDetailsItem label="Request Headers" content={requestHeaders} />
+        )}
 
-      const body = beautify((item as HttpRequest).body, detailsData?.beautified ?? false);
+        {!isWS && !!responseHeaders.length && (
+          <NetworkRequestDetailsItem label="Response Headers" content={responseHeaders} />
+        )}
+      </TabScrollView>
+    );
+  }
 
-      content.current.request = (
-        <TabScrollView id="request">
-          {!!queryStringParameters.length && (
-            <NetworkRequestDetailsItem label="Query String" content={queryStringParameters} />
-          )}
+  if (requestShown && shouldBeautifiedRefUpdate && item) {
+    const queryStringParameters: [string, string][] = [];
 
-          {!!body && <NetworkRequestDetailsItem label="Body" content={body} />}
-        </TabScrollView>
-      );
-    }
-
-    if (responseShown && shouldBeautifiedRefUpdate && item) {
-      const response = beautify((item as HttpRequest).response, detailsData?.beautified ?? false);
-      content.current.response = (
-        <TabScrollView id="response">
-          <NetworkRequestDetailsItem label="Response" content={response} />
-        </TabScrollView>
-      );
-    }
+    requestUrl.searchParams.forEach((value, name) => {
+      queryStringParameters.push([name, value]);
+    });
 
-    if (messagesShown && !content.current.messages && item) {
-      content.current.messages = (
-        <TabScrollView id="messages">
-          <NetworkRequestDetailsItem
-            label="Messages"
-            content={(item as WebSocketRequest).messages!}
-          />
-        </TabScrollView>
-      );
-    }
+    const body = beautify((item as HttpRequest).body, detailsData?.beautified ?? false);
 
-    if (shouldBeautifiedRefUpdate) {
-      beautified.current = detailsData?.beautified ?? false;
-    }
+    content.current.request = (
+      <TabScrollView id="request">
+        {!!queryStringParameters.length && (
+          <NetworkRequestDetailsItem label="Query String" content={queryStringParameters} />
+        )}
 
-    return (
-      <View ref={ref} style={[styles.container, style]}>
-        {content.current[detailsData?.selectedTab as keyof typeof content.current]}
-      </View>
+        {!!body && <NetworkRequestDetailsItem label="Body" content={body} />}
+      </TabScrollView>
     );
-  },
-);
+  }
+
+  if (responseShown && shouldBeautifiedRefUpdate && item) {
+    const response = beautify((item as HttpRequest).response, detailsData?.beautified ?? false);
+    content.current.response = (
+      <TabScrollView id="response">
+        <NetworkRequestDetailsItem label="Response" content={response} />
+      </TabScrollView>
+    );
+  }
+
+  if (messagesShown && !content.current.messages && item) {
+    content.current.messages = (
+      <TabScrollView id="messages">
+        <NetworkRequestDetailsItem
+          label="Messages"
+          content={(item as WebSocketRequest).messages!}
+        />
+      </TabScrollView>
+    );
+  }
+
+  if (shouldBeautifiedRefUpdate) {
+    beautified.current = detailsData?.beautified ?? false;
+  }
+
+  return (
+    <View ref={ref} style={[styles.container, style]}>
+      {content.current[detailsData?.selectedTab as keyof typeof content.current]}
+    </View>
+  );
+}
 
 const styles = StyleSheet.create({
   container: {
@@ -201,5 +204,3 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
 });
-
-export default NetworkRequestDetails;

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

@@ -1,25 +1,22 @@
-import { forwardRef } from 'react';
+import type { Ref } from 'react';
+import type { ScrollView, StyleProp, ViewStyle } from 'react-native';
 import type { PanelState } from '../../../core/refs';
 import Divider from '../common/Divider';
 import HeaderComponents from './HeaderComponents';
-import type { ScrollView, StyleProp, ViewStyle } from 'react-native';
 
 interface ConsoleHeaderProps {
   selectedPanel: PanelState;
   style?: StyleProp<ViewStyle>;
+  ref?: Ref<ScrollView>;
 }
 
-const ConsoleHeader = forwardRef<ScrollView, ConsoleHeaderProps>(
-  ({ selectedPanel, style }, ref) => {
-    return (
-      <HeaderComponents.Wrapper ref={ref} style={style}>
-        <HeaderComponents.Back selectedPanel={selectedPanel} />
-        <HeaderComponents.MainButtons />
-        <Divider type="vertical" />
-        <HeaderComponents.DetailTabItem tab="logMessage" label="Console" />
-      </HeaderComponents.Wrapper>
-    );
-  },
-);
-
-export default ConsoleHeader;
+export default function ConsoleHeader({ selectedPanel, style, ref }: ConsoleHeaderProps) {
+  return (
+    <HeaderComponents.Wrapper ref={ref} style={style}>
+      <HeaderComponents.Back selectedPanel={selectedPanel} />
+      <HeaderComponents.MainButtons />
+      <Divider type="vertical" />
+      <HeaderComponents.DetailTabItem tab="logMessage" label="Console" />
+    </HeaderComponents.Wrapper>
+  );
+}

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

@@ -1,97 +1,96 @@
-import { forwardRef, useContext } from 'react';
+import { useContext, type Ref } from 'react';
 import type { ScrollView, StyleProp, ViewStyle } from 'react-native';
 import { MainContext } from '../../../contexts';
 import refs, { DebuggerVisibility, PanelState } from '../../../core/refs';
+import { formatCount } from '../../../core/utils';
 import icons from '../../../theme/icons';
 import Divider from '../common/Divider';
 import DebuggerHeaderItem from '../items/DebuggerHeaderItem';
 import HeaderComponents from './HeaderComponents';
-import { formatCount } from '../../../core/utils';
 
 interface DebuggerHeaderProps {
   selectedPanel: PanelState;
   setSelectedPanel: React.Dispatch<React.SetStateAction<PanelState>>;
   style?: StyleProp<ViewStyle>;
+  ref?: Ref<ScrollView>;
 }
 
-const DebuggerHeader = forwardRef<ScrollView, DebuggerHeaderProps>(
-  ({ selectedPanel, setSelectedPanel, style }, ref) => {
-    const { setDebuggerState, networkInterceptor, consoleInterceptor } = useContext(MainContext)!;
-
-    const switchTo = (panelState: PanelState) => {
-      refs.panel.current?.setCurrentIndex(panelState);
-      setSelectedPanel(panelState);
-
-      setDebuggerState(draft => {
-        draft.detailsData = null;
-      });
-    };
-
-    const toggleNetworkInterception = () => {
-      networkInterceptor.isInterceptorEnabled
-        ? networkInterceptor.disableInterception()
-        : networkInterceptor.enableInterception();
-    };
-
-    const toggleConsoleInterception = () => {
-      consoleInterceptor.isInterceptorEnabled
-        ? consoleInterceptor.disableInterception()
-        : 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" />
-
-        <DebuggerHeaderItem
-          isLabel
-          isActive={selectedPanel === PanelState.Network}
-          content={`Network (${formatCount(networkInterceptor.networkRequests.size)})`}
-          onPress={() => switchTo(PanelState.Network)}
-        />
-
-        <DebuggerHeaderItem
-          onPress={toggleNetworkInterception}
-          isActive={networkInterceptor.isInterceptorEnabled}
-          content={icons.record}
-        />
-
-        <DebuggerHeaderItem
-          onPress={networkInterceptor.clearAllNetworkRequests}
-          content={icons.delete}
-        />
-
-        <Divider type="vertical" />
-
-        <DebuggerHeaderItem
-          isLabel
-          isActive={selectedPanel === PanelState.Console}
-          content={`Console (${formatCount(consoleInterceptor.logMessages.length)})`}
-          onPress={() => switchTo(PanelState.Console)}
-        />
-
-        <DebuggerHeaderItem
-          onPress={toggleConsoleInterception}
-          isActive={consoleInterceptor.isInterceptorEnabled}
-          content={icons.record}
-        />
-
-        <DebuggerHeaderItem
-          onPress={consoleInterceptor.clearAllLogMessages}
-          content={icons.delete}
-        />
-      </HeaderComponents.Wrapper>
-    );
-  },
-);
-
-export default DebuggerHeader;
+export default function DebuggerHeader({
+  selectedPanel,
+  setSelectedPanel,
+  style,
+  ref,
+}: DebuggerHeaderProps) {
+  const { setDebuggerState, networkInterceptor, consoleInterceptor } = useContext(MainContext)!;
+
+  const switchTo = (panelState: PanelState) => {
+    refs.panel.current?.setCurrentIndex(panelState);
+    setSelectedPanel(panelState);
+
+    setDebuggerState(draft => {
+      draft.detailsData = null;
+    });
+  };
+
+  const toggleNetworkInterception = () => {
+    networkInterceptor.isInterceptorEnabled
+      ? networkInterceptor.disableInterception()
+      : networkInterceptor.enableInterception();
+  };
+
+  const toggleConsoleInterception = () => {
+    consoleInterceptor.isInterceptorEnabled
+      ? consoleInterceptor.disableInterception()
+      : 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" />
+
+      <DebuggerHeaderItem
+        isLabel
+        isActive={selectedPanel === PanelState.Network}
+        content={`Network (${formatCount(networkInterceptor.networkRequests.size)})`}
+        onPress={() => switchTo(PanelState.Network)}
+      />
+
+      <DebuggerHeaderItem
+        onPress={toggleNetworkInterception}
+        isActive={networkInterceptor.isInterceptorEnabled}
+        content={icons.record}
+      />
+
+      <DebuggerHeaderItem
+        onPress={networkInterceptor.clearAllNetworkRequests}
+        content={icons.delete}
+      />
+
+      <Divider type="vertical" />
+
+      <DebuggerHeaderItem
+        isLabel
+        isActive={selectedPanel === PanelState.Console}
+        content={`Console (${formatCount(consoleInterceptor.logMessages.length)})`}
+        onPress={() => switchTo(PanelState.Console)}
+      />
+
+      <DebuggerHeaderItem
+        onPress={toggleConsoleInterception}
+        isActive={consoleInterceptor.isInterceptorEnabled}
+        content={icons.record}
+      />
+
+      <DebuggerHeaderItem onPress={consoleInterceptor.clearAllLogMessages} content={icons.delete} />
+    </HeaderComponents.Wrapper>
+  );
+}

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

@@ -1,4 +1,4 @@
-import { forwardRef, useContext, type PropsWithChildren } from 'react';
+import { useContext, type PropsWithChildren, type Ref } from 'react';
 import { ScrollView, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import { MainContext } from '../../../contexts';
 import refs, { DebuggerVisibility, HeaderState, PanelState } from '../../../core/refs';
@@ -65,21 +65,23 @@ const MainButtons = () => {
   );
 };
 
-const Wrapper = forwardRef<ScrollView, PropsWithChildren<{ style?: StyleProp<ViewStyle> }>>(
-  ({ children, style }, ref) => {
-    return (
-      <ScrollView
-        ref={ref}
-        horizontal
-        style={[styles.container, style]}
-        contentContainerStyle={styles.contentContainer}
-        showsHorizontalScrollIndicator={false}
-      >
-        {children}
-      </ScrollView>
-    );
-  },
-);
+function Wrapper({
+  children,
+  style,
+  ref,
+}: PropsWithChildren<{ style?: StyleProp<ViewStyle>; ref?: Ref<ScrollView> }>) {
+  return (
+    <ScrollView
+      ref={ref}
+      horizontal
+      style={[styles.container, style]}
+      contentContainerStyle={styles.contentContainer}
+      showsHorizontalScrollIndicator={false}
+    >
+      {children}
+    </ScrollView>
+  );
+}
 
 const styles = StyleSheet.create({
   container: {