zero-query 0.6.3 → 0.7.5

package/cli/scaffold/scripts/app.js

@@ -27,7 +27,7 @@ const router = $.router({
 // Highlight the active nav link on every route change
 router.onChange((to) => {
   $.all('.nav-link').removeClass('active');
-  $.all(`.nav-link[z-link="${to.path}"]`).addClass('active');
+  $(`.nav-link[z-link="${to.path}"]`).addClass('active');
 
   // Close mobile menu on navigate
   closeMobileMenu();
@@ -36,26 +36,20 @@ router.onChange((to) => {
 // ---------------------------------------------------------------------------
 // Responsive sidebar toggle
 // ---------------------------------------------------------------------------
-const sidebar = $.id('sidebar');
-const overlay = $.id('overlay');
-const toggle  = $.id('menu-toggle');
+const $sidebar = $('#sidebar');
+const $overlay = $('#overlay');
+const $toggle  = $('#menu-toggle');
 
-function openMobileMenu() {
-  sidebar.classList.add('open');
-  overlay.classList.add('visible');
-  toggle.classList.add('active');
+function toggleMobileMenu(open) {
+  $sidebar.toggleClass('open', open);
+  $overlay.toggleClass('visible', open);
+  $toggle.toggleClass('active', open);
 }
 
-function closeMobileMenu() {
-  sidebar.classList.remove('open');
-  overlay.classList.remove('visible');
-  toggle.classList.remove('active');
-}
+function closeMobileMenu() { toggleMobileMenu(false); }
 
 // $.on — global delegated event listeners
-$.on('click', '#menu-toggle', () => {
-  sidebar.classList.contains('open') ? closeMobileMenu() : openMobileMenu();
-});
+$.on('click', '#menu-toggle', () => toggleMobileMenu(!$sidebar.hasClass('open')));
 $.on('click', '#overlay', closeMobileMenu);
 
 // Close sidebar on Escape key — using $.on direct (no selector needed)
@@ -69,14 +63,13 @@ $.on('keydown', (e) => {
 // Any component can emit: $.bus.emit('toast', { message, type })
 // Types: 'success', 'error', 'info'
 $.bus.on('toast', ({ message, type = 'info' }) => {
-  const container = $.id('toasts');
-  const toast = $.create('div');
-  toast.className = `toast toast-${type}`;
-  toast.textContent = message;
-  container.appendChild(toast);
+  const toast = $.create('div')
+    .addClass('toast', `toast-${type}`)
+    .text(message)
+    .appendTo('#toasts');
   // Auto-remove after 3 seconds
   setTimeout(() => {
-    toast.classList.add('toast-exit');
+    toast.addClass('toast-exit');
     setTimeout(() => toast.remove(), 300);
   }, 3000);
 });

package/cli/scaffold/scripts/components/contacts/contacts.css

@@ -216,13 +216,6 @@
   font-weight: 500;
 }
 
-@keyframes slide-in {
-  from { opacity: 0; transform: translateY(-6px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-}
-
-/* -- Animation -- */
 @keyframes slide-in {
   from { opacity: 0; transform: translateY(-6px); }
   to   { opacity: 1; transform: translateY(0); }

package/cli/scaffold/scripts/components/contacts/contacts.html

@@ -68,7 +68,7 @@
 </div>
 
 <!-- Contact count -->
-<div class="card" z-if="contacts.length > 0">
+<div class="card" z-if="contacts.length > 0" z-key="contacts-list">
   <!-- Contacts list — z-for renders each item -->
   <ul class="contacts-list">
     <li
@@ -102,14 +102,14 @@
 </div>
 
 <!-- Empty state -->
-<div class="card" z-else>
+<div class="card" z-else z-key="contacts-empty">
   <div class="empty-state">
     <p>No contacts yet — add one above!</p>
   </div>
 </div>
 
 <!-- Selected contact detail panel — z-if conditional rendering -->
-<div class="card contact-detail" z-if="selectedId !== null">
+<div class="card contact-detail" z-if="selectedId !== null" z-key="contact-detail">
   <div class="detail-header">
     <div>
       <h3 z-text="selectedName"></h3>

package/cli/scaffold/styles/styles.css

@@ -103,6 +103,7 @@ code { background: var(--bg-hover); padding: 2px 6px; border-radius: 4px; font-s
   transition: all 0.15s ease;
   border-left: 3px solid transparent;
   cursor: pointer;
+  user-select: none;
 }
 
 .nav-link:hover {

package/cli/utils.js

@@ -83,15 +83,120 @@ function stripComments(code) {
 }
 
 // ---------------------------------------------------------------------------
-// minify — quick minification (strips comments + collapses whitespace)
+// minify — single-pass minification
+//   Strips comments, collapses whitespace to the minimum required,
+//   and preserves string / template-literal / regex content verbatim.
 // ---------------------------------------------------------------------------
 
 function minify(code, banner) {
-  const body = stripComments(code.replace(banner, ''))
-    .replace(/^\s*\n/gm, '')
-    .replace(/\n\s+/g, '\n')
-    .replace(/\s{2,}/g, ' ');
-  return banner + '\n' + body;
+  return banner + '\n' + _minifyBody(code.replace(banner, ''));
+}
+
+/**
+ * Single-pass minifier: walks character-by-character, skips strings/regex,
+ * strips comments, and emits a space only when both neighbours are
+ * identifier-like characters (or when collapsing would create ++, --, // or /*).
+ */
+function _minifyBody(code) {
+  let out = '';
+  let i = 0;
+
+  while (i < code.length) {
+    const ch = code[i];
+    const nx = code[i + 1];
+
+    // ── String / template literal: copy verbatim ────────────────
+    if (ch === '"' || ch === "'" || ch === '`') {
+      const q = ch;
+      out += ch; i++;
+      while (i < code.length) {
+        if (code[i] === '\\') { out += code[i] + (code[i + 1] || ''); i += 2; continue; }
+        out += code[i];
+        if (code[i] === q) { i++; break; }
+        i++;
+      }
+      continue;
+    }
+
+    // ── Block comment: skip ─────────────────────────────────────
+    if (ch === '/' && nx === '*') {
+      i += 2;
+      while (i < code.length && !(code[i] === '*' && code[i + 1] === '/')) i++;
+      i += 2;
+      continue;
+    }
+
+    // ── Line comment: skip ──────────────────────────────────────
+    if (ch === '/' && nx === '/') {
+      i += 2;
+      while (i < code.length && code[i] !== '\n') i++;
+      continue;
+    }
+
+    // ── Regex literal: copy verbatim ────────────────────────────
+    if (ch === '/') {
+      if (_isRegexCtx(out)) {
+        out += ch; i++;
+        let inCC = false;
+        while (i < code.length) {
+          const rc = code[i];
+          if (rc === '\\') { out += rc + (code[i + 1] || ''); i += 2; continue; }
+          if (rc === '[') inCC = true;
+          if (rc === ']') inCC = false;
+          out += rc; i++;
+          if (rc === '/' && !inCC) {
+            while (i < code.length && /[gimsuy]/.test(code[i])) { out += code[i]; i++; }
+            break;
+          }
+        }
+        continue;
+      }
+    }
+
+    // ── Whitespace: collapse ────────────────────────────────────
+    if (ch === ' ' || ch === '\t' || ch === '\n' || ch === '\r') {
+      while (i < code.length && (code[i] === ' ' || code[i] === '\t' || code[i] === '\n' || code[i] === '\r')) i++;
+      const before = out[out.length - 1];
+      const after  = code[i];
+      if (_needsSpace(before, after)) out += ' ';
+      continue;
+    }
+
+    out += ch;
+    i++;
+  }
+
+  return out;
+}
+
+/** True when removing the space between a and b would change semantics. */
+function _needsSpace(a, b) {
+  if (!a || !b) return false;
+  const idA = (a >= 'a' && a <= 'z') || (a >= 'A' && a <= 'Z') || (a >= '0' && a <= '9') || a === '_' || a === '$';
+  const idB = (b >= 'a' && b <= 'z') || (b >= 'A' && b <= 'Z') || (b >= '0' && b <= '9') || b === '_' || b === '$';
+  if (idA && idB) return true;   // e.g. const x, return value
+  if (a === '+' && b === '+') return true; // prevent ++
+  if (a === '-' && b === '-') return true; // prevent --
+  if (a === '/' && (b === '/' || b === '*')) return true; // prevent // or /*
+  return false;
+}
+
+/** Heuristic: is the next '/' a regex start (vs division)? */
+function _isRegexCtx(out) {
+  let end = out.length - 1;
+  while (end >= 0 && out[end] === ' ') end--;
+  if (end < 0) return true;
+  const last = out[end];
+  if ('=({[,;:!&|?~+-*/%^>'.includes(last)) return true;
+  const tail = out.substring(Math.max(0, end - 7), end + 1);
+  const kws = ['return', 'typeof', 'case', 'in', 'delete', 'void', 'throw', 'new'];
+  for (const kw of kws) {
+    if (tail.endsWith(kw)) {
+      const pos = end - kw.length;
+      if (pos < 0 || !((out[pos] >= 'a' && out[pos] <= 'z') || (out[pos] >= 'A' && out[pos] <= 'Z') || (out[pos] >= '0' && out[pos] <= '9') || out[pos] === '_' || out[pos] === '$')) return true;
+    }
+  }
+  return false;
 }
 
 // ---------------------------------------------------------------------------