react-native-debug-toolkit 0.6.4 → 2.1.0

package/src/components/shared/LogListScreen.tsx

@@ -0,0 +1,164 @@
+import React, { useMemo, useState } from 'react';
+import {
+  View,
+  Text,
+  FlatList,
+  TouchableOpacity,
+  StyleSheet,
+  Animated,
+} from 'react-native';
+import { Colors } from '../../utils/colors';
+import { useSlideDetailAnimation } from '../../hooks/useSlideDetailAnimation';
+
+interface LogListItem {
+  id: string;
+}
+
+interface LogListScreenProps<T extends LogListItem> {
+  data: T[];
+  renderRow: (item: T) => React.ReactElement;
+  renderListHeader?: () => React.ReactElement;
+  renderDetailHeader?: (item: T) => React.ReactNode;
+  renderDetailBody: (item: T) => React.ReactElement;
+  emptyText: string;
+  reversed?: boolean;
+}
+
+/**
+ * Shared list→detail screen with slide animation.
+ * Handles: selected state, FlatList, empty state, back button, push navigation.
+ * Each tab provides renderRow, renderDetailBody, and optional renderDetailHeader.
+ */
+export function LogListScreen<T extends LogListItem>({
+  data,
+  renderRow,
+  renderListHeader,
+  renderDetailHeader,
+  renderDetailBody,
+  emptyText,
+  reversed = true,
+}: LogListScreenProps<T>) {
+  const [selected, setSelected] = useState<T | null>(null);
+  const { detailTranslateX, listTranslateX, listOpacity } = useSlideDetailAnimation(selected);
+
+  const displayData = useMemo(
+    () => (reversed ? [...data].reverse() : data),
+    [data, reversed],
+  );
+
+  return (
+    <View style={styles.container}>
+      {/* List */}
+      <Animated.View
+        style={[
+          styles.listWrap,
+          selected
+            ? { opacity: listOpacity, transform: [{ translateX: listTranslateX }] }
+            : null,
+        ]}
+      >
+        {renderListHeader?.()}
+        {displayData.length === 0 ? (
+          <View style={styles.emptyContainer}>
+            <Text style={styles.emptyIcon}>~</Text>
+            <Text style={styles.empty}>{emptyText}</Text>
+          </View>
+        ) : (
+          <FlatList
+            data={displayData}
+            renderItem={({ item }) => (
+              <TouchableOpacity
+                style={styles.card}
+                onPress={() => setSelected(item)}
+                activeOpacity={0.6}
+              >
+                {renderRow(item)}
+              </TouchableOpacity>
+            )}
+            keyExtractor={(item) => item.id}
+            contentContainerStyle={styles.listContent}
+            initialNumToRender={20}
+            maxToRenderPerBatch={10}
+            windowSize={5}
+            removeClippedSubviews={true}
+          />
+        )}
+      </Animated.View>
+
+      {/* Detail */}
+      {selected && (
+        <Animated.View
+          style={[styles.detailOverlay, { transform: [{ translateX: detailTranslateX }] }]}
+        >
+          <View style={styles.detailWrap}>
+            <View style={styles.detailHeader}>
+              <TouchableOpacity
+                onPress={() => setSelected(null)}
+                style={styles.backBtn}
+                activeOpacity={0.6}
+              >
+                <Text style={styles.backIcon}>‹</Text>
+                <Text style={styles.backText}>Back</Text>
+              </TouchableOpacity>
+              {renderDetailHeader?.(selected)}
+            </View>
+            {renderDetailBody(selected)}
+          </View>
+        </Animated.View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: Colors.background },
+  listWrap: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 },
+  listContent: { padding: 12 },
+  emptyContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  emptyIcon: { fontSize: 40, color: Colors.textLight, marginBottom: 4 },
+  empty: { textAlign: 'center', color: Colors.textLight, fontSize: 14 },
+  card: {
+    backgroundColor: Colors.surface,
+    borderRadius: 12,
+    marginBottom: 8,
+    overflow: 'hidden',
+  },
+  detailOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: Colors.background,
+  },
+  detailWrap: { flex: 1, backgroundColor: Colors.background },
+  detailHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+    paddingVertical: 10,
+    backgroundColor: Colors.surface,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: Colors.border,
+    gap: 8,
+  },
+  backBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 6,
+    paddingVertical: 4,
+    borderRadius: 8,
+  },
+  backIcon: {
+    fontSize: 24,
+    fontWeight: '300',
+    color: Colors.primary,
+    marginTop: -2,
+    marginRight: 2,
+  },
+  backText: {
+    fontSize: 16,
+    color: Colors.primary,
+    fontWeight: '500',
+  },
+});

