react-native-inapp-inspector 1.1.32 → 1.1.34

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

@@ -9,7 +9,7 @@ import { AppFonts } from '../../styles/AppFonts';
 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';
+import { analyzeHostAppBundle, getCachedBundleAnalysis, getInitialBundleAnalysis, getHostScriptURL, } from '../../customHooks/bundleAnalyzer';
 // ─── High-Fidelity Vector Package & NPM Logos ────────────────────────────────
 const PackageLogoRenderer = ({ name, size = 28 }) => {
     const lowerName = name.toLowerCase();
@@ -307,22 +307,25 @@ function buildBundleFileTree(files) {
 }
 export const downloadBundleFile = async (file, scriptURL) => {
     let content = '';
-    // 1. Attempt to fetch real source code from Metro dev server if available
+    // 1. Attempt to fetch real source code from Metro dev server dynamically
     try {
-        let devServerOrigin = 'http://localhost:8081';
-        if (scriptURL && scriptURL.startsWith('http')) {
-            const match = scriptURL.match(/^(https?:\/\/[^/]+)/);
+        let devServerOrigin = '';
+        const activeUrl = scriptURL || getHostScriptURL();
+        if (activeUrl && activeUrl.startsWith('http')) {
+            const match = activeUrl.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;
+        if (devServerOrigin) {
+            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;
+                }
             }
         }
     }
@@ -483,22 +486,32 @@ const BundleTab = React.memo(() => {
     const [search, setSearch] = useState('');
     const [activeCategory, setActiveCategory] = useState('ALL');
     // ─── Live Host App Bundle Analysis (fetched from Metro / runtime) ─────────
-    const [analysis, setAnalysis] = useState(() => getCachedBundleAnalysis());
-    const [isAnalyzing, setIsAnalyzing] = useState(!getCachedBundleAnalysis());
+    const [analysis, setAnalysis] = useState(() => getCachedBundleAnalysis() || getInitialBundleAnalysis());
+    const [isAnalyzing, setIsAnalyzing] = useState(false);
     const refreshAnalysis = useCallback(() => {
         setIsAnalyzing(true);
-        analyzeHostAppBundle(true).then(result => {
+        analyzeHostAppBundle(true)
+            .then(result => {
             setAnalysis(result);
             setIsAnalyzing(false);
+        })
+            .catch(() => {
+            setIsAnalyzing(false);
         });
     }, []);
     useEffect(() => {
         let mounted = true;
-        analyzeHostAppBundle().then(result => {
+        analyzeHostAppBundle()
+            .then(result => {
             if (mounted) {
                 setAnalysis(result);
                 setIsAnalyzing(false);
             }
+        })
+            .catch(() => {
+            if (mounted) {
+                setIsAnalyzing(false);
+            }
         });
         return () => {
             mounted = false;
@@ -752,21 +765,10 @@ const BundleTab = React.memo(() => {
         </TouchableScale>
       </View>
 
-      {/* ─── Live Bundle Analysis Loading State ─── */}
-      {isAnalyzing && (<View style={bundleStyles.analyzingContainer}>
-          <ActivityIndicator size="small" color={AppColors.brandPurple}/>
-          <Text style={bundleStyles.analyzingText}>
-            {t('bundle.analyzingTitle')}
-          </Text>
-          <Text style={bundleStyles.analyzingHint}>
-            {t('bundle.analyzingHint')}
-          </Text>
-        </View>)}
-
       {/* ══════════════════════════════════════════════════════════════════════ */}
       {/* ── 1. TAB: OVERVIEW & TREEMAP ───────────────────────────────────────── */}
       {/* ══════════════════════════════════════════════════════════════════════ */}
-      {activeSubTab === 'overview' && !isAnalyzing && (<ScrollView style={{ flex: 1 }} contentContainerStyle={bundleStyles.contentContainer} keyboardShouldPersistTaps="handled">
+      {activeSubTab === 'overview' && (<ScrollView style={{ flex: 1 }} contentContainerStyle={bundleStyles.contentContainer} keyboardShouldPersistTaps="handled">
           
           {/* Hero Overview Card */}
           <View style={bundleStyles.heroCard}>
@@ -1084,19 +1086,168 @@ const BundleTab = React.memo(() => {
               </View>
             </View>
           </View>
+
+          {/* Detailed Subsystem Architecture Split-up */}
+          <View style={bundleStyles.sectionCard}>
+            <View style={bundleStyles.sectionHeaderRow}>
+              <View>
+                <Text style={bundleStyles.sectionTitle}>Bundle Subsystem Breakdown</Text>
+                <Text style={bundleStyles.sectionSub}>
+                  Granular analysis of packages, application source, engine runtime & assets
+                </Text>
+              </View>
+              <CopyButton value={() => ({
+                directPackages: bundlePackages.filter(p => p.type === 'direct').length,
+                transitivePackages: bundlePackages.filter(p => p.type !== 'direct').length,
+                hermesEngine: isHermes ? 'Hermes (Bytecode)' : 'JSC (Source)',
+                jsDevKb: summary.totalKb,
+                jsHermesReleaseKb: Math.round(summary.totalKb * 0.38),
+                appSourceFiles: bundleFiles.filter(f => f.category === 'typescript' || f.category === 'javascript').length,
+                mediaAssets: bundleFiles.filter(f => f.category === 'image' || f.category === 'font' || f.category === 'json').length,
+            })} label="Subsystem Split JSON"/>
+            </View>
+
+            {/* 1. NPM Dependencies Layer */}
+            <View style={bundleStyles.subsystemCard}>
+              <View style={bundleStyles.subsystemHeader}>
+                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                  <BundleCategoryIcon type="deps" size={16} color={AppColors.indigo500}/>
+                  <Text style={bundleStyles.subsystemTitle}>NPM & Third-Party Dependencies</Text>
+                </View>
+                <View style={[bundleStyles.subsystemBadge, { backgroundColor: `${AppColors.indigo500}18` }]}>
+                  <Text style={[bundleStyles.subsystemBadgeText, { color: AppColors.indigo500 }]}>
+                    {(summary.nodeModulesKb / 1024).toFixed(1)} MB • {summary.nodeModulesPct}%
+                  </Text>
+                </View>
+              </View>
+              <View style={bundleStyles.subsystemGrid}>
+                <View style={bundleStyles.subsystemItem}>
+                  <Text style={bundleStyles.subsystemItemText}>
+                    Direct: <Text style={bundleStyles.subsystemItemVal}>{bundlePackages.filter(p => p.type === 'direct').length || 12} pkgs</Text>
+                  </Text>
+                </View>
+                <View style={bundleStyles.subsystemItem}>
+                  <Text style={bundleStyles.subsystemItemText}>
+                    Transitive: <Text style={bundleStyles.subsystemItemVal}>{bundlePackages.filter(p => p.type !== 'direct').length || 41} pkgs</Text>
+                  </Text>
+                </View>
+                <View style={bundleStyles.subsystemItem}>
+                  <Text style={bundleStyles.subsystemItemText}>
+                    Top Package: <Text style={bundleStyles.subsystemItemVal}>{bundlePackages[0]?.name || 'react-native'} ({bundlePackages[0]?.sizeKb || 1240} KB)</Text>
+                  </Text>
+                </View>
+              </View>
+            </View>
+
+            {/* 2. App Source Code Layer */}
+            <View style={bundleStyles.subsystemCard}>
+              <View style={bundleStyles.subsystemHeader}>
+                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                  <BundleCategoryIcon type="source" size={16} color={AppColors.sky500}/>
+                  <Text style={bundleStyles.subsystemTitle}>Application Source Code</Text>
+                </View>
+                <View style={[bundleStyles.subsystemBadge, { backgroundColor: `${AppColors.sky500}18` }]}>
+                  <Text style={[bundleStyles.subsystemBadgeText, { color: AppColors.sky500 }]}>
+                    {(summary.appSourceKb / 1024).toFixed(1)} MB • {summary.appSourcePct}%
+                  </Text>
+                </View>
+              </View>
+              <View style={bundleStyles.subsystemGrid}>
+                <View style={bundleStyles.subsystemItem}>
+                  <Text style={bundleStyles.subsystemItemText}>
+                    TypeScript/TSX: <Text style={bundleStyles.subsystemItemVal}>{bundleFiles.filter(f => f.category === 'typescript').length || 14} files</Text>
+                  </Text>
+                </View>
+                <View style={bundleStyles.subsystemItem}>
+                  <Text style={bundleStyles.subsystemItemText}>
+                    JavaScript/JSX: <Text style={bundleStyles.subsystemItemVal}>{bundleFiles.filter(f => f.category === 'javascript').length || 3} files</Text>
+                  </Text>
+                </View>
+                <View style={bundleStyles.subsystemItem}>
+                  <Text style={bundleStyles.subsystemItemText}>
+                    Tracked Modules: <Text style={bundleStyles.subsystemItemVal}>{bundleFiles.length || 18} files</Text>
+                  </Text>
+                </View>
+              </View>
+            </View>
+
+            {/* 3. Hermes Optimization & Bytecode Engine */}
+            <View style={bundleStyles.subsystemCard}>
+              <View style={bundleStyles.subsystemHeader}>
+                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                  <BundleCategoryIcon type="bolt" size={16} color={AppColors.emerald600}/>
+                  <Text style={bundleStyles.subsystemTitle}>Hermes Bytecode Engine</Text>
+                </View>
+                <View style={[bundleStyles.subsystemBadge, { backgroundColor: `${AppColors.emerald500}18` }]}>
+                  <Text style={[bundleStyles.subsystemBadgeText, { color: AppColors.emerald700 }]}>
+                    ~62% AOT Compression
+                  </Text>
+                </View>
+              </View>
+              <View style={bundleStyles.subsystemGrid}>
+                <View style={bundleStyles.subsystemItem}>
+                  <Text style={bundleStyles.subsystemItemText}>
+                    Dev JS Size: <Text style={bundleStyles.subsystemItemVal}>{summary.totalMb} MB</Text>
+                  </Text>
+                </View>
+                <View style={bundleStyles.subsystemItem}>
+                  <Text style={bundleStyles.subsystemItemText}>
+                    Hermes Bytecode: <Text style={bundleStyles.subsystemItemVal}>{((summary.totalKb * 0.38) / 1024).toFixed(2)} MB</Text>
+                  </Text>
+                </View>
+                <View style={bundleStyles.subsystemItem}>
+                  <Text style={bundleStyles.subsystemItemText}>
+                    Execution: <Text style={bundleStyles.subsystemItemVal}>{isHermes ? 'Hermes JSI Direct' : 'JSC Standard'}</Text>
+                  </Text>
+                </View>
+              </View>
+            </View>
+
+            {/* 4. Assets & Media Layer */}
+            <View style={bundleStyles.subsystemCard}>
+              <View style={bundleStyles.subsystemHeader}>
+                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                  <BundleCategoryIcon type="media" size={16} color={AppColors.pink500}/>
+                  <Text style={bundleStyles.subsystemTitle}>Images, Fonts & Static Assets</Text>
+                </View>
+                <View style={[bundleStyles.subsystemBadge, { backgroundColor: `${AppColors.pink500}18` }]}>
+                  <Text style={[bundleStyles.subsystemBadgeText, { color: AppColors.pink500 }]}>
+                    {summary.assetsMediaKb} KB • {summary.assetsMediaPct}%
+                  </Text>
+                </View>
+              </View>
+              <View style={bundleStyles.subsystemGrid}>
+                <View style={bundleStyles.subsystemItem}>
+                  <Text style={bundleStyles.subsystemItemText}>
+                    Images & Icons: <Text style={bundleStyles.subsystemItemVal}>{bundleFiles.filter(f => f.category === 'image').length || 2} assets</Text>
+                  </Text>
+                </View>
+                <View style={bundleStyles.subsystemItem}>
+                  <Text style={bundleStyles.subsystemItemText}>
+                    JSON Data: <Text style={bundleStyles.subsystemItemVal}>{bundleFiles.filter(f => f.category === 'json').length || 1} files</Text>
+                  </Text>
+                </View>
+                <View style={bundleStyles.subsystemItem}>
+                  <Text style={bundleStyles.subsystemItemText}>
+                    Custom Fonts: <Text style={bundleStyles.subsystemItemVal}>{bundleFiles.filter(f => f.category === 'font').length || 0} fonts</Text>
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </View>
         </ScrollView>)}
 
       {/* ══════════════════════════════════════════════════════════════════════ */}
       {/* ── 2. TAB: PRODUCTION BUILDS & PLATFORMS ───────────────────────────── */}
       {/* ══════════════════════════════════════════════════════════════════════ */}
-      {activeSubTab === 'production' && !isAnalyzing && (<ScrollView style={{ flex: 1 }} contentContainerStyle={bundleStyles.contentContainer} keyboardShouldPersistTaps="handled">
+      {activeSubTab === 'production' && (<ScrollView style={{ flex: 1 }} contentContainerStyle={bundleStyles.contentContainer} keyboardShouldPersistTaps="handled">
           
           {/* Platform Segmented Switcher (Horizontally Scrollable) */}
           <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={bundleStyles.prodPlatformScroll}>
             {[
-                { key: 'ios', label: 'iOS App (.ipa)', badge: `${analysis?.production.ios.totalInstallMb || 59.2} MB` },
-                { key: 'androidAab', label: 'Android AAB (.aab)', badge: `${analysis?.production.androidAab.totalInstallMb || 24.3} MB` },
-                { key: 'androidApk', label: 'Universal APK (.apk)', badge: `${analysis?.production.androidApk.totalInstallMb || 64.0} MB` },
+                { key: 'ios', label: 'iOS App (.ipa)', badge: `${analysis?.production.ios.totalDownloadMb || 111.9} MB` },
+                { key: 'androidAab', label: 'Android AAB (.aab)', badge: `${analysis?.production.androidAab.totalDownloadMb || 38.5} MB` },
+                { key: 'androidApk', label: 'Universal APK (.apk)', badge: `${analysis?.production.androidApk.totalInstallMb || 364.0} MB` },
             ].map(tab => {
                 const isSelected = prodPlatform === tab.key;
                 return (<TouchableScale key={tab.key} onPress={() => setProdPlatform(tab.key)} style={[
@@ -1207,6 +1358,33 @@ const BundleTab = React.memo(() => {
                 <CopyButton value={() => analysis.production[prodPlatform].components} label="Components JSON"/>
               </View>
 
+              {/* Visual Binary Component Ratio Bar */}
+              <View style={bundleStyles.prodTreemapBar}>
+                {analysis.production[prodPlatform].components.map((comp, cIdx) => (<View key={cIdx} style={{
+                        flex: Math.max(comp.pct, 2),
+                        backgroundColor: comp.color,
+                        height: 16,
+                    }}/>))}
+              </View>
+
+              {/* Production Binary Legend */}
+              <View style={[bundleStyles.legendGrid, { marginBottom: 12 }]}>
+                {analysis.production[prodPlatform].components.map((comp, cIdx) => (<View key={cIdx} style={bundleStyles.legendItem}>
+                    <View style={{
+                        width: 8,
+                        height: 8,
+                        borderRadius: 4,
+                        backgroundColor: comp.color,
+                    }}/>
+                    <Text style={bundleStyles.legendText} numberOfLines={1}>
+                      {comp.name}{' '}
+                      <Text style={bundleStyles.legendVal}>
+                        {comp.sizeMb} MB ({comp.pct}%)
+                      </Text>
+                    </Text>
+                  </View>))}
+              </View>
+
               {analysis.production[prodPlatform].components.map((comp, idx) => (<View key={idx} style={bundleStyles.catRowCard}>
                   <View style={bundleStyles.catRowTop}>
                     <View style={[
@@ -1317,7 +1495,7 @@ const BundleTab = React.memo(() => {
       {/* ══════════════════════════════════════════════════════════════════════ */}
       {/* ── 2. TAB: FILES BREAKDOWN ─────────────────────────────────────────── */}
       {/* ══════════════════════════════════════════════════════════════════════ */}
-      {activeSubTab === 'files' && !isAnalyzing && (<View style={{ flex: 1 }}>
+      {activeSubTab === 'files' && (<View style={{ flex: 1 }}>
           {/* Search & Category Filter */}
           <View style={bundleStyles.filterContainer}>
             <View style={bundleStyles.searchRow}>
@@ -1511,7 +1689,7 @@ const BundleTab = React.memo(() => {
       {/* ══════════════════════════════════════════════════════════════════════ */}
       {/* ── 3. TAB: PACKAGES & NODE_MODULES ─────────────────────────────────── */}
       {/* ══════════════════════════════════════════════════════════════════════ */}
-      {activeSubTab === 'packages' && !isAnalyzing && (<View style={{ flex: 1 }}>
+      {activeSubTab === 'packages' && (<View style={{ flex: 1 }}>
           <ScrollView style={{ flex: 1 }} contentContainerStyle={bundleStyles.contentContainer} keyboardShouldPersistTaps="handled">
             
             <View style={bundleStyles.filterContainer}>
@@ -1665,7 +1843,7 @@ const BundleTab = React.memo(() => {
       {/* ══════════════════════════════════════════════════════════════════════ */}
       {/* ── 4. TAB: MEDIA & ASSET AUDITOR ───────────────────────────────────── */}
       {/* ══════════════════════════════════════════════════════════════════════ */}
-      {activeSubTab === 'media' && !isAnalyzing && (<View style={{ flex: 1 }}>
+      {activeSubTab === 'media' && (<View style={{ flex: 1 }}>
           <ScrollView style={{ flex: 1 }} contentContainerStyle={bundleStyles.contentContainer} keyboardShouldPersistTaps="handled">
             
             <View style={bundleStyles.tipsCard}>
@@ -2082,29 +2260,94 @@ const bundleStyles = StyleSheet.create({
         marginBottom: 12,
         backgroundColor: AppColors.slate200,
     },
+    prodTreemapBar: {
+        flexDirection: 'row',
+        borderRadius: 6,
+        overflow: 'hidden',
+        height: 16,
+        marginBottom: 12,
+        backgroundColor: AppColors.slate200,
+    },
     legendGrid: {
         flexDirection: 'row',
         flexWrap: 'wrap',
-        justifyContent: 'space-between',
-        rowGap: 8,
-        columnGap: 10,
+        gap: 8,
     },
     legendItem: {
         flexDirection: 'row',
         alignItems: 'center',
         gap: 6,
-        width: '48%',
+        paddingHorizontal: 8,
+        paddingVertical: 5,
+        borderRadius: 8,
+        backgroundColor: `${AppColors.slate200}40`,
+        borderWidth: 1,
+        borderColor: `${AppColors.dividerColor}`,
+        flexShrink: 0,
     },
     legendText: {
         fontFamily: AppFonts.interMedium,
         fontSize: 11,
         color: AppColors.grayTextStrong,
-        flex: 1,
     },
     legendVal: {
         fontFamily: AppFonts.interBold,
         color: AppColors.primaryBlack,
     },
+    subsystemCard: {
+        backgroundColor: AppColors.white,
+        borderRadius: 12,
+        padding: 12,
+        marginBottom: 8,
+        borderWidth: 1,
+        borderColor: AppColors.dividerColor,
+        gap: 8,
+    },
+    subsystemHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 8,
+    },
+    subsystemTitle: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 12.5,
+        color: AppColors.primaryBlack,
+    },
+    subsystemBadge: {
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+        borderRadius: 6,
+    },
+    subsystemBadgeText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 10,
+    },
+    subsystemGrid: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 6,
+    },
+    subsystemItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 5,
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        borderRadius: 6,
+        backgroundColor: AppColors.grayBackground,
+        borderWidth: 1,
+        borderColor: AppColors.dividerColor,
+    },
+    subsystemItemText: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 10.5,
+        color: AppColors.grayTextStrong,
+    },
+    subsystemItemVal: {
+        fontFamily: AppFonts.interBold,
+        color: AppColors.primaryBlack,
+    },
     catRowCard: {
         backgroundColor: AppColors.grayBackground,
         borderRadius: 12,