react-native-xenon 0.1.0 → 0.2.0

package/src/types/websocket.ts

@@ -2,12 +2,11 @@ import type { NetworkRequest, NetworkType } from './common';
 
 export interface WebSocketRequest extends NetworkRequest {
   type: NetworkType.WS;
-  uri: string;
-  protocols?: string | string[] | null;
+  protocols?: string | string[];
   options?: {
     headers: { [headerName: string]: string };
     [optionName: string]: any;
-  } | null;
+  };
   messages?: string;
   closeReason?: string;
   serverError?: { message?: string };
@@ -16,7 +15,7 @@ export interface WebSocketRequest extends NetworkRequest {
 
 export type WebSocketConnectCallback =
   | ((
-      uri: WebSocketRequest['uri'],
+      url: string,
       protocols?: WebSocketRequest['protocols'],
       options?: WebSocketRequest['options'],
       socketId?: number,
@@ -26,19 +25,15 @@ export type WebSocketConnectCallback =
 export type WebSocketSendCallback = ((data: string, socketId: number) => void) | null;
 
 export type WebSocketCloseCallback =
-  | ((
-      code: WebSocketRequest['status'],
-      reason: WebSocketRequest['closeReason'],
-      socketId: number,
-    ) => void)
+  | ((code: number, reason: string, socketId: number) => void)
   | null;
 
-export type WebSocketOnOpenCallback = ((socketId: number) => void) | null;
+export type WebSocketOnOpenCallback = ((socketId: number, duration: number) => void) | null;
 
 export type WebSocketOnMessageCallback = ((socketId: number, message: any) => void) | null;
 
 export type WebSocketOnErrorCallback =
-  | ((socketId: number, data: WebSocketRequest['serverError']) => void)
+  | ((socketId: number, error: WebSocketRequest['serverError']) => void)
   | null;
 
 export type WebSocketOnCloseCallback =

package/src/ui/Xenon.tsx

@@ -1,9 +1,10 @@
+import { enableMapSet } from 'immer';
 import { createRef, useImperativeHandle, useRef, useState, type JSX } from 'react';
 import { Animated, SafeAreaView, StyleSheet, useWindowDimensions, View } from 'react-native';
+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,8 +12,8 @@ interface XenonComponentMethods {
 }
 
 interface XenonComponentProps {
-  autoInspectNetwork?: boolean;
-  autoInspectConsole?: boolean;
+  autoInspectNetworkEnabled?: boolean;
+  autoInspectConsoleEnabled?: boolean;
   bubbleSize?: number;
 }
 
@@ -20,11 +21,12 @@ interface ReactNativeXenon extends XenonComponentMethods {
   Component(props: XenonComponentProps): JSX.Element;
 }
 
+enableMapSet();
 const rootRef = createRef<XenonComponentMethods>();
 
 function XenonComponent({
-  autoInspectNetwork = true,
-  autoInspectConsole = true,
+  autoInspectNetworkEnabled = true,
+  autoInspectConsoleEnabled = true,
   bubbleSize = 40,
 }: XenonComponentProps) {
   const { width: screenWidth, height: screenHeight } = useWindowDimensions();
@@ -41,11 +43,11 @@ function XenonComponent({
   const [panelSelected, setPanelSelected] = useState<DebuggerPanel | null>(DebuggerPanel.Network);
 
   const networkInterceptor = useNetworkInterceptor({
-    autoEnabled: autoInspectNetwork,
+    autoEnabled: autoInspectNetworkEnabled,
   });
 
   const logInterceptor = useConsoleInterceptor({
-    autoEnabled: autoInspectConsole,
+    autoEnabled: autoInspectConsoleEnabled,
   });
 
   useImperativeHandle(

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

@@ -7,7 +7,13 @@ 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';
 
@@ -20,9 +26,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 +47,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)} />

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

@@ -3,6 +3,14 @@ import { StyleSheet, Text, View } from 'react-native';
 export default function NetworkPanelHeader() {
   return (
     <View style={styles.container}>
+      <View style={styles.headerColumn}>
+        <Text numberOfLines={1} style={styles.itemText}>
+          Method
+        </Text>
+      </View>
+
+      <View style={styles.divider} />
+
       <View style={[styles.headerColumn, styles.headerMainColumn]}>
         <Text numberOfLines={1} style={styles.itemText}>
           Name
@@ -13,7 +21,7 @@ export default function NetworkPanelHeader() {
 
       <View style={styles.headerColumn}>
         <Text numberOfLines={1} style={styles.itemText}>
-          Method
+          Duration
         </Text>
       </View>
 
@@ -37,7 +45,7 @@ const styles = StyleSheet.create({
     borderRadius: 4,
   },
   headerMainColumn: {
-    flex: 7,
+    flex: 5.5,
     flexShrink: 1,
   },
   headerColumn: {

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/NetworkPanelItem.tsx

@@ -1,17 +1,28 @@
 import { useMemo } from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { URL } from 'react-native-url-polyfill';
-import type { HttpRequest, WebSocketRequest } from '../../../types';
-import { formatMethod, formatStatusCode } from '../../../utils';
+import type { HttpRequest, NetworkRequest } from '../../../types';
+import {
+  formatRequestDuration,
+  formatRequestMethod,
+  formatRequestStatusCode,
+} from '../../../utils';
 
 interface NetworkPanelItemProps {
-  name: HttpRequest['url'] | WebSocketRequest['uri'];
   method?: HttpRequest['method'];
-  status?: HttpRequest['status'] | WebSocketRequest['status'];
+  name: NetworkRequest['url'];
+  duration?: NetworkRequest['duration'];
+  status?: NetworkRequest['status'];
   onPress: () => void;
 }
 
-export default function NetworkPanelItem({ name, status, method, onPress }: NetworkPanelItemProps) {
+export default function NetworkPanelItem({
+  method,
+  name,
+  duration,
+  status,
+  onPress,
+}: NetworkPanelItemProps) {
   const requestName = useMemo(() => {
     if (!name) return '[failed]';
 
@@ -28,6 +39,12 @@ export default function NetworkPanelItem({ name, status, method, onPress }: Netw
 
   return (
     <TouchableOpacity onPress={onPress} style={styles.container}>
+      <View style={styles.column}>
+        <Text numberOfLines={1} style={styles.text}>
+          {formatRequestMethod(method)}
+        </Text>
+      </View>
+
       <View style={[styles.column, styles.mainColumn]}>
         <Text numberOfLines={1} style={styles.text}>
           {requestName}
@@ -36,13 +53,13 @@ export default function NetworkPanelItem({ name, status, method, onPress }: Netw
 
       <View style={styles.column}>
         <Text numberOfLines={1} style={styles.text}>
-          {formatMethod(method)}
+          {formatRequestDuration(duration)}
         </Text>
       </View>
 
       <View style={styles.column}>
         <Text numberOfLines={1} style={styles.text}>
-          {formatStatusCode(status)}
+          {formatRequestStatusCode(status)}
         </Text>
       </View>
     </TouchableOpacity>
@@ -55,7 +72,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
   },
   mainColumn: {
-    flex: 7,
+    flex: 5.5,
     flexShrink: 1,
   },
   column: {

package/src/ui/components/panels/NetworkPanel.tsx

@@ -28,8 +28,9 @@ export default function NetworkPanel() {
 
       return (
         <NetworkPanelItem
-          name={isWebSocket ? item.uri : item.url}
           method={isWebSocket ? undefined : item.method}
+          name={item.url}
+          duration={item.duration}
           status={item.status}
           onPress={onPress}
         />

package/src/utils.ts

@@ -17,9 +17,12 @@ export const getHttpInterceptorId = () => {
 export const keyValueToString = (key: string, value: any): string =>
   `${key}: ${limitChar(value)}\n`;
 
-export const formatMethod = (method?: string) => method ?? 'GET';
+export const formatRequestMethod = (method?: string) => method ?? 'GET';
 
-export const formatStatusCode = (statusCode?: number) => `${statusCode ?? 'pending'}`;
+export const formatRequestDuration = (duration?: number) =>
+  duration ? `${duration}ms` : 'pending';
+
+export const formatRequestStatusCode = (statusCode?: number) => `${statusCode ?? 'pending'}`;
 
 export const formatLogMessage = (type: string, values: any[]) => {
   const message: string = values.reduce((pre, cur, index, array) => {