react-native-xenon 0.1.0

package/src/interceptors/WebSocketInterceptor.ts

@@ -0,0 +1,189 @@
+import { NativeEventEmitter, type EmitterSubscription } from 'react-native';
+import NativeWebSocketModule from 'react-native/Libraries/WebSocket/NativeWebSocketModule';
+import type {
+  WebSocketCloseCallback,
+  WebSocketConnectCallback,
+  WebSocketOnCloseCallback,
+  WebSocketOnErrorCallback,
+  WebSocketOnMessageCallback,
+  WebSocketOnOpenCallback,
+  WebSocketSendCallback,
+} from '../types';
+import { NetworkInterceptor } from './NetworkInterceptor';
+
+const originalWebSocketConnect = NativeWebSocketModule.connect;
+const originalWebSocketSend = NativeWebSocketModule.send;
+const originalWebSocketSendBinary = NativeWebSocketModule.sendBinary;
+const originalWebSocketClose = NativeWebSocketModule.close;
+
+export default class WebSocketInterceptor extends NetworkInterceptor {
+  static instance = new WebSocketInterceptor();
+
+  private constructor() {
+    super();
+  }
+
+  private connectCallback: WebSocketConnectCallback = null;
+  private sendCallback: WebSocketSendCallback = null;
+  private closeCallback: WebSocketCloseCallback = null;
+  private onOpenCallback: WebSocketOnOpenCallback = null;
+  private onMessageCallback: WebSocketOnMessageCallback = null;
+  private onErrorCallback: WebSocketOnErrorCallback = null;
+  private onCloseCallback: WebSocketOnCloseCallback = null;
+
+  setConnectCallback(callback: typeof this.connectCallback) {
+    this.connectCallback = callback;
+    return this;
+  }
+
+  setSendCallback(callback: typeof this.sendCallback) {
+    this.sendCallback = callback;
+    return this;
+  }
+
+  setCloseCallback(callback: typeof this.closeCallback) {
+    this.closeCallback = callback;
+    return this;
+  }
+
+  setOnOpenCallback(callback: typeof this.onOpenCallback) {
+    this.onOpenCallback = callback;
+    return this;
+  }
+
+  setOnMessageCallback(callback: typeof this.onMessageCallback) {
+    this.onMessageCallback = callback;
+    return this;
+  }
+
+  setOnErrorCallback(callback: typeof this.onErrorCallback) {
+    this.onErrorCallback = callback;
+    return this;
+  }
+
+  setOnCloseCallback(callback: typeof this.onCloseCallback) {
+    this.onCloseCallback = callback;
+    return this;
+  }
+
+  protected getCallbacks() {
+    const connectCallback = this.connectCallback?.bind(this);
+    const sendCallback = this.sendCallback?.bind(this);
+    const closeCallback = this.closeCallback?.bind(this);
+    const arrayBufferToString = this.arrayBufferToString?.bind(this);
+
+    return {
+      connectCallback,
+      sendCallback,
+      closeCallback,
+      arrayBufferToString,
+    };
+  }
+
+  protected clearCallbacks(): void {
+    this.connectCallback = null;
+    this.sendCallback = null;
+    this.closeCallback = null;
+    this.onOpenCallback = null;
+    this.onMessageCallback = null;
+    this.onErrorCallback = null;
+    this.onCloseCallback = null;
+  }
+
+  private eventEmitter: NativeEventEmitter | null = null;
+  private subscriptions: EmitterSubscription[] = [];
+
+  private arrayBufferToString(data?: string) {
+    try {
+      if (!data) return '(no input)';
+
+      const byteArray = Buffer.from(data, 'base64');
+
+      if (byteArray.length === 0) return '(empty array)';
+
+      return `ArrayBuffer { length: ${byteArray.length}, values: [${byteArray.join(', ')}] }`;
+    } catch (error) {
+      return `(invalid data: ${error instanceof Error ? error.message : error})`;
+    }
+  }
+
+  private registerEvents(): void {
+    if (!this.eventEmitter) return;
+
+    this.subscriptions = [
+      this.eventEmitter.addListener('websocketOpen', ev => {
+        this.onOpenCallback?.(ev.id);
+      }),
+      this.eventEmitter.addListener('websocketMessage', ev => {
+        this.onMessageCallback?.(
+          ev.id,
+          ev.type === 'binary' ? this.arrayBufferToString(ev.data) : ev.data,
+        );
+      }),
+      this.eventEmitter.addListener('websocketClosed', ev => {
+        this.onCloseCallback?.(ev.id, { code: ev.code, reason: ev.reason });
+      }),
+      this.eventEmitter.addListener('websocketFailed', ev => {
+        this.onErrorCallback?.(ev.id, { message: ev.message });
+      }),
+    ];
+  }
+
+  private unregisterEvents() {
+    this.subscriptions.forEach(e => e.remove());
+    this.subscriptions = [];
+    this.eventEmitter = null;
+  }
+
+  enableInterception(): void {
+    if (this.isInterceptorEnabled) return;
+
+    this.eventEmitter = new NativeEventEmitter(NativeWebSocketModule);
+
+    this.registerEvents();
+
+    const { connectCallback, sendCallback, closeCallback, arrayBufferToString } =
+      this.getCallbacks();
+
+    NativeWebSocketModule.connect = function (...args) {
+      connectCallback?.(...args);
+
+      originalWebSocketConnect.call(this, ...args);
+    };
+
+    NativeWebSocketModule.send = function (...args) {
+      sendCallback?.(...args);
+
+      originalWebSocketSend.call(this, ...args);
+    };
+
+    NativeWebSocketModule.sendBinary = function (data, socketId) {
+      sendCallback?.(arrayBufferToString(data), socketId);
+
+      originalWebSocketSendBinary.call(this, data, socketId);
+    };
+
+    NativeWebSocketModule.close = function (code, reason, socketId) {
+      closeCallback?.(code, reason, socketId);
+
+      originalWebSocketClose.call(this, code, reason, socketId);
+    };
+
+    this.isInterceptorEnabled = true;
+  }
+
+  disableInterception(): void {
+    if (!this.isInterceptorEnabled) return;
+
+    this.isInterceptorEnabled = false;
+
+    NativeWebSocketModule.connect = originalWebSocketConnect;
+    NativeWebSocketModule.send = originalWebSocketSend;
+    NativeWebSocketModule.sendBinary = originalWebSocketSendBinary;
+    NativeWebSocketModule.close = originalWebSocketClose;
+
+    this.clearCallbacks();
+
+    this.unregisterEvents();
+  }
+}

