sibujs 4.4.0 → 4.5.0

package/README.md

@@ -164,6 +164,17 @@ Import advanced features from focused entry points for optimal tree-shaking. `si
 ### `sibujs/browser` — Reactive browser APIs
 Reactive wrappers for `media` queries, `resize`, `scroll`, `online`/`network`, `geo`, `battery`, `idle`, `permissions`, `clipboard`, `dragDrop`, `title`/`favicon`, `colorScheme`, `visibility`, `mouse`/`swipe`, `windowSize`, `urlState`, `broadcast`, `fullscreen`, `wakeLock`, `animationFrame`, `mutationObserver`, `bounds`, `keyboard`, `speech`, `gamepad`, `pointerLock`, `vibrate`, `textSelection`, `imageLoader`, and `format`.
 
+`media()` returns `{ matches, dispose }`, not a bare `() => boolean`. Its `matchMedia` listener stays attached until `dispose()` is called, so release it when the owner goes away:
+
+```ts
+import { media } from "sibujs/browser";
+
+const { matches: small, dispose } = media("(max-width: 640px)");
+
+small();   // reactive boolean
+dispose(); // remove the matchMedia listener
+```
+
 ### `sibujs/ui` — UI utilities
 `form` & `formAction` (validation/binding), `virtualList`, `intersection`, `inputMask`, `a11y` / `a11yPrimitives`, `scopedStyle`, `reactiveAttr`, `dialog`, `toast`, `infiniteScroll`, `pagination`, `eventBus`, `timers`, `hover`, `scrollLock`, `lazyEffect`, plus composable/HOC patterns.
 

package/dist/browser.cjs

@@ -310,6 +310,15 @@ function untracked(fn) {
 var subscriberEpochCounter = 0;
 function retrack(effectFn, subscriber) {
   const prev = currentSubscriber;
+  let savedDepth = 0;
+  let savedSuspendSub = null;
+  if (trackingSuspended) {
+    savedDepth = suspendDepth;
+    savedSuspendSub = suspendSavedSub;
+    suspendDepth = 0;
+    suspendSavedSub = null;
+    trackingSuspended = false;
+  }
   currentSubscriber = subscriber;
   const sub = subscriber;
   const epoch = ++subscriberEpochCounter;
@@ -324,6 +333,11 @@ function retrack(effectFn, subscriber) {
     effectFn();
   } finally {
     currentSubscriber = prev;
+    if (savedDepth !== 0) {
+      suspendDepth = savedDepth;
+      suspendSavedSub = savedSuspendSub;
+      trackingSuspended = true;
+    }
     let node = sub.depsHead ?? null;
     while (node !== null) {
       const next = node.subNext;
@@ -343,11 +357,25 @@ function track(effectFn, subscriber) {
   if (!subscriber) return reactiveBinding(effectFn);
   cleanup(subscriber);
   const prev = currentSubscriber;
+  let savedDepth = 0;
+  let savedSuspendSub = null;
+  if (trackingSuspended) {
+    savedDepth = suspendDepth;
+    savedSuspendSub = suspendSavedSub;
+    suspendDepth = 0;
+    suspendSavedSub = null;
+    trackingSuspended = false;
+  }
   currentSubscriber = subscriber;
   try {
     effectFn();
   } finally {
     currentSubscriber = prev;
+    if (savedDepth !== 0) {
+      suspendDepth = savedDepth;
+      suspendSavedSub = savedSuspendSub;
+      trackingSuspended = true;
+    }
     const sub2 = subscriber;
     for (let n = sub2.depsHead ?? null; n !== null; n = n.subNext) {
       const sig = n.sig;
@@ -518,8 +546,9 @@ function propagateDirty(sub) {
         if (s._c) {
           const nSig = s._sig;
           if (nSig) {
-            if (!nSig._d) {
+            if (!nSig._d || nSig._f === true) {
               nSig._d = true;
+              nSig._f = false;
               stack.push(nSig);
             }
           } else {
@@ -619,7 +648,7 @@ function forEachSubscriber(signal2, visit) {
 }
 
 // src/reactivity/track.ts
-var _runtimeVersion = true ? "4.4.0" : "dev";
+var _runtimeVersion = true ? "4.5.0" : "dev";
 var REGISTRY_KEY = /* @__PURE__ */ Symbol.for("sibujs.reactive.v1");
 function resolveReactiveApi() {
   const g = globalThis;

package/dist/browser.d.cts

@@ -1,9 +1,22 @@
 /**
- * media returns a reactive boolean that tracks whether a CSS media query matches.
+ * media tracks whether a CSS media query matches.
  * Uses `window.matchMedia` and listens to `change` events for live updates.
  *
+ * It returns an object, not a bare `() => boolean`. The `change` listener stays
+ * attached until `dispose()` is called, so a query created by a component must
+ * be released with it (e.g. `onUnmount(dispose, el)`). After disposal `matches()`
+ * keeps returning its last value.
+ *
+ * @example
+ * ```ts
+ * const { matches: small, dispose } = media("(max-width: 640px)");
+ *
+ * small();
+ * dispose();
+ * ```
+ *
  * @param query CSS media query string (e.g. "(max-width: 768px)")
- * @returns Object with reactive matches getter and dispose function for cleanup
+ * @returns `{ matches, dispose }` — a reactive getter and the listener release
  */
 declare function media(query: string): {
     matches: () => boolean;

package/dist/browser.d.ts

@@ -1,9 +1,22 @@
 /**
- * media returns a reactive boolean that tracks whether a CSS media query matches.
+ * media tracks whether a CSS media query matches.
  * Uses `window.matchMedia` and listens to `change` events for live updates.
  *
+ * It returns an object, not a bare `() => boolean`. The `change` listener stays
+ * attached until `dispose()` is called, so a query created by a component must
+ * be released with it (e.g. `onUnmount(dispose, el)`). After disposal `matches()`
+ * keeps returning its last value.
+ *
+ * @example
+ * ```ts
+ * const { matches: small, dispose } = media("(max-width: 640px)");
+ *
+ * small();
+ * dispose();
+ * ```
+ *
  * @param query CSS media query string (e.g. "(max-width: 768px)")
- * @returns Object with reactive matches getter and dispose function for cleanup
+ * @returns `{ matches, dispose }` — a reactive getter and the listener release
  */
 declare function media(query: string): {
     matches: () => boolean;

package/dist/browser.js

@@ -35,14 +35,14 @@ import {
   visibility,
   wakeLock,
   windowSize
-} from "./chunk-LYVUX7NT.js";
+} from "./chunk-OMJJM3KM.js";
 import "./chunk-H3SRKIYX.js";
 import "./chunk-52XFPGSN.js";
 import "./chunk-7ZHH77QA.js";
-import "./chunk-7GIHSAWB.js";
+import "./chunk-RIXRAYIU.js";
 import "./chunk-5DXA2J44.js";
-import "./chunk-NVNJH22U.js";
-import "./chunk-3BTTCZ5J.js";
+import "./chunk-XZZOBQAY.js";
+import "./chunk-UGRX3S57.js";
 import "./chunk-2WLZ6757.js";
 export {
   animationFrame,

package/dist/build.cjs

@@ -1765,6 +1765,14 @@ function setSafeAttribute(el, name, value, options = {}) {
   const html3 = isHtmlElement(el);
   const idlName = html3 ? name.toLowerCase() : name;
   if (typeof value === "boolean") {
+    if (name.length > 5 && name.slice(0, 5).toLowerCase() === "aria-") {
+      const token = value ? "true" : "false";
+      if ((ns ? el.getAttributeNS(ns, localName) : el.getAttribute(name)) !== token) {
+        if (ns) el.setAttributeNS(ns, name, token);
+        else el.setAttribute(name, token);
+      }
+      return true;
+    }
     if (html3 && BOOLEAN_IDL_ATTRS.has(idlName) && idlName in el) {
       setProp(el, idlName, value);
     } else if (value) {
@@ -1937,6 +1945,15 @@ function untracked(fn) {
 var subscriberEpochCounter = 0;
 function retrack(effectFn, subscriber) {
   const prev = currentSubscriber;
+  let savedDepth = 0;
+  let savedSuspendSub = null;
+  if (trackingSuspended) {
+    savedDepth = suspendDepth;
+    savedSuspendSub = suspendSavedSub;
+    suspendDepth = 0;
+    suspendSavedSub = null;
+    trackingSuspended = false;
+  }
   currentSubscriber = subscriber;
   const sub2 = subscriber;
   const epoch = ++subscriberEpochCounter;
@@ -1951,6 +1968,11 @@ function retrack(effectFn, subscriber) {
     effectFn();
   } finally {
     currentSubscriber = prev;
+    if (savedDepth !== 0) {
+      suspendDepth = savedDepth;
+      suspendSavedSub = savedSuspendSub;
+      trackingSuspended = true;
+    }
     let node = sub2.depsHead ?? null;
     while (node !== null) {
       const next = node.subNext;
@@ -1970,11 +1992,25 @@ function track(effectFn, subscriber) {
   if (!subscriber) return reactiveBinding(effectFn);
   cleanup(subscriber);
   const prev = currentSubscriber;
+  let savedDepth = 0;
+  let savedSuspendSub = null;
+  if (trackingSuspended) {
+    savedDepth = suspendDepth;
+    savedSuspendSub = suspendSavedSub;
+    suspendDepth = 0;
+    suspendSavedSub = null;
+    trackingSuspended = false;
+  }
   currentSubscriber = subscriber;
   try {
     effectFn();
   } finally {
     currentSubscriber = prev;
+    if (savedDepth !== 0) {
+      suspendDepth = savedDepth;
+      suspendSavedSub = savedSuspendSub;
+      trackingSuspended = true;
+    }
     const sub3 = subscriber;
     for (let n = sub3.depsHead ?? null; n !== null; n = n.subNext) {
       const sig = n.sig;
@@ -2145,8 +2181,9 @@ function propagateDirty(sub2) {
         if (s2._c) {
           const nSig = s2._sig;
           if (nSig) {
-            if (!nSig._d) {
+            if (!nSig._d || nSig._f === true) {
               nSig._d = true;
+              nSig._f = false;
               stack.push(nSig);
             }
           } else {
@@ -2246,7 +2283,7 @@ function forEachSubscriber(signal2, visit) {
 }
 
 // src/reactivity/track.ts
-var _runtimeVersion = true ? "4.4.0" : "dev";
+var _runtimeVersion = true ? "4.5.0" : "dev";
 var REGISTRY_KEY = /* @__PURE__ */ Symbol.for("sibujs.reactive.v1");
 function resolveReactiveApi() {
   const g2 = globalThis;
@@ -4648,7 +4685,7 @@ function show(condition, element) {
   const update = () => {
     resolved.style.display = condition() ? "" : "none";
   };
-  registerDisposer(resolved, track2(update));
+  registerDisposer(resolved, reactiveBinding2(update, resolved));
   return resolved;
 }
 function attachBranch(parent, anchor, branch, attachedOnce, where) {
@@ -4693,7 +4730,7 @@ function when(condition, thenBranch, elseBranch) {
     restoreFocusWithin(focused, currentNode ? [currentNode] : [], "when");
     initialized = true;
   };
-  registerDisposer(anchor, track2(update));
+  registerDisposer(anchor, reactiveBinding2(update, anchor));
   if (!initialized) {
     queueMicrotask(() => {
       if (!initialized && anchor.parentNode) update();
@@ -4727,7 +4764,7 @@ function match(value, cases, fallback) {
     restoreFocusWithin(focused, currentNode ? [currentNode] : [], "match");
     initialized = true;
   };
-  registerDisposer(anchor, track2(update));
+  registerDisposer(anchor, reactiveBinding2(update, anchor));
   if (!initialized) {
     queueMicrotask(() => {
       if (!initialized && anchor.parentNode) update();
@@ -4882,7 +4919,12 @@ function each(getArray, render, options) {
         const [indexGetter, setIndex] = signal(i2);
         let node;
         try {
-          node = resolveNodeChild(render(itemGetter, indexGetter));
+          suspendTracking2();
+          try {
+            node = resolveNodeChild(render(itemGetter, indexGetter));
+          } finally {
+            resumeTracking2();
+          }
         } catch (err) {
           const key2 = newKeys[i2];
           node = document.createComment(`each:error:${i2}`);
@@ -5925,10 +5967,14 @@ function derived(getter, options) {
   const cs = {};
   cs._d = false;
   cs._init = false;
+  cs._f = false;
   cs._g = getter;
   cs.__v = 0;
+  let evaluating = false;
+  let disposed = false;
+  let pendingError;
   const markDirty = () => {
-    if (cs._d) return;
+    if (cs._d || disposed) return;
     cs._d = true;
   };
   markDirty._c = 1;
@@ -5951,33 +5997,53 @@ function derived(getter, options) {
     }
   }, markDirty);
   const hook = globalThis.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
-  let evaluating = false;
   const validate = () => {
-    if (!cs._d) return;
+    if (!cs._d || disposed || pendingError !== void 0) return;
     const oldValue = cs._v;
     evaluating = true;
     try {
       retrack2(recompute, markDirty);
       if (!Object.is(oldValue, cs._v)) cs.__v++;
+    } catch (err) {
+      pendingError = { error: err };
+      cs.__v++;
+      if (disposed) cs._d = true;
+      else cs._f = true;
     } finally {
       evaluating = false;
+      if (disposed) cleanup2(markDirty);
     }
-    if (hook && !Object.is(oldValue, cs._v)) {
+    if (hook && !disposed && !Object.is(oldValue, cs._v)) {
       hook.emit("computed:update", { signal: cs, oldValue, newValue: cs._v });
     }
   };
   cs._validate = validate;
+  const throwPending = () => {
+    const { error } = pendingError;
+    pendingError = void 0;
+    if (disposed) cs._d = false;
+    throw error;
+  };
   function computedGetter() {
     if (evaluating) {
       throw new Error(
         `[SibuJS] Circular dependency detected in derived${debugName ? ` "${debugName}"` : ""}. A derived signal cannot read itself (directly or through a chain).`
       );
     }
-    if (isTrackingSuspended2()) {
-      if (cs._d) validate();
+    if (isTrackingSuspended2() || disposed) {
+      if (cs._d) {
+        validate();
+        if (pendingError !== void 0) throwPending();
+      }
       return cs._v;
     }
-    if (cs._d) validate();
+    if (cs._d) {
+      validate();
+      if (pendingError !== void 0) {
+        recordDependency2(cs);
+        throwPending();
+      }
+    }
     recordDependency2(cs);
     return cs._v;
   }
@@ -5986,6 +6052,19 @@ function derived(getter, options) {
     cs.__name = debugName;
   }
   computedGetter.__signal = cs;
+  computedGetter.dispose = () => {
+    if (disposed) return;
+    disposed = true;
+    cs._d = pendingError !== void 0;
+    cleanup2(markDirty);
+    const h = globalThis.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
+    if (h) {
+      try {
+        h.emit("computed:destroy", { signal: cs, getter: computedGetter });
+      } catch {
+      }
+    }
+  };
   if (hook) hook.emit("computed:create", { signal: cs, name: debugName, getter: computedGetter });
   return computedGetter;
 }

package/dist/build.js

@@ -1,21 +1,21 @@
 import {
   index_exports
-} from "./chunk-ADM46X22.js";
-import "./chunk-36S2YPP4.js";
+} from "./chunk-S373NSMK.js";
+import "./chunk-PCT43HW3.js";
 import "./chunk-NIOYEGBQ.js";
-import "./chunk-RR7M3FHM.js";
+import "./chunk-7LN645I6.js";
 import "./chunk-CCSJMTRN.js";
-import "./chunk-7NBDXVHS.js";
-import "./chunk-PNIRUQ4C.js";
-import "./chunk-VCTAEPSB.js";
-import "./chunk-W2EQ7X2L.js";
+import "./chunk-VUF4ALSW.js";
+import "./chunk-KEISJXBU.js";
+import "./chunk-ONOHFDLG.js";
+import "./chunk-RBTPLM32.js";
 import "./chunk-IXKSNWV5.js";
 import "./chunk-7ZHH77QA.js";
-import "./chunk-7GIHSAWB.js";
+import "./chunk-RIXRAYIU.js";
 import "./chunk-5DXA2J44.js";
 import "./chunk-QKRPLZ2V.js";
-import "./chunk-NVNJH22U.js";
-import "./chunk-3BTTCZ5J.js";
+import "./chunk-XZZOBQAY.js";
+import "./chunk-UGRX3S57.js";
 import "./chunk-2WLZ6757.js";
 
 // src/build/compileTemplates.ts