react-native-debug-toolkit 0.6.4 → 2.0.0

package/src/components/shared/JsonView.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import { View, Text, ScrollView, StyleSheet } from 'react-native';
+import { safeStringify } from '../../utils/safeStringify';
+
+const MAX_DEPTH = 3;
+const MAX_CHILDREN = 50;
+
+export const JsonView: React.FC<{ data: unknown; maxHeight?: number }> = React.memo(({
+  data,
+  maxHeight,
+}) => {
+  return (
+    <ScrollView
+      style={[s.scroll, maxHeight != null && { maxHeight }]}
+      nestedScrollEnabled
+      bounces={false}
+      showsVerticalScrollIndicator
+    >
+      <View style={s.block}>
+        <Node value={data} depth={0} isLast />
+      </View>
+    </ScrollView>
+  );
+});
+
+const Node: React.FC<{
+  value: unknown;
+  depth: number;
+  isLast: boolean;
+}> = ({ value, depth, isLast }) => {
+  const comma = isLast ? '' : ',';
+
+  if (value === null) return <C color="#F38BA8">{`null${comma}`}</C>;
+  if (value === undefined) return <C color="#F38BA8">{`undefined${comma}`}</C>;
+  if (typeof value === 'boolean') return <C color="#89B4FA">{`${String(value)}${comma}`}</C>;
+  if (typeof value === 'number') return <C color="#CBA6F7">{`${value}${comma}`}</C>;
+  if (typeof value === 'string') {
+    const display = value.length > 500 ? value.slice(0, 500) + '...' : value;
+    return <C color="#A6E3A1" selectable>{`"${display}"${comma}`}</C>;
+  }
+
+  if (depth >= MAX_DEPTH) {
+    const collapsed = truncate(safeStringify(value), 200);
+    return <C color="#6C7086">{`${collapsed}${comma}`}</C>;
+  }
+
+  const entries = Object.entries(value as Record<string, unknown>);
+  const isArray = Array.isArray(value);
+  const open = isArray ? '[' : '{';
+  const close = isArray ? ']' : '}';
+
+  if (entries.length === 0) return <C color="#6C7086">{`${open}${close}${comma}`}</C>;
+
+  const limited = entries.slice(0, MAX_CHILDREN);
+
+  return (
+    <View style={depth > 0 ? s.indent : undefined}>
+      <C color="#6C7086">{open}</C>
+      {limited.map(([key, val], i) => (
+        <View key={key} style={s.line}>
+          <Text style={s.row}>
+            {!isArray && <Text style={s.key}>"{key}"</Text>}
+            {!isArray && <Text style={s.colon}>{': '}</Text>}
+          </Text>
+          <Node
+            value={val}
+            depth={depth + 1}
+            isLast={i === limited.length - 1}
+          />
+        </View>
+      ))}
+      {entries.length > MAX_CHILDREN && (
+        <C color="#6C7086">{`  ... ${entries.length - MAX_CHILDREN} more`}</C>
+      )}
+      <C color="#6C7086">{`${close}${comma}`}</C>
+    </View>
+  );
+};
+
+const C: React.FC<{ color: string; children: string; selectable?: boolean }> = ({
+  color,
+  children,
+  selectable,
+}) => (
+  <Text style={[s.node, { color }]} selectable={selectable}>
+    {children}
+  </Text>
+);
+
+function truncate(str: string, len: number): string {
+  return str.length > len ? str.slice(0, len) + '...' : str;
+}
+
+const s = StyleSheet.create({
+  scroll: {
+    backgroundColor: '#1E1E2E',
+    borderRadius: 12,
+    padding: 12,
+  },
+  block: {},
+  node: {
+    fontFamily: 'Courier',
+    fontSize: 12,
+    lineHeight: 18,
+    color: '#CDD6F4',
+  },
+  indent: {
+    paddingLeft: 16,
+  },
+  line: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  row: {},
+  key: {
+    fontFamily: 'Courier',
+    fontSize: 12,
+    color: '#89DCEB',
+  },
+  colon: {
+    fontFamily: 'Courier',
+    fontSize: 12,
+    color: '#CDD6F4',
+  },
+});

package/src/core/DebugToolkit.tsx

