react-native-xenon 0.2.1 → 0.3.0

package/src/types/websocket.ts

@@ -13,7 +13,7 @@ export interface WebSocketRequest extends NetworkRequest {
   serverClose?: { code?: number; reason?: string };
 }
 
-export type WebSocketConnectCallback =
+type WebSocketConnectCallback =
   | ((
       url: string,
       protocols?: WebSocketRequest['protocols'],
@@ -22,20 +22,28 @@ export type WebSocketConnectCallback =
     ) => void)
   | null;
 
-export type WebSocketSendCallback = ((data: string, socketId: number) => void) | null;
+type WebSocketSendCallback = ((data: string, socketId: number) => void) | null;
 
-export type WebSocketCloseCallback =
-  | ((code: number, reason: string, socketId: number) => void)
-  | null;
+type WebSocketCloseCallback = ((code: number, reason: string, socketId: number) => void) | null;
 
-export type WebSocketOnOpenCallback = ((socketId: number, duration: number) => void) | null;
+type WebSocketOnOpenCallback = ((socketId: number, duration: number) => void) | null;
 
-export type WebSocketOnMessageCallback = ((socketId: number, message: any) => void) | null;
+type WebSocketOnMessageCallback = ((socketId: number, message: any) => void) | null;
 
-export type WebSocketOnErrorCallback =
+type WebSocketOnErrorCallback =
   | ((socketId: number, error: WebSocketRequest['serverError']) => void)
   | null;
 
-export type WebSocketOnCloseCallback =
+type WebSocketOnCloseCallback =
   | ((socketId: number, data: WebSocketRequest['serverClose']) => void)
   | null;
+
+export interface WebSocketHandlers {
+  connect: WebSocketConnectCallback;
+  send: WebSocketSendCallback;
+  close: WebSocketCloseCallback;
+  onOpen: WebSocketOnOpenCallback;
+  onMessage: WebSocketOnMessageCallback;
+  onError: WebSocketOnErrorCallback;
+  onClose: WebSocketOnCloseCallback;
+}

package/src/ui/Xenon.tsx

@@ -15,6 +15,7 @@ import { DebuggerPanel, type DebuggerPosition, type DebuggerVisibility } from '.
 import { Bubble, ConsolePanel, DebuggerHeader, DetailsViewer, NetworkPanel } from './components';
 
 interface XenonComponentMethods {
+  isVisible(): boolean;
   show(): void;
   hide(): void;
 }
