zero-query 0.6.3 → 0.8.6

package/cli/commands/dev/devtools/js/router.js

@@ -0,0 +1,105 @@
+// ===================================================================
+// Router panel
+// ===================================================================
+function renderRouter() {
+  var content = document.getElementById('router-content');
+  if (!content) return;
+  var html = '';
+
+  // Current route card
+  var router = null;
+  try { router = targetWin && targetWin.$ && targetWin.$.getRouter(); } catch(e) {}
+
+  html += '<div class="router-card">';
+  html += '<div class="router-title">Current Route</div>';
+  if (router && router.current) {
+    var cur = router.current;
+    html += '<div class="router-row"><span class="router-key">Path</span><span class="router-val">' + esc(cur.path || '/') + '</span></div>';
+    if (cur.route && cur.route.component) {
+      html += '<div class="router-row"><span class="router-key">Component</span><span class="router-val" style="color:var(--purple)">' + esc(cur.route.component) + '</span></div>';
+    }
+    if (cur.params && Object.keys(cur.params).length) {
+      html += '<div class="router-row"><span class="router-key">Params</span><span class="router-val">' + esc(JSON.stringify(cur.params)) + '</span></div>';
+    }
+    if (cur.query && Object.keys(cur.query).length) {
+      html += '<div class="router-row"><span class="router-key">Query</span><span class="router-val">' + esc(JSON.stringify(cur.query)) + '</span></div>';
+    }
+    html += '<div class="router-row"><span class="router-key">Mode</span><span class="router-val">' + esc(router._mode || 'history') + '</span></div>';
+    if (router._base) {
+      html += '<div class="router-row"><span class="router-key">Base</span><span class="router-val">' + esc(router._base) + '</span></div>';
+    }
+  } else {
+    html += '<div class="router-row" style="color:var(--text2)">No router detected</div>';
+  }
+  html += '</div>';
+
+  // Guards & listeners
+  if (router) {
+    html += '<div class="router-card">';
+    html += '<div class="router-title">Guards & Listeners</div>';
+    var beforeCt = router._guards ? router._guards.before.length : 0;
+    var afterCt = router._guards ? router._guards.after.length : 0;
+    var substateCt = router._substateListeners ? router._substateListeners.length : 0;
+    var onChangeCt = router._listeners ? router._listeners.size : 0;
+    html += '<div class="router-row"><span class="router-key">beforeEach</span><span class="router-val">' + beforeCt + ' guard' + (beforeCt !== 1 ? 's' : '') + '</span></div>';
+    html += '<div class="router-row"><span class="router-key">afterEach</span><span class="router-val">' + afterCt + ' guard' + (afterCt !== 1 ? 's' : '') + '</span></div>';
+    html += '<div class="router-row"><span class="router-key">onSubstate</span><span class="router-val">' + substateCt + ' listener' + (substateCt !== 1 ? 's' : '') + '</span></div>';
+    html += '<div class="router-row"><span class="router-key">onChange</span><span class="router-val">' + onChangeCt + ' watcher' + (onChangeCt !== 1 ? 's' : '') + '</span></div>';
+    // Active substates in the history stack (computed from timeline)
+    var activeSubs = 0;
+    for (var si = 0; si < routerEvents.length; si++) {
+      var act = routerEvents[si].action;
+      if (act === 'substate') activeSubs++;
+      else if (act === 'pop-substate') activeSubs = Math.max(0, activeSubs - 1);
+      else if (act === 'navigate' || act === 'pop') activeSubs = 0;
+    }
+    html += '<div class="router-row"><span class="router-key">Substates</span><span class="router-val" style="color:' + (activeSubs > 0 ? 'var(--purple)' : 'var(--text2)') + '">' + activeSubs + ' in stack</span></div>';
+    html += '</div>';
+
+    // Registered routes
+    html += '<div class="router-card">';
+    html += '<div class="router-title">Registered Routes <span style="color:var(--text2);font-weight:400">(' + router._routes.length + ')</span></div>';
+    for (var ri = 0; ri < router._routes.length; ri++) {
+      var r = router._routes[ri];
+      html += '<div class="router-row">';
+      html += '<span class="router-val" style="color:var(--accent)">' + esc(r.path) + '</span>';
+      if (r.component) html += '<span style="color:var(--purple);margin-left:8px">' + esc(r.component) + '</span>';
+      if (r.load) html += '<span style="color:var(--yellow);margin-left:4px;font-size:9px">[lazy]</span>';
+      html += '</div>';
+    }
+    html += '</div>';
+  }
+
+  // History timeline
+  html += '<div class="router-card">';
+  html += '<div class="router-title">History Timeline <span style="color:var(--text2);font-weight:400">(' + routerEvents.length + ')</span></div>';
+  if (routerEvents.length === 0) {
+    html += '<div style="color:var(--text2);padding:8px 0;font-size:11px">No navigation events recorded yet</div>';
+  } else {
+    html += '<div class="router-timeline">';
+    for (var i = routerEvents.length - 1; i >= Math.max(0, routerEvents.length - 50); i--) {
+      var ev = routerEvents[i];
+      var badgeClass = 'nav';
+      if (ev.action === 'replace') badgeClass = 'replace';
+      else if (ev.action === 'substate' || ev.action === 'pop-substate') badgeClass = 'substate';
+      else if (ev.action === 'pop') badgeClass = 'pop';
+      else if (ev.action === 'hashchange') badgeClass = 'hash';
+      html += '<div class="router-event">';
+      html += '<span class="router-badge ' + badgeClass + '">' + esc(ev.action.toUpperCase()) + '</span>';
+      html += '<div style="flex:1;min-width:0">';
+      html += '<div class="router-url">' + esc(ev.url || '') + '</div>';
+      if (ev.key) {
+        html += '<div class="router-detail">key: <span style="color:var(--purple)">' + esc(ev.key) + '</span>';
+        if (ev.data != null) html += ' &middot; data: <span style="color:var(--green)">' + esc(JSON.stringify(ev.data)) + '</span>';
+        html += '</div>';
+      }
+      html += '</div>';
+      html += '<span class="timestamp">' + formatTime(ev.timestamp) + '</span>';
+      html += '</div>';
+    }
+    html += '</div>';
+  }
+  html += '</div>';
+
+  content.innerHTML = html;
+}

