react-native-xenon 0.6.0 → 1.0.0

package/src/core/refs.ts

@@ -0,0 +1,29 @@
+import { createRef } from 'react';
+import type { IndexedStackMethods } from '../ui/components/common/IndexedStack';
+
+export enum DebuggerVisibility {
+  Hidden = -1,
+  Bubble = 0,
+  Panel = 1,
+}
+
+export enum PanelState {
+  Network = 0,
+  Console = 1,
+  NetworkDetail = 2,
+  ConsoleDetail = 3,
+}
+
+export enum HeaderState {
+  Debugger = 0,
+  Network = 1,
+  Console = 2,
+}
+
+const refs = {
+  debugger: createRef<IndexedStackMethods<DebuggerVisibility>>(),
+  panel: createRef<IndexedStackMethods<PanelState>>(),
+  header: createRef<IndexedStackMethods<HeaderState>>(),
+};
+
+export default refs;

package/src/core/utils.ts

@@ -1,12 +1,17 @@
 import { URL } from 'react-native-url-polyfill';
-import { NetworkType, type HttpRequest, type WebSocketRequest } from '../types';
+import { NetworkType, type HttpRequest, type LogMessage, type WebSocketRequest } from '../types';
+import colors from '../theme/colors';
+
+export const getNetworkUtils = (data?: HttpRequest | WebSocketRequest) => {
+  if (!data || !data.url) return {};
 
-export const getNetworkUtils = (data: HttpRequest | WebSocketRequest) => {
   const isHttp = data?.type !== NetworkType.WS;
   const requestUrl = new URL(data.url);
 
   const overviewShown = !!data.url;
-  const headersShown = isHttp && (!!data.requestHeaders || !!data.responseHeaders);
+  const httpHeadersShown = isHttp && (!!data.requestHeaders?.size || !!data.responseHeaders?.size);
+  const websocketHeadersShown = !isHttp && !!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;
@@ -22,6 +27,33 @@ export const getNetworkUtils = (data: HttpRequest | WebSocketRequest) => {
   };
 };
 
+const hexToHexAlpha = (hex: string, opacity: number) =>
+  `${hex}${`${(Math.min(Math.max(opacity, 0), 1) * 255).toString(16)}0`.slice(0, 2)}`;
+
+export const getConsoleTypeColor = (type: LogMessage['type']) => {
+  let color: string;
+  switch (type) {
+    case 'log':
+      color = colors.white;
+      break;
+    case 'info':
+      color = colors.blue;
+      break;
+    case 'warn':
+    case 'debug':
+    case 'trace':
+      color = colors.yellow;
+      break;
+    case 'error':
+      color = colors.red;
+      break;
+    default:
+      color = colors.white;
+  }
+
+  return hexToHexAlpha(color, 0.25);
+};
+
 //#region metrics
 export const getVerticalSafeMargin = (screenHeight: number) => screenHeight / 8;
 
@@ -36,7 +68,7 @@ export const getHttpInterceptorId = () => {
 //#endregion
 
 //#region formatters
-export const limitChar = (value: any, limit = 5000) => {
+const limitChar = (value: any, limit = 5000) => {
   const stringValue = typeof value === 'string' ? value : JSON.stringify(value ?? '');
 
   return stringValue.length > limit
@@ -53,24 +85,23 @@ export const keyValueToString = (
 
 export const formatRequestMethod = (method?: string) => method ?? 'GET';
 
-export const formatRequestDuration = (duration?: number) =>
-  duration ? `${duration}ms` : 'pending';
+export const formatRequestDuration = (startTime?: number, endTime?: number) => {
+  if (typeof startTime !== 'number' || typeof endTime !== 'number') return 'pending';
+  return `${endTime - startTime}ms`;
+};
 
 export const formatRequestStatusCode = (statusCode?: number) => `${statusCode ?? 'pending'}`;
 
-export const formatLogMessage = (type: string, values: any[]) => {
-  const message: string = values.reduce(
-    (pre, cur, index) => pre + (!index ? '' : ', ') + limitChar(cur),
-    '',
-  );
-
-  return `${type.toUpperCase()}: ${message}`;
+export const formatLogMessage = (values: any[]) => {
+  return values.reduce((pre, cur, index) => pre + (!index ? '' : ', ') + limitChar(cur), '');
 };
 
 export const beautify = (data: any, beautified: boolean) => {
+  if (!data) return '';
+
   try {
     const res = typeof data === 'string' ? JSON.parse(data) : data;
-    return beautified ? JSON.stringify(res, null, 2) : limitChar(res);
+    return beautified ? JSON.stringify(res, null, 4) : limitChar(res);
   } catch (error) {
     return limitChar(data);
   }

package/src/hooks/useNetworkInterceptor.ts

@@ -53,15 +53,10 @@ export default function useNetworkInterceptor({ autoEnabled }: NetworkIntercepto
       setNetworkRequests((draft: NetworkRequests<HttpRequest>) => {
         if (!draft.get(id)) return draft;
 
-        const requestHeaderNewLine: Parameters<typeof keyValueToString>[2] = draft.get(id)!
-          .requestHeadersString?.length
-          ? 'leading'
-          : null;
-
-        const currentHeaderLine = keyValueToString(header, value, requestHeaderNewLine);
+        const currentHeaderLine = keyValueToString(header, value);
 
         const fetchRequestHeaderLineRegex = RegExp(
-          keyValueToString(NETWORK_REQUEST_HEADER, NetworkType.Fetch, requestHeaderNewLine),
+          keyValueToString(NETWORK_REQUEST_HEADER, NetworkType.Fetch),
           'gi',
         );
 
@@ -72,20 +67,19 @@ export default function useNetworkInterceptor({ autoEnabled }: NetworkIntercepto
         if (isFetchInXHR) {
           draft.delete(id);
         } else {
-          draft.get(id)!.requestHeadersString ??= '';
-          draft.get(id)!.requestHeadersString += currentHeaderLine;
-          draft.get(id)!.requestHeaders ??= {};
-          draft.get(id)!.requestHeaders![header] = value;
+          draft.get(id)!.requestHeaders ??= new Map();
+          draft.get(id)!.requestHeaders!.set(header, value);
         }
       });
     };
 
-    const sendCallback: HttpHandlers['send'] = (id, data) => {
+    const sendCallback: HttpHandlers['send'] = (id, startTime, data) => {
       if (!id) return;
 
       setNetworkRequests((draft: NetworkRequests<HttpRequest>) => {
         if (!draft.get(id)) return draft;
 
+        draft.get(id)!.startTime = startTime;
         draft.get(id)!.body = data;
       });
     };
@@ -111,7 +105,7 @@ export default function useNetworkInterceptor({ autoEnabled }: NetworkIntercepto
       id,
       status,
       timeout,
-      duration,
+      endTime,
       response,
       responseURL,
       responseType,
@@ -123,7 +117,7 @@ export default function useNetworkInterceptor({ autoEnabled }: NetworkIntercepto
 
         draft.get(id)!.status = status;
         draft.get(id)!.timeout = timeout;
-        draft.get(id)!.duration = duration;
+        draft.get(id)!.endTime = endTime;
         draft.get(id)!.response = response;
         if (responseURL) draft.get(id)!.url = responseURL;
         draft.get(id)!.responseType = responseType;
@@ -148,11 +142,18 @@ export default function useNetworkInterceptor({ autoEnabled }: NetworkIntercepto
   }, [setNetworkRequests]);
 
   const enableWebSocketInterception = useCallback(() => {
-    const connectCallback: WebSocketHandlers['connect'] = (url, protocols, options, socketId) => {
+    const connectCallback: WebSocketHandlers['connect'] = (
+      startTime,
+      url,
+      protocols,
+      options,
+      socketId,
+    ) => {
       if (typeof socketId !== 'number') return;
 
       setNetworkRequests((draft: NetworkRequests<WebSocketRequest>) => {
         draft.set(`${socketId}`, {
+          startTime,
           url,
           type: NetworkType.WS,
           protocols,
@@ -168,11 +169,7 @@ export default function useNetworkInterceptor({ autoEnabled }: NetworkIntercepto
         if (!draft.get(`${socketId}`)) return draft;
 
         draft.get(`${socketId}`)!.messages ??= '';
-        draft.get(`${socketId}`)!.messages += keyValueToString(
-          'SENT',
-          data,
-          draft.get(`${socketId}`)!.messages?.length ? 'leading' : null,
-        );
+        draft.get(`${socketId}`)!.messages += keyValueToString('SENT', data);
       });
     };
 
@@ -187,13 +184,13 @@ export default function useNetworkInterceptor({ autoEnabled }: NetworkIntercepto
       });
     };
 
-    const onOpenCallback: WebSocketHandlers['onOpen'] = (socketId, duration) => {
+    const onOpenCallback: WebSocketHandlers['onOpen'] = (socketId, endTime) => {
       if (typeof socketId !== 'number') return;
 
       setNetworkRequests((draft: NetworkRequests<WebSocketRequest>) => {
         if (!draft.get(`${socketId}`)) return draft;
 
-        draft.get(`${socketId}`)!.duration = duration;
+        draft.get(`${socketId}`)!.endTime = endTime;
       });
     };
 
@@ -204,11 +201,7 @@ export default function useNetworkInterceptor({ autoEnabled }: NetworkIntercepto
         if (!draft.get(`${socketId}`)) return draft;
 
         draft.get(`${socketId}`)!.messages ??= '';
-        draft.get(`${socketId}`)!.messages += keyValueToString(
-          'RECEIVED',
-          message,
-          draft.get(`${socketId}`)!.messages?.length ? 'leading' : null,
-        );
+        draft.get(`${socketId}`)!.messages += keyValueToString('RECEIVED', message);
       });
     };
 

package/src/interceptors/FetchInterceptor.ts

@@ -1,11 +1,5 @@
 import { NETWORK_REQUEST_HEADER } from '../core/constants';
-import {
-  formatRequestMethod,
-  frozen,
-  getHttpInterceptorId,
-  keyValueToString,
-  singleton,
-} from '../core/utils';
+import { formatRequestMethod, frozen, getHttpInterceptorId, singleton } from '../core/utils';
 import { NetworkType } from '../types';
 import HttpInterceptor from './HttpInterceptor';
 
@@ -77,13 +71,11 @@ export default class FetchInterceptor extends HttpInterceptor {
       //#endregion
 
       //#region send
-      const startTime = Date.now();
-      sendCallback?.(interceptionId, init?.body ?? null);
+      sendCallback?.(interceptionId, Date.now(), init?.body ?? null);
       //#endregion
 
       const response = await originalFetch.call(this, input, requestInit);
 
-      const endTime = Date.now();
       const clonedResponse = response.clone();
       const clonedResponseHeaders = clonedResponse.headers;
 
@@ -94,28 +86,23 @@ export default class FetchInterceptor extends HttpInterceptor {
       const responseContentType = contentTypeString ? contentTypeString.split(';')[0] : undefined;
       const responseSize = contentLengthString ? parseInt(contentLengthString, 10) : undefined;
 
-      let responseHeaders: string = '';
+      let responseHeaders: Map<string, string> = new Map();
 
-      for (const [headerKey, headerValue] of clonedResponseHeaders.entries()) {
-        responseHeaders += keyValueToString(
-          headerKey,
-          headerValue,
-          responseHeaders.length ? 'leading' : null,
-        );
-      }
+      clonedResponseHeaders.forEach((headerValue: string, headerKey: string) => {
+        responseHeaders.set(headerKey, headerValue);
+      });
 
       headerReceivedCallback?.(interceptionId, responseContentType, responseSize, responseHeaders);
       //#endregion
 
       //#region response
       const responseBody: string | null = await clonedResponse.text().catch(() => null);
-      const duration = endTime - startTime;
 
       responseCallback?.(
         interceptionId,
         clonedResponse.status,
         0,
-        duration,
+        Date.now(),
         responseBody,
         clonedResponse.url,
         clonedResponse.type,

package/src/interceptors/WebSocketInterceptor.ts

@@ -23,7 +23,6 @@ export default class WebSocketInterceptor extends NetworkInterceptor<WebSocketHa
 
   private eventEmitter: NativeEventEmitter | null = null;
   private subscriptions: EmitterSubscription[] = [];
-  private readonly startTimes: Map<number, number> = new Map();
 
   private arrayBufferToString(data?: string) {
     try {
@@ -44,12 +43,7 @@ export default class WebSocketInterceptor extends NetworkInterceptor<WebSocketHa
 
     this.subscriptions = [
       this.eventEmitter.addListener('websocketOpen', ev => {
-        const startTime = this.startTimes.get(ev.id);
-        const endTime = Date.now();
-        const duration = endTime - (startTime ?? 0);
-        this.startTimes.delete(ev.id);
-
-        this.handlers.onOpen?.(ev.id, duration);
+        this.handlers.onOpen?.(ev.id, Date.now());
       }),
       this.eventEmitter.addListener('websocketMessage', ev => {
         this.handlers.onMessage?.(
@@ -82,11 +76,8 @@ export default class WebSocketInterceptor extends NetworkInterceptor<WebSocketHa
 
     const { connectCallback, sendCallback, closeCallback } = this.getCallbacks();
 
-    const startTimes = this.startTimes;
     NativeWebSocketModule.connect = function (...args) {
-      connectCallback?.(...args);
-
-      startTimes.set(args[3], Date.now());
+      connectCallback?.(Date.now(), ...args);
 
       originalWebSocketConnect.call(this, ...args);
     };

package/src/interceptors/XHRInterceptor.ts

@@ -37,9 +37,7 @@ export default class XHRInterceptor extends HttpInterceptor {
     };
 
     XMLHttpRequest.prototype.send = function (data) {
-      sendCallback?.(this._interceptionId, data);
-
-      const startTime = Date.now();
+      sendCallback?.(this._interceptionId, Date.now(), data);
 
       this.addEventListener?.('readystatechange', () => {
         if (!isInterceptorEnabled()) return;
@@ -54,23 +52,30 @@ export default class XHRInterceptor extends HttpInterceptor {
 
           const responseSize = contentLengthString ? parseInt(contentLengthString, 10) : undefined;
 
+          const responseHeadersArray = this.getAllResponseHeaders().split('\n');
+          const responseHeaders = responseHeadersArray.reduce<Map<string, string>>(
+            (acc, header) => {
+              const [key, value] = header.split(': ');
+              if (key && value) acc.set(key, value);
+              return acc;
+            },
+            new Map(),
+          );
+
           headerReceivedCallback?.(
             this._interceptionId,
             responseContentType,
             responseSize,
-            this.getAllResponseHeaders(),
+            responseHeaders,
           );
         }
 
         if (this.readyState === this.DONE) {
-          const endTime = Date.now();
-          const duration = endTime - startTime;
-
           responseCallback?.(
             this._interceptionId,
             this.status,
             this.timeout,
-            duration,
+            Date.now(),
             this.response,
             this.responseURL,
             this.responseType,

package/src/theme/colors.ts

@@ -1,9 +1,14 @@
 const colors = Object.freeze({
-  black: '#000000',
-  red: '#ef4444',
-  green: '#22c55e',
-  gray: '#888888',
-  lightGray: '#AAAAAA',
+  black: '#0a0a0a',
+  red: '#ff6467',
+  green: '#05df72',
+  blue: '#51a2ff',
+  yellow: '#fcc800',
+  cyan: '#00d3f2',
+  purple: '#a684ff',
+  gray: '#a1a1a1',
+  lightGray: '#e5e5e5',
+  white: '#ffffff',
 });
 
 export default colors;

package/src/types/common.ts

@@ -16,15 +16,14 @@ export type ID = string | undefined;
 export interface NetworkRequest {
   url: string;
   status?: number;
-  duration?: number;
+  startTime?: number;
+  endTime?: number;
 }
 
 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;

package/src/types/http.ts

@@ -3,12 +3,11 @@ import type { ID, NetworkRequest, NetworkType } from './common';
 export interface HttpRequest extends NetworkRequest {
   type: NetworkType.Fetch | NetworkType.XHR;
   method: string;
-  requestHeaders?: Record<string, string>;
-  requestHeadersString?: string;
+  requestHeaders?: Map<string, string>;
   body?: any;
   responseContentType?: string;
   responseSize?: number;
-  responseHeaders?: string;
+  responseHeaders?: Map<string, string>;
   timeout?: number;
   response?: any;
   responseType?: string;
@@ -17,13 +16,13 @@ export interface HttpRequest extends NetworkRequest {
 export interface HttpHandlers {
   open: ((id: ID, type: HttpRequest['type'], method: string, url: string) => void) | null;
   requestHeader: ((id: ID, header: string, value: string) => void) | null;
-  send: ((id: ID, data?: any) => void) | null;
+  send: ((id: ID, startTime: number, data?: any) => void) | null;
   headerReceived:
     | ((
         id: ID,
         responseContentType: string | undefined,
         responseSize: number | undefined,
-        responseHeaders: string,
+        responseHeaders: HttpRequest['responseHeaders'],
       ) => void)
     | null;
   response:
@@ -31,7 +30,7 @@ export interface HttpHandlers {
         id: ID,
         status: number | undefined,
         timeout: number | undefined,
-        duration: number,
+        endTime: number,
         response: any,
         responseURL: string | undefined,
         responseType: string | undefined,

package/src/types/websocket.ts

@@ -16,6 +16,7 @@ export interface WebSocketRequest extends NetworkRequest {
 export interface WebSocketHandlers {
   connect:
     | ((
+        startTime: number,
         url: string,
         protocols?: WebSocketRequest['protocols'],
         options?: WebSocketRequest['options'],
@@ -24,7 +25,7 @@ export interface WebSocketHandlers {
     | null;
   send: ((data: string, socketId: number) => void) | null;
   close: ((code: number, reason: string, socketId: number) => void) | null;
-  onOpen: ((socketId: number, duration: number) => void) | null;
+  onOpen: ((socketId: number, endTime: number) => void) | null;
   onMessage: ((socketId: number, message: any) => void) | null;
   onError: ((socketId: number, error: WebSocketRequest['serverError']) => void) | null;
   onClose: ((socketId: number, data: WebSocketRequest['serverClose']) => void) | null;

package/src/ui/Xenon.tsx

@@ -1,15 +1,18 @@
 import { enableMapSet } from 'immer';
-import { createRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import { Animated, Platform, StyleSheet, useWindowDimensions } from 'react-native';
+import { createRef, memo, useImperativeHandle, useMemo, type ReactNode } from 'react';
+import { Platform, StyleSheet, useWindowDimensions } 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 { getVerticalSafeMargin } from '../core/utils';
+import refs, { DebuggerVisibility } from '../core/refs';
 import { useConsoleInterceptor, useNetworkInterceptor } from '../hooks';
 import colors from '../theme/colors';
-import { DebuggerPanel, type DebuggerState } from '../types';
-import { Bubble, ConsolePanel, DebuggerHeader, DetailsViewer, NetworkPanel } from './components';
-import { FullWindowOverlay } from 'react-native-screens';
+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';
 
 namespace Xenon {
   interface Methods {
@@ -19,10 +22,12 @@ namespace Xenon {
   }
 
   interface Props {
+    disabled?: boolean;
     autoInspectNetworkEnabled?: boolean;
     autoInspectConsoleEnabled?: boolean;
     bubbleSize?: number;
     idleBubbleOpacity?: number;
+    children?: ReactNode;
   }
 
   enableMapSet();
@@ -32,10 +37,13 @@ namespace Xenon {
     container: {
       flex: 1,
       ...StyleSheet.absoluteFillObject,
+      pointerEvents: 'box-none',
       top: undefined,
       bottom: undefined,
-      zIndex: 9999,
+      ...(Platform.OS === 'android' ? { zIndex: 9999 } : {}),
       backgroundColor: colors.lightGray,
+      borderBottomColor: colors.gray,
+      borderBottomWidth: StyleSheet.hairlineWidth,
     },
     safeArea: {
       flex: 1,
@@ -54,20 +62,12 @@ namespace Xenon {
       idleBubbleOpacity = 0.5,
     }: Props) => {
       const { width, height } = useWindowDimensions();
-      const pan = useRef(new Animated.ValueXY({ x: 0, y: getVerticalSafeMargin(height) }));
 
       const [debuggerState, setDebuggerState] = useImmer<DebuggerState>({
-        visibility: 'hidden',
         position: 'bottom',
-        selectedPanel: DebuggerPanel.Network,
         detailsData: null,
       });
 
-      const detailsShown = useMemo(
-        () => !debuggerState.selectedPanel && !!debuggerState.detailsData,
-        [debuggerState.detailsData, debuggerState.selectedPanel],
-      );
-
       const containerStyle = useMemo(
         () => [
           styles.container,
@@ -81,73 +81,73 @@ namespace Xenon {
       });
 
       const consoleInterceptor = useConsoleInterceptor({
+        // Disable console log tracking in development to prevent infinite loops
+        // autoEnabled: __DEV__ ? false : autoInspectConsoleEnabled,
         autoEnabled: autoInspectConsoleEnabled,
       });
 
       useImperativeHandle(ref, () => {
-        const changeVisibility = (condition: boolean, value: DebuggerState['visibility']) => {
+        const changeVisibility = (condition: boolean, value: DebuggerVisibility) => {
           if (!condition) return;
 
-          setDebuggerState(draft => {
-            draft.visibility = value;
-          });
+          refs.debugger.current?.setCurrentIndex(value);
         };
 
         return {
           isVisible() {
-            return debuggerState.visibility !== 'hidden';
+            return refs.debugger.current?.getCurrentIndex() !== DebuggerVisibility.Hidden;
           },
           show() {
-            changeVisibility(!this.isVisible(), 'bubble');
+            changeVisibility(!this.isVisible(), DebuggerVisibility.Bubble);
           },
           hide() {
-            changeVisibility(this.isVisible(), 'hidden');
+            changeVisibility(this.isVisible(), DebuggerVisibility.Hidden);
           },
         };
-      }, [debuggerState.visibility, setDebuggerState]);
+      }, []);
 
       return (
         <MainContext.Provider
           value={{ debuggerState, setDebuggerState, networkInterceptor, consoleInterceptor }}
         >
-          {debuggerState.visibility === 'bubble' && (
+          <IndexedStack defaultIndex={DebuggerVisibility.Hidden} id="debugger" ref={refs.debugger}>
             <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 />}
+                <Header />
+                <Panel />
               </SafeAreaView>
             </SafeAreaProvider>
-          )}
+          </IndexedStack>
         </MainContext.Provider>
       );
     },
   );
 
-  export function Component(props: Props) {
-    if (Platform.OS === 'ios') {
-      return (
-        <FullWindowOverlay>
+  export function Wrapper({ disabled = false, children, ...props }: Props) {
+    if (disabled) return children;
+
+    return (
+      <>
+        {children}
+        {Platform.OS === 'ios' ? (
+          <FullWindowOverlay>
+            <Debugger {...props} />
+          </FullWindowOverlay>
+        ) : (
           <Debugger {...props} />
-        </FullWindowOverlay>
-      );
-    }
-
-    return <Debugger {...props} />;
+        )}
+      </>
+    );
   }
 
-  Component.displayName = 'Xenon';
+  Wrapper.displayName = 'Xenon';
 }
 
 export default Xenon;