react-native-debug-toolkit 0.6.4 → 2.1.0

package/src/types/index.ts

@@ -0,0 +1,127 @@
+import type { ComponentType } from 'react';
+
+export type DebugFeatureListener = () => void;
+
+export type BuiltInFeatureName =
+  | 'network'
+  | 'console'
+  | 'zustand'
+  | 'navigation'
+  | 'track'
+  | 'environment'
+  | 'clipboard';
+
+/** Props passed to a feature's renderContent component */
+export interface DebugFeatureRenderProps<TData = unknown> {
+  data: TData[];
+  feature: DebugFeature<TData>;
+}
+
+/**
+ * Type-erased feature for heterogeneous collections.
+ * Individual features should use `DebugFeature<TData>` with their specific data type.
+ * This alias is only for places that hold features of multiple types.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type AnyDebugFeature = DebugFeature<any>;
+
+
+/** Base interface all debug features must implement */
+export interface DebugFeature<TData = unknown> {
+  name: string;
+  label: string;
+  setup: () => void;
+  getData: () => TData[];
+  clear?: () => void;
+  cleanup: () => void;
+  subscribe?: (listener: DebugFeatureListener) => () => void;
+  renderContent?: ComponentType<DebugFeatureRenderProps<TData>>;
+  badge?: () => { label: string; color: string } | null;
+}
+
+export interface NetworkLogEntry {
+  id: string;
+  timestamp: number;
+  duration?: number;
+  request: {
+    url: string;
+    method: string;
+    headers?: Record<string, string>;
+    body?: unknown;
+  };
+  response?: {
+    status: number;
+    statusText?: string;
+    headers?: Record<string, string>;
+    data?: unknown;
+    success?: boolean;
+  };
+  error?: string;
+}
+
+export interface ConsoleLogEntry {
+  id: string;
+  timestamp: number;
+  level: 'log' | 'info' | 'warn' | 'error';
+  data: unknown[];
+}
+
+export interface ZustandLogEntry {
+  id: string;
+  timestamp: number;
+  action: string;
+  prevState: unknown;
+  nextState: unknown;
+  actionCompleteTime?: number;
+  storeName?: string;
+}
+
+export interface NavigationLogEntry {
+  id: string;
+  timestamp: number;
+  action: string;
+  from: string;
+  to: string;
+  startTime?: number;
+  duration?: number;
+  debugLog?: string;
+}
+
+export interface TrackLogEntry {
+  id: string;
+  timestamp: number;
+  eventName: string;
+  [key: string]: unknown;
+}
+
+export interface EnvironmentConfig {
+  id: string;
+  label: string;
+  host: string;
+  color?: string;
+}
+
+export interface EnvironmentState {
+  environments: EnvironmentConfig[];
+  currentEnvironmentId: string | null;
+}
+
+export interface NavigationContainerRef {
+  getCurrentRoute?: () => { name?: string } | undefined;
+  getRootState?: () => unknown;
+  addListener: (event: string, callback: () => void) => () => void;
+}
+
+export interface ThirdPartyLibAction {
+  id: string;
+  label: string;
+  onPress: () => void;
+}
+
+export interface ThirdPartyLib {
+  id: string;
+  name: string;
+  description: string;
+  platform: 'ios' | 'android' | 'both';
+  actions: ThirdPartyLibAction[];
+}

package/src/utils/colors.ts

@@ -0,0 +1,38 @@
+// Apple iOS System Color Palette
+export const Colors = {
+  // System
+  primary: '#007AFF',
+  text: '#1C1C1E',
+  textSecondary: '#8E8E93',
+  textLight: '#C7C7CC',
+  border: '#E5E5EA',
+  background: '#F2F2F7',
+  surface: '#FFFFFF',
+
+  // Semantic
+  success: '#34C759',
+  error: '#FF3B30',
+  warning: '#FF9500',
+  info: '#5AC8FA',
+
+  // Accent
+  purple: '#AF52DE',
+
+  // HTTP Method Colors
+  get: '#007AFF',
+  post: '#34C759',
+  put: '#FF9500',
+  delete: '#FF3B30',
+  patch: '#5AC8FA',
+} as const;
+
+export function getMethodColor(method: string): string {
+  switch (method.toUpperCase()) {
+    case 'GET': return Colors.get;
+    case 'POST': return Colors.post;
+    case 'PUT': return Colors.put;
+    case 'DELETE': return Colors.delete;
+    case 'PATCH': return Colors.patch;
+    default: return Colors.textSecondary;
+  }
+}