@@ -37,15 +38,10 @@ const XenonComponent = memo<XenonComponentProps>(
   ({ autoInspectNetworkEnabled = true, autoInspectConsoleEnabled = true, bubbleSize = 40 }) => {
     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({
@@ -59,18 +55,20 @@ const XenonComponent = memo<XenonComponentProps>(
     useImperativeHandle(
       rootRef,
       () => ({
+        isVisible() {
+          return debuggerVisibility !== 'hidden';
+        },
         show() {
-          setDebuggerVisibility('bubble');
+          if (!this.isVisible()) setDebuggerVisibility('bubble');
         },
         hide() {
-          setDebuggerVisibility('hidden');
+          if (this.isVisible()) setDebuggerVisibility('hidden');
         },
       }),
-      [],
+      [debuggerVisibility],
     );
 
     let content;
-
     switch (debuggerVisibility) {
       case 'bubble':
         content = (
@@ -92,10 +90,8 @@ const XenonComponent = memo<XenonComponentProps>(
             ]}
           >
             <DebuggerHeader />
-
             {panelSelected === DebuggerPanel.Network && <NetworkPanel />}
             {panelSelected === DebuggerPanel.Console && <ConsolePanel />}
-
             {!panelSelected && !!detailsData.current && <DetailsViewer />}
           </SafeAreaView>
         );
@@ -146,6 +142,9 @@ const styles = StyleSheet.create({
 XenonComponent.displayName = 'Xenon';
 
 const Xenon: ReactNativeXenon = {
+  isVisible() {
+    return rootRef.current?.isVisible() ?? false;
+  },
   show() {
     rootRef.current?.show();
   },

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

@@ -16,6 +16,8 @@ interface BubbleProps {
 }
 
 export default function Bubble({ bubbleSize, pan }: BubbleProps) {
+  const iconSize = bubbleSize * 0.65;
+
   const { setDebuggerVisibility, screenWidth, screenHeight, verticalSafeMargin } =
     useContext(MainContext)!;
 
@@ -74,13 +76,7 @@ export default function Bubble({ bubbleSize, pan }: BubbleProps) {
         },
       ]}
     >
-      <Image
-        source={icons.code}
-        style={{
-          width: bubbleSize * 0.75,
-          height: bubbleSize * 0.75,
-        }}
-      />
+      <Image source={icons.bug} style={{ width: iconSize, height: iconSize }} />
     </Animated.View>
   );
 }

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

@@ -39,7 +39,7 @@ export default function NetworkPanelHeader() {
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
+    marginHorizontal: 8,
     flexDirection: 'row',
     alignItems: 'center',
     backgroundColor: colors.gray,

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

@@ -1,10 +1,9 @@
 import { useCallback, useContext } from 'react';
 import { FlatList, StyleSheet, View, type ListRenderItem } from 'react-native';
+import colors from '../../../colors';
 import { MainContext } from '../../../contexts';
-import { useScrollToBottom } from '../../../hooks';
 import type { LogMessage } from '../../../types';
 import ConsolePanelItem from '../items/ConsolePanelItem';
-import colors from '../../../colors';
 
 const Separator = () => <View style={styles.divider} />;
 
@@ -15,8 +14,6 @@ export default function ConsolePanel() {
     detailsData,
   } = useContext(MainContext)!;
 
-  const listRef = useScrollToBottom(logMessages.length);
-
   const renderItem = useCallback<ListRenderItem<LogMessage>>(
     ({ item }) => {
       return (
@@ -34,12 +31,12 @@ export default function ConsolePanel() {
 
   return (
     <FlatList
-      ref={listRef}
-      style={styles.container}
-      data={logMessages}
+      inverted
+      data={logMessages.toReversed()}
       renderItem={renderItem}
-      ItemSeparatorComponent={Separator}
       keyExtractor={(_, index) => index.toString()}
+      ItemSeparatorComponent={Separator}
+      style={styles.container}
     />
   );
 }

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

@@ -1,11 +1,10 @@
-import { useCallback, useContext } from 'react';
+import { useCallback, useContext, useMemo } from 'react';
 import { FlatList, StyleSheet, View, type ListRenderItem } from 'react-native';
+import colors from '../../../colors';
 import { MainContext } from '../../../contexts';
-import { useScrollToBottom } from '../../../hooks';
 import { NetworkType, type HttpRequest, type ID, type WebSocketRequest } from '../../../types';
 import NetworkPanelHeader from '../headers/NetworkPanelHeader';
 import NetworkPanelItem from '../items/NetworkPanelItem';
-import colors from '../../../colors';
 
 const Separator = () => <View style={styles.divider} />;
 
@@ -16,7 +15,7 @@ export default function NetworkPanel() {
     detailsData,
   } = useContext(MainContext)!;
 
-  const listRef = useScrollToBottom(networkRequests.size);
+  const data = useMemo(() => Array.from(networkRequests).reverse(), [networkRequests]);
 
   const renderItem = useCallback<ListRenderItem<[NonNullable<ID>, HttpRequest | WebSocketRequest]>>(
     ({ item: [_, item] }) => {
@@ -41,16 +40,17 @@ export default function NetworkPanel() {
   );
 
   return (
-    <FlatList
-      ref={listRef}
-      data={Array.from(networkRequests)}
-      style={styles.container}
-      ListHeaderComponent={NetworkPanelHeader}
-      stickyHeaderIndices={[0]}
-      ItemSeparatorComponent={Separator}
-      keyExtractor={([key]) => key}
-      renderItem={renderItem}
-    />
+    <>
+      <NetworkPanelHeader />
+      <FlatList
+        inverted
+        data={data}
+        renderItem={renderItem}
+        keyExtractor={([key]) => key}
+        ItemSeparatorComponent={Separator}
+        style={styles.container}
+      />
+    </>
   );
 }
 

package/src/utils.ts

@@ -55,3 +55,9 @@ export const convertToCurl = (
 
   return curlCommand;
 };
+
+export function frozen(_target: Object) {
+  const descriptor: PropertyDescriptor = arguments[2];
+  descriptor.configurable = false;
+  descriptor.writable = false;
+}

package/lib/commonjs/hooks/useScrollToBottom.js

@@ -1,23 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = useScrollToBottom;
-var _react = require("react");
-function useScrollToBottom(listSize) {
-  const currentSize = (0, _react.useRef)(listSize);
-  const listRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(() => {
-    if (listSize <= currentSize.current) return;
-    currentSize.current = listSize;
-    const timer = setTimeout(() => {
-      if (listSize) listRef.current?.scrollToEnd();
-    }, 0);
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [listSize]);
-  return listRef;
-}
-//# sourceMappingURL=useScrollToBottom.js.map

package/lib/commonjs/hooks/useScrollToBottom.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","require","useScrollToBottom","listSize","currentSize","useRef","listRef","useEffect","current","timer","setTimeout","scrollToEnd","clearTimeout"],"sourceRoot":"../../../src","sources":["hooks/useScrollToBottom.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAGe,SAASC,iBAAiBA,CAACC,QAAgB,EAAE;EAC1D,MAAMC,WAAW,GAAG,IAAAC,aAAM,EAACF,QAAQ,CAAC;EACpC,MAAMG,OAAO,GAAG,IAAAD,aAAM,EAAkB,IAAI,CAAC;EAE7C,IAAAE,gBAAS,EAAC,MAAM;IACd,IAAIJ,QAAQ,IAAIC,WAAW,CAACI,OAAO,EAAE;IAErCJ,WAAW,CAACI,OAAO,GAAGL,QAAQ;IAE9B,MAAMM,KAAK,GAAGC,UAAU,CAAC,MAAM;MAC7B,IAAIP,QAAQ,EAAEG,OAAO,CAACE,OAAO,EAAEG,WAAW,CAAC,CAAC;IAC9C,CAAC,EAAE,CAAC,CAAC;IAEL,OAAO,MAAM;MACXC,YAAY,CAACH,KAAK,CAAC;IACrB,CAAC;EACH,CAAC,EAAE,CAACN,QAAQ,CAAC,CAAC;EAEd,OAAOG,OAAO;AAChB","ignoreList":[]}

package/lib/module/hooks/useScrollToBottom.js

@@ -1,19 +0,0 @@
-"use strict";
-
-import { useEffect, useRef } from 'react';
-export default function useScrollToBottom(listSize) {
-  const currentSize = useRef(listSize);
-  const listRef = useRef(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;
-}
-//# sourceMappingURL=useScrollToBottom.js.map

package/lib/module/hooks/useScrollToBottom.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["useEffect","useRef","useScrollToBottom","listSize","currentSize","listRef","current","timer","setTimeout","scrollToEnd","clearTimeout"],"sourceRoot":"../../../src","sources":["hooks/useScrollToBottom.ts"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAGzC,eAAe,SAASC,iBAAiBA,CAACC,QAAgB,EAAE;EAC1D,MAAMC,WAAW,GAAGH,MAAM,CAACE,QAAQ,CAAC;EACpC,MAAME,OAAO,GAAGJ,MAAM,CAAkB,IAAI,CAAC;EAE7CD,SAAS,CAAC,MAAM;IACd,IAAIG,QAAQ,IAAIC,WAAW,CAACE,OAAO,EAAE;IAErCF,WAAW,CAACE,OAAO,GAAGH,QAAQ;IAE9B,MAAMI,KAAK,GAAGC,UAAU,CAAC,MAAM;MAC7B,IAAIL,QAAQ,EAAEE,OAAO,CAACC,OAAO,EAAEG,WAAW,CAAC,CAAC;IAC9C,CAAC,EAAE,CAAC,CAAC;IAEL,OAAO,MAAM;MACXC,YAAY,CAACH,KAAK,CAAC;IACrB,CAAC;EACH,CAAC,EAAE,CAACJ,QAAQ,CAAC,CAAC;EAEd,OAAOE,OAAO;AAChB","ignoreList":[]}

package/lib/typescript/commonjs/src/hooks/useScrollToBottom.d.ts

@@ -1,3 +0,0 @@
-import type { FlatList } from 'react-native';
-export default function useScrollToBottom(listSize: number): import("react").MutableRefObject<FlatList<any> | null>;
-//# sourceMappingURL=useScrollToBottom.d.ts.map

package/lib/typescript/commonjs/src/hooks/useScrollToBottom.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useScrollToBottom.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useScrollToBottom.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7C,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,QAAQ,EAAE,MAAM,0DAmBzD"}

package/lib/typescript/module/src/hooks/useScrollToBottom.d.ts

@@ -1,3 +0,0 @@
-import type { FlatList } from 'react-native';
-export default function useScrollToBottom(listSize: number): import("react").MutableRefObject<FlatList<any> | null>;
-//# sourceMappingURL=useScrollToBottom.d.ts.map

package/lib/typescript/module/src/hooks/useScrollToBottom.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useScrollToBottom.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useScrollToBottom.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7C,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,QAAQ,EAAE,MAAM,0DAmBzD"}

package/src/hooks/useScrollToBottom.ts

@@ -1,23 +0,0 @@
-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;
-}