package/cli/commands/dev/devtools/js/source.js

@@ -0,0 +1,132 @@
+// ===================================================================
+// Source Viewer Overlay
+// ===================================================================
+var sourceOverlay = document.getElementById('source-overlay');
+var sourceTitle = document.getElementById('source-title');
+var sourceContent = document.getElementById('source-content');
+document.getElementById('source-close').addEventListener('click', function() {
+  sourceOverlay.classList.remove('open');
+});
+sourceOverlay.addEventListener('click', function(e) {
+  if (e.target === sourceOverlay) sourceOverlay.classList.remove('open');
+});
+document.addEventListener('keydown', function(e) {
+  if (e.key === 'Escape' && sourceOverlay.classList.contains('open')) {
+    sourceOverlay.classList.remove('open');
+  }
+});
+
+function openSourceViewer(label, text, isCSS) {
+  sourceTitle.innerHTML = label || 'Source';
+  var body = sourceOverlay.querySelector('.source-body');
+  if (isCSS) {
+    body.innerHTML = buildCSSTree(text || '');
+  } else {
+    body.innerHTML = '<pre id="source-content"></pre>';
+    body.querySelector('pre').textContent = text || '';
+  }
+  sourceOverlay.classList.add('open');
+}
+
+// Delegated click for CSS tree toggle (always wired, doesn't stack)
+sourceOverlay.querySelector('.source-body').addEventListener('click', function(e) {
+  var sel = e.target.closest('.css-sel');
+  if (!sel) return;
+  var arrow = sel.querySelector('.css-arrow');
+  var props = sel.nextElementSibling;
+  if (props && props.classList.contains('css-props')) {
+    props.classList.toggle('open');
+    if (arrow) arrow.classList.toggle('open');
+  }
+});
+
+function buildCSSTree(css) {
+  var html = '<div class="css-tree">';
+  // Simple CSS parser: split into rules, comments, and at-rules
+  var i = 0, len = css.length;
+  while (i < len) {
+    // Skip whitespace
+    while (i < len && /\s/.test(css[i])) i++;
+    if (i >= len) break;
+    // Comment
+    if (css[i] === '/' && css[i+1] === '*') {
+      var end = css.indexOf('*/', i + 2);
+      if (end === -1) end = len;
+      else end += 2;
+      html += '<div class="css-comment">' + esc(css.slice(i, end)) + '</div>';
+      i = end;
+      continue;
+    }
+    // Find selector (everything up to {)
+    var bracePos = css.indexOf('{', i);
+    if (bracePos === -1) {
+      // Remaining text (malformed)
+      html += '<div class="css-comment">' + esc(css.slice(i).trim()) + '</div>';
+      break;
+    }
+    var selector = css.slice(i, bracePos).trim();
+    i = bracePos + 1;
+    // Find matching closing brace (handle nesting for @media etc, skip comments and strings)
+    var depth = 1, bodyStart = i;
+    while (i < len && depth > 0) {
+      // Skip comments
+      if (css[i] === '/' && css[i+1] === '*') {
+        i += 2;
+        while (i < len && !(css[i] === '*' && css[i+1] === '/')) i++;
+        i += 2;
+        continue;
+      }
+      // Skip quoted strings
+      if (css[i] === '"' || css[i] === "'") {
+        var q = css[i]; i++;
+        while (i < len && css[i] !== q) { if (css[i] === '\\') i++; i++; }
+        i++;
+        continue;
+      }
+      if (css[i] === '{') depth++;
+      else if (css[i] === '}') depth--;
+      if (depth > 0) i++;
+    }
+    var body = css.slice(bodyStart, i).trim();
+    i++; // skip }
+    // Check if body contains nested rules (e.g. @media)
+    if (body.indexOf('{') !== -1) {
+      html += '<div class="css-rule">';
+      html += '<div class="css-sel"><span class="css-arrow">&#9654;</span><span>' + esc(selector) + '</span><span class="css-brace">{</span></div>';
+      html += '<div class="css-props">' + buildCSSTree(body) + '</div>';
+      html += '</div>';
+    } else {
+      // Parse properties
+      html += '<div class="css-rule">';
+      html += '<div class="css-sel"><span class="css-arrow">&#9654;</span><span>' + esc(selector) + '</span><span class="css-brace">{</span></div>';
+      html += '<div class="css-props">';
+      var declarations = body.split(';');
+      for (var d = 0; d < declarations.length; d++) {
+        var decl = declarations[d].trim();
+        if (!decl) continue;
+        var colonIdx = decl.indexOf(':');
+        if (colonIdx !== -1) {
+          var prop = decl.slice(0, colonIdx).trim();
+          var val = decl.slice(colonIdx + 1).trim();
+          html += '<div class="css-prop"><span class="css-prop-name">' + esc(prop) + '</span>: <span class="css-prop-val">' + esc(val) + '</span>;</div>';
+        } else {
+          html += '<div class="css-prop">' + esc(decl) + '</div>';
+        }
+      }
+      html += '</div></div>';
+    }
+  }
+  html += '</div>';
+  return html;
+}
+
+// Delegated peek handler on the DOM tree
+document.getElementById('dom-tree').addEventListener('click', function(e) {
+  var peek = e.target.closest('.tree-peek');
+  if (!peek) return;
+  e.stopPropagation();
+  var row = peek.closest('.tree-row');
+  if (row && row.__sourceText) {
+    openSourceViewer(row.__sourceLabel || 'Source', row.__sourceText, row.__sourceIsCSS);
+  }
+});