package/src/interceptors/XHRInterceptor.ts

@@ -0,0 +1,97 @@
+import { NetworkType } from '../types';
+import { getHttpInterceptorId } from '../utils';
+import HttpInterceptor from './HttpInterceptor';
+
+const originalXHROpen = XMLHttpRequest.prototype.open;
+const originalXHRSend = XMLHttpRequest.prototype.send;
+const originalXHRSetRequestHeader = XMLHttpRequest.prototype.setRequestHeader;
+
+export default class XHRInterceptor extends HttpInterceptor {
+  static instance = new XHRInterceptor();
+
+  private constructor() {
+    super();
+  }
+
+  enableInterception() {
+    if (this.isInterceptorEnabled) return;
+
+    const {
+      openCallback,
+      requestHeaderCallback,
+      sendCallback,
+      headerReceivedCallback,
+      responseCallback,
+    } = this.getCallbacks();
+
+    const isInterceptorEnabled = () => this.isInterceptorEnabled;
+
+    XMLHttpRequest.prototype.open = function (method, url, ...args) {
+      this._interceptionId = getHttpInterceptorId();
+
+      openCallback?.(this._interceptionId, NetworkType.XHR, method, url);
+
+      originalXHROpen.call(this, method, url, ...args);
+    };
+
+    XMLHttpRequest.prototype.setRequestHeader = function (header, value) {
+      requestHeaderCallback?.(this._interceptionId, header, value);
+
+      originalXHRSetRequestHeader.call(this, header, value);
+    };
+
+    XMLHttpRequest.prototype.send = function (data) {
+      sendCallback?.(this._interceptionId, data);
+
+      this.addEventListener?.('readystatechange', () => {
+        if (!isInterceptorEnabled()) return;
+
+        if (this.readyState === this.HEADERS_RECEIVED) {
+          const contentTypeString = this.getResponseHeader('Content-Type');
+          const contentLengthString = this.getResponseHeader('Content-Length');
+
+          let responseContentType: string | undefined;
+          let responseSize: number | undefined;
+
+          if (contentTypeString) responseContentType = contentTypeString.split(';')[0];
+
+          if (contentLengthString) responseSize = parseInt(contentLengthString, 10);
+
+          headerReceivedCallback?.(
+            this._interceptionId,
+            responseContentType,
+            responseSize,
+            this.getAllResponseHeaders(),
+          );
+        }
+
+        if (this.readyState === this.DONE) {
+          responseCallback?.(
+            this._interceptionId,
+            this.status,
+            this.timeout,
+            this.response,
+            this.responseURL,
+            this.responseType,
+          );
+        }
+      });
+
+      originalXHRSend.call(this, data);
+    };
+
+    this.isInterceptorEnabled = true;
+  }
+
+  disableInterception() {
+    if (!this.isInterceptorEnabled) return;
+
+    this.isInterceptorEnabled = false;
+
+    XMLHttpRequest.prototype.send = originalXHRSend;
+    XMLHttpRequest.prototype.open = originalXHROpen;
+    XMLHttpRequest.prototype.setRequestHeader = originalXHRSetRequestHeader;
+
+    this.clearCallbacks();
+  }
+}