package/src/core/DebugToolkit.tsx

@@ -0,0 +1,150 @@
+import type { AnyDebugFeature } from '../types';
+
+type Listener = () => void;
+
+const listeners = new Set<Listener>();
+let _features: AnyDebugFeature[] = [];
+let _panelVisible = false;
+let _enabled = true;
+
+function notify(): void {
+  listeners.forEach((l) => l());
+}
+
+function setupFeature(feature: AnyDebugFeature): void {
+  feature.setup?.();
+}
+
+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;
+  },
+
+  get panelVisible(): boolean {
+    return _panelVisible;
+  },
+
+  setEnabled(enabled: boolean): void {
+    if (_enabled === enabled) return;
+    _enabled = enabled;
+    if (!enabled) {
+      _panelVisible = 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);
+    });
+
+    _features = next;
+    notify();
+  },
+
+  addFeature(feature: AnyDebugFeature): void {
+    if (!_enabled || !feature || typeof feature.name !== 'string') {
+      return;
+    }
+
+    const existingIndex = _features.findIndex((f) => f.name === feature.name);
+    if (existingIndex >= 0) {
+      const existing = _features[existingIndex]!;
+      if (existing === feature) {
+        return;
+      }
+
+      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 {
+    if (!_enabled) {
+      return;
+    }
+
+    const feature = _features.find((f) => f.name === name);
+    if (!feature) {
+      return;
+    }
+
+    cleanupFeature(feature);
+    _features = _features.filter((f) => f.name !== name);
+    if (_features.length === 0) {
+      _panelVisible = false;
+    }
+    notify();
+  },
+
+  reset(): void {
+    _panelVisible = false;
+    _features.forEach(cleanupFeature);
+    _features = [];
+    notify();
+  },
+
+  hasFeatures(): boolean {
+    return _features.length > 0;
+  },
+
+  showPanel(): void {
+    if (!_enabled) return;
+    _panelVisible = true;
+    notify();
+  },
+
+  hidePanel(): void {
+    _panelVisible = false;
+    notify();
+  },
+
+  clearAll(): void {
+    _features.forEach((f) => f.clear?.());
+    notify();
+  },
+
+  destroy(): void {
+    this.reset();
+    listeners.clear();
+  },
+};

package/src/core/DebugToolkitProvider.tsx

@@ -0,0 +1,83 @@
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState, type ReactNode } from 'react';
+import { DebugToolkit } from './DebugToolkit';
+import { FloatPanelView } from '../components/FloatPanelView';
+import type { AnyDebugFeature } from '../types';
+
+interface ToolkitContextValue {
+  features: AnyDebugFeature[];
+  showPanel: () => void;
+  hidePanel: () => void;
+  clearAll: () => void;
+}
+
+const ToolkitContext = createContext<ToolkitContextValue | null>(null);
+
+interface ProviderState {
+  panelVisible: boolean;
+  features: AnyDebugFeature[];
+}
+
+interface DebugToolkitProviderProps {
+  children: ReactNode;
+}
+
+export function DebugToolkitProvider({ children }: DebugToolkitProviderProps) {
+  const [state, setState] = useState<ProviderState>(() => ({
+    panelVisible: DebugToolkit.panelVisible,
+    features: DebugToolkit.features,
+  }));
+
+  useEffect(() => {
+    // Sync current state — initializeDebugToolkit() may have been called
+    // in a child useEffect that runs before this parent effect subscribes.
+    setState({
+      panelVisible: DebugToolkit.panelVisible,
+      features: DebugToolkit.features,
+    });
+
+    const unsubscribe = DebugToolkit.subscribe(() => {
+      setState({
+        panelVisible: DebugToolkit.panelVisible,
+        features: DebugToolkit.features,
+      });
+    });
+    return unsubscribe;
+  }, []);
+
+  const showPanel = useCallback(() => { DebugToolkit.showPanel(); }, []);
+  const hidePanel = useCallback(() => { DebugToolkit.hidePanel(); }, []);
+  const clearAll = useCallback(() => { DebugToolkit.clearAll(); }, []);
+
+  const contextValue = useMemo<ToolkitContextValue>(
+    () => ({
+      features: state.features,
+      showPanel,
+      hidePanel,
+      clearAll,
+    }),
+    [state.features, showPanel, hidePanel, clearAll],
+  );
+
+  return (
+    <ToolkitContext.Provider value={contextValue}>
+      {children}
+      {state.panelVisible && (
+        <FloatPanelView
+          features={state.features}
+          onClearAll={() => DebugToolkit.clearAll()}
+        />
+      )}
+    </ToolkitContext.Provider>
+  );
+}
+
+export function useDebugToolkit(): ToolkitContextValue {
+  const context = useContext(ToolkitContext);
+  if (!context) {
+    throw new Error(
+      'useDebugToolkit must be used within a <DebugToolkitProvider>. ' +
+        'Wrap your app with <DebugToolkitProvider>.',
+    );
+  }
+  return context;
+}

