react-native-xenon 0.4.0 → 0.5.0

package/src/types/common.ts

@@ -1,3 +1,5 @@
+import type { HttpRequest, LogMessage, WebSocketRequest } from '.';
+
 export enum NetworkType {
   XHR = 'xhr',
   Fetch = 'fetch',
@@ -19,10 +21,24 @@ export interface NetworkRequest {
   duration?: number;
 }
 
-export type NetworkTab = 'headers' | 'queryStringParameters' | 'body' | 'response' | 'messages';
+export type DetailTab = 'overview' | 'headers' | 'request' | 'response' | 'messages' | 'logMessage';
 
 export interface DebuggerState {
   visibility: 'hidden' | 'bubble' | 'panel';
   position: 'top' | 'bottom';
   selectedPanel: DebuggerPanel | null;
+  detailsData:
+    | {
+        type: DebuggerPanel.Network;
+        data: HttpRequest | WebSocketRequest;
+        selectedTab: Exclude<DetailTab, 'logMessage'>;
+        beautified: boolean;
+      }
+    | {
+        type: DebuggerPanel.Console;
+        data: LogMessage;
+        selectedTab: Extract<DetailTab, 'logMessage'>;
+        beautified: boolean;
+      }
+    | null;
 }

package/src/ui/Xenon.tsx

@@ -1,51 +1,53 @@
 import { enableMapSet } from 'immer';
-import {
-  createRef,
-  memo,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  type NamedExoticComponent,
-} from 'react';
+import { createRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
 import { Animated, StyleSheet, useWindowDimensions } from 'react-native';
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
 import { useImmer } from 'use-immer';
 import MainContext from '../contexts/MainContext';
-import { detailsData } from '../core/data';
 import { getVerticalSafeMargin } from '../core/utils';
 import { useConsoleInterceptor, useNetworkInterceptor } from '../hooks';
 import colors from '../theme/colors';
 import { DebuggerPanel, type DebuggerState } from '../types';
 import { Bubble, ConsolePanel, DebuggerHeader, DetailsViewer, NetworkPanel } from './components';
 
-interface XenonComponentMethods {
-  isVisible(): boolean;
-  show(): void;
-  hide(): void;
-}
-
-interface XenonComponentProps {
-  autoInspectNetworkEnabled?: boolean;
-  autoInspectConsoleEnabled?: boolean;
-  bubbleSize?: number;
-  idleBubbleOpacity?: number;
-}
-
-interface ReactNativeXenon extends XenonComponentMethods {
-  Component: NamedExoticComponent<XenonComponentProps>;
-}
-
-enableMapSet();
-
-const rootRef = createRef<XenonComponentMethods>();
-
-const XenonComponent = memo<XenonComponentProps>(
-  ({
+namespace Xenon {
+  interface Methods {
+    isVisible(): boolean;
+    show(): void;
+    hide(): void;
+  }
+
+  interface Props {
+    autoInspectNetworkEnabled?: boolean;
+    autoInspectConsoleEnabled?: boolean;
+    bubbleSize?: number;
+    idleBubbleOpacity?: number;
+  }
+
+  enableMapSet();
+
+  const ref = createRef<Methods>();
+
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      ...StyleSheet.absoluteFillObject,
+      top: undefined,
+      bottom: undefined,
+      zIndex: 9999,
+      backgroundColor: colors.lightGray,
+    },
+    safeArea: {
+      flex: 1,
+    },
+  });
+
+  const Debugger = ({
     autoInspectNetworkEnabled = true,
     autoInspectConsoleEnabled = true,
     bubbleSize = 40,
     idleBubbleOpacity = 0.5,
-  }) => {
+  }: Props) => {
     const { width, height } = useWindowDimensions();
     const pan = useRef(new Animated.ValueXY({ x: 0, y: getVerticalSafeMargin(height) }));
 
@@ -53,22 +55,31 @@ const XenonComponent = memo<XenonComponentProps>(
       visibility: 'hidden',
       position: 'bottom',
       selectedPanel: DebuggerPanel.Network,
+      detailsData: null,
     });
 
     const detailsShown = useMemo(
-      () => !debuggerState.selectedPanel && !!detailsData.value,
-      [debuggerState.selectedPanel],
+      () => !debuggerState.selectedPanel && !!debuggerState.detailsData,
+      [debuggerState.detailsData, debuggerState.selectedPanel],
+    );
+
+    const containerStyle = useMemo(
+      () => [
+        styles.container,
+        { [debuggerState.position]: 0, height: Math.min(width, height) * 0.75 },
+      ],
+      [debuggerState.position, height, width],
     );
 
     const networkInterceptor = useNetworkInterceptor({
       autoEnabled: autoInspectNetworkEnabled,
     });
 
-    const logInterceptor = useConsoleInterceptor({
+    const consoleInterceptor = useConsoleInterceptor({
       autoEnabled: autoInspectConsoleEnabled,
     });
 
-    useImperativeHandle(rootRef, () => {
+    useImperativeHandle(ref, () => {
       const changeVisibility = (condition: boolean, value: DebuggerState['visibility']) => {
         if (!condition) return;
 
@@ -90,80 +101,40 @@ const XenonComponent = memo<XenonComponentProps>(
       };
     }, [debuggerState.visibility, setDebuggerState]);
 
-    const renderContent = () => {
-      switch (debuggerState.visibility) {
-        case 'bubble':
-          return (
-            <Bubble
-              bubbleSize={bubbleSize}
-              idleBubbleOpacity={idleBubbleOpacity}
-              pan={pan}
-              screenWidth={width}
-              screenHeight={height}
-            />
-          );
-        case 'panel':
-          return (
-            <SafeAreaProvider
-              style={[
-                styles.container,
-                // eslint-disable-next-line react-native/no-inline-styles
-                {
-                  [debuggerState.position]: 0,
-                  height: Math.min(width, height) * 0.75,
-                },
-              ]}
-            >
-              <SafeAreaView style={styles.safeArea}>
-                <DebuggerHeader detailsShown={detailsShown} />
-                {debuggerState.selectedPanel === DebuggerPanel.Network && <NetworkPanel />}
-                {debuggerState.selectedPanel === DebuggerPanel.Console && <ConsolePanel />}
-                {detailsShown && <DetailsViewer />}
-              </SafeAreaView>
-            </SafeAreaProvider>
-          );
-        default:
-          return null;
-      }
-    };
-
     return (
       <MainContext.Provider
-        value={{ debuggerState, setDebuggerState, networkInterceptor, logInterceptor }}
+        value={{ debuggerState, setDebuggerState, networkInterceptor, consoleInterceptor }}
       >
-        {renderContent()}
+        {debuggerState.visibility === 'bubble' && (
+          <Bubble
+            bubbleSize={bubbleSize}
+            idleBubbleOpacity={idleBubbleOpacity}
+            pan={pan}
+            screenWidth={width}
+            screenHeight={height}
+          />
+        )}
+
+        {debuggerState.visibility === 'panel' && (
+          <SafeAreaProvider style={containerStyle}>
+            <SafeAreaView style={styles.safeArea}>
+              <DebuggerHeader />
+              {debuggerState.selectedPanel === DebuggerPanel.Network && <NetworkPanel />}
+              {debuggerState.selectedPanel === DebuggerPanel.Console && <ConsolePanel />}
+              {detailsShown && <DetailsViewer />}
+            </SafeAreaView>
+          </SafeAreaProvider>
+        )}
       </MainContext.Provider>
     );
-  },
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    ...StyleSheet.absoluteFillObject,
-    top: undefined,
-    bottom: undefined,
-    zIndex: 9999,
-    backgroundColor: colors.lightGray,
-  },
-  safeArea: {
-    flex: 1,
-  },
-});
-
-XenonComponent.displayName = 'Xenon';
-
-const Xenon: ReactNativeXenon = {
-  isVisible() {
-    return rootRef.current?.isVisible() ?? false;
-  },
-  show() {
-    rootRef.current?.show();
-  },
-  hide() {
-    rootRef.current?.hide();
-  },
-  Component: XenonComponent,
-};
+  };
+
+  export const isVisible = () => ref.current?.isVisible() ?? false;
+  export const show = (): void => ref.current?.show();
+  export const hide = (): void => ref.current?.hide();
+
+  export const Component = memo(Debugger);
+  Component.displayName = 'Xenon';
+}
 
 export default Xenon;

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

@@ -1,16 +1,18 @@
-import { detailsData } from '../../../core/data';
+import { useContext } from 'react';
+import { MainContext } from '../../../contexts';
 import { DebuggerPanel } from '../../../types';
 import LogMessageDetails from './LogMessageDetails';
 import NetworkRequestDetails from './NetworkRequestDetails';
 
 export default function DetailsViewer() {
-  if (!detailsData.value) return null;
+  const { debuggerState } = useContext(MainContext)!;
+  const detailsData = debuggerState.detailsData;
 
-  switch (true) {
-    case DebuggerPanel.Network in detailsData.value:
-      return <NetworkRequestDetails item={detailsData.value.network} />;
-    case DebuggerPanel.Console in detailsData.value:
-      return <LogMessageDetails item={detailsData.value.console} />;
+  switch (detailsData?.type) {
+    case DebuggerPanel.Network:
+      return <NetworkRequestDetails item={detailsData.data} />;
+    case DebuggerPanel.Console:
+      return <LogMessageDetails item={detailsData.data} />;
     default:
       return null;
   }

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

@@ -1,21 +1,17 @@
-import { useRef, useState, type JSX, type ReactNode } from 'react';
-import { ScrollView, Share, StyleSheet, TouchableOpacity } from 'react-native';
-import { URL } from 'react-native-url-polyfill';
-import colors from '../../../theme/colors';
-import {
-  NetworkType,
-  type HttpRequest,
-  type NetworkTab,
-  type WebSocketRequest,
-} from '../../../types';
+import { useContext, useRef, type JSX, type ReactNode } from 'react';
+import { ScrollView, StyleSheet } from 'react-native';
+import { MainContext } from '../../../contexts';
 import {
-  convertToCurl,
+  beautify,
   formatRequestDuration,
   formatRequestMethod,
   formatRequestStatusCode,
+  getNetworkUtils,
+  keyValueToString,
   limitChar,
 } from '../../../core/utils';
-import NetworkDetailsHeader from '../headers/NetworkRequestDetailsHeader';
+import colors from '../../../theme/colors';
+import { type DetailTab, type HttpRequest, type WebSocketRequest } from '../../../types';
 import NetworkRequestDetailsItem from '../items/NetworkRequestDetailsItem';
 
 interface NetworkRequestDetailsProps {
@@ -23,28 +19,33 @@ interface NetworkRequestDetailsProps {
 }
 
 export default function NetworkRequestDetails({ item }: NetworkRequestDetailsProps) {
-  const [selectedTab, setSelectedTab] = useState<NetworkTab>('headers');
-
-  const isWebSocket = item.type === NetworkType.WS;
-
-  const requestUrl = new URL(item.url);
-
-  const headerShown = !!item.url;
-  const queryStringParametersShown = !!requestUrl.search;
-  const bodyShown = !isWebSocket && !!item.body;
-  const responseShown = !isWebSocket && !!item.response;
-  const messagesShown = isWebSocket && !!item.messages;
-
-  const content = useRef<Record<NetworkTab, JSX.Element | null>>({
+  const {
+    debuggerState: { detailsData },
+  } = useContext(MainContext)!;
+
+  const beautified = useRef<boolean | null>(null);
+  const shouldBeautifiedRefUpdate = beautified.current !== detailsData?.beautified;
+
+  const {
+    isHttp,
+    requestUrl,
+    overviewShown,
+    headersShown,
+    requestShown,
+    responseShown,
+    messagesShown,
+  } = getNetworkUtils(item);
+
+  const content = useRef<Record<Exclude<DetailTab, 'logMessage'>, JSX.Element | null>>({
+    overview: null,
     headers: null,
-    queryStringParameters: null,
-    body: null,
+    request: null,
     response: null,
     messages: null,
   });
 
-  if (headerShown && !content.current.headers) {
-    content.current.headers = (
+  if (overviewShown && !content.current.overview) {
+    content.current.overview = (
       <>
         <NetworkRequestDetailsItem label="Request Type" content={item.type} />
 
@@ -52,7 +53,7 @@ export default function NetworkRequestDetails({ item }: NetworkRequestDetailsPro
 
         <NetworkRequestDetailsItem
           label="Request Method"
-          content={formatRequestMethod(isWebSocket ? undefined : item.method)}
+          content={formatRequestMethod(isHttp ? (item as HttpRequest).method : undefined)}
         />
 
         <NetworkRequestDetailsItem
@@ -64,75 +65,87 @@ export default function NetworkRequestDetails({ item }: NetworkRequestDetailsPro
           label="Status Code"
           content={formatRequestStatusCode(item.status)}
         />
+      </>
+    );
+  }
 
-        {isWebSocket && (
-          <NetworkRequestDetailsItem label="Headers" content={limitChar(item.options?.headers)} />
-        )}
-
-        {!isWebSocket && (
-          <NetworkRequestDetailsItem label="Response Headers" content={item.responseHeaders} />
+  if (headersShown && !content.current.headers) {
+    content.current.headers = (
+      <>
+        {!isHttp && (
+          <NetworkRequestDetailsItem
+            label="Headers"
+            content={limitChar((item as WebSocketRequest).options?.headers)}
+          />
         )}
 
-        {!isWebSocket && (
-          <NetworkRequestDetailsItem label="Request Headers" content={item.requestHeadersString} />
+        {isHttp && (
+          <NetworkRequestDetailsItem
+            label="Request Headers"
+            content={(item as HttpRequest).requestHeadersString}
+          />
         )}
 
-        {!isWebSocket && (
-          <TouchableOpacity
-            activeOpacity={0.8}
-            onPress={() =>
-              Share.share({
-                message: convertToCurl(item.method, item.url, item.requestHeaders, item.body),
-              })
-            }
-            style={styles.buttonContent}
-          >
-            <NetworkRequestDetailsItem content="Share as cURL" />
-          </TouchableOpacity>
+        {isHttp && (
+          <NetworkRequestDetailsItem
+            label="Response Headers"
+            content={(item as HttpRequest).responseHeaders}
+          />
         )}
       </>
     );
   }
 
-  if (queryStringParametersShown && !content.current.queryStringParameters) {
+  if (requestShown && shouldBeautifiedRefUpdate) {
     const queryStringParameters: ReactNode[] = [];
 
     requestUrl.searchParams.forEach((value, name) => {
       queryStringParameters.push(
-        <NetworkRequestDetailsItem key={name} label={name} content={value} />,
+        <NetworkRequestDetailsItem
+          key={keyValueToString(name, value, null)}
+          label="Query String"
+          content={keyValueToString(name, value, null)}
+        />,
       );
     });
 
-    content.current.queryStringParameters = <>{queryStringParameters}</>;
+    content.current.request = (
+      <>
+        {queryStringParameters}
+        <NetworkRequestDetailsItem
+          label="Body"
+          content={beautify((item as HttpRequest).body, detailsData?.beautified ?? false)}
+        />
+      </>
+    );
   }
 
-  if (bodyShown && !content.current.body) {
-    content.current.body = <NetworkRequestDetailsItem content={limitChar(item.body)} />;
+  if (responseShown && shouldBeautifiedRefUpdate) {
+    content.current.response = (
+      <NetworkRequestDetailsItem
+        label="Response"
+        content={beautify((item as HttpRequest).response, detailsData?.beautified ?? false)}
+      />
+    );
   }
 
-  if (responseShown && !content.current.response) {
-    content.current.response = <NetworkRequestDetailsItem content={limitChar(item.response)} />;
+  if (messagesShown && !content.current.messages) {
+    content.current.messages = (
+      <NetworkRequestDetailsItem
+        label="Messages"
+        content={`\n${(item as WebSocketRequest).messages}`}
+      />
+    );
   }
 
-  if (messagesShown && !content.current.messages) {
-    content.current.messages = <NetworkRequestDetailsItem content={item.messages} />;
+  if (shouldBeautifiedRefUpdate) {
+    beautified.current = detailsData?.beautified ?? false;
   }
 
   return (
-    <>
-      <NetworkDetailsHeader
-        selectedTab={selectedTab}
-        onChangeTab={setSelectedTab}
-        headersShown={headerShown}
-        queryStringParametersShown={queryStringParametersShown}
-        bodyShown={bodyShown}
-        responseShown={responseShown}
-        messagesShown={messagesShown}
-      />
-      <ScrollView style={styles.container} contentContainerStyle={styles.contentContainer}>
-        {content.current[selectedTab]}
-      </ScrollView>
-    </>
+    <ScrollView style={styles.container} contentContainerStyle={styles.contentContainer}>
+      {content.current[detailsData!.selectedTab as keyof typeof content.current]}
+    </ScrollView>
   );
 }
 
@@ -141,7 +154,7 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   contentContainer: {
-    padding: 8,
+    paddingHorizontal: 8,
   },
   divider: {
     height: 1,