@@ -0,0 +1,174 @@
+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;
+  }
+
+  get features(): DebugFeature[] {
+    return [...this._features];
+  }
+
+  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;
+  }
+
+  unregisterRenderCallback(): void {
+    this.renderCallback = null;
+  }
+
+  setEnabled(enabled: boolean): void {
+    if (this._enabled === enabled) {
+      return;
+    }
+
+    this._enabled = enabled;
+
+    if (!enabled) {
+      this.hidePanel();
+      this._features.forEach((feature) => feature.cleanup?.());
+      this._features = [];
+    }
+  }
+
+  private updatePanel(): void {
+    this.renderCallback?.();
+  }
+
+  addFeature(feature: DebugFeature): void {
+    if (!this._enabled) {
+      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];
+      }
+
+      feature.setup?.();
+      this.updatePanel();
+    }
+  }
+
+  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();
+    }
+  }
+
+  replaceFeatures(features: DebugFeature[]): void {
+    if (!this._enabled) {
+      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();
+  }
+
+  reset(): void {
+    this.hidePanel();
+    this._features.forEach((feature) => feature.cleanup?.());
+    this._features = [];
+  }
+
+  hasFeatures(): boolean {
+    return this._features.length > 0;
+  }
+
+  showPanel(): void {
+    if (!this._enabled) {
+      return;
+    }
+    this._panelVisible = true;
+    this.updatePanel();
+  }
+
+  hidePanel(): void {
+    this._panelVisible = false;
+    this.updatePanel();
+  }
+
+  clearAll(): void {
+    this._features.forEach((f) => {
+      if (f.clear) {
+        f.clear();
+      } else {
+        f.cleanup?.();
+        f.setup?.();
+      }
+    });
+    this.updatePanel();
+  }
+
+  destroy(): void {
+    this.reset();
+    this.unregisterRenderCallback();
+    DebugToolkit.instance = null;
+  }
+}

package/src/core/DebugToolkitProvider.tsx

