react-native-xenon 0.1.0

package/src/hooks/useNetworkInterceptor.ts

@@ -0,0 +1,263 @@
+import { enableMapSet } from 'immer';
+import { useCallback, useEffect, useState } from 'react';
+import { useImmer } from 'use-immer';
+import { NETWORK_REQUEST_HEADER } from '../constants';
+import {
+  NetworkType,
+  type HttpHeaderReceivedCallback,
+  type HttpOpenCallback,
+  type HttpRequest,
+  type HttpRequestHeaderCallback,
+  type HttpResponseCallback,
+  type HttpSendCallback,
+  type ID,
+  type WebSocketCloseCallback,
+  type WebSocketConnectCallback,
+  type WebSocketOnCloseCallback,
+  type WebSocketOnErrorCallback,
+  type WebSocketOnMessageCallback,
+  type WebSocketOnOpenCallback,
+  type WebSocketRequest,
+  type WebSocketSendCallback,
+} from '../types';
+import { keyValueToString } from '../utils';
+import { XHRInterceptor, FetchInterceptor, WebSocketInterceptor } from '../interceptors';
+
+interface NetworkInterceptorParams {
+  autoEnabled?: boolean;
+}
+
+type NetworkRequests<T> = Map<NonNullable<ID>, T>;
+
+enableMapSet();
+
+const initRequests = new Map<NonNullable<ID>, HttpRequest & WebSocketRequest>();
+
+export default function useNetworkInterceptor(params?: NetworkInterceptorParams) {
+  const { autoEnabled = false } = params || {};
+  const [isInterceptorEnabled, setIsInterceptorEnabled] = useState(autoEnabled);
+
+  const [networkRequests, setNetworkRequests] = useImmer(initRequests);
+
+  const _isInterceptorEnabled = () =>
+    XHRInterceptor.instance.isInterceptorEnabled &&
+    FetchInterceptor.instance.isInterceptorEnabled &&
+    WebSocketInterceptor.instance.isInterceptorEnabled;
+
+  const clearAllNetworkRequests = () => {
+    setNetworkRequests(initRequests);
+  };
+
+  const enableHttpInterceptions = useCallback(() => {
+    const openCallback: HttpOpenCallback = (id, type, method, url) => {
+      if (!id) return;
+
+      setNetworkRequests((draft: NetworkRequests<HttpRequest>) => {
+        draft.set(id, { type, method, url });
+      });
+    };
+
+    const requestHeaderCallback: HttpRequestHeaderCallback = (id, header, value) => {
+      if (!id) return;
+
+      setNetworkRequests((draft: NetworkRequests<HttpRequest>) => {
+        if (!draft.get(id)) return draft;
+
+        const currentHeaderLine = keyValueToString(header, value);
+
+        const fetchRequestHeaderLineRegex = RegExp(
+          keyValueToString(NETWORK_REQUEST_HEADER, NetworkType.Fetch),
+          'gi',
+        );
+
+        const isFetchInXHR =
+          draft.get(id)!.type === NetworkType.XHR &&
+          !!currentHeaderLine.match(fetchRequestHeaderLineRegex);
+
+        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;
+        }
+      });
+    };
+
+    const sendCallback: HttpSendCallback = (id, data) => {
+      if (!id) return;
+
+      setNetworkRequests((draft: NetworkRequests<HttpRequest>) => {
+        if (!draft.get(id)) return draft;
+
+        draft.get(id)!.body = data;
+      });
+    };
+
+    const headerReceivedCallback: HttpHeaderReceivedCallback = (
+      id,
+      responseContentType,
+      responseSize,
+      responseHeaders,
+    ) => {
+      if (!id) return;
+
+      setNetworkRequests((draft: NetworkRequests<HttpRequest>) => {
+        if (!draft.get(id)) return draft;
+
+        draft.get(id)!.responseContentType = responseContentType;
+        draft.get(id)!.responseSize = responseSize;
+        draft.get(id)!.responseHeaders = responseHeaders;
+      });
+    };
+
+    const responseCallback: HttpResponseCallback = (
+      id,
+      status,
+      timeout,
+      response,
+      responseURL,
+      responseType,
+    ) => {
+      if (!id) return;
+
+      setNetworkRequests((draft: NetworkRequests<HttpRequest>) => {
+        if (!draft.get(id)) return draft;
+
+        draft.get(id)!.status = status;
+        draft.get(id)!.timeout = timeout;
+        draft.get(id)!.response = response;
+        if (responseURL) draft.get(id)!.url = responseURL;
+        draft.get(id)!.responseType = responseType;
+      });
+    };
+
+    XHRInterceptor.instance
+      .setOpenCallback(openCallback)
+      .setRequestHeaderCallback(requestHeaderCallback)
+      .setSendCallback(sendCallback)
+      .setHeaderReceivedCallback(headerReceivedCallback)
+      .setResponseCallback(responseCallback)
+      .enableInterception();
+
+    FetchInterceptor.instance
+      .setOpenCallback(openCallback)
+      .setRequestHeaderCallback(requestHeaderCallback)
+      .setSendCallback(sendCallback)
+      .setHeaderReceivedCallback(headerReceivedCallback)
+      .setResponseCallback(responseCallback)
+      .enableInterception();
+  }, [setNetworkRequests]);
+
+  const enableWebSocketInterception = useCallback(() => {
+    const connectCallback: WebSocketConnectCallback = (uri, protocols, options, socketId) => {
+      if (typeof socketId !== 'number') return;
+
+      setNetworkRequests((draft: NetworkRequests<WebSocketRequest>) => {
+        draft.set(`${socketId}`, {
+          uri,
+          type: NetworkType.WS,
+          protocols,
+          options,
+        });
+      });
+    };
+
+    const sendCallback: WebSocketSendCallback = (data, socketId) => {
+      if (typeof socketId !== 'number') return;
+
+      setNetworkRequests((draft: NetworkRequests<WebSocketRequest>) => {
+        if (!draft.get(`${socketId}`)) return draft;
+
+        draft.get(`${socketId}`)!.messages ??= '';
+        draft.get(`${socketId}`)!.messages += keyValueToString('SENT', data);
+      });
+    };
+
+    const closeCallback: WebSocketCloseCallback = (code, reason, socketId) => {
+      if (typeof socketId !== 'number') return;
+
+      setNetworkRequests((draft: NetworkRequests<WebSocketRequest>) => {
+        if (!draft.get(`${socketId}`)) return draft;
+
+        draft.get(`${socketId}`)!.status = code;
+        draft.get(`${socketId}`)!.closeReason = reason;
+      });
+    };
+
+    const onOpenCallback: WebSocketOnOpenCallback = () => {};
+
+    const onMessageCallback: WebSocketOnMessageCallback = (socketId, message) => {
+      if (typeof socketId !== 'number') return;
+
+      setNetworkRequests((draft: NetworkRequests<WebSocketRequest>) => {
+        if (!draft.get(`${socketId}`)) return draft;
+
+        draft.get(`${socketId}`)!.messages ??= '';
+        draft.get(`${socketId}`)!.messages += keyValueToString('RECEIVED', message);
+      });
+    };
+
+    const onErrorCallback: WebSocketOnErrorCallback = (socketId, data) => {
+      if (typeof socketId !== 'number') return;
+
+      setNetworkRequests((draft: NetworkRequests<WebSocketRequest>) => {
+        if (!draft.get(`${socketId}`)) return draft;
+
+        draft.get(`${socketId}`)!.serverError = data;
+      });
+    };
+
+    const onCloseCallback: WebSocketOnCloseCallback = (socketId, data) => {
+      if (typeof socketId !== 'number') return;
+
+      setNetworkRequests((draft: NetworkRequests<WebSocketRequest>) => {
+        if (!draft.get(`${socketId}`)) return draft;
+
+        draft.get(`${socketId}`)!.serverClose = data;
+      });
+    };
+
+    WebSocketInterceptor.instance
+      .setConnectCallback(connectCallback)
+      .setSendCallback(sendCallback)
+      .setCloseCallback(closeCallback)
+      .setOnOpenCallback(onOpenCallback)
+      .setOnMessageCallback(onMessageCallback)
+      .setOnErrorCallback(onErrorCallback)
+      .setOnCloseCallback(onCloseCallback)
+      .enableInterception();
+  }, [setNetworkRequests]);
+
+  const enableInterception = useCallback(() => {
+    if (_isInterceptorEnabled()) return;
+
+    enableHttpInterceptions();
+    enableWebSocketInterception();
+    setIsInterceptorEnabled(true);
+  }, [enableHttpInterceptions, enableWebSocketInterception]);
+
+  const disableInterception = useCallback(() => {
+    if (!_isInterceptorEnabled()) return;
+
+    XHRInterceptor.instance.disableInterception();
+    FetchInterceptor.instance.disableInterception();
+    WebSocketInterceptor.instance.disableInterception();
+    setIsInterceptorEnabled(false);
+  }, []);
+
+  useEffect(() => {
+    if (autoEnabled) enableInterception();
+
+    if (autoEnabled) return disableInterception;
+  }, [autoEnabled, disableInterception, enableInterception]);
+
+  return {
+    isInterceptorEnabled,
+    enableInterception,
+    disableInterception,
+    clearAllNetworkRequests,
+    networkRequests,
+  };
+}