package/src/interceptors/index.ts

@@ -0,0 +1,4 @@
+export { default as ConsoleInterceptor } from './ConsoleInterceptor';
+export { default as FetchInterceptor } from './FetchInterceptor';
+export { default as WebSocketInterceptor } from './WebSocketInterceptor';
+export { default as XHRInterceptor } from './XHRInterceptor';

package/src/types/common.ts

@@ -0,0 +1,26 @@
+import type { Dispatch, SetStateAction } from 'react';
+
+export enum NetworkType {
+  XHR = 'xhr',
+  Fetch = 'fetch',
+  WS = 'ws',
+}
+
+export enum DebuggerPanel {
+  Network = 'network',
+  Console = 'console',
+}
+
+export type ID = string | undefined;
+
+export interface NetworkRequest {
+  status?: number;
+}
+
+export type DebuggerVisibility = 'hidden' | 'bubble' | 'panel';
+
+export type DebuggerPosition = 'top' | 'bottom';
+
+export type SetState<T> = Dispatch<SetStateAction<T>>;
+
+export type NetworkTab = 'headers' | 'queryStringParameters' | 'body' | 'response' | 'messages';

package/src/types/console.ts

@@ -0,0 +1,4 @@
+export interface LogMessage {
+  type: string;
+  values: any[];
+}

package/src/types/http.ts

@@ -0,0 +1,44 @@
+import type { ID, NetworkRequest, NetworkType } from './common';
+
+export interface HttpRequest extends NetworkRequest {
+  type: NetworkType.Fetch | NetworkType.XHR;
+  method: string;
+  url: string;
+  requestHeaders?: Record<string, string>;
+  requestHeadersString?: string;
+  body?: any;
+  responseContentType?: string;
+  responseSize?: number;
+  responseHeaders?: string;
+  timeout?: number;
+  response?: any;
+  responseType?: string;
+}
+
+export type HttpOpenCallback =
+  | ((id: ID, type: HttpRequest['type'], method: string, url: string) => void)
+  | null;
+
+export type HttpRequestHeaderCallback = ((id: ID, header: string, value: string) => void) | null;
+
+export type HttpSendCallback = ((id: ID, data?: any) => void) | null;
+
+export type HttpHeaderReceivedCallback =
+  | ((
+      id: ID,
+      responseContentType: string | undefined,
+      responseSize: number | undefined,
+      responseHeaders: string,
+    ) => void)
+  | null;
+
+export type HttpResponseCallback =
+  | ((
+      id: ID,
+      status: number | undefined,
+      timeout: number | undefined,
+      response: any,
+      responseURL: string | undefined,
+      responseType: string | undefined,
+    ) => void)
+  | null;

package/src/types/index.ts

@@ -0,0 +1,4 @@
+export * from './common';
+export * from './http';
+export * from './console';
+export * from './websocket';

package/src/types/websocket.ts

