zero-query 0.9.0 → 0.9.1

package/src/core.js

@@ -12,7 +12,7 @@ import { morph as _morph, morphElement as _morphElement } from './diff.js';
 // ---------------------------------------------------------------------------
 export class ZQueryCollection {
   constructor(elements) {
-    this.elements = Array.isArray(elements) ? elements : [elements];
+    this.elements = Array.isArray(elements) ? elements : (elements ? [elements] : []);
     this.length = this.elements.length;
     this.elements.forEach((el, i) => { this[i] = el; });
   }
@@ -69,10 +69,12 @@ export class ZQueryCollection {
     return new ZQueryCollection([...kids]);
   }
 
-  siblings() {
+  siblings(selector) {
     const sibs = [];
     this.elements.forEach(el => {
-      sibs.push(...[...el.parentElement.children].filter(c => c !== el));
+      if (!el.parentElement) return;
+      const all = [...el.parentElement.children].filter(c => c !== el);
+      sibs.push(...(selector ? all.filter(c => c.matches(selector)) : all));
     });
     return new ZQueryCollection(sibs);
   }
@@ -214,7 +216,8 @@ export class ZQueryCollection {
   index(selector) {
     if (selector === undefined) {
       const el = this.first();
-      return el ? Array.from(el.parentElement.children).indexOf(el) : -1;
+      if (!el || !el.parentElement) return -1;
+      return Array.from(el.parentElement.children).indexOf(el);
     }
     const target = (typeof selector === 'string')
       ? document.querySelector(selector)
@@ -274,6 +277,11 @@ export class ZQueryCollection {
   // --- Attributes ----------------------------------------------------------
 
   attr(name, value) {
+    if (typeof name === 'object' && name !== null) {
+      return this.each((_, el) => {
+        for (const [k, v] of Object.entries(name)) el.setAttribute(k, v);
+      });
+    }
     if (value === undefined) return this.first()?.getAttribute(name);
     return this.each((_, el) => el.setAttribute(name, value));
   }
@@ -298,7 +306,10 @@ export class ZQueryCollection {
 
   // --- CSS / Dimensions ----------------------------------------------------
 
-  css(props) {
+  css(props, value) {
+    if (typeof props === 'string' && value !== undefined) {
+      return this.each((_, el) => { el.style[props] = value; });
+    }
     if (typeof props === 'string') {
       const el = this.first();
       return el ? getComputedStyle(el)[props] : undefined;
@@ -438,6 +449,7 @@ export class ZQueryCollection {
   wrap(wrapper) {
     return this.each((_, el) => {
       const w = typeof wrapper === 'string' ? createFragment(wrapper).firstElementChild : wrapper.cloneNode(true);
+      if (!w || !el.parentNode) return;
       el.parentNode.insertBefore(w, el);
       w.appendChild(el);
     });
@@ -563,12 +575,18 @@ export class ZQueryCollection {
         if (typeof selectorOrHandler === 'function') {
           el.addEventListener(evt, selectorOrHandler);
         } else if (typeof selectorOrHandler === 'string') {
-          // Delegated event — only works on elements that support closest()
-          el.addEventListener(evt, (e) => {
+          // Delegated event — store wrapper so off() can remove it
+          const wrapper = (e) => {
             if (!e.target || typeof e.target.closest !== 'function') return;
             const target = e.target.closest(selectorOrHandler);
             if (target && el.contains(target)) handler.call(target, e);
-          });
+          };
+          wrapper._zqOriginal = handler;
+          wrapper._zqSelector = selectorOrHandler;
+          el.addEventListener(evt, wrapper);
+          // Track delegated handlers for removal
+          if (!el._zqDelegated) el._zqDelegated = [];
+          el._zqDelegated.push({ evt, wrapper });
         }
       });
     });
@@ -577,7 +595,20 @@ export class ZQueryCollection {
   off(event, handler) {
     const events = event.split(/\s+/);
     return this.each((_, el) => {
-      events.forEach(evt => el.removeEventListener(evt, handler));
+      events.forEach(evt => {
+        // Try direct removal first
+        el.removeEventListener(evt, handler);
+        // Also check delegated handlers
+        if (el._zqDelegated) {
+          el._zqDelegated = el._zqDelegated.filter(d => {
+            if (d.evt === evt && d.wrapper._zqOriginal === handler) {
+              el.removeEventListener(evt, d.wrapper);
+              return false;
+            }
+            return true;
+          });
+        }
+      });
     });
   }
 
@@ -606,8 +637,12 @@ export class ZQueryCollection {
   // --- Animation -----------------------------------------------------------
 
   animate(props, duration = 300, easing = 'ease') {
+    // Empty collection — resolve immediately
+    if (this.length === 0) return Promise.resolve(this);
     return new Promise(resolve => {
+      let resolved = false;
       const count = { done: 0 };
+      const listeners = [];
       this.each((_, el) => {
         el.style.transition = `all ${duration}ms ${easing}`;
         requestAnimationFrame(() => {
@@ -615,13 +650,27 @@ export class ZQueryCollection {
           const onEnd = () => {
             el.removeEventListener('transitionend', onEnd);
             el.style.transition = '';
-            if (++count.done >= this.length) resolve(this);
+            if (!resolved && ++count.done >= this.length) {
+              resolved = true;
+              resolve(this);
+            }
           };
           el.addEventListener('transitionend', onEnd);
+          listeners.push({ el, onEnd });
         });
       });
       // Fallback in case transitionend doesn't fire
-      setTimeout(() => resolve(this), duration + 50);
+      setTimeout(() => {
+        if (!resolved) {
+          resolved = true;
+          // Clean up any remaining transitionend listeners
+          for (const { el, onEnd } of listeners) {
+            el.removeEventListener('transitionend', onEnd);
+            el.style.transition = '';
+          }
+          resolve(this);
+        }
+      }, duration + 50);
     });
   }
 
@@ -635,7 +684,8 @@ export class ZQueryCollection {
 
   fadeToggle(duration = 300) {
     return Promise.all(this.elements.map(el => {
-      const visible = getComputedStyle(el).opacity !== '0' && getComputedStyle(el).display !== 'none';
+      const cs = getComputedStyle(el);
+      const visible = cs.opacity !== '0' && cs.display !== 'none';
       const col = new ZQueryCollection([el]);
       return visible ? col.fadeOut(duration) : col.fadeIn(duration);
     })).then(() => this);

package/src/diff.js

@@ -239,8 +239,11 @@ function _morphChildrenKeyed(oldParent, oldChildren, newChildren, oldKeyMap, new
       if (!lisSet.has(i)) {
         oldParent.insertBefore(oldNode, cursor);
       }
+      // Capture next sibling BEFORE _morphNode — if _morphNode calls
+      // replaceChild, oldNode is removed and nextSibling becomes stale.
+      const nextSib = oldNode.nextSibling;
       _morphNode(oldParent, oldNode, newNode);
-      cursor = oldNode.nextSibling;
+      cursor = nextSib;
     } else {
       // Insert new node
       const clone = newNode.cloneNode(true);
@@ -418,10 +421,13 @@ function _morphAttributes(oldEl, newEl) {
     }
   }
 
-  // Remove stale attributes
-  for (let i = oldLen - 1; i >= 0; i--) {
-    if (!newNames.has(oldAttrs[i].name)) {
-      oldEl.removeAttribute(oldAttrs[i].name);
+  // Remove stale attributes — snapshot names first because oldAttrs
+  // is a live NamedNodeMap that mutates on removeAttribute().
+  const oldNames = new Array(oldLen);
+  for (let i = 0; i < oldLen; i++) oldNames[i] = oldAttrs[i].name;
+  for (let i = oldNames.length - 1; i >= 0; i--) {
+    if (!newNames.has(oldNames[i])) {
+      oldEl.removeAttribute(oldNames[i]);
     }
   }
 }

package/src/expression.js

@@ -560,6 +560,7 @@ function _isSafeAccess(obj, prop) {
   const BLOCKED = new Set([
     'constructor', '__proto__', 'prototype', '__defineGetter__',
     '__defineSetter__', '__lookupGetter__', '__lookupSetter__',
+    'call', 'apply', 'bind',
   ]);
   if (typeof prop === 'string' && BLOCKED.has(prop)) return false;
 

package/src/http.js

@@ -65,9 +65,25 @@ async function request(method, url, data, options = {}) {
 
   // Timeout via AbortController
   const controller = new AbortController();
-  fetchOpts.signal = options.signal || controller.signal;
   const timeout = options.timeout ?? _config.timeout;
   let timer;
+  // Combine user signal with internal controller for proper timeout support
+  if (options.signal) {
+    // If AbortSignal.any is available, combine both signals
+    if (typeof AbortSignal.any === 'function') {
+      fetchOpts.signal = AbortSignal.any([options.signal, controller.signal]);
+    } else {
+      // Fallback: forward user signal's abort to our controller
+      fetchOpts.signal = controller.signal;
+      if (options.signal.aborted) {
+        controller.abort(options.signal.reason);
+      } else {
+        options.signal.addEventListener('abort', () => controller.abort(options.signal.reason), { once: true });
+      }
+    }
+  } else {
+    fetchOpts.signal = controller.signal;
+  }
   if (timeout > 0) {
     timer = setTimeout(() => controller.abort(), timeout);
   }

package/src/reactive.js

@@ -134,7 +134,13 @@ export function signal(initial) {
  */
 export function computed(fn) {
   const s = new Signal(undefined);
-  effect(() => { s._value = fn(); s._notify(); });
+  effect(() => {
+    const v = fn();
+    if (v !== s._value) {
+      s._value = v;
+      s._notify();
+    }
+  });
   return s;
 }
 
@@ -177,6 +183,6 @@ export function effect(fn) {
       }
       execute._deps.clear();
     }
-    Signal._activeEffect = null;
+    // Don't clobber _activeEffect — another effect may be running
   };
 }

package/src/router.js

@@ -24,6 +24,23 @@ import { reportError, ErrorCode } from './errors.js';
 // Unique marker on history.state to identify zQuery-managed entries
 const _ZQ_STATE_KEY = '__zq';
 
+/**
+ * Shallow-compare two flat objects (for params / query comparison).
+ * Avoids JSON.stringify overhead on every navigation.
+ */
+function _shallowEqual(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) return false;
+  for (let i = 0; i < keysA.length; i++) {
+    const k = keysA[i];
+    if (a[k] !== b[k]) return false;
+  }
+  return true;
+}
+
 class Router {
   constructor(config = {}) {
     this._el = null;
@@ -71,11 +88,12 @@ class Router {
       config.routes.forEach(r => this.add(r));
     }
 
-    // Listen for navigation
+    // Listen for navigation — store handler references for cleanup in destroy()
     if (this._mode === 'hash') {
-      window.addEventListener('hashchange', () => this._resolve());
+      this._onNavEvent = () => this._resolve();
+      window.addEventListener('hashchange', this._onNavEvent);
     } else {
-      window.addEventListener('popstate', (e) => {
+      this._onNavEvent = (e) => {
         // Check for substate pop first — if a listener handles it, don't route
         const st = e.state;
         if (st && st[_ZQ_STATE_KEY] === 'substate') {
@@ -89,11 +107,12 @@ class Router {
           this._fireSubstate(null, null, 'reset');
         }
         this._resolve();
-      });
+      };
+      window.addEventListener('popstate', this._onNavEvent);
     }
 
     // Intercept link clicks for SPA navigation
-    document.addEventListener('click', (e) => {
+    this._onLinkClick = (e) => {
       // Don't intercept modified clicks (Ctrl/Cmd+click = new tab)
       if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
       const link = e.target.closest('[z-link]');
@@ -115,7 +134,8 @@ class Router {
         const scrollBehavior = link.getAttribute('z-to-top') || 'instant';
         window.scrollTo({ top: 0, behavior: scrollBehavior });
       }
-    });
+    };
+    document.addEventListener('click', this._onLinkClick);
 
     // Initial resolve
     if (this._el) {
@@ -487,8 +507,8 @@ class Router {
     // with the same params, skip the full destroy/mount cycle and just
     // update props. This prevents flashing and unnecessary DOM churn.
     if (from && this._instance && matched.component === from.route.component) {
-      const sameParams = JSON.stringify(params) === JSON.stringify(from.params);
-      const sameQuery = JSON.stringify(query) === JSON.stringify(from.query);
+      const sameParams = _shallowEqual(params, from.params);
+      const sameQuery = _shallowEqual(query, from.query);
       if (sameParams && sameQuery) {
         // Identical navigation — nothing to do
         return;
@@ -585,6 +605,15 @@ class Router {
   // --- Destroy -------------------------------------------------------------
 
   destroy() {
+    // Remove window/document event listeners to prevent memory leaks
+    if (this._onNavEvent) {
+      window.removeEventListener(this._mode === 'hash' ? 'hashchange' : 'popstate', this._onNavEvent);
+      this._onNavEvent = null;
+    }
+    if (this._onLinkClick) {
+      document.removeEventListener('click', this._onLinkClick);
+      this._onLinkClick = null;
+    }
     if (this._instance) this._instance.destroy();
     this._listeners.clear();
     this._substateListeners = [];

package/src/ssr.js

@@ -192,7 +192,7 @@ class SSRApp {
     ${meta}
     ${styleLinks}
   </head>
-  <body ${bodyAttrs}>
+  <body ${bodyAttrs.replace(/on\w+\s*=/gi, '').replace(/javascript\s*:/gi, '')}>
     <div id="app">${content}</div>
     ${scriptTags}
   </body>

package/src/store.js

@@ -36,6 +36,7 @@ class Store {
     this._getters = config.getters || {};
     this._middleware = [];
     this._history = [];              // action log
+    this._maxHistory = config.maxHistory || 1000;
     this._debug = config.debug || false;
 
     // Create reactive state
@@ -95,6 +96,10 @@ class Store {
     try {
       const result = action(this.state, ...args);
       this._history.push({ action: name, args, timestamp: Date.now() });
+      // Cap history to prevent unbounded memory growth
+      if (this._history.length > this._maxHistory) {
+        this._history.splice(0, this._history.length - this._maxHistory);
+      }
       return result;
     } catch (err) {
       reportError(ErrorCode.STORE_ACTION, `Action "${name}" threw`, { action: name, args }, err);

package/src/utils.js

@@ -144,16 +144,21 @@ export function deepClone(obj) {
  * Deep merge objects
  */
 export function deepMerge(target, ...sources) {
-  for (const source of sources) {
-    for (const key of Object.keys(source)) {
-      if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
-        if (!target[key] || typeof target[key] !== 'object') target[key] = {};
-        deepMerge(target[key], source[key]);
+  const seen = new WeakSet();
+  function merge(tgt, src) {
+    if (seen.has(src)) return tgt;
+    seen.add(src);
+    for (const key of Object.keys(src)) {
+      if (src[key] && typeof src[key] === 'object' && !Array.isArray(src[key])) {
+        if (!tgt[key] || typeof tgt[key] !== 'object') tgt[key] = {};
+        merge(tgt[key], src[key]);
       } else {
-        target[key] = source[key];
+        tgt[key] = src[key];
       }
     }
+    return tgt;
   }
+  for (const source of sources) merge(target, source);
   return target;
 }
 
@@ -164,6 +169,7 @@ export function isEqual(a, b) {
   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;
   const keysA = Object.keys(a);
   const keysB = Object.keys(b);
   if (keysA.length !== keysB.length) return false;