reactoradar 1.6.4 → 1.6.6

package/src/renderer/panels/storage.js

@@ -1,134 +0,0 @@
-'use strict';
-
-const state = window.RNDebug.state;
-const $ = window.RNDebug.$;
-const esc = window.RNDebug.esc;
-const highlight = window.RNDebug.highlight;
-const formatSize = window.RNDebug.formatSize;
-const renderJSON = window.RNDebug.renderJSON;
-
-// ─────────────────────────────────────────────────────────────────────────────
-// ASYNC STORAGE PANEL
-// ─────────────────────────────────────────────────────────────────────────────
-function initStoragePanel() {
-  const panel = $('panel-storage');
-  panel.innerHTML = `
-    <div class="panel-toolbar">
-      <span class="panel-label">AsyncStorage</span>
-      <span class="badge" id="sBadge">0</span>
-    </div>
-    <div class="storage-layout">
-      <div class="storage-keys">
-        <div class="panel-toolbar" style="height:32px">
-          <span style="font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px">Keys</span>
-        </div>
-        <div class="scroll-area storage-keys-list" id="storageKeyList">
-          <div class="empty-state" id="storageEmpty">
-            <div class="icon">💾</div>
-            <div class="label">No storage data</div>
-            <div class="hint">Add storage plugin to RNDebugPlugin</div>
-          </div>
-        </div>
-      </div>
-      <div class="storage-value-view">
-        <div class="storage-value-toolbar">
-          <span style="font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px">Value</span>
-          <span id="storageSelectedKey" style="font-size:11px;color:var(--accent);margin-left:8px"></span>
-        </div>
-        <div class="storage-value-body" id="storageValueBody">
-          <span style="color:var(--text-dim)">Select a key to view its value</span>
-        </div>
-      </div>
-    </div>`;
-}
-
-let _storageRAF = null;
-let _storageChanged = false;
-
-function handleStorageEvent(event) {
-  if (event.type !== 'storage') return;
-  const { key, value, action } = event;
-  if (action === 'set' || action === 'snapshot') {
-    if (action === 'snapshot' && typeof key === 'object') {
-      // Skip if data hasn't changed
-      const newKeys = Object.keys(key).sort().join(',');
-      const oldKeys = state.storage.keys.sort().join(',');
-      if (newKeys === oldKeys) {
-        // Check if values changed
-        let same = true;
-        for (const [k, v] of Object.entries(key)) {
-          if (state.storage.entries[k] !== v) { same = false; break; }
-        }
-        if (same) return; // No changes, skip re-render
-      }
-      Object.entries(key).forEach(([k, v]) => {
-        state.storage.entries[k] = v;
-        if (!state.storage.keys.includes(k)) state.storage.keys.push(k);
-      });
-    } else {
-      if (state.storage.entries[key] === value) return; // No change
-      state.storage.entries[key] = value;
-      if (!state.storage.keys.includes(key)) state.storage.keys.push(key);
-    }
-  } else if (action === 'remove') {
-    if (!(key in state.storage.entries)) return; // Already removed
-    delete state.storage.entries[key];
-    state.storage.keys = state.storage.keys.filter(k => k !== key);
-    if (state.storage.selected === key) state.storage.selected = null;
-  }
-  $('sBadge').textContent = state.storage.keys.length;
-  // Debounce render via rAF
-  if (!_storageRAF) {
-    _storageRAF = requestAnimationFrame(() => {
-      _storageRAF = null;
-      renderStorage();
-    });
-  }
-}
-
-function renderStorage() {
-  const list = $('storageKeyList');
-  const empty = $('storageEmpty');
-  if (!list) return;
-
-  const visible = state.storage.keys.filter(k =>
-    !state.filter || k.toLowerCase().includes(state.filter)
-  );
-
-  empty.style.display = visible.length ? 'none' : 'flex';
-  list.querySelectorAll('.storage-key-row').forEach(e => e.remove());
-
-  const frag = document.createDocumentFragment();
-  visible.forEach(k => {
-    const div = document.createElement('div');
-    const val = state.storage.entries[k] || '';
-    div.className = 'storage-key-row entry' + (k === state.storage.selected ? ' selected' : '');
-    div.innerHTML = `
-      <span class="key-name">${highlight(esc(k), state.filter)}</span>
-      <span class="key-size">${formatSize(val.length)}</span>`;
-    div.onclick = () => { state.storage.selected = k; renderStorage(); renderStorageValue(); };
-    frag.appendChild(div);
-  });
-  list.appendChild(frag);
-  renderStorageValue();
-}
-
-function renderStorageValue() {
-  const body = $('storageValueBody');
-  const keyLabel = $('storageSelectedKey');
-  if (!body) return;
-  const { selected, entries } = state.storage;
-  if (!selected) {
-    body.innerHTML = '<span style="color:var(--text-dim)">Select a key</span>';
-    if (keyLabel) keyLabel.textContent = '';
-    return;
-  }
-  if (keyLabel) keyLabel.textContent = selected;
-  body.innerHTML = renderJSON(entries[selected]);
-}
-
-// ─── Export via window.RNDebug ────────────────────────────────────────────────
-window.RNDebug.initStoragePanel = initStoragePanel;
-window.RNDebug.handleStorageEvent = handleStorageEvent;
-window.RNDebug.renderStorage = renderStorage;
-window.RNDebug.renderStorageValue = renderStorageValue;

