react-native-debug-toolkit 0.6.4 → 2.1.0

package/lib/features/PerformanceFeature.js

@@ -1,390 +0,0 @@
-// import SubViewPerformance from '../views/SubViewPerformance';
-import performance, { 
-  setResourceLoggingEnabled, 
-  PerformanceObserver 
-} from 'react-native-performance';
-
-class PerformanceFeature {
-  static instance = null;
-  static MAX_ENTRIES = 100;
-  
-  // Native mark names based on vanilla example
-  static NATIVE_MARKS = {
-    NATIVE_LAUNCH_START: 'nativeLaunchStart',
-    NATIVE_LAUNCH_END: 'nativeLaunchEnd',
-    RUN_JS_BUNDLE_START: 'runJsBundleStart',
-    RUN_JS_BUNDLE_END: 'runJsBundleEnd',
-    CONTENT_APPEARED: 'contentAppeared'
-  };
-
-  constructor() {
-    if (PerformanceFeature.instance) {
-      return PerformanceFeature.instance;
-    }
-
-    this.name = 'performance';
-    this.label = 'Performance';
-    this.performanceData = {
-      measures: [],
-      metrics: [],
-      resources: [],
-      nativeMarks: []
-    };
-    this.observers = [];
-    this.isSetup = false;
-    this.thresholds = new Map(); // Performance thresholds for alerts
-    this.timeOrigin = performance.timeOrigin;
-    this.resourceLoggingEnabled = false;
-
-    PerformanceFeature.instance = this;
-  }
-
-  setup(options = {}) {
-    if (this.isSetup) {
-      return this;
-    }
-    
-    const { enableResourceLogging = true } = options;
-
-    // Enable resource logging if specified
-    if (enableResourceLogging) {
-      setResourceLoggingEnabled(true);
-      this.resourceLoggingEnabled = true;
-    }
-    
-    // Mark when the feature is initialized
-    performance.mark('DebugToolkit.Init');
-
-    // Setup observers for different entry types
-    this._setupObservers();
-    
-    // Measure app launch metrics
-    this._setupAppLaunchMeasurements();
-
-    this.isSetup = true;
-    return this;
-  }
-
-  _setupObservers() {
-    // Use the same pattern as in the vanilla example App.tsx
-    const setupObserver = (type, dataKey) => {
-      try {
-        const observer = new PerformanceObserver((list) => {
-          // Get entries and sort them by startTime as in the example
-          const entries = list.getEntries().sort((a, b) => a.startTime - b.startTime);
-          
-          // Store entries
-          this._addEntries(dataKey, entries);
-          
-          // Check thresholds for measures
-          if (type === 'measure') {
-            this._checkThresholds(entries);
-          }
-        });
-        
-        // Observe with buffered set to true to get existing entries
-        observer.observe({ type, buffered: true });
-        this.observers.push(observer);
-      } catch (e) {
-        console.error(`Failed to setup PerformanceObserver for type "${type}":`, e);
-      }
-    };
-
-    // Setup observers for all entry types
-    setupObserver('mark', 'marks');
-    setupObserver('measure', 'measures');
-    setupObserver('metric', 'metrics');
-    setupObserver('resource', 'resources');
-    setupObserver('react-native-mark', 'nativeMarks');
-  }
-
-  _setupAppLaunchMeasurements() {
-    // Create a one-time observer for app launch measurements
-    try {
-      const observer = new PerformanceObserver((list, obs) => {
-        const entries = list.getEntries();
-        if (entries.some(entry => entry.name === PerformanceFeature.NATIVE_MARKS.RUN_JS_BUNDLE_END)) {
-          this._createLaunchMeasurements();
-          
-          obs.disconnect();
-        }
-      });
-      observer.observe({ type: 'react-native-mark', buffered: true });
-    } catch (e) {
-      console.error('Failed to setup app launch measurements:', e);
-    }
-  }
-
-  _createLaunchMeasurements() {
-    const { 
-      NATIVE_LAUNCH_START, 
-      NATIVE_LAUNCH_END, 
-      RUN_JS_BUNDLE_START, 
-      RUN_JS_BUNDLE_END,
-      CONTENT_APPEARED 
-    } = PerformanceFeature.NATIVE_MARKS;
-
-    // Measure app launch time (native initialization)
-    if (this.hasMark(NATIVE_LAUNCH_START) && this.hasMark(NATIVE_LAUNCH_END)) {
-      this.measure('nativeLaunch', NATIVE_LAUNCH_START, NATIVE_LAUNCH_END);
-    }
-
-    // Measure JS bundle execution time
-    if (this.hasMark(RUN_JS_BUNDLE_START) && this.hasMark(RUN_JS_BUNDLE_END)) {
-      this.measure('runJsBundle', RUN_JS_BUNDLE_START, RUN_JS_BUNDLE_END);
-    }
-
-    // Measure time to first render if content appeared mark exists
-    if (this.hasMark(NATIVE_LAUNCH_START) && this.hasMark(CONTENT_APPEARED)) {
-      this.measure('timeToContent', NATIVE_LAUNCH_START, CONTENT_APPEARED);
-    }
-  }
-
-  _addEntries(type, entries) {
-    if (!entries || entries.length === 0) return;
-
-    // Keep only the last MAX_ENTRIES entries
-    this.performanceData[type] = [
-      ...entries,
-      ...this.performanceData[type]
-    ].slice(0, PerformanceFeature.MAX_ENTRIES);
-  }
-
-  _checkThresholds(entries) {
-    if (!entries || entries.length === 0 || this.thresholds.size === 0) return;
-    
-    entries.forEach(entry => {
-      const threshold = this.thresholds.get(entry.name);
-      if (threshold && entry.duration > threshold.value) {
-        console.warn(`Performance threshold exceeded: ${entry.name} took ${entry.duration}ms (threshold: ${threshold.value}ms)`);
-        if (threshold.callback) {
-          threshold.callback(entry);
-        }
-      }
-    });
-  }
-
-  hasMark(name) {
-    try {
-      return performance.getEntriesByName(name, 'mark').length > 0 || 
-             performance.getEntriesByName(name, 'react-native-mark').length > 0;
-    } catch (e) {
-      return false;
-    }
-  }
-
-  // Convert performance timestamp to unix epoch timestamp
-  // Based on example: Date.now() - performance.timeOrigin + entry.startTime
-  getUnixTimestamp(entry) {
-    if (!entry || typeof entry.startTime !== 'number') return null;
-    return Date.now() - this.timeOrigin + entry.startTime;
-  }
-
-  // Enable or disable resource logging at runtime
-  setResourceLoggingEnabled(enabled) {
-    if (this.resourceLoggingEnabled !== enabled) {
-      setResourceLoggingEnabled(enabled);
-      this.resourceLoggingEnabled = enabled;
-    }
-    return this;
-  }
-
-  // Threshold management
-  setThreshold(name, value, callback) {
-    this.thresholds.set(name, { value, callback });
-    return this;
-  }
-
-  removeThreshold(name) {
-    this.thresholds.delete(name);
-    return this;
-  }
-
-  clearThresholds() {
-    this.thresholds.clear();
-    return this;
-  }
-
-  // Mark events (following pattern from vanilla example)
-  mark(name, detail = {}) {
-    if (!this.isSetup) return this;
-    
-    if (typeof detail !== 'object') {
-      detail = { value: detail };
-    }
-    
-    performance.mark(name, { detail });
-    return this;
-  }
-
-  measure(name, startMarkOrOptions, endMark, detail = {}) {
-    if (!this.isSetup) return this;
-    
-    try {
-      if (typeof startMarkOrOptions === 'string' && endMark) {
-        performance.measure(name, startMarkOrOptions, endMark, { detail });
-      } else if (typeof startMarkOrOptions === 'object') {
-        performance.measure(name, startMarkOrOptions);
-      } else {
-        performance.measure(name, { detail });
-      }
-    } catch (e) {
-    }
-    
-    return this;
-  }
-
-  // Record custom metrics (following pattern from vanilla example)
-  metric(name, value, detail = {}) {
-    if (!this.isSetup) return this;
-    
-    if (typeof detail !== 'object') {
-      detail = { info: detail };
-    }
-    
-    performance.metric(name, value, { detail });
-    return this;
-  }
-
-  // Measure execution time of a function
-  measureFunction(name, fn, ...args) {
-    if (!this.isSetup) {
-      return fn(...args);
-    }
-    
-    const markName = `${name}_start`;
-    this.mark(markName);
-    
-    try {
-      const result = fn(...args);
-      
-      // Handle promises
-      if (result instanceof Promise) {
-        return result.finally(() => {
-          this.measure(name, markName);
-        });
-      }
-      
-      // Handle synchronous functions
-      this.measure(name, markName);
-      return result;
-    } catch (e) {
-      this.measure(`${name}_error`, markName, undefined, { error: e.message });
-      throw e;
-    }
-  }
-
-  // Get formatted performance data
-  getData() {
-    return this.performanceData;
-  }
-
-  getTimingData(options = {}) {
-    const { includeMarks = true, includeMeasures = true, filterByName } = options;
-    
-    let data = [];
-    
-    if (includeMarks) {
-      data = [...data, ...this.performanceData.marks, ...this.performanceData.nativeMarks];
-    }
-    
-    if (includeMeasures) {
-      data = [...data, ...this.performanceData.measures];
-    }
-    
-    if (filterByName) {
-      if (filterByName instanceof RegExp) {
-        data = data.filter(entry => filterByName.test(entry.name));
-      } else if (typeof filterByName === 'string') {
-        data = data.filter(entry => entry.name.includes(filterByName));
-      }
-    }
-    
-    return data.sort((a, b) => a.startTime - b.startTime);
-  }
-
-  // Get network resource data (similar to the demo pattern)
-  getResourceData() {
-    return this.performanceData.resources.sort((a, b) => a.startTime - b.startTime);
-  }
-
-  // Trigger a test network request (for demo purposes)
-  generateTestNetworkRequest() {
-    if (!this.isSetup || !this.resourceLoggingEnabled) return this;
-    
-    // Similar to the fetch in the vanilla example
-    fetch('https://jsonplaceholder.typicode.com/todos/1', { cache: 'no-cache' })
-      .catch(err => console.error('Test network request failed:', err));
-      
-    return this;
-  }
-
-  // Clear specific type of entries
-  clear(type) {
-    if (this.performanceData[type]) {
-      this.performanceData[type] = [];
-    }
-    return this;
-  }
-
-  // Clear all performance data
-  clearAll() {
-    Object.keys(this.performanceData).forEach(key => {
-      this.performanceData[key] = [];
-    });
-    return this;
-  }
-
-  cleanup() {
-    // Disconnect all observers
-    this.observers.forEach(observer => {
-      observer.disconnect();
-    });
-    this.observers = [];
-    
-    // Disable resource logging if it was enabled
-    if (this.resourceLoggingEnabled) {
-      setResourceLoggingEnabled(false);
-      this.resourceLoggingEnabled = false;
-    }
-    
-    // Clear stored data
-    this.clearAll();
-    this.clearThresholds();
-    
-    this.isSetup = false;
-    return this;
-  }
-}
-
-export const createPerformanceFeature = () => {
-  const feature = new PerformanceFeature();
-  
-  return {
-    name: feature.name,
-    label: feature.label,
-    setup: (options) => feature.setup(options),
-    getData: () => feature.getData(),
-    getTimingData: (options) => feature.getTimingData(options),
-    getResourceData: () => feature.getResourceData(),
-    getUnixTimestamp: (entry) => feature.getUnixTimestamp(entry),
-    hasMark: (name) => feature.hasMark(name),
-    setResourceLoggingEnabled: (enabled) => feature.setResourceLoggingEnabled(enabled),
-    generateTestNetworkRequest: () => feature.generateTestNetworkRequest(),
-    cleanup: () => feature.cleanup(),
-    mark: (name, detail) => feature.mark(name, detail),
-    measure: (name, startMarkOrOptions, endMark, detail) => 
-      feature.measure(name, startMarkOrOptions, endMark, detail),
-    metric: (name, value, detail) => feature.metric(name, value, detail),
-    measureFunction: (name, fn, ...args) => feature.measureFunction(name, fn, ...args),
-    clear: (type) => feature.clear(type),
-    clearAll: () => feature.clearAll(),
-    setThreshold: (name, value, callback) => feature.setThreshold(name, value, callback),
-    removeThreshold: (name) => feature.removeThreshold(name),
-    clearThresholds: () => feature.clearThresholds(),
-  };
-};
-
-// For backward compatibility
-const instance = new PerformanceFeature();
-export default instance; 