package/src/utils/copyToComputer.ts

@@ -0,0 +1,104 @@
+type ClipboardModule = { setString: (value: string) => void };
+
+let clipboardModule: ClipboardModule | null = null;
+let clipboardChecked = false;
+
+function getClipboardModule(): ClipboardModule | null {
+  if (clipboardChecked) return clipboardModule;
+  clipboardChecked = true;
+  try {
+    // Check native module exists first — getEnforcing() inside the clipboard
+    // package throws a fatal Invariant Violation that bypasses try/catch.
+    const { TurboModuleRegistry } = require('react-native');
+    if (!TurboModuleRegistry.get('RNCClipboard')) {
+      return null;
+    }
+    clipboardModule = require('@react-native-clipboard/clipboard').default;
+  } catch {
+    clipboardModule = null;
+  }
+  return clipboardModule;
+}
+
+export type CopyMethod = 'clipboard' | 'console' | 'none';
+
+export interface CopyResult {
+  success: boolean;
+  method: CopyMethod;
+}
+
+export interface CopyOptions {
+  /** Descriptive label for console.log identification */
+  label?: string;
+  /** If true, only copy to clipboard without console.log */
+  silent?: boolean;
+}
+
+const MAX_LOG_SIZE = 10 * 1024; // 10KB
+
+/**
+ * Format data for copying (pretty JSON or raw string).
+ */
+export function fmt(data: unknown): string {
+  if (!data) return '';
+  try {
+    return JSON.stringify(typeof data === 'string' ? JSON.parse(data) : data, null, 2);
+  } catch {
+    return String(data);
+  }
+}
+
+/**
+ * Log content to console (Metro terminal / DevTools) with a structured prefix.
+ * ConsoleLogFeature intercepts console.log but still calls the original first,
+ * so output reliably appears in Metro terminal.
+ */
+export function logToComputer(content: string, label?: string): void {
+  try {
+    const header = label ? `[DebugToolkit:Copy] ─── ${label} ───` : '[DebugToolkit:Copy] ─── Content ───';
+    console.log(header);
+
+    if (content.length > MAX_LOG_SIZE) {
+      console.log(content.slice(0, MAX_LOG_SIZE));
+      console.log(`[DebugToolkit:Copy] ... truncated (${content.length} bytes total)`);
+    } else {
+      console.log(content);
+    }
+
+    console.log('[DebugToolkit:Copy] ─── END ───');
+  } catch {
+    // Silently fail — console may not be available in all environments
+  }
+}
+
+/**
+ * Copy content to computer via the best available method.
+ *
+ * 1. Attempts device clipboard (if @react-native-clipboard/clipboard is installed)
+ * 2. Always console.logs with structured prefix (appears in Metro terminal)
+ * 3. Returns result indicating what succeeded
+ */
+export function copyToComputer(content: string, options?: CopyOptions): CopyResult {
+  let method: CopyMethod = 'none';
+
+  // Try clipboard
+  try {
+    const clipboard = getClipboardModule();
+    if (clipboard) {
+      clipboard.setString(content);
+      method = 'clipboard';
+    }
+  } catch {
+    // Clipboard may fail, continue
+  }
+
+  // Always log to computer console (unless silent)
+  if (!options?.silent) {
+    logToComputer(content, options?.label);
+    if (method === 'none') {
+      method = 'console';
+    }
+  }
+
+  return { success: true, method };
+}

package/src/utils/createChannelFeature.ts

