reactoradar 1.6.4 → 1.6.6

package/src/main/main.js

@@ -1,396 +0,0 @@
-'use strict';
-
-const { app, BrowserWindow, ipcMain, Menu, shell, nativeTheme } = require('electron');
-const path = require('path');
-const http = require('http');
-const { WebSocketServer, WebSocket } = require('ws');
-
-// ─── Ports ────────────────────────────────────────────────────────────────────
-const PORTS = {
-  METRO:         8081,   // Metro bundler (CDP proxy lives here)
-  REACT_DT:      8097,   // react-devtools-core server port
-  REDUX_BRIDGE:  9090,   // our custom Redux WS bridge
-  STORAGE_BRIDGE:9091,   // AsyncStorage WS bridge
-  NETWORK_BRIDGE:9092,   // Network intercept WS bridge
-};
-
-// ─── Windows ──────────────────────────────────────────────────────────────────
-let mainWindow = null;
-let devtoolsWindow = null;  // hosts the embedded CDP DevTools frontend
-
-// ─── State ────────────────────────────────────────────────────────────────────
-let reduxClients   = new Set();
-let storageClients = new Set();
-let networkClients = new Set();
-
-// ─── App lifecycle ────────────────────────────────────────────────────────────
-app.whenReady().then(async () => {
-  // Theme will be set by renderer via IPC once it reads localStorage
-  nativeTheme.themeSource = 'dark';
-
-  await createMainWindow();
-  startBridgeServers();
-  startReactDevToolsServer();
-  setupMetroCDPProxy();
-  setupIPC();
-  buildMenu();
-});
-
-app.on('window-all-closed', () => {
-  if (process.platform !== 'darwin') app.quit();
-});
-
-app.on('before-quit', () => {
-  // Close all WS servers gracefully
-  if (reactDTServer) {
-    reactDTServer.close();
-    reactDTClients.forEach(ws => ws.close());
-    reactDTClients.clear();
-  }
-});
-
-app.on('activate', () => {
-  if (BrowserWindow.getAllWindows().length === 0) createMainWindow();
-});
-
-// ─── Main Window ──────────────────────────────────────────────────────────────
-async function createMainWindow() {
-  mainWindow = new BrowserWindow({
-    width: 1400,
-    height: 900,
-    minWidth: 900,
-    minHeight: 600,
-    titleBarStyle: 'hiddenInset',
-    backgroundColor: '#0a0b0e',
-    vibrancy: 'under-window',
-    visualEffectState: 'active',
-    webPreferences: {
-      nodeIntegration: false,
-      contextIsolation: true,
-      preload: path.join(__dirname, 'preload.js'),
-    },
-    icon: path.join(__dirname, '../../assets/icon.png'),
-  });
-
-  mainWindow.loadFile(path.join(__dirname, '../renderer/index.html'));
-
-  // Open the JS Debugger panel (CDP DevTools) in a second window
-  mainWindow.webContents.on('did-finish-load', () => {
-    mainWindow.webContents.send('ports', PORTS);
-  });
-}
-
-// ─── CDP DevTools Window (JS breakpoints, Sources, Console) ──────────────────
-let lastKnownTargets = [];
-
-function openCDPWindow(target) {
-  if (devtoolsWindow && !devtoolsWindow.isDestroyed()) {
-    devtoolsWindow.focus();
-    return;
-  }
-
-  // Build the frontend URL from Metro's provided devtoolsFrontendUrl
-  // Metro /json/list returns: { devtoolsFrontendUrl: "/debugger-frontend/rn_fusebox.html?ws=...", ... }
-  let frontendUrl;
-  if (target.devtoolsFrontendUrl) {
-    // Metro provides the exact path — use it
-    frontendUrl = `http://localhost:${PORTS.METRO}${target.devtoolsFrontendUrl}`;
-  } else if (target.webSocketDebuggerUrl) {
-    // Fallback: construct URL manually with rn_fusebox (RN 0.76+) or rn_inspector (older)
-    const wsUrl = target.webSocketDebuggerUrl;
-    frontendUrl = `http://localhost:${PORTS.METRO}/debugger-frontend/rn_fusebox.html?ws=${encodeURIComponent(wsUrl)}&sources.hide_add_folder=true`;
-  } else {
-    console.warn('[CDP] No usable target URL');
-    return;
-  }
-
-  const titleSuffix = target.deviceName ? ` — ${target.deviceName}` : '';
-  devtoolsWindow = new BrowserWindow({
-    width: 1200,
-    height: 800,
-    titleBarStyle: 'hiddenInset',
-    backgroundColor: '#0a0b0e',
-    title: `JS Debugger${titleSuffix}`,
-    webPreferences: {
-      nodeIntegration: false,
-      contextIsolation: false,
-    },
-  });
-
-  console.log(`[CDP] Loading DevTools: ${frontendUrl}`);
-  devtoolsWindow.loadURL(frontendUrl);
-
-  devtoolsWindow.on('closed', () => { devtoolsWindow = null; });
-}
-
-// ─── Metro CDP — fetch targets on demand (no continuous polling) ──────────────
-// Continuous polling causes Metro's dev-middleware WebSocket to crash with
-// "readyState 3 (CLOSED)" when connections are opened/closed rapidly.
-// Instead, we fetch targets only when the user needs them.
-function fetchCDPTargets(callback) {
-  http.get(`http://localhost:${PORTS.METRO}/json/list`, (res) => {
-    let data = '';
-    res.on('data', d => data += d);
-    res.on('end', () => {
-      try {
-        const targets = JSON.parse(data);
-        const rnTargets = targets.filter(t =>
-          t.type === 'node' || t.devtoolsFrontendUrl
-        );
-        lastKnownTargets = rnTargets;
-        mainWindow?.webContents.send('cdp-targets', rnTargets);
-        if (callback) callback(rnTargets);
-      } catch (_) {
-        if (callback) callback([]);
-      }
-    });
-  }).on('error', () => {
-    lastKnownTargets = [];
-    mainWindow?.webContents.send('cdp-targets', []);
-    if (callback) callback([]);
-  });
-}
-
-function setupMetroCDPProxy() {
-  // Single fetch after app starts (not continuous polling)
-  setTimeout(() => fetchCDPTargets(), 3000);
-}
-
-// ─── React DevTools Relay Server (Component Tree + Profiler) ─────────────────
-// React Native automatically connects to ws://localhost:8097 in dev mode.
-// We run a simple WS relay on that port. When a standalone react-devtools
-// window connects (via `npx react-devtools`) or when the RN app connects,
-// we track the connection and relay messages between frontend ↔ backend.
-let reactDTServer = null;
-let reactDTClients = new Set();
-
-function startReactDevToolsServer() {
-  try {
-    reactDTServer = new WebSocketServer({ port: PORTS.REACT_DT });
-    reactDTServer.on('error', (err) => {
-      console.warn(`[ReactDT] Server error: ${err.message}`);
-      if (err.code === 'EADDRINUSE') {
-        mainWindow?.webContents.send('react-dt-status', false);
-      }
-    });
-    reactDTServer.on('connection', (ws) => {
-      reactDTClients.add(ws);
-      console.log(`[ReactDT] Client connected (total: ${reactDTClients.size})`);
-      mainWindow?.webContents.send('react-dt-status', true);
-
-      // Relay messages between all connected clients (frontend ↔ backend)
-      ws.on('message', (data) => {
-        reactDTClients.forEach((client) => {
-          if (client !== ws && client.readyState === WebSocket.OPEN) {
-            client.send(data);
-          }
-        });
-      });
-
-      ws.on('close', () => {
-        reactDTClients.delete(ws);
-        console.log(`[ReactDT] Client disconnected (total: ${reactDTClients.size})`);
-        if (reactDTClients.size === 0) {
-          mainWindow?.webContents.send('react-dt-status', false);
-        }
-      });
-    });
-    console.log(`[ReactDT] Relay server on :${PORTS.REACT_DT}`);
-  } catch (e) {
-    console.warn('[ReactDT] Failed to start relay server:', e.message);
-  }
-}
-
-// ─── Bridge Servers (Redux, Storage, Network) ─────────────────────────────────
-function startBridgeServers() {
-  // Redux Bridge
-  startBridge(PORTS.REDUX_BRIDGE, 'redux', reduxClients, (event) => {
-    mainWindow?.webContents.send('redux-event', event);
-  });
-
-  // AsyncStorage Bridge
-  startBridge(PORTS.STORAGE_BRIDGE, 'storage', storageClients, (event) => {
-    mainWindow?.webContents.send('storage-event', event);
-  });
-
-  // Network + Console + Perf Bridge (port 9092 carries all types from RNDebugSDK)
-  startBridge(PORTS.NETWORK_BRIDGE, 'network', networkClients, (event) => {
-    if (event.type === 'control') return;
-    if (event.type === 'console') {
-      mainWindow?.webContents.send('console-event', event);
-    } else if (event.type === 'perf') {
-      mainWindow?.webContents.send('perf-event', event);
-    } else {
-      mainWindow?.webContents.send('network-event', event);
-    }
-  });
-}
-
-function startBridge(port, name, clients, onEvent) {
-  const wss = new WebSocketServer({ port });
-  wss.on('connection', (ws) => {
-    clients.add(ws);
-    console.log(`[${name}] RN app connected`);
-    mainWindow?.webContents.send(`${name}-connected`, true);
-
-    ws.on('message', (raw) => {
-      try {
-        const event = JSON.parse(raw.toString());
-        onEvent(event);
-      } catch (_) {}
-    });
-
-    ws.on('close', () => {
-      clients.delete(ws);
-      if (clients.size === 0) {
-        mainWindow?.webContents.send(`${name}-connected`, false);
-      }
-    });
-  });
-  console.log(`[${name}] Bridge on :${port}`);
-}
-
-// ─── IPC from Renderer ────────────────────────────────────────────────────────
-function setupIPC() {
-  ipcMain.on('open-cdp-target', (_, wsUrl) => {
-    // Always fetch fresh targets, then open
-    fetchCDPTargets((targets) => {
-      if (wsUrl && targets.length > 0) {
-        const target = targets.find(t => t.webSocketDebuggerUrl === wsUrl) || targets[0];
-        openCDPWindow(target);
-      } else if (targets.length > 0) {
-        const target = targets.find(t =>
-          t.reactNative?.capabilities?.prefersFuseboxFrontend
-        ) || targets[0];
-        openCDPWindow(target);
-      }
-    });
-  });
-
-  ipcMain.on('open-react-devtools', () => {
-    // Open standalone react-devtools window
-    const rdtWin = new BrowserWindow({
-      width: 1100,
-      height: 700,
-      titleBarStyle: 'hiddenInset',
-      backgroundColor: '#0a0b0e',
-      title: 'React DevTools',
-      webPreferences: { nodeIntegration: false, contextIsolation: false },
-    });
-    // Metro serves the React DevTools frontend at /debugger-ui
-    rdtWin.loadURL(`http://localhost:${PORTS.METRO}/debugger-ui`);
-  });
-
-  ipcMain.on('clear-all', () => {
-    // Broadcast clear to all bridges
-    // (renderer handles local state clearing; no bridge action needed)
-  });
-
-  ipcMain.on('set-network-capture', (_, enabled) => {
-    // Broadcast to connected RN apps so they can stop/start intercepting
-    networkClients.forEach(ws => {
-      if (ws.readyState === WebSocket.OPEN) {
-        ws.send(JSON.stringify({ type: 'control', action: 'set-network-capture', enabled }));
-      }
-    });
-  });
-
-  ipcMain.on('set-network-throttle', (_, profile) => {
-    // Broadcast throttle config to connected RN apps
-    networkClients.forEach(ws => {
-      if (ws.readyState === WebSocket.OPEN) {
-        ws.send(JSON.stringify({ type: 'control', action: 'set-throttle', profile }));
-      }
-    });
-  });
-
-  ipcMain.on('set-theme', (_, theme) => {
-    nativeTheme.themeSource = theme === 'light' ? 'light' : 'dark';
-    const bg = theme === 'light' ? '#f5f6f8' : '#0a0b0e';
-    if (mainWindow && !mainWindow.isDestroyed()) {
-      mainWindow.setBackgroundColor(bg);
-    }
-  });
-}
-
-// ─── macOS App Menu ───────────────────────────────────────────────────────────
-function buildMenu() {
-  const template = [
-    {
-      label: app.name,
-      submenu: [
-        { role: 'about' },
-        { type: 'separator' },
-        { role: 'hide' }, { role: 'hideOthers' }, { role: 'unhide' },
-        { type: 'separator' },
-        { role: 'quit' },
-      ],
-    },
-    {
-      label: 'Debugger',
-      submenu: [
-        {
-          label: 'Open JS Debugger (CDP)',
-          accelerator: 'Cmd+D',
-          click: () => { mainWindow?.webContents.send('trigger-open-cdp'); },
-        },
-        {
-          label: 'Open React DevTools',
-          accelerator: 'Cmd+R',
-          click: () => { ipcMain.emit('open-react-devtools'); },
-        },
-        { type: 'separator' },
-        {
-          label: 'Clear All',
-          accelerator: 'Cmd+K',
-          click: () => { mainWindow?.webContents.send('clear-all-ui'); },
-        },
-        { type: 'separator' },
-        {
-          label: 'Toggle Dark/Light Mode',
-          accelerator: 'Cmd+Shift+T',
-          click: () => {
-            const next = nativeTheme.themeSource === 'dark' ? 'light' : 'dark';
-            nativeTheme.themeSource = next;
-            const bg = next === 'light' ? '#f5f6f8' : '#0a0b0e';
-            if (mainWindow && !mainWindow.isDestroyed()) {
-              mainWindow.setBackgroundColor(bg);
-              mainWindow.webContents.send('theme-changed', next);
-            }
-          },
-        },
-      ],
-    },
-    {
-      label: 'Edit',
-      submenu: [
-        { role: 'undo' },
-        { role: 'redo' },
-        { type: 'separator' },
-        { role: 'cut' },
-        { role: 'copy' },
-        { role: 'paste' },
-        { role: 'selectAll' },
-      ],
-    },
-    {
-      label: 'View',
-      submenu: [
-        { role: 'reload' }, { role: 'forceReload' },
-        { type: 'separator' },
-        { role: 'resetZoom' }, { role: 'zoomIn' }, { role: 'zoomOut' },
-        { type: 'separator' },
-        { role: 'togglefullscreen' },
-      ],
-    },
-    {
-      label: 'Window',
-      submenu: [
-        { role: 'minimize' }, { role: 'zoom' },
-        { type: 'separator' },
-        { role: 'front' },
-      ],
-    },
-  ];
-  Menu.setApplicationMenu(Menu.buildFromTemplate(template));
-}

