react-native-debug-toolkit 0.1.6 → 0.2.0

package/index.js

@@ -3,9 +3,18 @@
  * A comprehensive debugging toolkit for React Native
  */
 import DebugToolKit from './lib/DebugToolKit'
+import { initializeDebugToolkit } from './lib'
+
 import { createNetworkFeature } from './lib/features/NetworkFeature'
+import { createPerformanceFeature } from './lib/features/PerformanceFeature'
+import { createConsoleLogFeature } from './lib/features/ConsoleLogFeature'
 
-export { DebugToolKit, createNetworkFeature }
+export {
+  DebugToolKit,
+  initializeDebugToolkit,
+  createNetworkFeature,
+  createPerformanceFeature,
+  createConsoleLogFeature,
+}
 
 export default DebugToolKit
-

package/lib/DebugToolKit.js

@@ -3,34 +3,42 @@ import { BackHandler, Pressable, Text } from 'react-native'
 import RootSiblings from 'react-native-root-siblings'
 import FloatPanelView from './views/FloatPanelView'
 
-class DebugToolKit {
+export default class DebugToolKit {
   static instance = null
 
-  constructor() {
+  constructor(config = {}) {
     if (DebugToolKit.instance) {
       return DebugToolKit.instance
     }
 
     this.floatPanel = null
     this.features = []
+    this.isPanelVisible = false
+
+    const featuresToLoad = config.features || []
+
+    featuresToLoad.forEach(featureOrCreator => {
+      const feature = typeof featureOrCreator === 'function'
+        ? featureOrCreator()
+        : featureOrCreator
+      this.addFeature(feature)
+    })
+
+    if (config.autoShow) {
+      this.showDebugPanel()
+    }
 
     BackHandler.addEventListener('hardwareBackPress', () => true)
     DebugToolKit.instance = this
   }
 
   addFeature(feature) {
-    if (!__DEV__) {
-      return this
-    }
-
-    if (!feature.name || !feature.label || !feature.setup || !feature.getData) {
-      console.error('Invalid feature format', feature)
-      return this
+    if (feature && typeof feature.name === 'string') {
+      this.features.push(feature)
+      feature.setup?.()
+    } else {
+      console.warn('[DebugToolKit] Invalid feature added:', feature)
     }
-
-    feature.setup()
-    this.features.push(feature)
-    this.updateDebugPanel()
     return this
   }
 
@@ -44,6 +52,7 @@ class DebugToolKit {
         <FloatPanelView features={this.features} close={this.hideDebugPanel} />,
       )
     }
+    this.isPanelVisible = true
   }
 
   hideDebugPanel = () => {
@@ -79,5 +88,3 @@ class DebugToolKit {
     BackHandler.removeEventListener('hardwareBackPress')
   }
 }
-
-export default DebugToolKit

package/lib/features/ConsoleLogFeature.js

@@ -0,0 +1,73 @@
+const MAX_LOGS = 100; // Max number of console logs to store
+const logs = [];
+const originalConsole = {}; // Store original console methods
+
+const _interceptConsole = () => {
+  const levels = ['log', 'info', 'warn', 'error'];
+  levels.forEach(level => {
+    if (typeof console[level] === 'function') { // Check if it's actually a function
+      originalConsole[level] = console[level]; // Store original
+
+      console[level] = (...args) => {
+        // Call original console method first
+        originalConsole[level].apply(console, args); // Use apply for proper context
+
+        // Add log entry
+        if (logs.length >= MAX_LOGS) {
+          logs.shift(); // Remove the oldest log if limit is reached
+        }
+
+        // Store log data
+        logs.push({
+          timestamp: new Date(),
+          level: level,
+          data: args, // Store all arguments passed to console[level]
+        });
+
+        // TODO: Notify UI if needed
+      };
+    }
+  });
+};
+
+const _restoreConsole = () => {
+  Object.keys(originalConsole).forEach(level => {
+    if (originalConsole[level]) {
+      console[level] = originalConsole[level];
+      delete originalConsole[level]; // Clean up stored method
+    }
+  });
+};
+
+const setup = () => {
+  if (!__DEV__) {
+    return; // No need to return 'this' in a functional approach
+  }
+  _interceptConsole();
+};
+
+const getData = () => {
+  return logs;
+};
+
+const cleanup = () => {
+  _restoreConsole();
+  logs.length = 0; // More efficient way to clear array
+};
+
+// Factory function remains similar but uses the module-level functions
+export const createConsoleLogFeature = () => {
+  // Ensure setup is only called once if multiple features might be created (though unlikely for console)
+  // A simple flag could work here if needed, but maybe setup belongs in the main toolkit init.
+  return {
+    name: 'console',
+    label: 'Console Logs',
+    setup: setup, // Reference module-level function
+    getData: getData, // Reference module-level function
+    cleanup: cleanup, // Reference module-level function
+  };
+};
+
+// Note: This refactor removes the class structure entirely, relying on module scope
+// for the "singleton" nature. Decide if this fits the overall pattern of other features.
+// The original class-based singleton is also perfectly valid.

package/lib/features/PerformanceFeature.js

@@ -0,0 +1,390 @@
+// 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 (!__DEV__ || 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 (!__DEV__ || !this.isSetup) return this;
+    
+    if (typeof detail !== 'object') {
+      detail = { value: detail };
+    }
+    
+    performance.mark(name, { detail });
+    return this;
+  }
+
+  measure(name, startMarkOrOptions, endMark, detail = {}) {
+    if (!__DEV__ || !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 (!__DEV__ || !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 (!__DEV__ || !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 (!__DEV__ || !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/index.js

@@ -1,6 +1,76 @@
 import DebugToolKit from './DebugToolKit'
 import { createNetworkFeature } from './features/NetworkFeature'
+import { createPerformanceFeature} from './features/PerformanceFeature'
+import { createConsoleLogFeature } from './features/ConsoleLogFeature'
 
-export { DebugToolKit, createNetworkFeature }
+// Registry mapping feature names (strings) to their creator functions
+const featureRegistry = {
+  network: createNetworkFeature,
+  console: createConsoleLogFeature,
+  performance: createPerformanceFeature,
+  // Add other built-in features here
+  // 'storage': createStorageFeature,
+}
 
-export default DebugToolKit
+// List of default features (can use strings now)
+const defaultFeatures = ['network', 'console']
+
+/**
+ * Initializes and shows the Debug ToolKit panel with specified features.
+ * Only runs in development mode (__DEV__ === true).
+ * Features can be specified as strings (e.g., 'network') or creator functions.
+ * @param {Array<string|Function>} features - Array of feature names (strings) or creator functions. Defaults to standard features.
+ */
+export function initializeDebugToolkit(features = defaultFeatures) {
+
+  try {
+    const debugToolKit = new DebugToolKit();
+
+    features.forEach(featureIdentifier => {
+      let feature = null;
+      let featureCreator = null;
+
+      if (typeof featureIdentifier === 'string') {
+        // It's a string, look it up in the registry
+        featureCreator = featureRegistry[featureIdentifier];
+        if (!featureCreator) {
+          console.warn(`[DebugToolKit] Unknown feature identifier string: "${featureIdentifier}". Skipping.`);
+          return; // Skip this identifier
+        }
+        feature = featureCreator();
+      } else if (typeof featureIdentifier === 'function') {
+        // It's a function, assume it's a creator
+        featureCreator = featureIdentifier;
+         try {
+             feature = featureCreator();
+         } catch (e) {
+             console.error(`[DebugToolKit] Error calling feature creator function:`, e);
+             return; // Skip if creator fails
+         }
+      } else if (typeof featureIdentifier === 'object' && featureIdentifier !== null && featureIdentifier.name) {
+         // It might be a pre-created feature object
+         feature = featureIdentifier;
+         console.warn(`[DebugToolKit] Passing pre-created feature objects is supported but using strings or creators is recommended.`);
+      } else {
+        console.warn('[DebugToolKit] Invalid feature identifier type:', typeof featureIdentifier, featureIdentifier, '. Skipping.');
+        return; // Skip invalid types
+      }
+
+      if (feature) {
+        debugToolKit.addFeature(feature);
+      } else {
+        // This case might happen if a creator function returns null/undefined
+         console.warn(`[DebugToolKit] Feature creator for identifier "${typeof featureIdentifier === 'string' ? featureIdentifier : 'custom function'}" did not return a valid feature object.`);
+      }
+    });
+
+    debugToolKit.showDebugPanel();
+    return debugToolKit; // Return instance if needed elsewhere
+  } catch (error) {
+      console.error('[DebugToolKit] Failed to initialize:', error);
+      return null;
+  }
+}
+
+// Export existing stuff and the new initializer
+export { DebugToolKit, createNetworkFeature, createPerformanceFeature, createConsoleLogFeature, featureRegistry };

package/lib/utils/DebugConst.js

@@ -16,7 +16,20 @@ export const DebugColors = {
     error: '#FF3B30',
     warning: '#FF9500'
 };
-
+export const getLogLevelColor = (level) => {
+    switch (level?.toLowerCase()) {
+      case 'log':
+        return '#666';
+      case 'info':
+        return '#0D96F2';
+      case 'warn':
+        return '#FCA130';
+      case 'error':
+        return '#F93E3E';
+      default:
+        return '#666666';
+    }
+  };
 export const DebugImgs = {
     iconLink: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVGhD7ZgxDoMwDEV9/xvQtReoGBASYmFhYmNiYmNhYWJiQQIJqUh8y05wlAYw+T/pD5Dg9xwnhPR6vV6v1+v1er3eGvuOb7yIhxEQvjAC4hRGQJzGCIhLGAFxGSMgbmEExC2MgLiFERC3MALiFkZA3MIIiFsYAXELIyBuYQTELYyAuIURELcwAuIWRkDcwgiIWxgBcQsjIG5hBMQtjIC4hREQtzAC4hZGQNzCCIhbGAFxCyMgbmEExC2MgLiFERC3MALiFkZA3MIIiFsYAXELIyBuYQTELYyAuIURELcwAuIWRkDcwgiIW/+PYBgfhPtL9WBrfKUAAAAASUVORK5CYII='
 };