package/lib/features/ThirdPartyLibsFeature.js

@@ -1,63 +0,0 @@
-import { Platform } from 'react-native';
-import NativeDebugLibs from '../NativeDebugLibs';
-
-// Define available third-party debug libraries
-const availableLibs = [
-  {
-    id: 'flex',
-    name: 'FLEX',
-    description: 'In-app debugging and exploration tool for iOS',
-    platform: 'ios',
-    icon: 'tools',
-    actions: [
-      { id: 'showExplorer', label: 'Show Explorer', method: NativeDebugLibs.showExplorer },
-      { id: 'hideExplorer', label: 'Hide Explorer', method: NativeDebugLibs.hideExplorer },
-    ]
-  },
-  {
-    id: 'doraemonkit',
-    name: 'DoraemonKit',
-    description: 'A full-featured iOS & Android development assistant',
-    platform: 'both',
-    icon: 'box',
-    actions: [
-      { id: 'showDoraemonKit', label: 'Show DoraemonKit', method: NativeDebugLibs.showDoraemonKit },
-      { id: 'hideDoraemonKit', label: 'Hide DoraemonKit', method: NativeDebugLibs.hideDoraemonKit },
-    ]
-  }
-];
-
-// Get libraries available for current platform
-const getPlatformLibs = () => {
-  const currentPlatform = Platform.OS;
-  return availableLibs.filter(lib => 
-    lib.platform === 'both' || lib.platform === currentPlatform
-  );
-};
-
-// Setup function is minimal since we're just presenting UI options
-const setup = () => {
-
-  // No additional setup needed beyond initialization
-};
-
-// Get data - return available libraries for this platform
-const getData = () => {
-  return getPlatformLibs();
-};
-
-// Cleanup function (if needed)
-const cleanup = () => {
-  // Nothing specific to clean up
-};
-
-// Export the feature factory function
-export const createThirdPartyLibsFeature = () => {
-  return {
-    name: 'thirdPartyLibs',
-    label: 'Debug Libraries',
-    setup,
-    getData,
-    cleanup
-  };
-}; 

