zero-query 1.0.5 → 1.1.1

package/cli/commands/bundle.js

@@ -87,14 +87,137 @@ function walkImportGraph(entry) {
   return order;
 }
 
-/** Strip ES module import/export syntax, keeping declarations. */
+/**
+ * Strip ES module import/export syntax, keeping declarations.
+ * Exported const/let are converted to var so they hoist past the per-module
+ * block scope and remain accessible to downstream modules.
+ * Exported function/class are converted to var assignments for the same reason.
+ * Non-exported declarations stay as-is and remain block-scoped (private).
+ *
+ * Template literals are temporarily hidden via a character-level scanner
+ * (handles nested backtick expressions) so that code examples inside
+ * backtick strings aren't accidentally rewritten.
+ */
 function stripModuleSyntax(code) {
+  // -- Hide template literals (supports nesting) -------------------------
+  const templates = [];
+
+  function scanTemplateLiteral(str, start) {
+    let i = start + 1; // skip opening backtick
+    while (i < str.length) {
+      const ch = str[i];
+      if (ch === '\\') { i += 2; continue; }
+      if (ch === '`')  { return i + 1; }          // end of template
+      if (ch === '$' && str[i + 1] === '{') {
+        i += 2;                                    // skip ${
+        let depth = 1;
+        while (i < str.length && depth > 0) {
+          const c = str[i];
+          if (c === '{') { depth++; i++; }
+          else if (c === '}') { depth--; i++; }
+          else if (c === '`') { i = scanTemplateLiteral(str, i); }
+          else if (c === "'" || c === '"') { i = skipString(str, i); }
+          else if (c === '/' && str[i + 1] === '/') { while (i < str.length && str[i] !== '\n') i++; }
+          else if (c === '/' && str[i + 1] === '*') { i += 2; while (i < str.length - 1 && !(str[i] === '*' && str[i + 1] === '/')) i++; i += 2; }
+          else { i++; }
+        }
+        continue;
+      }
+      i++;
+    }
+    return i;
+  }
+
+  function skipString(str, start) {
+    const q = str[start];
+    let i = start + 1;
+    while (i < str.length) {
+      if (str[i] === '\\') { i += 2; continue; }
+      if (str[i] === q)    { return i + 1; }
+      i++;
+    }
+    return i;
+  }
+
+  let hidden = '';
+  let pos = 0;
+  while (pos < code.length) {
+    const ch = code[pos];
+    if (ch === "'" || ch === '"') {
+      const end = skipString(code, pos);
+      hidden += code.substring(pos, end);
+      pos = end;
+    } else if (ch === '/' && code[pos + 1] === '/') {
+      let end = pos;
+      while (end < code.length && code[end] !== '\n') end++;
+      hidden += code.substring(pos, end);
+      pos = end;
+    } else if (ch === '/' && code[pos + 1] === '*') {
+      let end = pos + 2;
+      while (end < code.length - 1 && !(code[end] === '*' && code[end + 1] === '/')) end++;
+      end += 2;
+      hidden += code.substring(pos, end);
+      pos = end;
+    } else if (ch === '`') {
+      const end = scanTemplateLiteral(code, pos);
+      templates.push(code.substring(pos, end));
+      hidden += `__TPL_${templates.length - 1}__`;
+      pos = end;
+    } else {
+      hidden += ch;
+      pos++;
+    }
+  }
+
+  // -- Apply import / export transforms -----------------------------------
+  code = hidden;
   code = code.replace(/^\s*import\s+[\s\S]*?from\s+['"].*?['"];?\s*$/gm, '');
   code = code.replace(/^\s*import\s+['"].*?['"];?\s*$/gm, '');
   code = code.replace(/^(\s*)export\s+default\s+/gm, '$1');
-  code = code.replace(/^(\s*)export\s+(const|let|var|function|class|async\s+function)\s/gm, '$1$2 ');
-  code = code.replace(/^\s*export\s*\{[\s\S]*?\};?\s*$/gm, '');
-  return code;
+  // Convert exported const/let/var to var (hoists past block scope)
+  code = code.replace(/^(\s*)export\s+(const|let|var)\s/gm, '$1var ');
+  // Convert exported function/async function to var assignment (hoists past block scope)
+  code = code.replace(/^(\s*)export\s+async\s+function\s+(\w+)/gm, '$1var $2 = async function $2');
+  code = code.replace(/^(\s*)export\s+function\s+(\w+)/gm, '$1var $2 = function $2');
+  // Convert exported class to var assignment
+  code = code.replace(/^(\s*)export\s+class\s+(\w+)/gm, '$1var $2 = class $2');
+  // Collect names from bare export blocks: export { a, b, c };
+  // These names are declared elsewhere (function/const/let) and need to be
+  // hoisted past the per-module block scope.  We collect them here and
+  // the caller converts their declarations to var-based forms.
+  const bareExportNames = [];
+  code = code.replace(/^\s*export\s*\{([^}]+)\};?\s*$/gm, (_, names) => {
+    for (const n of names.split(',')) {
+      const parts = n.trim().split(/\s+as\s+/);
+      if (parts[0]) bareExportNames.push({ local: parts[0].trim(), exported: (parts[1] || parts[0]).trim() });
+    }
+    return '';
+  });
+
+  // For every bare-exported name, convert its block-scoped declaration to a
+  // var-based form so it hoists past the per-module { } wrapper:
+  //   function foo(…) { … }  →  var foo = function foo(…) { … }
+  //   async function foo(…)  →  var foo = async function foo(…)
+  //   const/let foo = …      →  var foo = …
+  for (const { local } of bareExportNames) {
+    const fnRe = new RegExp(`^(\\s*)function\\s+${local}\\s*\\(`, 'gm');
+    code = code.replace(fnRe, `$1var ${local} = function ${local}(`);
+    const asyncFnRe = new RegExp(`^(\\s*)async\\s+function\\s+${local}\\s*\\(`, 'gm');
+    code = code.replace(asyncFnRe, `$1var ${local} = async function ${local}(`);
+    const constLetRe = new RegExp(`^(\\s*)(const|let)\\s+${local}\\b`, 'gm');
+    code = code.replace(constLetRe, `$1var ${local}`);
+  }
+
+  // Create aliases for "export { local as exported }" where the names differ
+  for (const { local, exported } of bareExportNames) {
+    if (exported !== local) {
+      code += `\nvar ${exported} = ${local};`;
+    }
+  }
+
+  // -- Restore template literals ------------------------------------------
+  code = code.replace(/__TPL_(\d+)__/g, (_, i) => templates[i]);
+  return { code, bareExportNames };
 }
 
 /** Replace import.meta.url with a runtime equivalent. */
@@ -181,6 +304,27 @@ function minifyCSS(css) {
   return css.trim();
 }
 
+/**
+ * Heuristic: is the next '/' the start of a regex literal (vs division)?
+ * Used by minifyTemplateLiterals to avoid misinterpreting backticks
+ * inside regex patterns as template literal delimiters.
+ */
+function _isRegexCtxTpl(out) {
+  let end = out.length - 1;
+  while (end >= 0 && (out[end] === ' ' || out[end] === '\t' || out[end] === '\n' || out[end] === '\r')) 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);
+  for (const kw of ['return', 'typeof', 'case', 'in', 'delete', 'void', 'throw', 'new']) {
+    if (tail.endsWith(kw)) {
+      const pos = end - kw.length;
+      if (pos < 0 || !/[a-zA-Z0-9_$]/.test(out[pos])) return true;
+    }
+  }
+  return false;
+}
+
 /**
  * Walk JS source and minify the HTML/CSS inside template literals.
  * Handles ${…} interpolations (with nesting) and preserves <pre> blocks.
@@ -217,6 +361,25 @@ function minifyTemplateLiterals(code) {
       continue;
     }
 
+    // Regex literal: copy verbatim (prevents backticks inside regex from
+    // being mistaken for template literals, e.g. /`([^`]+)`/g)
+    if (ch === '/' && _isRegexCtxTpl(out)) {
+      out += ch; i++;
+      let inCharClass = false;
+      while (i < code.length) {
+        const rc = code[i];
+        if (rc === '\\') { out += rc + (code[i + 1] || ''); i += 2; continue; }
+        if (rc === '[') inCharClass = true;
+        if (rc === ']') inCharClass = false;
+        out += rc; i++;
+        if (rc === '/' && !inCharClass) {
+          while (i < code.length && /[gimsuy]/.test(code[i])) { out += code[i]; i++; }
+          break;
+        }
+      }
+      continue;
+    }
+
     // Template literal: extract, minify HTML, and emit
     if (ch === '`') {
       out += _minifyTemplate(code, i);
@@ -381,8 +544,8 @@ function collectInlineResources(files, projectRoot) {
 
     // styleUrl:
     const styleUrlRe = /styleUrl\s*:\s*['"]([^'"]+)['"]/g;
-    const styleMatch = styleUrlRe.exec(code);
-    if (styleMatch) {
+    let styleMatch;
+    while ((styleMatch = styleUrlRe.exec(code)) !== null) {
       const stylePath = path.join(fileDir, styleMatch[1]);
       if (fs.existsSync(stylePath)) {
         const relKey = path.relative(projectRoot, stylePath).replace(/\\/g, '/');
@@ -877,12 +1040,13 @@ function bundleApp() {
 
   const sections = files.map(file => {
     let code = fs.readFileSync(file, 'utf-8');
-    code = stripModuleSyntax(code);
+    const stripped = stripModuleSyntax(code);
+    code = stripped.code;
     code = replaceImportMeta(code, file, projectRoot);
     code = rewriteResourceUrls(code, file, projectRoot);
     code = minifyTemplateLiterals(code);
     const rel = path.relative(projectRoot, file);
-    return `// --- ${rel} ${'-'.repeat(Math.max(1, 60 - rel.length))}\n${code.trim()}`;
+    return `// --- ${rel} ${'-'.repeat(Math.max(1, 60 - rel.length))}\n{\n${code.trim()}\n}`;
   });
 
   // Embed zquery.min.js
@@ -1056,3 +1220,5 @@ function bundleApp() {
 }
 
 module.exports = bundleApp;
+module.exports.stripModuleSyntax = stripModuleSyntax;
+module.exports.minifyTemplateLiterals = minifyTemplateLiterals;

package/cli/commands/dev/server.js

@@ -4,6 +4,13 @@
  * Creates the zero-http app, serves static files, injects the
  * error-overlay snippet into HTML responses, and manages the
  * SSE connection pool for live-reload events.
+ *
+ * Uses zero-http middleware:
+ *   - helmet()   → security headers (relaxed CSP for dev inline scripts)
+ *   - compress() → brotli/gzip/deflate response compression
+ *   - cors()     → allow cross-origin requests in development
+ *   - serveStatic() → static file serving with ETag & Cache-Control
+ *   - SSE with keepAlive, retry, pad for proxy compatibility
  */
 
 'use strict';
@@ -22,6 +29,7 @@ class SSEPool {
     this._clients = new Set();
   }
 
+  /** @param {import('zero-http').SSEStream} sse */
   add(sse) {
     this._clients.add(sse);
     sse.on('close', () => this._clients.delete(sse));
@@ -33,6 +41,9 @@ class SSEPool {
     }
   }
 
+  /** Number of connected SSE clients. */
+  get size() { return this._clients.size; }
+
   closeAll() {
     for (const sse of this._clients) {
       try { sse.close(); } catch { /* ignore */ }
@@ -92,14 +103,54 @@ async function createServer({ root, htmlEntry, port, noIntercept }) {
     zeroHttp = require('zero-http');
   }
 
-  const { createApp, static: serveStatic } = zeroHttp;
+  const {
+    createApp,
+    static: serveStatic,
+    helmet,
+    compress,
+    cors,
+    debug,
+  } = zeroHttp;
+
+  debug.level('silent');
 
   const app  = createApp();
   const pool = new SSEPool();
 
+  // ---- Security headers (dev-friendly CSP) ----
+  app.use(helmet({
+    contentSecurityPolicy: {
+      directives: {
+        defaultSrc:  ["'self'"],
+        scriptSrc:   ["'self'", "'unsafe-inline'", "'unsafe-eval'"],
+        styleSrc:    ["'self'", "'unsafe-inline'"],
+        imgSrc:      ["'self'", 'data:', 'blob:'],
+        connectSrc:  ["'self'", 'ws:', 'wss:'],
+        fontSrc:     ["'self'", 'data:'],
+      },
+    },
+    // SPA dev server runs over plain HTTP
+    hsts: false,
+    // Allow framing for devtools panel
+    frameguard: false,
+  }));
+
+  // ---- CORS (allow cross-origin during development) ----
+  app.use(cors());
+
+  // ---- Compression (brotli > gzip > deflate) ----
+  app.use(compress({
+    threshold: 1024,
+  }));
+
   // ---- SSE endpoint ----
   app.get('/__zq_reload', (req, res) => {
-    const sse = res.sse({ keepAlive: 30000, keepAliveComment: 'ping' });
+    const sse = res.sse({
+      keepAlive: 30000,
+      keepAliveComment: 'ping',
+      retry: 3000,
+      pad: 2048,
+    });
     pool.add(sse);
   });
 
@@ -157,7 +208,10 @@ async function createServer({ root, htmlEntry, port, noIntercept }) {
   });
 
   function listen(cb) {
-    app.listen(port, cb);
+    const server = app.listen(port, cb);
+    server.keepAliveTimeout = 65000;
+    server.headersTimeout   = 66000;
+    return server;
   }
 
   return { app, pool, listen };

package/cli/scaffold/default/app/components/contacts/contacts.css

@@ -4,7 +4,7 @@
  * to the contacts-page component by zQuery.
  */
 
-/* ── Toolbar ── */
+/* -- Toolbar -- */
 .ct-bar {
   display: flex;
   align-items: center;
@@ -75,7 +75,7 @@
   box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.1);
 }
 
-/* ── Filter chips ── */
+/* -- Filter chips -- */
 .ct-chips {
   display: flex;
   gap: 0.35rem;
@@ -108,7 +108,7 @@
   font-weight: 600;
 }
 
-/* ── Buttons ── */
+/* -- Buttons -- */
 .ct-btn {
   display: inline-flex;
   align-items: center;
@@ -166,7 +166,7 @@
   font-size: 0.78rem;
 }
 
-/* ── Contact Grid ── */
+/* -- Contact Grid -- */
 .ct-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
@@ -314,7 +314,7 @@
   opacity: 1;
 }
 
-/* ── Empty ── */
+/* -- Empty -- */
 .ct-empty-card {
   text-align: center;
   padding: 3rem 1rem;
@@ -405,7 +405,7 @@
   color: #fff;
 }
 
-/* ── Add-contact modal heading ── */
+/* -- Add-contact modal heading -- */
 .ct-modal-heading {
   padding: 1.25rem 1.5rem 0;
 }
@@ -421,7 +421,7 @@
   color: var(--text-muted);
 }
 
