zero-query 1.1.1 → 1.2.0

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

@@ -1,166 +1,166 @@
-// ===================================================================
-// Network log
-// ===================================================================
-function renderNetwork() {
-  var tbody = document.getElementById('net-body');
-  var html = '';
-  for (var i = requests.length - 1; i >= 0; i--) {
-    var r = requests[i];
-    var statusCls = r.status < 300 ? 'ok' : r.status < 400 ? 'redirect' : 'err';
-    var preview = '';
-    if (r.bodyPreview) {
-      try { preview = JSON.stringify(JSON.parse(r.bodyPreview), null, 0); } catch(e) { preview = r.bodyPreview; }
-      if (preview.length > 120) preview = preview.slice(0, 120) + '...';
-    }
-    html += '<tr data-idx="' + i + '">';
-    html += '<td><span class="net-method ' + r.method + '">' + r.method + '</span></td>';
-    html += '<td><span class="net-status ' + statusCls + '">' + r.status + '</span></td>';
-    html += '<td class="net-url" title="' + esc(r.url) + '">' + esc(r.url) + '</td>';
-    html += '<td class="net-time">' + r.elapsed + 'ms</td>';
-    html += '<td class="timestamp">' + formatTime(r.timestamp) + '</td>';
-    html += '<td style="color:var(--text2);font-size:10px;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">' + esc(preview) + '</td>';
-    html += '</tr>';
-  }
-  if (!html) html = '<tr><td colspan="6" style="text-align:center;padding:24px;color:var(--text2)">No requests yet</td></tr>';
-  tbody.innerHTML = html;
-}
-
-// Click to expand/collapse (attached once, outside renderNetwork)
-document.getElementById('net-body').addEventListener('click', function(e) {
-  var tr = e.target.closest('tr');
-  if (!tr || !tr.dataset.idx) return;
-  var idx = parseInt(tr.dataset.idx);
-  var existing = tr.nextElementSibling;
-  if (existing && existing.classList.contains('net-body-row')) {
-    existing.remove();
-    tr.classList.remove('expanded');
-    return;
-  }
-  tr.classList.add('expanded');
-  var r = requests[idx];
-  if (!r) return;
-  var detail = document.createElement('tr');
-  detail.className = 'net-body-row';
-  var td = document.createElement('td');
-  td.colSpan = 6;
-  var body = r.bodyPreview || '';
-  var parsed = null;
-  try { parsed = JSON.parse(body); } catch(e2) {}
-  if (parsed !== null && typeof parsed === 'object') {
-    var treeWrap = document.createElement('div');
-    treeWrap.className = 'json-tree';
-    treeWrap.appendChild(buildJsonNode(parsed, true));
-    td.appendChild(treeWrap);
-  } else {
-    var pre = document.createElement('pre');
-    pre.style.cssText = 'margin:0;max-height:240px;overflow:auto';
-    pre.textContent = body;
-    td.appendChild(pre);
-  }
-  detail.appendChild(td);
-  tr.after(detail);
-});
-
-function buildJsonNode(val, isRoot) {
-  var frag = document.createDocumentFragment();
-  if (val === null) {
-    var s = document.createElement('span');
-    s.className = 'json-null';
-    s.textContent = 'null';
-    frag.appendChild(s);
-    return frag;
-  }
-  if (typeof val === 'string') {
-    var s = document.createElement('span');
-    s.className = 'json-str';
-    s.textContent = '"' + (val.length > 300 ? val.slice(0, 300) + '...' : val) + '"';
-    frag.appendChild(s);
-    return frag;
-  }
-  if (typeof val === 'number') {
-    var s = document.createElement('span');
-    s.className = 'json-num';
-    s.textContent = String(val);
-    frag.appendChild(s);
-    return frag;
-  }
-  if (typeof val === 'boolean') {
-    var s = document.createElement('span');
-    s.className = 'json-bool';
-    s.textContent = String(val);
-    frag.appendChild(s);
-    return frag;
-  }
-  var isArr = Array.isArray(val);
-  var keys = isArr ? val : Object.keys(val);
-  var len = isArr ? val.length : keys.length;
-  var open = isArr ? '[' : '{';
-  var close = isArr ? ']' : '}';
-
-  // Toggle arrow + opening bracket
-  var toggle = document.createElement('span');
-  toggle.className = 'json-toggle';
-  toggle.textContent = '\u25BE ';
-  frag.appendChild(toggle);
-
-  var bracket = document.createElement('span');
-  bracket.className = 'json-bracket';
-  bracket.textContent = open;
-  frag.appendChild(bracket);
-
-  var count = document.createElement('span');
-  count.className = 'json-count';
-  count.textContent = len + (isArr ? ' items' : ' keys');
-  count.style.display = 'none';
-  frag.appendChild(count);
-
-  // Children
-  var children = document.createElement('div');
-  children.className = 'json-children';
-  var entries = isArr ? val : keys;
-  for (var i = 0; i < entries.length; i++) {
-    var line = document.createElement('div');
-    if (!isArr) {
-      var k = document.createElement('span');
-      k.className = 'json-key';
-      k.textContent = '"' + entries[i] + '"';
-      line.appendChild(k);
-      var colon = document.createTextNode(': ');
-      line.appendChild(colon);
-      line.appendChild(buildJsonNode(val[entries[i]], false));
-    } else {
-      line.appendChild(buildJsonNode(entries[i], false));
-    }
-    if (i < entries.length - 1) {
-      var comma = document.createElement('span');
-      comma.className = 'json-comma';
-      comma.textContent = ',';
-      line.appendChild(comma);
-    }
-    children.appendChild(line);
-  }
-  frag.appendChild(children);
-
-  var closeBracket = document.createElement('span');
-  closeBracket.className = 'json-bracket';
-  closeBracket.textContent = close;
-  frag.appendChild(closeBracket);
-
-  // Collapse large nodes by default (except root)
-  if (!isRoot && len > 5) {
-    children.classList.add('collapsed');
-    toggle.textContent = '\u25B8 ';
-    count.style.display = '';
-    closeBracket.style.display = 'none';
-  }
-
-  toggle.addEventListener('click', function() {
-    var collapsed = children.classList.contains('collapsed');
-    children.classList.toggle('collapsed');
-    toggle.textContent = collapsed ? '\u25BE ' : '\u25B8 ';
-    count.style.display = collapsed ? 'none' : '';
-    closeBracket.style.display = collapsed ? '' : 'none';
-  });
-
-  return frag;
-}
+// ===================================================================
+// Network log
+// ===================================================================
+function renderNetwork() {
+  var tbody = document.getElementById('net-body');
+  var html = '';
+  for (var i = requests.length - 1; i >= 0; i--) {
+    var r = requests[i];
+    var statusCls = r.status < 300 ? 'ok' : r.status < 400 ? 'redirect' : 'err';
+    var preview = '';
+    if (r.bodyPreview) {
+      try { preview = JSON.stringify(JSON.parse(r.bodyPreview), null, 0); } catch(e) { preview = r.bodyPreview; }
+      if (preview.length > 120) preview = preview.slice(0, 120) + '...';
+    }
+    html += '<tr data-idx="' + i + '">';
+    html += '<td><span class="net-method ' + r.method + '">' + r.method + '</span></td>';
+    html += '<td><span class="net-status ' + statusCls + '">' + r.status + '</span></td>';
+    html += '<td class="net-url" title="' + esc(r.url) + '">' + esc(r.url) + '</td>';
+    html += '<td class="net-time">' + r.elapsed + 'ms</td>';
+    html += '<td class="timestamp">' + formatTime(r.timestamp) + '</td>';
+    html += '<td style="color:var(--text2);font-size:10px;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">' + esc(preview) + '</td>';
+    html += '</tr>';
+  }
+  if (!html) html = '<tr><td colspan="6" style="text-align:center;padding:24px;color:var(--text2)">No requests yet</td></tr>';
+  tbody.innerHTML = html;
+}
+
+// Click to expand/collapse (attached once, outside renderNetwork)
+document.getElementById('net-body').addEventListener('click', function(e) {
+  var tr = e.target.closest('tr');
+  if (!tr || !tr.dataset.idx) return;
+  var idx = parseInt(tr.dataset.idx);
+  var existing = tr.nextElementSibling;
+  if (existing && existing.classList.contains('net-body-row')) {
+    existing.remove();
+    tr.classList.remove('expanded');
+    return;
+  }
+  tr.classList.add('expanded');
+  var r = requests[idx];
+  if (!r) return;
+  var detail = document.createElement('tr');
+  detail.className = 'net-body-row';
+  var td = document.createElement('td');
+  td.colSpan = 6;
+  var body = r.bodyPreview || '';
+  var parsed = null;
+  try { parsed = JSON.parse(body); } catch(e2) {}
+  if (parsed !== null && typeof parsed === 'object') {
+    var treeWrap = document.createElement('div');
+    treeWrap.className = 'json-tree';
+    treeWrap.appendChild(buildJsonNode(parsed, true));
+    td.appendChild(treeWrap);
+  } else {
+    var pre = document.createElement('pre');
+    pre.style.cssText = 'margin:0;max-height:240px;overflow:auto';
+    pre.textContent = body;
+    td.appendChild(pre);
+  }
+  detail.appendChild(td);
+  tr.after(detail);
+});
+
+function buildJsonNode(val, isRoot) {
+  var frag = document.createDocumentFragment();
+  if (val === null) {
+    var s = document.createElement('span');
+    s.className = 'json-null';
+    s.textContent = 'null';
+    frag.appendChild(s);
+    return frag;
+  }
+  if (typeof val === 'string') {
+    var s = document.createElement('span');
+    s.className = 'json-str';
+    s.textContent = '"' + (val.length > 300 ? val.slice(0, 300) + '...' : val) + '"';
+    frag.appendChild(s);
+    return frag;
+  }
+  if (typeof val === 'number') {
+    var s = document.createElement('span');
+    s.className = 'json-num';
+    s.textContent = String(val);
+    frag.appendChild(s);
+    return frag;
+  }
+  if (typeof val === 'boolean') {
+    var s = document.createElement('span');
+    s.className = 'json-bool';
+    s.textContent = String(val);
+    frag.appendChild(s);
+    return frag;
+  }
+  var isArr = Array.isArray(val);
+  var keys = isArr ? val : Object.keys(val);
+  var len = isArr ? val.length : keys.length;
+  var open = isArr ? '[' : '{';
+  var close = isArr ? ']' : '}';
+
+  // Toggle arrow + opening bracket
+  var toggle = document.createElement('span');
+  toggle.className = 'json-toggle';
+  toggle.textContent = '\u25BE ';
+  frag.appendChild(toggle);
+
+  var bracket = document.createElement('span');
+  bracket.className = 'json-bracket';
+  bracket.textContent = open;
+  frag.appendChild(bracket);
+
+  var count = document.createElement('span');
+  count.className = 'json-count';
+  count.textContent = len + (isArr ? ' items' : ' keys');
+  count.style.display = 'none';
+  frag.appendChild(count);
+
+  // Children
+  var children = document.createElement('div');
+  children.className = 'json-children';
+  var entries = isArr ? val : keys;
+  for (var i = 0; i < entries.length; i++) {
+    var line = document.createElement('div');
+    if (!isArr) {
+      var k = document.createElement('span');
+      k.className = 'json-key';
+      k.textContent = '"' + entries[i] + '"';
+      line.appendChild(k);
+      var colon = document.createTextNode(': ');
+      line.appendChild(colon);
+      line.appendChild(buildJsonNode(val[entries[i]], false));
+    } else {
+      line.appendChild(buildJsonNode(entries[i], false));
+    }
+    if (i < entries.length - 1) {
+      var comma = document.createElement('span');
+      comma.className = 'json-comma';
+      comma.textContent = ',';
+      line.appendChild(comma);
+    }
+    children.appendChild(line);
+  }
+  frag.appendChild(children);
+
+  var closeBracket = document.createElement('span');
+  closeBracket.className = 'json-bracket';
+  closeBracket.textContent = close;
+  frag.appendChild(closeBracket);
+
+  // Collapse large nodes by default (except root)
+  if (!isRoot && len > 5) {
+    children.classList.add('collapsed');
+    toggle.textContent = '\u25B8 ';
+    count.style.display = '';
+    closeBracket.style.display = 'none';
+  }
+
+  toggle.addEventListener('click', function() {
+    var collapsed = children.classList.contains('collapsed');
+    children.classList.toggle('collapsed');
+    toggle.textContent = collapsed ? '\u25BE ' : '\u25B8 ';
+    count.style.display = collapsed ? 'none' : '';
+    closeBracket.style.display = collapsed ? '' : 'none';
+  });
+
+  return frag;
+}

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

