react-native-inapp-inspector 1.0.3 → 1.0.5

package/dist/commonjs/components/ErrorBoundary.js

@@ -0,0 +1,332 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorBoundary = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const AppColors_1 = require("../styles/AppColors");
+const AppFonts_1 = require("../styles/AppFonts");
+const helpers_1 = require("../helpers");
+function parseStackTrace(stack) {
+    if (!stack)
+        return null;
+    const lines = stack.split('\n');
+    for (const line of lines) {
+        if (line.includes('ErrorBoundary') ||
+            line.includes('getDerivedStateFromError') ||
+            line.includes('componentDidCatch')) {
+            continue;
+        }
+        // Matching ios format: method@url:line:col
+        const iosMatch = line.match(/^([^@]+)@(.*):(\d+):(\d+)$/);
+        if (iosMatch) {
+            const [, method, file, lineNum, colNum] = iosMatch;
+            const cleanFile = file.split('?')[0].split('/').pop() || file;
+            return { method: method.trim(), file: cleanFile, line: lineNum, column: colNum };
+        }
+        // Matching android format: at method (url:line:col) or at url:line:col
+        const androidMatch = line.match(/^\s*at\s+(.+)\s+\((.+):(\d+):(\d+)\)$/);
+        if (androidMatch) {
+            const [, method, file, lineNum, colNum] = androidMatch;
+            const cleanFile = file.split('?')[0].split('/').pop() || file;
+            return { method: method.trim(), file: cleanFile, line: lineNum, column: colNum };
+        }
+        const androidMatchSimple = line.match(/^\s*at\s+(.+):(\d+):(\d+)$/);
+        if (androidMatchSimple) {
+            const [, file, lineNum, colNum] = androidMatchSimple;
+            const cleanFile = file.split('?')[0].split('/').pop() || file;
+            return { method: 'anonymous', file: cleanFile, line: lineNum, column: colNum };
+        }
+    }
+    return null;
+}
+class ErrorBoundary extends react_1.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            hasError: false,
+            error: null,
+        };
+        this.handleReset = () => {
+            this.setState({ hasError: false, error: null });
+            if (this.props.onReset) {
+                this.props.onReset();
+            }
+        };
+        this.handleCopyTrace = () => {
+            const error = this.state.error;
+            if (error) {
+                const isNativeCrash = error.message.includes('Native') || error.message.includes('native') || error.message.includes('Swift') || error.message.includes('Java');
+                const parsed = error.stack ? parseStackTrace(error.stack) : null;
+                const detailStr = `Crash Source: ${isNativeCrash ? 'Native Crash' : 'JavaScript Crash'}
+Message: ${error.message}
+${parsed ? `Method: ${parsed.method}\nFile: ${parsed.file}\nLine: ${parsed.line}:${parsed.column}` : ''}
+Stack Trace:
+${error.stack}`;
+                (0, helpers_1.copyToClipboard)(detailStr, 'Crash traceback');
+            }
+        };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error('InAppInspector ErrorBoundary caught a crash:', error, errorInfo);
+    }
+    render() {
+        if (this.state.hasError) {
+            const isInline = this.props.fallbackType === 'inline';
+            if (isInline) {
+                return (<react_native_1.View style={styles.inlineContainer}>
+            <react_native_1.Text style={styles.inlineTitle}>⚠️ Inspector Crash</react_native_1.Text>
+            <react_native_1.TouchableOpacity style={styles.inlineResetBtn} onPress={this.handleReset}>
+              <react_native_1.Text style={styles.inlineResetText}>Reload</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+          </react_native_1.View>);
+            }
+            const error = this.state.error;
+            const isNativeCrash = error ? (error.message.includes('Native') || error.message.includes('native') || error.message.includes('Swift') || error.message.includes('Java')) : false;
+            const parsed = error && error.stack ? parseStackTrace(error.stack) : null;
+            return (<react_native_1.View style={styles.container}>
+          <react_native_1.View style={styles.card}>
+            <react_native_1.Text style={styles.emoji}>⚠️</react_native_1.Text>
+            <react_native_1.Text style={styles.title}>Something went wrong</react_native_1.Text>
+            
+            <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    backgroundColor: isNativeCrash ? 'rgba(239, 68, 68, 0.1)' : 'rgba(245, 158, 11, 0.1)',
+                    paddingHorizontal: 10,
+                    paddingVertical: 4,
+                    borderRadius: 20,
+                    marginBottom: 12,
+                    gap: 4
+                }}>
+              <react_native_1.Text style={{
+                    fontSize: 10,
+                    fontWeight: 'bold',
+                    color: isNativeCrash ? '#EF4444' : '#F59E0B',
+                    fontFamily: AppFonts_1.AppFonts.interBold || 'System'
+                }}>
+                {isNativeCrash ? '🔴 NATIVE CRASH' : '🟡 JAVASCRIPT CRASH'}
+              </react_native_1.Text>
+            </react_native_1.View>
+
+            <react_native_1.Text style={styles.subtitle}>
+              The In-App Inspector or active view encountered an error. Traceback details are parsed below:
+            </react_native_1.Text>
+
+            {parsed && (<react_native_1.View style={{
+                        backgroundColor: '#F1F5F9',
+                        borderRadius: 8,
+                        padding: 10,
+                        width: '100%',
+                        marginBottom: 10,
+                        borderWidth: 1,
+                        borderColor: '#E2E8F0',
+                        gap: 4
+                    }}>
+                <react_native_1.Text style={{ fontSize: 11, color: '#475569', fontFamily: AppFonts_1.AppFonts.interMedium }} numberOfLines={1}>
+                  <react_native_1.Text style={{ fontWeight: 'bold' }}>Method:</react_native_1.Text> {parsed.method}
+                </react_native_1.Text>
+                <react_native_1.Text style={{ fontSize: 11, color: '#475569', fontFamily: AppFonts_1.AppFonts.interMedium }} numberOfLines={1}>
+                  <react_native_1.Text style={{ fontWeight: 'bold' }}>File:</react_native_1.Text> {parsed.file}
+                </react_native_1.Text>
+                <react_native_1.Text style={{ fontSize: 11, color: '#475569', fontFamily: AppFonts_1.AppFonts.interMedium }}>
+                  <react_native_1.Text style={{ fontWeight: 'bold' }}>Line:</react_native_1.Text> {parsed.line}  <react_native_1.Text style={{ fontWeight: 'bold' }}>Col:</react_native_1.Text> {parsed.column}
+                </react_native_1.Text>
+              </react_native_1.View>)}
+
+            {error && (<react_native_1.ScrollView style={styles.scroll} contentContainerStyle={styles.scrollContent}>
+                <react_native_1.Text style={styles.code}>
+                  {error.message}
+                  {'\n\n'}
+                  {error.stack}
+                </react_native_1.Text>
+              </react_native_1.ScrollView>)}
+
+            <react_native_1.View style={{ width: '100%', gap: 8, marginBottom: 12 }}>
+              <react_native_1.TouchableOpacity style={{
+                    backgroundColor: '#0F172A',
+                    height: 38,
+                    borderRadius: 8,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    flexDirection: 'row',
+                    gap: 6
+                }} onPress={this.handleCopyTrace}>
+                <react_native_1.Text style={{ color: '#FFFFFF', fontSize: 12, fontWeight: 'bold', fontFamily: AppFonts_1.AppFonts.interBold || 'System' }}>
+                  📋 Copy Crash Traceback
+                </react_native_1.Text>
+              </react_native_1.TouchableOpacity>
+            </react_native_1.View>
+
+            <react_native_1.View style={styles.btnRow}>
+              <react_native_1.TouchableOpacity style={styles.resetBtn} onPress={this.handleReset}>
+                <react_native_1.Text style={styles.resetBtnText}>Retry / Reload</react_native_1.Text>
+              </react_native_1.TouchableOpacity>
+              
+              {this.props.onClose && (<react_native_1.TouchableOpacity style={styles.closeBtn} onPress={this.props.onClose}>
+                  <react_native_1.Text style={styles.closeBtnText}>Close Inspector</react_native_1.Text>
+                </react_native_1.TouchableOpacity>)}
+            </react_native_1.View>
+          </react_native_1.View>
+        </react_native_1.View>);
+        }
+        return this.props.children;
+    }
+}
+exports.ErrorBoundary = ErrorBoundary;
+const monoFont = react_native_1.Platform.OS === 'ios' ? 'Menlo' : 'monospace';
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: 'rgba(0,0,0,0.3)',
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 16,
+    },
+    card: {
+        width: '100%',
+        maxWidth: 400,
+        backgroundColor: '#FFFFFF',
+        borderRadius: 16,
+        padding: 20,
+        alignItems: 'center',
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.1,
+        shadowRadius: 12,
+        elevation: 8,
+    },
+    emoji: {
+        fontSize: 40,
+        marginBottom: 12,
+    },
+    title: {
+        fontFamily: AppFonts_1.AppFonts.interBold || 'System',
+        fontSize: 18,
+        color: '#0F172A',
+        marginBottom: 8,
+        textAlign: 'center',
+    },
+    subtitle: {
+        fontFamily: AppFonts_1.AppFonts.interRegular || 'System',
+        fontSize: 12,
+        color: '#64748B',
+        lineHeight: 18,
+        textAlign: 'center',
+        marginBottom: 16,
+    },
+    scroll: {
+        width: '100%',
+        maxHeight: 180,
+        backgroundColor: '#F8FAFC',
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: '#E2E8F0',
+        padding: 10,
+        marginBottom: 20,
+    },
+    scrollContent: {
+        paddingBottom: 10,
+    },
+    code: {
+        fontFamily: monoFont,
+        fontSize: 11,
+        color: '#E11D48',
+    },
+    btnRow: {
+        flexDirection: 'row',
+        gap: 12,
+        width: '100%',
+    },
+    resetBtn: {
+        flex: 1,
+        backgroundColor: AppColors_1.AppColors.purple || '#684B9B',
+        height: 40,
+        borderRadius: 8,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    resetBtnText: {
+        fontFamily: AppFonts_1.AppFonts.interBold || 'System',
+        fontSize: 13,
+        color: '#FFFFFF',
+    },
+    closeBtn: {
+        flex: 1,
+        backgroundColor: '#F1F5F9',
+        borderWidth: 1,
+        borderColor: '#E2E8F0',
+        height: 40,
+        borderRadius: 8,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    closeBtnText: {
+        fontFamily: AppFonts_1.AppFonts.interBold || 'System',
+        fontSize: 13,
+        color: '#475569',
+    },
+    inlineContainer: {
+        padding: 8,
+        backgroundColor: '#FFE4E6',
+        borderWidth: 1,
+        borderColor: '#FCA5A5',
+        borderRadius: 8,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        margin: 8,
+    },
+    inlineTitle: {
+        fontFamily: AppFonts_1.AppFonts.interBold || 'System',
+        fontSize: 11,
+        color: '#991B1B',
+    },
+    inlineResetBtn: {
+        backgroundColor: '#991B1B',
+        paddingHorizontal: 10,
+        paddingVertical: 4,
+        borderRadius: 4,
+    },
+    inlineResetText: {
+        fontFamily: AppFonts_1.AppFonts.interBold || 'System',
+        fontSize: 10,
+        color: '#FFFFFF',
+    },
+});
+exports.default = ErrorBoundary;

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