@@ -0,0 +1,55 @@
+import type { ComponentType } from 'react';
+import type { DebugFeature, DebugFeatureListener, DebugFeatureRenderProps } from '../types';
+import type { EventChannel } from './createEventChannel';
+import { createObservableStore } from './createObservableStore';
+
+const DEFAULT_MAX_LOGS = 200;
+
+/**
+ * Generic factory for features that subscribe to an event channel.
+ * Eliminates boilerplate across channel-based features (Track, Navigation, Zustand).
+ *
+ * @param getChannel - Function returning the current channel (supports test resets)
+ * @param toEntry - Maps a payload + auto-generated id to a typed log entry
+ * @param options - Feature name, label, render component, and optional maxLogs
+ */
+export function createChannelFeature<TPayload, TEntry>(
+  getChannel: () => EventChannel<TPayload>,
+  toEntry: (payload: TPayload, id: string) => TEntry,
+  options: {
+    name: string;
+    label: string;
+    renderContent?: ComponentType<DebugFeatureRenderProps<TEntry>>;
+    maxLogs?: number;
+  },
+): DebugFeature<TEntry> {
+  const maxLogs = options.maxLogs ?? DEFAULT_MAX_LOGS;
+  const logStore = createObservableStore<TEntry>();
+  let nextId = 0;
+  let initialized = false;
+  let unsubscribe: (() => void) | null = null;
+
+  return {
+    name: options.name,
+    label: options.label,
+    renderContent: options.renderContent,
+    setup: () => {
+      if (initialized) return;
+      unsubscribe = getChannel().subscribe((payload) => {
+        logStore.push(toEntry(payload, String(nextId++)), maxLogs);
+      });
+      initialized = true;
+    },
+    getData: () => logStore.getData(),
+    clear: () => {
+      logStore.clear();
+    },
+    cleanup: () => {
+      unsubscribe?.();
+      unsubscribe = null;
+      logStore.clear();
+      initialized = false;
+    },
+    subscribe: (listener: DebugFeatureListener) => logStore.subscribe(listener),
+  };
+}

package/src/utils/createEventChannel.ts

@@ -0,0 +1,22 @@
+export type EventListener<TEvent> = (event: TEvent) => void;
+
+export interface EventChannel<TEvent> {
+  emit: (event: TEvent) => void;
+  subscribe: (listener: EventListener<TEvent>) => () => void;
+}
+
+export function createEventChannel<TEvent>(): EventChannel<TEvent> {
+  const listeners = new Set<EventListener<TEvent>>();
+
+  return {
+    emit: (event) => {
+      listeners.forEach((listener) => listener(event));
+    },
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+  };
+}

package/src/utils/createObservableStore.ts

@@ -0,0 +1,42 @@
+export type StoreListener = () => void;
+
+export interface ObservableStore<T> {
+  getData: () => T[];
+  push: (item: T, maxEntries?: number) => void;
+  clear: () => void;
+  subscribe: (listener: StoreListener) => () => void;
+}
+
+export function createObservableStore<T>(): ObservableStore<T> {
+  let data: T[] = [];
+  const listeners = new Set<StoreListener>();
+
+  const notify = () => {
+    listeners.forEach((listener) => listener());
+  };
+
+  return {
+    getData: () => data,
+    push: (item, maxEntries) => {
+      if (maxEntries && data.length >= maxEntries) {
+        data = [...data.slice(data.length - maxEntries + 1), item];
+      } else {
+        data = [...data, item];
+      }
+      notify();
+    },
+    clear: () => {
+      if (data.length === 0) {
+        return;
+      }
+      data = [];
+      notify();
+    },
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+  };
+}

package/src/utils/layout.ts

@@ -0,0 +1 @@
+export const ICON_SIZE = 52;

package/src/utils/safeStringify.ts

@@ -0,0 +1,25 @@
+/**
+ * Safely stringify a value to JSON, handling circular references
+ * and values that can't be serialized.
+ */
+export function safeStringify(value: unknown, space?: number): string {
+  try {
+    const seen = new WeakSet();
+
+    return JSON.stringify(
+      value,
+      (_, val) => {
+        if (typeof val === 'object' && val !== null) {
+          if (seen.has(val)) {
+            return '[Circular]';
+          }
+          seen.add(val);
+        }
+        return val;
+      },
+      space,
+    );
+  } catch {
+    return String(value);
+  }
+}

package/src/utils/urlRewriterRegistry.ts

@@ -0,0 +1,10 @@
+type UrlRewriter = (url: string) => string;
+
+let current: UrlRewriter | null = null;
+
+export const urlRewriter = {
+  get: (): UrlRewriter | null => current,
+  set: (rewriter: UrlRewriter | null): void => {
+    current = rewriter;
+  },
+};