package/lib/features/TrackFeature.js

@@ -1,94 +0,0 @@
-const MAX_LOGS = 200; // Max number of track events to store
-const logs = [];
-
-const setup = () => {
-    
-  // Note: Actual event tracking will be done in the main app code
-  // This is just a setup function for compatibility with the feature API
-};
-
-// Function to add track event log
-export const addTrackLog = (eventData) => {
-
-  // Store log data
-  const logEntry = {
-    timestamp: new Date(),
-    eventName: eventData.eventName || 'unknown_event',
-    entityType: eventData.entityType,
-    entityName: eventData.entityName,
-    pageId: eventData.pageId,
-    objId: eventData.objId,
-    entityPath: eventData.entityPath,
-    objType: eventData.objType,
-    objPt: eventData.objPt,
-    refPageLocation: eventData.refPageLocation,
-    position: eventData.position,
-    entityLocation: eventData.entityLocation,
-    frontOperation: eventData.frontOperation,
-    sessionId: eventData.sessionId,
-    requestId: eventData.requestId,
-    searchKeywored: eventData.searchKeywored,
-    enSearchKeywored: eventData.enSearchKeywored,
-    // Include any additional custom properties
-    ...eventData
-  };
-
-  logs.push(logEntry);
-
-  // Trim logs if they exceed the maximum limit
-  if (logs.length > MAX_LOGS) {
-    logs.splice(0, logs.length - MAX_LOGS);
-  }
-};
-
-// Get event statistics
-export const getEventStats = () => {
-  const stats = {};
-  logs.forEach(log => {
-    const eventName = log.eventName;
-    if (!stats[eventName]) {
-      stats[eventName] = {
-        count: 0,
-        lastSeen: log.timestamp,
-        entityTypes: new Set(),
-        operations: new Set()
-      };
-    }
-    stats[eventName].count++;
-    if (log.timestamp > stats[eventName].lastSeen) {
-      stats[eventName].lastSeen = log.timestamp;
-    }
-    if (log.entityType) {
-      stats[eventName].entityTypes.add(log.entityType);
-    }
-    if (log.frontOperation) {
-      stats[eventName].operations.add(log.frontOperation);
-    }
-  });
-
-  // Convert Sets to Arrays for display
-  Object.keys(stats).forEach(eventName => {
-    stats[eventName].entityTypes = Array.from(stats[eventName].entityTypes);
-    stats[eventName].operations = Array.from(stats[eventName].operations);
-  });
-
-  return stats;
-};
-
-const getData = () => {
-  return logs;
-};
-
-const cleanup = () => {
-  logs.length = 0; // Clear array
-};
-
-export const createTrackFeature = () => {
-  return {
-    name: 'track',
-    label: 'Track Events',
-    setup: setup,
-    getData: getData,
-    cleanup: cleanup,
-  };
-}; 

