zero-query 0.9.0 → 0.9.5

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();
@@ -560,6 +589,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;
 
@@ -603,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;
     }
 
@@ -641,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);
     }
 
@@ -654,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;
@@ -684,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;
     }
@@ -711,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') {
@@ -790,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;
 
@@ -811,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

@@ -65,11 +65,28 @@ 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;
+  }
+  let _timedOut = false;
   if (timeout > 0) {
-    timer = setTimeout(() => controller.abort(), timeout);
+    timer = setTimeout(() => { _timedOut = true; controller.abort(); }, timeout);
   }
 
   // Run request interceptors
@@ -129,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/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;
@@ -563,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
@@ -585,6 +610,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

@@ -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();
 }
 
 
@@ -144,30 +151,40 @@ 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;
 }
 
 /**
  * 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));
 }
 
 
@@ -243,7 +260,7 @@ export const session = {
 // ---------------------------------------------------------------------------
 // Event bus (pub/sub)
 // ---------------------------------------------------------------------------
-class EventBus {
+export class EventBus {
   constructor() { this._handlers = new Map(); }
 
   on(event, fn) {
@@ -269,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));
+}