react-native-xenon 2.2.0 → 2.4.0

package/lib/typescript/src/ui/components/panels/Panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/panels/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAc1E,UAAU,UAAW,SAAQ,SAAS;CAAG;AAEzC,QAAA,MAAM,KAAK,6FA6BT,CAAC;AAgBH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/panels/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkC,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAQpF,OAAO,EAAkC,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAQjE,UAAU,mBAAoB,SAAQ,SAAS;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC;CACjB;AAED,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CA8CrE"}

package/lib/typescript/src/ui/components/search-bar/SearchBar.d.ts

@@ -1,6 +1,8 @@
+import { type Ref } from 'react';
 import { View, type ViewProps } from 'react-native';
 interface SearchBarProps extends ViewProps {
+    ref?: Ref<View>;
 }
-declare const SearchBar: import("react").ForwardRefExoticComponent<SearchBarProps & import("react").RefAttributes<View>>;
-export default SearchBar;
+export default function SearchBar({ style, ...props }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=SearchBar.d.ts.map

package/lib/typescript/src/ui/components/search-bar/SearchBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/search-bar/SearchBar.tsx"],"names":[],"mappings":"AACA,OAAO,EAKL,IAAI,EAGJ,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAUtB,UAAU,cAAe,SAAQ,SAAS;CAAG;AAI7C,QAAA,MAAM,SAAS,iGAiEb,CAAC;AAmCH,eAAe,SAAS,CAAC"}
+{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/search-bar/SearchBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAKL,IAAI,EAGJ,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAUtB,UAAU,cAAe,SAAQ,SAAS;IACxC,GAAG,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC;CACjB;AAID,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CAiEpE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-xenon",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "description": "A powerful in-app debugging tool for React Native.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -36,6 +36,7 @@
     "test": "jest",
     "typecheck": "tsc",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "format": "prettier --write \"**/*.{js,ts,tsx,json,md}\"",
     "clean": "del-cli lib",
     "prepare": "bob build",
     "release": "release-it --only-version"

package/src/core/constants.ts

@@ -1 +1,3 @@
 export const NETWORK_REQUEST_HEADER = 'X-React-Native-Xenon';
+export const NETWORK_ITEM_HEIGHT = 36;
+export const CONSOLE_ITEM_HEIGHT = 36;

package/src/core/refs.ts

@@ -1,6 +1,6 @@
 import { createRef } from 'react';
 import type { IndexedStackMethods } from '../ui/components/common/IndexedStack';
-import type { TextInput } from 'react-native';
+import { Animated, Dimensions, type TextInput } from 'react-native';
 
 export enum DebuggerVisibility {
   Hidden = -1,
@@ -27,6 +27,15 @@ const refs = {
   panel: createRef<IndexedStackMethods<PanelState>>(),
   header: createRef<IndexedStackMethods<HeaderState>>(),
   searchInput: createRef<TextInput>(),
+  panelSize: (() => {
+    const ref = createRef<Animated.ValueXY>();
+    const dimensions = Dimensions.get('window');
+    ref.current = new Animated.ValueXY({
+      x: dimensions.width,
+      y: Math.min(dimensions.width, dimensions.height) * 0.75,
+    });
+    return ref;
+  })(),
 };
 
 export default refs;

package/src/core/utils.ts

@@ -79,7 +79,7 @@ export const getConsoleTypeColor = (type: LogMessage['type']) => {
 //#region metrics
 export const getVerticalSafeMargin = (screenHeight: number) => screenHeight / 8;
 
-export const clamp = (value: number, min: number, max: number) =>
+export const clamp = (min: number, max: number, value: number) =>
   Math.max(min, Math.min(max, value));
 
 export const getHttpInterceptorId = () => {
@@ -92,7 +92,7 @@ export const getHttpInterceptorId = () => {
 //#region formatters
 export const showNewLine = (when: boolean) => (when ? '\n' : '');
 
-const limitChar = (value: any, limit = 5000) => {
+const limitChar = (value: any, limit = 100000) => {
   const stringValue = typeof value === 'string' ? value : JSON.stringify(value ?? '');
 
   return stringValue.length > limit
@@ -152,6 +152,12 @@ export const convertToCurl = (
 
   return curlCommand;
 };
+
+export const formatCount = (count: number) => {
+  if (count < 1000) return count.toString();
+  if (count < 1000000) return `${(count / 1000).toFixed(1)}K`;
+  return `${(count / 1000000).toFixed(1)}M`;
+};
 //#endregion
 
 //#region decorators

package/src/ui/Xenon.tsx

@@ -10,13 +10,19 @@ import { type DebuggerState } from '../types';
 import { Bubble, IndexedStack, Panel, SearchBar } from './components';
 
 namespace Xenon {
-  interface Methods {
+  export interface Methods {
     isVisible(): boolean;
     show(): void;
     hide(): void;
   }
 
-  interface Props {
+  export interface Props {
+    children: ReactNode;
+    /**
+     * If true, completely disables the debugger by rendering only the children components without any debugging functionality.
+     * @default false
+     */
+    disabled?: boolean;
     /**
      * Determines whether the network inspector is automatically enabled upon initialization.
      * @default true
@@ -45,15 +51,6 @@ namespace Xenon {
     includeDomains?: string[];
   }
 
-  interface WrapperProps extends Props {
-    /**
-     * If true, completely disables the debugger by rendering only the children components without any debugging functionality.
-     * @default false
-     */
-    disabled?: boolean;
-    children: ReactNode;
-  }
-
   enableMapSet();
   const ref = createRef<Methods>();
 
@@ -61,7 +58,7 @@ namespace Xenon {
    * Checks whether the debugger is currently visible.
    * @returns `true` if the debugger is currently visible, otherwise `false`.
    */
-  export const isVisible = () => ref.current?.isVisible() ?? false;
+  export const isVisible = (): boolean => ref.current?.isVisible() ?? false;
 
   /**
    * Makes the debugger visible. If it is already visible, this method has no additional effect.
@@ -75,14 +72,14 @@ namespace Xenon {
    */
   export const hide = (): void => ref.current?.hide();
 
-  const Debugger = memo(
+  const Debugger = memo<Omit<Props, 'children' | 'disabled'>>(
     ({
       autoInspectNetworkEnabled = true,
       autoInspectConsoleEnabled = true,
       bubbleSize = 40,
       idleBubbleOpacity = 0.5,
       includeDomains,
-    }: Props) => {
+    }) => {
       const dimensions = useWindowDimensions();
 
       const [debuggerState, setDebuggerState] = useImmer<DebuggerState>({
@@ -142,9 +139,15 @@ namespace Xenon {
         </MainContext.Provider>
       );
     },
+    (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),
   );
 
-  export function Wrapper({ disabled = false, children, ...props }: WrapperProps): JSX.Element {
+  export function Wrapper({ disabled = false, children, ...props }: Props): JSX.Element {
     if (disabled) return children as JSX.Element;
 
     return (

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

@@ -1,4 +1,4 @@
-import { forwardRef, useContext, useMemo, useRef, useState } from 'react';
+import { useContext, useMemo, useRef, useState, type Ref } from 'react';
 import {
   Animated,
   PanResponder,
@@ -17,106 +17,105 @@ import Icon from '../common/Icon';
 interface BubbleProps extends ViewProps {
   bubbleSize: number;
   idleBubbleOpacity: number;
+  ref?: Ref<View>;
 }
 
-const Bubble = forwardRef<View, BubbleProps>(
-  ({ bubbleSize, idleBubbleOpacity, style, ...props }, ref) => {
-    const {
-      dimensions: { width: screenWidth, height: screenHeight },
-    } = useContext(MainContext)!;
-    const [idleOpacity, setIdleOpacity] = useState(idleBubbleOpacity);
-    const pan = useRef(new Animated.ValueXY({ x: 0, y: getVerticalSafeMargin(screenHeight) }));
-    const opacityTimer = useRef<NodeJS.Timeout | null>(null);
-
-    const panResponder = useMemo(() => {
-      const clearTimer = () => {
-        if (opacityTimer.current) clearTimeout(opacityTimer.current);
-        opacityTimer.current = null;
-      };
-
-      const blur = () => {
-        opacityTimer.current = setTimeout(() => {
-          setIdleOpacity(idleBubbleOpacity);
-          clearTimer();
-        }, 1000);
-      };
-
-      return 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 });
-
-          clearTimer();
-          setIdleOpacity(1);
-        },
-        onPanResponderMove: Animated.event([null, { dx: pan.current.x, dy: pan.current.y }], {
+export default function Bubble({ bubbleSize, idleBubbleOpacity, style, ...props }: BubbleProps) {
+  const {
+    dimensions: { width: screenWidth, height: screenHeight },
+  } = useContext(MainContext)!;
+  const [idleOpacity, setIdleOpacity] = useState(idleBubbleOpacity);
+  const pan = useRef(new Animated.ValueXY({ x: 0, y: getVerticalSafeMargin(screenHeight) }));
+  const opacityTimer = useRef<NodeJS.Timeout | null>(null);
+
+  const panResponder = useMemo(() => {
+    const clearTimer = () => {
+      if (opacityTimer.current) clearTimeout(opacityTimer.current);
+      opacityTimer.current = null;
+    };
+
+    const blur = () => {
+      opacityTimer.current = setTimeout(() => {
+        setIdleOpacity(idleBubbleOpacity);
+        clearTimer();
+      }, 1000);
+    };
+
+    return 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 });
+
+        clearTimer();
+        setIdleOpacity(1);
+      },
+      onPanResponderMove: Animated.event([null, { dx: pan.current.x, dy: pan.current.y }], {
+        useNativeDriver: false,
+      }),
+      onPanResponderRelease: (_, gesture: PanResponderGestureState) => {
+        pan.current.flattenOffset();
+
+        const isTapGesture =
+          gesture.dx > -10 && gesture.dx < 10 && gesture.dy > -10 && gesture.dy < 10;
+        if (isTapGesture) {
+          refs.debugger.current?.setCurrentIndex(DebuggerVisibility.Panel);
+        }
+
+        if (gesture.moveX === 0 && gesture.moveY === 0) {
+          blur();
+          return;
+        }
+
+        const finalX =
+          gesture.moveX < (screenWidth - bubbleSize) / 2 ? 0 : screenWidth - bubbleSize;
+
+        const verticalSafeMargin = getVerticalSafeMargin(screenHeight);
+
+        const finalY = clamp(
+          verticalSafeMargin,
+          screenHeight - verticalSafeMargin - bubbleSize,
+          gesture.moveY,
+        );
+
+        Animated.spring(pan.current, {
+          toValue: { x: finalX, y: finalY },
           useNativeDriver: false,
-        }),
-        onPanResponderRelease: (_, gesture: PanResponderGestureState) => {
-          pan.current.flattenOffset();
-
-          const isTapGesture =
-            gesture.dx > -10 && gesture.dx < 10 && gesture.dy > -10 && gesture.dy < 10;
-          if (isTapGesture) {
-            refs.debugger.current?.setCurrentIndex(DebuggerVisibility.Panel);
-          }
-
-          if (gesture.moveX === 0 && gesture.moveY === 0) {
-            blur();
-            return;
-          }
-
-          const finalX =
-            gesture.moveX < (screenWidth - bubbleSize) / 2 ? 0 : screenWidth - bubbleSize;
-
-          const verticalSafeMargin = getVerticalSafeMargin(screenHeight);
-
-          const finalY = clamp(
-            gesture.moveY,
-            verticalSafeMargin,
-            screenHeight - verticalSafeMargin - bubbleSize,
-          );
-
-          Animated.spring(pan.current, {
-            toValue: { x: finalX, y: finalY },
-            useNativeDriver: false,
-          }).start(({ finished }) => {
-            if (!finished) return;
-            blur();
-          });
-        },
-      });
-    }, [bubbleSize, idleBubbleOpacity, screenHeight, screenWidth]);
-
-    return (
-      <View ref={ref} style={[styles.bubbleBackdrop, style]} {...props}>
-        <Animated.View
-          {...panResponder.panHandlers}
-          style={[
-            styles.bubble,
-            {
-              width: bubbleSize,
-              height: bubbleSize,
-              borderRadius: bubbleSize / 2,
-              transform: pan.current.getTranslateTransform(),
-              opacity: idleOpacity,
-            },
-          ]}
-        >
-          <Icon source={icons.bug} size={bubbleSize * 0.65} />
-        </Animated.View>
-      </View>
-    );
-  },
-);
+        }).start(({ finished }) => {
+          if (!finished) return;
+          blur();
+        });
+      },
+    });
+  }, [bubbleSize, idleBubbleOpacity, screenHeight, screenWidth]);
+
+  return (
+    <View style={[styles.bubbleBackdrop, style]} {...props}>
+      <Animated.View
+        {...panResponder.panHandlers}
+        style={[
+          styles.bubble,
+          {
+            width: bubbleSize,
+            height: bubbleSize,
+            borderRadius: bubbleSize / 2,
+            transform: pan.current.getTranslateTransform(),
+            opacity: idleOpacity,
+          },
+        ]}
+      >
+        <Icon source={icons.bug} size={bubbleSize * 0.65} />
+      </Animated.View>
+    </View>
+  );
+}
 
 const styles = StyleSheet.create({
   bubbleBackdrop: {
@@ -131,5 +130,3 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
 });
-
-export default Bubble;

package/src/ui/components/common/IndexedStack.tsx

@@ -1,19 +1,11 @@
-import {
-  Children,
-  createElement,
-  forwardRef,
-  useImperativeHandle,
-  useRef,
-  type ForwardedRef,
-  type JSX,
-  type RefAttributes,
-} from 'react';
+import { Children, createElement, useImperativeHandle, useRef, type JSX, type Ref } from 'react';
 import { type NativeMethods } from 'react-native';
 
 interface IndexedStackProps<T extends number> {
   children: JSX.Element[];
   id: string;
   defaultIndex: T;
+  ref: Ref<IndexedStackMethods<T>>;
 }
 
 export type IndexedStackMethods<T extends number> = {
@@ -21,10 +13,12 @@ export type IndexedStackMethods<T extends number> = {
   setCurrentIndex: (index: T) => void;
 };
 
-function IndexedStackComponent<T extends number>(
-  { children, defaultIndex, id }: IndexedStackProps<T>,
-  ref: ForwardedRef<IndexedStackMethods<T>>,
-) {
+export default function IndexedStack<T extends number>({
+  children,
+  defaultIndex,
+  id,
+  ref,
+}: IndexedStackProps<T>) {
   const currentIndex = useRef<T>(defaultIndex as T);
   const childrenRefs = useRef<NativeMethods[]>([]);
 
@@ -54,9 +48,3 @@ function IndexedStackComponent<T extends number>(
     });
   });
 }
-
-const IndexedStack = forwardRef(IndexedStackComponent) as <T extends number>(
-  props: IndexedStackProps<T> & RefAttributes<IndexedStackMethods<T>>,
-) => JSX.Element;
-
-export default IndexedStack;

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

@@ -1,33 +1,33 @@
-import { ScrollView, StyleSheet, Text, type StyleProp, type ViewStyle } from 'react-native';
+import { useContext, type Ref } from 'react';
+import { ScrollView, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { MainContext } from '../../../contexts';
 import { formatLogMessage, getConsoleTypeColor } from '../../../core/utils';
-import type { LogMessage } from '../../../types';
 import colors from '../../../theme/colors';
-import { forwardRef, useContext } from 'react';
-import { MainContext } from '../../../contexts';
+import type { LogMessage } from '../../../types';
+import ShareableText from '../common/ShareableText';
 
-const LogMessageDetails = forwardRef<ScrollView, { style?: StyleProp<ViewStyle> }>(
-  ({ style }, ref) => {
-    const {
-      debuggerState: { detailsData },
-    } = useContext(MainContext)!;
+interface LogMessageDetailsProps {
+  style?: StyleProp<ViewStyle>;
+  ref?: Ref<ScrollView>;
+}
 
-    const item = detailsData?.data as LogMessage | undefined;
+export default function LogMessageDetails({ style, ref }: LogMessageDetailsProps) {
+  const {
+    debuggerState: { detailsData },
+  } = useContext(MainContext)!;
 
-    return (
-      <ScrollView
-        ref={ref}
-        style={[
-          styles.container,
-          { backgroundColor: getConsoleTypeColor(item?.type ?? '') },
-          style,
-        ]}
-        contentContainerStyle={styles.contentContainer}
-      >
-        <Text style={styles.text}>{formatLogMessage(item?.values ?? [])}</Text>
-      </ScrollView>
-    );
-  },
-);
+  const item = detailsData?.data as LogMessage | undefined;
+
+  return (
+    <ScrollView
+      ref={ref}
+      style={[styles.container, { backgroundColor: getConsoleTypeColor(item?.type ?? '') }, style]}
+      contentContainerStyle={styles.contentContainer}
+    >
+      <ShareableText style={styles.text}>{formatLogMessage(item?.values ?? [])}</ShareableText>
+    </ScrollView>
+  );
+}
 
 const styles = StyleSheet.create({
   container: {
@@ -41,5 +41,3 @@ const styles = StyleSheet.create({
     fontSize: 14,
   },
 });
-
-export default LogMessageDetails;