@@ -0,0 +1,46 @@
+import type { NetworkRequest, NetworkType } from './common';
+
+export interface WebSocketRequest extends NetworkRequest {
+  type: NetworkType.WS;
+  uri: string;
+  protocols?: string | string[] | null;
+  options?: {
+    headers: { [headerName: string]: string };
+    [optionName: string]: any;
+  } | null;
+  messages?: string;
+  closeReason?: string;
+  serverError?: { message?: string };
+  serverClose?: { code?: number; reason?: string };
+}
+
+export type WebSocketConnectCallback =
+  | ((
+      uri: WebSocketRequest['uri'],
+      protocols?: WebSocketRequest['protocols'],
+      options?: WebSocketRequest['options'],
+      socketId?: number,
+    ) => void)
+  | null;
+
+export type WebSocketSendCallback = ((data: string, socketId: number) => void) | null;
+
+export type WebSocketCloseCallback =
+  | ((
+      code: WebSocketRequest['status'],
+      reason: WebSocketRequest['closeReason'],
+      socketId: number,
+    ) => void)
+  | null;
+
+export type WebSocketOnOpenCallback = ((socketId: number) => void) | null;
+
+export type WebSocketOnMessageCallback = ((socketId: number, message: any) => void) | null;
+
+export type WebSocketOnErrorCallback =
+  | ((socketId: number, data: WebSocketRequest['serverError']) => void)
+  | null;
+
+export type WebSocketOnCloseCallback =
+  | ((socketId: number, data: WebSocketRequest['serverClose']) => void)
+  | null;

package/src/ui/Xenon.tsx

@@ -0,0 +1,149 @@
+import { createRef, useImperativeHandle, useRef, useState, type JSX } from 'react';
+import { Animated, SafeAreaView, StyleSheet, useWindowDimensions, View } from 'react-native';
+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;
+  hide(): void;
+}
+
+interface XenonComponentProps {
+  autoInspectNetwork?: boolean;
+  autoInspectConsole?: boolean;
+  bubbleSize?: number;
+}
+
+interface ReactNativeXenon extends XenonComponentMethods {
+  Component(props: XenonComponentProps): JSX.Element;
+}
+
+const rootRef = createRef<XenonComponentMethods>();
+
+function XenonComponent({
+  autoInspectNetwork = true,
+  autoInspectConsole = true,
+  bubbleSize = 40,
+}: XenonComponentProps) {
+  const { width: screenWidth, height: screenHeight } = useWindowDimensions();
+  const verticalSafeMargin = screenHeight / 8;
+
+  const pan = useRef(new Animated.ValueXY({ x: 0, y: verticalSafeMargin }));
+
+  const detailsData: MainContextValue['detailsData'] = useRef(null);
+
+  const [debuggerVisibility, setDebuggerVisibility] = useState<DebuggerVisibility>('hidden');
+
+  const [debuggerPosition, setDebuggerPosition] = useState<DebuggerPosition>('bottom');
+
+  const [panelSelected, setPanelSelected] = useState<DebuggerPanel | null>(DebuggerPanel.Network);
+
+  const networkInterceptor = useNetworkInterceptor({
+    autoEnabled: autoInspectNetwork,
+  });
+
+  const logInterceptor = useConsoleInterceptor({
+    autoEnabled: autoInspectConsole,
+  });
+
+  useImperativeHandle(
+    rootRef,
+    () => ({
+      show() {
+        setDebuggerVisibility('bubble');
+      },
+      hide() {
+        setDebuggerVisibility('hidden');
+      },
+    }),
+    [],
+  );
+
+  let content;
+
+  switch (debuggerVisibility) {
+    case 'bubble':
+      content = (
+        <View style={styles.bubbleBackdrop}>
+          <Bubble bubbleSize={bubbleSize} pan={pan} />
+        </View>
+      );
+      break;
+    case 'panel':
+      content = (
+        <SafeAreaView
+          style={[
+            styles.container,
+            // eslint-disable-next-line react-native/no-inline-styles
+            {
+              [debuggerPosition]: 0,
+              height: Math.min(screenWidth, screenHeight) * 0.75,
+            },
+          ]}
+        >
+          <DebuggerHeader />
+
+          {panelSelected === DebuggerPanel.Network && <NetworkPanel />}
+          {panelSelected === DebuggerPanel.Console && <ConsolePanel />}
+
+          {!panelSelected && !!detailsData.current && <DetailsViewer />}
+        </SafeAreaView>
+      );
+      break;
+    default:
+      content = null;
+  }
+
+  return (
+    <MainContext.Provider
+      value={{
+        debuggerVisibility,
+        setDebuggerVisibility,
+        debuggerPosition,
+        setDebuggerPosition,
+        panelSelected,
+        setPanelSelected,
+        networkInterceptor,
+        logInterceptor,
+        detailsData,
+        screenWidth,
+        screenHeight,
+        verticalSafeMargin,
+      }}
+    >
+      {content}
+    </MainContext.Provider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    ...StyleSheet.absoluteFillObject,
+    top: undefined,
+    bottom: undefined,
+    zIndex: 9999,
+    backgroundColor: '#AAAAAA',
+  },
+  bubbleBackdrop: {
+    flex: 1,
+    ...StyleSheet.absoluteFillObject,
+    pointerEvents: 'box-none',
+  },
+});
+
+XenonComponent.displayName = 'Xenon';
+
+const Xenon: ReactNativeXenon = {
+  show() {
+    rootRef.current?.show();
+  },
+  hide() {
+    rootRef.current?.hide();
+  },
+  Component: XenonComponent,
+};
+
+export default Xenon;

