sibujs 4.0.0 → 4.1.0

package/README.md

@@ -1,6 +1,6 @@
 # SibuJS
 
-A lightweight, function-based frontend framework with fine-grained reactivity, direct DOM rendering, and zero compilation. **No Virtual DOM. No magic.**
+A function-based frontend framework with fine-grained reactivity, direct DOM rendering, and zero compilation. **No Virtual DOM. No magic.**
 
 [NPM](https://www.npmjs.com/package/sibujs) · [License](https://github.com/hexplus/sibujs/blob/main/LICENSE)
 
@@ -147,6 +147,10 @@ The lean core: reactivity, rendering, and components. Everything below imports f
 ### Islands & Progressive Enhancement
 - **`enhance` / `enhanceAll`** — attach fine-grained reactivity to existing server-rendered HTML with no build step (the third rendering mode alongside `mount` and `hydrate`).
 - **`island` / `registerIsland` / `hydrateIslands`** — hydrate isolated interactive regions on demand.
+- **`ctx.each`** — bind many elements the server already rendered (a board, a table, a keyboard) from one descriptor, with no new DOM.
+- **`external`** — reactive integration with state SibuJS does not own: a domain engine, a canvas, an editor, a socket cache. `track()` where you read, `invalidate()` where you mutate.
+
+Guides: [islands & progressive enhancement](docs/islands.md) · [external mutable state and update granularity](docs/architecture/external-state.md) · [running islands inside another framework's page](docs/interop.md). Reference application: [`examples/chess/`](examples/chess/).
 
 ---
 

package/dist/browser.cjs

@@ -387,7 +387,14 @@ function reactiveBinding(commit, ownerNode) {
   subscriber._disposed = false;
   subscriber._errorPhase = "binding";
   subscriber._errorNode = ownerNode;
-  run();
+  try {
+    run();
+  } catch (err) {
+    subscriber._disposed = true;
+    subscriber._errorNode = void 0;
+    cleanup(subscriber);
+    throw err;
+  }
   return subscriber._dispose ?? (subscriber._dispose = () => {
     subscriber._disposed = true;
     subscriber._errorNode = void 0;
@@ -619,7 +626,7 @@ function forEachSubscriber(signal2, visit) {
 
 // src/reactivity/track.ts
 var _isDev2 = isDev();
-var _runtimeVersion = true ? "4.0.0" : "dev";
+var _runtimeVersion = true ? "4.1.0" : "dev";
 var REGISTRY_KEY = /* @__PURE__ */ Symbol.for("sibujs.reactive.v1");
 function resolveReactiveApi() {
   const g = globalThis;

package/dist/browser.js

@@ -35,14 +35,14 @@ import {
   visibility,
   wakeLock,
   windowSize
-} from "./chunk-EWEE7NBF.js";
+} from "./chunk-DAKLOMKS.js";
 import "./chunk-H3SRKIYX.js";
 import "./chunk-52XFPGSN.js";
 import "./chunk-7ZHH77QA.js";
-import "./chunk-PBQEW5VW.js";
+import "./chunk-PFTDGEPZ.js";
 import "./chunk-TIRZCERI.js";
-import "./chunk-W55YHPEP.js";
-import "./chunk-ACBT6UZS.js";
+import "./chunk-UFSQEO7P.js";
+import "./chunk-D3SZ4LVS.js";
 import "./chunk-VPP2FONR.js";
 export {
   animationFrame,

package/dist/build.cjs

@@ -1132,6 +1132,7 @@ __export(index_exports, {
   enhance: () => enhance,
   enhanceAll: () => enhanceAll,
   enqueueBatchedSignal: () => enqueueBatchedSignal,
+  external: () => external,
   fieldset: () => fieldset,
   figcaption: () => figcaption,
   figure: () => figure,
@@ -1945,7 +1946,14 @@ function reactiveBinding(commit, ownerNode) {
   subscriber._disposed = false;
   subscriber._errorPhase = "binding";
   subscriber._errorNode = ownerNode;
-  run();
+  try {
+    run();
+  } catch (err) {
+    subscriber._disposed = true;
+    subscriber._errorNode = void 0;
+    cleanup(subscriber);
+    throw err;
+  }
   return subscriber._dispose ?? (subscriber._dispose = () => {
     subscriber._disposed = true;
     subscriber._errorNode = void 0;
@@ -2177,7 +2185,7 @@ function forEachSubscriber(signal2, visit) {
 
 // src/reactivity/track.ts
 var _isDev4 = isDev();
-var _runtimeVersion = true ? "4.0.0" : "dev";
+var _runtimeVersion = true ? "4.1.0" : "dev";
 var REGISTRY_KEY = /* @__PURE__ */ Symbol.for("sibujs.reactive.v1");
 function resolveReactiveApi() {
   const g2 = globalThis;
@@ -2400,9 +2408,9 @@ function toKebab(prop) {
 }
 function applyStyle(el, style2) {
   if (typeof style2 === "function") {
-    const teardown = track2(() => {
+    const teardown = reactiveBinding2(() => {
       el.setAttribute("style", sanitizeStyleAttribute(String(style2())));
-    });
+    }, el);
     registerDisposer(el, teardown);
     return;
   }
@@ -2416,9 +2424,9 @@ function applyStyle(el, style2) {
     const name = toKebab(prop);
     if (typeof val === "function") {
       const getter = val;
-      const teardown = track2(() => {
+      const teardown = reactiveBinding2(() => {
         htmlEl.style.setProperty(name, sanitizeCSSValue(String(getter())));
-      });
+      }, el);
       registerDisposer(el, teardown);
     } else {
       htmlEl.style.setProperty(name, sanitizeCSSValue(String(val)));
@@ -2431,9 +2439,9 @@ function applyClass(el, cls) {
     return;
   }
   if (typeof cls === "function") {
-    const teardown = track2(() => {
+    const teardown = reactiveBinding2(() => {
       el.setAttribute("class", cls());
-    });
+    }, el);
     registerDisposer(el, teardown);
     return;
   }
@@ -2458,7 +2466,7 @@ function applyClass(el, cls) {
       }
       el.setAttribute("class", r);
     };
-    const teardown = track2(update);
+    const teardown = reactiveBinding2(update, el);
     registerDisposer(el, teardown);
   } else {
     el.setAttribute("class", result);
@@ -3432,6 +3440,17 @@ function signal(initial, options) {
   }
   return [get, set];
 }
+function external(options) {
+  const [version, bump] = signal(0, options?.name ? { name: options.name } : void 0);
+  return {
+    track() {
+      version();
+    },
+    invalidate() {
+      bump((n) => n + 1);
+    }
+  };
+}
 
 // src/components/ErrorDisplay.ts
 var STYLES = `
@@ -5996,6 +6015,7 @@ function drainTeardowns(teardowns, label2) {
     }
   }
 }
+var EACH_KEYS = ["text", "attr", "class", "show", "on", "cleanup"];
 function resolveTarget(root, target) {
   if (target == null) return root;
   if (typeof target !== "string") return target;
@@ -6006,6 +6026,11 @@ function resolveTarget(root, target) {
     return null;
   }
 }
+function bindNode(el, commit) {
+  if (isSSR()) return () => {
+  };
+  return reactiveBinding2(commit, el);
+}
 function readControlValue(el) {
   if (el instanceof HTMLInputElement) {
     if (el.type === "checkbox") return el.checked;
@@ -6029,6 +6054,50 @@ function writeControlValue(el, value) {
   const next = value == null ? "" : String(value);
   if (el.value !== next) el.value = next;
 }
+function applyEachBindings(ctx, el, spec, index) {
+  const where = `ctx.each[${index}]`;
+  if (isDev()) {
+    for (const key of Object.keys(spec)) {
+      devAssert(
+        EACH_KEYS.includes(key),
+        `${where}: unknown binding "${key}". Expected one of: ${EACH_KEYS.join(", ")}.`
+      );
+    }
+  }
+  if (spec.text !== void 0) {
+    devAssert(typeof spec.text === "function", `${where}: "text" must be a function returning the value.`);
+    ctx.text(el, spec.text);
+  }
+  if (spec.attr !== void 0) {
+    for (const name of Object.keys(spec.attr)) {
+      const value = spec.attr[name];
+      devAssert(typeof value === "function", `${where}: attr["${name}"] must be a function returning the value.`);
+      ctx.attr(el, name, value);
+    }
+  }
+  if (spec.class !== void 0) {
+    for (const name of Object.keys(spec.class)) {
+      const on2 = spec.class[name];
+      devAssert(typeof on2 === "function", `${where}: class["${name}"] must be a function returning a boolean.`);
+      ctx.classed(el, name, on2);
+    }
+  }
+  if (spec.show !== void 0) {
+    devAssert(typeof spec.show === "function", `${where}: "show" must be a function returning a boolean.`);
+    ctx.show(el, spec.show);
+  }
+  if (spec.on !== void 0) {
+    for (const event of Object.keys(spec.on)) {
+      const handler = spec.on[event];
+      devAssert(typeof handler === "function", `${where}: on["${String(event)}"] must be a function.`);
+      ctx.on(el, event, handler);
+    }
+  }
+  if (spec.cleanup !== void 0) {
+    devAssert(typeof spec.cleanup === "function", `${where}: "cleanup" must be a function.`);
+    ctx.cleanup(spec.cleanup);
+  }
+}
 function enhance(target, setup) {
   const root = typeof target === "string" ? typeof document !== "undefined" ? document.querySelector(target) : null : target;
   if (!root) {
@@ -6079,7 +6148,7 @@ function enhance(target, setup) {
     text: (t, value) => {
       bind(t, (el) => {
         teardowns.push(
-          effect(() => {
+          bindNode(el, () => {
             const v = value();
             const next = v == null ? "" : String(v);
             if (el.textContent !== next) el.textContent = next;
@@ -6090,7 +6159,7 @@ function enhance(target, setup) {
     attr: (t, name, value) => {
       bind(t, (el) => {
         teardowns.push(
-          effect(() => {
+          bindNode(el, () => {
             const v = value();
             const next = v == null ? null : String(v);
             setSafeAttribute(el, name, next, { syncValueProperty: false, label: "enhance attr()" });
@@ -6101,7 +6170,7 @@ function enhance(target, setup) {
     classed: (t, name, on2) => {
       bind(t, (el) => {
         teardowns.push(
-          effect(() => {
+          bindNode(el, () => {
             el.classList.toggle(name, Boolean(on2()));
           })
         );
@@ -6111,7 +6180,7 @@ function enhance(target, setup) {
       bind(t, (el) => {
         const prevHidden = el.hidden;
         teardowns.push(
-          effect(() => {
+          bindNode(el, () => {
             el.hidden = !when2();
           })
         );
@@ -6126,7 +6195,7 @@ function enhance(target, setup) {
         const [get, set] = state2;
         const evt = options?.event ?? (control instanceof HTMLSelectElement || control instanceof HTMLInputElement && (control.type === "checkbox" || control.type === "radio") ? "change" : "input");
         teardowns.push(
-          effect(() => {
+          bindNode(el, () => {
             writeControlValue(control, get());
           })
         );
@@ -6135,6 +6204,16 @@ function enhance(target, setup) {
         teardowns.push(() => control.removeEventListener(evt, onInput));
       });
     },
+    each: (target_, describe2) => {
+      devAssert(typeof describe2 === "function", "ctx.each: second argument must be a function.");
+      const elements = typeof target_ === "string" ? ctx.refs(target_) : Array.from(target_);
+      for (let i2 = 0; i2 < elements.length; i2++) {
+        const el = elements[i2];
+        const spec = describe2(el, i2);
+        if (spec == null) continue;
+        applyEachBindings(ctx, el, spec, i2);
+      }
+    },
     cleanup: (fn) => {
       teardowns.push(fn);
     }

package/dist/build.js

@@ -1,21 +1,21 @@
 import {
   index_exports
-} from "./chunk-GCSGGA3Q.js";
-import "./chunk-ES2GERY2.js";
+} from "./chunk-ANGSYNPX.js";
+import "./chunk-MRAMKDHQ.js";
 import "./chunk-HYCCIYNS.js";
-import "./chunk-RRIDJQ5C.js";
+import "./chunk-KSOEJGFO.js";
 import "./chunk-CCSJMTRN.js";
-import "./chunk-O3QQ3XOL.js";
-import "./chunk-DQVUBVNX.js";
-import "./chunk-4MFZMLUU.js";
-import "./chunk-Z2CE42DB.js";
+import "./chunk-5GJ5RTHA.js";
+import "./chunk-I3VI34DP.js";
+import "./chunk-SHDVWATN.js";
+import "./chunk-DCDS2PQ6.js";
 import "./chunk-5INI7D2L.js";
 import "./chunk-7ZHH77QA.js";
-import "./chunk-PBQEW5VW.js";
+import "./chunk-PFTDGEPZ.js";
 import "./chunk-TIRZCERI.js";
 import "./chunk-DHDZ7IVN.js";
-import "./chunk-W55YHPEP.js";
-import "./chunk-ACBT6UZS.js";
+import "./chunk-UFSQEO7P.js";
+import "./chunk-D3SZ4LVS.js";
 import "./chunk-VPP2FONR.js";
 
 // src/build/compileTemplates.ts