react-native-inapp-inspector 1.1.32 → 1.1.34

package/dist/esm/components/Inspector/ReduxTab.js

@@ -12,13 +12,13 @@ import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { getActionHistory, getReduxAutoRefresh, setReduxAutoRefresh, } from '../../customHooks/reduxLogger';
-import { TerminalIcon, SearchIcon, ClearIcon, LayersIcon, ClockIcon, ForwardChevronIcon, SortArrowIcon, BoltIcon, TextAaIcon, HeaderPauseIcon, } from '../NetworkIcons';
+import { TerminalIcon, SearchIcon, ClearIcon, LayersIcon, ClockIcon, ForwardChevronIcon, SortArrowIcon, BoltIcon, AtomIcon, ScreenIcon, ListenerIcon, DocIcon, LoadingSpinnerIcon, CircleAlertIcon, TextAaIcon, HeaderPauseIcon, } from '../NetworkIcons';
 const getOriginBadge = (originType) => {
     switch (originType) {
         case 'saga':
             return {
                 label: 'SAGA',
-                icon: '⚡',
+                renderIcon: (color, size = 9) => <BoltIcon color={color} size={size}/>,
                 bg: AppColors.purple100,
                 text: AppColors.brandPurple,
                 border: AppColors.purple200,
@@ -26,7 +26,7 @@ const getOriginBadge = (originType) => {
         case 'thunk':
             return {
                 label: 'THUNK',
-                icon: '⚛️',
+                renderIcon: (color, size = 9) => <AtomIcon color={color} size={size}/>,
                 bg: AppColors.amber100,
                 text: AppColors.amber800Warm,
                 border: AppColors.amber200,
@@ -34,7 +34,7 @@ const getOriginBadge = (originType) => {
         case 'ui':
             return {
                 label: 'UI',
-                icon: '📱',
+                renderIcon: (color, size = 9) => <ScreenIcon color={color} size={size}/>,
                 bg: AppColors.sky100,
                 text: AppColors.sky600,
                 border: AppColors.sky400,
@@ -42,7 +42,7 @@ const getOriginBadge = (originType) => {
         case 'listener':
             return {
                 label: 'LISTENER',
-                icon: '👂',
+                renderIcon: (color, size = 9) => <ListenerIcon color={color} size={size}/>,
                 bg: AppColors.teal100,
                 text: AppColors.teal700,
                 border: AppColors.teal400,
@@ -50,54 +50,13 @@ const getOriginBadge = (originType) => {
         default:
             return {
                 label: 'DIRECT',
-                icon: '⚡',
+                renderIcon: (color, size = 9) => <BoltIcon color={color} size={size}/>,
                 bg: AppColors.slate100,
                 text: AppColors.slate700,
                 border: AppColors.slate200,
             };
     }
 };
-const getKeyChipStyle = (key) => {
-    const k = key.toLowerCase();
-    if (k.includes('load') || k.includes('pend') || k.includes('status')) {
-        return {
-            bg: AppColors.amber100,
-            border: AppColors.amber200,
-            text: AppColors.amber800Warm,
-            dot: AppColors.darkOrange,
-        };
-    }
-    if (k.includes('err') || k.includes('fail') || k.includes('reject')) {
-        return {
-            bg: AppColors.red100,
-            border: AppColors.errorBorder,
-            text: AppColors.red600,
-            dot: AppColors.errorColor,
-        };
-    }
-    if (k.includes('user') || k.includes('auth') || k.includes('token') || k.includes('profile')) {
-        return {
-            bg: AppColors.indigo50,
-            border: AppColors.indigo400,
-            text: AppColors.indigo600Alt,
-            dot: AppColors.indigo500,
-        };
-    }
-    if (k.includes('item') || k.includes('data') || k.includes('list') || k.includes('entit') || k.includes('count')) {
-        return {
-            bg: AppColors.emeraldBg,
-            border: AppColors.emeraldBorder,
-            text: AppColors.emerald700,
-            dot: AppColors.emerald500,
-        };
-    }
-    return {
-        bg: AppColors.slate100,
-        border: AppColors.slate200,
-        text: AppColors.slate700,
-        dot: AppColors.slate400,
-    };
-};
 const ReduxTab = React.memo(() => {
     const { t } = useTranslation();
     const { reduxState, reduxLastActionMap, reduxSearch, setReduxSearch, setSelectedReduxSlice, } = useInspector();
@@ -131,17 +90,12 @@ const ReduxTab = React.memo(() => {
             const isObject = sliceVal && typeof sliceVal === 'object';
             let typeLabel = 'Primitive';
             let keysCount = 0;
-            let topKeys = [];
-            let totalKeysCount = 0;
             if (isArray) {
                 keysCount = sliceVal.length;
                 typeLabel = `Array [${keysCount}]`;
             }
             else if (isObject) {
-                const objKeys = Object.keys(sliceVal);
-                totalKeysCount = objKeys.length;
-                keysCount = totalKeysCount;
-                topKeys = objKeys.slice(0, 4);
+                keysCount = Object.keys(sliceVal).length;
                 typeLabel = `Object {${keysCount}}`;
             }
             else if (typeof sliceVal !== 'undefined') {
@@ -211,8 +165,6 @@ const ReduxTab = React.memo(() => {
                 keysCount,
                 sizeStr: getSize(sliceVal),
                 typeLabel,
-                topKeys,
-                totalKeysCount,
                 status,
                 statusMessage,
                 timelineCount,
@@ -227,8 +179,7 @@ const ReduxTab = React.memo(() => {
         if (reduxSearch.trim().length > 0) {
             const q = reduxSearch.toLowerCase();
             list = list.filter(item => item.name.toLowerCase().includes(q) ||
-                (item.lastAction && item.lastAction.type.toLowerCase().includes(q)) ||
-                item.topKeys.some(k => k.toLowerCase().includes(q)));
+                (item.lastAction && item.lastAction.type.toLowerCase().includes(q)));
         }
         return [...list].sort((a, b) => {
             if (sortMode === 'latest') {
@@ -271,9 +222,11 @@ const ReduxTab = React.memo(() => {
 
               {/* Status Badge */}
               {item.status === 'loading' ? (<View style={reduxTabStyles.loadingPill}>
-                  <Text style={reduxTabStyles.loadingPillText}>⏳ Loading</Text>
+                  <LoadingSpinnerIcon color={AppColors.amber800Warm} size={10}/>
+                  <Text style={reduxTabStyles.loadingPillText}>Loading</Text>
                 </View>) : item.status === 'error' ? (<View style={reduxTabStyles.errorPill}>
-                  <Text style={reduxTabStyles.errorPillText}>⚠️ Error</Text>
+                  <CircleAlertIcon color={AppColors.red600} size={10}/>
+                  <Text style={reduxTabStyles.errorPillText}>Error</Text>
                 </View>) : item.status === 'empty' ? (<View style={reduxTabStyles.emptyPill}>
                   <Text style={reduxTabStyles.emptyPillText}>Empty</Text>
                 </View>) : (<View style={reduxTabStyles.livePill}>
@@ -307,41 +260,6 @@ const ReduxTab = React.memo(() => {
                 </View>)}
             </View>
 
-            {/* Keys Preview Chips (if object has keys) */}
-            {item.topKeys.length > 0 && (<View style={reduxTabStyles.keysContainer}>
-                <Text style={reduxTabStyles.keysHeading}>Keys:</Text>
-                <View style={reduxTabStyles.keysWrap}>
-                  {item.topKeys.map((k, kIdx) => {
-                    const chipStyle = getKeyChipStyle(k);
-                    return (<View key={kIdx} style={[
-                            reduxTabStyles.keyChip,
-                            {
-                                backgroundColor: chipStyle.bg,
-                                borderColor: chipStyle.border,
-                            },
-                        ]}>
-                        <View style={{
-                            width: 5,
-                            height: 5,
-                            borderRadius: 2.5,
-                            backgroundColor: chipStyle.dot,
-                        }}/>
-                        <Text style={[
-                            reduxTabStyles.keyChipText,
-                            { color: chipStyle.text },
-                        ]} numberOfLines={1}>
-                          {k}
-                        </Text>
-                      </View>);
-                })}
-                  {item.totalKeysCount > item.topKeys.length && (<View style={reduxTabStyles.keyMoreChip}>
-                      <Text style={reduxTabStyles.keyMoreChipText}>
-                        +{item.totalKeysCount - item.topKeys.length}
-                      </Text>
-                    </View>)}
-                </View>
-              </View>)}
-
             {/* Bottom row: Last Dispatched Action with Origin & Trigger Line */}
             {item.lastAction && (<View style={reduxTabStyles.lastActionRow}>
                 <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5, flex: 1, minWidth: 0, flexWrap: 'wrap' }}>
@@ -349,29 +267,30 @@ const ReduxTab = React.memo(() => {
                   <Text style={reduxTabStyles.lastActionLabel}>{t('redux.last', 'Last')}:</Text>
 
                   {/* Origin Badge */}
-                  {item.lastAction.originType && (<View style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 2.5,
-                        backgroundColor: getOriginBadge(item.lastAction.originType).bg,
-                        paddingHorizontal: 4.5,
-                        paddingVertical: 1.5,
-                        borderRadius: 3.5,
-                        borderWidth: 1,
-                        borderColor: getOriginBadge(item.lastAction.originType).border,
-                    }}>
-                      <Text style={{ fontSize: 8.5 }}>
-                        {getOriginBadge(item.lastAction.originType).icon}
-                      </Text>
-                      <Text style={{
-                        fontFamily: AppFonts.interBold,
-                        fontSize: 8,
-                        color: getOriginBadge(item.lastAction.originType).text,
-                        letterSpacing: 0.3,
-                    }}>
-                        {getOriginBadge(item.lastAction.originType).label}
-                      </Text>
-                    </View>)}
+                  {item.lastAction.originType && (() => {
+                    const origin = getOriginBadge(item.lastAction.originType);
+                    return (<View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 2.5,
+                            backgroundColor: origin.bg,
+                            paddingHorizontal: 4.5,
+                            paddingVertical: 1.5,
+                            borderRadius: 3.5,
+                            borderWidth: 1,
+                            borderColor: origin.border,
+                        }}>
+                        {origin.renderIcon(origin.text, 8.5)}
+                        <Text style={{
+                            fontFamily: AppFonts.interBold,
+                            fontSize: 8,
+                            color: origin.text,
+                            letterSpacing: 0.3,
+                        }}>
+                          {origin.label}
+                        </Text>
+                      </View>);
+                })()}
 
                   <HighlightText text={item.lastAction.type} search={reduxSearch} style={reduxTabStyles.lastActionValue} highlightStyle={reduxTabStyles.highlight} numberOfLines={1}/>
 
@@ -379,7 +298,7 @@ const ReduxTab = React.memo(() => {
                   {item.lastAction.callerFile && (<Pressable onPress={() => openInVSCode(item.lastAction.callerFile, item.lastAction.callerLine, item.lastAction.callerCol)} hitSlop={6} style={{
                         flexDirection: 'row',
                         alignItems: 'center',
-                        gap: 2,
+                        gap: 2.5,
                         backgroundColor: AppColors.sky100,
                         paddingHorizontal: 4.5,
                         paddingVertical: 1.5,
@@ -387,12 +306,13 @@ const ReduxTab = React.memo(() => {
                         borderWidth: 0.5,
                         borderColor: AppColors.sky400,
                     }}>
+                      <DocIcon color={AppColors.sky600} size={9}/>
                       <Text style={{
                         fontFamily: AppFonts.interMedium,
                         fontSize: 8.5,
                         color: AppColors.sky600,
                     }}>
-                        📄 {item.lastAction.callerFile.split('/').pop()}:{item.lastAction.callerLine || 1}
+                        {item.lastAction.callerFile.split('/').pop()}:{item.lastAction.callerLine || 1}
                       </Text>
                     </Pressable>)}
 
@@ -431,20 +351,27 @@ const ReduxTab = React.memo(() => {
         <View style={[reduxTabStyles.statCol, { flex: 1.6 }]}>
           <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
             <Text style={reduxTabStyles.statHeading}>LAST ACTION</Text>
-            {lastGlobalAction?.originType && (<View style={{
-                backgroundColor: getOriginBadge(lastGlobalAction.originType).bg,
-                paddingHorizontal: 4,
-                paddingVertical: 1,
-                borderRadius: 3,
-            }}>
-                <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 7.5,
-                color: getOriginBadge(lastGlobalAction.originType).text,
-            }}>
-                  {getOriginBadge(lastGlobalAction.originType).label}
-                </Text>
-              </View>)}
+            {lastGlobalAction?.originType && (() => {
+            const origin = getOriginBadge(lastGlobalAction.originType);
+            return (<View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 2,
+                    backgroundColor: origin.bg,
+                    paddingHorizontal: 4,
+                    paddingVertical: 1,
+                    borderRadius: 3,
+                }}>
+                  {origin.renderIcon(origin.text, 8)}
+                  <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 7.5,
+                    color: origin.text,
+                }}>
+                    {origin.label}
+                  </Text>
+                </View>);
+        })()}
           </View>
           <Text style={reduxTabStyles.statLastAction} numberOfLines={1}>
             {lastGlobalAction ? lastGlobalAction.type : 'Initial'}
@@ -745,54 +672,6 @@ const reduxTabStyles = StyleSheet.create({
         fontSize: 9.5,
         color: AppColors.grayTextWeak,
     },
-    keysContainer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        marginTop: 4,
-        marginBottom: 4,
-    },
-    keysHeading: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10,
-        color: AppColors.grayTextWeak,
-    },
-    keysWrap: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        gap: 4,
-        flex: 1,
-    },
-    keyChip: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        backgroundColor: AppColors.slate100,
-        paddingHorizontal: 6,
-        paddingVertical: 2.5,
-        borderRadius: 5,
-        borderWidth: 1,
-        borderColor: AppColors.slate200,
-        maxWidth: 120,
-    },
-    keyChipText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9.5,
-        color: AppColors.slate700,
-    },
-    keyMoreChip: {
-        backgroundColor: AppColors.purple100,
-        paddingHorizontal: 5,
-        paddingVertical: 2,
-        borderRadius: 4,
-        borderWidth: 1,
-        borderColor: AppColors.purple200,
-    },
-    keyMoreChipText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9,
-        color: AppColors.brandPurple,
-    },
     lastActionRow: {
         flexDirection: 'row',
         alignItems: 'center',

package/dist/esm/components/NetworkIcons.d.ts

@@ -113,3 +113,5 @@ export declare const TrailIcon: ({ color, size, }: IconProps) => React.JSX.Eleme
 export declare const RawJsonIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const AppFramesIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const AllFramesIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const ListenerIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const LoadingSpinnerIcon: ({ color, size, }: IconProps) => React.JSX.Element;

package/dist/esm/components/NetworkIcons.js

@@ -651,3 +651,14 @@ export const AllFramesIcon = ({ color = AppColors.grayTextWeak, size = 14, }) =>
       <Rect x="16" y="16" width="4" height="4" rx="1" fill={color}/>
     </Svg>);
 };
+export const ListenerIcon = ({ color = AppColors.grayTextWeak, size = 14, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M3 18v-6a9 9 0 0 1 18 0v6" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+      <Path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3v5zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3v5z" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};
+export const LoadingSpinnerIcon = ({ color = AppColors.amber800Warm, size = 12, }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" stroke={color} strokeWidth="2.2" strokeLinecap="round"/>
+    </Svg>);
+};

package/dist/esm/constants/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "1.1.32";
+export declare const LIB_VERSION = "1.1.34";

package/dist/esm/constants/version.js

@@ -1,3 +1,3 @@
 // AUTO-GENERATED FILE — do not edit by hand.
 // Regenerated from package.json on every build by scripts/gen-version.js.
-export const LIB_VERSION = '1.1.32';
+export const LIB_VERSION = '1.1.34';

package/dist/esm/customHooks/bundleAnalyzer.d.ts

@@ -111,8 +111,11 @@ export declare const trackRuntimeDefine: () => void;
  */
 export declare const parseBundleSource: (bundleText: string, totalBytes: number, scriptURL: string, isLive?: boolean) => HostBundleAnalysisResult;
 /**
- * Automatically fetch and analyze the real running bundle for the host app.
- * Supports dynamic port detection (8081, 8082, 8083, etc.) and parallel dev server probing.
+ * Returns an instant baseline bundle analysis synchronously (never blocks UI).
+ */
+export declare const getInitialBundleAnalysis: () => HostBundleAnalysisResult;
+/**
+ * Asynchronously fetch and analyze the running Metro bundle in the background.
  */
 export declare const analyzeHostAppBundle: (forceRefresh?: boolean) => Promise<HostBundleAnalysisResult>;
 export declare const clearCachedBundleAnalysis: () => void;