@bquery/bquery 1.8.1 → 1.9.0

package/src/reactive/watch.ts

@@ -6,7 +6,9 @@ import type { Computed } from './computed';
 import type { Signal } from './core';
 import type { CleanupFn } from './internals';
 
+import { debounce, throttle } from '../core/utils/function';
 import { effect } from './effect';
+import { getCurrentScope, onScopeDispose } from './scope';
 
 /**
  * Options for the watch function.
@@ -71,3 +73,138 @@ export const watch = <T>(
     }
   });
 };
+
+/**
+ * Watches a signal or computed value and debounces callback delivery.
+ * Rapid changes are collapsed into a single callback using the latest value
+ * and the first old value observed within the debounce window.
+ *
+ * @template T - The type of the watched value
+ * @param source - The signal or computed to watch
+ * @param callback - Function called with the debounced (newValue, oldValue)
+ * @param delayMs - Debounce delay in milliseconds
+ * @param options - Watch options
+ * @returns A cleanup function to stop watching and cancel pending callbacks
+ *
+ * @example
+ * ```ts
+ * const query = signal('');
+ * const stop = watchDebounce(query, (newQuery) => {
+ *   console.log('Search for', newQuery);
+ * }, 250);
+ *
+ * query.value = 'b';
+ * query.value = 'bq';
+ * query.value = 'bqu'; // Only this value is delivered after 250ms
+ *
+ * stop();
+ * ```
+ */
+export const watchDebounce = <T>(
+  source: Signal<T> | Computed<T>,
+  callback: (newValue: T, oldValue: T | undefined) => void,
+  delayMs: number,
+  options: WatchOptions<T> = {}
+): CleanupFn => {
+  const { immediate = false, equals = Object.is } = options;
+  const normalizedDelayMs = Number.isFinite(delayMs) ? Math.max(0, delayMs) : 0;
+  let hasPending = false;
+  let pendingNewValue!: T;
+  let pendingOldValue: T | undefined;
+  const cancelPending = (): void => {
+    notify.cancel();
+    hasPending = false;
+    pendingOldValue = undefined;
+  };
+
+  const notify = debounce(() => {
+    if (!hasPending) {
+      return;
+    }
+
+    try {
+      callback(pendingNewValue, pendingOldValue);
+    } catch (error) {
+      console.error('bQuery reactive: Error in watchDebounce callback', error);
+    }
+    hasPending = false;
+    pendingOldValue = undefined;
+  }, normalizedDelayMs);
+
+  if (immediate) {
+    callback(source.peek(), undefined);
+  }
+
+  const cleanup = watch(
+    source,
+    (newValue, oldValue) => {
+      if (!hasPending) {
+        pendingOldValue = oldValue;
+      }
+
+      pendingNewValue = newValue;
+      hasPending = true;
+      notify();
+    },
+    { equals }
+  );
+
+  if (getCurrentScope()) {
+    onScopeDispose(cancelPending);
+  }
+
+  return () => {
+    cleanup();
+    cancelPending();
+  };
+};
+
+/**
+ * Watches a signal or computed value and throttles callback delivery.
+ * Changes are delivered at most once per interval.
+ *
+ * @template T - The type of the watched value
+ * @param source - The signal or computed to watch
+ * @param callback - Function called with throttled (newValue, oldValue) updates
+ * @param intervalMs - Minimum interval between callback runs in milliseconds
+ * @param options - Watch options
+ * @returns A cleanup function to stop watching and reset the throttle window
+ *
+ * @example
+ * ```ts
+ * const scrollY = signal(0);
+ * const stop = watchThrottle(scrollY, (nextY) => {
+ *   console.log('Scroll position', nextY);
+ * }, 100);
+ *
+ * stop();
+ * ```
+ */
+export const watchThrottle = <T>(
+  source: Signal<T> | Computed<T>,
+  callback: (newValue: T, oldValue: T | undefined) => void,
+  intervalMs: number,
+  options: WatchOptions<T> = {}
+): CleanupFn => {
+  const { immediate = false, equals = Object.is } = options;
+  const normalizedIntervalMs = Number.isFinite(intervalMs) ? Math.max(0, intervalMs) : 0;
+  const notify = throttle(
+    (newValue: T, oldValue: T | undefined) => {
+      callback(newValue, oldValue);
+    },
+    normalizedIntervalMs
+  );
+
+  if (immediate) {
+    notify(source.peek(), undefined);
+  }
+
+  const cleanup = watch(source, (newValue, oldValue) => {
+    notify(newValue, oldValue);
+  }, { equals });
+
+  return () => {
+    cleanup();
+    notify.cancel();
+  };
+};