package/src/features/ClipboardFeature.ts

@@ -0,0 +1,15 @@
+import { ClipboardTab } from '../components/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<void> => ({
+  name: 'clipboard',
+  label: 'Clipboard',
+  renderContent: ClipboardTab,
+  setup() {},
+  getData: () => [],
+  cleanup() {},
+});

package/src/features/ConsoleLogFeature.ts

@@ -0,0 +1,116 @@
+import { ConsoleLogTab } from '../components/ConsoleLogTab';
+import type { ConsoleLogEntry, DebugFeature } from '../types';
+import { createObservableStore } from '../utils/createObservableStore';
+
+const LEVELS: ConsoleLogEntry['level'][] = ['log', 'info', 'warn', 'error'];
+
+// ─── Console capture manager (encapsulated mutable state) ──
+
+const consoleCapture = (() => {
+  const originalMethods: Partial<Record<ConsoleLogEntry['level'], (...args: unknown[]) => void>> = {};
+  let refCount = 0;
+
+  function stop(): void {
+    refCount = Math.max(0, refCount - 1);
+    if (refCount > 0) return;
+
+    LEVELS.forEach((level) => {
+      const original = originalMethods[level];
+      if (original) {
+        console[level] = original;
+        delete originalMethods[level];
+      }
+    });
+  }
+
+  function isIntercepted(): boolean {
+    return LEVELS.some((level) => originalMethods[level] !== undefined);
+  }
+
+  function start(emit: (entry: ConsoleLogEntry) => void): () => void {
+    refCount += 1;
+    if (isIntercepted()) {
+      return () => { stop(); };
+    }
+
+    LEVELS.forEach((level) => {
+      originalMethods[level] = console[level];
+
+      console[level] = (...args: unknown[]) => {
+        originalMethods[level]?.apply(console, args);
+        if (level === 'log' && typeof args[0] === 'string' && args[0].startsWith('[DebugToolkit:Copy]')) {
+          return;
+        }
+        emit({
+          id: '',
+          timestamp: Date.now(),
+          level,
+          data: args,
+        });
+      };
+    });
+
+    return () => { stop(); };
+  }
+
+  return {
+    start,
+    reset() {
+      LEVELS.forEach((level) => {
+        const original = originalMethods[level];
+        if (original) {
+          console[level] = original;
+          delete originalMethods[level];
+        }
+      });
+      refCount = 0;
+    },
+  };
+})();
+
+// ─── Feature factory ──────────────────────────────────
+
+const DEFAULT_MAX_LOGS = 200;
+
+export interface ConsoleFeatureConfig {
+  /** Maximum number of console logs to keep (default: 200) */
+  maxLogs?: number;
+}
+
+export const createConsoleLogFeature = (config?: ConsoleFeatureConfig): DebugFeature<ConsoleLogEntry> => {
+  const maxLogs = config?.maxLogs ?? DEFAULT_MAX_LOGS;
+  const logStore = createObservableStore<ConsoleLogEntry>();
+  let nextId = 0;
+  let initialized = false;
+  let stopCapture: (() => void) | null = null;
+
+  return {
+    name: 'console',
+    label: 'Console',
+    renderContent: ConsoleLogTab,
+    setup: () => {
+      if (initialized) return;
+
+      stopCapture = consoleCapture.start((entry) => {
+        logStore.push({ ...entry, id: String(nextId++) }, maxLogs);
+      });
+      initialized = true;
+    },
+    getData: () => logStore.getData(),
+    clear: () => { logStore.clear(); },
+    cleanup: () => {
+      if (!initialized) return;
+
+      stopCapture?.();
+      stopCapture = null;
+      logStore.clear();
+      initialized = false;
+    },
+    subscribe: (listener) => logStore.subscribe(listener),
+  };
+};
+
+/** Reset module-level state for testing */
+export function _resetConsoleForTesting(): void {
+  consoleCapture.reset();
+}