package/src/main/preload.js

@@ -1,28 +0,0 @@
-'use strict';
-
-const { contextBridge, ipcRenderer } = require('electron');
-
-const registeredChannels = new Set();
-
-contextBridge.exposeInMainWorld('electronAPI', {
-  // Listen from main (idempotent — only one listener per channel)
-  on: (channel, cb) => {
-    const allowed = [
-      'ports', 'cdp-targets', 'redux-event', 'storage-event', 'network-event',
-      'console-event', 'perf-event', 'redux-connected', 'storage-connected', 'network-connected',
-      'react-dt-status', 'trigger-open-cdp', 'clear-all-ui', 'theme-changed',
-    ];
-    if (allowed.includes(channel)) {
-      ipcRenderer.removeAllListeners(channel);
-      registeredChannels.add(channel);
-      ipcRenderer.on(channel, (_, ...args) => cb(...args));
-    }
-  },
-  // Send to main
-  openCDPTarget: (wsUrl) => ipcRenderer.send('open-cdp-target', wsUrl),
-  openReactDevTools: () => ipcRenderer.send('open-react-devtools'),
-  clearAll: () => ipcRenderer.send('clear-all'),
-  setTheme: (theme) => ipcRenderer.send('set-theme', theme),
-  setNetworkCapture: (enabled) => ipcRenderer.send('set-network-capture', enabled),
-  setNetworkThrottle: (profile) => ipcRenderer.send('set-network-throttle', profile),
-});

