react-native-prod-debugger 1.0.0

package/src/plugins/customActions/CustomActionsPlugin.tsx

@@ -0,0 +1,199 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  ScrollView,
+  StyleSheet,
+  Alert,
+  ActivityIndicator,
+} from 'react-native';
+import type { PluginComponentProps, CustomAction, DebuggerPlugin } from '../../core/types';
+import { actionStore } from './actionStore';
+
+const CustomActionsPanel: React.FC<PluginComponentProps> = ({ theme }) => {
+  const [actions, setActions] = useState<CustomAction[]>([]);
+  const [runningAction, setRunningAction] = useState<string | null>(null);
+  const [lastResult, setLastResult] = useState<{
+    id: string;
+    success: boolean;
+    message?: string;
+  } | null>(null);
+
+  useEffect(() => {
+    const unsub = actionStore.subscribe(setActions);
+    return unsub;
+  }, []);
+
+  const handleRun = useCallback(async (action: CustomAction) => {
+    const execute = async () => {
+      setRunningAction(action.id);
+      setLastResult(null);
+      try {
+        await action.handler();
+        setLastResult({ id: action.id, success: true, message: 'Completed' });
+      } catch (err) {
+        setLastResult({
+          id: action.id,
+          success: false,
+          message: err instanceof Error ? err.message : 'Failed',
+        });
+      }
+      setRunningAction(null);
+    };
+
+    if (action.destructive) {
+      Alert.alert('⚠️ Confirm', `Run "${action.name}"? This action is marked as destructive.`, [
+        { text: 'Cancel', style: 'cancel' },
+        { text: 'Run', style: 'destructive', onPress: execute },
+      ]);
+    } else {
+      execute();
+    }
+  }, []);
+
+  const groups = React.useMemo(() => {
+    const groupMap = new Map<string, CustomAction[]>();
+    for (const action of actions) {
+      const group = action.group || 'General';
+      const list = groupMap.get(group) || [];
+      list.push(action);
+      groupMap.set(group, list);
+    }
+    return groupMap;
+  }, [actions]);
+
+  if (actions.length === 0) {
+    return (
+      <View style={styles.emptyContainer}>
+        <Text style={styles.emptyIcon}>🎯</Text>
+        <Text style={[styles.emptyTitle, { color: theme.text }]}>No Custom Actions</Text>
+        <Text style={[styles.emptyDesc, { color: theme.textMuted }]}>
+          Register actions:{'\n\n'}
+          <Text style={{ fontFamily: 'monospace', color: theme.codeText }}>
+            {
+              'registerAction({\n  id: "clear-cache",\n  name: "Clear Cache",\n  icon: "🗑️",\n  handler: () => clearCache(),\n})'
+            }
+          </Text>
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <ScrollView style={styles.container}>
+      {/* Result Banner */}
+      {lastResult && (
+        <View
+          style={[
+            styles.resultBanner,
+            { backgroundColor: lastResult.success ? `${theme.success}20` : `${theme.error}20` },
+          ]}
+        >
+          <Text
+            style={[styles.resultText, { color: lastResult.success ? theme.success : theme.error }]}
+          >
+            {lastResult.success ? '✅' : '❌'} {lastResult.message}
+          </Text>
+        </View>
+      )}
+
+      {/* Action Groups */}
+      {Array.from(groups.entries()).map(([groupName, groupActions]) => (
+        <View key={groupName} style={styles.group}>
+          <Text style={[styles.groupTitle, { color: theme.textSecondary }]}>{groupName}</Text>
+          <View style={styles.grid}>
+            {groupActions.map((action) => (
+              <TouchableOpacity
+                key={action.id}
+                style={[
+                  styles.actionCard,
+                  {
+                    backgroundColor: theme.surface,
+                    borderColor: action.destructive ? theme.error : theme.border,
+                  },
+                ]}
+                onPress={() => handleRun(action)}
+                activeOpacity={0.7}
+                disabled={!!runningAction}
+              >
+                {runningAction === action.id ? (
+                  <ActivityIndicator color={theme.accent} size="small" />
+                ) : (
+                  <>
+                    <Text style={styles.actionIcon}>{action.icon || '⚡'}</Text>
+                    <Text
+                      style={[
+                        styles.actionName,
+                        { color: action.destructive ? theme.error : theme.text },
+                      ]}
+                      numberOfLines={1}
+                    >
+                      {action.name}
+                    </Text>
+                    {action.description && (
+                      <Text
+                        style={[styles.actionDesc, { color: theme.textMuted }]}
+                        numberOfLines={2}
+                      >
+                        {action.description}
+                      </Text>
+                    )}
+                  </>
+                )}
+              </TouchableOpacity>
+            ))}
+          </View>
+        </View>
+      ))}
+      <View style={{ height: 40 }} />
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  emptyContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 32,
+  },
+  emptyIcon: { fontSize: 48, marginBottom: 16 },
+  emptyTitle: { fontSize: 16, fontWeight: '700', marginBottom: 8 },
+  emptyDesc: { fontSize: 13, textAlign: 'center', lineHeight: 20 },
+  resultBanner: { padding: 10, marginHorizontal: 12, marginVertical: 8, borderRadius: 8 },
+  resultText: { fontSize: 13, fontWeight: '600', textAlign: 'center' },
+  group: { paddingHorizontal: 12, marginBottom: 16 },
+  groupTitle: {
+    fontSize: 11,
+    fontWeight: '700',
+    textTransform: 'uppercase',
+    letterSpacing: 1,
+    marginBottom: 8,
+    marginTop: 12,
+  },
+  grid: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 },
+  actionCard: {
+    width: '47%',
+    padding: 16,
+    borderRadius: 12,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: 90,
+  },
+  actionIcon: { fontSize: 24, marginBottom: 8 },
+  actionName: { fontSize: 13, fontWeight: '700', textAlign: 'center' },
+  actionDesc: { fontSize: 10, textAlign: 'center', marginTop: 4 },
+});
+
+export function createCustomActionsPlugin(): DebuggerPlugin {
+  return {
+    id: 'custom-actions',
+    name: 'Actions',
+    icon: '🎯',
+    component: CustomActionsPanel,
+    order: 110,
+  };
+}