@@ -29,3 +29,8 @@ export declare const FilterIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const DownloadIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const CloseWhite: ({ color, size }: any) => React.JSX.Element;
 export declare const WhiteBackNavigation: ({ color, size }: any) => React.JSX.Element;
+export declare const AnalyticsIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const InsightsIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const DebugIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const SunIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const MoonIcon: ({ color, size }: any) => React.JSX.Element;

package/dist/commonjs/components/NetworkIcons.js

@@ -36,7 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WhiteBackNavigation = exports.CloseWhite = exports.DownloadIcon = exports.FilterIcon = exports.ChevronIcon = exports.SortArrowIcon = exports.GlobeIcon = exports.DiffIcon = exports.SignalIcon = exports.ExportIcon = exports.HeaderPauseIcon = exports.TrashIcon = exports.FailIcon = exports.CheckIcon = exports.TerminalIcon = exports.FetchIcon = exports.CopyIcon = exports.HeadersIcon = exports.ResponseIcon = exports.RequestIcon = exports.SizeIcon = exports.StatusIcon = exports.CalendarIcon = exports.ClockIcon = exports.ClearIcon = exports.SearchIcon = exports.ExpandCollapseIcon = exports.ScreenIcon = exports.MapPinIcon = exports.EmptyRadarIcon = void 0;
+exports.MoonIcon = exports.SunIcon = exports.DebugIcon = exports.InsightsIcon = exports.AnalyticsIcon = exports.WhiteBackNavigation = exports.CloseWhite = exports.DownloadIcon = exports.FilterIcon = exports.ChevronIcon = exports.SortArrowIcon = exports.GlobeIcon = exports.DiffIcon = exports.SignalIcon = exports.ExportIcon = exports.HeaderPauseIcon = exports.TrashIcon = exports.FailIcon = exports.CheckIcon = exports.TerminalIcon = exports.FetchIcon = exports.CopyIcon = exports.HeadersIcon = exports.ResponseIcon = exports.RequestIcon = exports.SizeIcon = exports.StatusIcon = exports.CalendarIcon = exports.ClockIcon = exports.ClearIcon = exports.SearchIcon = exports.ExpandCollapseIcon = exports.ScreenIcon = exports.MapPinIcon = exports.EmptyRadarIcon = void 0;
 const react_1 = __importDefault(require("react"));
 const react_native_svg_1 = __importStar(require("react-native-svg"));
 // Stylesheet
