react-native-debug-toolkit 2.0.0 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-debug-toolkit",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "description": "A dev-only floating debug panel for React Native with network, console, Zustand, navigation, and event logs",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -17,6 +17,7 @@
   "scripts": {
     "typecheck": "tsc --noEmit",
     "typescript": "npm run typecheck",
+    "test": "jest",
     "build": "bob build",
     "lint": "eslint \"src/**/*.{js,ts,tsx}\"",
     "prepare": "bob build"
@@ -52,12 +53,15 @@
   "devDependencies": {
     "@react-native/babel-preset": "^0.76.0",
     "@react-native/eslint-config": "^0.76.0",
+    "@types/jest": "^30.0.0",
     "@types/react": "^18.3.1",
     "eslint": "^8.57.0",
+    "jest": "^30.3.0",
     "prettier": "^3.3.0",
     "react": "^18.3.1",
     "react-native": "^0.76.6",
     "react-native-builder-bob": "^0.30.0",
+    "ts-jest": "^29.4.9",
     "typescript": "^5.5.0"
   },
   "react-native": "src/index.ts",

package/src/core/DebugToolkit.tsx

@@ -1,174 +1,176 @@
-import type { DebugFeature } from '../types';
-
-export class DebugToolkit {
-  private static instance: DebugToolkit | null = null;
-  private _features: DebugFeature[] = [];
-  private _enabled: boolean;
-  private _panelVisible: boolean = false;
-  private renderCallback: (() => void) | null = null;
-
-  private constructor(enabled = true) {
-    this._enabled = enabled;
-  }
-
-  static getInstance(enabled = true): DebugToolkit {
-    if (!DebugToolkit.instance) {
-      DebugToolkit.instance = new DebugToolkit(enabled);
-    } else {
-      DebugToolkit.instance._enabled = enabled;
-    }
-    return DebugToolkit.instance;
-  }
+import type { AnyDebugFeature } from '../types';
 
-  get features(): DebugFeature[] {
-    return [...this._features];
-  }
+type Listener = () => void;
 
-  get enabled(): boolean {
-    return this._enabled;
-  }
-
-  get panelVisible(): boolean {
-    return this._panelVisible;
-  }
-
-  registerRenderCallback(cb: () => void): void {
-    if (this.renderCallback) {
-      console.warn(
-        '[DebugToolkit] A render callback is already registered. Overwriting. ' +
-          'Make sure only one <DebugToolkitProvider> is mounted at a time.',
-      );
-    }
-    this.renderCallback = cb;
-  }
+const listeners = new Set<Listener>();
+let _features: AnyDebugFeature[] = [];
+let _launcherVisible = false;
+let _panelOpen = false;
+let _enabled = true;
+
+function notify(): void {
+  listeners.forEach((l) => l());
+}
 
-  unregisterRenderCallback(): void {
-    this.renderCallback = null;
-  }
+function setupFeature(feature: AnyDebugFeature): void {
+  feature.setup?.();
+}
 
-  setEnabled(enabled: boolean): void {
-    if (this._enabled === enabled) {
-      return;
-    }
+function cleanupFeature(feature: AnyDebugFeature): void {
+  feature.cleanup?.();
+}
+
+export const DebugToolkit = {
+  subscribe(listener: Listener): () => void {
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+    };
+  },
+
+  get features(): AnyDebugFeature[] {
+    return [..._features];
+  },
+
+  get enabled(): boolean {
+    return _enabled;
+  },
 
-    this._enabled = enabled;
+  get launcherVisible(): boolean {
+    return _launcherVisible;
+  },
 
+  setEnabled(enabled: boolean): void {
+    if (_enabled === enabled) return;
+    _enabled = enabled;
     if (!enabled) {
-      this.hidePanel();
-      this._features.forEach((feature) => feature.cleanup?.());
-      this._features = [];
+      _launcherVisible = false;
+      _features.forEach(cleanupFeature);
+      _features = [];
     }
-  }
+    notify();
+  },
+
+  replaceFeatures(features: AnyDebugFeature[]): void {
+    if (!_enabled) return;
+    const next = features.filter(
+      (f, i, arr) =>
+        f && typeof f.name === 'string' && arr.findIndex((item) => item.name === f.name) === i,
+    );
+    const prevMap = new Map(_features.map((f) => [f.name, f]));
+    const nextMap = new Map(next.map((f) => [f.name, f]));
+
+    _features.forEach((f) => {
+      if (!nextMap.get(f.name) || nextMap.get(f.name) !== f) cleanupFeature(f);
+    });
+    next.forEach((f) => {
+      if (!prevMap.get(f.name) || prevMap.get(f.name) !== f) setupFeature(f);
+    });
 
-  private updatePanel(): void {
-    this.renderCallback?.();
-  }
+    _features = next;
+    notify();
+  },
 
-  addFeature(feature: DebugFeature): void {
-    if (!this._enabled) {
+  addFeature(feature: AnyDebugFeature): void {
+    if (!_enabled || !feature || typeof feature.name !== 'string') {
       return;
     }
-    if (feature && typeof feature.name === 'string') {
-      const existingIndex = this._features.findIndex((item) => item.name === feature.name);
-
-      if (existingIndex >= 0) {
-        const currentFeature = this._features[existingIndex]!;
-        if (currentFeature === feature) {
-          return;
-        }
-
-        currentFeature.cleanup?.();
-        this._features = this._features.map((item, index) =>
-          index === existingIndex ? feature : item,
-        );
-      } else {
-        this._features = [...this._features, feature];
+
+    const existingIndex = _features.findIndex((f) => f.name === feature.name);
+    if (existingIndex >= 0) {
+      const existing = _features[existingIndex]!;
+      if (existing === feature) {
+        return;
       }
 
-      feature.setup?.();
-      this.updatePanel();
+      cleanupFeature(existing);
+      setupFeature(feature);
+      _features = [
+        ..._features.slice(0, existingIndex),
+        feature,
+        ..._features.slice(existingIndex + 1),
+      ];
+      notify();
+      return;
     }
-  }
+
+    setupFeature(feature);
+    _features = [..._features, feature];
+    notify();
+  },
 
   removeFeature(name: string): void {
-    const idx = this._features.findIndex((f) => f.name === name);
-    if (idx >= 0) {
-      this._features[idx]!.cleanup?.();
-      this._features = this._features.filter((feature) => feature.name !== name);
-      this.updatePanel();
+    if (!_enabled) {
+      return;
     }
-  }
 
-  replaceFeatures(features: DebugFeature[]): void {
-    if (!this._enabled) {
+    const feature = _features.find((f) => f.name === name);
+    if (!feature) {
       return;
     }
 
-    const nextFeatures = features.filter(
-      (feature, index, array) =>
-        feature &&
-        typeof feature.name === 'string' &&
-        array.findIndex((item) => item.name === feature.name) === index,
-    );
-    const previousByName = new Map(this._features.map((feature) => [feature.name, feature]));
-    const nextByName = new Map(nextFeatures.map((feature) => [feature.name, feature]));
-
-    this._features.forEach((feature) => {
-      const nextFeature = nextByName.get(feature.name);
-      if (!nextFeature || nextFeature !== feature) {
-        feature.cleanup?.();
-      }
-    });
-
-    nextFeatures.forEach((feature) => {
-      const currentFeature = previousByName.get(feature.name);
-      if (!currentFeature || currentFeature !== feature) {
-        feature.setup?.();
-      }
-    });
-
-    this._features = nextFeatures;
-    this.updatePanel();
-  }
+    cleanupFeature(feature);
+    _features = _features.filter((f) => f.name !== name);
+    if (_features.length === 0) {
+      _launcherVisible = false;
+    }
+    notify();
+  },
 
   reset(): void {
-    this.hidePanel();
-    this._features.forEach((feature) => feature.cleanup?.());
-    this._features = [];
-  }
+    _launcherVisible = false;
+    _panelOpen = false;
+    _features.forEach(cleanupFeature);
+    _features = [];
+    notify();
+  },
 
   hasFeatures(): boolean {
-    return this._features.length > 0;
-  }
-
-  showPanel(): void {
-    if (!this._enabled) {
-      return;
+    return _features.length > 0;
+  },
+
+  get panelOpen(): boolean {
+    return _panelOpen;
+  },
+
+  openPanel(): void {
+    if (!_enabled || _panelOpen) return;
+    _panelOpen = true;
+    notify();
+  },
+
+  closePanel(): void {
+    if (!_panelOpen) return;
+    _panelOpen = false;
+    notify();
+  },
+
+  togglePanel(): void {
+    if (_panelOpen) {
+      DebugToolkit.closePanel();
+    } else {
+      DebugToolkit.openPanel();
     }
-    this._panelVisible = true;
-    this.updatePanel();
-  }
+  },
+
+  showLauncher(): void {
+    if (!_enabled) return;
+    _launcherVisible = true;
+    notify();
+  },
 
-  hidePanel(): void {
-    this._panelVisible = false;
-    this.updatePanel();
-  }
+  hideLauncher(): void {
+    _launcherVisible = false;
+    notify();
+  },
 
   clearAll(): void {
-    this._features.forEach((f) => {
-      if (f.clear) {
-        f.clear();
-      } else {
-        f.cleanup?.();
-        f.setup?.();
-      }
-    });
-    this.updatePanel();
-  }
+    _features.forEach((f) => f.clear?.());
+    notify();
+  },
 
   destroy(): void {
-    this.reset();
-    this.unregisterRenderCallback();
-    DebugToolkit.instance = null;
-  }
-}
+    DebugToolkit.reset();
+    listeners.clear();
+  },
+};

package/src/core/DebugToolkitProvider.tsx

@@ -1,23 +1,21 @@
-import React, { createContext, useContext, useEffect, useState, type ReactNode } from 'react';
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState, type ReactNode } from 'react';
 import { DebugToolkit } from './DebugToolkit';