package/src/view/directives/aria.ts

@@ -0,0 +1,72 @@
+import { effect } from '../../reactive/index';
+import { isPrototypePollutionKey } from '../../core/utils/object';
+import { evaluate, parseObjectExpression } from '../evaluate';
+import type { DirectiveHandler } from '../types';
+
+const toKebabCase = (value: string): string => value.replace(/([A-Z])/g, '-$1').toLowerCase();
+
+const normalizeAriaAttribute = (name: string): string => {
+  const trimmed = name.trim();
+  const lower = trimmed.toLowerCase();
+
+  if (lower.startsWith('aria-')) {
+    return lower;
+  }
+
+  const withoutPrefix = /^aria[A-Z]/.test(trimmed) ? trimmed.slice(4) : trimmed;
+  return `aria-${toKebabCase(withoutPrefix).replace(/^-/, '')}`;
+};
+
+const shouldRemoveAttribute = (value: unknown): boolean => value == null || value === '';
+
+/**
+ * Handles bq-aria directive - reactive ARIA attribute binding.
+ * @internal
+ */
+export const handleAria: DirectiveHandler = (el, expression, context, cleanups) => {
+  let appliedAttributes: Set<string> = new Set();
+
+  const cleanup = effect(() => {
+    const newAttributes = new Set<string>();
+    const ariaValues = Object.create(null) as Record<string, unknown>;
+
+    if (expression.trimStart().startsWith('{')) {
+      const ariaMap = parseObjectExpression(expression);
+      for (const [attrName, valueExpr] of Object.entries(ariaMap)) {
+        ariaValues[attrName] = evaluate(valueExpr, context);
+      }
+    } else {
+      const result = evaluate<Record<string, unknown>>(expression, context);
+      if (result && typeof result === 'object' && !Array.isArray(result)) {
+        for (const [attrName, value] of Object.entries(result)) {
+          if (isPrototypePollutionKey(attrName)) {
+            continue;
+          }
+
+          ariaValues[attrName] = value;
+        }
+      }
+    }
+
+    for (const [attrName, value] of Object.entries(ariaValues)) {
+      const normalizedName = normalizeAriaAttribute(attrName);
+      if (shouldRemoveAttribute(value)) {
+        el.removeAttribute(normalizedName);
+        continue;
+      }
+
+      el.setAttribute(normalizedName, value === true ? 'true' : String(value));
+      newAttributes.add(normalizedName);
+    }
+
+    for (const attrName of appliedAttributes) {
+      if (!newAttributes.has(attrName)) {
+        el.removeAttribute(attrName);
+      }
+    }
+
+    appliedAttributes = newAttributes;
+  });
+
+  cleanups.push(cleanup);
+};

package/src/view/directives/error.ts

@@ -0,0 +1,56 @@
+import { effect, isComputed, isSignal } from '../../reactive/index';
+import { evaluate } from '../evaluate';
+import type { DirectiveHandler } from '../types';
+
+type ErrorSource = unknown;
+
+const getErrorMessage = (source: ErrorSource): string => {
+  if (isSignal(source) || isComputed(source)) {
+    return String(source.value ?? '');
+  }
+
+  if (source && typeof source === 'object' && 'error' in source) {
+    const errorValue = source.error;
+    if (isSignal(errorValue) || isComputed(errorValue)) {
+      return String(errorValue.value ?? '');
+    }
+    return String(errorValue ?? '');
+  }
+
+  return String(source ?? '');
+};
+
+/**
+ * Handles bq-error directive - renders error messages and toggles visibility.
+ * @internal
+ */
+export const handleError: DirectiveHandler = (el, expression, context, cleanups) => {
+  const htmlEl = el as HTMLElement;
+  const shouldManageAriaHidden = !htmlEl.hasAttribute('aria-hidden');
+
+  if (!htmlEl.hasAttribute('role')) {
+    htmlEl.setAttribute('role', 'alert');
+  }
+
+  if (!htmlEl.hasAttribute('aria-live')) {
+    htmlEl.setAttribute('aria-live', 'assertive');
+  }
+
+  const cleanup = effect(() => {
+    const source = evaluate(expression, context);
+    const message = getErrorMessage(source).trim();
+    const hasMessage = message.length > 0;
+
+    htmlEl.textContent = message;
+    htmlEl.hidden = !hasMessage;
+    if (shouldManageAriaHidden) {
+      if (hasMessage) {
+        htmlEl.removeAttribute('aria-hidden');
+      } else {
+        htmlEl.setAttribute('aria-hidden', 'true');
+      }
+    }
+  });
+
+  cleanups.push(cleanup);
+};