package/src/plugins/customActions/actionStore.ts

@@ -0,0 +1,49 @@
+import type { CustomAction } from '../../core/types';
+
+type ActionListener = (actions: CustomAction[]) => void;
+
+class ActionStoreClass {
+  private actions: Map<string, CustomAction> = new Map();
+  private listeners: Set<ActionListener> = new Set();
+
+  register(action: CustomAction): void {
+    this.actions.set(action.id, action);
+    this.notify();
+  }
+
+  remove(id: string): void {
+    this.actions.delete(id);
+    this.notify();
+  }
+
+  getAll(): CustomAction[] {
+    return Array.from(this.actions.values());
+  }
+
+  subscribe(listener: ActionListener): () => void {
+    this.listeners.add(listener);
+    listener(this.getAll());
+    return () => this.listeners.delete(listener);
+  }
+
+  private notify(): void {
+    const snapshot = this.getAll();
+    for (const l of this.listeners) {
+      try {
+        l(snapshot);
+      } catch {
+        /* ignore */
+      }
+    }
+  }
+}
+
+export const actionStore = new ActionStoreClass();
+
+export function registerAction(action: CustomAction): void {
+  actionStore.register(action);
+}
+
+export function removeAction(id: string): void {
+  actionStore.remove(id);
+}

package/src/plugins/deepLinkTester/DeepLinkTesterPlugin.tsx

