react-native-debug-toolkit 2.0.0 → 2.2.0

package/src/ui/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 '../theme/colors';
+import { useSlideDetailAnimation } from './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/ui/theme/colors.ts

@@ -0,0 +1,33 @@
+export const Colors = {
+  primary: '#007AFF',
+  text: '#1C1C1E',
+  textSecondary: '#8E8E93',
+  textLight: '#C7C7CC',
+  border: '#E5E5EA',
+  background: '#F2F2F7',
+  surface: '#FFFFFF',
+
+  success: '#34C759',
+  error: '#FF3B30',
+  warning: '#FF9500',
+  info: '#5AC8FA',
+
+  purple: '#AF52DE',
+
+  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/ui/theme/layout.ts

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

package/src/utils/createChannelFeature.ts

@@ -0,0 +1,80 @@
+import type { ComponentType } from 'react';
+import type { DebugFeature, DebugFeatureListener, DebugFeatureRenderProps } from '../types';
+import type { EventChannel } from './createEventChannel';
+import { createObservableStore, type ObservableStore } from './createObservableStore';
+import { createPersistedObservableStore } from './createPersistedObservableStore';
+
+const DEFAULT_MAX_LOGS = 200;
+
+export interface ChannelFeaturePersistConfig<TEntry> {
+  storageKey: string;
+  maxPersist: number;
+  debounceMs?: number;
+  serialize?: (entry: TEntry) => unknown;
+}
+
+/**
+ * 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 extends { id?: string }>(
+  getChannel: () => EventChannel<TPayload>,
+  toEntry: (payload: TPayload, id: string) => TEntry,
+  options: {
+    name: string;
+    label: string;
+    renderContent?: ComponentType<DebugFeatureRenderProps<TEntry[]>>;
+    maxLogs?: number;
+    persist?: ChannelFeaturePersistConfig<TEntry>;
+  },
+): DebugFeature<TEntry[]> {
+  const maxLogs = options.maxLogs ?? DEFAULT_MAX_LOGS;
+  let nextId = 0;
+  let logStore: ObservableStore<TEntry>;
+  let getId: () => string;
+
+  if (options.persist) {
+    const persisted = createPersistedObservableStore<TEntry>({
+      storageKey: options.persist.storageKey,
+      maxPersist: options.persist.maxPersist,
+      debounceMs: options.persist.debounceMs,
+      serialize: options.persist.serialize,
+    });
+    logStore = persisted;
+    getId = () => persisted.nextId();
+  } else {
+    logStore = createObservableStore<TEntry>();
+    getId = () => String(nextId++);
+  }
+
+  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, getId()), maxLogs);
+      });
+      initialized = true;
+    },
+    getSnapshot: () => logStore.getData(),
+    clear: () => {
+      logStore.clear();
+    },
+    cleanup: () => {
+      unsubscribe?.();
+      unsubscribe = null;
+      logStore.clear();
+      initialized = false;
+    },
+    subscribe: (listener: DebugFeatureListener) => logStore.subscribe(listener),
+  };
+}

package/src/utils/createObservableStore.ts

@@ -3,6 +3,7 @@ export type StoreListener = () => void;
 export interface ObservableStore<T> {
   getData: () => T[];
   push: (item: T, maxEntries?: number) => void;
+  pushBatch: (items: T[]) => void;
   clear: () => void;
   subscribe: (listener: StoreListener) => () => void;
 }
@@ -25,6 +26,11 @@ export function createObservableStore<T>(): ObservableStore<T> {
       }
       notify();
     },
+    pushBatch: (items) => {
+      if (items.length === 0) return;
+      data = [...data, ...items];
+      notify();
+    },
     clear: () => {
       if (data.length === 0) {
         return;

package/src/utils/createPersistedObservableStore.ts

@@ -0,0 +1,76 @@
+import { createObservableStore, type ObservableStore } from './createObservableStore';
+import { getPreference, setPreference } from './debugPreferences';
+
+export interface PersistedStoreOptions<T> {
+  storageKey: string;
+  maxPersist: number;
+  debounceMs?: number;
+  serialize?: (entry: T) => unknown;
+}
+
+export interface PersistedObservableStore<T> extends ObservableStore<T> {
+  /** Returns the next auto-incrementing ID and advances the counter. */
+  nextId: () => string;
+}
+
+export function createPersistedObservableStore<T extends { id?: string }>(
+  options: PersistedStoreOptions<T>,
+): PersistedObservableStore<T> {
+  const { storageKey, maxPersist, debounceMs = 2000, serialize } = options;
+  const store = createObservableStore<T>();
+  let writeTimer: ReturnType<typeof setTimeout> | null = null;
+  let idCounter = 0;
+
+  // Restore from storage (single notify via pushBatch)
+  getPreference(storageKey).then((raw) => {
+    if (!raw) return;
+    try {
+      const entries = JSON.parse(raw) as T[];
+      if (!Array.isArray(entries)) return;
+      const restored = entries.slice(-maxPersist);
+      store.pushBatch(restored);
+      // Fix ID counter to avoid collision with restored entries
+      let max = 0;
+      for (const e of restored) {
+        const n = parseInt(e.id ?? '', 10);
+        if (!isNaN(n) && n >= max) max = n + 1;
+      }
+      idCounter = max;
+    } catch {
+      // ignore corrupt data
+    }
+  });
+
+  function scheduleWrite(): void {
+    if (writeTimer !== null) clearTimeout(writeTimer);
+    writeTimer = setTimeout(() => {
+      writeTimer = null;
+      const data = store.getData().slice(-maxPersist);
+      const toStore = serialize ? data.map(serialize) : data;
+      try {
+        setPreference(storageKey, JSON.stringify(toStore));
+      } catch {
+        // stringify failed (circular refs, etc) — skip write
+      }
+    }, debounceMs);
+  }
+
+  return {
+    getData: store.getData,
+    push: (item, maxEntries) => {
+      store.push(item, maxEntries);
+      scheduleWrite();
+    },
+    pushBatch: store.pushBatch,
+    clear: () => {
+      store.clear();
+      if (writeTimer !== null) {
+        clearTimeout(writeTimer);
+        writeTimer = null;
+      }
+      setPreference(storageKey, '[]');
+    },
+    subscribe: store.subscribe,
+    nextId: () => String(idCounter++),
+  };
+}

