react-native-inapp-inspector 1.1.26 → 1.1.28

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

@@ -1,12 +1,13 @@
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
-import { ActivityIndicator, Image, Linking, Pressable, ScrollView, StyleSheet, Text, TextInput, View, } from 'react-native';
+import { ActivityIndicator, Image, Linking, Platform, Pressable, ScrollView, Share, StyleSheet, Text, TextInput, View, } from 'react-native';
 import { useTranslation, t } from '../../i18n';
 import TouchableScale from '../TouchableScale';
 import CopyButton from '../CopyButton';
 import HighlightText from '../HighlightText';
 import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
-import { PackageIcon, SearchIcon, ClearIcon, CircleAlertIcon, LayersIcon, TimelineIcon, LiveStateIcon, StorageIcon, MetadataIcon, FolderIcon, FolderOpenIcon, TrashIcon, LightbulbIcon, SparkleIcon, ClockIcon, RefreshCcwIcon, ExternalLinkIcon, } from '../NetworkIcons';
+import { copyToClipboard } from '../../helpers';
+import { PackageIcon, SearchIcon, ClearIcon, CircleAlertIcon, LayersIcon, TimelineIcon, LiveStateIcon, StorageIcon, MetadataIcon, FolderIcon, FolderOpenIcon, TrashIcon, LightbulbIcon, SparkleIcon, ClockIcon, RefreshCcwIcon, ExternalLinkIcon, DownloadIcon, } from '../NetworkIcons';
 import Svg, { Path, Rect, Circle, Ellipse, G, Defs, LinearGradient, Stop, } from 'react-native-svg';
 import { analyzeHostAppBundle, getCachedBundleAnalysis, } from '../../customHooks/bundleAnalyzer';
 // ─── High-Fidelity Vector Package & NPM Logos ────────────────────────────────
@@ -304,7 +305,72 @@ function buildBundleFileTree(files) {
     }
     return convertMapToNodes(rootMap);
 }