@@ -0,0 +1,213 @@
+import React, { useState, useCallback } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  TextInput,
+  ScrollView,
+  StyleSheet,
+  Linking,
+  Alert,
+} from 'react-native';
+import type { PluginComponentProps, DebuggerPlugin } from '../../core/types';
+
+const DeepLinkTesterPanel: React.FC<PluginComponentProps> = ({ theme }) => {
+  const [url, setUrl] = useState('');
+  const [history, setHistory] = useState<{ url: string; timestamp: number; success: boolean }[]>(
+    [],
+  );
+  const [presets, setPresets] = useState<string[]>([]);
+
+  const handleOpen = useCallback(async () => {
+    if (!url.trim()) return;
+    try {
+      const canOpen = await Linking.canOpenURL(url);
+      if (canOpen) {
+        await Linking.openURL(url);
+        setHistory((prev) => [{ url, timestamp: Date.now(), success: true }, ...prev].slice(0, 20));
+      } else {
+        Alert.alert('Error', `Cannot open URL: ${url}`);
+        setHistory((prev) =>
+          [{ url, timestamp: Date.now(), success: false }, ...prev].slice(0, 20),
+        );
+      }
+    } catch (err) {
+      Alert.alert('Error', err instanceof Error ? err.message : 'Failed');
+      setHistory((prev) => [{ url, timestamp: Date.now(), success: false }, ...prev].slice(0, 20));
+    }
+  }, [url]);
+
+  const handleSavePreset = useCallback(() => {
+    if (!url.trim() || presets.includes(url)) return;
+    setPresets((prev) => [url, ...prev]);
+  }, [url, presets]);
+
+  return (
+    <ScrollView style={styles.container}>
+      {/* URL Input */}
+      <View style={[styles.inputSection, { backgroundColor: theme.surface }]}>
+        <Text style={[styles.sectionTitle, { color: theme.textSecondary }]}>DEEP LINK URL</Text>
+        <TextInput
+          style={[
+            styles.urlInput,
+            { color: theme.text, backgroundColor: theme.surfaceAlt, borderColor: theme.border },
+          ]}
+          value={url}
+          onChangeText={setUrl}
+          placeholder="myapp://path/to/screen?param=value"
+          placeholderTextColor={theme.textMuted}
+          autoCapitalize="none"
+          autoCorrect={false}
+        />
+        <View style={styles.buttonRow}>
+          <TouchableOpacity
+            style={[styles.primaryBtn, { backgroundColor: theme.accent }]}
+            onPress={handleOpen}
+            activeOpacity={0.7}
+          >
+            <Text style={styles.primaryBtnText}>🔗 Open Link</Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={[styles.secondaryBtn, { borderColor: theme.border }]}
+            onPress={handleSavePreset}
+            activeOpacity={0.7}
+          >
+            <Text style={[styles.secondaryBtnText, { color: theme.textSecondary }]}>Save</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+
+      {/* Common Schemes */}
+      <View style={[styles.section, { backgroundColor: theme.surface }]}>
+        <Text style={[styles.sectionTitle, { color: theme.textSecondary }]}>COMMON SCHEMES</Text>
+        <View style={styles.schemeGrid}>
+          {[
+            'tel:+1234567890',
+            'mailto:test@example.com',
+            'sms:+1234567890',
+            'https://example.com',
+            'geo:37.7749,-122.4194',
+          ].map((scheme) => (
+            <TouchableOpacity
+              key={scheme}
+              style={[
+                styles.schemeChip,
+                { backgroundColor: theme.surfaceAlt, borderColor: theme.border },
+              ]}
+              onPress={() => setUrl(scheme)}
+              activeOpacity={0.7}
+            >
+              <Text style={[styles.schemeText, { color: theme.text }]} numberOfLines={1}>
+                {scheme.length > 25 ? scheme.slice(0, 25) + '…' : scheme}
+              </Text>
+            </TouchableOpacity>
+          ))}
+        </View>
+      </View>
+
+      {/* Saved Presets */}
+      {presets.length > 0 && (
+        <View style={[styles.section, { backgroundColor: theme.surface }]}>
+          <Text style={[styles.sectionTitle, { color: theme.textSecondary }]}>SAVED PRESETS</Text>
+          {presets.map((preset, i) => (
+            <TouchableOpacity
+              key={i}
+              style={[styles.presetRow, { borderBottomColor: theme.border }]}
+              onPress={() => setUrl(preset)}
+              activeOpacity={0.7}
+            >
+              <Text style={[styles.presetText, { color: theme.accent }]} numberOfLines={1}>
+                {preset}
+              </Text>
+            </TouchableOpacity>
+          ))}
+        </View>
+      )}
+
+      {/* History */}
+      {history.length > 0 && (
+        <View style={[styles.section, { backgroundColor: theme.surface }]}>
+          <Text style={[styles.sectionTitle, { color: theme.textSecondary }]}>HISTORY</Text>
+          {history.map((entry, i) => (
+            <TouchableOpacity
+              key={i}
+              style={[styles.historyRow, { borderBottomColor: theme.border }]}
+              onPress={() => setUrl(entry.url)}
+              activeOpacity={0.7}
+            >
+              <Text style={[styles.historyStatus]}>{entry.success ? '✅' : '❌'}</Text>
+              <Text style={[styles.historyUrl, { color: theme.text }]} numberOfLines={1}>
+                {entry.url}
+              </Text>
+            </TouchableOpacity>
+          ))}
+        </View>
+      )}
+
+      <View style={{ height: 40 }} />
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  inputSection: { margin: 12, padding: 12, borderRadius: 12 },
+  section: { margin: 12, marginTop: 0, padding: 12, borderRadius: 12 },
+  sectionTitle: {
+    fontSize: 11,
+    fontWeight: '700',
+    textTransform: 'uppercase',
+    letterSpacing: 1,
+    marginBottom: 8,
+  },
+  urlInput: {
+    height: 44,
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    fontSize: 14,
+    borderWidth: 1,
+    fontFamily: 'monospace',
+  },
+  buttonRow: { flexDirection: 'row', gap: 8, marginTop: 12 },
+  primaryBtn: {
+    flex: 1,
+    height: 42,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  primaryBtnText: { color: '#FFF', fontSize: 14, fontWeight: '700' },
+  secondaryBtn: {
+    paddingHorizontal: 16,
+    height: 42,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+  },
+  secondaryBtnText: { fontSize: 13, fontWeight: '600' },
+  schemeGrid: { flexDirection: 'row', flexWrap: 'wrap', gap: 6 },
+  schemeChip: { paddingHorizontal: 10, paddingVertical: 6, borderRadius: 8, borderWidth: 1 },
+  schemeText: { fontSize: 11, fontFamily: 'monospace' },
+  presetRow: { paddingVertical: 10, borderBottomWidth: StyleSheet.hairlineWidth },
+  presetText: { fontSize: 13, fontFamily: 'monospace' },
+  historyRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 8,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    gap: 8,
+  },
+  historyStatus: { fontSize: 12 },
+  historyUrl: { fontSize: 12, fontFamily: 'monospace', flex: 1 },
+});
+
+export function createDeepLinkTesterPlugin(): DebuggerPlugin {
+  return {
+    id: 'deep-link-tester',
+    name: 'Links',
+    icon: '🔗',
+    component: DeepLinkTesterPanel,
+    order: 120,
+  };
+}