package/lib/features/ZustandLogFeature.js

@@ -1,44 +0,0 @@
-const MAX_LOGS = 200; // Max number of Zustand logs to store
-const logs = [];
-
-// Zustand middleware to capture state changes
-export const addZustandLog = (action, prevState, nextState, actionCompleteTime, storeName) => {
-      // Store log data
-      logs.push({
-        timestamp: new Date(),
-        action: action,
-        prevState: prevState,
-        nextState: nextState,
-        actionCompleteTime: actionCompleteTime,
-        storeName: storeName,
-      });
-
-      // Trim logs if they exceed the maximum limit
-      if (logs.length > MAX_LOGS) {
-        logs.splice(0, logs.length - MAX_LOGS);
-      }
-};
-
-const setup = () => {
-
-  // Note: The actual middleware setup happens in the store creation
-  // This function is mainly for compatibility with the feature API
-};
-
-const getData = () => {
-  return logs;
-};
-
-const cleanup = () => {
-  logs.length = 0; // Clear array
-};
-
-export const createZustandLogFeature = () => {
-  return {
-    name: 'zustand',
-    label: 'Zustand Logs',
-    setup: setup,
-    getData: getData,
-    cleanup: cleanup,
-  };
-};

package/lib/hooks/useNavigationLogger.js