package/src/renderer/state.js

@@ -1,132 +0,0 @@
-'use strict';
-
-// ─── Shared namespace ─────────────────────────────────────────────────────────
-window.RNDebug = window.RNDebug || {};
-
-// ─── State ────────────────────────────────────────────────────────────────────
-window.RNDebug.state = {
-  filter: '',
-  activePanel: 'console',
-  ports: {},
-
-  console: { logs: [], levelFilter: 'all' },
-
-  network: {
-    requests: {},
-    order: [],
-    statusFilter: 'all',
-    typeFilter: 'all',
-    searchFilter: '',
-    throttle: 'none',
-    enabled: true,
-    selectedId: null,
-    sortCol: 'time',
-    sortDir: 'desc',
-  },
-
-  redux: {
-    actions: [],     // { type, payload, index, ts }
-    states: [],      // full state snapshot after each action
-    selected: -1,
-    stateTab: 'state', // 'state' | 'diff' | 'action'
-    travelIndex: -1,
-  },
-
-  storage: {
-    entries: {},    // key → value string
-    keys: [],       // ordered keys
-    selected: null,
-  },
-
-  // Device connection tracking
-  connections: { redux: false, network: false, storage: false, reactDT: false },
-};
-
-// ─── Helpers ──────────────────────────────────────────────────────────────────
-const $ = id => document.getElementById(id);
-const esc = s => s == null ? '' : String(s)
-  .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
-const ts = ms => new Date(ms).toLocaleTimeString('en',{hour12:false,hour:'2-digit',minute:'2-digit',second:'2-digit'});
-const cls = (el, ...classes) => { el.className = classes.filter(Boolean).join(' '); return el; };
-
-function pretty(val) {
-  if (val == null) return '';
-  if (typeof val === 'string') { try { return JSON.stringify(JSON.parse(val),null,2); } catch{} return val; }
-  return JSON.stringify(val, null, 2);
-}
-
-function syntaxHighlight(json) {
-  return json
-    .replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)/g, m => {
-      if (/^"/.test(m)) return /:$/.test(m) ? `<span class="json-key">${m}</span>` : `<span class="json-str">${m}</span>`;
-      if (/true|false/.test(m)) return `<span class="json-bool">${m}</span>`;
-      if (/null/.test(m)) return `<span class="json-null">${m}</span>`;
-      return `<span class="json-num">${m}</span>`;
-    });
-}
-
-function renderJSON(val) {
-  try {
-    const str = typeof val === 'string' ? val : JSON.stringify(val, null, 2);
-    return syntaxHighlight(esc(str));
-  } catch { return esc(String(val)); }
-}
-
-function tryURL(url) { try { return new URL(url); } catch { return null; } }
-
-// Extract short "filename:line" from a stack frame like "at Component (/path/to/file.js:42:10)"
-function extractCallerShort(caller) {
-  if (!caller) return '';
-  // Match patterns like "filename.js:123" or "filename.tsx:123"
-  const m = caller.match(/([^/\\\s]+\.[jt]sx?):(\d+)/);
-  if (m) return `${m[1]}:${m[2]}`;
-  // Fallback: just trim and shorten
-  const trimmed = caller.replace(/^\s*at\s+/, '').trim();
-  return trimmed.length > 40 ? trimmed.slice(-40) : trimmed;
-}
-
-function highlight(html, term) {
-  if (!term) return html;
-  const re = new RegExp(`(${term.replace(/[.*+?^${}()|[\]\\]/g,'\\$&')})`, 'gi');
-  return html.replace(re, '<mark>$1</mark>');
-}
-
-function formatSize(bytes) {
-  if (bytes < 1024) return `${bytes}b`;
-  return `${(bytes/1024).toFixed(1)}kb`;
-}
-
-// ─── Shared context menu helper ──────────────────────────────────────────────
-function showContextMenu(e, items) {
-  document.querySelectorAll('.ctx-menu').forEach(el => el.remove());
-  const menu = document.createElement('div');
-  menu.className = 'ctx-menu';
-  items.forEach(({ label, action }) => {
-    const item = document.createElement('div');
-    item.className = 'ctx-item';
-    item.textContent = label;
-    item.addEventListener('click', () => { action(); menu.remove(); });
-    menu.appendChild(item);
-  });
-  menu.style.left = Math.min(e.clientX, window.innerWidth - 200) + 'px';
-  menu.style.top = Math.min(e.clientY, window.innerHeight - items.length * 32 - 10) + 'px';
-  document.body.appendChild(menu);
-  setTimeout(() => {
-    const close = (ev) => { if (!menu.contains(ev.target)) { menu.remove(); document.removeEventListener('click', close); } };
-    document.addEventListener('click', close);
-  }, 0);
-}
-
-// ─── Export all via window.RNDebug ────────────────────────────────────────────
-window.RNDebug.$ = $;
-window.RNDebug.esc = esc;
-window.RNDebug.ts = ts;
-window.RNDebug.cls = cls;
-window.RNDebug.pretty = pretty;
-window.RNDebug.syntaxHighlight = syntaxHighlight;
-window.RNDebug.renderJSON = renderJSON;
-window.RNDebug.tryURL = tryURL;
-window.RNDebug.extractCallerShort = extractCallerShort;
-window.RNDebug.highlight = highlight;
-window.RNDebug.formatSize = formatSize;
-window.RNDebug.showContextMenu = showContextMenu;