package/src/utils/debugPreferences.ts

@@ -0,0 +1,48 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AsyncStorageLike = { getItem: (k: string) => Promise<string | null>; setItem: (k: string, v: string) => Promise<void> };
+
+const memoryStore = new Map<string, string>();
+
+function loadAsyncStorage(): AsyncStorageLike | null {
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const mod = require('@react-native-async-storage/async-storage');
+    if (mod && typeof mod.getItem === 'function') return mod;
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+export async function setPreference(key: string, value: string): Promise<void> {
+  memoryStore.set(key, value);
+  const AsyncStorage = loadAsyncStorage();
+  if (AsyncStorage) {
+    try {
+      await AsyncStorage.setItem(key, value);
+    } catch {
+      // degrade to memory only
+    }
+  }
+}
+
+export async function getPreference(key: string): Promise<string | null> {
+  const AsyncStorage = loadAsyncStorage();
+  if (AsyncStorage) {
+    try {
+      const val = await AsyncStorage.getItem(key);
+      if (val !== null) return val;
+    } catch {
+      // fall through to memory
+    }
+  }
+  return memoryStore.get(key) ?? null;
+}
+
+export const KEYS = {
+  fabPosition: '@react_native_debug_toolkit/fab_position',
+  lastTab: '@react_native_debug_toolkit/last_tab',
+  consoleLogs: '@react_native_debug_toolkit/console_logs',
+  networkLogs: '@react_native_debug_toolkit/network_logs',
+  trackLogs: '@react_native_debug_toolkit/track_logs',
+} as const;

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/lib/commonjs/components/ClipboardTab.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_constants","_copyToComputer","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ClipboardTab","text","setText","useState","feedback","setFeedback","handleCopy","useCallback","result","copyToComputer","label","method","setTimeout","jsxs","View","style","s","container","children","jsx","TextInput","input","value","onChangeText","placeholder","placeholderTextColor","Colors","textLight","multiline","textAlignVertical","footer","TouchableOpacity","copyBtn","onPress","activeOpacity","Text","copyBtnText","hint","exports","StyleSheet","create","flex","backgroundColor","background","padding","Spacing","md","surface","borderRadius","Radius","fontSize","color","lineHeight","paddingTop","sm","minHeight","alignItems","paddingHorizontal","paddingVertical","primary","fontWeight"],"sourceRoot":"../../../src","sources":["components/ClipboardTab.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AACA,IAAAG,eAAA,GAAAH,OAAA;AAAyD,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAD,wBAAAM,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAR,uBAAA,YAAAA,CAAAM,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAGlD,MAAMkB,YAAqD,GAAGA,CAAA,KAAM;EACzE,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAG,IAAAC,eAAQ,EAAC,EAAE,CAAC;EACpC,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAG,IAAAF,eAAQ,EAAgB,IAAI,CAAC;EAE7D,MAAMG,UAAU,GAAG,IAAAC,kBAAW,EAAC,MAAM;IACnC,IAAI,CAACN,IAAI,EAAE;IACX,IAAI;MACF,MAAMO,MAAM,GAAG,IAAAC,8BAAc,EAACR,IAAI,EAAE;QAAES,KAAK,EAAE;MAAY,CAAC,CAAC;MAC3DL,WAAW,CAACG,MAAM,CAACG,MAAM,KAAK,WAAW,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAClE,CAAC,CAAC,MAAM;MACNN,WAAW,CAAC,QAAQ,CAAC;IACvB;IACAO,UAAU,CAAC,MAAMP,WAAW,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC;EAC3C,CAAC,EAAE,CAACJ,IAAI,CAAC,CAAC;EAEV,oBACE,IAAArB,WAAA,CAAAiC,IAAA,EAACpC,YAAA,CAAAqC,IAAI;IAACC,KAAK,EAAEC,CAAC,CAACC,SAAU;IAAAC,QAAA,gBACvB,IAAAtC,WAAA,CAAAuC,GAAA,EAAC1C,YAAA,CAAA2C,SAAS;MACRL,KAAK,EAAEC,CAAC,CAACK,KAAM;MACfC,KAAK,EAAErB,IAAK;MACZsB,YAAY,EAAErB,OAAQ;MACtBsB,WAAW,EAAC,4BAA4B;MACxCC,oBAAoB,EAAEC,iBAAM,CAACC,SAAU;MACvCC,SAAS;MACTC,iBAAiB,EAAC;IAAK,CACxB,CAAC,eACF,IAAAjD,WAAA,CAAAuC,GAAA,EAAC1C,YAAA,CAAAqC,IAAI;MAACC,KAAK,EAAEC,CAAC,CAACc,MAAO;MAAAZ,QAAA,EACnBjB,IAAI,gBACH,IAAArB,WAAA,CAAAuC,GAAA,EAAC1C,YAAA,CAAAsD,gBAAgB;QAAChB,KAAK,EAAEC,CAAC,CAACgB,OAAQ;QAACC,OAAO,EAAE3B,UAAW;QAAC4B,aAAa,EAAE,GAAI;QAAAhB,QAAA,eAC1E,IAAAtC,WAAA,CAAAuC,GAAA,EAAC1C,YAAA,CAAA0D,IAAI;UAACpB,KAAK,EAAEC,CAAC,CAACoB,WAAY;UAAAlB,QAAA,EAAEd,QAAQ,IAAI;QAAM,CAAO;MAAC,CACvC,CAAC,gBAEnB,IAAAxB,WAAA,CAAAuC,GAAA,EAAC1C,YAAA,CAAA0D,IAAI;QAACpB,KAAK,EAAEC,CAAC,CAACqB,IAAK;QAAAnB,QAAA,EAAC;MAAkD,CAAM;IAC9E,CACG,CAAC;EAAA,CACH,CAAC;AAEX,CAAC;AAACoB,OAAA,CAAAtC,YAAA,GAAAA,YAAA;AAEF,MAAMgB,CAAC,GAAGuB,uBAAU,CAACC,MAAM,CAAC;EAC1BvB,SAAS,EAAE;IACTwB,IAAI,EAAE,CAAC;IACPC,eAAe,EAAEhB,iBAAM,CAACiB,UAAU;IAClCC,OAAO,EAAEC,kBAAO,CAACC;EACnB,CAAC;EACDzB,KAAK,EAAE;IACLoB,IAAI,EAAE,CAAC;IACPC,eAAe,EAAEhB,iBAAM,CAACqB,OAAO;IAC/BC,YAAY,EAAEC,iBAAM,CAACH,EAAE;IACvBF,OAAO,EAAEC,kBAAO,CAACC,EAAE;IACnBI,QAAQ,EAAE,EAAE;IACZC,KAAK,EAAEzB,iBAAM,CAACzB,IAAI;IAClBmD,UAAU,EAAE;EACd,CAAC;EACDtB,MAAM,EAAE;IACNuB,UAAU,EAAER,kBAAO,CAACS,EAAE;IACtBC,SAAS,EAAE,EAAE;IACbC,UAAU,EAAE;EACd,CAAC;EACDnB,IAAI,EAAE;IACJa,QAAQ,EAAE,EAAE;IACZC,KAAK,EAAEzB,iBAAM,CAACC;EAChB,CAAC;EACDK,OAAO,EAAE;IACPU,eAAe,EAAEhB,iBAAM,CAACiB,UAAU;IAClCc,iBAAiB,EAAE,EAAE;IACrBC,eAAe,EAAE,CAAC;IAClBV,YAAY,EAAEC,iBAAM,CAACK;EACvB,CAAC;EACDlB,WAAW,EAAE;IACXc,QAAQ,EAAE,EAAE;IACZC,KAAK,EAAEzB,iBAAM,CAACiC,OAAO;IACrBC,UAAU,EAAE;EACd;AACF,CAAC,CAAC","ignoreList":[]}