package/src/view/directives/index.ts

@@ -1,5 +1,7 @@
+export { handleAria } from './aria';
 export { handleBind } from './bind';
 export { handleClass } from './class';
+export { handleError } from './error';
 export { createForHandler } from './for';
 export { handleHtml } from './html';
 export { handleIf } from './if';

package/src/view/mount.ts

@@ -1,8 +1,10 @@
 import type { CleanupFn } from '../reactive/index';
 import {
   createForHandler,
+  handleAria,
   handleBind,
   handleClass,
+  handleError,
   handleHtml,
   handleIf,
   handleModel,
@@ -80,6 +82,8 @@ export const mount = (
 
   const handlers: DirectiveHandlers = {
     text: handleText,
+    error: handleError,
+    aria: handleAria,
     html: handleHtml(sanitize),
     if: handleIf,
     show: handleShow,

package/src/view/process.ts

@@ -5,6 +5,8 @@ import type { BindingContext, DirectiveHandler } from './types';
 
 export type DirectiveHandlers = {
   text: DirectiveHandler;
+  error: DirectiveHandler;
+  aria: DirectiveHandler;
   html: DirectiveHandler;
   if: DirectiveHandler;
   show: DirectiveHandler;
@@ -46,6 +48,10 @@ export const processElement = (
     // Handle other directives
     if (directive === 'text') {
       handlers.text(el, value, context, cleanups);
+    } else if (directive === 'error') {
+      handlers.error(el, value, context, cleanups);
+    } else if (directive === 'aria') {
+      handlers.aria(el, value, context, cleanups);
     } else if (directive === 'html') {
       handlers.html(el, value, context, cleanups);
     } else if (directive === 'if') {

package/dist/media-i-fB5WxI.js

@@ -1,340 +0,0 @@
-import { n as s } from "./core-DdtZHzsS.js";
-import { m as u } from "./reactive-DwkhUJfP.js";
-var A = (t) => {
-  const a = s(!1);
-  let i;
-  if (typeof window < "u" && typeof window.matchMedia == "function") try {
-    const e = window.matchMedia(t);
-    a.value = e.matches;
-    const d = (l) => {
-      a.value = l.matches;
-    };
-    if (typeof e.addEventListener == "function")
-      e.addEventListener("change", d), i = () => {
-        e.removeEventListener("change", d);
-      };
-    else if (typeof e.addListener == "function") {
-      const l = e;
-      l.addListener(d), i = () => {
-        l.removeListener(d);
-      };
-    }
-  } catch {
-  }
-  const r = u(a);
-  let n = !1;
-  return Object.defineProperty(r, "destroy", {
-    enumerable: !1,
-    configurable: !0,
-    value() {
-      n || (n = !0, i?.(), a.dispose());
-    }
-  }), r;
-}, P = (t) => {
-  const a = {}, i = [];
-  for (const e of Object.keys(t)) {
-    const d = t[e], l = s(!1);
-    let f;
-    if (typeof window < "u" && typeof window.matchMedia == "function") try {
-      const c = window.matchMedia(`(min-width: ${d}px)`);
-      l.value = c.matches;
-      const o = (p) => {
-        l.value = p.matches;
-      };
-      if (typeof c.addEventListener == "function")
-        c.addEventListener("change", o), f = () => {
-          c.removeEventListener("change", o);
-        };
-      else {
-        const p = c;
-        typeof p.addListener == "function" && (p.addListener(o), f = () => {
-          p.removeListener?.(o);
-        });
-      }
-    } catch {
-    }
-    const v = u(l);
-    let g = !1;
-    Object.defineProperty(v, "destroy", {
-      enumerable: !1,
-      configurable: !0,
-      value() {
-        g || (g = !0, f?.(), l.dispose());
-      }
-    }), i.push(v.destroy), a[e] = v;
-  }
-  let r = !1;
-  const n = Object.defineProperty(a, "destroyAll", {
-    enumerable: !1,
-    configurable: !0,
-    value() {
-      r || (r = !0, i.forEach((e) => {
-        e();
-      }));
-    }
-  });
-  return Object.prototype.hasOwnProperty.call(a, "destroy") || Object.defineProperty(n, "destroy", {
-    enumerable: !1,
-    configurable: !0,
-    value: n.destroyAll
-  }), n;
-}, y = (t, a) => a >= t ? "portrait" : "landscape", x = () => {
-  const t = s({
-    width: typeof window < "u" ? window.innerWidth : 0,
-    height: typeof window < "u" ? window.innerHeight : 0,
-    orientation: typeof window < "u" ? y(window.innerWidth, window.innerHeight) : "portrait"
-  });
-  let a;
-  if (typeof window < "u") {
-    const n = () => {
-      t.value = {
-        width: window.innerWidth,
-        height: window.innerHeight,
-        orientation: y(window.innerWidth, window.innerHeight)
-      };
-    };
-    window.addEventListener("resize", n), a = () => {
-      window.removeEventListener("resize", n);
-    };
-  }
-  const i = u(t);
-  let r = !1;
-  return Object.defineProperty(i, "destroy", {
-    enumerable: !1,
-    configurable: !0,
-    value: () => {
-      r || (r = !0, a?.(), t.dispose());
-    }
-  }), i;
-}, h = () => {
-  const t = typeof navigator < "u" && navigator.onLine !== void 0 ? navigator.onLine : !0, a = (typeof navigator < "u" ? navigator : void 0)?.connection;
-  return {
-    online: t,
-    effectiveType: a?.effectiveType ?? "unknown",
-    downlink: a?.downlink ?? 0,
-    rtt: a?.rtt ?? 0
-  };
-}, I = () => {
-  const t = s(h());
-  let a;
-  if (typeof window < "u") {
-    const n = () => {
-      t.value = h();
-    };
-    window.addEventListener("online", n), window.addEventListener("offline", n);
-    const e = typeof navigator < "u" ? navigator : void 0;
-    e?.connection && typeof e.connection.addEventListener == "function" && e.connection.addEventListener("change", n), a = () => {
-      window.removeEventListener("online", n), window.removeEventListener("offline", n), e?.connection && typeof e.connection.removeEventListener == "function" && e.connection.removeEventListener("change", n);
-    };
-  }
-  const i = u(t);
-  let r = !1;
-  return Object.defineProperty(i, "destroy", {
-    value() {
-      r || (r = !0, a?.(), t.dispose());
-    },
-    enumerable: !1,
-    configurable: !0
-  }), i;
-}, E = {
-  supported: !1,
-  charging: !1,
-  chargingTime: 0,
-  dischargingTime: 0,
-  level: 1
-}, j = () => {
-  const t = s({ ...E });
-  let a, i = !1;
-  typeof navigator < "u" && "getBattery" in navigator && typeof navigator.getBattery == "function" && navigator.getBattery().then((n) => {
-    if (i) return;
-    const e = () => {
-      t.value = {
-        supported: !0,
-        charging: n.charging,
-        chargingTime: n.chargingTime,
-        dischargingTime: n.dischargingTime,
-        level: n.level
-      };
-    };
-    e(), n.addEventListener("chargingchange", e), n.addEventListener("chargingtimechange", e), n.addEventListener("dischargingtimechange", e), n.addEventListener("levelchange", e), a = () => {
-      n.removeEventListener("chargingchange", e), n.removeEventListener("chargingtimechange", e), n.removeEventListener("dischargingtimechange", e), n.removeEventListener("levelchange", e);
-    };
-  }).catch(() => {
-  });
-  const r = u(t);
-  return Object.defineProperty(r, "destroy", {
-    enumerable: !1,
-    configurable: !0,
-    value() {
-      i || (i = !0, a?.(), t.dispose());
-    }
-  }), r;
-}, w = {
-  supported: !1,
-  loading: !1,
-  latitude: null,
-  longitude: null,
-  accuracy: null,
-  altitude: null,
-  altitudeAccuracy: null,
-  heading: null,
-  speed: null,
-  timestamp: null,
-  error: null
-}, R = (t = {}) => {
-  const { enableHighAccuracy: a = !1, maximumAge: i = 0, timeout: r = 1 / 0, watch: n = !1 } = t, e = s({ ...w });
-  let d;
-  if (typeof navigator < "u" && "geolocation" in navigator) {
-    e.value = {
-      ...w,
-      supported: !0,
-      loading: !0
-    };
-    const v = {
-      enableHighAccuracy: a,
-      maximumAge: i,
-      timeout: r === 1 / 0 ? void 0 : r
-    }, g = (o) => {
-      e.value = {
-        supported: !0,
-        loading: !1,
-        latitude: o.coords.latitude,
-        longitude: o.coords.longitude,
-        accuracy: o.coords.accuracy,
-        altitude: o.coords.altitude,
-        altitudeAccuracy: o.coords.altitudeAccuracy,
-        heading: o.coords.heading,
-        speed: o.coords.speed,
-        timestamp: o.timestamp,
-        error: null
-      };
-    }, c = (o) => {
-      e.value = {
-        ...e.value,
-        loading: !1,
-        error: o.message
-      };
-    };
-    if (n) {
-      const o = navigator.geolocation.watchPosition(g, c, v);
-      d = () => {
-        navigator.geolocation.clearWatch(o);
-      };
-    } else navigator.geolocation.getCurrentPosition(g, c, v);
-  }
-  const l = u(e);
-  let f = !1;
-  return Object.defineProperty(l, "destroy", {
-    enumerable: !1,
-    configurable: !0,
-    value() {
-      f || (f = !0, d?.(), e.dispose());
-    }
-  }), l;
-}, L = {
-  acceleration: {
-    x: null,
-    y: null,
-    z: null
-  },
-  accelerationIncludingGravity: {
-    x: null,
-    y: null,
-    z: null
-  },
-  rotationRate: {
-    alpha: null,
-    beta: null,
-    gamma: null
-  },
-  interval: 0
-}, b = {
-  alpha: null,
-  beta: null,
-  gamma: null,
-  absolute: !1
-}, _ = () => {
-  const t = s({ ...L });
-  let a;
-  if (typeof window < "u") {
-    const n = (e) => {
-      t.value = {
-        acceleration: {
-          x: e.acceleration?.x ?? null,
-          y: e.acceleration?.y ?? null,
-          z: e.acceleration?.z ?? null
-        },
-        accelerationIncludingGravity: {
-          x: e.accelerationIncludingGravity?.x ?? null,
-          y: e.accelerationIncludingGravity?.y ?? null,
-          z: e.accelerationIncludingGravity?.z ?? null
-        },
-        rotationRate: {
-          alpha: e.rotationRate?.alpha ?? null,
-          beta: e.rotationRate?.beta ?? null,
-          gamma: e.rotationRate?.gamma ?? null
-        },
-        interval: e.interval ?? 0
-      };
-    };
-    window.addEventListener("devicemotion", n), a = () => {
-      window.removeEventListener("devicemotion", n);
-    };
-  }
-  const i = u(t);
-  let r = !1;
-  return Object.defineProperty(i, "destroy", {
-    enumerable: !1,
-    configurable: !0,
-    value() {
-      r || (r = !0, a?.(), t.dispose());
-    }
-  }), i;
-}, k = () => {
-  const t = s({ ...b });
-  let a;
-  if (typeof window < "u") {
-    const n = (e) => {
-      t.value = {
-        alpha: e.alpha ?? null,
-        beta: e.beta ?? null,
-        gamma: e.gamma ?? null,
-        absolute: e.absolute ?? !1
-      };
-    };
-    window.addEventListener("deviceorientation", n), a = () => {
-      window.removeEventListener("deviceorientation", n);
-    };
-  }
-  const i = u(t);
-  let r = !1;
-  return Object.defineProperty(i, "destroy", {
-    enumerable: !1,
-    configurable: !0,
-    value() {
-      r || (r = !0, a?.(), t.dispose());
-    }
-  }), i;
-}, m = "bQuery media: Clipboard API is unavailable. Use a secure context (HTTPS or localhost) and ensure clipboard permissions or user-activation requirements are met.", z = {
-  read: async () => {
-    if (typeof navigator > "u" || !navigator.clipboard || typeof navigator.clipboard.readText != "function") throw new Error(m);
-    return navigator.clipboard.readText();
-  },
-  write: async (t) => {
-    if (typeof navigator > "u" || !navigator.clipboard || typeof navigator.clipboard.writeText != "function") throw new Error(m);
-    return navigator.clipboard.writeText(t);
-  }
-};
-export {
-  j as a,
-  P as c,
-  R as i,
-  A as l,
-  _ as n,
-  I as o,
-  k as r,
-  x as s,
-  z as t
-};
-
-//# sourceMappingURL=media-i-fB5WxI.js.map