package/src/plugins/deviceInfo/DeviceInfoPlugin.tsx

@@ -0,0 +1,153 @@
+import React, { useMemo, useCallback } from 'react';
+import {
+  View,
+  Text,
+  ScrollView,
+  TouchableOpacity,
+  StyleSheet,
+  Platform,
+  Dimensions,
+} from 'react-native';
+import type { PluginComponentProps, DebuggerPlugin } from '../../core/types';
+import { copyToClipboard } from '../../core/utils';
+
+const SCREEN = Dimensions.get('window');
+
+const DeviceInfoPanel: React.FC<PluginComponentProps> = ({ theme }) => {
+  const info = useMemo(() => {
+    const items: { label: string; value: string; group: string }[] = [];
+
+    // Platform
+    items.push({ label: 'Platform', value: Platform.OS, group: 'Platform' });
+    items.push({ label: 'OS Version', value: String(Platform.Version), group: 'Platform' });
+    items.push({
+      label: 'Hermes',
+      value: typeof HermesInternal !== 'undefined' ? '✅ Enabled' : '❌ Disabled',
+      group: 'Platform',
+    });
+    items.push({
+      label: '__DEV__',
+      value: typeof __DEV__ !== 'undefined' && __DEV__ ? 'true' : 'false',
+      group: 'Platform',
+    });
+
+    // Screen
+    items.push({
+      label: 'Screen',
+      value: `${SCREEN.width} × ${SCREEN.height}`,
+      group: 'Display',
+    });
+    items.push({
+      label: 'Scale',
+      value: String(Dimensions.get('window').scale ?? 'N/A'),
+      group: 'Display',
+    });
+    items.push({
+      label: 'Font Scale',
+      value: String(Dimensions.get('window').fontScale ?? 'N/A'),
+      group: 'Display',
+    });
+
+    // Runtime
+    items.push({
+      label: 'Locale',
+      value:
+        Platform.OS === 'ios'
+          ? (Platform as unknown as { locale?: string }).locale || 'Unknown'
+          : 'Check via library',
+      group: 'Runtime',
+    });
+
+    return items;
+  }, []);
+
+  const handleCopyAll = useCallback(() => {
+    const text = info.map((i) => `${i.label}: ${i.value}`).join('\n');
+    copyToClipboard(text);
+  }, [info]);
+
+  const groups = useMemo(() => {
+    const groupMap = new Map<string, typeof info>();
+    for (const item of info) {
+      const group = groupMap.get(item.group) || [];
+      group.push(item);
+      groupMap.set(item.group, group);
+    }
+    return groupMap;
+  }, [info]);
+
+  return (
+    <ScrollView style={styles.container}>
+      {/* Copy All */}
+      <View style={[styles.header, { backgroundColor: theme.surface }]}>
+        <Text style={[styles.headerTitle, { color: theme.text }]}>📱 Device Info</Text>
+        <TouchableOpacity onPress={handleCopyAll} activeOpacity={0.7}>
+          <Text style={[styles.copyAllBtn, { color: theme.accent }]}>Copy All</Text>
+        </TouchableOpacity>
+      </View>
+
+      {/* Info Groups */}
+      {Array.from(groups.entries()).map(([groupName, items]) => (
+        <View key={groupName} style={[styles.group, { backgroundColor: theme.surface }]}>
+          <Text style={[styles.groupTitle, { color: theme.textSecondary }]}>{groupName}</Text>
+          {items.map((item) => (
+            <TouchableOpacity
+              key={item.label}
+              style={[styles.infoRow, { borderBottomColor: theme.border }]}
+              onLongPress={() => copyToClipboard(item.value)}
+              activeOpacity={0.7}
+            >
+              <Text style={[styles.infoLabel, { color: theme.textSecondary }]}>{item.label}</Text>
+              <Text style={[styles.infoValue, { color: theme.text }]} selectable>
+                {item.value}
+              </Text>
+            </TouchableOpacity>
+          ))}
+        </View>
+      ))}
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 12,
+  },
+  headerTitle: { fontSize: 16, fontWeight: '700' },
+  copyAllBtn: { fontSize: 13, fontWeight: '600' },
+  group: { marginHorizontal: 12, marginBottom: 12, borderRadius: 12, overflow: 'hidden' },
+  groupTitle: {
+    fontSize: 12,
+    fontWeight: '700',
+    textTransform: 'uppercase',
+    letterSpacing: 1,
+    paddingHorizontal: 12,
+    paddingTop: 12,
+    paddingBottom: 4,
+  },
+  infoRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  infoLabel: { fontSize: 13, flex: 1 },
+  infoValue: { fontSize: 13, fontWeight: '600', flex: 1, textAlign: 'right' },
+});
+
+export function createDeviceInfoPlugin(): DebuggerPlugin {
+  return {
+    id: 'device-info',
+    name: 'Device',
+    icon: '📱',
+    component: DeviceInfoPanel,
+    order: 80,
+  };
+}