package/src/hooks/useScrollToBottom.ts

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from 'react';
+import type { FlatList } from 'react-native';
+
+export default function useScrollToBottom(listSize: number) {
+  const currentSize = useRef(listSize);
+  const listRef = useRef<FlatList | null>(null);
+
+  useEffect(() => {
+    if (listSize <= currentSize.current) return;
+
+    currentSize.current = listSize;
+
+    const timer = setTimeout(() => {
+      if (listSize) listRef.current?.scrollToEnd();
+    }, 0);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [listSize]);
+
+  return listRef;
+}

package/src/index.ts

@@ -0,0 +1 @@
+export { default } from './ui/Xenon';

package/src/interceptors/ConsoleInterceptor.ts

@@ -0,0 +1,115 @@
+/* eslint-disable no-console */
+import Interceptor from './Interceptor';
+
+const originalConsoleError = console.error;
+const originalConsoleInfo = console.info;
+const originalConsoleLog = console.log;
+const originalConsoleWarn = console.warn;
+const originalConsoleTrace = console.trace;
+const originalConsoleDebug = console.debug;
+const originalConsoleTable = console.table;
+const originalConsoleGroupCollapsed = console.groupCollapsed;
+const originalConsoleGroupEnd = console.groupEnd;
+const originalConsoleGroup = console.group;
+
+export default class ConsoleInterceptor extends Interceptor {
+  static instance = new ConsoleInterceptor();
+
+  private constructor() {
+    super();
+  }
+
+  private callback: ((type: string, args: any[]) => void) | null = null;
+
+  setCallback(callback: typeof this.callback) {
+    this.callback = callback;
+    return this;
+  }
+
+  enableInterception(): void {
+    if (this.isInterceptorEnabled) return;
+
+    const callback = this.callback?.bind(this);
+
+    console.error = function (...args) {
+      callback?.('error', args);
+
+      originalConsoleError.call(this, ...args);
+    };
+
+    console.info = function (...args) {
+      callback?.('info', args);
+
+      originalConsoleInfo.call(this, ...args);
+    };
+
+    console.log = function (...args) {
+      callback?.('log', args);
+
+      originalConsoleLog.call(this, ...args);
+    };
+
+    console.warn = function (...args) {
+      callback?.('warn', args);
+
+      originalConsoleWarn.call(this, ...args);
+    };
+
+    console.trace = function (...args) {
+      callback?.('trace', args);
+
+      originalConsoleTrace.call(this, ...args);
+    };
+
+    console.debug = function (...args) {
+      callback?.('debug', args);
+
+      originalConsoleDebug.call(this, ...args);
+    };
+
+    console.table = function (...args) {
+      callback?.('table', args);
+
+      originalConsoleTable.call(this, ...(args as Parameters<typeof originalConsoleTable>));
+    };
+
+    console.groupCollapsed = function (...args) {
+      callback?.('groupCollapsed', args);
+
+      originalConsoleGroupCollapsed.call(this, ...args);
+    };
+
+    console.groupEnd = function (...args) {
+      callback?.('groupEnd', args);
+
+      originalConsoleGroupEnd.call(this, ...args);
+    };
+
+    console.group = function (...args) {
+      callback?.('group', args);
+
+      originalConsoleGroup.call(this, ...args);
+    };
+
+    this.isInterceptorEnabled = true;
+  }
+
+  disableInterception(): void {
+    if (!this.isInterceptorEnabled) return;
+
+    this.isInterceptorEnabled = false;
+
+    console.error = originalConsoleError;
+    console.info = originalConsoleInfo;
+    console.log = originalConsoleLog;
+    console.warn = originalConsoleWarn;
+    console.trace = originalConsoleTrace;
+    console.debug = originalConsoleDebug;
+    console.table = originalConsoleTable;
+    console.groupCollapsed = originalConsoleGroupCollapsed;
+    console.groupEnd = originalConsoleGroupEnd;
+    console.group = originalConsoleGroup;
+
+    this.callback = null;
+  }
+}

package/src/interceptors/FetchInterceptor.ts

@@ -0,0 +1,134 @@
+import { NETWORK_REQUEST_HEADER } from '../constants';
+import { NetworkType } from '../types';
+import { keyValueToString, formatMethod, getHttpInterceptorId } from '../utils';
+import HttpInterceptor from './HttpInterceptor';
+
+const originalFetch = global.fetch;
+
+export default class FetchInterceptor extends HttpInterceptor {
+  static instance = new FetchInterceptor();
+
+  private constructor() {
+    super();
+  }
+
+  enableInterception() {
+    if (this.isInterceptorEnabled) return;
+
+    const {
+      openCallback,
+      requestHeaderCallback,
+      sendCallback,
+      headerReceivedCallback,
+      responseCallback,
+    } = this.getCallbacks();
+
+    global.fetch = async function (input, init) {
+      const interceptionId = getHttpInterceptorId();
+
+      const requestHeaders = new Headers(init?.headers);
+
+      requestHeaders.append(NETWORK_REQUEST_HEADER, NetworkType.Fetch);
+
+      const requestInit: RequestInit = { ...init, headers: requestHeaders };
+
+      //#region open
+      const method = formatMethod(init?.method);
+
+      let url: string;
+
+      switch (true) {
+        case input instanceof Request:
+          url = input.url;
+          break;
+        case input instanceof URL:
+          url = input.href;
+          break;
+        default:
+          url = input;
+      }
+
+      openCallback?.(interceptionId, NetworkType.Fetch, method, url);
+      //#endregion
+
+      //#region requestHeader
+      const headers = requestInit?.headers;
+      if (headers) {
+        switch (true) {
+          case headers instanceof Headers:
+            for (const [headerKey, headerValue] of headers.entries()) {
+              requestHeaderCallback?.(interceptionId, headerKey, headerValue);
+            }
+            break;
+          case Array.isArray(headers):
+            for (const [headerKey, headerValue] of headers) {
+              if (headerKey && headerValue)
+                requestHeaderCallback?.(interceptionId, headerKey, headerValue);
+            }
+            break;
+          default:
+            for (const key in headers) {
+              if (headers[key]) requestHeaderCallback?.(interceptionId, key, headers[key]);
+            }
+            break;
+        }
+      }
+      //#endregion
+
+      //#region send
+      sendCallback?.(interceptionId, init?.body ?? null);
+      //#endregion
+
+      const response = await originalFetch.call(this, input, requestInit);
+
+      const clonedResponse = response.clone();
+      const clonedResponseHeaders = clonedResponse.headers;
+
+      //#region headerReceived
+      const contentTypeString = clonedResponseHeaders.get('Content-Type');
+      const contentLengthString = clonedResponseHeaders.get('Content-Length');
+
+      let responseContentType: string | undefined;
+      let responseSize: number | undefined;
+      let responseHeaders: string = '';
+
+      if (contentTypeString) responseContentType = contentTypeString.split(';')[0];
+
+      if (contentLengthString) responseSize = parseInt(contentLengthString, 10);
+
+      for (const [headerKey, headerValue] of clonedResponseHeaders.entries()) {
+        responseHeaders += keyValueToString(headerKey, headerValue);
+      }
+
+      headerReceivedCallback?.(interceptionId, responseContentType, responseSize, responseHeaders);
+      //#endregion
+
+      //#region response
+      const responseBody: string | null = await clonedResponse.text().catch(() => null);
+
+      responseCallback?.(
+        interceptionId,
+        clonedResponse.status,
+        0,
+        responseBody,
+        clonedResponse.url,
+        clonedResponse.type,
+      );
+      //#endregion
+
+      return response;
+    };
+
+    this.isInterceptorEnabled = true;
+  }
+
+  disableInterception() {
+    if (!this.isInterceptorEnabled) return;
+
+    this.isInterceptorEnabled = false;
+
+    global.fetch = originalFetch;
+
+    this.clearCallbacks();
+  }
+}

package/src/interceptors/HttpInterceptor.ts

@@ -0,0 +1,65 @@
+import type {
+  HttpHeaderReceivedCallback,
+  HttpOpenCallback,
+  HttpRequestHeaderCallback,
+  HttpResponseCallback,
+  HttpSendCallback,
+} from '../types';
+import { NetworkInterceptor } from './NetworkInterceptor';
+
+export default abstract class HttpInterceptor extends NetworkInterceptor {
+  protected openCallback: HttpOpenCallback = null;
+  protected requestHeaderCallback: HttpRequestHeaderCallback = null;
+  protected sendCallback: HttpSendCallback = null;
+  protected headerReceivedCallback: HttpHeaderReceivedCallback = null;
+  protected responseCallback: HttpResponseCallback = null;
+
+  setOpenCallback(callback: typeof this.openCallback) {
+    this.openCallback = callback;
+    return this;
+  }
+
+  setRequestHeaderCallback(callback: typeof this.requestHeaderCallback) {
+    this.requestHeaderCallback = callback;
+    return this;
+  }
+
+  setSendCallback(callback: typeof this.sendCallback) {
+    this.sendCallback = callback;
+    return this;
+  }
+
+  setHeaderReceivedCallback(callback: typeof this.headerReceivedCallback) {
+    this.headerReceivedCallback = callback;
+    return this;
+  }
+
+  setResponseCallback(callback: typeof this.responseCallback) {
+    this.responseCallback = callback;
+    return this;
+  }
+
+  protected getCallbacks() {
+    const openCallback = this.openCallback?.bind(this);
+    const requestHeaderCallback = this.requestHeaderCallback?.bind(this);
+    const sendCallback = this.sendCallback?.bind(this);
+    const headerReceivedCallback = this.headerReceivedCallback?.bind(this);
+    const responseCallback = this.responseCallback?.bind(this);
+
+    return {
+      openCallback,
+      requestHeaderCallback,
+      sendCallback,
+      headerReceivedCallback,
+      responseCallback,
+    };
+  }
+
+  protected clearCallbacks(): void {
+    this.openCallback = null;
+    this.requestHeaderCallback = null;
+    this.sendCallback = null;
+    this.headerReceivedCallback = null;
+    this.responseCallback = null;
+  }
+}

package/src/interceptors/Interceptor.ts

@@ -0,0 +1,6 @@
+export default abstract class Interceptor {
+  isInterceptorEnabled = false;
+
+  abstract enableInterception(): void;
+  abstract disableInterception(): void;
+}

package/src/interceptors/NetworkInterceptor.ts

@@ -0,0 +1,6 @@
+import Interceptor from './Interceptor';
+
+export abstract class NetworkInterceptor extends Interceptor {
+  protected abstract getCallbacks(): any;
+  protected abstract clearCallbacks(): void;
+}