@@ -1,92 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { addNavigationLog } from '../features/NavigationLogFeature';
-
-/**
- * Custom hook to log React Navigation events for debugging
- * 
- * Usage:
- * 
- * // In your navigation container
- * import { useNavigationLogger } from 'react-native-debug-toolkit';
- * 
- * function App() {
- *   const navigationRef = useRef();
- *   
- *   // Enable navigation logging
- *   useNavigationLogger(navigationRef);
- *   
- *   return (
- *     <NavigationContainer ref={navigationRef}>
- *       // ... your navigation structure
- *     </NavigationContainer>
- *   );
- * }
- */
-export function useNavigationLogger(navigationRef) {
-  // Track previous state
-  const routeRef = useRef(null);
-  
-  useEffect(() => {
-    if (!navigationRef.current) {
-      return;
-    }
-
-    // Create listeners for navigation events
-    const unsubscribeReady = navigationRef.current?.addListener('state', (e) => {
-      if (!navigationRef.current) return;
-      
-      const state = navigationRef.current.getRootState();
-      if (!state) return;
-      
-      const currentRoute = navigationRef.current.getCurrentRoute();
-      
-      if (!currentRoute) return;
-      
-      // First render won't have a previous state
-      if (!routeRef.current) {
-        routeRef.current = currentRoute;
-        return;
-      }
-      
-      // Determine the navigation action
-      let action = 'navigate';
-      
-      // Check if this was a push (adding to history) or replace
-      const routes = state.routes;
-      if (routes.length > 0) {
-        const prevIndex = routes.findIndex(route => route.key === routeRef.current.key);
-        const currentIndex = routes.findIndex(route => route.key === currentRoute.key);
-        
-        if (currentIndex > prevIndex) {
-          action = 'push';
-        } else if (currentIndex < prevIndex) {
-          action = 'pop';
-        } else if (currentIndex === prevIndex) {
-          action = 'replace';
-        }
-      }
-      
-      // Log the navigation
-      addNavigationLog(
-        action,
-        {
-          name: routeRef.current.name,
-          params: routeRef.current.params,
-        },
-        {
-          name: currentRoute.name,
-          params: currentRoute.params,
-        },
-        performance.now(), // Approximate time
-        0 // No duration measurement available for this event type
-      );
-      
-      // Update the reference
-      routeRef.current = currentRoute;
-    });
-    
-    return () => {
-      unsubscribeReady && unsubscribeReady();
-    };
-  }, [navigationRef]);
-}