react-native-inapp-inspector 1.1.16 → 1.1.17

package/README.md

@@ -31,6 +31,7 @@ A self-contained, developer-first in-app debugging overlay for React Native. Ins
 | ⏸️ **Live Stream Pause / Resume** | Freeze incoming network requests, console logs, and analytics streams on the fly to inspect active traffic without list jumping. |
 | 📊 **Analytics Tracker** | Tracks manual events and auto-patches `@react-native-firebase/analytics` calls (`logEvent`, `logScreenView`, `setUserProperties`, and `setUserId`). |
 | 🔄 **Redux State & Actions** | Connects to Redux / Redux Toolkit. Inspect dispatched actions with deep state diffs, payload breakdown, slice state trees, and `redux-persist` metadata. |
+| 📦 **Bundle Visualizer** | In-app JavaScript bundle size breakdown, Hermes engine bytecode metrics, visual package treemap, and integrated `react-native-bundle-visualizer` CLI. |
 | 🪟 **Rich JSON Viewer** | Explore data in **Pretty**, **Raw**, and **Table** modes with full-text search highlighting and uniform typography. |
 | 🛡️ **Error Boundary** | Built-in `ErrorBoundary` to gracefully catch and inspect React render crashes. |
 
@@ -246,6 +247,18 @@ const App = () => {
 
 ---
 
+## 📦 Application Bundle Size & Asset Inspector
+
+The inspector includes a dedicated **Bundle** tab (placed right after Redux) with **5 specialized sub-tabs** to inspect and optimize bundle assets:
+
+1. 📊 **Overview & Treemap**: Real-time stacked visual ratio bar, total bundle size (`MB`), Hermes Bytecode engine detection, and category weight cards.
+2. 📁 **Files Explorer**: Searchable file-by-file footprint breakdown (`PNG`, `TSX`, `JS`, `TTF`, `JSON`) with lines, resolution, and optimization status.
+3. 📦 **Packages**: Node modules footprint audit (`react-native`, `@react-navigation`, `axios`, `react-native-svg`), version tags, and direct vs. transitive dependency analysis.
+4. 🖼️ **Media Auditor**: Dedicated asset compression analysis for images and custom fonts with potential WebP savings calculators.
+5. ⚡ **Optimizer Checklist**: Actionable best-practice tips for Hermes engine, selective path imports (tree-shaking), font subsetting, and screen lazy-loading.
+
+---
+
 ## ⚙️ Settings Persistence
 
 Inspector preferences (dark mode, active modules, default landing tab) persist across app launches:

package/dist/commonjs/components/AnimatedEntrance.js

@@ -36,6 +36,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const AnimatedEntrance = react_1.default.memo(function AnimatedEntrance({ children, delay = 0, distance = 10, duration = 220, index = 0, style, }) {
+    if (react_native_1.Platform.OS === 'android') {
+        return <react_native_1.View style={style}>{children}</react_native_1.View>;
+    }
     const progress = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
     (0, react_1.useEffect)(() => {
         progress.setValue(0);

package/dist/commonjs/components/AppHeaderLogo.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ImageSourcePropType } from 'react-native';
+interface AppHeaderLogoProps {
+    size?: number;
+    customIcon?: ImageSourcePropType | null;
+}
+export declare const AppHeaderLogo: React.FC<AppHeaderLogoProps>;
+export default AppHeaderLogo;

package/dist/commonjs/components/AppHeaderLogo.js

@@ -0,0 +1,85 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppHeaderLogo = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const BrandSquareIcon_1 = __importDefault(require("./BrandSquareIcon"));
+const AppColors_1 = require("../styles/AppColors");
+const AppHeaderLogo = ({ size = 46, customIcon, }) => {
+    const [loadError, setLoadError] = (0, react_1.useState)(false);
+    // 1. If customIcon is explicitly provided, render it directly
+    if (customIcon) {
+        return (<react_native_1.View style={[logoStyles.container, { width: size, height: size }]}>
+        <react_native_1.Image source={customIcon} style={{ width: size - 4, height: size - 4, borderRadius: 10 }} resizeMode="cover"/>
+      </react_native_1.View>);
+    }
+    // 2. Dynamically query installed native app icon (AppIcon on iOS, ic_launcher on Android)
+    if (!loadError && react_native_1.Platform.OS !== 'web') {
+        const nativeSource = react_native_1.Platform.select({
+            ios: { uri: 'AppIcon' },
+            android: { uri: 'ic_launcher' },
+            default: { uri: 'AppIcon' },
+        });
+        return (<react_native_1.View style={[logoStyles.container, { width: size, height: size }]}>
+        <react_native_1.Image source={nativeSource} style={{ width: size - 4, height: size - 4, borderRadius: 10 }} resizeMode="cover" onError={() => setLoadError(true)}/>
+      </react_native_1.View>);
+    }
+    // 3. Fallback: Inspector's Signature Owl Brand Logo
+    return (<react_native_1.View style={[logoStyles.container, { width: size, height: size }]}>
+      <BrandSquareIcon_1.default size={size - 4}/>
+    </react_native_1.View>);
+};
+exports.AppHeaderLogo = AppHeaderLogo;
+const logoStyles = react_native_1.StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 12,
+        backgroundColor: `${AppColors_1.AppColors.white}24`,
+        borderWidth: 1.5,
+        borderColor: `${AppColors_1.AppColors.white}4D`,
+        overflow: 'hidden',
+        shadowColor: AppColors_1.AppColors.primaryBlack,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.15,
+        shadowRadius: 4,
+        elevation: 3,
+    },
+});
+exports.default = exports.AppHeaderLogo;

package/dist/commonjs/components/Inspector/BundleTab.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+export type BundleSubTab = 'overview' | 'files' | 'packages' | 'media' | 'optimizer';
+export type FileTypeCategory = 'image' | 'typescript' | 'javascript' | 'font' | 'json';
+export interface BundleFileItem {
+    id: string;
+    name: string;
+    path: string;
+    ext: string;
+    category: FileTypeCategory;
+    sizeKb: number;
+    meta: string;
+    color: string;
+    status?: 'optimal' | 'warning' | 'info';
+    advice?: string;
+    previewUri?: string;
+    isConsumed?: boolean;
+}
+export interface BundlePackageItem {
+    id: string;
+    name: string;
+    version: string;
+    sizeKb: number;
+    percentage: number;
+    type: 'direct' | 'peer' | 'transitive';
+    category: 'core' | 'navigation' | 'network' | 'ui' | 'utils';
+    color: string;
+    description: string;
+    logoUri?: string;
+}
+export interface TreeNode {
+    id: string;
+    name: string;
+    fullPath: string;
+    isFolder: boolean;
+    fileItem?: BundleFileItem;
+    sizeKb: number;
+    fileCount: number;
+    children: TreeNode[];
+}
+declare const BundleTab: React.MemoExoticComponent<() => React.JSX.Element>;
+export default BundleTab;