package/cli/commands/dev/devtools/js/stats.js

@@ -0,0 +1,35 @@
+// ===================================================================
+// Stats bar
+// ===================================================================
+function updateStats() {
+  try {
+    var elCount = targetDoc ? targetDoc.querySelectorAll('*').length : 0;
+    document.getElementById('el-count').textContent = elCount + ' elements';
+  } catch(e) {}
+  document.getElementById('morph-count').textContent = morphCount + ' renders';
+  document.getElementById('req-count').textContent = requests.length + ' requests';
+
+  // Route stat — show current path
+  try {
+    var router = targetWin && targetWin.$ && targetWin.$.getRouter();
+    var routeStat = document.getElementById('route-stat');
+    if (routeStat && router && router.current) {
+      routeStat.textContent = router.current.path || '/';
+    }
+  } catch(e) {}
+
+  var status = document.getElementById('status');
+  var statusText = document.getElementById('status-text');
+  if (isConnected()) {
+    status.className = 'topbar-status';
+    statusText.textContent = 'Connected';
+  } else {
+    status.className = 'topbar-status err';
+    statusText.textContent = 'Disconnected';
+  }
+}
+
+// ===================================================================
+// Boot
+// ===================================================================
+init();

package/cli/commands/dev/devtools/js/tabs.js