package/src/features/EnvironmentFeature.ts

@@ -0,0 +1,186 @@
+import { EnvironmentTab } from '../components/EnvironmentTab';
+import type { DebugFeature, EnvironmentConfig, EnvironmentState } from '../types';
+import { createObservableStore } from '../utils/createObservableStore';
+import { urlRewriter } from '../utils/urlRewriterRegistry';
+
+// Lazy AsyncStorage loader
+type AsyncStorageModule = {
+  getItem: (key: string) => Promise<string | null>;
+  setItem: (key: string, value: string) => Promise<void>;
+};
+
+let asyncStorageModule: AsyncStorageModule | null = null;
+let asyncStorageChecked = false;
+
+function getAsyncStorage(): AsyncStorageModule | null {
+  if (asyncStorageChecked) {
+    return asyncStorageModule;
+  }
+  asyncStorageChecked = true;
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    asyncStorageModule = require('@react-native-async-storage/async-storage').default;
+  } catch {
+    asyncStorageModule = null;
+  }
+  return asyncStorageModule;
+}
+
+const STORAGE_KEY = 'debug_toolkit_env_id';
+
+// Module-level state for synchronous URL rewriting
+let currentHostsMap: Map<string, string> | null = null;
+let activeEnvironmentId: string | null = null;
+
+function buildHostsMap(
+  environments: EnvironmentConfig[],
+  targetId: string | null,
+): Map<string, string> | null {
+  if (!targetId) return null;
+  const target = environments.find((e) => e.id === targetId);
+  if (!target) return null;
+
+  const map = new Map<string, string>();
+  for (const env of environments) {
+    if (env.id !== targetId) {
+      map.set(env.host, target.host);
+    }
+  }
+  return map;
+}
+
+function createUrlRewriter(): (url: string) => string {
+  return (url: string): string => {
+    if (!currentHostsMap) return url;
+
+    try {
+      const parsed = new URL(url);
+      const targetHost = currentHostsMap.get(parsed.host);
+      if (targetHost) {
+        return url.replace(parsed.host, targetHost);
+      }
+    } catch {
+      // Not a valid URL or relative URL — return unchanged
+    }
+
+    return url;
+  };
+}
+
+export interface EnvironmentFeatureAPI extends DebugFeature<EnvironmentState> {
+  registerEnvironments: (environments: EnvironmentConfig[]) => void;
+  switchEnvironment: (environmentId: string | null) => void;
+  getCurrentEnvironmentId: () => string | null;
+}
+
+export const createEnvironmentFeature = (
+  initialEnvironments?: EnvironmentConfig[],
+): EnvironmentFeatureAPI => {
+  const stateStore = createObservableStore<EnvironmentState>();
+  let environments: EnvironmentConfig[] = initialEnvironments ?? [];
+  let initialized = false;
+
+  const getCurrentState = (): EnvironmentState => ({
+    environments,
+    currentEnvironmentId: activeEnvironmentId,
+  });
+
+  const updateStore = () => {
+    stateStore.clear();
+    stateStore.push(getCurrentState());
+  };
+
+  const applyEnvironment = (envId: string | null) => {
+    activeEnvironmentId = envId;
+    currentHostsMap = buildHostsMap(environments, envId);
+
+    if (initialized) {
+      try {
+        if (envId && environments.length > 0) {
+          urlRewriter.set(createUrlRewriter());
+        } else {
+          urlRewriter.set(null);
+        }
+      } catch (err) {
+        if (__DEV__) console.warn('[DebugToolkit] Failed to set URL rewriter:', err);
+      }
+    }
+
+    updateStore();
+  };
+
+  const persistSelection = async (envId: string | null) => {
+    const storage = getAsyncStorage();
+    if (!storage) return;
+    try {
+      await storage.setItem(STORAGE_KEY, envId ?? '');
+    } catch (err) {
+      if (__DEV__) console.warn('[DebugToolkit] Failed to persist environment selection:', err);
+    }
+  };
+
+  const loadPersistedSelection = async () => {
+    const storage = getAsyncStorage();
+    if (!storage) return;
+    try {
+      const stored = await storage.getItem(STORAGE_KEY);
+      if (stored && stored !== '' && environments.some((e) => e.id === stored)) {
+        applyEnvironment(stored);
+      }
+    } catch (err) {
+      if (__DEV__) console.warn('[DebugToolkit] Failed to load persisted environment:', err);
+    }
+  };
+
+  return {
+    name: 'environment',
+    label: 'Environment',
+    renderContent: EnvironmentTab,
+    setup: () => {
+      if (initialized) return;
+
+      updateStore();
+      initialized = true;
+
+      // Install rewriter if an environment is already selected
+      if (activeEnvironmentId && environments.length > 0) {
+        urlRewriter.set(createUrlRewriter());
+      }
+
+      // Async persistence load (will override if a preference exists)
+      loadPersistedSelection();
+    },
+    getData: () => stateStore.getData(),
+    clear: () => {
+      applyEnvironment(null);
+      persistSelection(null);
+    },
+    cleanup: () => {
+      if (!initialized) return;
+      urlRewriter.set(null);
+      activeEnvironmentId = null;
+      currentHostsMap = null;
+      stateStore.clear();
+      initialized = false;
+    },
+    subscribe: (listener) => stateStore.subscribe(listener),
+    registerEnvironments: (envs: EnvironmentConfig[]) => {
+      environments = envs;
+      applyEnvironment(activeEnvironmentId);
+    },
+    switchEnvironment: (envId: string | null) => {
+      applyEnvironment(envId);
+      persistSelection(envId);
+    },
+    getCurrentEnvironmentId: () => activeEnvironmentId,
+    badge: () => {
+      if (!activeEnvironmentId) return null;
+      const env = environments.find((e) => e.id === activeEnvironmentId);
+      if (!env) return null;
+      return {
+        label: env.label.substring(0, 3).toUpperCase(),
+        color: env.color ?? '#FF9500',
+      };
+    },
+  };
+};