react-native-debug-toolkit 0.3.0 → 0.4.0

package/README.md

@@ -10,6 +10,24 @@ npm install react-native-debug-toolkit
 yarn add react-native-debug-toolkit
 ```
 
+### iOS Additional Setup
+
+This toolkit uses FLEX and DoraemonKit for iOS debugging features. To properly integrate:
+
+1. Make sure CocoaPods is installed in your project
+2. Add these dependencies to your Podfile:
+
+```ruby
+pod 'FLEX', :configurations => ['Debug']
+pod 'DoraemonKit/Core', :configurations => ['Debug']
+```
+
+3. Run pod install in your iOS directory:
+
+```bash
+cd ios && pod install
+```
+
 ## Basic Usage
 
 ```javascript

package/android/src/main/java/com/debugtoolkit/BuildTypeModule.java

@@ -4,7 +4,6 @@ import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.bridge.ReactContextBaseJavaModule;
 import com.facebook.react.bridge.ReactMethod;
 import com.facebook.react.bridge.Promise;
-import com.facebook.react.bridge.Callback;
 
 import java.util.HashMap;
 import java.util.Map;
@@ -25,36 +24,13 @@ public class BuildTypeModule extends ReactContextBaseJavaModule {
     @Override
     public Map<String, Object> getConstants() {
         final Map<String, Object> constants = new HashMap<>();
-        constants.put("isDebug", BuildConfig.DEBUG);
+        constants.put("buildType", BuildConfig.DEBUG ? "debug" : "release");
         return constants;
     }
 
-    @ReactMethod
-    public void isDebugMode(Promise promise) {
-        try {
-            promise.resolve(BuildConfig.DEBUG);
-        } catch (Exception e) {
-            promise.reject("ERR_UNEXPECTED", e.getMessage(), e);
-        }
-    }
-
-    @ReactMethod
-    public void isReleaseMode(Promise promise) {
-        try {
-            promise.resolve(!BuildConfig.DEBUG);
-        } catch (Exception e) {
-            promise.reject("ERR_UNEXPECTED", e.getMessage(), e);
-        }
-    }
-
-    @ReactMethod(isBlockingSynchronousMethod = true)
-    public Boolean isDebugModeSync() {
-        return BuildConfig.DEBUG;
-    }
-
     @ReactMethod(isBlockingSynchronousMethod = true)
-    public Boolean isReleaseModeSync() {
-        return !BuildConfig.DEBUG;
+    public String getBuildTypeSync() {
+        return BuildConfig.DEBUG ? "debug" : "release";
     }
 
     @ReactMethod

package/android/src/main/java/com/reactnative/debuglibs/RNDebugLibsModule.java

@@ -0,0 +1,65 @@
+package com.reactnative.debuglibs;
+
+import android.app.Application;
+import androidx.annotation.NonNull;
+
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+
+import com.didichuxing.doraemonkit.DoKit;
+import com.didichuxing.doraemonkit.kit.AbstractKit;
+
+import java.util.ArrayList;
+import java.util.List;
+
+public class RNDebugLibsModule extends ReactContextBaseJavaModule {
+    private final ReactApplicationContext reactContext;
+
+    public RNDebugLibsModule(ReactApplicationContext reactContext) {
+        super(reactContext);
+        this.reactContext = reactContext;
+    }
+
+    @NonNull
+    @Override
+    public String getName() {
+        return "RNDebugLibs";
+    }
+
+    @ReactMethod
+    public void showExplorer() {
+        // FLEX is iOS only
+    }
+
+    @ReactMethod
+    public void hideExplorer() {
+        // FLEX is iOS only
+    }
+
+    @ReactMethod
+    public void toggleExplorer() {
+        // FLEX is iOS only
+    }
+
+    @ReactMethod
+    public void installDoraemonKit(String productId) {
+        Application app = (Application) reactContext.getApplicationContext();
+        List<AbstractKit> kits = new ArrayList<>();
+        // Initialize DoKit with custom kits if needed
+        DoKit.Builder(app)
+                .productId(productId)
+                .customKits(kits)
+                .build();
+    }
+
+    @ReactMethod
+    public void showDoraemonKit() {
+        DoKit.showToolPanel();
+    }
+
+    @ReactMethod
+    public void hideDoraemonKit() {
+        DoKit.hideToolPanel();
+    }
+} 

package/android/src/main/java/com/reactnative/debuglibs/RNDebugLibsPackage.java

@@ -0,0 +1,28 @@
+package com.reactnative.debuglibs;
+
+import androidx.annotation.NonNull;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+
+public class RNDebugLibsPackage implements ReactPackage {
+    @NonNull
+    @Override
+    public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
+        List<NativeModule> modules = new ArrayList<>();
+        modules.add(new RNDebugLibsModule(reactContext));
+        return modules;
+    }
+
+    @NonNull
+    @Override
+    public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {
+        return Collections.emptyList();
+    }
+} 

package/index.js

@@ -9,6 +9,8 @@ import { createNetworkFeature } from './lib/features/NetworkFeature'
 import { createPerformanceFeature } from './lib/features/PerformanceFeature'
 import { createConsoleLogFeature } from './lib/features/ConsoleLogFeature'
 import { createZustandLogFeature, addZustandLog } from './lib/features/ZustandLogFeature'
+import { createNavigationLogFeature, addNavigationLog } from './lib/features/NavigationLogFeature'
+import { useNavigationLogger } from './lib/hooks/useNavigationLogger'
 
 export {
   DebugToolKit,
@@ -17,7 +19,10 @@ export {
   createPerformanceFeature,
   createConsoleLogFeature,
   createZustandLogFeature,
-  addZustandLog
+  addZustandLog,
+  createNavigationLogFeature,
+  addNavigationLog,
+  useNavigationLogger
 }
 
 export default DebugToolKit

package/ios/BuildTypeModule.h

@@ -1,4 +1,9 @@
 #import <React/RCTBridgeModule.h>
 
+/**
+ * BuildTypeModule
+ * Native module that provides information about the current build type (debug or release)
+ * Used to conditionally enable debugging tools only in debug builds
+ */
 @interface BuildTypeModule : NSObject <RCTBridgeModule>
 @end 

package/ios/BuildTypeModule.m

@@ -12,49 +12,20 @@ RCT_EXPORT_MODULE();
 - (NSDictionary *)constantsToExport
 {
 #ifdef DEBUG
-  BOOL isDebug = YES;
+  NSString *buildType = @"debug";
 #else
-  BOOL isDebug = NO;
+  NSString *buildType = @"release";
 #endif
   
-  return @{ @"isDebug": @(isDebug) };
+  return @{ @"buildType": buildType };
 }
 
-RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(isDebugModeSync)
+RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(getBuildTypeSync)
 {
 #ifdef DEBUG
-  return @(YES);
+  return @"debug";
 #else
-  return @(NO);
-#endif
-}
-
-RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(isReleaseModeSync)
-{
-#ifdef DEBUG
-  return @(NO);
-#else
-  return @(YES);
-#endif
-}
-
-RCT_EXPORT_METHOD(isDebugMode:(RCTPromiseResolveBlock)resolve
-                  rejecter:(RCTPromiseRejectBlock)reject)
-{
-#ifdef DEBUG
-  resolve(@(YES));
-#else
-  resolve(@(NO));
-#endif
-}
-
-RCT_EXPORT_METHOD(isReleaseMode:(RCTPromiseResolveBlock)resolve
-                  rejecter:(RCTPromiseRejectBlock)reject)
-{
-#ifdef DEBUG
-  resolve(@(NO));
-#else
-  resolve(@(YES));
+  return @"release";
 #endif
 }
 

package/ios/RNDebugLibs.h

@@ -0,0 +1,10 @@
+#import <React/RCTBridgeModule.h>
+
+/**
+ * RNDebugLibs
+ * Native module that provides access to FLEX and DoraemonKit debugging tools
+ * Note: These debugging tools are only available in DEBUG builds
+ */
+@interface RNDebugLibs : NSObject <RCTBridgeModule>
+
+@end

package/ios/RNDebugLibs.m

@@ -0,0 +1,79 @@
+#import "RNDebugLibs.h"
+
+#ifdef DEBUG
+#import "FLEXManager.h"
+#import <DoraemonKit/DoraemonManager.h>
+#endif
+
+@implementation RNDebugLibs
+
+// Export the module
+RCT_EXPORT_MODULE();
+
+RCT_EXPORT_METHOD(showExplorer)
+{
+#ifdef DEBUG
+    dispatch_async(dispatch_get_main_queue(), ^{
+        [[FLEXManager sharedManager] showExplorer];
+    });
+#else
+    NSLog(@"[RNDebugLibs] showExplorer is only available in DEBUG builds");
+#endif
+}
+
+RCT_EXPORT_METHOD(hideExplorer)
+{
+#ifdef DEBUG
+    dispatch_async(dispatch_get_main_queue(), ^{
+        [[FLEXManager sharedManager] hideExplorer];
+    });
+#else
+    NSLog(@"[RNDebugLibs] hideExplorer is only available in DEBUG builds");
+#endif
+}
+
+RCT_EXPORT_METHOD(toggleExplorer)
+{
+#ifdef DEBUG
+    dispatch_async(dispatch_get_main_queue(), ^{
+        [[FLEXManager sharedManager] toggleExplorer];
+    });
+#else
+    NSLog(@"[RNDebugLibs] toggleExplorer is only available in DEBUG builds");
+#endif
+}
+
+RCT_EXPORT_METHOD(installDoraemonKit:(NSString *)productId)
+{
+#ifdef DEBUG
+    dispatch_async(dispatch_get_main_queue(), ^{
+        [[DoraemonManager shareInstance] installWithPid:productId];
+    });
+#else
+    NSLog(@"[RNDebugLibs] installDoraemonKit is only available in DEBUG builds");
+#endif
+}
+
+RCT_EXPORT_METHOD(showDoraemonKit)
+{
+#ifdef DEBUG
+    dispatch_async(dispatch_get_main_queue(), ^{
+        [[DoraemonManager shareInstance] showDoraemon];
+    });
+#else
+    NSLog(@"[RNDebugLibs] showDoraemonKit is only available in DEBUG builds");
+#endif
+}
+
+RCT_EXPORT_METHOD(hideDoraemonKit)
+{
+#ifdef DEBUG
+    dispatch_async(dispatch_get_main_queue(), ^{
+        [[DoraemonManager shareInstance] hiddenDoraemon];
+    });
+#else
+    NSLog(@"[RNDebugLibs] hideDoraemonKit is only available in DEBUG builds");
+#endif
+}
+
+@end 

package/lib/NativeDebugLibs.js

@@ -0,0 +1,43 @@
+import { NativeModules, Platform } from 'react-native'
+
+const { RNDebugLibs } = NativeModules
+
+export default class NativeDebugLibs {
+  // FLEX methods (iOS only)
+  static showExplorer() {
+    if (Platform.OS === 'ios' && RNDebugLibs) {
+      RNDebugLibs.showExplorer()
+    }
+  }
+
+  static hideExplorer() {
+    if (Platform.OS === 'ios' && RNDebugLibs) {
+      RNDebugLibs.hideExplorer()
+    }
+  }
+
+  static toggleExplorer() {
+    if (Platform.OS === 'ios' && RNDebugLibs) {
+      RNDebugLibs.toggleExplorer()
+    }
+  }
+
+  // DoraemonKit/DoKit methods
+  static installDoraemonKit(productId) {
+    if (RNDebugLibs) {
+      RNDebugLibs.installDoraemonKit(productId)
+    }
+  }
+
+  static showDoraemonKit() {
+    if (RNDebugLibs) {
+      RNDebugLibs.showDoraemonKit()
+    }
+  }
+
+  static hideDoraemonKit() {
+    if (RNDebugLibs) {
+      RNDebugLibs.hideDoraemonKit()
+    }
+  }
+} 

package/lib/features/NavigationLogFeature.js

@@ -0,0 +1,47 @@
+const MAX_LOGS = 200; // Max number of navigation logs to store
+const logs = [];
+const originalNavigationMethods = {}; // Store original navigation methods
+
+const setup = () => {
+  if (!__DEV__) {
+    return;
+  }
+  // Note: Actual navigation interception will be done in the main app code
+  // This is just a setup function for compatibility with the feature API
+};
+
+// Function to add navigation log
+export const addNavigationLog = (action, from, to, startTime, duration) => {
+  // Store log data
+  logs.push({
+    timestamp: new Date(),
+    action: action, // push, pop, replace, etc.
+    from: from,     // source route info
+    to: to,         // destination route info
+    startTime: startTime,
+    duration: duration,
+  });
+
+  // Trim logs if they exceed the maximum limit
+  if (logs.length > MAX_LOGS) {
+    logs.splice(0, logs.length - MAX_LOGS);
+  }
+};
+
+const getData = () => {
+  return logs;
+};
+
+const cleanup = () => {
+  logs.length = 0; // Clear array
+};
+
+export const createNavigationLogFeature = () => {
+  return {
+    name: 'navigation',
+    label: 'Navigation Logs',
+    setup: setup,
+    getData: getData,
+    cleanup: cleanup,
+  };
+}; 

package/lib/features/ThirdPartyLibsFeature.js

@@ -0,0 +1,65 @@
+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 = () => {
+  if (!__DEV__) {
+    return;
+  }
+  // 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/hooks/useNavigationLogger.js

@@ -0,0 +1,92 @@
+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 (!__DEV__ || !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]);
+}

package/lib/index.js

@@ -3,6 +3,9 @@ import { createNetworkFeature } from './features/NetworkFeature'
 import { createPerformanceFeature} from './features/PerformanceFeature'
 import { createConsoleLogFeature } from './features/ConsoleLogFeature'
 import { createZustandLogFeature, zustandLogMiddleware } from './features/ZustandLogFeature'
+import { createNavigationLogFeature, addNavigationLog } from './features/NavigationLogFeature'
+import { createThirdPartyLibsFeature } from './features/ThirdPartyLibsFeature'
+import NativeDebugLibs from './NativeDebugLibs'
 
 // Registry mapping feature names (strings) to their creator functions
 const featureRegistry = {
@@ -10,24 +13,32 @@ const featureRegistry = {
   console: createConsoleLogFeature,
   performance: createPerformanceFeature,
   zustand: createZustandLogFeature,
+  navigation: createNavigationLogFeature,
+  thirdPartyLibs: createThirdPartyLibsFeature,
   // Add other built-in features here
   // 'storage': createStorageFeature,
 }
 
 // List of default features (can use strings now)
-const defaultFeatures = ['network', 'console', 'zustand']
+const defaultFeatures = ['network', 'console', 'zustand', 'navigation', 'thirdPartyLibs']
 
 /**
  * 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.
+ * @param {Object} options - Additional options like doraemonProductId for third-party debug libraries
  */
-export function initializeDebugToolkit(features = defaultFeatures) {
+export function initializeDebugToolkit(features = defaultFeatures, options = {}) {
 
   try {
     const debugToolKit = new DebugToolKit();
 
+    // Initialize third-party debug libraries if configured
+    if (options.doraemonProductId) {
+      NativeDebugLibs.installDoraemonKit(options.doraemonProductId);
+    }
+
     features.forEach(featureIdentifier => {
       let feature = null;
       let featureCreator = null;
@@ -81,6 +92,9 @@ export {
   createPerformanceFeature, 
   createConsoleLogFeature, 
   createZustandLogFeature,
+  createNavigationLogFeature,
+  createThirdPartyLibsFeature,
+  addNavigationLog,
   zustandLogMiddleware,  // Export middleware for use in Zustand stores
   featureRegistry 
 };

package/lib/navigation/NavigationLogger.js

@@ -0,0 +1 @@
+