react-native-xenon/lib/module/ui/Xenon.js

A powerful in-app debugging tool for React Native.

"use strict";

import { enableMapSet } from 'immer';
import { createRef, memo, useImperativeHandle } from 'react';
import { Platform, useWindowDimensions } from 'react-native';
import { FullWindowOverlay } from 'react-native-screens';
import { useImmer } from 'use-immer';
import { MainContext } from "../contexts/index.js";
import refs, { DebuggerVisibility } from "../core/refs.js";
import { useConsoleInterceptor, useNetworkInterceptor } from "../hooks/index.js";
import { Bubble, IndexedStack, Panel, SearchBar } from "./components/index.js";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
let Xenon;
(function (_Xenon) {
  enableMapSet();
  const ref = /*#__PURE__*/createRef();

  /**
   * Checks whether the debugger is currently visible.
   * @returns `true` if the debugger is currently visible, otherwise `false`.
   */
  const isVisible = _Xenon.isVisible = () => ref.current?.isVisible() ?? false;
  const show = _Xenon.show = () => ref.current?.show();
  const hide = _Xenon.hide = () => ref.current?.hide();
  const Debugger = /*#__PURE__*/memo(({
    autoInspectNetworkEnabled = true,
    autoInspectConsoleEnabled = true,
    bubbleSize = 40,
    idleBubbleOpacity = 0.5,
    includeDomains
  }) => {
    const dimensions = useWindowDimensions();
    const [debuggerState, setDebuggerState] = useImmer({
      position: 'bottom',
      detailsData: null,
      searchQuery: ''
    });
    const networkInterceptor = useNetworkInterceptor({
      autoEnabled: autoInspectNetworkEnabled,
      includeDomains
    });
    const consoleInterceptor = useConsoleInterceptor({
      // Disable console log tracking in development to prevent infinite loops
      // autoEnabled: __DEV__ ? false : autoInspectConsoleEnabled,
      autoEnabled: autoInspectConsoleEnabled
    });
    useImperativeHandle(ref, () => {
      const changeVisibility = (condition, value) => {
        if (!condition) return;
        refs.debugger.current?.setCurrentIndex(value);
      };
      return {
        isVisible() {
          return refs.debugger.current?.getCurrentIndex() !== DebuggerVisibility.Hidden;
        },
        show() {
          changeVisibility(!this.isVisible(), DebuggerVisibility.Bubble);
        },
        hide() {
          changeVisibility(this.isVisible(), DebuggerVisibility.Hidden);
        }
      };
    }, []);
    return /*#__PURE__*/_jsx(MainContext.Provider, {
      value: {
        dimensions,
        debuggerState,
        setDebuggerState,
        networkInterceptor,
        consoleInterceptor
      },
      children: /*#__PURE__*/_jsxs(IndexedStack, {
        defaultIndex: DebuggerVisibility.Hidden,
        id: "debugger",
        ref: refs.debugger,
        children: [/*#__PURE__*/_jsx(Bubble, {
          bubbleSize: bubbleSize,
          idleBubbleOpacity: idleBubbleOpacity
        }), /*#__PURE__*/_jsx(Panel, {}), /*#__PURE__*/_jsx(SearchBar, {})]
      })
    });
  }, (prevProps, nextProps) => prevProps.autoInspectNetworkEnabled === nextProps.autoInspectNetworkEnabled && prevProps.autoInspectConsoleEnabled === nextProps.autoInspectConsoleEnabled && prevProps.bubbleSize === nextProps.bubbleSize && prevProps.idleBubbleOpacity === nextProps.idleBubbleOpacity && JSON.stringify(prevProps.includeDomains) === JSON.stringify(nextProps.includeDomains));
  function Wrapper({
    disabled = false,
    children,
    ...props
  }) {
    if (disabled) return children;
    return /*#__PURE__*/_jsxs(_Fragment, {
      children: [children, Platform.OS === 'ios' ? /*#__PURE__*/_jsx(FullWindowOverlay, {
        children: /*#__PURE__*/_jsx(Debugger, {
          ...props
        })
      }) : /*#__PURE__*/_jsx(Debugger, {
        ...props
      })]
    });
  }
  _Xenon.Wrapper = Wrapper;
  Wrapper.displayName = 'Xenon';
})(Xenon || (Xenon = {}));
export default Xenon;
//# sourceMappingURL=Xenon.js.map