@@ -0,0 +1,79 @@
+// ===================================================================
+// Tab switching
+// ===================================================================
+document.querySelector('.tabs').addEventListener('click', function(e) {
+  var tab = e.target.closest('.tab');
+  if (!tab) return;
+  switchTab(tab.dataset.tab);
+});
+
+function switchTab(tabName) {
+  document.querySelectorAll('.tab').forEach(function(t) { t.classList.remove('active'); });
+  document.querySelectorAll('.panel').forEach(function(p) { p.classList.remove('active'); });
+  var tabBtn = document.querySelector('.tab[data-tab="' + tabName + '"]');
+  var panel = document.getElementById('panel-' + tabName);
+  if (tabBtn) tabBtn.classList.add('active');
+  if (panel) panel.classList.add('active');
+  // Immediately refresh the tab's content
+  if (tabName === 'components') renderComponents();
+  else if (tabName === 'performance') renderPerf();
+  else if (tabName === 'router') renderRouter();
+}
+
+// ===================================================================
+// Topbar stat clicks → switch to corresponding tab
+// ===================================================================
+document.querySelector('.topbar-right').addEventListener('click', function(e) {
+  var stat = e.target.closest('.topbar-stat');
+  if (stat && stat.dataset.tab) switchTab(stat.dataset.tab);
+});
+
+// Listen for tab-switch requests from the app's devbar (via BroadcastChannel)
+if (channel) {
+  channel.addEventListener('message', function(e) {
+    if (e.data && e.data.type === 'switch-tab' && e.data.tab) {
+      switchTab(e.data.tab);
+    }
+  });
+}
+
+// Switch to tab specified in URL hash (e.g. /_devtools#network)
+var hashTab = location.hash.replace('#', '');
+if (hashTab) switchTab(hashTab);
+
+// ===================================================================
+// Clear / Reset buttons
+// ===================================================================
+document.getElementById('net-clear').addEventListener('click', function() {
+  requests = [];
+  try {
+    if (targetWin && targetWin.__zqDevTools) {
+      targetWin.__zqDevTools.requests = [];
+    }
+  } catch(e) {}
+  renderNetwork();
+  updateStats();
+});
+
+document.getElementById('perf-clear').addEventListener('click', function() {
+  morphEvents = [];
+  morphCount = 0;
+  try {
+    if (targetWin && targetWin.__zqDevTools) {
+      targetWin.__zqDevTools.morphEvents = [];
+      targetWin.__zqDevTools.morphCount = 0;
+    }
+  } catch(e) {}
+  renderPerf();
+  updateStats();
+});
+
+document.getElementById('router-clear').addEventListener('click', function() {
+  routerEvents = [];
+  try {
+    if (targetWin && targetWin.__zqDevTools) {
+      targetWin.__zqDevTools.routerEvents = [];
+    }
+  } catch(e) {}
+  renderRouter();
+});

package/cli/commands/dev/devtools/panel.html

