sibujs 1.4.0 → 2.0.0

package/dist/browser.cjs

@@ -66,12 +66,12 @@ function isDev() {
 var _isDev = isDev();
 function devAssert(condition, message) {
   if (_isDev && !condition) {
-    throw new Error(`[Sibu] ${message}`);
+    throw new Error(`[SibuJS] ${message}`);
   }
 }
 function devWarn(message) {
   if (_isDev) {
-    console.warn(`[Sibu] ${message}`);
+    console.warn(`[SibuJS] ${message}`);
   }
 }
 
@@ -81,11 +81,11 @@ var subscriberStack = new Array(32);
 var stackCapacity = 32;
 var stackTop = -1;
 var currentSubscriber = null;
-var signalSubscribers = /* @__PURE__ */ new WeakMap();
 var SUBS = "__s";
 var notifyDepth = 0;
 var pendingQueue = [];
 var pendingSet = /* @__PURE__ */ new Set();
+var propagateStack = [];
 function safeInvoke(sub) {
   try {
     sub();
@@ -131,7 +131,6 @@ function recordDependency(signal2) {
   let subs = signal2[SUBS];
   if (!subs) {
     subs = /* @__PURE__ */ new Set();
-    signalSubscribers.set(signal2, subs);
     signal2[SUBS] = subs;
   }
   subs.add(currentSubscriber);
@@ -153,57 +152,71 @@ function queueSignalNotification(signal2) {
     }
   }
 }
+var maxDrainIterations = 1e5;
 function drainNotificationQueue() {
   if (notifyDepth > 0) return;
   notifyDepth++;
   try {
     let i = 0;
     while (i < pendingQueue.length) {
+      if (i >= maxDrainIterations) {
+        if (typeof console !== "undefined") {
+          console.error(
+            `[SibuJS] Notification queue exceeded ${maxDrainIterations} iterations \u2014 likely an effect that writes to a signal it reads. Breaking to prevent infinite loop.`
+          );
+        }
+        break;
+      }
       safeInvoke(pendingQueue[i]);
       i++;
     }
   } finally {
-    pendingQueue.length = 0;
-    pendingSet.clear();
     notifyDepth--;
+    if (notifyDepth === 0) {
+      pendingQueue.length = 0;
+      pendingSet.clear();
+    }
   }
 }
 function propagateDirty(sub) {
   sub();
-  let sig = sub._sig;
-  while (sig) {
+  const rootSig = sub._sig;
+  if (!rootSig) return;
+  const stack = propagateStack;
+  const baseLen = stack.length;
+  stack.push(rootSig);
+  while (stack.length > baseLen) {
+    const sig = stack.pop();
     const first = sig.__f;
     if (first) {
       if (first._c) {
         const nSig = first._sig;
-        nSig._d = true;
-        sig = nSig;
-        continue;
-      }
-      if (!pendingSet.has(first)) {
+        if (!nSig._d) {
+          nSig._d = true;
+          stack.push(nSig);
+        }
+      } else if (!pendingSet.has(first)) {
         pendingSet.add(first);
         pendingQueue.push(first);
       }
-      break;
+      continue;
     }
     const subs = sig[SUBS];
-    if (!subs) break;
-    let nextSig;
+    if (!subs) continue;
     for (const s of subs) {
       if (s._c) {
-        s();
         const nSig = s._sig;
-        if (nSig && !nextSig) {
-          nextSig = nSig;
-        } else if (nSig) {
-          propagateDirty(s);
+        if (nSig && !nSig._d) {
+          nSig._d = true;
+          stack.push(nSig);
+        } else if (!nSig) {
+          s();
         }
       } else if (!pendingSet.has(s)) {
         pendingSet.add(s);
         pendingQueue.push(s);
       }
     }
-    sig = nextSig;
   }
 }
 function notifySubscribers(signal2) {
@@ -227,13 +240,23 @@ function notifySubscribers(signal2) {
       }
       let i = 0;
       while (i < pendingQueue.length) {
+        if (i >= maxDrainIterations) {
+          if (typeof console !== "undefined") {
+            console.error(
+              `[SibuJS] Notification queue exceeded ${maxDrainIterations} iterations \u2014 likely an effect that writes to a signal it reads. Breaking to prevent infinite loop.`
+            );
+          }
+          break;
+        }
         safeInvoke(pendingQueue[i]);
         i++;
       }
     } finally {
-      pendingQueue.length = 0;
-      pendingSet.clear();
       notifyDepth--;
+      if (notifyDepth === 0) {
+        pendingQueue.length = 0;
+        pendingSet.clear();
+      }
     }
     return;
   }
@@ -253,30 +276,48 @@ function notifySubscribers(signal2) {
   notifyDepth++;
   try {
     let directCount = 0;
+    let hasComputedSub = false;
     for (const sub of subs) {
+      if (sub._c) hasComputedSub = true;
       pendingQueue[directCount++] = sub;
     }
-    for (let i2 = 0; i2 < directCount; i2++) {
-      if (pendingQueue[i2]._c) {
-        propagateDirty(pendingQueue[i2]);
+    if (!hasComputedSub) {
+      for (let i2 = 0; i2 < directCount; i2++) {
+        safeInvoke(pendingQueue[i2]);
       }
-    }
-    for (let i2 = 0; i2 < directCount; i2++) {
-      if (!pendingQueue[i2]._c) {
-        if (!pendingSet.has(pendingQueue[i2])) {
-          safeInvoke(pendingQueue[i2]);
+    } else {
+      for (let i2 = 0; i2 < directCount; i2++) {
+        if (pendingQueue[i2]._c) {
+          propagateDirty(pendingQueue[i2]);
+        }
+      }
+      for (let i2 = 0; i2 < directCount; i2++) {
+        const sub = pendingQueue[i2];
+        if (!sub._c && !pendingSet.has(sub)) {
+          pendingSet.add(sub);
+          safeInvoke(sub);
         }
       }
     }
     let i = directCount;
     while (i < pendingQueue.length) {
+      if (i - directCount >= maxDrainIterations) {
+        if (typeof console !== "undefined") {
+          console.error(
+            `[SibuJS] Notification queue exceeded ${maxDrainIterations} iterations \u2014 likely an effect that writes to a signal it reads. Breaking to prevent infinite loop.`
+          );
+        }
+        break;
+      }
       safeInvoke(pendingQueue[i]);
       i++;
     }
   } finally {
-    pendingQueue.length = 0;
-    pendingSet.clear();
     notifyDepth--;
+    if (notifyDepth === 0) {
+      pendingQueue.length = 0;
+      pendingSet.clear();
+    }
   }
 }
 function cleanup(subscriber) {
@@ -287,7 +328,9 @@ function cleanup(subscriber) {
     if (subs) {
       subs.delete(subscriber);
       if (singleDep.__f === subscriber) {
-        singleDep.__f = void 0;
+        singleDep.__f = subs.size === 1 ? subs.values().next().value : void 0;
+      } else if (subs.size === 1 && singleDep.__f === void 0) {
+        singleDep.__f = subs.values().next().value;
       }
     }
     sub._dep = void 0;
@@ -300,7 +343,9 @@ function cleanup(subscriber) {
     if (subs) {
       subs.delete(subscriber);
       if (signal2.__f === subscriber) {
-        signal2.__f = void 0;
+        signal2.__f = subs.size === 1 ? subs.values().next().value : void 0;
+      } else if (subs.size === 1 && signal2.__f === void 0) {
+        signal2.__f = subs.values().next().value;
       }
     }
   }
@@ -327,10 +372,13 @@ function enqueueBatchedSignal(signal2) {
   return true;
 }
 function flushBatch() {
-  for (const signal2 of pendingSignals) {
-    queueSignalNotification(signal2);
+  try {
+    for (const signal2 of pendingSignals) {
+      queueSignalNotification(signal2);
+    }
+  } finally {
+    pendingSignals.clear();
   }
-  pendingSignals.clear();
   drainNotificationQueue();
 }
 
@@ -392,9 +440,28 @@ function media(query) {
 }
 
 // src/core/ssr-context.ts
-var ssrMode = false;
+var als = null;
+try {
+  if (typeof process !== "undefined" && process.versions && process.versions.node) {
+    const req = Function("return typeof require==='function'?require:null")();
+    if (req) {
+      const mod = req("node:async_hooks");
+      als = new mod.AsyncLocalStorage();
+    }
+  }
+} catch {
+  als = null;
+}
+var fallbackStore = { ssr: false, suspenseIdCounter: 0 };
+function getSSRStore() {
+  if (als) {
+    const s = als.getStore();
+    if (s) return s;
+  }
+  return fallbackStore;
+}
 function isSSR() {
-  return ssrMode;
+  return getSSRStore().ssr;
 }
 
 // src/core/signals/effect.ts
@@ -404,26 +471,86 @@ function effect(effectFn, options) {
   if (isSSR()) return () => {
   };
   const onError = options?.onError;
+  let userCleanups = [];
+  const onCleanup = (fn) => {
+    userCleanups.push(fn);
+  };
+  const runUserCleanups = () => {
+    if (userCleanups.length === 0) return;
+    const list = userCleanups;
+    userCleanups = [];
+    for (let i = list.length - 1; i >= 0; i--) {
+      try {
+        list[i]();
+      } catch (err) {
+        if (typeof console !== "undefined") {
+          console.warn("[SibuJS effect] onCleanup threw:", err);
+        }
+      }
+    }
+  };
+  const invokeBody = () => effectFn(onCleanup);
   const wrappedFn = onError ? () => {
     try {
-      effectFn();
+      invokeBody();
     } catch (err) {
       onError(err);
     }
-  } : effectFn;
+  } : invokeBody;
   let cleanupHandle = () => {
   };
+  let running = false;
   const subscriber = () => {
-    cleanupHandle();
-    cleanupHandle = track(wrappedFn, subscriber);
+    if (running) {
+      if (_g2.__SIBU_DEV_WARN__ !== false && typeof console !== "undefined") {
+        console.warn(
+          "[SibuJS] effect re-entered itself while running \u2014 the triggering update will be ignored. Wrap mutual writes in `batch()` or split the effect to avoid this."
+        );
+      }
+      return;
+    }
+    running = true;
+    try {
+      runUserCleanups();
+      cleanupHandle();
+      cleanupHandle = track(wrappedFn, subscriber);
+    } finally {
+      running = false;
+    }
   };
-  cleanupHandle = track(wrappedFn, subscriber);
+  running = true;
+  try {
+    cleanupHandle = track(wrappedFn, subscriber);
+  } finally {
+    running = false;
+  }
   const hook = _g2.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
   if (hook) hook.emit("effect:create", { effectFn });
+  let disposed = false;
   return () => {
+    if (disposed) return;
+    disposed = true;
     const h = _g2.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
-    if (h) h.emit("effect:destroy", { effectFn });
-    cleanupHandle();
+    if (h) {
+      try {
+        h.emit("effect:destroy", { effectFn });
+      } catch {
+      }
+    }
+    try {
+      runUserCleanups();
+    } catch (err) {
+      if (typeof console !== "undefined") {
+        console.warn("[SibuJS effect] onCleanup threw during dispose:", err);
+      }
+    }
+    try {
+      cleanupHandle();
+    } catch (err) {
+      if (typeof console !== "undefined") {
+        console.warn("[SibuJS effect] dispose threw:", err);
+      }
+    }
   };
 }
 
@@ -474,6 +601,8 @@ function scroll(target) {
   const [y, setY] = signal(0);
   const [isScrolling, setIsScrolling] = signal(false);
   let scrollTimer = null;
+  let currentTarget = null;
+  let effectCleanup = null;
   if (typeof window === "undefined") {
     return { x, y, isScrolling, dispose: () => {
     } };
@@ -496,11 +625,26 @@ function scroll(target) {
       scrollTimer = null;
     }, 150);
   };
-  const scrollTarget = target ? target() : null;
-  const eventTarget = scrollTarget || window;
-  eventTarget.addEventListener("scroll", handler, { passive: true });
+  function attachListener(eventTarget) {
+    if (currentTarget === eventTarget) return;
+    if (currentTarget) currentTarget.removeEventListener("scroll", handler);
+    currentTarget = eventTarget;
+    currentTarget.addEventListener("scroll", handler, { passive: true });
+  }
+  if (target) {
+    effectCleanup = effect(() => {
+      const el = target();
+      attachListener(el || window);
+    });
+  } else {
+    attachListener(window);
+  }
   function dispose() {
-    eventTarget.removeEventListener("scroll", handler);
+    effectCleanup?.();
+    if (currentTarget) {
+      currentTarget.removeEventListener("scroll", handler);
+      currentTarget = null;
+    }
     if (scrollTimer !== null) {
       clearTimeout(scrollTimer);
       scrollTimer = null;
@@ -784,7 +928,10 @@ function dropZone(element, options) {
         const raw = e.dataTransfer.getData("application/json");
         if (raw) {
           try {
-            transferData = JSON.parse(raw);
+            transferData = JSON.parse(
+              raw,
+              (k, v) => k === "__proto__" || k === "constructor" || k === "prototype" ? void 0 : v
+            );
           } catch {
             transferData = raw;
           }
@@ -1019,31 +1166,44 @@ function urlState() {
       }
     };
   }
-  const [params, setParamsSignal] = signal(new URLSearchParams(window.location.search));
-  const [hash, setHashSignal] = signal(window.location.hash);
-  const syncFromLocation = () => {
-    setParamsSignal(new URLSearchParams(window.location.search));
-    setHashSignal(window.location.hash);
-  };
-  const onPopState = () => syncFromLocation();
-  window.addEventListener("popstate", onPopState);
+  let lastSearch = window.location.search;
+  let lastHash = window.location.hash;
+  const [params, setParamsSignal] = signal(new URLSearchParams(lastSearch));
+  const [hash, setHashSignal] = signal(lastHash);
+  function syncFromLocation() {
+    const currentSearch = window.location.search;
+    const currentHash = window.location.hash;
+    if (currentSearch !== lastSearch) {
+      lastSearch = currentSearch;
+      setParamsSignal(new URLSearchParams(currentSearch));
+    }
+    if (currentHash !== lastHash) {
+      lastHash = currentHash;
+      setHashSignal(currentHash);
+    }
+  }
+  window.addEventListener("popstate", syncFromLocation);
+  window.addEventListener("hashchange", syncFromLocation);
   function setParams(next, opts = {}) {
     const p = next instanceof URLSearchParams ? next : new URLSearchParams(next);
     const query = p.toString();
     const newUrl = `${window.location.pathname}${query ? `?${query}` : ""}${window.location.hash}`;
     if (opts.replace) window.history.replaceState(null, "", newUrl);
     else window.history.pushState(null, "", newUrl);
+    lastSearch = window.location.search;
     setParamsSignal(new URLSearchParams(p));
   }
   function setHash(next, opts = {}) {
-    const normalized = next.startsWith("#") ? next : next ? `#${next}` : "";
+    const normalized = next && next !== "#" ? next.startsWith("#") ? next : `#${next}` : "";
     const newUrl = `${window.location.pathname}${window.location.search}${normalized}`;
     if (opts.replace) window.history.replaceState(null, "", newUrl);
     else window.history.pushState(null, "", newUrl);
+    lastHash = normalized;
     setHashSignal(normalized);
   }
   function dispose() {
-    window.removeEventListener("popstate", onPopState);
+    window.removeEventListener("popstate", syncFromLocation);
+    window.removeEventListener("hashchange", syncFromLocation);
   }
   return { params, hash, setParams, setHash, dispose };
 }
@@ -1151,13 +1311,21 @@ function wakeLock() {
   }
   const onVisibility = () => {
     if (sentinel?.released && !document.hidden) {
-      void request();
+      request().catch((err) => {
+        if (typeof console !== "undefined") {
+          console.warn("[SibuJS wakeLock] re-acquire failed:", err);
+        }
+      });
     }
   };
   document.addEventListener("visibilitychange", onVisibility);
   function dispose() {
     document.removeEventListener("visibilitychange", onVisibility);
-    void release();
+    release().catch((err) => {
+      if (typeof console !== "undefined") {
+        console.warn("[SibuJS wakeLock] release failed:", err);
+      }
+    });
   }
   return { active, request, release, dispose };
 }
@@ -1353,11 +1521,21 @@ function speech() {
     };
   }
   const synth = window.speechSynthesis;
-  const interval = setInterval(() => {
-    setSpeaking(synth.speaking);
-    setPaused(synth.paused);
-  }, 200);
+  let interval = null;
+  function startPolling() {
+    if (interval !== null) return;
+    interval = setInterval(() => {
+      setSpeaking(synth.speaking);
+      setPaused(synth.paused);
+      if (!synth.speaking && !synth.paused) {
+        clearInterval(interval);
+        interval = null;
+      }
+    }, 200);
+  }
+  let disposed = false;
   function speak(text, options = {}) {
+    if (disposed) return;
     const u = new SpeechSynthesisUtterance(text);
     if (options.lang) u.lang = options.lang;
     if (options.rate != null) u.rate = options.rate;
@@ -1368,19 +1546,41 @@ function speech() {
       const match = voices.find((v) => v.name === options.voice);
       if (match) u.voice = match;
     }
-    u.addEventListener("start", () => setSpeaking(true));
-    u.addEventListener("end", () => {
-      setSpeaking(false);
-      setPaused(false);
-    });
-    u.addEventListener("error", () => {
-      setSpeaking(false);
-      setPaused(false);
-    });
+    u.addEventListener(
+      "start",
+      () => {
+        if (!disposed) setSpeaking(true);
+      },
+      { once: true }
+    );
+    u.addEventListener(
+      "end",
+      () => {
+        if (disposed) return;
+        setSpeaking(false);
+        setPaused(false);
+      },
+      { once: true }
+    );
+    u.addEventListener(
+      "error",
+      () => {
+        if (disposed) return;
+        setSpeaking(false);
+        setPaused(false);
+      },
+      { once: true }
+    );
     synth.speak(u);
+    setSpeaking(true);
+    startPolling();
   }
   function dispose() {
-    clearInterval(interval);
+    disposed = true;
+    if (interval !== null) {
+      clearInterval(interval);
+      interval = null;
+    }
     synth.cancel();
   }
   return {
@@ -1609,13 +1809,21 @@ function imageLoader(src) {
     };
     img.src = url;
   }
+  let srcEffectTeardown = null;
   if (typeof src === "function") {
-    start(src());
+    srcEffectTeardown = effect(() => {
+      const url = src();
+      start(url);
+    });
   } else {
     start(src);
   }
   function dispose() {
     disposed = true;
+    if (srcEffectTeardown) {
+      srcEffectTeardown();
+      srcEffectTeardown = null;
+    }
     if (current) {
       current.onload = null;
       current.onerror = null;

package/dist/browser.d.cts

@@ -31,6 +31,9 @@ declare function resize(target: ElementTarget$1): {
  * Returns reactive x/y scroll positions and an isScrolling indicator
  * that resets after 150ms of inactivity.
  *
+ * If a reactive target getter is provided, the listener re-attaches
+ * whenever the target element changes (same pattern as resize/dragDrop).
+ *
  * @param target Optional reactive getter for the scroll target element.
  *               If omitted or returns null, tracks window scroll.
  * @returns Object with reactive x, y, isScrolling getters and a dispose function
@@ -336,7 +339,9 @@ declare function windowSize(): {
  * to sync a handful of UI state bits with the URL (filters, tabs, modals)
  * without a full router setup.
  *
- * Listens to `popstate` so browser back/forward updates the signals.
+ * Listens to both `popstate` (back/forward) and `hashchange` (anchor clicks,
+ * direct `location.hash` assignments) so the signals stay in sync regardless
+ * of how the URL was changed.
  *
  * @example
  * ```ts
@@ -365,6 +370,11 @@ declare function urlState(): {
 };
 
 /**
+ * Note on trust model: `BroadcastChannel` only delivers messages between
+ * same-origin browsing contexts (tabs, iframes, workers). We therefore treat
+ * incoming payloads as same-origin-trusted and pass them through unmodified.
+ * Do not use this transport for cross-origin messaging.
+ *
  * broadcast wraps the BroadcastChannel API as a reactive signal.
  * Unlike the `storage` event (which only fires for localStorage writes and
  * sends only the serialized value), a `BroadcastChannel` can send arbitrary
@@ -406,10 +416,10 @@ declare function broadcast<T = unknown>(channelName: string): {
  * @example
  * ```ts
  * const fs = fullscreen();
- * button({
- *   nodes: () => (fs.isFullscreen() ? "Exit fullscreen" : "Enter fullscreen"),
- *   on: { click: () => fs.toggle(videoEl) },
- * });
+ * button(
+ *   { on: { click: () => fs.toggle(videoEl) } },
+ *   () => (fs.isFullscreen() ? "Exit fullscreen" : "Enter fullscreen"),
+ * );
  * ```
  */
 declare function fullscreen(): {
@@ -594,10 +604,10 @@ interface SpeakOptions {
  * @example
  * ```ts
  * const tts = speech();
- * button({
- *   nodes: "Read it to me",
- *   on: { click: () => tts.speak("Hello, world!", { rate: 1.1 }) },
- * });
+ * button(
+ *   { on: { click: () => tts.speak("Hello, world!", { rate: 1.1 }) } },
+ *   "Read it to me",
+ * );
  * ```
  */
 declare function speech(): {