-/* ── Form inside modal ── */
+/* -- Form inside modal -- */
 .ct-form {
   display: flex;
   flex-direction: column;
@@ -488,7 +488,7 @@
   padding-top: 0.35rem;
 }
 
-/* ── Detail modal: profile ── */
+/* -- Detail modal: profile -- */
 .ct-modal-profile {
   display: flex;
   flex-direction: column;
@@ -608,7 +608,7 @@
   font-weight: 500;
 }
 
-/* ── Responsive ── */
+/* -- Responsive -- */
 @media (max-width: 768px) {
   .ct-bar {
     flex-direction: column;

package/cli/scaffold/default/app/components/playground/playground.css

@@ -102,7 +102,7 @@
 .pg-vpill:hover    { border-color: var(--accent); color: var(--text); }
 .pg-vpill.on       { background: var(--accent); color: #fff; border-color: var(--accent); }
 
-/* ── Responsive ── */
+/* -- Responsive -- */
 @media (max-width: 768px) {
   .pg-variant-box    { min-width: 0; flex: 1 1 100%; }
   .pg-variant-row    { flex-direction: column; }

package/cli/scaffold/default/app/components/playground/playground.html

@@ -9,7 +9,7 @@
   <p class="subtitle">Interactive UI patterns - event modifiers, animations, reactive bindings, and plugins.</p>
 </div>
 
-<!-- ── Interaction Patterns ──────────────────────────── -->
+<!-- -- Interaction Patterns ---------------------------- -->
 <div class="pg-section">Interaction Patterns</div>
 
 <div class="card" style="position:relative;z-index:2;">
@@ -44,7 +44,7 @@
   </div>
 </div>
 
-<!-- ── Animations ──────────────────────────────────── -->
+<!-- -- Animations ------------------------------------ -->
 <div class="pg-section">Animations</div>
 
 <div class="card">
@@ -81,7 +81,7 @@
   </div>
 </div>
 
-<!-- ── Reactive Bindings ───────────────────────────── -->
+<!-- -- Reactive Bindings ----------------------------- -->
 <div class="pg-section">Reactive Bindings</div>
 
 <div class="card-grid">
@@ -123,7 +123,7 @@
   </div>
 </div>
 
-<!-- ── Keyboard ──────────────────────────────────── -->
+<!-- -- Keyboard ------------------------------------ -->
 <div class="pg-section">Keyboard</div>
 
 <div class="card">
@@ -140,7 +140,7 @@
   </div>
 </div>
 
-<!-- ── Plugin System ───────────────────────────────── -->
+<!-- -- Plugin System --------------------------------- -->
 <div class="pg-section">Plugin System</div>
 
 <div class="card">

package/cli/scaffold/default/app/components/playground/playground.js

@@ -10,7 +10,7 @@
 //   z-skip                          - morph opt-out
 //   templateUrl / styleUrl          - external files
 
-// ── $.fn Plugins ─────────────────────────────────────────────────
+// -- $.fn Plugins -------------------------------------------------
 $.fn.highlight = function (color = 'var(--accent)') {
   this.css({ boxShadow: `0 0 0 3px ${color}`, transition: 'box-shadow .3s ease' });
   const self = this;

package/cli/scaffold/default/app/components/toolkit/toolkit.css

@@ -87,7 +87,7 @@
                  border: 1px solid rgba(88,166,255,.1); }
 .tk-stat-val   { font-weight: 700; color: var(--accent); }
 
-/* ── Responsive: tabs ── */
+/* -- Responsive: tabs -- */
 @media (max-width: 768px) {
   .tk-tabs       { flex-wrap: wrap; }
   .tk-tab        { flex: 1 1 auto; min-width: 0; padding: .5rem .6rem; font-size: .8rem; }

package/cli/scaffold/default/app/components/toolkit/toolkit.html

@@ -16,7 +16,7 @@
   <button class="tk-tab {{activeTab === 'store' ? 'active' : ''}}" @click="setTab('store')">◈ Store</button>
 </div>
 
-<!-- ── HTTP Tab ───────────────────────────────────── -->
+<!-- -- HTTP Tab ------------------------------------- -->
 <div z-if="activeTab === 'http'">
   <div class="card">
     <h3>CRUD Operations</h3>
@@ -61,7 +61,7 @@
   </div>
 </div>
 
-<!-- ── Utilities Tab ──────────────────────────────── -->
+<!-- -- Utilities Tab -------------------------------- -->
 <div z-else-if="activeTab === 'utils'">
   <div class="card">
     <h3>Utility Belt</h3>
@@ -98,7 +98,7 @@
   </div>
 </div>
 
-<!-- ── Store Tab ──────────────────────────────────── -->
+<!-- -- Store Tab ------------------------------------ -->
 <div z-else>
   <div class="card" style="margin-bottom:.75rem;">
     <h3>Store Inspector</h3>

package/cli/scaffold/default/app/components/toolkit/toolkit.js

@@ -105,7 +105,7 @@ $.component('toolkit-page', {
     this.state.storeHistory = null;
   },
 
-  /* ── HTTP demos ───────────────────────────────────────────── */
+  /* -- HTTP demos --------------------------------------------- */
 
   async doGet() {
     this._updateHttpMeta('GET', '/posts/1');
@@ -165,7 +165,7 @@ $.component('toolkit-page', {
     } finally { this.state.searchLoading = false; }
   },
 
-  /* ── Utility demos ─────────────────────────────────────────── */
+  /* -- Utility demos ------------------------------------------- */
 
   runUtil(name) {
     this.state.activeUtil = name;
@@ -197,7 +197,7 @@ $.component('toolkit-page', {
           `$.memoize(fibonacci)`,
           ``,
           `fib(35) = ${result}`,
-          `────────────────────────────`,
+          `----------------------------`,
           `No memoize:  ${slowTime.toFixed(1)} ms`,
           `Memoized:    ${fastTime.toFixed(3)} ms`,
           `Cached:      ${cachedTime.toFixed(4)} ms  ⚡`,
@@ -264,7 +264,7 @@ $.component('toolkit-page', {
     this.state.utilOutput = result;
   },
 
-  /* ── Store demos ──────────────────────────────────────────── */
+  /* -- Store demos -------------------------------------------- */
 
   takeSnapshot() {
     this.state.storeSnap = JSON.stringify($.getStore('main').snapshot(), null, 2);

package/cli/utils.js

@@ -149,7 +149,7 @@ function _minifyBody(code) {
     const ch = code[i];
     const nx = code[i + 1];
 
-    // ── Regular string literal: copy verbatim ─────────────────
+    // -- Regular string literal: copy verbatim -----------------
     if (ch === '"' || ch === "'") {
       const q = ch;
       out += ch; i++;
@@ -162,14 +162,14 @@ function _minifyBody(code) {
       continue;
     }
 
-    // ── Template literal: copy verbatim with ${…} nesting ───────
+    // -- Template literal: copy verbatim with ${…} nesting -------
     if (ch === '`') {
       const tpl = _copyTemplateLiteral(code, i);
       out += tpl.text; i = tpl.end;
       continue;
     }
 
-    // ── Block comment: skip ─────────────────────────────────────
+    // -- Block comment: skip -------------------------------------
     if (ch === '/' && nx === '*') {
       i += 2;
       while (i < code.length && !(code[i] === '*' && code[i + 1] === '/')) i++;
@@ -177,14 +177,14 @@ function _minifyBody(code) {
       continue;
     }
 
-    // ── Line comment: skip ──────────────────────────────────────
+    // -- Line comment: skip --------------------------------------
     if (ch === '/' && nx === '/') {
       i += 2;
       while (i < code.length && code[i] !== '\n') i++;
       continue;
     }
 
-    // ── Regex literal: copy verbatim ────────────────────────────
+    // -- Regex literal: copy verbatim ----------------------------
     if (ch === '/') {
       if (_isRegexCtx(out)) {
         out += ch; i++;
@@ -204,11 +204,20 @@ function _minifyBody(code) {
       }
     }
 
-    // ── Whitespace: collapse ────────────────────────────────────
+    // -- 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++;
+      let hasNewline = ch === '\n' || ch === '\r';
+      while (i < code.length && (code[i] === ' ' || code[i] === '\t' || code[i] === '\n' || code[i] === '\r')) {
+        if (code[i] === '\n' || code[i] === '\r') hasNewline = true;
+        i++;
+      }
       const before = out[out.length - 1];
       const after  = code[i];
+      // After '}', a newline may be needed for ASI (e.g. var x=function(){}⏎var y).
+      // A space alone doesn't trigger ASI, so preserve ';\n' when '}' precedes
+      // an identifier-start character and the original whitespace had a newline.
+      const afterIsId = after && ((after >= 'a' && after <= 'z') || (after >= 'A' && after <= 'Z') || after === '_' || after === '$');
+      if (before === '}' && afterIsId && hasNewline) { out += '\n'; continue; }
       if (_needsSpace(before, after)) out += ' ';
       continue;
     }