-const BundleTreeNodeView = ({ node, level, search, totalBundleKb, expandedFolders, toggleFolder, isLastChild, }) => {
+export const downloadBundleFile = async (file, scriptURL) => {
+    let content = '';
+    // 1. Attempt to fetch real source code from Metro dev server if available
+    try {
+        let devServerOrigin = 'http://localhost:8081';
+        if (scriptURL && scriptURL.startsWith('http')) {
+            const match = scriptURL.match(/^(https?:\/\/[^/]+)/);
+            if (match) {
+                devServerOrigin = match[1];
+            }
+        }
+        const cleanPath = file.path.replace(/^\/+/, '');
+        const url = `${devServerOrigin}/${cleanPath}`;
+        const res = await fetch(url);
+        if (res.ok) {
+            const text = await res.text();
+            if (text && text.length > 0) {
+                content = text;
+            }
+        }
+    }
+    catch { }
+    // 2. If dev server direct fetch is unavailable, provide structured module descriptor with full path
+    if (!content) {
+        content = `// ─────────────────────────────────────────────────────────────
+// File: ${file.name}
+// Path: ${file.path}
+// Category: ${file.category.toUpperCase()}
+// Size: ${file.sizeKb} KB
+// Status: ${file.status === 'optimal' ? 'Active in Dependency Graph' : 'Not consumed / Static'}
+// Meta: ${file.meta}
+// ─────────────────────────────────────────────────────────────
+
+export default {
+  id: ${JSON.stringify(file.id)},
+  name: ${JSON.stringify(file.name)},
+  path: ${JSON.stringify(file.path)},
+  category: ${JSON.stringify(file.category)},
+  sizeKb: ${file.sizeKb},
+  meta: ${JSON.stringify(file.meta)},
+  status: ${JSON.stringify(file.status || 'optimal')},
+};
+`;
+    }
+    // 3. Trigger native Share / Download sheet
+    try {
+        await Share.share(Platform.OS === 'ios'
+            ? {
+                title: file.name,
+                message: content,
+            }
+            : {
+                title: `Download ${file.name}`,
+                message: content,
+            }, {
+            dialogTitle: `Download / Save ${file.name}`,
+        });
+    }
+    catch { }
+    // 4. Also copy directly to clipboard for quick paste in VS Code or external editor
+    try {
+        copyToClipboard(content, file.name);
+    }
+    catch { }
+};
+const BundleTreeNodeView = ({ node, level, search, totalBundleKb, expandedFolders, toggleFolder, isLastChild, onDownload, }) => {
     const isExpanded = search ? true : !!expandedFolders[node.fullPath];
     const isCollapsed = !isExpanded;
     const indentLeft = level * 16 + 10;
@@ -342,7 +408,7 @@ const BundleTreeNodeView = ({ node, level, search, totalBundleKb, expandedFolder
         </TouchableScale>
 
         {!isCollapsed && (<View style={bundleStyles.treeChildrenContainer}>
-            {node.children.map((child, cIdx) => (<BundleTreeNodeView key={child.id} node={child} level={level + 1} search={search} totalBundleKb={totalBundleKb} expandedFolders={expandedFolders} toggleFolder={toggleFolder} isLastChild={cIdx === node.children.length - 1}/>))}
+            {node.children.map((child, cIdx) => (<BundleTreeNodeView key={child.id} node={child} level={level + 1} search={search} totalBundleKb={totalBundleKb} expandedFolders={expandedFolders} toggleFolder={toggleFolder} isLastChild={cIdx === node.children.length - 1} onDownload={onDownload}/>))}
           </View>)}
       </View>);
     }
@@ -383,7 +449,13 @@ const BundleTreeNodeView = ({ node, level, search, totalBundleKb, expandedFolder
           <Text style={bundleStyles.treeFilePctText}>{pctOfTotal}%</Text>
         </View>
 
-        <CopyButton value={() => file} label={t('bundle.fileDetailsJson')}/>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
+          {onDownload && (<TouchableScale onPress={() => onDownload(file)} style={bundleStyles.treeActionBtn} hitSlop={8}>
+              <DownloadIcon size={13} color={AppColors.sky500}/>
+            </TouchableScale>)}
+
+          <CopyButton value={() => file} label={t('bundle.fileDetailsJson')}/>
+        </View>
       </View>
     </View>);
 };
@@ -560,12 +632,28 @@ const BundleTab = React.memo(() => {
     const filteredTotalKb = useMemo(() => {
         return filteredFiles.reduce((acc, f) => acc + f.sizeKb, 0);
     }, [filteredFiles]);
-    // Tree View State & Node Generation (Collapsed by default)
+    // Tree View State & Node Generation (Top folders expanded by default)
     const [filesViewMode, setFilesViewMode] = useState('tree');
     const [expandedFolders, setExpandedFolders] = useState({});
     const fileTreeNodes = useMemo(() => {
         return buildBundleFileTree(filteredFiles);
     }, [filteredFiles]);
+    useEffect(() => {
+        if (fileTreeNodes.length > 0 && Object.keys(expandedFolders).length === 0) {
+            const initial = {};
+            fileTreeNodes.forEach(node => {
+                if (node.isFolder) {
+                    initial[node.fullPath] = true;
+                    node.children.forEach(child => {
+                        if (child.isFolder) {
+                            initial[child.fullPath] = true;
+                        }
+                    });
+                }
+            });
+            setExpandedFolders(initial);
+        }
+    }, [fileTreeNodes]);
     const toggleFolder = useCallback((path) => {
         setExpandedFolders(prev => ({
             ...prev,
@@ -1318,7 +1406,7 @@ const BundleTab = React.memo(() => {
 
             {/* ── MODE 1: DIRECTORY TREE VIEW ── */}
             {filesViewMode === 'tree' ? (<View style={bundleStyles.treeRootCard}>
-                {fileTreeNodes.map((node, nIdx) => (<BundleTreeNodeView key={node.id} node={node} level={0} search={search} totalBundleKb={summary.totalKb} expandedFolders={expandedFolders} toggleFolder={toggleFolder} isLastChild={nIdx === fileTreeNodes.length - 1}/>))}
+                {fileTreeNodes.map((node, nIdx) => (<BundleTreeNodeView key={node.id} node={node} level={0} search={search} totalBundleKb={summary.totalKb} expandedFolders={expandedFolders} toggleFolder={toggleFolder} isLastChild={nIdx === fileTreeNodes.length - 1} onDownload={f => downloadBundleFile(f, analysis?.scriptURL)}/>))}
               </View>) : (
             /* ── MODE 2: FLAT LIST VIEW ── */
             filteredFiles.map((file, index) => {
@@ -1354,6 +1442,9 @@ const BundleTab = React.memo(() => {
                           </Text>
                           <Text style={bundleStyles.filePercent}>{pctOfTotal}%</Text>
                         </View>
+                        <TouchableScale onPress={() => downloadBundleFile(file, analysis?.scriptURL)} style={bundleStyles.downloadFileBtn} hitSlop={8}>
+                          <DownloadIcon size={14} color={AppColors.sky500}/>
+                        </TouchableScale>
                         <CopyButton value={() => file} label={t('bundle.fileDetailsJson')}/>
                       </View>
                     </View>
@@ -1372,21 +1463,25 @@ const BundleTab = React.memo(() => {
                       <Text style={bundleStyles.fileMetaText}>{file.meta}</Text>
                       {file.advice && (<View style={[
                             bundleStyles.adviceBadge,
-                            file.status === 'warning' && bundleStyles.adviceWarning,
-                            file.status === 'optimal' && bundleStyles.adviceOptimal,
+                            file.status === 'warning' &&
+                                bundleStyles.adviceWarning,
+                            file.status === 'optimal' &&
+                                bundleStyles.adviceOptimal,
                             isUnused && bundleStyles.adviceUnused,
                         ]}>
-                          <View style={{ flexDirection: 'row', alignItems: 'flex-start', gap: 5 }}>
                           {isUnused ? (<TrashIcon color={AppColors.red600} size={12}/>) : file.status === 'warning' ? (<LightbulbIcon color={AppColors.amber800Warm} size={12}/>) : (<SparkleIcon color={AppColors.emerald700} size={12}/>)}
                           <Text style={[
                             bundleStyles.adviceText,
-                            file.status === 'warning' && { color: AppColors.amber800Warm },
-                            file.status === 'optimal' && { color: AppColors.emerald700 },
+                            file.status === 'warning' && {
+                                color: AppColors.amber800Warm,
+                            },
+                            file.status === 'optimal' && {
+                                color: AppColors.emerald700,
+                            },
                             isUnused && { color: AppColors.red600 },
                         ]}>
                             {file.advice}
                           </Text>
-                        </View>
                         </View>)}
                     </View>
                   </View>);
@@ -1617,6 +1712,9 @@ const BundleTab = React.memo(() => {
                         {t('bundle.fileSizeKb', { size: file.sizeKb })}
                       </Text>
                     </View>
+                    <TouchableScale onPress={() => downloadBundleFile(file, analysis?.scriptURL)} style={bundleStyles.downloadFileBtn} hitSlop={8}>
+                      <DownloadIcon size={14} color={AppColors.sky500}/>
+                    </TouchableScale>
                     <CopyButton value={() => file} label={t('bundle.mediaItemJson')}/>
                   </View>
                 </View>
@@ -1628,16 +1726,18 @@ const BundleTab = React.memo(() => {
                         file.status === 'warning' && bundleStyles.adviceWarning,
                         file.status === 'optimal' && bundleStyles.adviceOptimal,
                     ]}>
-                      <View style={{ flexDirection: 'row', alignItems: 'flex-start', gap: 5 }}>
-                        {file.status === 'warning' ? (<LightbulbIcon color={AppColors.amber800Warm} size={12}/>) : (<SparkleIcon color={AppColors.emerald700} size={12}/>)}
-                        <Text style={[
+                      {file.status === 'warning' ? (<LightbulbIcon color={AppColors.amber800Warm} size={12}/>) : (<SparkleIcon color={AppColors.emerald700} size={12}/>)}
+                      <Text style={[
                         bundleStyles.adviceText,
-                        file.status === 'warning' && { color: AppColors.amber800Warm },
-                        file.status === 'optimal' && { color: AppColors.emerald700 },
+                        file.status === 'warning' && {
+                            color: AppColors.amber800Warm,
+                        },
+                        file.status === 'optimal' && {
+                            color: AppColors.emerald700,
+                        },
                     ]}>
-                          {file.advice}
-                        </Text>
-                      </View>
+                        {file.advice}
+                      </Text>
                     </View>)}
                 </View>
               </View>))}
@@ -2408,6 +2508,24 @@ const bundleStyles = StyleSheet.create({
     fileSizeBox: {
         alignItems: 'flex-end',
     },
+    downloadFileBtn: {
+        padding: 6,
+        borderRadius: 6,
+        backgroundColor: `${AppColors.sky500}14`,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderWidth: 1,
+        borderColor: `${AppColors.sky500}28`,
+    },
+    treeActionBtn: {
+        padding: 4,
+        borderRadius: 4,
+        backgroundColor: `${AppColors.sky500}14`,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderWidth: 1,
+        borderColor: `${AppColors.sky500}28`,
+    },
     fileSizeKb: {
         fontFamily: AppFonts.interBold,
         fontSize: 12,
@@ -2579,10 +2697,13 @@ const bundleStyles = StyleSheet.create({
         color: AppColors.amber800Warm,
     },
     adviceBadge: {
+        flexDirection: 'row',
+        alignItems: 'center',
         paddingHorizontal: 8,
-        paddingVertical: 4,
+        paddingVertical: 5,
         borderRadius: 6,
-        marginTop: 2,
+        marginTop: 4,
+        gap: 6,
     },
     adviceWarning: {
         backgroundColor: AppColors.amber100,
@@ -2598,6 +2719,7 @@ const bundleStyles = StyleSheet.create({
         fontFamily: AppFonts.interMedium,
         fontSize: 10.5,
         lineHeight: 14,
+        flex: 1,
     },
     impactBadge: {
         paddingHorizontal: 6,

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

@@ -34,14 +34,6 @@ const CrashTab = React.memo(() => {
     const [crashFilters, setCrashFilters] = useState(DEFAULT_CRASH_FILTERS);
     const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
     const [detailSubTab, setDetailSubTab] = useState('stack');
-    // Auto-open the latest crash detail on first visit if crashes exist
-    const hasAutoOpened = React.useRef(false);
-    React.useEffect(() => {
-        if (!hasAutoOpened.current && !selectedCrash && crashRecords.length > 0) {
-            setSelectedCrash(crashRecords[0]);
-            hasAutoOpened.current = true;
-        }
-    }, [crashRecords, selectedCrash, setSelectedCrash]);
     // Calculate statistics
     const stats = useMemo(() => {
         const total = crashRecords.length;

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

@@ -97,6 +97,47 @@ const NetworkDetail = React.memo(() => {
                       </Text>
                     </View>
 
+                    {/* Client Chip (AXIOS / FETCH / XHR) */}
+                    {selected.client && (<View style={[
+                        styles.chip,
+                        {
+                            backgroundColor: selected.client === 'axios'
+                                ? `${AppColors.purple}14`
+                                : selected.client === 'apollo' || selected.client === 'graphql'
+                                    ? `${AppColors.pink500}14`
+                                    : selected.client === 'xhr'
+                                        ? `${AppColors.amber500}14`
+                                        : `${AppColors.sky500}14`,
+                            borderColor: selected.client === 'axios'
+                                ? `${AppColors.purple}30`
+                                : selected.client === 'apollo' || selected.client === 'graphql'
+                                    ? `${AppColors.pink500}30`
+                                    : selected.client === 'xhr'
+                                        ? `${AppColors.amber500}30`
+                                        : `${AppColors.sky500}30`,
+                            paddingHorizontal: 6,
+                            paddingVertical: 3,
+                            borderRadius: 6,
+                        },
+                    ]}>
+                        <Text style={[
+                        styles.chipText,
+                        {
+                            fontFamily: AppFonts.interBold,
+                            fontSize: 9.5,
+                            color: selected.client === 'axios'
+                                ? AppColors.purple
+                                : selected.client === 'apollo' || selected.client === 'graphql'
+                                    ? AppColors.pink500
+                                    : selected.client === 'xhr'
+                                        ? AppColors.amber700
+                                        : AppColors.sky600,
+                        },
+                    ]}>
+                          {selected.client.toUpperCase()}
+                        </Text>
+                      </View>)}
+
                     {/* Status Pill */}
                     {selected.status != null && (<View style={[
                         styles.chip,

package/dist/esm/components/Inspector/PerformanceTab.d.ts

@@ -6,6 +6,11 @@ export interface PerformanceEvent {
     category: 'render' | 'navigation' | 'memory' | 'io' | 'bridge';
     fps: number;
     durationMs: number;
+    droppedFrames?: number;
+    frameTimeMs?: number;
+    frameBudgetPct?: number;
+    bottleneckThread?: 'JS Thread' | 'UI Thread' | 'Bridge' | 'Balanced';
+    screenName?: string;
     label: string;
     detail: string;
     source?: string;