@@ -1,73 +1,73 @@
-// ===================================================================
-// Performance
-// ===================================================================
-function recordMorphEvent(data) {
-  if (!data.timestamp) data.timestamp = Date.now();
-  morphEvents.push(data);
-  if (morphEvents.length > 200) morphEvents.shift();
-}
-
-function renderPerf() {
-  var content = document.getElementById('perf-content');
-  var html = '';
-
-  // Summary
-  html += '<div class="perf-card">';
-  html += '<div class="perf-title">Render Operations</div>';
-  html += '<div class="detail-row"><span class="detail-key">Total</span><span class="detail-val">' + morphCount + '</span></div>';
-
-  if (morphEvents.length) {
-    var times = morphEvents.map(function(e) { return e.elapsed || 0; });
-    var avg = times.reduce(function(a, b) { return a + b; }, 0) / times.length;
-    var max = Math.max.apply(null, times);
-    var min = Math.min.apply(null, times);
-    html += '<div class="detail-row"><span class="detail-key">Avg time</span><span class="detail-val">' + avg.toFixed(2) + 'ms</span></div>';
-    html += '<div class="detail-row"><span class="detail-key">Min / Max</span><span class="detail-val">' + min.toFixed(2) + 'ms / ' + max.toFixed(2) + 'ms</span></div>';
-  }
-  html += '</div>';
-
-  // DOM stats
-  if (targetDoc) {
-    var allEls = targetDoc.querySelectorAll('*').length;
-    html += '<div class="perf-card">';
-    html += '<div class="perf-title">DOM Statistics</div>';
-    html += '<div class="detail-row"><span class="detail-key">Elements</span><span class="detail-val">' + allEls + '</span></div>';
-    html += '<div class="detail-row"><span class="detail-key">Tree depth</span><span class="detail-val">' + measureDepth(targetDoc.body) + '</span></div>';
-
-    // Component count
-    if (targetWin.$ && typeof targetWin.$.components === 'function') {
-      html += '<div class="detail-row"><span class="detail-key">Components</span><span class="detail-val">' + Object.keys(targetWin.$.components()).length + ' registered</span></div>';
-    }
-    html += '</div>';
-  }
-
-  // Recent morph events
-  if (morphEvents.length) {
-    html += '<div class="perf-card">';
-    html += '<div class="perf-title">Recent Renders</div>';
-    for (var i = morphEvents.length - 1; i >= Math.max(0, morphEvents.length - 20); i--) {
-      var ev = morphEvents[i];
-      var kind = ev.kind || 'morph';
-      var badge = kind === 'route' ? '<span style="color:#f5c542;font-weight:600;margin-right:6px">[route]</span>'
-                : kind === 'mount' ? '<span style="color:#66d9ef;font-weight:600;margin-right:6px">[mount]</span>'
-                : '<span style="color:#c792ea;font-weight:600;margin-right:6px">[morph]</span>';
-      var pct = Math.min(100, (ev.elapsed / 16.67) * 100);
-      var color = pct < 50 ? 'var(--green)' : pct < 100 ? 'var(--yellow)' : 'var(--red)';
-      html += '<div class="perf-label"><span>' + badge + esc(ev.target || '?') + '</span><span class="timestamp">' + formatTime(ev.timestamp) + '</span><span style="min-width:60px;text-align:right">' + (ev.elapsed || 0).toFixed(2) + 'ms</span></div>';
-      html += '<div class="perf-bar"><div class="perf-fill" style="width:' + Math.max(2, pct) + '%;background:' + color + '"></div></div>';
-    }
-    html += '</div>';
-  }
-
-  content.innerHTML = html;
-}
-
-function measureDepth(el) {
-  if (!el || !el.children || !el.children.length) return 0;
-  var max = 0;
-  for (var i = 0; i < el.children.length; i++) {
-    var d = measureDepth(el.children[i]);
-    if (d > max) max = d;
-  }
-  return max + 1;
-}
+// ===================================================================
+// Performance
+// ===================================================================
+function recordMorphEvent(data) {
+  if (!data.timestamp) data.timestamp = Date.now();
+  morphEvents.push(data);
+  if (morphEvents.length > 200) morphEvents.shift();
+}
+
+function renderPerf() {
+  var content = document.getElementById('perf-content');
+  var html = '';
+
+  // Summary
+  html += '<div class="perf-card">';
+  html += '<div class="perf-title">Render Operations</div>';
+  html += '<div class="detail-row"><span class="detail-key">Total</span><span class="detail-val">' + morphCount + '</span></div>';
+
+  if (morphEvents.length) {
+    var times = morphEvents.map(function(e) { return e.elapsed || 0; });
+    var avg = times.reduce(function(a, b) { return a + b; }, 0) / times.length;
+    var max = Math.max.apply(null, times);
+    var min = Math.min.apply(null, times);
+    html += '<div class="detail-row"><span class="detail-key">Avg time</span><span class="detail-val">' + avg.toFixed(2) + 'ms</span></div>';
+    html += '<div class="detail-row"><span class="detail-key">Min / Max</span><span class="detail-val">' + min.toFixed(2) + 'ms / ' + max.toFixed(2) + 'ms</span></div>';
+  }
+  html += '</div>';
+
+  // DOM stats
+  if (targetDoc) {
+    var allEls = targetDoc.querySelectorAll('*').length;
+    html += '<div class="perf-card">';
+    html += '<div class="perf-title">DOM Statistics</div>';
+    html += '<div class="detail-row"><span class="detail-key">Elements</span><span class="detail-val">' + allEls + '</span></div>';
+    html += '<div class="detail-row"><span class="detail-key">Tree depth</span><span class="detail-val">' + measureDepth(targetDoc.body) + '</span></div>';
+
+    // Component count
+    if (targetWin.$ && typeof targetWin.$.components === 'function') {
+      html += '<div class="detail-row"><span class="detail-key">Components</span><span class="detail-val">' + Object.keys(targetWin.$.components()).length + ' registered</span></div>';
+    }
+    html += '</div>';
+  }
+
+  // Recent morph events
+  if (morphEvents.length) {
+    html += '<div class="perf-card">';
+    html += '<div class="perf-title">Recent Renders</div>';
+    for (var i = morphEvents.length - 1; i >= Math.max(0, morphEvents.length - 20); i--) {
+      var ev = morphEvents[i];
+      var kind = ev.kind || 'morph';
+      var badge = kind === 'route' ? '<span style="color:#f5c542;font-weight:600;margin-right:6px">[route]</span>'
+                : kind === 'mount' ? '<span style="color:#66d9ef;font-weight:600;margin-right:6px">[mount]</span>'
+                : '<span style="color:#c792ea;font-weight:600;margin-right:6px">[morph]</span>';
+      var pct = Math.min(100, (ev.elapsed / 16.67) * 100);
+      var color = pct < 50 ? 'var(--green)' : pct < 100 ? 'var(--yellow)' : 'var(--red)';
+      html += '<div class="perf-label"><span>' + badge + esc(ev.target || '?') + '</span><span class="timestamp">' + formatTime(ev.timestamp) + '</span><span style="min-width:60px;text-align:right">' + (ev.elapsed || 0).toFixed(2) + 'ms</span></div>';
+      html += '<div class="perf-bar"><div class="perf-fill" style="width:' + Math.max(2, pct) + '%;background:' + color + '"></div></div>';
+    }
+    html += '</div>';
+  }
+
+  content.innerHTML = html;
+}
+
+function measureDepth(el) {
+  if (!el || !el.children || !el.children.length) return 0;
+  var max = 0;
+  for (var i = 0; i < el.children.length; i++) {
+    var d = measureDepth(el.children[i]);
+    if (d > max) max = d;
+  }
+  return max + 1;
+}