package/src/renderer/app.js

@@ -1,221 +0,0 @@
-'use strict';
-
-const state = window.RNDebug.state;
-const $ = window.RNDebug.$;
-
-// Pull in all needed functions from window.RNDebug
-const renderConsole = window.RNDebug.renderConsole;
-const renderNetwork = window.RNDebug.renderNetwork;
-const renderStorage = window.RNDebug.renderStorage;
-const renderRedux = window.RNDebug.renderRedux;
-const closeNetDetail = window.RNDebug.closeNetDetail;
-const clearPerfCanvas = window.RNDebug.clearPerfCanvas;
-const handleReduxEvent = window.RNDebug.handleReduxEvent;
-const handleNetworkEvent = window.RNDebug.handleNetworkEvent;
-const handleStorageEvent = window.RNDebug.handleStorageEvent;
-const handlePerfEvent = window.RNDebug.handlePerfEvent;
-const handleMemoryEvent = window.RNDebug.handleMemoryEvent;
-const updateSourcesPanel = window.RNDebug.updateSourcesPanel;
-const setStoredTheme = window.RNDebug.setStoredTheme;
-const getStoredTheme = window.RNDebug.getStoredTheme;
-const applyTheme = window.RNDebug.applyTheme;
-const perfState = window.RNDebug.perfState;
-
-const initConsolePanel = window.RNDebug.initConsolePanel;
-const initSourcesPanel = window.RNDebug.initSourcesPanel;
-const initNetworkPanel = window.RNDebug.initNetworkPanel;
-const initPerformancePanel = window.RNDebug.initPerformancePanel;
-const initMemoryPanel = window.RNDebug.initMemoryPanel;
-const initReduxPanel = window.RNDebug.initReduxPanel;
-const initStoragePanel = window.RNDebug.initStoragePanel;
-const initReactPanel = window.RNDebug.initReactPanel;
-const initSettingsPanel = window.RNDebug.initSettingsPanel;
-
-// ─── Navigation ───────────────────────────────────────────────────────────────
-document.querySelectorAll('.nav-btn').forEach(btn => {
-  btn.addEventListener('click', () => {
-    const panel = btn.dataset.panel;
-    document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));
-    document.querySelectorAll('.panel').forEach(p => p.classList.remove('active'));
-    btn.classList.add('active');
-    $(`panel-${panel}`).classList.add('active');
-    state.activePanel = panel;
-  });
-});
-
-// ─── Filter ───────────────────────────────────────────────────────────────────
-$('filterInput').addEventListener('input', e => {
-  state.filter = e.target.value.toLowerCase().trim();
-  renderConsole();
-  renderNetwork();
-  renderStorage();
-});
-
-// ─── Clear (active tab only) ──────────────────────────────────────────────────
-$('btnClear').addEventListener('click', clearActiveTab);
-
-function clearActiveTab() {
-  switch (state.activePanel) {
-    case 'console':
-      state.console.logs = [];
-      window.RNDebug._setConsolePending([]);
-      $('cBadge').textContent = '0';
-      renderConsole();
-      break;
-    case 'network':
-      state.network.requests = {};
-      state.network.order = [];
-      state.network.selectedId = null;
-      closeNetDetail();
-      $('nBadge').textContent = '0';
-      renderNetwork();
-      break;
-    case 'redux':
-      state.redux.actions = [];
-      state.redux.states = [];
-      state.redux.selected = -1;
-      $('rBadge').textContent = '0';
-      renderRedux();
-      break;
-    case 'storage':
-      state.storage.entries = {};
-      state.storage.keys = [];
-      state.storage.selected = null;
-      $('sBadge').textContent = '0';
-      renderStorage();
-      break;
-    case 'performance':
-      perfState.fps = [];
-      perfState.jsThread = [];
-      perfState.uiThread = [];
-      perfState.data = [];
-      const perfFPS = $('perfFPS'); if (perfFPS) perfFPS.textContent = '—';
-      const perfJS = $('perfJS'); if (perfJS) perfJS.textContent = '—';
-      const perfUI = $('perfUI'); if (perfUI) perfUI.textContent = '—';
-      clearPerfCanvas('perfFPSCanvas');
-      clearPerfCanvas('perfJSCanvas');
-      clearPerfCanvas('perfUICanvas');
-      break;
-    case 'memory':
-      const memHU = $('memHeapUsed'); if (memHU) memHU.textContent = '—';
-      const memHT = $('memHeapTotal'); if (memHT) memHT.textContent = '—';
-      const memN = $('memNative'); if (memN) memN.textContent = '—';
-      break;
-    default:
-      break;
-  }
-}
-
-// Clear all (used by IPC clear-all-ui from menu Cmd+K)
-function clearAll() {
-  state.console.logs = [];
-  window.RNDebug._setConsolePending([]);
-  state.network.requests = {};
-  state.network.order = [];
-  state.network.selectedId = null;
-  closeNetDetail();
-  state.redux.actions = [];
-  state.redux.states = [];
-  state.redux.selected = -1;
-  state.storage.entries = {};
-  state.storage.keys = [];
-  state.storage.selected = null;
-  $('cBadge').textContent = '0';
-  $('nBadge').textContent = '0';
-  $('rBadge').textContent = '0';
-  $('sBadge').textContent = '0';
-  renderConsole();
-  renderNetwork();
-  renderRedux();
-  renderStorage();
-}
-
-// ─── CDP Button ───────────────────────────────────────────────────────────────
-$('btnCDP').addEventListener('click', () => {
-  // Tell main process to open the CDP DevTools window with the best available target
-  window.electronAPI?.openCDPTarget(null); // null = use latest known target
-});
-
-// ─────────────────────────────────────────────────────────────────────────────
-// IPC from Main
-// ─────────────────────────────────────────────────────────────────────────────
-if (window.electronAPI) {
-  window.electronAPI.on('ports', ports => { state.ports = ports; });
-
-  window.electronAPI.on('cdp-targets', targets => {
-    const hasCDP = targets?.length > 0;
-    $('btnCDP').textContent = hasCDP
-      ? `JS Debugger (${targets.length}) ↗`
-      : 'JS Debugger ↗';
-    $('btnCDP').style.opacity = hasCDP ? '1' : '0.5';
-    if (hasCDP) {
-      $('btnCDP').onclick = () => window.electronAPI.openCDPTarget(targets[0].webSocketDebuggerUrl);
-    }
-    // Also update Sources panel file list
-    updateSourcesPanel(targets);
-  });
-
-  window.electronAPI.on('redux-event', handleReduxEvent);
-  window.electronAPI.on('network-event', handleNetworkEvent);
-  window.electronAPI.on('storage-event', handleStorageEvent);
-
-  window.electronAPI.on('perf-event', event => {
-    handlePerfEvent(event);
-    handleMemoryEvent(event);
-  });
-
-  window.electronAPI.on('redux-connected', on => { updateDeviceBanner('redux', on); });
-  window.electronAPI.on('network-connected', on => { updateDeviceBanner('network', on); });
-  window.electronAPI.on('storage-connected', on => { updateDeviceBanner('storage', on); });
-  window.electronAPI.on('react-dt-status', on => { updateDeviceBanner('reactDT', on); });
-
-  window.electronAPI.on('clear-all-ui', clearAll);
-
-  // Theme toggle from menu shortcut (Cmd+Shift+T)
-  window.electronAPI.on('theme-changed', theme => {
-    document.documentElement.setAttribute('data-theme', theme);
-    setStoredTheme(theme);
-    // Update settings panel buttons if visible
-    document.querySelectorAll('#themeSwitcher .theme-option')
-      .forEach(b => b.classList.toggle('active', b.dataset.theme === theme));
-  });
-}
-
-// ─── Device Connection Status (inline in titlebar) ───────────────────────────
-function updateDeviceBanner(service, connected) {
-  state.connections[service] = connected;
-  const el = $('deviceStatus');
-  const text = $('deviceText');
-  if (!el || !text) return;
-
-  const any = state.connections.redux || state.connections.network || state.connections.storage || state.connections.reactDT;
-
-  if (any) {
-    el.className = 'device-status connected';
-    text.textContent = 'Device connected';
-  } else {
-    el.className = 'device-status waiting';
-    text.textContent = 'Waiting for device...';
-  }
-}
-
-// ─── Apply saved theme on load ───────────────────────────────────────────────
-applyTheme(getStoredTheme());
-
-// ─────────────────────────────────────────────────────────────────────────────
-// INIT
-// ─────────────────────────────────────────────────────────────────────────────
-initConsolePanel();
-initSourcesPanel();
-initNetworkPanel();
-initPerformancePanel();
-initMemoryPanel();
-initReduxPanel();
-initStoragePanel();
-initReactPanel();
-initSettingsPanel();
-
-// ─── Export via window.RNDebug ────────────────────────────────────────────────
-window.RNDebug.clearActiveTab = clearActiveTab;
-window.RNDebug.clearAll = clearAll;
-window.RNDebug.updateDeviceBanner = updateDeviceBanner;