sibujs 1.3.0 → 1.5.0

package/dist/build.cjs

@@ -633,7 +633,6 @@ function injectPureAnnotations(code2) {
   const sibuFactories = [
     "tagFactory",
     "context",
-    "composable",
     "defineComponent",
     "withProps",
     "withDefaults",
@@ -855,7 +854,6 @@ function deepMerge(target, source2) {
 var PURE_FACTORIES = [
   "tagFactory",
   "context",
-  "composable",
   "defineComponent",
   "withProps",
   "withDefaults",
@@ -1171,8 +1169,6 @@ __export(index_exports, {
   mask: () => mask,
   match: () => match,
   math: () => math,
-  memo: () => memo,
-  memoFn: () => memoFn,
   menu: () => menu,
   meta: () => meta,
   meter: () => meter,
@@ -1410,12 +1406,21 @@ function queueSignalNotification(signal2) {
     }
   }
 }
+var MAX_DRAIN_ITERATIONS = 1e3;
 function drainNotificationQueue() {
   if (notifyDepth > 0) return;
   notifyDepth++;
   try {
     let i2 = 0;
     while (i2 < pendingQueue.length) {
+      if (i2 >= 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[i2]);
       i2++;
     }
@@ -1745,7 +1750,15 @@ function dispose(node) {
     const disposers = elementDisposers.get(current);
     if (disposers) {
       if (_isDev5) activeBindingCount -= disposers.length;
-      for (const d of disposers) d();
+      for (const d of disposers) {
+        try {
+          d();
+        } catch (err) {
+          if (_isDev5 && typeof console !== "undefined") {
+            console.warn("[SibuJS] Disposer threw during cleanup:", err);
+          }
+        }
+      }
       elementDisposers.delete(current);
     }
   }
@@ -2679,19 +2692,16 @@ function Portal(nodes, target) {
       portalContent = nodes();
       container.appendChild(portalContent);
     } catch (err) {
-      console.error("[Portal] Render error:", err);
+      if (typeof console !== "undefined") {
+        console.error("[Portal] Render error:", err);
+      }
     }
   });
-  const observer = new MutationObserver(() => {
-    if (!anchor.isConnected && portalContent) {
+  registerDisposer(anchor, () => {
+    if (portalContent) {
+      dispose(portalContent);
       portalContent.remove();
       portalContent = null;
-      observer.disconnect();
-    }
-  });
-  queueMicrotask(() => {
-    if (anchor.parentNode) {
-      observer.observe(anchor.parentNode, { childList: true });
     }
   });
   return anchor;
@@ -3158,21 +3168,37 @@ function derived(getter, options) {
     cs._v = getter();
   }, markDirty);
   const hook = globalThis.__SIBU_DEVTOOLS_GLOBAL_HOOK__;
+  let evaluating = false;
   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 (trackingSuspended) {
       if (cs._d) {
-        cs._d = false;
-        cs._v = getter();
+        evaluating = true;
+        try {
+          cs._d = false;
+          cs._v = getter();
+        } finally {
+          evaluating = false;
+        }
       }
       return cs._v;
     }
     recordDependency(cs);
     if (cs._d) {
       const oldValue = cs._v;
-      track(() => {
-        cs._d = false;
-        cs._v = getter();
-      }, markDirty);
+      evaluating = true;
+      try {
+        track(() => {
+          cs._d = false;
+          cs._v = getter();
+        }, markDirty);
+      } finally {
+        evaluating = false;
+      }
       if (hook && oldValue !== cs._v) {
         hook.emit("computed:update", { signal: cs, oldValue, newValue: cs._v });
       }
@@ -3303,16 +3329,6 @@ function ref(initial) {
   };
 }
 
-// src/core/signals/memo.ts
-function memo(factory) {
-  return derived(factory);
-}
-
-// src/core/signals/memoFn.ts
-function memoFn(callback) {
-  return derived(callback);
-}
-
 // src/core/signals/array.ts
 function array(initial = []) {
   const [arr, setArr] = signal([...initial]);
@@ -3510,21 +3526,67 @@ function deepEqual(a2, b2, seen) {
   if (a2 == null || b2 == null) return false;
   if (typeof a2 !== typeof b2) return false;
   if (typeof a2 !== "object") return false;
-  if (a2 instanceof Date && b2 instanceof Date) return a2.getTime() === b2.getTime();
-  if (a2 instanceof RegExp && b2 instanceof RegExp) return a2.toString() === b2.toString();
-  if (!seen) seen = /* @__PURE__ */ new Set();
-  if (seen.has(a2)) return true;
-  seen.add(a2);
+  const objA = a2;
+  const objB = b2;
+  if (objA.constructor !== objB.constructor) return false;
+  if (a2 instanceof Date) return a2.getTime() === b2.getTime();
+  if (a2 instanceof RegExp) {
+    const rb = b2;
+    return a2.source === rb.source && a2.flags === rb.flags;
+  }
+  if (!seen) seen = /* @__PURE__ */ new Map();
+  let peers = seen.get(objA);
+  if (peers?.has(objB)) return true;
+  if (!peers) {
+    peers = /* @__PURE__ */ new Set();
+    seen.set(objA, peers);
+  }
+  peers.add(objB);
+  if (a2 instanceof Map) {
+    const mb = b2;
+    if (a2.size !== mb.size) return false;
+    for (const [k, v] of a2) {
+      if (!mb.has(k)) return false;
+      if (!deepEqual(v, mb.get(k), seen)) return false;
+    }
+    return true;
+  }
+  if (a2 instanceof Set) {
+    const sb = b2;
+    if (a2.size !== sb.size) return false;
+    for (const item of a2) {
+      if (!sb.has(item)) return false;
+    }
+    return true;
+  }
+  if (a2 instanceof ArrayBuffer) {
+    const viewA = new Uint8Array(a2);
+    const viewB = new Uint8Array(b2);
+    if (viewA.length !== viewB.length) return false;
+    for (let i2 = 0; i2 < viewA.length; i2++) {
+      if (viewA[i2] !== viewB[i2]) return false;
+    }
+    return true;
+  }
+  if (ArrayBuffer.isView(a2) && ArrayBuffer.isView(b2)) {
+    const ta = a2;
+    const tb = b2;
+    if (ta.length !== tb.length) return false;
+    for (let i2 = 0; i2 < ta.length; i2++) {
+      if (ta[i2] !== tb[i2]) return false;
+    }
+    return true;
+  }
   if (Array.isArray(a2)) {
     if (!Array.isArray(b2)) return false;
     if (a2.length !== b2.length) return false;
     return a2.every((val, i2) => deepEqual(val, b2[i2], seen));
   }
-  const keysA = Object.keys(a2);
-  const keysB = Object.keys(b2);
+  const keysA = Object.keys(objA);
+  const keysB = Object.keys(objB);
   if (keysA.length !== keysB.length) return false;
   return keysA.every(
-    (key) => deepEqual(a2[key], b2[key], seen)
+    (key) => deepEqual(objA[key], objB[key], seen)
   );
 }
 function deepSignal(initial) {
@@ -3584,29 +3646,35 @@ function asyncDerived(factory, initial) {
 // src/core/rendering/lifecycle.ts
 function safeCall(cb, hookName) {
   try {
-    cb();
+    return cb();
   } catch (err) {
     devWarn(`${hookName}: callback threw: ${err instanceof Error ? err.message : String(err)}`);
+    return void 0;
+  }
+}
+function runMountCallback(callback, hookName, element) {
+  const cleanup2 = safeCall(callback, hookName);
+  if (typeof cleanup2 === "function" && element) {
+    registerDisposer(element, cleanup2);
   }
 }
 function onMount(callback, element) {
   if (typeof document === "undefined") return;
   if (element) {
     if (element.isConnected) {
-      queueMicrotask(() => {
-        safeCall(callback, "onMount");
-      });
+      queueMicrotask(() => runMountCallback(callback, "onMount", element));
       return;
     }
     const observer = new MutationObserver(() => {
       if (element.isConnected) {
         observer.disconnect();
-        safeCall(callback, "onMount");
+        runMountCallback(callback, "onMount", element);
       }
     });
+    registerDisposer(element, () => observer.disconnect());
     queueMicrotask(() => {
       if (element.isConnected) {
-        safeCall(callback, "onMount");
+        runMountCallback(callback, "onMount", element);
       } else {
         observer.observe(document.body, { childList: true, subtree: true });
       }
@@ -3618,6 +3686,7 @@ function onMount(callback, element) {
   }
 }
 function onUnmount(callback, element) {
+  registerDisposer(element, () => safeCall(callback, "onUnmount"));
   const startObserving = () => {
     const observer = new MutationObserver(() => {
       if (!element.isConnected) {
@@ -3626,6 +3695,7 @@ function onUnmount(callback, element) {
       }
     });
     observer.observe(document.body, { childList: true, subtree: true });
+    registerDisposer(element, () => observer.disconnect());
   };
   if (element.isConnected) {
     startObserving();
@@ -3776,26 +3846,24 @@ function lazy(importFn) {
     if (cached) {
       return cached();
     }
-    const [_status, setStatus] = signal("loading");
-    const [_error, setError] = signal(null);
     const container = div({ class: "sibu-lazy" });
+    let disposed = false;
     importFn().then((mod) => {
+      if (disposed) return;
       cached = mod.default;
       const rendered = cached();
       container.replaceChildren(rendered);
-      setStatus("loaded");
     }).catch((err) => {
+      if (disposed) return;
       const errorObj = err instanceof Error ? err : new Error(String(err));
-      setError(errorObj);
-      setStatus("error");
-      container.replaceChildren(
-        div({
-          class: "sibu-lazy-error",
-          nodes: `Failed to load component: ${errorObj.message}`
-        })
-      );
+      container.replaceChildren(div("sibu-lazy-error", `Failed to load component: ${errorObj.message}`));
     });
-    container.appendChild(span({ class: "sibu-lazy-loading", nodes: "Loading..." }));
+    container.appendChild(span("sibu-lazy-loading", "Loading..."));
+    const origRemove = container.remove.bind(container);
+    container.remove = () => {
+      disposed = true;
+      origRemove();
+    };
     return container;
   };
 }
@@ -4907,14 +4975,11 @@ var moduleSizes = {
   "core/watch": 300,
   "core/store": 380,
   "core/ref": 150,
-  "core/memo": 180,
-  "core/memoFn": 160,
   "core/array": 420,
   "core/deepSignal": 500,
   "core/lifecycle": 300,
   "core/context": 350,
   "core/persist": 400,
-  "core/primitives": 200,
   "core/hoc": 280,
   "core/transition": 600,
   "core/form": 750,
@@ -5065,7 +5130,7 @@ var lintRules = {
     description: "Signal functions should not be called inside conditionals, loops, or nested functions",
     check(source2) {
       const violations = [];
-      const hookNames = ["signal", "effect", "derived", "memo", "memoFn", "ref", "watch", "store"];
+      const hookNames = ["signal", "effect", "derived", "ref", "watch", "store"];
       const hookPattern = new RegExp(`\\b(${hookNames.join("|")})\\s*\\(`, "g");
       const lines = source2.split("\n");
       for (let lineIdx = 0; lineIdx < lines.length; lineIdx++) {
@@ -5424,30 +5489,6 @@ function getComponentMetadata() {
         }
       ]
     },
-    {
-      name: "memo",
-      description: "Returns a memoized value that only recomputes when its reactive dependencies change. Alias for derived.",
-      props: [
-        {
-          name: "factory",
-          type: "() => T",
-          required: true,
-          description: "Function that computes the memoized value"
-        }
-      ]
-    },
-    {
-      name: "memoFn",
-      description: "Returns a memoized callback that only updates when its reactive dependencies change.",
-      props: [
-        {
-          name: "callback",
-          type: "() => T",
-          required: true,
-          description: "The callback factory function to memoize"
-        }
-      ]
-    },
     {
       name: "ref",
       description: "Creates a mutable reference object that persists across renders. Updating a ref does NOT trigger re-renders.",
@@ -5491,43 +5532,6 @@ function getComponentMetadata() {
         }
       ]
     },
-    // ── SolidJS-style Primitives ─────────────────────────────────────
-    {
-      name: "createSignal",
-      description: "Creates a reactive signal. SolidJS-style alias for signal. Returns [getter, setter].",
-      props: [
-        {
-          name: "value",
-          type: "T",
-          required: true,
-          description: "Initial value"
-        }
-      ]
-    },
-    {
-      name: "createMemo",
-      description: "Creates a derived/computed reactive value. SolidJS-style alias for derived.",
-      props: [
-        {
-          name: "fn",
-          type: "() => T",
-          required: true,
-          description: "Computation function that reads other signals"
-        }
-      ]
-    },
-    {
-      name: "createEffect",
-      description: "Creates a reactive side effect. SolidJS-style alias for effect.",
-      props: [
-        {
-          name: "fn",
-          type: "() => void",
-          required: true,
-          description: "Effect function that reads reactive signals"
-        }
-      ]
-    },
     // ── Lifecycle ────────────────────────────────────────────────────
     {
       name: "onMount",
@@ -5859,11 +5863,6 @@ function generateVSCodeSnippets() {
         "});"
       ],
       description: "Create a reactive form with validation"
-    },
-    "SibuJS createSignal": {
-      prefix: "sibu-signal",
-      body: ["const [${1:value}, ${2:setValue}] = createSignal(${3:initialValue});"],
-      description: "Create a reactive signal (SolidJS-style alias for signal)"
     }
   };
 }
@@ -5895,10 +5894,6 @@ function generateTypeStubs() {
     signal: ["declare function signal<T>(initial: T): [() => T, (next: T | ((prev: T) => T)) => void];"].join("\n"),
     effect: ["declare function effect(effectFn: () => void): () => void;"].join("\n"),
     derived: ["declare function derived<T>(getter: () => T): () => T;"].join("\n"),
-    memo: ["declare function memo<T>(factory: () => T): () => T;"].join("\n"),
-    memoFn: ["declare function memoFn<T extends (...args: unknown[]) => unknown>(callback: () => T): () => T;"].join(
-      "\n"
-    ),
     ref: [
       "interface Ref<T> { current: T; }",
       "declare function ref<T>(initial: T): Ref<T>;",
@@ -5917,11 +5912,6 @@ function generateTypeStubs() {
       "}",
       "declare function store<T extends object>(initialState: T): [{ readonly [K in keyof T]: T[K] }, StoreActions<T>];"
     ].join("\n"),
-    createSignal: ["declare function createSignal<T>(value: T): [() => T, (next: T | ((prev: T) => T)) => void];"].join(
-      "\n"
-    ),
-    createMemo: ["declare function createMemo<T>(fn: () => T): () => T;"].join("\n"),
-    createEffect: ["declare function createEffect(fn: () => void): () => void;"].join("\n"),
     mount: [
       "declare function mount(component: (() => HTMLElement) | HTMLElement | Node, container: HTMLElement | null): { node: Node; unmount: () => void };"
     ].join("\n"),

package/dist/build.d.cts

@@ -503,7 +503,7 @@ interface StaticAnalysisResult {
  * converted to template cloning at build time.
  *
  * Detects patterns like:
- *   div({ class: "card", id: "main", nodes: "Hello" })
+ *   div({ class: "card", id: "main" }, "Hello")
  *
  * And identifies them as candidates for:
  *   staticTemplate('<div class="card" id="main">Hello</div>')

package/dist/build.d.ts

@@ -503,7 +503,7 @@ interface StaticAnalysisResult {
  * converted to template cloning at build time.
  *
  * Detects patterns like:
- *   div({ class: "card", id: "main", nodes: "Hello" })
+ *   div({ class: "card", id: "main" }, "Hello")
  *
  * And identifies them as candidates for:
  *   staticTemplate('<div class="card" id="main">Hello</div>')

package/dist/build.js

@@ -1,18 +1,18 @@
 import {
   index_exports
-} from "./chunk-QWZG56ET.js";
+} from "./chunk-JCDUJN2F.js";
 import "./chunk-YT6HQ6AM.js";
-import "./chunk-32DY64NT.js";
-import "./chunk-NYVAC6P5.js";
-import "./chunk-BGN5ZMP4.js";
-import "./chunk-F3FA4F32.js";
-import "./chunk-PTQJDMRT.js";
-import "./chunk-NEKUBFPT.js";
+import "./chunk-P3XWXJZU.js";
+import "./chunk-GJPXRJ45.js";
+import "./chunk-6BMPXPUW.js";
+import "./chunk-SFKNRVCU.js";
+import "./chunk-5ZYQ6KDD.js";
+import "./chunk-XHK6BDAJ.js";
 import "./chunk-CMBFNA7L.js";
-import "./chunk-CHF5OHIA.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";
 
 // src/build/compileTemplates.ts
@@ -589,7 +589,6 @@ function injectPureAnnotations(code) {
   const sibuFactories = [
     "tagFactory",
     "context",
-    "composable",
     "defineComponent",
     "withProps",
     "withDefaults",
@@ -811,7 +810,6 @@ function deepMerge(target, source) {
 var PURE_FACTORIES = [
   "tagFactory",
   "context",
-  "composable",
   "defineComponent",
   "withProps",
   "withDefaults",
@@ -1291,14 +1289,11 @@ var moduleSizes = {
   "core/watch": 300,
   "core/store": 380,
   "core/ref": 150,
-  "core/memo": 180,
-  "core/memoFn": 160,
   "core/array": 420,
   "core/deepSignal": 500,
   "core/lifecycle": 300,
   "core/context": 350,
   "core/persist": 400,
-  "core/primitives": 200,
   "core/hoc": 280,
   "core/transition": 600,
   "core/form": 750,
@@ -1449,7 +1444,7 @@ var lintRules = {
     description: "Signal functions should not be called inside conditionals, loops, or nested functions",
     check(source) {
       const violations = [];
-      const hookNames = ["signal", "effect", "derived", "memo", "memoFn", "ref", "watch", "store"];
+      const hookNames = ["signal", "effect", "derived", "ref", "watch", "store"];
       const hookPattern = new RegExp(`\\b(${hookNames.join("|")})\\s*\\(`, "g");
       const lines = source.split("\n");
       for (let lineIdx = 0; lineIdx < lines.length; lineIdx++) {
@@ -1808,30 +1803,6 @@ function getComponentMetadata() {
         }
       ]
     },
-    {
-      name: "memo",
-      description: "Returns a memoized value that only recomputes when its reactive dependencies change. Alias for derived.",
-      props: [
-        {
-          name: "factory",
-          type: "() => T",
-          required: true,
-          description: "Function that computes the memoized value"
-        }
-      ]
-    },
-    {
-      name: "memoFn",
-      description: "Returns a memoized callback that only updates when its reactive dependencies change.",
-      props: [
-        {
-          name: "callback",
-          type: "() => T",
-          required: true,
-          description: "The callback factory function to memoize"
-        }
-      ]
-    },
     {
       name: "ref",
       description: "Creates a mutable reference object that persists across renders. Updating a ref does NOT trigger re-renders.",
@@ -1875,43 +1846,6 @@ function getComponentMetadata() {
         }
       ]
     },
-    // ── SolidJS-style Primitives ─────────────────────────────────────
-    {
-      name: "createSignal",
-      description: "Creates a reactive signal. SolidJS-style alias for signal. Returns [getter, setter].",
-      props: [
-        {
-          name: "value",
-          type: "T",
-          required: true,
-          description: "Initial value"
-        }
-      ]
-    },
-    {
-      name: "createMemo",
-      description: "Creates a derived/computed reactive value. SolidJS-style alias for derived.",
-      props: [
-        {
-          name: "fn",
-          type: "() => T",
-          required: true,
-          description: "Computation function that reads other signals"
-        }
-      ]
-    },
-    {
-      name: "createEffect",
-      description: "Creates a reactive side effect. SolidJS-style alias for effect.",
-      props: [
-        {
-          name: "fn",
-          type: "() => void",
-          required: true,
-          description: "Effect function that reads reactive signals"
-        }
-      ]
-    },
     // ── Lifecycle ────────────────────────────────────────────────────
     {
       name: "onMount",
@@ -2243,11 +2177,6 @@ function generateVSCodeSnippets() {
         "});"
       ],
       description: "Create a reactive form with validation"
-    },
-    "SibuJS createSignal": {
-      prefix: "sibu-signal",
-      body: ["const [${1:value}, ${2:setValue}] = createSignal(${3:initialValue});"],
-      description: "Create a reactive signal (SolidJS-style alias for signal)"
     }
   };
 }
@@ -2279,10 +2208,6 @@ function generateTypeStubs() {
     signal: ["declare function signal<T>(initial: T): [() => T, (next: T | ((prev: T) => T)) => void];"].join("\n"),
     effect: ["declare function effect(effectFn: () => void): () => void;"].join("\n"),
     derived: ["declare function derived<T>(getter: () => T): () => T;"].join("\n"),
-    memo: ["declare function memo<T>(factory: () => T): () => T;"].join("\n"),
-    memoFn: ["declare function memoFn<T extends (...args: unknown[]) => unknown>(callback: () => T): () => T;"].join(
-      "\n"
-    ),
     ref: [
       "interface Ref<T> { current: T; }",
       "declare function ref<T>(initial: T): Ref<T>;",
@@ -2301,11 +2226,6 @@ function generateTypeStubs() {
       "}",
       "declare function store<T extends object>(initialState: T): [{ readonly [K in keyof T]: T[K] }, StoreActions<T>];"
     ].join("\n"),
-    createSignal: ["declare function createSignal<T>(value: T): [() => T, (next: T | ((prev: T) => T)) => void];"].join(
-      "\n"
-    ),
-    createMemo: ["declare function createMemo<T>(fn: () => T): () => T;"].join("\n"),
-    createEffect: ["declare function createEffect(fn: () => void): () => void;"].join("\n"),
     mount: [
       "declare function mount(component: (() => HTMLElement) | HTMLElement | Node, container: HTMLElement | null): { node: Node; unmount: () => void };"
     ].join("\n"),