package/src/renderer/styles/components.css

@@ -1,145 +0,0 @@
-/* ── Object Inspector Tree (Chrome DevTools-like) ────────────────────────── */
-.ov-node { margin: 0; }
-.ov-header {
-  display: inline-flex;
-  align-items: baseline;
-  gap: 2px;
-  cursor: pointer;
-  padding: 1px 0;
-  border-radius: 2px;
-}
-.ov-arrow { user-select: none; -webkit-user-select: none; }
-.ov-header:hover { background: var(--bg3); }
-.ov-arrow {
-  display: inline-block;
-  width: 12px;
-  font-size: 8px;
-  color: var(--text-dim);
-  text-align: center;
-  flex-shrink: 0;
-  transition: transform 0.1s;
-}
-.ov-key { color: var(--accent); }
-.ov-preview { color: var(--text-dim); font-style: italic; }
-.ov-children { padding-left: 16px; border-left: 1px solid var(--border); margin-left: 5px; }
-.ov-leaf { padding: 1px 0 1px 14px; line-height: 1.55; }
-.ov-meta { color: var(--text-dim); font-style: italic; font-size: 10px; }
-
-/* Value type colors */
-.ov-str  { color: var(--green); }
-.ov-num  { color: var(--orange); }
-.ov-bool { color: var(--accent2); }
-.ov-null { color: var(--text-dim); font-style: italic; }
-.ov-undef { color: var(--text-dim); font-style: italic; }
-
-/* JSON syntax highlighting */
-.json-key   { color: var(--accent); }
-.json-str   { color: var(--green); }
-.json-num   { color: var(--orange); }
-.json-bool  { color: var(--accent2); }
-.json-null  { color: var(--text-dim); }
-
-/* highlight */
-mark { background: rgba(79,172,255,.2); color: var(--accent); border-radius: 2px; padding: 0 1px; }
-
-/* ── Toggle Switch ──────────────────────────────────────────────────────────── */
-.toggle-label {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  cursor: pointer;
-  -webkit-app-region: no-drag;
-}
-.toggle-text {
-  font-size: 10px;
-  font-weight: 500;
-  color: var(--text-dim);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-.toggle-input { display: none; }
-.toggle-slider {
-  position: relative;
-  width: 28px;
-  height: 16px;
-  border-radius: 8px;
-  background: var(--bg4);
-  border: 1px solid var(--border2);
-  transition: background 0.2s;
-}
-.toggle-slider::after {
-  content: '';
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: var(--text-dim);
-  transition: transform 0.2s, background 0.2s;
-}
-.toggle-input:checked + .toggle-slider {
-  background: var(--green);
-  border-color: var(--green);
-}
-.toggle-input:checked + .toggle-slider::after {
-  transform: translateX(12px);
-  background: #fff;
-}
-
-/* Context menu */
-.ctx-menu {
-  position: fixed;
-  background: var(--bg2);
-  border: 1px solid var(--border2);
-  border-radius: 6px;
-  padding: 4px 0;
-  min-width: 180px;
-  box-shadow: 0 4px 16px rgba(0,0,0,.3);
-  z-index: 1000;
-  font-size: 11px;
-}
-.ctx-item {
-  padding: 6px 14px;
-  cursor: pointer;
-  color: var(--text);
-  transition: background 0.1s;
-}
-.ctx-item:hover { background: var(--bg4); color: var(--accent); }
-
-/* ─────────────────────────────────────────────────────────────────────────────
-   REACT TREE PANEL (iframe wrapper)
-───────────────────────────────────────────────────────────────────────────── */
-.react-panel-inner {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-.react-devtools-iframe {
-  flex: 1;
-  border: none;
-  background: #1a1d24;
-  width: 100%;
-}
-.react-connect-hint {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  gap: 14px;
-  color: var(--text-dim);
-}
-.react-connect-hint code { background: var(--bg3); padding: 3px 8px; border-radius: 4px; color: var(--accent); font-size: 11px; }
-.btn-launch {
-  padding: 8px 20px;
-  border-radius: 6px;
-  border: 1px solid var(--accent);
-  background: rgba(79,172,255,.1);
-  color: var(--accent);
-  font-family: inherit;
-  font-size: 12px;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-.btn-launch:hover { background: rgba(79,172,255,.2); }

package/src/renderer/styles/console.css

@@ -1,73 +0,0 @@
-/* ─────────────────────────────────────────────────────────────────────────────
-   CONSOLE PANEL
-───────────────────────────────────────────────────────────────────────────── */
-.log-row {
-  display: grid;
-  grid-template-columns: 58px 44px 1fr;
-  gap: 8px;
-  align-items: baseline;
-  padding: 4px 14px;
-  border-bottom: 1px solid transparent;
-  transition: background 0.08s;
-  cursor: default;
-}
-.log-row:hover { background: var(--bg3); }
-.log-row.warn  { background: rgba(245,200,66,.03); border-bottom-color: rgba(245,200,66,.06); }
-.log-row.error { background: rgba(255,94,114,.04); border-bottom-color: rgba(255,94,114,.07); }
-
-.log-time { color: var(--text-dim); font-size: 10px; white-space: nowrap; }
-
-.lvl-badge { display: inline-block; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.5px; }
-.lvl-log   { background: rgba(200,210,230,.07); color: var(--text-dim); }
-.lvl-info  { background: rgba(79,172,255,.12);  color: var(--accent); }
-.lvl-warn  { background: rgba(245,200,66,.12);  color: var(--yellow); }
-.lvl-error { background: rgba(255,94,114,.15);  color: var(--red); }
-.lvl-debug { background: rgba(155,127,255,.12); color: var(--accent2); }
-
-.log-body-wrap {
-  display: flex;
-  flex-direction: column;
-  cursor: pointer;
-  min-width: 0;
-}
-.log-arrow {
-  display: inline-block;
-  width: 14px;
-  font-size: 8px;
-  color: var(--text-dim);
-  flex-shrink: 0;
-  user-select: none;
-  -webkit-user-select: none;
-  margin-bottom: 1px;
-}
-.log-arrow.expanded { color: var(--accent); }
-.log-preview {
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-  color: var(--text);
-  font-size: 11px;
-  line-height: 1.5;
-  overflow: hidden;
-  white-space: nowrap;
-  user-select: text;
-  -webkit-user-select: text;
-}
-.log-preview > span:first-child {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex: 1;
-  min-width: 0;
-}
-.log-caller-inline {
-  flex-shrink: 0;
-  font-size: 10px;
-  color: var(--text-dim);
-  opacity: 0.7;
-}
-.log-full {
-  padding-top: 4px;
-}
-.log-body { color: var(--text); white-space: pre-wrap; word-break: break-word; line-height: 1.55; user-select: text; -webkit-user-select: text; cursor: text; }
-.log-text { color: var(--text); }
-.log-caller { display: block; color: var(--text-dim); font-size: 10px; margin-top: 3px; }