sibujs 3.0.0 → 3.2.0

package/dist/index.cjs

@@ -99,6 +99,7 @@ __export(index_exports, {
   footer: () => footer,
   form: () => form,
   g: () => g,
+  getRequestScopedCache: () => getRequestScopedCache,
   getSSRStore: () => getSSRStore,
   getSlot: () => getSlot,
   h1: () => h1,
@@ -248,9 +249,17 @@ function devWarn(message) {
 }
 
 // src/utils/sanitize.ts
+function stripControlChars(value) {
+  return value.replace(/[\x00-\x20\x7f-\x9f]+/g, "");
+}
+function isEventHandlerAttr(name) {
+  if (name.length < 3) return false;
+  const lower = name.toLowerCase();
+  return lower[0] === "o" && lower[1] === "n" && lower.charCodeAt(2) >= 97 && lower.charCodeAt(2) <= 122;
+}
 var SAFE_URL_PROTOCOLS = ["http:", "https:", "mailto:", "tel:", "ftp:"];
 function sanitizeUrl(url) {
-  const trimmed = url.replace(/[\x00-\x20\x7f-\x9f]+/g, "").trim();
+  const trimmed = stripControlChars(url).trim();
   if (!trimmed) return "";
   const lower = trimmed.toLowerCase();
   let schemeEnd = -1;
@@ -313,7 +322,7 @@ var URL_ATTRIBUTES = /* @__PURE__ */ new Set([
   "data"
 ]);
 function isUrlAttribute(attr) {
-  return URL_ATTRIBUTES.has(attr);
+  return URL_ATTRIBUTES.has(attr.toLowerCase());
 }
 
 // src/reactivity/track.ts
@@ -471,7 +480,7 @@ function retrack(effectFn, subscriber) {
   }
 }
 function track(effectFn, subscriber) {
-  if (!subscriber) subscriber = effectFn;
+  if (!subscriber) return reactiveBinding(effectFn);
   cleanup(subscriber);
   const prev = currentSubscriber;
   currentSubscriber = subscriber;
@@ -489,6 +498,32 @@ function track(effectFn, subscriber) {
   const sub2 = subscriber;
   return sub2._dispose ?? (sub2._dispose = () => cleanup(subscriber));
 }
+function reactiveBinding(commit) {
+  const run = () => {
+    const s2 = subscriber;
+    if (s2._disposed || s2._reentrant) return;
+    s2._reentrant = true;
+    try {
+      retrack(commit, subscriber);
+    } finally {
+      s2._reentrant = false;
+    }
+  };
+  const subscriber = run;
+  subscriber.depsHead = null;
+  subscriber.depsTail = null;
+  subscriber._epoch = 0;
+  subscriber._structDirty = false;
+  subscriber._runEpoch = 0;
+  subscriber._runs = 0;
+  subscriber._reentrant = false;
+  subscriber._disposed = false;
+  run();
+  return subscriber._dispose ?? (subscriber._dispose = () => {
+    subscriber._disposed = true;
+    cleanup(subscriber);
+  });
+}
 function recordDependency(signal2) {
   if (!currentSubscriber) return;
   const sub2 = currentSubscriber;
@@ -680,11 +715,6 @@ var _isDev3 = isDev();
 function setProp(el, key, val) {
   el[key] = val;
 }
-function isEventHandlerAttr(name) {
-  if (name.length < 3) return false;
-  const lower = name.toLowerCase();
-  return lower[0] === "o" && lower[1] === "n" && lower.charCodeAt(2) >= 97 && lower.charCodeAt(2) <= 122;
-}
 function bindAttribute(el, attr, getter) {
   if (isEventHandlerAttr(attr)) {
     if (_isDev3)
@@ -720,8 +750,7 @@ function bindAttribute(el, attr, getter) {
       el.setAttribute(attr, isUrlAttribute(attr) ? sanitizeUrl(str) : str);
     }
   }
-  const teardown = track(commit);
-  return teardown;
+  return reactiveBinding(commit);
 }
 function bindDynamic(el, nameGetter, valueGetter) {
   let prevName = null;
@@ -740,7 +769,7 @@ function bindDynamic(el, nameGetter, valueGetter) {
       if (_isDev3) devWarn(`bindDynamic: value getter threw: ${err instanceof Error ? err.message : String(err)}`);
       return;
     }
-    if ((name[0] === "o" || name[0] === "O") && (name[1] === "n" || name[1] === "N")) return;
+    if (isEventHandlerAttr(name)) return;
     if (prevName !== null && prevName !== name) {
       el.removeAttribute(prevName);
     }
@@ -752,7 +781,7 @@ function bindDynamic(el, nameGetter, valueGetter) {
     }
     prevName = name;
   }
-  const teardown = track(commit);
+  const teardown = reactiveBinding(commit);
   return () => {
     teardown();
     if (prevName !== null) {
@@ -761,83 +790,9 @@ function bindDynamic(el, nameGetter, valueGetter) {
   };
 }
 
-// src/reactivity/bindChildNode.ts
-var _isDev4 = isDev();
-function bindChildNode(placeholder, getter) {
-  let lastNodes = [];
-  function commit() {
-    let result;
-    try {
-      result = getter();
-    } catch (err) {
-      if (_isDev4) devWarn(`bindChildNode: getter threw: ${err instanceof Error ? err.message : String(err)}`);
-      return;
-    }
-    if (result == null || typeof result === "boolean") {
-      for (let i2 = 0; i2 < lastNodes.length; i2++) {
-        const node = lastNodes[i2];
-        if (node.parentNode) node.parentNode.removeChild(node);
-      }
-      lastNodes.length = 0;
-      return;
-    }
-    const parent = placeholder.parentNode;
-    if (!parent) {
-      lastNodes.length = 0;
-      return;
-    }
-    let newNodes;
-    if (Array.isArray(result)) {
-      newNodes = [];
-      const seen = /* @__PURE__ */ new Set();
-      for (let i2 = 0; i2 < result.length; i2++) {
-        const item = result[i2];
-        if (item == null || typeof item === "boolean") continue;
-        const node = item instanceof Node ? item : document.createTextNode(String(item));
-        if (seen.has(node)) {
-          if (_isDev4)
-            devWarn("bindChildNode: duplicate node reference in array \u2014 only the first occurrence is rendered.");
-          continue;
-        }
-        seen.add(node);
-        newNodes.push(node);
-      }
-    } else {
-      const node = result instanceof Node ? result : document.createTextNode(String(result));
-      newNodes = [node];
-    }
-    let reused;
-    if (lastNodes.length > 0 && newNodes.length > 0) {
-      const lastSet = new Set(lastNodes);
-      reused = /* @__PURE__ */ new Set();
-      for (let i2 = 0; i2 < newNodes.length; i2++) {
-        if (lastSet.has(newNodes[i2])) reused.add(newNodes[i2]);
-      }
-    }
-    for (let i2 = 0; i2 < lastNodes.length; i2++) {
-      const node = lastNodes[i2];
-      if (reused?.has(node)) continue;
-      if (node.parentNode) node.parentNode.removeChild(node);
-    }
-    const anchor = placeholder.nextSibling;
-    for (let i2 = 0; i2 < newNodes.length; i2++) {
-      const node = newNodes[i2];
-      if (reused?.has(node) && node.parentNode === parent) {
-        if (node.nextSibling !== anchor) {
-          parent.insertBefore(node, anchor);
-        }
-      } else {
-        parent.insertBefore(node, anchor);
-      }
-    }
-    lastNodes = newNodes;
-  }
-  return track(commit);
-}
-
 // src/core/rendering/dispose.ts
 var elementDisposers = /* @__PURE__ */ new WeakMap();
-var _isDev5 = isDev();
+var _isDev4 = isDev();
 var activeBindingCount = 0;
 function registerDisposer(node, teardown) {
   let disposers = elementDisposers.get(node);
@@ -846,7 +801,7 @@ function registerDisposer(node, teardown) {
     elementDisposers.set(node, disposers);
   }
   disposers.push(teardown);
-  if (_isDev5) activeBindingCount++;
+  if (_isDev4) activeBindingCount++;
 }
 function dispose(node) {
   const stack = [node];
@@ -865,12 +820,12 @@ function dispose(node) {
     if (disposers) {
       const snapshot = disposers.slice();
       elementDisposers.delete(current);
-      if (_isDev5) activeBindingCount -= snapshot.length;
+      if (_isDev4) activeBindingCount -= snapshot.length;
       for (const d of snapshot) {
         try {
           d();
         } catch (err) {
-          if (_isDev5 && typeof console !== "undefined") {
+          if (_isDev4 && typeof console !== "undefined") {
             console.warn("[SibuJS] Disposer threw during cleanup:", err);
           }
         }
@@ -881,12 +836,12 @@ function dispose(node) {
         if (!added || added.length === 0) break;
         const moreSnapshot = added.slice();
         elementDisposers.delete(current);
-        if (_isDev5) activeBindingCount -= moreSnapshot.length;
+        if (_isDev4) activeBindingCount -= moreSnapshot.length;
         for (const d of moreSnapshot) {
           try {
             d();
           } catch (err) {
-            if (_isDev5 && typeof console !== "undefined") {
+            if (_isDev4 && typeof console !== "undefined") {
               console.warn("[SibuJS] Disposer threw during cleanup:", err);
             }
           }
@@ -896,7 +851,7 @@ function dispose(node) {
   }
 }
 function checkLeaks(warnThreshold = 0) {
-  if (!_isDev5) return 0;
+  if (!_isDev4) return 0;
   if (warnThreshold > 0 && activeBindingCount > warnThreshold) {
     devWarn(
       `checkLeaks: ${activeBindingCount} active DOM bindings detected. Expected \u2264${warnThreshold}. This may indicate a component was removed from the DOM without calling dispose().`
@@ -905,6 +860,79 @@ function checkLeaks(warnThreshold = 0) {
   return activeBindingCount;
 }
 
+// src/reactivity/bindChildNode.ts
+var _isDev5 = isDev();
+function bindChildNode(placeholder, getter) {
+  let lastNodes = [];
+  function commit() {
+    let result;
+    try {
+      result = getter();
+    } catch (err) {
+      if (_isDev5) devWarn(`bindChildNode: getter threw: ${err instanceof Error ? err.message : String(err)}`);
+      return;
+    }
+    if (result == null || typeof result === "boolean") {
+      for (let i2 = 0; i2 < lastNodes.length; i2++) {
+        const node = lastNodes[i2];
+        dispose(node);
+        if (node.parentNode) node.parentNode.removeChild(node);
+      }
+      lastNodes.length = 0;
+      return;
+    }
+    const parent = placeholder.parentNode;
+    if (!parent) {
+      lastNodes.length = 0;
+      return;
+    }
+    let newNodes;
+    if (Array.isArray(result)) {
+      newNodes = [];
+      const seen = /* @__PURE__ */ new Set();
+      for (let i2 = 0; i2 < result.length; i2++) {
+        const item = result[i2];
+        if (item == null || typeof item === "boolean") continue;
+        const node = item instanceof Node ? item : document.createTextNode(String(item));
+        if (seen.has(node)) {
+          if (_isDev5)
+            devWarn("bindChildNode: duplicate node reference in array \u2014 only the first occurrence is rendered.");
+          continue;
+        }
+        seen.add(node);
+        newNodes.push(node);
+      }
+    } else {
+      const node = result instanceof Node ? result : document.createTextNode(String(result));
+      newNodes = [node];
+    }
+    let reused;
+    if (lastNodes.length > 0 && newNodes.length > 0) {
+      const lastSet = new Set(lastNodes);
+      reused = /* @__PURE__ */ new Set();
+      for (let i2 = 0; i2 < newNodes.length; i2++) {
+        if (lastSet.has(newNodes[i2])) reused.add(newNodes[i2]);
+      }
+    }
+    for (let i2 = 0; i2 < lastNodes.length; i2++) {
+      const node = lastNodes[i2];
+      if (reused?.has(node)) continue;
+      dispose(node);
+      if (node.parentNode) node.parentNode.removeChild(node);
+    }
+    let prev = placeholder;
+    for (let i2 = 0; i2 < newNodes.length; i2++) {
+      const node = newNodes[i2];
+      if (prev.nextSibling !== node) {
+        parent.insertBefore(node, prev.nextSibling);
+      }
+      prev = node;
+    }
+    lastNodes = newNodes;
+  }
+  return reactiveBinding(commit);
+}
+
 // src/core/rendering/tagFactory.ts
 var SVG_NS = "http://www.w3.org/2000/svg";
 var _isDev6 = isDev();
@@ -931,6 +959,18 @@ var CLOBBER_RISKY_IDS = /* @__PURE__ */ new Set([
 function setProp2(el, key, val) {
   el[key] = val;
 }
+function looksLikeClassList(s2) {
+  const t = s2.trim();
+  if (!t) return false;
+  const tokens = t.split(/\s+/);
+  let sawClassish = false;
+  for (let i2 = 0; i2 < tokens.length; i2++) {
+    const tok = tokens[i2];
+    if (!/^-?[A-Za-z_][A-Za-z0-9_:/.-]*$/.test(tok)) return false;
+    if (/[-:/0-9]/.test(tok)) sawClassish = true;
+  }
+  return sawClassish;
+}
 var kebabCache = /* @__PURE__ */ new Map();
 function toKebab(prop) {
   let cached = kebabCache.get(prop);
@@ -1066,6 +1106,11 @@ var tagFactory = (tag, ns) => {
         appendChildren(el, second);
         return el;
       }
+      if (_isDev6 && looksLikeClassList(first)) {
+        devWarn(
+          `tagFactory: lone string "${first}" looks like a class list but is being rendered as TEXT. For a class, use ${tag}({ class: "${first}" }) \u2014 or ${tag}("${first}", children) to set the class AND add children.`
+        );
+      }
       el.textContent = first;
       return el;
     }
@@ -1123,7 +1168,7 @@ var tagFactory = (tag, ns) => {
           const value = props[key];
           if (value == null) continue;
           const lkey = key.toLowerCase();
-          if (lkey[0] === "o" && lkey[1] === "n") continue;
+          if (isEventHandlerAttr(key)) continue;
           if (typeof value === "function") {
             registerDisposer(el, bindAttribute(el, key, value));
           } else if (typeof value === "boolean") {
@@ -1404,14 +1449,28 @@ function parseTemplate(strings) {
       }
       return { kind: "mixed", statics, exprs };
     }
-    const valStart = pos;
-    while (pos < len) {
-      const c = template2.charCodeAt(pos);
-      if (c === 32 || c === 9 || c === 10 || c === 13 || c === 62 || c === 47) break;
-      pos++;
+    {
+      const statics = [];
+      const exprs = [];
+      let current = "";
+      while (pos < len) {
+        const c = template2.charCodeAt(pos);
+        if (c === 32 || c === 9 || c === 10 || c === 13 || c === 62) break;
+        const innerIdx = tryExprIdx();
+        if (innerIdx >= 0) {
+          statics.push(current);
+          current = "";
+          exprs.push(innerIdx);
+        } else {
+          current += template2[pos++];
+        }
+      }
+      statics.push(current);
+      if (exprs.length === 0) {
+        return { kind: "static", value: statics[0] };
+      }
+      return { kind: "mixed", statics, exprs };
     }
-    const val = template2.slice(valStart, pos);
-    return { kind: "static", value: val };
   }
   function parseAttrs() {
     const attrs = [];
@@ -1468,6 +1527,30 @@ function parseTemplate(strings) {
     while (pos < len) {
       if (template2[pos] === "<" && pos + 1 < len && template2[pos + 1] === "/") break;
       if (template2[pos] === "<") {
+        const next = template2[pos + 1];
+        if (next === "!") {
+          if (template2.startsWith("<!--", pos)) {
+            const end = template2.indexOf("-->", pos + 4);
+            pos = end === -1 ? len : end + 3;
+          } else if (template2.startsWith("<![CDATA[", pos)) {
+            const end = template2.indexOf("]]>", pos + 9);
+            pos = end === -1 ? len : end + 3;
+          } else {
+            const end = template2.indexOf(">", pos);
+            pos = end === -1 ? len : end + 1;
+          }
+          continue;
+        }
+        if (next === "?") {
+          const end = template2.indexOf(">", pos);
+          pos = end === -1 ? len : end + 1;
+          continue;
+        }
+        if (!(next >= "a" && next <= "z") && !(next >= "A" && next <= "Z")) {
+          children.push({ t: 1, value: "<" });
+          pos++;
+          continue;
+        }
         pos++;
         const tag = readTagName();
         const attrs = parseAttrs();
@@ -1516,7 +1599,7 @@ function executeElement(tmpl, values) {
       case 1: {
         const name = attr.name;
         const lname = name.toLowerCase();
-        if (lname[0] === "o" && lname[1] === "n") break;
+        if (isEventHandlerAttr(name)) break;
         const val = values[attr.idx];
         if (typeof val === "function") {
           registerDisposer(el, bindAttribute(el, name, val));
@@ -1765,6 +1848,11 @@ function each(getArray, render, options) {
     workMap.clear();
     keyIndexMap.clear();
     for (let i2 = 0; i2 < newLen; i2++) {
+      if (_isDev8 && keyIndexMap.has(newKeys[i2])) {
+        devWarn(
+          `each: duplicate key "${String(newKeys[i2])}" at index ${i2} (first seen at ${keyIndexMap.get(newKeys[i2])}). Keys must be unique \u2014 duplicates cause rows to be dropped or mis-ordered.`
+        );
+      }
       keyIndexMap.set(newKeys[i2], i2);
     }
     for (let i2 = 0; i2 < newLen; i2++) {
@@ -1996,7 +2084,7 @@ function show(condition, element) {
   const update = () => {
     element.style.display = condition() ? "" : "none";
   };
-  track(update);
+  registerDisposer(element, track(update));
   return element;
 }
 function when(condition, thenBranch, elseBranch) {
@@ -2023,7 +2111,7 @@ function when(condition, thenBranch, elseBranch) {
     }
     initialized = true;
   };
-  track(update);
+  registerDisposer(anchor, track(update));
   if (!initialized) {
     queueMicrotask(() => {
       if (!initialized && anchor.parentNode) update();
@@ -2058,7 +2146,7 @@ function match(value, cases, fallback) {
     }
     initialized = true;
   };
-  track(update);
+  registerDisposer(anchor, track(update));
   if (!initialized) {
     queueMicrotask(() => {
       if (!initialized && anchor.parentNode) update();
@@ -2099,6 +2187,12 @@ function KeepAlive(activeKey, cases, options) {
         return;
       }
       node = factory();
+      if (node instanceof DocumentFragment) {
+        const wrapper = document.createElement("div");
+        wrapper.style.display = "contents";
+        wrapper.appendChild(node);
+        node = wrapper;
+      }
       cache2.set(key, node);
       lruOrder.push(key);
       if (max > 0 && lruOrder.length > max) {
@@ -2383,11 +2477,15 @@ function signal(initial, options) {
 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();
+    let mod = null;
+    const getBuiltin = process.getBuiltinModule;
+    if (typeof getBuiltin === "function") {
+      mod = getBuiltin("node:async_hooks");
+    } else {
+      const req = Function("return typeof require==='function'?require:null")();
+      if (req) mod = req("node:async_hooks");
     }
+    if (mod) als = new mod.AsyncLocalStorage();
   }
 } catch {
   als = null;
@@ -2403,6 +2501,17 @@ function getSSRStore() {
 function isSSR() {
   return getSSRStore().ssr;
 }
+function getRequestScopedCache(name) {
+  if (!isSSR()) return null;
+  const store2 = getSSRStore();
+  const caches = store2.caches ?? (store2.caches = /* @__PURE__ */ new Map());
+  let c = caches.get(name);
+  if (!c) {
+    c = /* @__PURE__ */ new Map();
+    caches.set(name, c);
+  }
+  return c;
+}
 function enableSSR() {
   getSSRStore().ssr = true;
 }
@@ -2537,6 +2646,7 @@ function effect(effectFn, options) {
     ctx.fn(ctx.onCleanup);
   };
   const sub2 = (() => {
+    if (ctx.disposed) return;
     if (ctx.running) {
       ctx.rerunPending = true;
       return;
@@ -2579,6 +2689,7 @@ function derived(getter, options) {
   const equals = options?.equals;
   const cs = {};
   cs._d = false;
+  cs._init = false;
   cs._g = getter;
   cs.__v = 0;
   const markDirty = () => {
@@ -2587,11 +2698,18 @@ function derived(getter, options) {
   };
   markDirty._c = 1;
   markDirty._sig = cs;
+  const recompute = () => {
+    const next = getter();
+    cs._v = equals && cs._init ? equals(cs._v, next) ? cs._v : next : next;
+    cs._d = false;
+    cs._init = true;
+  };
   track(() => {
     let threw = true;
     try {
       cs._v = getter();
       cs._d = false;
+      cs._init = true;
       threw = false;
     } finally {
       if (threw) cs._d = true;
@@ -2607,20 +2725,13 @@ function derived(getter, options) {
     }
     if (trackingSuspended) {
       if (cs._d) {
+        const prev = cs._v;
         evaluating = true;
-        let threw = true;
         try {
-          const prev = cs._v;
-          retrack(() => {
-            const next = getter();
-            cs._v = equals && cs._v !== void 0 ? equals(cs._v, next) ? cs._v : next : next;
-            cs._d = false;
-            threw = false;
-          }, markDirty);
+          retrack(recompute, markDirty);
           if (!Object.is(prev, cs._v)) cs.__v++;
         } finally {
           evaluating = false;
-          if (threw) cs._d = true;
         }
       }
       return cs._v;
@@ -2629,18 +2740,11 @@ function derived(getter, options) {
     if (cs._d) {
       const oldValue = cs._v;
       evaluating = true;
-      let threw = true;
       try {
-        retrack(() => {
-          const next = getter();
-          cs._v = equals && cs._v !== void 0 ? equals(cs._v, next) ? cs._v : next : next;
-          cs._d = false;
-          threw = false;
-        }, markDirty);
+        retrack(recompute, markDirty);
         if (!Object.is(oldValue, cs._v)) cs.__v++;
       } finally {
         evaluating = false;
-        if (threw) cs._d = true;
       }
       if (hook && oldValue !== cs._v) {
         hook.emit("computed:update", { signal: cs, oldValue, newValue: cs._v });
@@ -2693,12 +2797,12 @@ function store(initialState) {
     signals[key] = [getter, setter];
   });
   const store2 = new Proxy({}, {
-    get(_, prop) {
-      if (prop in signals) {
+    get(target, prop) {
+      if (typeof prop === "string" && Object.hasOwn(signals, prop)) {
         const getter = signals[prop][0];
         return getter();
       }
-      return void 0;
+      return Reflect.get(target, prop);
     },
     set() {
       throw new Error(
@@ -2718,7 +2822,7 @@ function store(initialState) {
     const nextState = typeof patch === "function" ? patch(current) : patch;
     batch(() => {
       Object.entries(nextState).forEach(([key, value]) => {
-        if (key in signals) {
+        if (Object.hasOwn(signals, key)) {
           signals[key][1](value);
         }
       });
@@ -3016,6 +3120,14 @@ function deepEqual(a2, b2, seen) {
     }
     return true;
   }
+  if (a2 instanceof DataView) {
+    if (!(b2 instanceof DataView)) return false;
+    if (a2.byteLength !== b2.byteLength) return false;
+    for (let i2 = 0; i2 < a2.byteLength; i2++) {
+      if (a2.getUint8(i2) !== b2.getUint8(i2)) return false;
+    }
+    return true;
+  }
   if (ArrayBuffer.isView(a2) && ArrayBuffer.isView(b2)) {
     const ta = a2;
     const tb = b2;
@@ -3034,7 +3146,7 @@ function deepEqual(a2, b2, seen) {
   const keysB = Object.keys(objB);
   if (keysA.length !== keysB.length) return false;
   return keysA.every(
-    (key) => deepEqual(objA[key], objB[key], seen)
+    (key) => Object.hasOwn(objB, key) && deepEqual(objA[key], objB[key], seen)
   );
 }
 function deepSignal(initial) {
@@ -3537,34 +3649,37 @@ function Suspense({ nodes, fallback }) {
   container.appendChild(fallbackEl);
   let suspenseDisposed = false;
   let observer = null;
+  let childEl = null;
   registerDisposer(container, () => {
     suspenseDisposed = true;
     if (observer) {
       observer.disconnect();
       observer = null;
     }
+    if (childEl && !container.contains(childEl)) dispose(childEl);
   });
   queueMicrotask(() => {
     if (suspenseDisposed) return;
     try {
-      const childEl = nodes();
-      if (childEl.classList.contains("sibu-lazy")) {
-        if (!childEl.querySelector(".sibu-lazy-loading")) {
-          container.replaceChildren(childEl);
+      const el = nodes();
+      childEl = el;
+      if (el.classList.contains("sibu-lazy")) {
+        if (!el.querySelector(".sibu-lazy-loading")) {
+          container.replaceChildren(el);
           return;
         }
         observer = new MutationObserver(() => {
           if (suspenseDisposed) return;
-          const loading = childEl.querySelector(".sibu-lazy-loading");
+          const loading = el.querySelector(".sibu-lazy-loading");
           if (!loading) {
             observer?.disconnect();
             observer = null;
-            container.replaceChildren(childEl);
+            container.replaceChildren(el);
           }
         });
-        observer.observe(childEl, { childList: true, subtree: true });
+        observer.observe(el, { childList: true, subtree: true });
       } else {
-        container.replaceChildren(childEl);
+        container.replaceChildren(el);
       }
     } catch (err) {
       const errorObj = err instanceof Error ? err : new Error(String(err));
@@ -4478,6 +4593,7 @@ function Loading(props = {}) {
   footer,
   form,
   g,
+  getRequestScopedCache,
   getSSRStore,
   getSlot,
   h1,