@@ -0,0 +1,95 @@
+<div id="root">
+  <!-- App iframe (for standalone tab mode) -->
+  <iframe id="app-frame" src="/"></iframe>
+  <div class="divider" id="divider">
+    <div class="divider-toolbar" id="divider-toolbar">
+      <button id="btn-refresh" title="Refresh browser"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 2v6h-6"/><path d="M3 12a9 9 0 0 1 15-6.7L21 8"/><path d="M3 22v-6h6"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/></svg></button>
+      <span class="divider-sep"></span>
+      <button class="viewport-btn" data-width="375" title="Mobile (375px)"><svg width="12" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12" y2="18"/></svg></button>
+      <button class="viewport-btn" data-width="768" title="Tablet (768px)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="2" width="16" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12" y2="18"/></svg></button>
+      <button class="viewport-btn active" data-width="0" title="Desktop (fill)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg></button>
+      <span class="divider-sep"></span>
+      <button id="btn-route" title="Current route"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="2" x2="17" y2="22"/></svg></button>
+      <span class="route-label" id="route-label">/</span>
+    </div>
+  </div>
+  <!-- DevTools panel -->
+  <div id="devtools">
+  <!-- Top bar -->
+  <div class="topbar">
+    <span class="topbar-title">zQuery DevTools</span>
+    <button id="mode-toggle" title="Toggle layout" style="padding:2px 6px;border-radius:3px;background:rgba(88,166,255,0.1);color:var(--accent);font-size:10px;font-weight:600;border:1px solid rgba(88,166,255,0.2);cursor:pointer">&#x2b82;</button>
+    <span class="topbar-status" id="status"><span class="topbar-dot"></span> <span id="status-text">Connecting...</span></span>
+    <div class="topbar-right">
+      <span class="topbar-stat" id="el-count" data-tab="dom" title="DOM elements">0 elements</span>
+      <span class="topbar-stat" id="morph-count" data-tab="perf" title="Render operations">0 renders</span>
+      <span class="topbar-stat" id="req-count" data-tab="network" title="Network requests">0 requests</span>
+      <span class="topbar-stat" id="route-stat" data-tab="router" title="Current route" style="max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">/</span>
+    </div>
+  </div>
+
+  <!-- Tabs + panels -->
+  <div class="main">
+    <div class="tabs">
+      <button class="tab active" data-tab="router">Router</button>
+      <button class="tab" data-tab="components">Components</button>
+      <button class="tab" data-tab="perf">Performance</button>
+      <button class="tab" data-tab="network">Network</button>
+      <button class="tab" data-tab="dom">Elements</button>
+    </div>
+
+    <!-- Router panel -->
+    <div class="panel active" id="panel-router">
+      <div class="panel-toolbar" id="router-toolbar">
+        <button id="router-clear" title="Clear router history">Clear</button>
+      </div>
+      <div id="router-content"></div>
+    </div>
+
+    <!-- Components panel -->
+    <div class="panel" id="panel-components">
+      <div id="comp-list"></div>
+    </div>
+
+    <!-- Performance panel -->
+    <div class="panel" id="panel-perf">
+      <div class="panel-toolbar" id="perf-toolbar">
+        <button id="perf-clear" title="Clear performance recordings">Clear</button>
+      </div>
+      <div id="perf-content"></div>
+    </div>
+
+    <!-- Network panel -->
+    <div class="panel" id="panel-network">
+      <div class="panel-toolbar" id="net-toolbar">
+        <button id="net-clear" title="Clear network log">Clear</button>
+      </div>
+      <table class="net-table">
+        <thead><tr><th>Method</th><th>Status</th><th>URL</th><th>Time</th><th>Timestamp</th><th style="width:35%">Preview</th></tr></thead>
+        <tbody id="net-body"></tbody>
+      </table>
+    </div>
+
+    <!-- Elements panel -->
+    <div class="panel" id="panel-dom">
+      <div class="detail" id="dom-detail" style="display:none"></div>
+      <div class="tree" id="dom-tree"></div>
+    </div>
+  </div>
+  </div>
+</div>
+
+<div class="source-overlay" id="source-overlay">
+  <div class="source-box">
+    <div class="source-header">
+      <span class="source-title" id="source-title">Source</span>
+      <button class="source-close" id="source-close" title="Close">&times;</button>
+    </div>
+    <div class="source-body"><pre id="source-content"></pre></div>
+  </div>
+</div>
+
+<div class="disconnected" id="disconnected" style="display:none">
+  <h2>Connecting...</h2>
+  <p>Loading your app in the embedded frame. If this persists, check that your dev server is running.</p>
+</div>