react-native-inapp-inspector 1.1.27 → 1.1.28

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

@@ -36,6 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.downloadBundleFile = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const i18n_1 = require("../../i18n");
@@ -44,6 +45,7 @@ const CopyButton_1 = __importDefault(require("../CopyButton"));
 const HighlightText_1 = __importDefault(require("../HighlightText"));
 const AppColors_1 = require("../../styles/AppColors");
 const AppFonts_1 = require("../../styles/AppFonts");
+const helpers_1 = require("../../helpers");
 const NetworkIcons_1 = require("../NetworkIcons");
 const react_native_svg_1 = __importStar(require("react-native-svg"));
 const bundleAnalyzer_1 = require("../../customHooks/bundleAnalyzer");
@@ -342,7 +344,73 @@ function buildBundleFileTree(files) {
     }
     return convertMapToNodes(rootMap);
 }
-const BundleTreeNodeView = ({ node, level, search, totalBundleKb, expandedFolders, toggleFolder, isLastChild, }) => {
+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 react_native_1.Share.share(react_native_1.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 {
+        (0, helpers_1.copyToClipboard)(content, file.name);
+    }
+    catch { }
+};
+exports.downloadBundleFile = downloadBundleFile;
+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;
@@ -380,7 +448,7 @@ const BundleTreeNodeView = ({ node, level, search, totalBundleKb, expandedFolder
         </TouchableScale_1.default>
 
         {!isCollapsed && (<react_native_1.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}/>))}
           </react_native_1.View>)}
       </react_native_1.View>);
     }
@@ -421,7 +489,13 @@ const BundleTreeNodeView = ({ node, level, search, totalBundleKb, expandedFolder
           <react_native_1.Text style={bundleStyles.treeFilePctText}>{pctOfTotal}%</react_native_1.Text>
         </react_native_1.View>
 
-        <CopyButton_1.default value={() => file} label={(0, i18n_1.t)('bundle.fileDetailsJson')}/>
+        <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
+          {onDownload && (<TouchableScale_1.default onPress={() => onDownload(file)} style={bundleStyles.treeActionBtn} hitSlop={8}>
+              <NetworkIcons_1.DownloadIcon size={13} color={AppColors_1.AppColors.sky500}/>
+            </TouchableScale_1.default>)}
+
+          <CopyButton_1.default value={() => file} label={(0, i18n_1.t)('bundle.fileDetailsJson')}/>
+        </react_native_1.View>
       </react_native_1.View>
     </react_native_1.View>);
 };
