zero-query 0.9.1 → 0.9.5

package/index.js

@@ -19,9 +19,13 @@ import { morph, morphElement } from './src/diff.js';
 import { safeEval } from './src/expression.js';
 import {
   debounce, throttle, pipe, once, sleep,
-  escapeHtml, html, trust, uuid, camelCase, kebabCase,
+  escapeHtml, stripHtml, html, trust, TrustedHTML, uuid, camelCase, kebabCase,
   deepClone, deepMerge, isEqual, param, parseQuery,
-  storage, session, bus,
+  storage, session, EventBus, bus,
+  range, unique, chunk, groupBy,
+  pick, omit, getPath, setPath, isEmpty,
+  capitalize, truncate, clamp,
+  memoize, retry, timeout,
 } from './src/utils.js';
 import { ZQueryError, ErrorCode, onError, reportError, guardCallback, validate } from './src/errors.js';
 
@@ -61,6 +65,8 @@ Object.defineProperty($, 'name', {
   value: query.name, writable: true, configurable: true
 });
 $.children = query.children;
+$.qs       = query.qs;
+$.qsa      = query.qsa;
 
 // --- Collection selector ---------------------------------------------------
 /**
@@ -129,8 +135,10 @@ $.pipe       = pipe;
 $.once       = once;
 $.sleep      = sleep;
 $.escapeHtml = escapeHtml;
+$.stripHtml  = stripHtml;
 $.html       = html;
 $.trust      = trust;
+$.TrustedHTML = TrustedHTML;
 $.uuid       = uuid;
 $.camelCase  = camelCase;
 $.kebabCase  = kebabCase;
@@ -141,7 +149,23 @@ $.param      = param;
 $.parseQuery = parseQuery;
 $.storage    = storage;
 $.session    = session;
+$.EventBus   = EventBus;
 $.bus        = bus;
+$.range      = range;
+$.unique     = unique;
+$.chunk      = chunk;
+$.groupBy    = groupBy;
+$.pick       = pick;
+$.omit       = omit;
+$.getPath    = getPath;
+$.setPath    = setPath;
+$.isEmpty    = isEmpty;
+$.capitalize = capitalize;
+$.truncate   = truncate;
+$.clamp      = clamp;
+$.memoize    = memoize;
+$.retry      = retry;
+$.timeout    = timeout;
 
 // --- Error handling --------------------------------------------------------
 $.onError        = onError;
@@ -189,9 +213,13 @@ export {
   http,
   ZQueryError, ErrorCode, onError, reportError, guardCallback, validate,
   debounce, throttle, pipe, once, sleep,
-  escapeHtml, html, trust, uuid, camelCase, kebabCase,
+  escapeHtml, stripHtml, html, trust, TrustedHTML, uuid, camelCase, kebabCase,
   deepClone, deepMerge, isEqual, param, parseQuery,
-  storage, session, bus,
+  storage, session, EventBus, bus,
+  range, unique, chunk, groupBy,
+  pick, omit, getPath, setPath, isEmpty,
+  capitalize, truncate, clamp,
+  memoize, retry, timeout,
 };
 
 export default $;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zero-query",
-  "version": "0.9.1",
+  "version": "0.9.5",
   "description": "Lightweight modern frontend library — jQuery-like selectors, reactive components, SPA router, and state management with zero dependencies.",
   "main": "index.js",
   "types": "index.d.ts",

package/src/component.js

@@ -620,15 +620,44 @@ class Component {
       const handler = (e) => {
         // Read bindings from live map — always up to date after re-renders
         const currentBindings = this._eventBindings?.get(event) || [];
-        for (const { selector, methodExpr, modifiers, el } of currentBindings) {
-          if (!e.target.closest(selector)) continue;
+
+        // Collect matching bindings with their matched elements, then sort
+        // deepest-first so .stop correctly prevents ancestor handlers
+        // (mimics real DOM bubbling order within delegated events).
+        const hits = [];
+        for (const binding of currentBindings) {
+          const matched = e.target.closest(binding.selector);
+          if (!matched) continue;
+          hits.push({ ...binding, matched });
+        }
+        hits.sort((a, b) => {
+          if (a.matched === b.matched) return 0;
+          return a.matched.contains(b.matched) ? 1 : -1;
+        });
+
+        let stoppedAt = null; // Track elements that called .stop
+        for (const { selector, methodExpr, modifiers, el, matched } of hits) {
+
+          // In delegated events, .stop should prevent ancestor bindings from
+          // firing — stopPropagation alone only stops real DOM bubbling.
+          if (stoppedAt) {
+            let blocked = false;
+            for (const stopped of stoppedAt) {
+              if (matched.contains(stopped) && matched !== stopped) { blocked = true; break; }
+            }
+            if (blocked) continue;
+          }
 
           // .self — only fire if target is the element itself
           if (modifiers.includes('self') && e.target !== el) continue;
 
           // Handle modifiers
           if (modifiers.includes('prevent')) e.preventDefault();
-          if (modifiers.includes('stop')) e.stopPropagation();
+          if (modifiers.includes('stop')) {
+            e.stopPropagation();
+            if (!stoppedAt) stoppedAt = [];
+            stoppedAt.push(matched);
+          }
 
           // Build the invocation function
           const invoke = (evt) => {

package/src/core.js

@@ -863,6 +863,8 @@ query.children = (parentId) => {
   const p = document.getElementById(parentId);
   return new ZQueryCollection(p ? Array.from(p.children) : []);
 };
+query.qs  = (sel, ctx = document) => ctx.querySelector(sel);
+query.qsa = (sel, ctx = document) => Array.from(ctx.querySelectorAll(sel));
 
 // Create element shorthand — returns ZQueryCollection for chaining
 query.create = (tag, attrs = {}, ...children) => {
@@ -870,7 +872,7 @@ query.create = (tag, attrs = {}, ...children) => {
   for (const [k, v] of Object.entries(attrs)) {
     if (k === 'class') el.className = v;
     else if (k === 'style' && typeof v === 'object') Object.assign(el.style, v);
-    else if (k.startsWith('on') && typeof v === 'function') el.addEventListener(k.slice(2), v);
+    else if (k.startsWith('on') && typeof v === 'function') el.addEventListener(k.slice(2).toLowerCase(), v);
     else if (k === 'data' && typeof v === 'object') Object.entries(v).forEach(([dk, dv]) => { el.dataset[dk] = dv; });
     else el.setAttribute(k, v);
   }

package/src/expression.js

@@ -169,6 +169,11 @@ function tokenize(expr) {
       tokens.push({ t: T.OP, v: ch });
       i++; continue;
     }
+    // Spread operator: ...
+    if (ch === '.' && i + 2 < len && expr[i + 1] === '.' && expr[i + 2] === '.') {
+      tokens.push({ t: T.OP, v: '...' });
+      i += 3; continue;
+    }
     if ('()[]{},.?:'.includes(ch)) {
       tokens.push({ t: T.PUNC, v: ch });
       i++; continue;
@@ -232,7 +237,7 @@ class Parser {
           this.next(); // consume ?
           const truthy = this.parseExpression(0);
           this.expect(T.PUNC, ':');
-          const falsy = this.parseExpression(1);
+          const falsy = this.parseExpression(0);
           left = { type: 'ternary', cond: left, truthy, falsy };
           continue;
         }
@@ -373,7 +378,12 @@ class Parser {
     this.expect(T.PUNC, '(');
     const args = [];
     while (!(this.peek().t === T.PUNC && this.peek().v === ')') && this.peek().t !== T.EOF) {
-      args.push(this.parseExpression(0));
+      if (this.peek().t === T.OP && this.peek().v === '...') {
+        this.next();
+        args.push({ type: 'spread', arg: this.parseExpression(0) });
+      } else {
+        args.push(this.parseExpression(0));
+      }
       if (this.peek().t === T.PUNC && this.peek().v === ',') this.next();
     }
     this.expect(T.PUNC, ')');
@@ -449,7 +459,12 @@ class Parser {
       this.next();
       const elements = [];
       while (!(this.peek().t === T.PUNC && this.peek().v === ']') && this.peek().t !== T.EOF) {
-        elements.push(this.parseExpression(0));
+        if (this.peek().t === T.OP && this.peek().v === '...') {
+          this.next();
+          elements.push({ type: 'spread', arg: this.parseExpression(0) });
+        } else {
+          elements.push(this.parseExpression(0));
+        }
         if (this.peek().t === T.PUNC && this.peek().v === ',') this.next();
       }
       this.expect(T.PUNC, ']');
@@ -461,6 +476,14 @@ class Parser {
       this.next();
       const properties = [];
       while (!(this.peek().t === T.PUNC && this.peek().v === '}') && this.peek().t !== T.EOF) {
+        // Spread in object: { ...obj }
+        if (this.peek().t === T.OP && this.peek().v === '...') {
+          this.next();
+          properties.push({ spread: true, value: this.parseExpression(0) });
+          if (this.peek().t === T.PUNC && this.peek().v === ',') this.next();
+          continue;
+        }
+
         const keyTok = this.next();
         let key;
         if (keyTok.t === T.IDENT || keyTok.t === T.STR) key = keyTok.v;
@@ -492,7 +515,13 @@ class Parser {
 
       // new keyword
       if (tok.v === 'new') {
-        const classExpr = this.parsePostfix();
+        let classExpr = this.parsePrimary();
+        // Handle member access (e.g. ns.MyClass) without consuming call args
+        while (this.peek().t === T.PUNC && this.peek().v === '.') {
+          this.next();
+          const prop = this.next();
+          classExpr = { type: 'member', obj: classExpr, prop: prop.v, computed: false };
+        }
         let args = [];
         if (this.peek().t === T.PUNC && this.peek().v === '(') {
           args = this._parseArgs();
@@ -604,6 +633,12 @@ function evaluate(node, scope) {
       if (name === 'encodeURIComponent') return encodeURIComponent;
       if (name === 'decodeURIComponent') return decodeURIComponent;
       if (name === 'console') return console;
+      if (name === 'Map') return Map;
+      if (name === 'Set') return Set;
+      if (name === 'RegExp') return RegExp;
+      if (name === 'Error') return Error;
+      if (name === 'URL') return URL;
+      if (name === 'URLSearchParams') return URLSearchParams;
       return undefined;
     }
 
@@ -642,10 +677,21 @@ function evaluate(node, scope) {
     }
 
     case 'optional_call': {
-      const callee = evaluate(node.callee, scope);
+      const calleeNode = node.callee;
+      const args = _evalArgs(node.args, scope);
+      // Method call: obj?.method() — bind `this` to obj
+      if (calleeNode.type === 'member' || calleeNode.type === 'optional_member') {
+        const obj = evaluate(calleeNode.obj, scope);
+        if (obj == null) return undefined;
+        const prop = calleeNode.computed ? evaluate(calleeNode.prop, scope) : calleeNode.prop;
+        if (!_isSafeAccess(obj, prop)) return undefined;
+        const fn = obj[prop];
+        if (typeof fn !== 'function') return undefined;
+        return fn.apply(obj, args);
+      }
+      const callee = evaluate(calleeNode, scope);
       if (callee == null) return undefined;
       if (typeof callee !== 'function') return undefined;
-      const args = node.args.map(a => evaluate(a, scope));
       return callee(...args);
     }
 
@@ -655,7 +701,7 @@ function evaluate(node, scope) {
       // Only allow safe constructors
       if (Ctor === Date || Ctor === Array || Ctor === Map || Ctor === Set ||
           Ctor === RegExp || Ctor === Error || Ctor === URL || Ctor === URLSearchParams) {
-        const args = node.args.map(a => evaluate(a, scope));
+        const args = _evalArgs(node.args, scope);
         return new Ctor(...args);
       }
       return undefined;
@@ -685,13 +731,32 @@ function evaluate(node, scope) {
       return cond ? evaluate(node.truthy, scope) : evaluate(node.falsy, scope);
     }
 
-    case 'array':
-      return node.elements.map(e => evaluate(e, scope));
+    case 'array': {
+      const arr = [];
+      for (const e of node.elements) {
+        if (e.type === 'spread') {
+          const iterable = evaluate(e.arg, scope);
+          if (iterable != null && typeof iterable[Symbol.iterator] === 'function') {
+            for (const v of iterable) arr.push(v);
+          }
+        } else {
+          arr.push(evaluate(e, scope));
+        }
+      }
+      return arr;
+    }
 
     case 'object': {
       const obj = {};
-      for (const { key, value } of node.properties) {
-        obj[key] = evaluate(value, scope);
+      for (const prop of node.properties) {
+        if (prop.spread) {
+          const source = evaluate(prop.value, scope);
+          if (source != null && typeof source === 'object') {
+            Object.assign(obj, source);
+          }
+        } else {
+          obj[prop.key] = evaluate(prop.value, scope);
+        }
       }
       return obj;
     }
@@ -712,12 +777,30 @@ function evaluate(node, scope) {
   }
 }
 
+/**
+ * Evaluate a list of argument AST nodes, flattening any spread elements.
+ */
+function _evalArgs(argNodes, scope) {
+  const result = [];
+  for (const a of argNodes) {
+    if (a.type === 'spread') {
+      const iterable = evaluate(a.arg, scope);
+      if (iterable != null && typeof iterable[Symbol.iterator] === 'function') {
+        for (const v of iterable) result.push(v);
+      }
+    } else {
+      result.push(evaluate(a, scope));
+    }
+  }
+  return result;
+}
+
 /**
  * Resolve and execute a function call safely.
  */
 function _resolveCall(node, scope) {
   const callee = node.callee;
-  const args = node.args.map(a => evaluate(a, scope));
+  const args = _evalArgs(node.args, scope);
 
   // Method call: obj.method() — bind `this` to obj
   if (callee.type === 'member' || callee.type === 'optional_member') {
@@ -791,8 +874,9 @@ function _evalBinary(node, scope) {
  * @returns {*} — evaluation result, or undefined on error
  */
 
-// AST cache — avoids re-tokenizing and re-parsing the same expression string.
-// Bounded to prevent unbounded memory growth in long-lived apps.
+// AST cache (LRU) — avoids re-tokenizing and re-parsing the same expression.
+// Uses Map insertion-order: on hit, delete + re-set moves entry to the end.
+// Eviction removes the least-recently-used (first) entry when at capacity.
 const _astCache = new Map();
 const _AST_CACHE_MAX = 512;
 
@@ -812,9 +896,12 @@ export function safeEval(expr, scope) {
       // Fall through to full parser for built-in globals (Math, JSON, etc.)
     }
 
-    // Check AST cache
+    // Check AST cache (LRU: move to end on hit)
     let ast = _astCache.get(trimmed);
-    if (!ast) {
+    if (ast) {
+      _astCache.delete(trimmed);
+      _astCache.set(trimmed, ast);
+    } else {
       const tokens = tokenize(trimmed);
       const parser = new Parser(tokens, scope);
       ast = parser.parse();

package/src/http.js

@@ -84,8 +84,9 @@ async function request(method, url, data, options = {}) {
   } else {
     fetchOpts.signal = controller.signal;
   }
+  let _timedOut = false;
   if (timeout > 0) {
-    timer = setTimeout(() => controller.abort(), timeout);
+    timer = setTimeout(() => { _timedOut = true; controller.abort(); }, timeout);
   }
 
   // Run request interceptors
@@ -145,7 +146,10 @@ async function request(method, url, data, options = {}) {
   } catch (err) {
     if (timer) clearTimeout(timer);
     if (err.name === 'AbortError') {
-      throw new Error(`Request timeout after ${timeout}ms: ${method} ${fullURL}`);
+      if (_timedOut) {
+        throw new Error(`Request timeout after ${timeout}ms: ${method} ${fullURL}`);
+      }
+      throw new Error(`Request aborted: ${method} ${fullURL}`);
     }
     throw err;
   }

package/src/router.js

@@ -583,7 +583,12 @@ class Router {
       if (typeof matched.component === 'string') {
         const container = document.createElement(matched.component);
         this._el.appendChild(container);
-        this._instance = mount(container, matched.component, props);
+        try {
+          this._instance = mount(container, matched.component, props);
+        } catch (err) {
+          reportError(ErrorCode.COMP_NOT_FOUND, `Failed to mount component for route "${matched.path}"`, { component: matched.component, path: matched.path }, err);
+          return;
+        }
         if (_routeStart) window.__zqRenderHook(this._el, performance.now() - _routeStart, 'route', matched.component);
       }
       // If component is a render function

package/src/utils.js

@@ -79,6 +79,10 @@ export function escapeHtml(str) {
   return String(str).replace(/[&<>"']/g, c => map[c]);
 }
 
+export function stripHtml(str) {
+  return String(str).replace(/<[^>]*>/g, '');
+}
+
 /**
  * Template tag for auto-escaping interpolated values
  * Usage: $.html`<div>${userInput}</div>`
@@ -94,7 +98,7 @@ export function html(strings, ...values) {
 /**
  * Mark HTML as trusted (skip escaping in $.html template)
  */
-class TrustedHTML {
+export class TrustedHTML {
   constructor(html) { this._html = html; }
   toString() { return this._html; }
 }
@@ -124,7 +128,10 @@ export function camelCase(str) {
  * CamelCase to kebab-case
  */
 export function kebabCase(str) {
-  return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+  return str
+    .replace(/([A-Z]+)([A-Z][a-z])/g, '$1-$2')
+    .replace(/([a-z\d])([A-Z])/g, '$1-$2')
+    .toLowerCase();
 }
 
 
@@ -165,15 +172,19 @@ export function deepMerge(target, ...sources) {
 /**
  * Simple object equality check
  */
-export function isEqual(a, b) {
+export function isEqual(a, b, _seen) {
   if (a === b) return true;
   if (typeof a !== typeof b) return false;
   if (typeof a !== 'object' || a === null || b === null) return false;
   if (Array.isArray(a) !== Array.isArray(b)) return false;
+  // Guard against circular references
+  if (!_seen) _seen = new Set();
+  if (_seen.has(a)) return true;
+  _seen.add(a);
   const keysA = Object.keys(a);
   const keysB = Object.keys(b);
   if (keysA.length !== keysB.length) return false;
-  return keysA.every(k => isEqual(a[k], b[k]));
+  return keysA.every(k => isEqual(a[k], b[k], _seen));
 }
 
 
@@ -249,7 +260,7 @@ export const session = {
 // ---------------------------------------------------------------------------
 // Event bus (pub/sub)
 // ---------------------------------------------------------------------------
-class EventBus {
+export class EventBus {
   constructor() { this._handlers = new Map(); }
 
   on(event, fn) {
@@ -275,3 +286,178 @@ class EventBus {
 }
 
 export const bus = new EventBus();
+
+
+// ---------------------------------------------------------------------------
+// Array utilities
+// ---------------------------------------------------------------------------
+
+export function range(startOrEnd, end, step) {
+  let s, e, st;
+  if (end === undefined) { s = 0; e = startOrEnd; st = 1; }
+  else { s = startOrEnd; e = end; st = step !== undefined ? step : 1; }
+  if (st === 0) return [];
+  const result = [];
+  if (st > 0) { for (let i = s; i < e; i += st) result.push(i); }
+  else        { for (let i = s; i > e; i += st) result.push(i); }
+  return result;
+}
+
+export function unique(arr, keyFn) {
+  if (!keyFn) return [...new Set(arr)];
+  const seen = new Set();
+  return arr.filter(item => {
+    const k = keyFn(item);
+    if (seen.has(k)) return false;
+    seen.add(k);
+    return true;
+  });
+}
+
+export function chunk(arr, size) {
+  const result = [];
+  for (let i = 0; i < arr.length; i += size) result.push(arr.slice(i, i + size));
+  return result;
+}
+
+export function groupBy(arr, keyFn) {
+  const result = {};
+  for (const item of arr) {
+    const k = keyFn(item);
+    (result[k] ??= []).push(item);
+  }
+  return result;
+}
+
+
+// ---------------------------------------------------------------------------
+// Object utilities
+// ---------------------------------------------------------------------------
+
+export function pick(obj, keys) {
+  const result = {};
+  for (const k of keys) { if (k in obj) result[k] = obj[k]; }
+  return result;
+}
+
+export function omit(obj, keys) {
+  const exclude = new Set(keys);
+  const result = {};
+  for (const k of Object.keys(obj)) { if (!exclude.has(k)) result[k] = obj[k]; }
+  return result;
+}
+
+export function getPath(obj, path, fallback) {
+  const keys = path.split('.');
+  let cur = obj;
+  for (const k of keys) {
+    if (cur == null || typeof cur !== 'object') return fallback;
+    cur = cur[k];
+  }
+  return cur === undefined ? fallback : cur;
+}
+
+export function setPath(obj, path, value) {
+  const keys = path.split('.');
+  let cur = obj;
+  for (let i = 0; i < keys.length - 1; i++) {
+    const k = keys[i];
+    if (cur[k] == null || typeof cur[k] !== 'object') cur[k] = {};
+    cur = cur[k];
+  }
+  cur[keys[keys.length - 1]] = value;
+  return obj;
+}
+
+export function isEmpty(val) {
+  if (val == null) return true;
+  if (typeof val === 'string' || Array.isArray(val)) return val.length === 0;
+  if (val instanceof Map || val instanceof Set) return val.size === 0;
+  if (typeof val === 'object') return Object.keys(val).length === 0;
+  return false;
+}
+
+
+// ---------------------------------------------------------------------------
+// String utilities
+// ---------------------------------------------------------------------------
+
+export function capitalize(str) {
+  if (!str) return '';
+  return str[0].toUpperCase() + str.slice(1).toLowerCase();
+}
+
+export function truncate(str, maxLen, suffix = '…') {
+  if (str.length <= maxLen) return str;
+  const end = Math.max(0, maxLen - suffix.length);
+  return str.slice(0, end) + suffix;
+}
+
+
+// ---------------------------------------------------------------------------
+// Number utilities
+// ---------------------------------------------------------------------------
+
+export function clamp(val, min, max) {
+  return val < min ? min : val > max ? max : val;
+}
+
+
+// ---------------------------------------------------------------------------
+// Function utilities
+// ---------------------------------------------------------------------------
+
+export function memoize(fn, keyFnOrOpts) {
+  let keyFn, maxSize = 0;
+  if (typeof keyFnOrOpts === 'function') keyFn = keyFnOrOpts;
+  else if (keyFnOrOpts && typeof keyFnOrOpts === 'object') maxSize = keyFnOrOpts.maxSize || 0;
+
+  const cache = new Map();
+
+  const memoized = (...args) => {
+    const key = keyFn ? keyFn(...args) : args[0];
+    if (cache.has(key)) return cache.get(key);
+    const result = fn(...args);
+    cache.set(key, result);
+    if (maxSize > 0 && cache.size > maxSize) {
+      cache.delete(cache.keys().next().value);
+    }
+    return result;
+  };
+
+  memoized.clear = () => cache.clear();
+  return memoized;
+}
+
+
+// ---------------------------------------------------------------------------
+// Async utilities
+// ---------------------------------------------------------------------------
+
+export function retry(fn, opts = {}) {
+  const { attempts = 3, delay = 1000, backoff = 1 } = opts;
+  return new Promise((resolve, reject) => {
+    let attempt = 0, currentDelay = delay;
+    const tryOnce = () => {
+      attempt++;
+      fn(attempt).then(resolve, (err) => {
+        if (attempt >= attempts) return reject(err);
+        const d = currentDelay;
+        currentDelay *= backoff;
+        setTimeout(tryOnce, d);
+      });
+    };
+    tryOnce();
+  });
+}
+
+export function timeout(promise, ms, message) {
+  let timer;
+  const race = Promise.race([
+    promise,
+    new Promise((_, reject) => {
+      timer = setTimeout(() => reject(new Error(message || `Timed out after ${ms}ms`)), ms);
+    })
+  ]);
+  return race.finally(() => clearTimeout(timer));
+}