@@ -243,3 +243,47 @@ const WhiteBackNavigation = ({ color = '#FFFFFF', size = 20 }) => {
     </react_native_svg_1.default>);
 };
 exports.WhiteBackNavigation = WhiteBackNavigation;
+const AnalyticsIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M18 20V10M12 20V4M6 20v-6" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.AnalyticsIcon = AnalyticsIcon;
+const InsightsIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M2 17l6-6 4 4 10-10M22 12V7h-5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.InsightsIcon = InsightsIcon;
+const DebugIcon = ({ color = '#FFFFFF', size = 18 }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      {/* Hammer: diagonal from bottom-left to top-right */}
+      {/* Handle */}
+      <react_native_svg_1.Path d="M6 18l8-8" stroke={color} strokeWidth="2.5" strokeLinecap="round"/>
+      {/* Head */}
+      <react_native_svg_1.Path d="M13.5 10.5l2-2 1.5 1.5-2 2-1.5-1.5z" fill={color}/>
+      <react_native_svg_1.Path d="M15.5 8.5L19 5c.5-.5 1.2-.5 1.7 0s.5 1.2 0 1.7L17.2 10.2" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+
+      {/* Screwdriver: diagonal from bottom-right to top-left */}
+      {/* Handle */}
+      <react_native_svg_1.Path d="M15 15l4 4" stroke={color} strokeWidth="3.5" strokeLinecap="round"/>
+      {/* Shaft */}
+      <react_native_svg_1.Path d="M15 15L8.5 8.5" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+      {/* Flat tip */}
+      <react_native_svg_1.Path d="M9 9L5 5M4.5 6.5l2-2" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    </react_native_svg_1.default>);
+};
+exports.DebugIcon = DebugIcon;
+const SunIcon = ({ color = '#FFFFFF', size = 16 }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Circle cx="12" cy="12" r="5" stroke={color} strokeWidth="2"/>
+      <react_native_svg_1.Path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    </react_native_svg_1.default>);
+};
+exports.SunIcon = SunIcon;
+const MoonIcon = ({ color = '#FFFFFF', size = 16 }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" fill={color} stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.MoonIcon = MoonIcon;

package/dist/commonjs/customHooks/reduxLogger.d.ts

@@ -0,0 +1,4 @@
+export declare const getReduxState: () => any;
+export declare const setReduxState: (state: any) => void;
+export declare const subscribeReduxState: (cb: () => void) => () => void;
+export declare const connectReduxStore: (store: any) => void;

package/dist/commonjs/customHooks/reduxLogger.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.connectReduxStore = exports.subscribeReduxState = exports.setReduxState = exports.getReduxState = void 0;
+let currentReduxState = null;
+const listeners = new Set();
+const getReduxState = () => currentReduxState;
+exports.getReduxState = getReduxState;
+const setReduxState = (state) => {
+    currentReduxState = state;
+    listeners.forEach(cb => cb());
+};
+exports.setReduxState = setReduxState;
+const subscribeReduxState = (cb) => {
+    listeners.add(cb);
+    return () => {
+        listeners.delete(cb);
+    };
+};
+exports.subscribeReduxState = subscribeReduxState;
+const connectReduxStore = (store) => {
+    if (!store || typeof store.getState !== 'function' || typeof store.subscribe !== 'function') {
+        console.warn('[NetworkInspector] Invalid Redux store passed to connectReduxStore.');
+        return;
+    }
+    (0, exports.setReduxState)(store.getState());
+    store.subscribe(() => {
+        (0, exports.setReduxState)(store.getState());
+    });
+};
+exports.connectReduxStore = connectReduxStore;

package/dist/commonjs/customHooks/webViewLogger.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export interface WebViewLog {
     id: number;
     type: 'log' | 'info' | 'warn' | 'error';
@@ -9,6 +10,7 @@ export interface WebViewNavState {
     title?: string;
     timestamp: number;
 }
+export declare const WebView: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<unknown>>;
 export declare const addWebViewLog: (type: "log" | "info" | "warn" | "error", message: string) => void;
 export declare const addWebViewNav: (url: string, title?: string) => void;
 export declare const addWebViewHtml: (url: string, html: string, css?: string, js?: string) => void;