@@ -598,12 +672,28 @@ const BundleTab = react_1.default.memo(() => {
     const filteredTotalKb = (0, react_1.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] = (0, react_1.useState)('tree');
     const [expandedFolders, setExpandedFolders] = (0, react_1.useState)({});
     const fileTreeNodes = (0, react_1.useMemo)(() => {
         return buildBundleFileTree(filteredFiles);
     }, [filteredFiles]);
+    (0, react_1.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 = (0, react_1.useCallback)((path) => {
         setExpandedFolders(prev => ({
             ...prev,
@@ -1356,7 +1446,7 @@ const BundleTab = react_1.default.memo(() => {
 
             {/* ── MODE 1: DIRECTORY TREE VIEW ── */}
             {filesViewMode === 'tree' ? (<react_native_1.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 => (0, exports.downloadBundleFile)(f, analysis?.scriptURL)}/>))}
               </react_native_1.View>) : (
             /* ── MODE 2: FLAT LIST VIEW ── */
             filteredFiles.map((file, index) => {
@@ -1392,6 +1482,9 @@ const BundleTab = react_1.default.memo(() => {
                           </react_native_1.Text>
                           <react_native_1.Text style={bundleStyles.filePercent}>{pctOfTotal}%</react_native_1.Text>
                         </react_native_1.View>
+                        <TouchableScale_1.default onPress={() => (0, exports.downloadBundleFile)(file, analysis?.scriptURL)} style={bundleStyles.downloadFileBtn} hitSlop={8}>
+                          <NetworkIcons_1.DownloadIcon size={14} color={AppColors_1.AppColors.sky500}/>
+                        </TouchableScale_1.default>
                         <CopyButton_1.default value={() => file} label={t('bundle.fileDetailsJson')}/>
                       </react_native_1.View>
                     </react_native_1.View>
@@ -1410,21 +1503,25 @@ const BundleTab = react_1.default.memo(() => {
                       <react_native_1.Text style={bundleStyles.fileMetaText}>{file.meta}</react_native_1.Text>
                       {file.advice && (<react_native_1.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,
                         ]}>
-                          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'flex-start', gap: 5 }}>
                           {isUnused ? (<NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.red600} size={12}/>) : file.status === 'warning' ? (<NetworkIcons_1.LightbulbIcon color={AppColors_1.AppColors.amber800Warm} size={12}/>) : (<NetworkIcons_1.SparkleIcon color={AppColors_1.AppColors.emerald700} size={12}/>)}
                           <react_native_1.Text style={[
                             bundleStyles.adviceText,
-                            file.status === 'warning' && { color: AppColors_1.AppColors.amber800Warm },
-                            file.status === 'optimal' && { color: AppColors_1.AppColors.emerald700 },
+                            file.status === 'warning' && {
+                                color: AppColors_1.AppColors.amber800Warm,
+                            },
+                            file.status === 'optimal' && {
+                                color: AppColors_1.AppColors.emerald700,
+                            },
                             isUnused && { color: AppColors_1.AppColors.red600 },
                         ]}>
                             {file.advice}
                           </react_native_1.Text>
-                        </react_native_1.View>
                         </react_native_1.View>)}
                     </react_native_1.View>
                   </react_native_1.View>);
@@ -1655,6 +1752,9 @@ const BundleTab = react_1.default.memo(() => {
                         {t('bundle.fileSizeKb', { size: file.sizeKb })}
                       </react_native_1.Text>
                     </react_native_1.View>
+                    <TouchableScale_1.default onPress={() => (0, exports.downloadBundleFile)(file, analysis?.scriptURL)} style={bundleStyles.downloadFileBtn} hitSlop={8}>
+                      <NetworkIcons_1.DownloadIcon size={14} color={AppColors_1.AppColors.sky500}/>
+                    </TouchableScale_1.default>
                     <CopyButton_1.default value={() => file} label={t('bundle.mediaItemJson')}/>
                   </react_native_1.View>
                 </react_native_1.View>
@@ -1666,16 +1766,18 @@ const BundleTab = react_1.default.memo(() => {
                         file.status === 'warning' && bundleStyles.adviceWarning,
                         file.status === 'optimal' && bundleStyles.adviceOptimal,
                     ]}>
-                      <react_native_1.View style={{ flexDirection: 'row', alignItems: 'flex-start', gap: 5 }}>
-                        {file.status === 'warning' ? (<NetworkIcons_1.LightbulbIcon color={AppColors_1.AppColors.amber800Warm} size={12}/>) : (<NetworkIcons_1.SparkleIcon color={AppColors_1.AppColors.emerald700} size={12}/>)}
-                        <react_native_1.Text style={[
+                      {file.status === 'warning' ? (<NetworkIcons_1.LightbulbIcon color={AppColors_1.AppColors.amber800Warm} size={12}/>) : (<NetworkIcons_1.SparkleIcon color={AppColors_1.AppColors.emerald700} size={12}/>)}
+                      <react_native_1.Text style={[
                         bundleStyles.adviceText,
-                        file.status === 'warning' && { color: AppColors_1.AppColors.amber800Warm },
-                        file.status === 'optimal' && { color: AppColors_1.AppColors.emerald700 },
+                        file.status === 'warning' && {
+                            color: AppColors_1.AppColors.amber800Warm,
+                        },
+                        file.status === 'optimal' && {
+                            color: AppColors_1.AppColors.emerald700,
+                        },
                     ]}>
-                          {file.advice}
-                        </react_native_1.Text>
-                      </react_native_1.View>
+                        {file.advice}
+                      </react_native_1.Text>
                     </react_native_1.View>)}
                 </react_native_1.View>
               </react_native_1.View>))}
@@ -2446,6 +2548,24 @@ const bundleStyles = react_native_1.StyleSheet.create({
     fileSizeBox: {
         alignItems: 'flex-end',
     },
+    downloadFileBtn: {
+        padding: 6,
+        borderRadius: 6,
+        backgroundColor: `${AppColors_1.AppColors.sky500}14`,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderWidth: 1,
+        borderColor: `${AppColors_1.AppColors.sky500}28`,
+    },
+    treeActionBtn: {
+        padding: 4,
+        borderRadius: 4,
+        backgroundColor: `${AppColors_1.AppColors.sky500}14`,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderWidth: 1,
+        borderColor: `${AppColors_1.AppColors.sky500}28`,
+    },
     fileSizeKb: {
         fontFamily: AppFonts_1.AppFonts.interBold,
         fontSize: 12,
@@ -2617,10 +2737,13 @@ const bundleStyles = react_native_1.StyleSheet.create({
         color: AppColors_1.AppColors.amber800Warm,
     },
     adviceBadge: {
+        flexDirection: 'row',
+        alignItems: 'center',
         paddingHorizontal: 8,
-        paddingVertical: 4,
+        paddingVertical: 5,
         borderRadius: 6,
-        marginTop: 2,
+        marginTop: 4,
+        gap: 6,
     },
     adviceWarning: {
         backgroundColor: AppColors_1.AppColors.amber100,
@@ -2636,6 +2759,7 @@ const bundleStyles = react_native_1.StyleSheet.create({
         fontFamily: AppFonts_1.AppFonts.interMedium,
         fontSize: 10.5,
         lineHeight: 14,
+        flex: 1,
     },
     impactBadge: {
         paddingHorizontal: 6,

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

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

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

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

package/dist/commonjs/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;