sibujs 1.4.0 → 1.5.0

package/README.md

@@ -1,119 +1,105 @@
-# SibuJS
-
-A lightweight, function-based frontend framework with fine-grained reactivity, direct DOM rendering, and zero compilation. **No Virtual DOM. No magic.**
-
-[[NPM Version]](https://www.npmjs.com/package/sibujs)
-[[License]](https://github.com/hexplus/sibujs/blob/main/LICENSE)
-
-## Why SibuJS?
-
-- **Zero VDOM:** Updates only what changes, directly in the DOM.
-- **Function-Based:** Components are just plain functions. No classes, no complex life cycles.
-- **Fine-Grained Reactivity:** Powered by lightweight signals.
-- **No Build Step Required:** Works natively in the browser, but includes a Vite plugin for advanced optimizations.
-- **Modular & Lean:** Core is minimal; features like Router and i18n are optional plugins.
-
-## Quick Start
-
-```bash
-npm install sibujs
-```
-
-```javascript
-import { div, h1, button, signal, mount } from "sibujs";
-
-function Counter() {
-  const [count, setCount] = signal(0);
-
-  return div({ class: "counter" }, [
-    h1(() => `Count: ${count()}`),
-    button({ on: { click: () => setCount(c => c + 1) } }, "Increment"),
-  ]);
-}
-
-mount(Counter, document.getElementById("app"));
-```
-
-### Three Ways to Author Components
-
-SibuJS gives you maximum flexibility with three interoperable styles:
-
-#### 1. Tag Factory
-The canonical form: a props object followed by children as a second
-positional argument. No `nodes:` key required at any level of the tree —
-children can be a string, a number, a single node, an array, or a
-reactive getter.
-
-```javascript
-import { div, h1, label, input, button } from "sibujs";
-
-return div({ class: "counter" }, [
-  h1({ class: "title" }, () => `Count: ${count()}`),
-  label({ for: "amount" }, "Step"),
-  input({ id: "amount", type: "number", value: 1 }),
-  button(
-    { class: "primary", on: { click: () => setCount(c => c + 1) } },
-    "Increment",
-  ),
-]);
-```
-
-All legacy forms — `tag({ class, nodes })`, `tag("className", children)`,
-`tag("text")`, `tag([children])`, `tag(node)`, `tag(() => reactive)` —
-continue to work unchanged. When both `props.nodes` and the positional
-second argument are present, the positional wins.
-
-#### 2. Positional Shorthand
-The tersest form. Class and children as positional arguments, for
-layouts with no event handlers or custom props.
-
-```javascript
-import { div, h1, button } from "sibujs";
-
-return div("counter", [
-  h1(() => `Count: ${count()}`),
-  button({ on: { click: () => setCount(c => c + 1) } }, "Increment"),
-]);
-```
-
-#### 3. HTML Tagged Template
-Familiar HTML-like syntax using tagged template literals. No compiler needed!
-
-```javascript
-import { html } from "sibujs";
-
-return html`
-  <div class="counter">
-    <h1>Count: ${() => count()}</h1>
-    <button on:click=${() => setCount(c => c + 1)}>Increment</button>
-  </div>
-`;
-```
-
-## Learn More
-
-For full documentation, guides, and advanced examples, visit our official website:
-
-### 🌐 [sibujs.dev](https://sibujs.dev/)
-
----
-
-## Features at a Glance
-
-- **Reactivity:** `signal`, `effect`, `derived`, `watch`, `batch`.
-- **Components:** Functional, reusable, and lifecycle-aware (`onMount`, `onUnmount`).
-- **Control Flow:** `when` (conditional swaps), `each` (efficient keyed lists), `match` $(pattern matching)$, `show` (toggle visibility).
-- **DOM Utilities:** `Portal` (render out-of-tree), `Fragment` (group children), `Suspense` & `lazy` (async components), `ErrorBoundary`.
-- **State Management:** `store` (simple state containers), `deepSignal` (object proxies), `ref`.
-- **Performance:** Zero VDOM overhead, LIS-based list diffing, and optional template compilation.
-- **Plugins:** Official Router (nested routes, guards), i18n (reactive translations), logic patterns (Finite State Machines).
-
----
-
-## Ecosystem
-
-- [SibuJS UI](https://github.com/hexplus/sibujs-ui) - Component library.
-
-## License
-
-MIT © [hexplus](https://github.com/hexplus)
+# SibuJS
+
+A lightweight, function-based frontend framework with fine-grained reactivity, direct DOM rendering, and zero compilation. **No Virtual DOM. No magic.**
+
+[[NPM Version]](https://www.npmjs.com/package/sibujs)
+[[License]](https://github.com/hexplus/sibujs/blob/main/LICENSE)
+
+## Why SibuJS?
+
+- **Zero VDOM:** Updates only what changes, directly in the DOM.
+- **Function-Based:** Components are just plain functions. No classes, no complex life cycles.
+- **Fine-Grained Reactivity:** Powered by lightweight signals.
+- **No Build Step Required:** Works natively in the browser, but includes a Vite plugin for advanced optimizations.
+- **Modular & Lean:** Core is minimal; features like Router and i18n are optional plugins.
+
+## Quick Start
+
+```bash
+npm install sibujs
+```
+
+```javascript
+import { div, h1, button, signal, mount } from "sibujs";
+
+function Counter() {
+  const [count, setCount] = signal(0);
+
+  return div("counter", [
+    h1(() => `Count: ${count()}`),
+    button(
+      { on: { click: () => setCount(count() + 1) } },
+      "Increment",
+    ),
+  ]);
+}
+
+mount(Counter, document.getElementById("app"));
+```
+
+### Authoring Style
+
+Every tag factory accepts children as an optional second positional
+argument. This is **the canonical authoring style** — no `nodes:` key
+at any level of the tree. The first argument can be a className string,
+a props object, or the children themselves.
+
+```javascript
+import { div, h1, label, input, button } from "sibujs";
+
+// Positional className + children — the default form for styled wrappers
+div("page", [
+  h1("title", "Welcome"),
+  div("row", [
+    label({ for: "email" }, "Email"),
+    input({ id: "email", type: "email" }),
+    button(
+      { class: "primary", type: "submit", on: { click: handleSubmit } },
+      "Submit",
+    ),
+  ]),
+]);
+
+// Children-only — bare containers
+div([h1("Hello"), p("World")]);
+
+// Text-only
+h1("Hello, world!");
+
+// Reactive children
+div(() => `Count: ${count()}`);
+```
+
+Legacy forms — the `{ class, nodes }` prop object and the `html` tagged
+template — remain supported by the runtime so existing code keeps
+working, but they are no longer the recommended authoring style. When
+both `props.nodes` and the positional second argument are present, the
+positional wins.
+
+## Learn More
+
+For full documentation, guides, and advanced examples, visit our official website:
+
+### 🌐 [sibujs.dev](https://sibujs.dev/)
+
+---
+
+## Features at a Glance
+
+- **Reactivity:** `signal`, `effect`, `derived`, `watch`, `batch`.
+- **Components:** Functional, reusable, and lifecycle-aware (`onMount`, `onUnmount`).
+- **Control Flow:** `when` (conditional swaps), `each` (efficient keyed lists), `match` (pattern matching), `show` (toggle visibility).
+- **DOM Utilities:** `Portal` (render out-of-tree), `Fragment` (group children), `Suspense` & `lazy` (async components), `ErrorBoundary`.
+- **State Management:** `store` (simple state containers), `deepSignal` (object proxies), `ref`.
+- **Performance:** Zero VDOM overhead, LIS-based list diffing, and optional template compilation.
+- **Plugins:** Official Router (nested routes, guards), i18n (reactive translations), logic patterns (Finite State Machines).
+
+---
+
+## Ecosystem
+
+- [SibuJS UI](https://github.com/hexplus/sibujs-ui) - Component library.
+
+## License
+
+MIT © [hexplus](https://github.com/hexplus)

package/dist/browser.cjs

@@ -153,12 +153,21 @@ function queueSignalNotification(signal2) {
     }
   }
 }
+var MAX_DRAIN_ITERATIONS = 1e3;
 function drainNotificationQueue() {
   if (notifyDepth > 0) return;
   notifyDepth++;
   try {
     let i = 0;
     while (i < pendingQueue.length) {
+      if (i >= MAX_DRAIN_ITERATIONS) {
+        if (typeof console !== "undefined") {
+          console.error(
+            `[SibuJS] Notification queue exceeded ${MAX_DRAIN_ITERATIONS} iterations \u2014 likely an effect that writes to a signal it reads. Breaking to prevent infinite loop.`
+          );
+        }
+        break;
+      }
       safeInvoke(pendingQueue[i]);
       i++;
     }
@@ -474,6 +483,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 +507,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;
@@ -1019,31 +1045,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 };
 }

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
@@ -406,10 +411,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 +599,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(): {

package/dist/browser.d.ts

@@ -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
@@ -406,10 +411,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 +599,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(): {

package/dist/browser.js

@@ -35,11 +35,11 @@ import {
   visibility,
   wakeLock,
   windowSize
-} from "./chunk-3AIRKM3B.js";
-import "./chunk-CHF5OHIA.js";
+} from "./chunk-RJ46C3CS.js";
+import "./chunk-VQNQZCWJ.js";
 import "./chunk-EUZND3CB.js";
-import "./chunk-WZSPOOER.js";
-import "./chunk-ZD6OAMTH.js";
+import "./chunk-NZIIMDWI.js";
+import "./chunk-K4G4ZQNR.js";
 import "./chunk-5X6PP2UK.js";
 export {
   animationFrame,