sibujs 1.4.0 → 2.0.0

package/dist/{chunk-3X2YG6YM.js → chunk-JYD2PWXH.js}

@@ -1,9 +1,12 @@
 import {
   sanitizeUrl
-} from "./chunk-CMBFNA7L.js";
+} from "./chunk-UCS6AMJ7.js";
+import {
+  getSSRStore
+} from "./chunk-2RA7SHDA.js";
 import {
   isDev
-} from "./chunk-5X6PP2UK.js";
+} from "./chunk-LMLD24FC.js";
 
 // src/platform/ssr.ts
 var _isDev = isDev();
@@ -123,7 +126,7 @@ function hydrate(component, container, options = {}) {
         options.onMismatch(first);
       } else if (_isDev) {
         console.warn(
-          `[Sibu hydration] ${first.message}
+          `[SibuJS hydration] ${first.message}
   at ${first.path}
   server: ${first.serverValue}
   client: ${first.clientValue}`
@@ -131,17 +134,9 @@ function hydrate(component, container, options = {}) {
       }
     }
   }
-  hydrateNode(container.firstElementChild, clientTree);
+  container.replaceChildren(clientTree);
   container.setAttribute("data-sibu-hydrated", "true");
 }
-function hydrateNode(serverNode, clientNode) {
-  if (!serverNode) return;
-  const serverChildren = Array.from(serverNode.children);
-  const clientChildren = Array.from(clientNode.children);
-  for (let i = 0; i < Math.min(serverChildren.length, clientChildren.length); i++) {
-    hydrateNode(serverChildren[i], clientChildren[i]);
-  }
-}
 function collectMismatches(serverNode, clientNode, path, out, max = 5) {
   if (out.length >= max) return;
   const nodePath = path || clientNode?.tagName?.toLowerCase() || "(root)";
@@ -371,12 +366,16 @@ function renderToReadableStream(element) {
         controller.enqueue(value);
       }
     },
-    cancel() {
-      generator.return(void 0);
+    async cancel() {
+      await generator.return(void 0);
     }
   });
 }
+var SAFE_ID = /^[A-Za-z0-9_-]+$/;
 function island(id, component) {
+  if (!SAFE_ID.test(id)) {
+    throw new Error(`[SibuJS SSR] island: id must match [A-Za-z0-9_-]+ (got: ${JSON.stringify(id.slice(0, 32))})`);
+  }
   const el = component();
   el.setAttribute("data-sibu-island", id);
   return el;
@@ -389,8 +388,9 @@ function hydrateIslands(container, islands) {
     const factory = islands[id];
     if (typeof factory !== "function") continue;
     const clientTree = factory();
-    hydrateNode(marker, clientTree);
-    marker.setAttribute("data-sibu-hydrated", "true");
+    clientTree.setAttribute("data-sibu-island", id);
+    clientTree.setAttribute("data-sibu-hydrated", "true");
+    marker.replaceWith(clientTree);
   }
   container.setAttribute("data-sibu-hydrated", "partial");
 }
@@ -407,8 +407,9 @@ function hydrateProgressively(container, islands, options) {
         for (const entry of entries) {
           if (entry.isIntersecting) {
             const clientTree = factory();
-            hydrateNode(marker, clientTree);
-            marker.setAttribute("data-sibu-hydrated", "true");
+            clientTree.setAttribute("data-sibu-island", id);
+            clientTree.setAttribute("data-sibu-hydrated", "true");
+            marker.replaceWith(clientTree);
             observer.disconnect();
             break;
           }
@@ -424,20 +425,37 @@ function hydrateProgressively(container, islands, options) {
     for (const cleanup of cleanups) cleanup();
   };
 }
-var suspenseIdCounter = 0;
 function resetSSRState() {
-  suspenseIdCounter = 0;
+  getSSRStore().suspenseIdCounter = 0;
+}
+function noop() {
 }
 function ssrSuspense(props) {
-  const id = `sibu-sus-${suspenseIdCounter++}`;
+  const store = getSSRStore();
+  const id = `sibu-sus-${store.suspenseIdCounter++}`;
+  const timeoutMs = props.timeoutMs ?? 3e4;
   const fallbackEl = props.fallback();
   const wrapper = document.createElement("div");
   wrapper.setAttribute("data-sibu-suspense-id", id);
   wrapper.appendChild(fallbackEl);
-  const promise = props.content().then((resolvedEl) => ({
-    id,
-    html: renderToString(resolvedEl)
-  }));
+  const fallbackHtml = renderToString(fallbackEl);
+  let timer;
+  const timeoutPromise = new Promise((_, reject) => {
+    timer = setTimeout(() => reject(new Error(`[SibuJS SSR] ssrSuspense timed out after ${timeoutMs}ms`)), timeoutMs);
+  });
+  const raced = Promise.race([props.content(), timeoutPromise]);
+  const promise = raced.then(
+    (resolvedEl) => {
+      if (timer) clearTimeout(timer);
+      return { id, html: renderToString(resolvedEl) };
+    },
+    (err) => {
+      if (timer) clearTimeout(timer);
+      if (_isDev) console.warn("[SibuJS SSR] ssrSuspense rejected:", err);
+      return { id, html: fallbackHtml };
+    }
+  );
+  promise.catch(noop);
   return { element: wrapper, promise };
 }
 var SAFE_SUSPENSE_ID = /^[A-Za-z0-9_-]+$/;
@@ -465,14 +483,27 @@ var SSR_DATA_ATTR = "__SIBU_SSR_DATA__";
 function escapeScriptJson(json) {
   return json.replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/&/g, "\\u0026").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
 }
-function serializeState(state, nonce) {
-  const json = escapeScriptJson(JSON.stringify(state));
+var DEFAULT_MAX_SSR_BYTES = 1024 * 1024;
+function serializeState(state, nonce, options) {
+  const rawJson = JSON.stringify(state);
+  const maxBytes = options?.maxBytes ?? DEFAULT_MAX_SSR_BYTES;
+  const byteLen = typeof TextEncoder !== "undefined" ? new TextEncoder().encode(rawJson).byteLength : Buffer.byteLength(rawJson, "utf8");
+  if (byteLen > maxBytes) {
+    throw new Error(`[SibuJS SSR] serializeState: payload (${byteLen} bytes) exceeds maxBytes (${maxBytes})`);
+  }
+  const json = escapeScriptJson(rawJson);
   const nonceAttr = nonce ? ` nonce="${escapeAttr(nonce)}"` : "";
   return `<script${nonceAttr}>window.${SSR_DATA_ATTR}=${json}</script>`;
 }
 function deserializeState(validate) {
   if (typeof window === "undefined") return void 0;
-  const raw = window[SSR_DATA_ATTR];
+  if (_isDev && !validate) {
+    console.warn(
+      "[SibuJS SSR] deserializeState() called without a validate guard \u2014 tampered SSR payloads will not be detected."
+    );
+  }
+  const w = window;
+  const raw = w[SSR_DATA_ATTR];
   if (raw === void 0) return void 0;
   if (validate && !validate(raw)) return void 0;
   return raw;

package/dist/{chunk-F3FA4F32.js → chunk-KLRMB5ZS.js}

@@ -1,19 +1,22 @@
 import {
-  bindAttribute,
+  bindAttribute
+} from "./chunk-DFPFITST.js";
+import {
   registerDisposer
-} from "./chunk-PTQJDMRT.js";
+} from "./chunk-2UPRY23K.js";
 import {
   isUrlAttribute,
   sanitizeCSSValue,
+  sanitizeSrcset,
   sanitizeUrl
-} from "./chunk-CMBFNA7L.js";
+} from "./chunk-UCS6AMJ7.js";
 import {
   track
-} from "./chunk-ZD6OAMTH.js";
+} from "./chunk-VLPPXTYG.js";
 import {
   devWarn,
   isDev
-} from "./chunk-5X6PP2UK.js";
+} from "./chunk-LMLD24FC.js";
 
 // src/reactivity/bindChildNode.ts
 var _isDev = isDev();
@@ -43,24 +46,29 @@ function bindChildNode(placeholder, getter) {
     let newNodes;
     if (Array.isArray(result)) {
       newNodes = [];
+      const seen = /* @__PURE__ */ new Set();
       for (let i = 0; i < result.length; i++) {
         const item = result[i];
         if (item == null || typeof item === "boolean") continue;
-        newNodes.push(item instanceof Node ? item : document.createTextNode(String(item)));
+        const node = item instanceof Node ? item : document.createTextNode(String(item));
+        if (seen.has(node)) {
+          if (_isDev)
+            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];
     }
-    const reused = lastNodes.length > 0 && newNodes.length > 0 ? /* @__PURE__ */ new Set() : void 0;
-    if (reused) {
+    let reused;
+    if (lastNodes.length > 0 && newNodes.length > 0) {
+      const lastSet = new Set(lastNodes);
+      reused = /* @__PURE__ */ new Set();
       for (let i = 0; i < newNodes.length; i++) {
-        for (let j = 0; j < lastNodes.length; j++) {
-          if (newNodes[i] === lastNodes[j]) {
-            reused.add(newNodes[i]);
-            break;
-          }
-        }
+        if (lastSet.has(newNodes[i])) reused.add(newNodes[i]);
       }
     }
     for (let i = 0; i < lastNodes.length; i++) {
@@ -86,6 +94,30 @@ function bindChildNode(placeholder, getter) {
 
 // src/core/rendering/tagFactory.ts
 var SVG_NS = "http://www.w3.org/2000/svg";
+var _isDev2 = isDev();
+var BLOCKED_TAGS = /* @__PURE__ */ new Set(["script", "iframe", "object", "embed", "frame", "frameset"]);
+function validateTagName(tag) {
+  const lower = tag.toLowerCase();
+  if (BLOCKED_TAGS.has(lower)) {
+    throw new Error(`tagFactory: refusing to create <${tag}> \u2014 tag is blocked for security reasons.`);
+  }
+}
+var CLOBBER_RISKY_IDS = /* @__PURE__ */ new Set([
+  "config",
+  "location",
+  "history",
+  "document",
+  "window",
+  "navigator",
+  "name",
+  "top",
+  "parent",
+  "self",
+  "frames"
+]);
+function setProp(el, key, val) {
+  el[key] = val;
+}
 var kebabCache = /* @__PURE__ */ new Map();
 function toKebab(prop) {
   let cached = kebabCache.get(prop);
@@ -210,79 +242,103 @@ function appendChildren(el, nodes) {
     }
   }
 }
-var tagFactory = (tag, ns) => (first, second) => {
-  const el = ns ? document.createElementNS(ns, tag) : document.createElement(tag);
-  if (first === void 0) return el;
-  if (typeof first === "string") {
-    if (second !== void 0) {
-      el.setAttribute("class", first);
-      appendChildren(el, second);
+var tagFactory = (tag, ns) => {
+  return (first, second) => {
+    validateTagName(tag);
+    const el = ns ? document.createElementNS(ns, tag) : document.createElement(tag);
+    if (first === void 0) return el;
+    if (typeof first === "string") {
+      if (second !== void 0) {
+        el.setAttribute("class", first);
+        appendChildren(el, second);
+        return el;
+      }
+      el.textContent = first;
       return el;
     }
-    el.textContent = first;
-    return el;
-  }
-  if (typeof first === "number") {
-    el.textContent = String(first);
-    return el;
-  }
-  if (Array.isArray(first) || first instanceof Node || typeof first === "function") {
-    appendChildren(el, first);
-    return el;
-  }
-  const props = first;
-  const pClass = props.class;
-  if (pClass != null) applyClass(el, pClass);
-  const pId = props.id;
-  if (pId != null) el.id = pId;
-  const pNodes = second !== void 0 ? second : props.nodes;
-  if (pNodes != null) appendChildren(el, pNodes);
-  const pOn = props.on;
-  if (pOn) {
-    for (const ev in pOn) {
-      el.addEventListener(ev, pOn[ev]);
+    if (typeof first === "number") {
+      el.textContent = String(first);
+      return el;
     }
-  }
-  const pStyle = props.style;
-  if (pStyle != null) applyStyle(el, pStyle);
-  const pRef = props.ref;
-  if (pRef) pRef.current = el;
-  for (const key in props) {
-    switch (key) {
-      case "class":
-      case "id":
-      case "nodes":
-      case "on":
-      case "style":
-      case "ref":
-      case "onElement":
-        continue;
-      // already handled above / below
-      default: {
-        const value = props[key];
-        if (value == null) continue;
-        if (key[0] === "o" && key[1] === "n") continue;
-        if (typeof value === "function") {
-          registerDisposer(el, bindAttribute(el, key, value));
-        } else if (typeof value === "boolean") {
-          if (key in el && (key === "checked" || key === "disabled" || key === "selected")) {
-            el[key] = value;
-          } else if (value) {
-            el.setAttribute(key, "");
+    if (Array.isArray(first) || first instanceof Node || typeof first === "function") {
+      appendChildren(el, first);
+      return el;
+    }
+    const props = first;
+    const pClass = props.class;
+    if (pClass != null) applyClass(el, pClass);
+    const pId = props.id;
+    if (pId != null) {
+      if (_isDev2 && typeof pId === "string" && CLOBBER_RISKY_IDS.has(pId.toLowerCase())) {
+        devWarn(
+          `tagFactory: element id="${pId}" matches a common global and may cause DOM clobbering. Avoid setting ids from untrusted input.`
+        );
+      }
+      el.id = pId;
+    }
+    const pNodes = second !== void 0 ? second : props.nodes;
+    if (pNodes != null) appendChildren(el, pNodes);
+    const pOn = props.on;
+    if (pOn) {
+      for (const ev in pOn) {
+        const handler = pOn[ev];
+        if (typeof handler === "function") {
+          el.addEventListener(ev, handler);
+        } else if (_isDev2) {
+          devWarn(
+            `tagFactory: on.${ev} handler is not a function (got ${typeof handler}). Event listener was not attached.`
+          );
+        }
+      }
+    }
+    const pStyle = props.style;
+    if (pStyle != null) applyStyle(el, pStyle);
+    const pRef = props.ref;
+    if (pRef) pRef.current = el;
+    for (const key in props) {
+      switch (key) {
+        case "class":
+        case "id":
+        case "nodes":
+        case "on":
+        case "style":
+        case "ref":
+        case "onElement":
+          continue;
+        // already handled above / below
+        default: {
+          const value = props[key];
+          if (value == null) continue;
+          const lkey = key.toLowerCase();
+          if (lkey[0] === "o" && lkey[1] === "n") continue;
+          if (typeof value === "function") {
+            registerDisposer(el, bindAttribute(el, key, value));
+          } else if (typeof value === "boolean") {
+            if (key in el && (key === "checked" || key === "disabled" || key === "selected")) {
+              setProp(el, key, value);
+            } else if (value) {
+              el.setAttribute(key, "");
+            } else {
+              el.removeAttribute(key);
+            }
           } else {
-            el.removeAttribute(key);
+            const str = String(value);
+            if (lkey === "srcset") {
+              el.setAttribute(key, sanitizeSrcset(str));
+            } else if (isUrlAttribute(lkey)) {
+              el.setAttribute(key, sanitizeUrl(str));
+            } else {
+              el.setAttribute(key, str);
+            }
           }
-        } else {
-          const str = String(value);
-          el.setAttribute(key, isUrlAttribute(key) ? sanitizeUrl(str) : str);
         }
       }
     }
-  }
-  if (props.onElement && typeof props.onElement === "function") {
-    props.onElement(el);
-  }
-  return el;
+    if (props.onElement && typeof props.onElement === "function") {
+      props.onElement(el);
+    }
+    return el;
+  };
 };
 
 export {

package/dist/{chunk-5X6PP2UK.js → chunk-LMLD24FC.js}

@@ -11,12 +11,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}`);
   }
 }
 

package/dist/{chunk-M4NLBH4I.js → chunk-LYTCUZ7H.js}

@@ -1,6 +1,6 @@
 import {
   renderToString
-} from "./chunk-3X2YG6YM.js";
+} from "./chunk-JYD2PWXH.js";
 
 // src/plugins/modular.ts
 function createModuleRegistry() {
@@ -476,7 +476,8 @@ function extractRangeTarget(range) {
 function preloadCritical(resources) {
   if (typeof document === "undefined") return;
   for (const resource of resources) {
-    const existing = document.querySelector(`link[rel="preload"][href="${resource.href}"]`);
+    const safeHref = typeof CSS !== "undefined" && typeof CSS.escape === "function" ? CSS.escape(resource.href) : resource.href.replace(/["\\]/g, "\\$&");
+    const existing = document.querySelector(`link[rel="preload"][href="${safeHref}"]`);
     if (existing) continue;
     const link = document.createElement("link");
     link.rel = "preload";