react-native-debug-toolkit 2.1.0 → 2.2.0

package/src/features/{ClipboardFeature.ts → clipboard/index.ts}

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

package/src/{components → features/console}/ConsoleLogTab.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { View, Text, StyleSheet, ScrollView } from 'react-native';
-import { Colors } from '../utils/colors';
-import { safeStringify } from '../utils/safeStringify';
-import { CollapsibleSection } from './shared/CollapsibleSection';
-import { JsonView } from './shared/JsonView';
-import { CopyButton } from './shared/CopyButton';
-import { LogListScreen } from './shared/LogListScreen';
-import { fmt } from '../utils/copyToComputer';
-import type { ConsoleLogEntry, DebugFeatureRenderProps } from '../types';
+import { Colors } from '../../ui/theme/colors';
+import { safeStringify } from '../../utils/safeStringify';
+import { CollapsibleSection } from '../../ui/shared/CollapsibleSection';
+import { JsonView } from '../../ui/shared/JsonView';
+import { CopyButton } from '../../ui/shared/CopyButton';
+import { LogListScreen } from '../../ui/shared/LogListScreen';
+import { fmt } from '../../utils/copyToComputer';
+import type { ConsoleLogEntry, DebugFeatureRenderProps } from '../../types';
 
 const LEVEL_COLORS: Record<string, string> = {
   log: '#8E8E93',
@@ -23,9 +23,9 @@ const LEVEL_ICONS: Record<string, string> = {
   error: '✕',
 };
 
-export const ConsoleLogTab: React.FC<DebugFeatureRenderProps<ConsoleLogEntry>> = React.memo(({ data }) => (
+export const ConsoleLogTab: React.FC<DebugFeatureRenderProps<ConsoleLogEntry[]>> = React.memo(({ snapshot }) => (
   <LogListScreen
-    data={data}
+    data={snapshot}
     emptyText="No console logs"
     renderRow={(item) => (
       <View style={s.cardRow}>

package/src/features/{ConsoleLogFeature.ts → console/index.ts}

@@ -1,6 +1,7 @@
-import { ConsoleLogTab } from '../components/ConsoleLogTab';
-import type { ConsoleLogEntry, DebugFeature } from '../types';
-import { createObservableStore } from '../utils/createObservableStore';
+import { ConsoleLogTab } from './ConsoleLogTab';
+import type { ConsoleLogEntry, DebugFeature } from '../../types';
+import { createPersistedObservableStore } from '../../utils/createPersistedObservableStore';
+import { KEYS } from '../../utils/debugPreferences';
 
 const LEVELS: ConsoleLogEntry['level'][] = ['log', 'info', 'warn', 'error'];
 
@@ -77,10 +78,12 @@ export interface ConsoleFeatureConfig {
   maxLogs?: number;
 }
 
-export const createConsoleLogFeature = (config?: ConsoleFeatureConfig): DebugFeature<ConsoleLogEntry> => {
+export const createConsoleLogFeature = (config?: ConsoleFeatureConfig): DebugFeature<ConsoleLogEntry[]> => {
   const maxLogs = config?.maxLogs ?? DEFAULT_MAX_LOGS;
-  const logStore = createObservableStore<ConsoleLogEntry>();
-  let nextId = 0;
+  const logStore = createPersistedObservableStore<ConsoleLogEntry>({
+    storageKey: KEYS.consoleLogs,
+    maxPersist: 50,
+  });
   let initialized = false;
   let stopCapture: (() => void) | null = null;
 
@@ -92,11 +95,11 @@ export const createConsoleLogFeature = (config?: ConsoleFeatureConfig): DebugFea
       if (initialized) return;
 
       stopCapture = consoleCapture.start((entry) => {
-        logStore.push({ ...entry, id: String(nextId++) }, maxLogs);
+        logStore.push({ ...entry, id: logStore.nextId() }, maxLogs);
       });
       initialized = true;
     },
-    getData: () => logStore.getData(),
+    getSnapshot: () => logStore.getData(),
     clear: () => { logStore.clear(); },
     cleanup: () => {
       if (!initialized) return;

package/src/{components → features/environment}/EnvironmentTab.tsx

@@ -6,9 +6,9 @@ import {
   StyleSheet,
   ScrollView,
 } from 'react-native';
-import { Colors } from '../utils/colors';
-import type { DebugFeatureRenderProps, EnvironmentState } from '../types';
-import type { EnvironmentFeatureAPI } from '../features/EnvironmentFeature';
+import { Colors } from '../../ui/theme/colors';
+import type { DebugFeatureRenderProps, EnvironmentState } from '../../types';
+import type { EnvironmentFeatureAPI } from './index';
 
 const DEFAULT_COLORS: Record<string, string> = {
   dev: '#34C759',
@@ -20,10 +20,10 @@ const DEFAULT_COLORS: Record<string, string> = {
 };
 
 export const EnvironmentTab: React.FC<DebugFeatureRenderProps<EnvironmentState>> = React.memo(({
-  data,
+  snapshot,
   feature,
 }) => {
-  const state = data[0];
+  const state = snapshot;
   if (!state || state.environments.length === 0) {
     return (
       <View style={styles.container}>

package/src/features/{EnvironmentFeature.ts → environment/index.ts}

@@ -1,7 +1,11 @@
-import { EnvironmentTab } from '../components/EnvironmentTab';
-import type { DebugFeature, EnvironmentConfig, EnvironmentState } from '../types';
-import { createObservableStore } from '../utils/createObservableStore';
-import { urlRewriter } from '../utils/urlRewriterRegistry';
+import { EnvironmentTab } from './EnvironmentTab';
+import type {
+  DebugFeature,
+  DebugFeatureListener,
+  EnvironmentConfig,
+  EnvironmentState,
+} from '../../types';
+import { urlRewriter } from '../../utils/urlRewriterRegistry';
 
 // Lazy AsyncStorage loader
 type AsyncStorageModule = {
@@ -76,7 +80,7 @@ export interface EnvironmentFeatureAPI extends DebugFeature<EnvironmentState> {
 export const createEnvironmentFeature = (
   initialEnvironments?: EnvironmentConfig[],
 ): EnvironmentFeatureAPI => {
-  const stateStore = createObservableStore<EnvironmentState>();
+  const listeners = new Set<DebugFeatureListener>();
   let environments: EnvironmentConfig[] = initialEnvironments ?? [];
   let initialized = false;
 
@@ -85,9 +89,10 @@ export const createEnvironmentFeature = (
     currentEnvironmentId: activeEnvironmentId,
   });
 
-  const updateStore = () => {
-    stateStore.clear();
-    stateStore.push(getCurrentState());
+  const notify = () => {
+    listeners.forEach((listener) => {
+      listener();
+    });
   };
 
   const applyEnvironment = (envId: string | null) => {
@@ -106,7 +111,7 @@ export const createEnvironmentFeature = (
       }
     }
 
-    updateStore();
+    notify();
   };
 
   const persistSelection = async (envId: string | null) => {
@@ -139,7 +144,7 @@ export const createEnvironmentFeature = (
     setup: () => {
       if (initialized) return;
 
-      updateStore();
+      notify();
       initialized = true;
 
       // Install rewriter if an environment is already selected
@@ -150,7 +155,7 @@ export const createEnvironmentFeature = (
       // Async persistence load (will override if a preference exists)
       loadPersistedSelection();
     },
-    getData: () => stateStore.getData(),
+    getSnapshot: getCurrentState,
     clear: () => {
       applyEnvironment(null);
       persistSelection(null);
@@ -160,10 +165,15 @@ export const createEnvironmentFeature = (
       urlRewriter.set(null);
       activeEnvironmentId = null;
       currentHostsMap = null;
-      stateStore.clear();
+      notify();
       initialized = false;
     },
-    subscribe: (listener) => stateStore.subscribe(listener),
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
     registerEnvironments: (envs: EnvironmentConfig[]) => {
       environments = envs;
       applyEnvironment(activeEnvironmentId);

package/src/{components → features/navigation}/NavigationLogTab.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { View, Text, FlatList, StyleSheet } from 'react-native';
-import { Colors } from '../utils/colors';
-import { CopyButton } from './shared/CopyButton';
-import type { DebugFeatureRenderProps, NavigationLogEntry } from '../types';
+import { Colors } from '../../ui/theme/colors';
+import { CopyButton } from '../../ui/shared/CopyButton';
+import type { DebugFeatureRenderProps, NavigationLogEntry } from '../../types';
 
-export const NavigationLogTab: React.FC<DebugFeatureRenderProps<NavigationLogEntry>> = React.memo(({
-  data,
+export const NavigationLogTab: React.FC<DebugFeatureRenderProps<NavigationLogEntry[]>> = React.memo(({
+  snapshot,
 }) => {
+  const data = snapshot;
   const renderItem = ({ item }: { item: NavigationLogEntry }) => (
     <View style={styles.logItem}>
       <View style={styles.header}>

package/src/features/{NavigationLogFeature.ts → navigation/index.ts}

@@ -1,7 +1,7 @@
-import { NavigationLogTab } from '../components/NavigationLogTab';
-import type { DebugFeature, NavigationLogEntry } from '../types';
-import { createEventChannel } from '../utils/createEventChannel';
-import { createChannelFeature } from '../utils/createChannelFeature';
+import { NavigationLogTab } from './NavigationLogTab';
+import type { DebugFeature, NavigationLogEntry } from '../../types';
+import { createEventChannel } from '../../utils/createEventChannel';
+import { createChannelFeature } from '../../utils/createChannelFeature';
 
 type NavigationLogPayload = Omit<NavigationLogEntry, 'id'>;
 
@@ -31,7 +31,7 @@ export interface NavigationFeatureConfig {
   maxLogs?: number;
 }
 
-export const createNavigationLogFeature = (config?: NavigationFeatureConfig): DebugFeature<NavigationLogEntry> =>
+export const createNavigationLogFeature = (config?: NavigationFeatureConfig): DebugFeature<NavigationLogEntry[]> =>
   createChannelFeature(
     () => navigationChannel,
     (payload, id) => ({ ...payload, id }),

package/src/{hooks → features/navigation}/useNavigationLogger.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
-import { addNavigationLog } from '../features/NavigationLogFeature';
-import { safeStringify } from '../utils/safeStringify';
-import type { NavigationContainerRef } from '../types';
+import { addNavigationLog } from './index';
+import { safeStringify } from '../../utils/safeStringify';
+import type { NavigationContainerRef } from '../../types';
 
 function getActiveRouteName(state: unknown): string {
   let currentState = state as

package/src/{components → features/network}/NetworkLogTab.tsx

@@ -6,13 +6,13 @@ import {
   TextInput,
   ScrollView,
 } from 'react-native';
-import { Colors, getMethodColor } from '../utils/colors';
-import { CollapsibleSection } from './shared/CollapsibleSection';
-import { JsonView } from './shared/JsonView';
-import { CopyButton } from './shared/CopyButton';
-import { fmt } from '../utils/copyToComputer';
-import { LogListScreen } from './shared/LogListScreen';
-import type { DebugFeatureRenderProps, NetworkLogEntry } from '../types';
+import { Colors, getMethodColor } from '../../ui/theme/colors';
+import { CollapsibleSection } from '../../ui/shared/CollapsibleSection';
+import { JsonView } from '../../ui/shared/JsonView';
+import { CopyButton } from '../../ui/shared/CopyButton';
+import { fmt } from '../../utils/copyToComputer';
+import { LogListScreen } from '../../ui/shared/LogListScreen';
+import type { DebugFeatureRenderProps, NetworkLogEntry } from '../../types';
 
 const formatSize = (data: unknown): string => {
   if (!data) return '';
@@ -37,10 +37,11 @@ const buildCurl = (log: NetworkLogEntry): string => {
   return c;
 };
 
-export const NetworkLogTab: React.FC<DebugFeatureRenderProps<NetworkLogEntry>> = React.memo(({
-  data,
+export const NetworkLogTab: React.FC<DebugFeatureRenderProps<NetworkLogEntry[]>> = React.memo(({
+  snapshot,
 }) => {
   const [search, setSearch] = useState('');
+  const data = snapshot;
 
   const filtered = search
     ? data.filter(

package/src/features/{NetworkFeature.ts → network/index.ts}

@@ -1,15 +1,17 @@
-import { NetworkLogTab } from '../components/NetworkLogTab';
-import type { DebugFeature, NetworkLogEntry } from '../types';
-import { createEventChannel } from '../utils/createEventChannel';
-import { createObservableStore } from '../utils/createObservableStore';
-import { urlRewriter } from '../utils/urlRewriterRegistry';
+import { NetworkLogTab } from './NetworkLogTab';
+
+export type { AxiosInstanceLike } from './networkInterceptor';
+import type { DebugFeature, NetworkLogEntry } from '../../types';
+import { createEventChannel } from '../../utils/createEventChannel';
+import { createPersistedObservableStore } from '../../utils/createPersistedObservableStore';
+import { KEYS } from '../../utils/debugPreferences';
+import { urlRewriter } from '../../utils/urlRewriterRegistry';
+import type { AxiosInstanceLike } from './networkInterceptor';
 import {
   startFetch,
-  startXMLHttpRequest,
-  setupAxios,
+  startAxios,
   resetInterceptors,
-} from '../interceptors/networkInterceptor';
-import type { AxiosInstanceLike } from '../interceptors/networkInterceptor';
+} from './networkInterceptor';
 
 type NetworkLogPayload = Omit<NetworkLogEntry, 'id'>;
 
@@ -39,34 +41,32 @@ function emitNetworkLog(entry: NetworkLogPayload): void {
 
 const DEFAULT_MAX_LOGS = 200;
 
-export type { AxiosInstanceLike };
-
 export interface NetworkFeatureConfig {
   /** Maximum number of network logs to keep (default: 200) */
   maxLogs?: number;
   /** URLs to filter out from logging */
   blacklist?: Array<string | RegExp>;
+  /** Axios instance to intercept. Pass your axios.create() instance to capture axios requests. */
+  axiosInstance?: AxiosInstanceLike;
 }
 
-export const createNetworkFeature = (config?: NetworkFeatureConfig): DebugFeature<NetworkLogEntry> & {
-  setupAxiosInterceptors: (axiosInstance: AxiosInstanceLike) => () => void;
-} => {
+export const createNetworkFeature = (config?: NetworkFeatureConfig): DebugFeature<NetworkLogEntry[]> => {
   const maxLogs = config?.maxLogs ?? DEFAULT_MAX_LOGS;
   const blacklist: Array<string | RegExp> = config?.blacklist ? [...config.blacklist] : [];
-  const logStore = createObservableStore<NetworkLogEntry>();
-  const axiosCleanupMap = new Map<AxiosInstanceLike, () => void>();
-
-  let nextId = 0;
+  const logStore = createPersistedObservableStore<NetworkLogEntry>({
+    storageKey: KEYS.networkLogs,
+    maxPersist: 30,
+  });
   let initialized = false;
   let unsubscribeLogs: (() => void) | null = null;
   let stopFetchFn: (() => void) | null = null;
-  let stopXMLHttpRequestFn: (() => void) | null = null;
+  let stopAxiosFn: (() => void) | null = null;
 
   const handleLog = (entry: NetworkLogPayload) => {
     if (isUrlBlacklisted(entry.request.url, blacklist)) {
       return;
     }
-    logStore.push({ ...entry, id: String(nextId++) }, maxLogs);
+    logStore.push({ ...entry, id: logStore.nextId() }, maxLogs);
   };
 
   return {
@@ -79,10 +79,12 @@ export const createNetworkFeature = (config?: NetworkFeatureConfig): DebugFeatur
       }
       unsubscribeLogs = networkChannel.subscribe(handleLog);
       stopFetchFn = startFetch(emitNetworkLog);
-      stopXMLHttpRequestFn = startXMLHttpRequest(emitNetworkLog);
+      if (config?.axiosInstance) {
+        stopAxiosFn = startAxios(config.axiosInstance, emitNetworkLog);
+      }
       initialized = true;
     },
-    getData: () => logStore.getData(),
+    getSnapshot: () => logStore.getData(),
     clear: () => {
       logStore.clear();
     },
@@ -95,27 +97,12 @@ export const createNetworkFeature = (config?: NetworkFeatureConfig): DebugFeatur
       unsubscribeLogs = null;
       stopFetchFn?.();
       stopFetchFn = null;
-      stopXMLHttpRequestFn?.();
-      stopXMLHttpRequestFn = null;
-      axiosCleanupMap.forEach((c) => c());
-      axiosCleanupMap.clear();
+      stopAxiosFn?.();
+      stopAxiosFn = null;
       logStore.clear();
       initialized = false;
     },
     subscribe: (listener) => logStore.subscribe(listener),
-    setupAxiosInterceptors: (axiosInstance) => {
-      const existingCleanup = axiosCleanupMap.get(axiosInstance);
-      if (existingCleanup) {
-        return existingCleanup;
-      }
-      const cleanup = setupAxios(axiosInstance, emitNetworkLog);
-      const trackedCleanup = () => {
-        cleanup();
-        axiosCleanupMap.delete(axiosInstance);
-      };
-      axiosCleanupMap.set(axiosInstance, trackedCleanup);
-      return trackedCleanup;
-    },
   };
 };