-import { FloatPanelView } from '../components/FloatPanelView';
-import type { DebugFeature } from '../types';
+import { FloatPanelView } from '../ui/panel/FloatPanelView';
+import type { AnyDebugFeature } from '../types';
 
 interface ToolkitContextValue {
-  features: DebugFeature[];
-  showPanel: () => void;
-  hidePanel: () => void;
-  addFeature: (feature: DebugFeature) => void;
-  removeFeature: (name: string) => void;
+  features: AnyDebugFeature[];
+  showLauncher: () => void;
+  hideLauncher: () => void;
   clearAll: () => void;
-  destroy: () => void;
 }
 
 const ToolkitContext = createContext<ToolkitContextValue | null>(null);
 
 interface ProviderState {
-  panelVisible: boolean;
-  features: DebugFeature[];
+  launcherVisible: boolean;
+  panelOpen: boolean;
+  features: AnyDebugFeature[];
 }
 
 interface DebugToolkitProviderProps {
@@ -25,52 +23,55 @@ interface DebugToolkitProviderProps {
 }
 
 export function DebugToolkitProvider({ children }: DebugToolkitProviderProps) {
-  const [state, setState] = useState<ProviderState>(() => {
-    const toolkit = DebugToolkit.getInstance();
-    return {
-      panelVisible: toolkit.panelVisible,
-      features: toolkit.features,
-    };
-  });
+  const [state, setState] = useState<ProviderState>(() => ({
+    launcherVisible: DebugToolkit.launcherVisible,
+    panelOpen: DebugToolkit.panelOpen,
+    features: DebugToolkit.features,
+  }));
 
   useEffect(() => {
-    const toolkit = DebugToolkit.getInstance();
+    // Sync current state — initializeDebugToolkit() may have been called
+    // in a child useEffect that runs before this parent effect subscribes.
+    setState({
+      launcherVisible: DebugToolkit.launcherVisible,
+      panelOpen: DebugToolkit.panelOpen,
+      features: DebugToolkit.features,
+    });
 
-    const syncState = () => {
+    const unsubscribe = DebugToolkit.subscribe(() => {
       setState({
-        panelVisible: toolkit.panelVisible,
-        features: toolkit.features,
+        launcherVisible: DebugToolkit.launcherVisible,
+        panelOpen: DebugToolkit.panelOpen,
+        features: DebugToolkit.features,
       });
-    };
-
-    toolkit.registerRenderCallback(syncState);
-    syncState();
-
-    return () => {
-      toolkit.unregisterRenderCallback();
-    };
+    });
+    return unsubscribe;
   }, []);
 
-  const toolkit = DebugToolkit.getInstance();
+  const showLauncher = useCallback(() => { DebugToolkit.showLauncher(); }, []);
+  const hideLauncher = useCallback(() => { DebugToolkit.hideLauncher(); }, []);
+  const clearAll = useCallback(() => { DebugToolkit.clearAll(); }, []);
 
-  const contextValue: ToolkitContextValue = {
-    features: state.features,
-    showPanel: toolkit.showPanel.bind(toolkit),
-    hidePanel: toolkit.hidePanel.bind(toolkit),
-    addFeature: toolkit.addFeature.bind(toolkit),
-    removeFeature: toolkit.removeFeature.bind(toolkit),
-    clearAll: toolkit.clearAll.bind(toolkit),
-    destroy: toolkit.destroy.bind(toolkit),
-  };
+  const contextValue = useMemo<ToolkitContextValue>(
+    () => ({
+      features: state.features,
+      showLauncher,
+      hideLauncher,
+      clearAll,
+    }),
+    [state.features, showLauncher, hideLauncher, clearAll],
+  );
 
   return (
     <ToolkitContext.Provider value={contextValue}>
       {children}
-      {state.panelVisible && (
+      {state.launcherVisible && (
         <FloatPanelView
           features={state.features}
-          onClose={() => toolkit.hidePanel()}
-          onClearAll={() => toolkit.clearAll()}
+          panelOpen={state.panelOpen}
+          onOpenPanel={() => DebugToolkit.openPanel()}
+          onClosePanel={() => DebugToolkit.closePanel()}
+          onClearAll={() => DebugToolkit.clearAll()}
         />
       )}
     </ToolkitContext.Provider>

package/src/core/initialize.ts

@@ -0,0 +1,122 @@
+import { DebugToolkit } from './DebugToolkit';
+import { createNetworkFeature } from '../features/network';
+import type { NetworkFeatureConfig } from '../features/network';
+import { createConsoleLogFeature } from '../features/console';
+import type { ConsoleFeatureConfig } from '../features/console';
+import { createZustandLogFeature } from '../features/zustand';
+import type { ZustandFeatureConfig } from '../features/zustand';
+import { createNavigationLogFeature } from '../features/navigation';
+import type { NavigationFeatureConfig } from '../features/navigation';
+import { createTrackFeature } from '../features/track';
+import type { TrackFeatureConfig } from '../features/track';
+import { createEnvironmentFeature } from '../features/environment';
+import { createClipboardFeature } from '../features/clipboard';
+import type { AnyDebugFeature, BuiltInFeatureName } from '../types';
+
+const isDebugMode = __DEV__;
+
+/** Feature-specific configuration map */
+export interface FeatureConfigs {
+  network?: boolean | NetworkFeatureConfig;
+  console?: boolean | ConsoleFeatureConfig;
+  zustand?: boolean | ZustandFeatureConfig;
+  navigation?: boolean | NavigationFeatureConfig;
+  track?: boolean | TrackFeatureConfig;
+  environment?: Parameters<typeof createEnvironmentFeature>[0];
+  clipboard?: boolean;
+}
+
+export interface InitializeOptions {
+  features?: FeatureConfigs;
+  enabled?: boolean;
+}
+
+/** Registry mapping feature names to creator functions */
+// Config param requires `any` — each factory accepts a different config type.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const featureRegistry: Record<BuiltInFeatureName, (config?: any) => AnyDebugFeature> = {
+  network: createNetworkFeature,
+  console: createConsoleLogFeature,
+  zustand: createZustandLogFeature,
+  navigation: createNavigationLogFeature,
+  track: createTrackFeature,
+  environment: createEnvironmentFeature,
+  clipboard: createClipboardFeature,
+};
+
+const DEFAULT_FEATURES: BuiltInFeatureName[] = [
+  'network',
+  'console',
+  'navigation',
+  'zustand',
+  'track',
+  'clipboard',
+];
+
+function resolveFeatureConfigs(configs: FeatureConfigs): AnyDebugFeature[] {
+  const features: AnyDebugFeature[] = [];
+  const entries = Object.entries(configs) as [BuiltInFeatureName, unknown][];
+
+  for (const [name, config] of entries) {
+    if (config === false) continue;
+
+    const creator = featureRegistry[name];
+    if (!creator) {
+      console.warn(`[DebugToolkit] Unknown feature: "${name}"`);
+      continue;
+    }
+
+    if (config === true || config === undefined) {
+      features.push(creator());
+    } else if (typeof config === 'object') {
+      features.push(creator(config as Record<string, unknown>));
+    }
+  }
+
+  return features;
+}
+
+function resolveDefaultFeatures(): AnyDebugFeature[] {
+  return DEFAULT_FEATURES.map((name) => featureRegistry[name]!());
+}
+
+/**
+ * Initialize the debug toolkit.
+ *
+ * @example
+ * initializeDebugToolkit({
+ *   features: { network: true, console: true },
+ *   enabled: true,
+ * });
+ */
+export function initializeDebugToolkit(
+  options?: InitializeOptions,
+): typeof DebugToolkit {
+  const enabled = options?.enabled ?? isDebugMode;
+
+  const resolvedFeatures = options?.features
+    ? resolveFeatureConfigs(options.features)
+    : resolveDefaultFeatures();
+
+  try {
+    DebugToolkit.setEnabled(enabled);
+
+    if (!enabled) {
+      DebugToolkit.reset();
+      return DebugToolkit;
+    }
+
+    DebugToolkit.replaceFeatures(resolvedFeatures);
+
+    if (DebugToolkit.hasFeatures()) {
+      DebugToolkit.showLauncher();
+    } else {
+      DebugToolkit.hideLauncher();
+    }
+
+    return DebugToolkit;
+  } catch (error) {
+    console.error('[DebugToolkit] Initialization failed:', error);
+    return DebugToolkit;
+  }
+}

package/src/{components → features/clipboard}/ClipboardTab.tsx

@@ -1,10 +1,10 @@
 import React, { useState, useCallback } from 'react';
 import { View, Text, TextInput, TouchableOpacity, StyleSheet } from 'react-native';
-import { Colors, Spacing, Radius } from '../utils/constants';
-import { copyToComputer } from '../utils/copyToComputer';
-import type { DebugFeatureRenderProps } from '../types';
+import { Colors } from '../../ui/theme/colors';
+import { copyToComputer } from '../../utils/copyToComputer';
+import type { DebugFeatureRenderProps } from '../../types';
 
-export const ClipboardTab: React.FC<DebugFeatureRenderProps<void>> = () => {
+export const ClipboardTab: React.FC<DebugFeatureRenderProps<null>> = React.memo(() => {
   const [text, setText] = useState('');
   const [feedback, setFeedback] = useState<string | null>(null);
 
@@ -41,25 +41,25 @@ export const ClipboardTab: React.FC<DebugFeatureRenderProps<void>> = () => {
       </View>
     </View>
   );
-};
+});
 
 const s = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: Colors.background,
-    padding: Spacing.md,
+    padding: 12,
   },
   input: {
     flex: 1,
     backgroundColor: Colors.surface,
-    borderRadius: Radius.md,
-    padding: Spacing.md,
+    borderRadius: 12,
+    padding: 12,
     fontSize: 14,
     color: Colors.text,
     lineHeight: 20,
   },
   footer: {
-    paddingTop: Spacing.sm,
+    paddingTop: 8,
     minHeight: 36,
     alignItems: 'flex-end',
   },
@@ -71,7 +71,7 @@ const s = StyleSheet.create({
     backgroundColor: Colors.background,
     paddingHorizontal: 16,
     paddingVertical: 6,
-    borderRadius: Radius.sm,
+    borderRadius: 8,
   },
   copyBtnText: {
     fontSize: 13,

package/src/features/clipboard/index.ts

@@ -0,0 +1,15 @@
+import { ClipboardTab } from './ClipboardTab';
+import type { DebugFeature } from '../../types';
+
+/**
+ * Clipboard feature — all logic lives in ClipboardTab.
+ * Data flow is user-driven (TextInput), not event-based.
+ */
+export const createClipboardFeature = (): DebugFeature<null> => ({
+  name: 'clipboard',
+  label: 'Clipboard',
+  renderContent: ClipboardTab,
+  setup() {},
+  getSnapshot: () => null,
+  cleanup() {},
+});