package/.cursor/rules/react-native.mdc

@@ -1,41 +0,0 @@
----
-description: 
-globs: 
-alwaysApply: false
----
-
-  You are an expert in TypeScript, React Native, Expo, and Mobile App Development.
-  
-  Code Style and Structure:
-  - Write concise, type-safe TypeScript code.
-  - Use functional components and hooks over class components.
-  - Ensure components are modular, reusable, and maintainable.
-  - Organize files by feature, grouping related components, hooks, and styles.
-  
-  Naming Conventions:
-  - Use camelCase for variable and function names (e.g., `isFetchingData`, `handleUserInput`).
-  - Use PascalCase for component names (e.g., `UserProfile`, `ChatScreen`).
-  
-  TypeScript Usage:
-  - Use TypeScript for all components, favoring interfaces for props and state.
-  - Enable strict typing in `tsconfig.json`.
-  - Avoid using `any`; strive for precise types.
-  - Utilize `React.FC` for defining functional components with props.
-  
-  Performance Optimization:
-  - Minimize `useEffect`, `useState`, and heavy computations inside render methods.
-  - Use `React.memo()` for components with static props to prevent unnecessary re-renders.
-  - Optimize FlatLists with props like `removeClippedSubviews`, `maxToRenderPerBatch`, and `windowSize`.
-  - Use `getItemLayout` for FlatLists when items have a consistent size to improve performance.
-  - Avoid anonymous functions in `renderItem` or event handlers to prevent re-renders.
-  
-  UI and Styling:
-  - Use consistent styling, either through `StyleSheet.create()` or Styled Components.
-  - Ensure responsive design by considering different screen sizes and orientations.
-  - Optimize image handling using libraries designed for React Native
-  
-  Best Practices:
-  - Follow React Native's threading model to ensure smooth UI performance.
-  - Utilize CodePush Build and Updates for continuous deployment and Over-The-Air (OTA) updates.
-  - Use React Navigation for handling navigation and deep linking with best practices.
-      

package/index.js

@@ -1,41 +0,0 @@
-/**
- * React Native Debug Toolkit
- * A comprehensive debugging toolkit for React Native
- */
-import DebugToolKit from './lib/DebugToolKit'
-import { initializeDebugToolkit, isDebugMode } from './lib'
-
-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'
-import { createTrackFeature, addTrackLog } from './lib/features/TrackFeature'
-
-// Function to clear all logs and close the panel
-const clearAll = () => {
-  const instance = DebugToolKit.instance;
-  if (instance && typeof instance.clearAll === 'function') {
-    instance.clearAll();
-  }
-};
-
-export {
-  DebugToolKit,
-  initializeDebugToolkit,
-  createNetworkFeature,
-  createPerformanceFeature,
-  createConsoleLogFeature,
-  createZustandLogFeature,
-  addZustandLog,
-  createNavigationLogFeature,
-  addNavigationLog,
-  addTrackLog,
-  useNavigationLogger,
-  isDebugMode,
-  clearAll,
-  createTrackFeature
-}
-
-export default DebugToolKit

package/ios/BuildTypeModule.h

@@ -1,9 +0,0 @@
-#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

@@ -1,42 +0,0 @@
-#import "BuildTypeModule.h"
-
-@implementation BuildTypeModule
-
-RCT_EXPORT_MODULE();
-
-+ (BOOL)requiresMainQueueSetup
-{
-  return NO;
-}
-
-- (NSDictionary *)constantsToExport
-{
-#ifdef DEBUG
-  NSString *buildType = @"debug";
-#else
-  NSString *buildType = @"release";
-#endif
-  
-  return @{ @"buildType": buildType };
-}
-
-RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(getBuildTypeSync)
-{
-#ifdef DEBUG
-  return @"debug";
-#else
-  return @"release";
-#endif
-}
-
-RCT_EXPORT_METHOD(getBuildType:(RCTPromiseResolveBlock)resolve
-                  rejecter:(RCTPromiseRejectBlock)reject)
-{
-#ifdef DEBUG
-  resolve(@"debug");
-#else
-  resolve(@"release");
-#endif
-}
-
-@end 

package/ios/RNDebugLibs.h

@@ -1,10 +0,0 @@
-#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

@@ -1,79 +0,0 @@
-#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