package/src/ui/components/bubble/Bubble.tsx

@@ -0,0 +1,93 @@
+import { useContext, useMemo, type MutableRefObject } from 'react';
+import {
+  Animated,
+  Image,
+  PanResponder,
+  StyleSheet,
+  type PanResponderGestureState,
+} from 'react-native';
+import { MainContext } from '../../../contexts';
+
+interface BubbleProps {
+  bubbleSize: number;
+  pan: MutableRefObject<Animated.ValueXY>;
+}
+
+export default function Bubble({ bubbleSize, pan }: BubbleProps) {
+  const { setDebuggerVisibility, screenWidth, screenHeight, verticalSafeMargin } =
+    useContext(MainContext)!;
+
+  const panResponder = useMemo(
+    () =>
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: () => true,
+        onPanResponderGrant: () => {
+          pan.current.setOffset({
+            // @ts-ignore
+            x: pan.current.x._value,
+            // @ts-ignore
+            y: pan.current.y._value,
+          });
+          pan.current.setValue({ x: 0, y: 0 });
+        },
+        onPanResponderMove: Animated.event([null, { dx: pan.current.x, dy: pan.current.y }], {
+          useNativeDriver: false,
+        }),
+        onPanResponderRelease: (_, gesture: PanResponderGestureState) => {
+          const isTapGesture =
+            gesture.dx > -10 && gesture.dx < 10 && gesture.dy > -10 && gesture.dy < 10;
+
+          if (isTapGesture) setDebuggerVisibility('panel');
+
+          pan.current.flattenOffset();
+
+          const finalX =
+            gesture.moveX < (screenWidth - bubbleSize) / 2 ? 0 : screenWidth - bubbleSize;
+
+          const finalY = Math.min(
+            Math.max(verticalSafeMargin, gesture.moveY),
+            screenHeight - verticalSafeMargin - bubbleSize,
+          );
+
+          Animated.spring(pan.current, {
+            toValue: { x: finalX, y: finalY },
+            useNativeDriver: false,
+          }).start();
+        },
+      }),
+    [bubbleSize, pan, screenHeight, screenWidth, setDebuggerVisibility, verticalSafeMargin],
+  );
+
+  return (
+    <Animated.View
+      {...panResponder.panHandlers}
+      style={[
+        styles.bubble,
+        {
+          width: bubbleSize,
+          height: bubbleSize,
+          borderRadius: bubbleSize / 2,
+          transform: pan.current.getTranslateTransform(),
+        },
+      ]}
+    >
+      <Image
+        source={require('../../../assets/code.png')}
+        style={{
+          width: bubbleSize * 0.75,
+          height: bubbleSize * 0.75,
+        }}
+      />
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  bubble: {
+    backgroundColor: '#AAAAAA',
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

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

@@ -0,0 +1,20 @@
+import { useContext } from 'react';
+import { MainContext } from '../../../contexts';
+import { DebuggerPanel } from '../../../types';
+import LogMessageDetails from './LogMessageDetails';
+import NetworkRequestDetails from './NetworkRequestDetails';
+
+export default function DetailsViewer() {
+  const { detailsData } = useContext(MainContext)!;
+
+  switch (true) {
+    case !detailsData.current:
+      return null;
+    case DebuggerPanel.Network in detailsData.current!:
+      return <NetworkRequestDetails item={detailsData.current.network} />;
+    case DebuggerPanel.Console in detailsData.current!:
+      return <LogMessageDetails item={detailsData.current.console} />;
+    default:
+      return null;
+  }
+}