react-native-xenon 1.1.0 → 2.0.0

package/package.json

@@ -1,21 +1,16 @@
 {
   "name": "react-native-xenon",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "A powerful in-app debugging tool for React Native.",
-  "source": "./src/index.ts",
-  "main": "./lib/commonjs/index.js",
-  "module": "./lib/module/index.js",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
   "exports": {
     ".": {
-      "import": {
-        "types": "./lib/typescript/module/src/index.d.ts",
-        "default": "./lib/module/index.js"
-      },
-      "require": {
-        "types": "./lib/typescript/commonjs/src/index.d.ts",
-        "default": "./lib/commonjs/index.js"
-      }
-    }
+      "source": "./src/index.ts",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
   },
   "files": [
     "src",
@@ -42,8 +37,8 @@
     "typecheck": "tsc",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "clean": "del-cli lib",
-    "prepack": "bob build",
-    "release": "release-it"
+    "prepare": "bob build",
+    "release": "release-it --only-version"
   },
   "keywords": [
     "react-native",
@@ -63,11 +58,7 @@
     "type": "git",
     "url": "git+https://github.com/purrseus/react-native-xenon.git"
   },
-  "author": {
-    "name": "Purrseus",
-    "email": "contact@thiendo.dev",
-    "url": "https://github.com/purrseus"
-  },
+  "author": "Purrseus <contact@thiendo.dev> (https://github.com/purrseus)",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/purrseus/react-native-xenon/issues"
@@ -76,31 +67,37 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
+  "dependencies": {
+    "immer": "^10.1.1",
+    "react-native-url-polyfill": "^2.0.0",
+    "use-immer": "^0.10.0"
+  },
   "devDependencies": {
-    "@babel/plugin-proposal-decorators": "^7.25.9",
-    "@commitlint/config-conventional": "^17.0.2",
+    "@babel/plugin-proposal-decorators": "^7.28.0",
+    "@commitlint/config-conventional": "^19.6.0",
+    "@eslint/compat": "^1.2.7",
+    "@eslint/eslintrc": "^3.3.0",
+    "@eslint/js": "^9.22.0",
     "@evilmartians/lefthook": "^1.5.0",
-    "@react-native/eslint-config": "^0.73.1",
+    "@react-native/babel-preset": "0.78.2",
+    "@react-native/eslint-config": "^0.78.0",
     "@release-it/conventional-changelog": "^9.0.2",
     "@types/jest": "^29.5.5",
-    "@types/react": "^18.2.44",
-    "commitlint": "^17.0.2",
+    "@types/react": "^19.0.12",
+    "commitlint": "^19.6.1",
     "del-cli": "^5.1.0",
-    "eslint": "^8.51.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-prettier": "^5.0.1",
+    "eslint": "^9.22.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-prettier": "^5.2.3",
     "jest": "^29.7.0",
     "prettier": "^3.0.3",
-    "react": "18.3.1",
-    "react-native": "0.76.3",
-    "react-native-builder-bob": "^0.33.3",
-    "react-native-safe-area-context": "5.4.0",
-    "react-native-screens": "~4.10.0",
+    "react": "19.0.0",
+    "react-native": "0.79.5",
+    "react-native-builder-bob": "^0.40.8",
+    "react-native-safe-area-context": "^5.6.0",
+    "react-native-screens": "^4.14.1",
     "release-it": "^17.10.0",
-    "typescript": "^5.2.2"
-  },
-  "resolutions": {
-    "@types/react": "^18.2.44"
+    "typescript": "^5.8.3"
   },
   "peerDependencies": {
     "react": "*",
@@ -111,7 +108,7 @@
   "workspaces": [
     "example"
   ],
-  "packageManager": "yarn@4.9.1",
+  "packageManager": "yarn@4.9.2",
   "jest": {
     "preset": "react-native",
     "modulePathIgnorePatterns": [
@@ -138,47 +135,20 @@
     "plugins": {
       "@release-it/conventional-changelog": {
         "preset": {
-          "name": "conventionalcommits"
+          "name": "angular"
         }
       }
     }
   },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@react-native",
-      "plugin:prettier/recommended"
-    ],
-    "rules": {
-      "curly": "off",
-      "react/react-in-jsx-scope": "off",
-      "no-alert": "error",
-      "no-console": "error",
-      "no-var": "error",
-      "no-duplicate-imports": "error",
-      "max-lines": [
-        "error",
-        {
-          "skipBlankLines": true,
-          "skipComments": true,
-          "max": 500
-        }
-      ]
-    }
-  },
-  "eslintIgnore": [
-    "node_modules/",
-    "lib/"
-  ],
   "prettier": {
-    "printWidth": 100,
+    "quoteProps": "consistent",
+    "singleQuote": true,
     "tabWidth": 2,
+    "trailingComma": "all",
     "useTabs": false,
+    "printWidth": 100,
     "semi": true,
-    "singleQuote": true,
-    "quoteProps": "as-needed",
     "jsxSingleQuote": false,
-    "trailingComma": "all",
     "bracketSpacing": true,
     "bracketSameLine": false,
     "arrowParens": "avoid",
@@ -190,13 +160,6 @@
     "source": "src",
     "output": "lib",
     "targets": [
-      [
-        "commonjs",
-        {
-          "esm": true,
-          "configFile": true
-        }
-      ],
       [
         "module",
         {
@@ -207,9 +170,7 @@
       [
         "typescript",
         {
-          "project": "tsconfig.build.json",
-          "esm": true,
-          "configFile": true
+          "project": "tsconfig.build.json"
         }
       ]
     ]
@@ -217,11 +178,6 @@
   "create-react-native-library": {
     "languages": "js",
     "type": "library",
-    "version": "0.44.3"
-  },
-  "dependencies": {
-    "immer": "^10.1.1",
-    "react-native-url-polyfill": "^2.0.0",
-    "use-immer": "^0.10.0"
+    "version": "0.52.1"
   }
 }

package/src/core/refs.ts

@@ -1,10 +1,12 @@
 import { createRef } from 'react';
 import type { IndexedStackMethods } from '../ui/components/common/IndexedStack';
+import type { TextInput } from 'react-native';
 
 export enum DebuggerVisibility {
   Hidden = -1,
   Bubble = 0,
   Panel = 1,
+  Search = 2,
 }
 
 export enum PanelState {
@@ -24,6 +26,7 @@ const refs = {
   debugger: createRef<IndexedStackMethods<DebuggerVisibility>>(),
   panel: createRef<IndexedStackMethods<PanelState>>(),
   header: createRef<IndexedStackMethods<HeaderState>>(),
+  searchInput: createRef<TextInput>(),
 };
 
 export default refs;

package/src/theme/icons.ts

@@ -7,6 +7,8 @@ const icons = Object.freeze({
   share: require('../assets/icons/share.png'),
   arrowLeft: require('../assets/icons/arrow-left.png'),
   beautify: require('../assets/icons/beautify.png'),
+  search: require('../assets/icons/search.png'),
+  close: require('../assets/icons/close.png'),
 });
 
 export default icons;

package/src/types/common.ts

@@ -24,6 +24,7 @@ export type DetailTab = 'overview' | 'headers' | 'request' | 'response' | 'messa
 
 export interface DebuggerState {
   position: 'top' | 'bottom';
+  searchQuery: string;
   detailsData:
     | {
         type: DebuggerPanel.Network;

package/src/ui/Xenon.tsx

@@ -1,7 +1,7 @@
 import { enableMapSet } from 'immer';
 import { createRef, memo, useImperativeHandle, useMemo, type JSX, type ReactNode } from 'react';
 import { Platform, StyleSheet, useWindowDimensions, View } from 'react-native';
-import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { FullWindowOverlay } from 'react-native-screens';
 import { useImmer } from 'use-immer';
 import { MainContext } from '../contexts';
@@ -9,7 +9,8 @@ import refs, { DebuggerVisibility } from '../core/refs';
 import { useConsoleInterceptor, useNetworkInterceptor } from '../hooks';
 import colors from '../theme/colors';
 import { type DebuggerState } from '../types';
-import { Bubble, Header, IndexedStack, Panel } from './components';
+import { Bubble, Header, IndexedStack, Panel, SearchBar } from './components';
+import SafeArea from './components/common/SafeArea';
 
 namespace Xenon {
   interface Methods {
@@ -64,9 +65,9 @@ namespace Xenon {
       flex: 1,
       ...StyleSheet.absoluteFillObject,
       pointerEvents: 'box-none',
+      ...(Platform.OS === 'android' ? { zIndex: 9999 } : {}),
       top: undefined,
       bottom: undefined,
-      ...(Platform.OS === 'android' ? { zIndex: 9999 } : {}),
       backgroundColor: colors.lightGray,
       borderBottomColor: colors.gray,
       borderBottomWidth: StyleSheet.hairlineWidth,
@@ -107,6 +108,7 @@ namespace Xenon {
       const [debuggerState, setDebuggerState] = useImmer<DebuggerState>({
         position: 'bottom',
         detailsData: null,
+        searchQuery: '',
       });
 
       const containerStyle = useMemo(
@@ -162,12 +164,14 @@ namespace Xenon {
 
             <View style={containerStyle}>
               <SafeAreaProvider>
-                <SafeAreaView style={styles.safeArea}>
-                  <Header />
-                  <Panel />
-                </SafeAreaView>
+                {debuggerState.position === 'top' && <SafeArea inset="top" />}
+                <Header />
+                <Panel />
+                {debuggerState.position === 'bottom' && <SafeArea inset="bottom" />}
               </SafeAreaProvider>
             </View>
+
+            <SearchBar />
           </IndexedStack>
         </MainContext.Provider>
       );

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

@@ -0,0 +1,10 @@
+import { View } from 'react-native';
+import { useSafeAreaInsets, type EdgeInsets } from 'react-native-safe-area-context';
+
+export default function SafeArea({
+  inset,
+}: {
+  inset: Extract<keyof EdgeInsets, 'top' | 'bottom'>;
+}) {
+  return <View style={{ height: useSafeAreaInsets()[inset] }} />;
+}

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

@@ -1,20 +1,10 @@
-import { TouchableOpacity, type StyleProp, type ViewStyle } from 'react-native';
+import { TouchableOpacity, type TouchableOpacityProps } from 'react-native';
 
-interface TouchableProps {
-  onPress: () => void;
-  children: React.ReactNode;
-  activeOpacity?: number;
-  style?: StyleProp<ViewStyle>;
-}
+interface TouchableProps extends TouchableOpacityProps {}
 
-export default function Touchable({
-  onPress,
-  children,
-  activeOpacity = 0.8,
-  style,
-}: TouchableProps) {
+export default function Touchable({ children, activeOpacity = 0.8, ...props }: TouchableProps) {
   return (
-    <TouchableOpacity onPress={onPress} activeOpacity={activeOpacity} style={style}>
+    <TouchableOpacity activeOpacity={activeOpacity} {...props}>
       {children}
     </TouchableOpacity>
   );

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

@@ -21,6 +21,7 @@ const LogMessageDetails = forwardRef<ScrollView, { style?: StyleProp<ViewStyle>
           { backgroundColor: getConsoleTypeColor(item?.type ?? '') },
           style,
         ]}
+        contentContainerStyle={styles.contentContainer}
       >
         <Text style={styles.text}>{formatLogMessage(item?.values ?? [])}</Text>
       </ScrollView>
@@ -31,6 +32,8 @@ const LogMessageDetails = forwardRef<ScrollView, { style?: StyleProp<ViewStyle>
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+  },
+  contentContainer: {
     padding: 8,
   },
   text: {

package/src/ui/components/headers/ConsoleHeader.tsx

@@ -16,7 +16,7 @@ const ConsoleHeader = forwardRef<ScrollView, ConsoleHeaderProps>(
         <HeaderComponents.Back selectedPanel={selectedPanel} />
         <HeaderComponents.MainButtons />
         <Divider type="vertical" />
-        <HeaderComponents.TabItem tab="logMessage" label="Console" />
+        <HeaderComponents.DetailTabItem tab="logMessage" label="Console" />
       </HeaderComponents.Wrapper>
     );
   },

package/src/ui/components/headers/DebuggerHeader.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, useContext } from 'react';
 import type { ScrollView, StyleProp, ViewStyle } from 'react-native';
 import { MainContext } from '../../../contexts';
-import refs, { PanelState } from '../../../core/refs';
+import refs, { DebuggerVisibility, PanelState } from '../../../core/refs';
 import icons from '../../../theme/icons';
 import Divider from '../common/Divider';
 import DebuggerHeaderItem from '../items/DebuggerHeaderItem';
@@ -38,8 +38,15 @@ const DebuggerHeader = forwardRef<ScrollView, DebuggerHeaderProps>(
         : consoleInterceptor.enableInterception();
     };
 
+    const onShowSearchInput = () => {
+      refs.debugger.current?.setCurrentIndex(DebuggerVisibility.Search);
+      refs.searchInput.current?.focus();
+    };
+
     return (
       <HeaderComponents.Wrapper ref={ref} style={style}>
+        <DebuggerHeaderItem onPress={onShowSearchInput} content={icons.search} />
+
         <HeaderComponents.MainButtons />
 
         <Divider type="vertical" />

package/src/ui/components/headers/HeaderComponents.tsx

@@ -24,7 +24,7 @@ const Back = ({ selectedPanel }: { selectedPanel: PanelState }) => {
   );
 };
 
-const TabItem = ({ tab, label }: { tab: DetailTab; label: string }) => {
+const DetailTabItem = ({ tab, label }: { tab: DetailTab; label: string }) => {
   const {
     debuggerState: { detailsData },
     setDebuggerState,
@@ -95,6 +95,6 @@ const styles = StyleSheet.create({
   },
 });
 
-const HeaderComponents = { Back, TabItem, MainButtons, Wrapper };
+const HeaderComponents = { Back, DetailTabItem, MainButtons, Wrapper };
 
 export default HeaderComponents;

package/src/ui/components/headers/NetworkHeader.tsx

@@ -34,11 +34,11 @@ const NetworkHeader = forwardRef<ScrollView, NetworkHeaderProps>(
 
         <Divider type="vertical" />
 
-        {!!overviewShown && <HeaderComponents.TabItem tab="overview" label="Overview" />}
-        {!!headersShown && <HeaderComponents.TabItem tab="headers" label="Headers" />}
-        {!!requestShown && <HeaderComponents.TabItem tab="request" label="Request" />}
-        {!!responseShown && <HeaderComponents.TabItem tab="response" label="Response" />}
-        {!!messagesShown && <HeaderComponents.TabItem tab="messages" label="Messages" />}
+        {!!overviewShown && <HeaderComponents.DetailTabItem tab="overview" label="Overview" />}
+        {!!headersShown && <HeaderComponents.DetailTabItem tab="headers" label="Headers" />}
+        {!!requestShown && <HeaderComponents.DetailTabItem tab="request" label="Request" />}
+        {!!responseShown && <HeaderComponents.DetailTabItem tab="response" label="Response" />}
+        {!!messagesShown && <HeaderComponents.DetailTabItem tab="messages" label="Messages" />}
 
         {!isWS && (
           <>

package/src/ui/components/index.ts

@@ -1,4 +1,5 @@
 export { default as Bubble } from './bubble/Bubble';
+export { default as IndexedStack } from './common/IndexedStack';
 export { default as Header } from './headers/Header';
 export { default as Panel } from './panels/Panel';
-export { default as IndexedStack } from './common/IndexedStack';
+export { default as SearchBar } from './search-bar/SearchBar';

package/src/ui/components/panels/ConsolePanel.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useCallback, useContext } from 'react';
+import { forwardRef, useCallback, useContext, useMemo } from 'react';
 import {
   FlatList,
   StyleSheet,
@@ -11,15 +11,31 @@ import { MainContext } from '../../../contexts';
 import { DebuggerPanel, type LogMessage } from '../../../types';
 import ConsolePanelItem from '../items/ConsolePanelItem';
 import refs, { HeaderState, PanelState } from '../../../core/refs';
+import { formatLogMessage } from '../../../core/utils';
 
 const Separator = () => <View style={styles.divider} />;
 
 const ConsolePanel = forwardRef<FlatList, { style?: StyleProp<ViewStyle> }>(({ style }, ref) => {
   const {
+    debuggerState: { searchQuery },
     consoleInterceptor: { logMessages },
     setDebuggerState,
   } = useContext(MainContext)!;
 
+  const data = useMemo(() => {
+    let result = [...logMessages];
+
+    if (searchQuery) {
+      result = logMessages.filter(item =>
+        formatLogMessage(item?.values ?? [])
+          .toLowerCase()
+          .includes(searchQuery.toLowerCase()),
+      );
+    }
+
+    return result.reverse();
+  }, [logMessages, searchQuery]);
+
   const renderItem = useCallback<ListRenderItem<LogMessage>>(
     ({ item }) => (
       <ConsolePanelItem
@@ -45,7 +61,7 @@ const ConsolePanel = forwardRef<FlatList, { style?: StyleProp<ViewStyle> }>(({ s
     <FlatList
       ref={ref}
       inverted
-      data={[...logMessages].reverse()}
+      data={data}
       renderItem={renderItem}
       keyExtractor={(_, index) => index.toString()}
       ItemSeparatorComponent={Separator}

package/src/ui/components/panels/NetworkPanel.tsx

@@ -22,10 +22,24 @@ const Separator = () => <Divider type="horizontal" />;
 
 const NetworkPanel = forwardRef<FlatList, { style?: StyleProp<ViewStyle> }>(({ style }, ref) => {
   const {
+    debuggerState: { searchQuery },
     networkInterceptor: { networkRequests },
     setDebuggerState,
   } = useContext(MainContext)!;
-  const data = useMemo(() => Array.from(networkRequests).reverse(), [networkRequests]);
+
+  const data = useMemo(() => {
+    let result = Array.from(networkRequests);
+
+    if (searchQuery) {
+      result = result.filter(([, item]) =>
+        (item as HttpRequest | WebSocketRequest).url
+          .toLowerCase()
+          .includes(searchQuery.toLowerCase()),
+      );
+    }
+
+    return result.reverse();
+  }, [networkRequests, searchQuery]);
 
   const renderItem = useCallback<ListRenderItem<[NonNullable<ID>, HttpRequest | WebSocketRequest]>>(
     ({ item: [_, item] }) => (

package/src/ui/components/search-bar/SearchBar.tsx

@@ -0,0 +1,129 @@
+import { forwardRef, useContext, useState } from 'react';
+import {
+  Keyboard,
+  Platform,
+  StyleSheet,
+  TextInput,
+  View,
+  type NativeSyntheticEvent,
+  type TextInputSubmitEditingEventData,
+  type ViewProps,
+} from 'react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { MainContext } from '../../../contexts';
+import refs, { DebuggerVisibility } from '../../../core/refs';
+import colors from '../../../theme/colors';
+import icons from '../../../theme/icons';
+import Icon from '../common/Icon';
+import Touchable from '../common/Touchable';
+import SafeArea from '../common/SafeArea';
+
+interface SearchBarProps extends ViewProps {}
+
+const SearchBar = forwardRef<View, SearchBarProps>(({ style, ...props }, ref) => {
+  const {
+    debuggerState: { searchQuery },
+    setDebuggerState,
+  } = useContext(MainContext)!;
+
+  const [value, setValue] = useState(searchQuery);
+
+  const onHideSearchInput = () => {
+    Keyboard.dismiss();
+    refs.debugger.current?.setCurrentIndex(DebuggerVisibility.Panel);
+  };
+
+  const onClear = () => {
+    refs.searchInput.current?.clear();
+  };
+
+  const onSubmitEditing = ({
+    nativeEvent: { text },
+  }: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => {
+    setDebuggerState(draft => {
+      draft.searchQuery = text;
+    });
+    refs.debugger.current?.setCurrentIndex(DebuggerVisibility.Panel);
+  };
+
+  return (
+    <View ref={ref} style={[styles.container, style]} {...props}>
+      <SafeAreaProvider>
+        <View style={styles.barView}>
+          <SafeArea inset="top" />
+
+          <View style={styles.inputWrapper}>
+            <Icon source={icons.search} size={18} />
+
+            <TextInput
+              autoCapitalize="none"
+              autoCorrect={false}
+              inputMode="search"
+              returnKeyType="search"
+              selectionColor={colors.black}
+              ref={refs.searchInput}
+              autoFocus
+              style={styles.input}
+              value={value}
+              onChangeText={setValue}
+              placeholder="Search..."
+              placeholderTextColor={colors.gray}
+              onSubmitEditing={onSubmitEditing}
+            />
+
+            <Touchable hitSlop={8} onPress={onClear} style={styles.closeButton}>
+              <Icon source={icons.close} size={12} color={colors.black} />
+            </Touchable>
+          </View>
+        </View>
+
+        <Touchable onPress={onHideSearchInput} style={styles.background}>
+          <View />
+        </Touchable>
+      </SafeAreaProvider>
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFillObject,
+    ...(Platform.OS === 'android' ? { zIndex: 9999 } : {}),
+    backgroundColor: colors.black + '80', // 80 for 50% opacity
+  },
+  barView: {
+    backgroundColor: colors.lightGray,
+    padding: 8,
+  },
+  background: {
+    flex: 1,
+  },
+  inputWrapper: {
+    backgroundColor: colors.white,
+    borderRadius: 8,
+    paddingHorizontal: 8,
+    columnGap: 8,
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: 40,
+  },
+  input: {
+    height: '100%',
+    padding: 0,
+    margin: 0,
+    lineHeight: 20,
+    fontSize: 16,
+    color: colors.black,
+    flex: 1,
+  },
+  closeButton: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 18,
+    height: 18,
+    borderRadius: 9,
+    backgroundColor: colors.gray,
+  },
+});
+
+export default SearchBar;