@@ -0,0 +1,89 @@
+import React, { createContext, useContext, useEffect, useState, type ReactNode } from 'react';
+import { DebugToolkit } from './DebugToolkit';
+import { FloatPanelView } from '../components/FloatPanelView';
+import type { DebugFeature } from '../types';
+
+interface ToolkitContextValue {
+  features: DebugFeature[];
+  showPanel: () => void;
+  hidePanel: () => void;
+  addFeature: (feature: DebugFeature) => void;
+  removeFeature: (name: string) => void;
+  clearAll: () => void;
+  destroy: () => void;
+}
+
+const ToolkitContext = createContext<ToolkitContextValue | null>(null);
+
+interface ProviderState {
+  panelVisible: boolean;
+  features: DebugFeature[];
+}
+
+interface DebugToolkitProviderProps {
+  children: ReactNode;
+}
+
+export function DebugToolkitProvider({ children }: DebugToolkitProviderProps) {
+  const [state, setState] = useState<ProviderState>(() => {
+    const toolkit = DebugToolkit.getInstance();
+    return {
+      panelVisible: toolkit.panelVisible,
+      features: toolkit.features,
+    };
+  });
+
+  useEffect(() => {
+    const toolkit = DebugToolkit.getInstance();
+
+    const syncState = () => {
+      setState({
+        panelVisible: toolkit.panelVisible,
+        features: toolkit.features,
+      });
+    };
+
+    toolkit.registerRenderCallback(syncState);
+    syncState();
+
+    return () => {
+      toolkit.unregisterRenderCallback();
+    };
+  }, []);
+
+  const toolkit = DebugToolkit.getInstance();
+
+  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),
+  };
+
+  return (
+    <ToolkitContext.Provider value={contextValue}>
+      {children}
+      {state.panelVisible && (
+        <FloatPanelView
+          features={state.features}
+          onClose={() => toolkit.hidePanel()}
+          onClearAll={() => toolkit.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,11 @@
+import { ClipboardTab } from '../components/ClipboardTab';
+import type { DebugFeature } from '../types';
+
+export const createClipboardFeature = (): DebugFeature<void> => ({
+  name: 'clipboard',
+  label: 'Clipboard',
+  renderContent: ClipboardTab,
+  setup: () => {},
+  getData: () => [],
+  cleanup: () => {},
+});

package/src/features/ConsoleLogFeature.ts

@@ -0,0 +1,118 @@
+import { ConsoleLogTab } from '../components/ConsoleLogTab';
+import type { ConsoleLogEntry, DebugFeature } from '../types';
+import { createEventChannel } from '../utils/createEventChannel';
+import { createObservableStore } from '../utils/createObservableStore';
+
+type ConsoleLogPayload = Omit<ConsoleLogEntry, 'id'>;
+
+const DEFAULT_MAX_LOGS = 200;
+const consoleChannel = createEventChannel<ConsoleLogPayload>();
+const originalConsole: Partial<Record<ConsoleLogEntry['level'], (...args: unknown[]) => void>> =
+  {};
+const LEVELS: ConsoleLogEntry['level'][] = ['log', 'info', 'warn', 'error'];
+
+let consoleCaptureRefCount = 0;
+
+function stopConsoleCapture(): void {
+  consoleCaptureRefCount = Math.max(0, consoleCaptureRefCount - 1);
+
+  if (consoleCaptureRefCount > 0) {
+    return;
+  }
+
+  LEVELS.forEach((level) => {
+    const originalMethod = originalConsole[level];
+
+    if (!originalMethod) {
+      return;
+    }
+
+    console[level] = originalMethod;
+    delete originalConsole[level];
+  });
+}
+
+function startConsoleCapture(): () => void {
+  consoleCaptureRefCount += 1;
+
+  if (consoleCaptureRefCount > 1) {
+    return () => {
+      stopConsoleCapture();
+    };
+  }
+
+  LEVELS.forEach((level) => {
+    originalConsole[level] = console[level];
+
+    console[level] = (...args: unknown[]) => {
+      originalConsole[level]?.apply(console, args);
+      // Skip DebugToolkit's own copy-to-computer logs to avoid Console tab noise
+      if (level === 'log' && typeof args[0] === 'string' && args[0].startsWith('[DebugToolkit:Copy]')) {
+        return;
+      }
+      consoleChannel.emit({
+        timestamp: Date.now(),
+        level,
+        data: args,
+      });
+    };
+  });
+
+  return () => {
+    stopConsoleCapture();
+  };
+}
+
+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 unsubscribeLogs: (() => void) | null = null;
+  let stopCapture: (() => void) | null = null;
+
+  return {
+    name: 'console',
+    label: 'Console',
+    renderContent: ConsoleLogTab,
+    setup: () => {
+      if (initialized) {
+        return;
+      }
+
+      unsubscribeLogs = consoleChannel.subscribe((entry) => {
+        logStore.push(
+          {
+            ...entry,
+            id: String(nextId++),
+          },
+          maxLogs,
+        );
+      });
+      stopCapture = startConsoleCapture();
+      initialized = true;
+    },
+    getData: () => logStore.getData(),
+    clear: () => {
+      logStore.clear();
+    },
+    cleanup: () => {
+      if (!initialized) {
+        return;
+      }
+
+      unsubscribeLogs?.();
+      unsubscribeLogs = null;
+      stopCapture?.();
+      stopCapture = null;
+      logStore.clear();
+      initialized = false;
+    },
+    subscribe: (listener) => logStore.subscribe(listener),
+  };
+};

package/src/features/EnvironmentFeature.ts

@@ -0,0 +1,194 @@
+import { EnvironmentTab } from '../components/EnvironmentTab';
+import type { DebugFeature, EnvironmentConfig, EnvironmentState } from '../types';
+import { createObservableStore } from '../utils/createObservableStore';
+import { setUrlRewriter } from './NetworkFeature';
+
+// 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) {
+          setUrlRewriter(createUrlRewriter());
+        } else {
+          setUrlRewriter(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) {
+        try {
+          setUrlRewriter(createUrlRewriter());
+        } catch {
+          // NetworkFeature may not be available
+        }
+      }
+
+      // Async persistence load (will override if a preference exists)
+      loadPersistedSelection();
+    },
+    getData: () => stateStore.getData(),
+    clear: () => {
+      applyEnvironment(null);
+      persistSelection(null);
+    },
+    cleanup: () => {
+      if (!initialized) return;
+      try {
+        setUrlRewriter(null);
+      } catch (err) {
+        if (__DEV__) console.warn('[DebugToolkit] Failed to set URL rewriter:', err);
+      }
+      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',
+      };
+    },
+  };
+};