sibujs 1.0.0-beta.1

package/dist/chunk-V6F7KUWD.js

@@ -0,0 +1,270 @@
+import {
+  bindAttribute,
+  sanitizeAttribute
+} from "./chunk-5NCPAWBE.js";
+import {
+  devWarn
+} from "./chunk-MJNB47HB.js";
+import {
+  track
+} from "./chunk-GBEYQRO2.js";
+
+// src/core/rendering/dispose.ts
+var elementDisposers = /* @__PURE__ */ new WeakMap();
+var activeBindingCount = 0;
+function sbRegisterDisposer(node, teardown) {
+  let disposers = elementDisposers.get(node);
+  if (!disposers) {
+    disposers = [];
+    elementDisposers.set(node, disposers);
+  }
+  disposers.push(teardown);
+  activeBindingCount++;
+}
+function sbDispose(node) {
+  const children = node.childNodes;
+  for (const child of children) {
+    sbDispose(child);
+  }
+  const disposers = elementDisposers.get(node);
+  if (disposers) {
+    activeBindingCount -= disposers.length;
+    for (const d of disposers) d();
+    elementDisposers.delete(node);
+  }
+}
+function checkLeaks(warnThreshold = 0) {
+  if (activeBindingCount > warnThreshold) {
+    devWarn(
+      `checkLeaks: ${activeBindingCount} active DOM bindings detected. Expected \u2264${warnThreshold}. This may indicate a component was removed from the DOM without calling sbDispose().`
+    );
+  }
+  return activeBindingCount;
+}
+
+// src/reactivity/bindChildNode.ts
+function bindChildNode(placeholder, getter) {
+  let lastNodes = [];
+  function commit() {
+    let result;
+    try {
+      result = getter();
+    } catch {
+      return;
+    }
+    for (const node of lastNodes) {
+      node.parentNode?.removeChild(node);
+    }
+    lastNodes = [];
+    if (result == null) return;
+    const parent = placeholder.parentNode;
+    if (!parent) return;
+    const anchor = placeholder.nextSibling;
+    const newNodes = [];
+    const insertItem = (item) => {
+      const node = item instanceof Node ? item : document.createTextNode(String(item));
+      parent.insertBefore(node, anchor);
+      newNodes.push(node);
+    };
+    if (Array.isArray(result)) {
+      for (const item of result) insertItem(item);
+    } else {
+      insertItem(result);
+    }
+    lastNodes = newNodes;
+  }
+  return track(commit);
+}
+
+// src/core/rendering/tagFactory.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+var kebabCache = /* @__PURE__ */ new Map();
+function toKebab(prop) {
+  let cached = kebabCache.get(prop);
+  if (cached !== void 0) return cached;
+  cached = prop.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+  kebabCache.set(prop, cached);
+  return cached;
+}
+function applyStyle(el, style) {
+  if (!style) return;
+  if (typeof style === "function") {
+    const teardown = track(() => {
+      el.setAttribute("style", style());
+    });
+    sbRegisterDisposer(el, teardown);
+    return;
+  }
+  if (typeof style === "string") {
+    el.setAttribute("style", style);
+    return;
+  }
+  const htmlEl = el;
+  for (const prop in style) {
+    const val = style[prop];
+    const name = toKebab(prop);
+    if (typeof val === "function") {
+      const getter = val;
+      const teardown = track(() => {
+        htmlEl.style.setProperty(name, String(getter()));
+      });
+      sbRegisterDisposer(el, teardown);
+    } else {
+      htmlEl.style.setProperty(name, String(val));
+    }
+  }
+}
+function applyClass(el, cls) {
+  if (cls == null) return;
+  if (typeof cls === "string") {
+    el.setAttribute("class", cls);
+    return;
+  }
+  if (typeof cls === "function") {
+    const getter = cls;
+    const teardown = track(() => {
+      el.setAttribute("class", getter());
+    });
+    sbRegisterDisposer(el, teardown);
+    return;
+  }
+  if (typeof cls === "object") {
+    const obj = cls;
+    let hasReactive = false;
+    for (const name in obj) {
+      if (typeof obj[name] === "function") {
+        hasReactive = true;
+        break;
+      }
+    }
+    if (hasReactive) {
+      const update = () => {
+        let result = "";
+        for (const name in obj) {
+          const val = obj[name];
+          const active = typeof val === "function" ? val() : val;
+          if (active) result = result ? `${result} ${name}` : name;
+        }
+        el.setAttribute("class", result);
+      };
+      const teardown = track(update);
+      sbRegisterDisposer(el, teardown);
+    } else {
+      let result = "";
+      for (const name in obj) {
+        if (obj[name]) result = result ? `${result} ${name}` : name;
+      }
+      el.setAttribute("class", result);
+    }
+  }
+}
+function renderChild(child) {
+  if (child == null) {
+    return document.createTextNode("");
+  }
+  if (child instanceof Node) {
+    return child;
+  }
+  return document.createTextNode(String(child));
+}
+function appendOneChild(el, child) {
+  if (typeof child === "function") {
+    const placeholder = document.createComment("bind:child");
+    el.appendChild(placeholder);
+    const teardown = bindChildNode(placeholder, child);
+    sbRegisterDisposer(el, teardown);
+  } else {
+    el.appendChild(renderChild(child));
+  }
+}
+function appendChildren(el, nodes) {
+  if (Array.isArray(nodes)) {
+    for (let i = 0; i < nodes.length; i++) {
+      const c = nodes[i];
+      if (Array.isArray(c)) {
+        for (let j = 0; j < c.length; j++) {
+          appendOneChild(el, c[j]);
+        }
+      } else {
+        appendOneChild(el, c);
+      }
+    }
+  } else {
+    appendOneChild(el, nodes);
+  }
+}
+function isTagProps(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value) && !(value instanceof Node);
+}
+var tagFactory = (tag, ns) => (
+  // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: complex by nature
+  (first, second) => {
+    let props;
+    if (first === void 0) {
+      props = {};
+    } else if (isTagProps(first)) {
+      props = first;
+    } else if (second !== void 0) {
+      props = { class: first, nodes: second };
+    } else {
+      props = { nodes: first };
+    }
+    const el = ns ? document.createElementNS(ns, tag) : document.createElement(tag);
+    for (const key in props) {
+      const value = props[key];
+      if (value == null) continue;
+      switch (key) {
+        case "id":
+          el.id = value;
+          break;
+        case "class":
+          applyClass(el, value);
+          break;
+        case "style":
+          applyStyle(el, value);
+          break;
+        case "ref":
+          if (value && typeof value === "object" && "current" in value) {
+            value.current = el;
+          }
+          break;
+        case "on": {
+          const handlers = value;
+          const eventNames = [];
+          for (const ev in handlers) {
+            el.addEventListener(ev, handlers[ev]);
+            eventNames.push(ev);
+          }
+          if (eventNames.length) {
+            el.__sibu_events__ = eventNames;
+          }
+          break;
+        }
+        case "nodes":
+          appendChildren(el, value);
+          break;
+        default:
+          if (key.toLowerCase().startsWith("on")) break;
+          if (typeof value === "function") {
+            const teardown = bindAttribute(el, key, value);
+            sbRegisterDisposer(el, teardown);
+          } else if (typeof value === "boolean") {
+            if (value) el.setAttribute(key, "");
+            else el.removeAttribute(key);
+          } else {
+            el.setAttribute(key, sanitizeAttribute(key, String(value)));
+          }
+      }
+    }
+    return el;
+  }
+);
+
+export {
+  bindChildNode,
+  sbRegisterDisposer,
+  sbDispose,
+  checkLeaks,
+  SVG_NS,
+  tagFactory
+};

package/dist/chunk-VCZLXRMR.js

@@ -0,0 +1,254 @@
+// src/platform/ssr.ts
+var VOID_ELEMENTS = /* @__PURE__ */ new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
+function renderToString(element) {
+  if (element instanceof DocumentFragment) {
+    return Array.from(element.childNodes).map((child) => renderToString(child)).join("");
+  }
+  if (element.nodeType === 3) {
+    return escapeHtml(element.textContent || "");
+  }
+  if (element.nodeType === 8) {
+    const content = (element.textContent || "").replace(/-->/g, "-->");
+    return `<!--${content}-->`;
+  }
+  if (!(element instanceof HTMLElement)) {
+    return element.textContent || "";
+  }
+  const tag = element.tagName.toLowerCase();
+  let html = `<${tag}`;
+  for (const attr of Array.from(element.attributes)) {
+    html += ` ${attr.name}="${escapeAttr(attr.value)}"`;
+  }
+  if (element.dataset && !element.dataset.sibuHydrate) {
+    html += ` data-sibu-ssr="true"`;
+  }
+  if (VOID_ELEMENTS.has(tag)) {
+    return `${html} />`;
+  }
+  html += ">";
+  for (const child of Array.from(element.childNodes)) {
+    html += renderToString(child);
+  }
+  html += `</${tag}>`;
+  return html;
+}
+function hydrate(component, container) {
+  const clientTree = component();
+  hydrateNode(container.firstElementChild, 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 renderToDocument(component, options = {}) {
+  const content = renderToString(component());
+  const metaTags = (options.meta || []).map(
+    (attrs) => `<meta ${Object.entries(attrs).map(([k, v]) => `${k}="${escapeAttr(v)}"`).join(" ")} />`
+  ).join("\n    ");
+  const linkTags = (options.links || []).map(
+    (attrs) => `<link ${Object.entries(attrs).map(([k, v]) => `${k}="${escapeAttr(v)}"`).join(" ")} />`
+  ).join("\n    ");
+  const scriptTags = (options.scripts || []).map((src) => `<script src="${escapeAttr(src)}"></script>`).join("\n    ");
+  const bodyAttrs = options.bodyAttrs ? " " + Object.entries(options.bodyAttrs).map(([k, v]) => `${k}="${escapeAttr(v)}"`).join(" ") : "";
+  return `<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    ${options.title ? `<title>${escapeHtml(options.title)}</title>` : ""}
+    ${metaTags}
+    ${linkTags}
+    ${options.headExtra || ""}
+  </head>
+  <body${bodyAttrs}>
+    <div id="app">${content}</div>
+    ${scriptTags}
+  </body>
+</html>`;
+}
+async function* renderToStream(element) {
+  if (element instanceof DocumentFragment) {
+    for (const child of Array.from(element.childNodes)) {
+      yield* renderToStream(child);
+    }
+    return;
+  }
+  if (element.nodeType === 3) {
+    yield escapeHtml(element.textContent || "");
+    return;
+  }
+  if (element.nodeType === 8) {
+    yield `<!--${element.textContent || ""}-->`;
+    return;
+  }
+  if (!(element instanceof HTMLElement)) {
+    yield element.textContent || "";
+    return;
+  }
+  const tag = element.tagName.toLowerCase();
+  let openTag = `<${tag}`;
+  for (const attr of Array.from(element.attributes)) {
+    openTag += ` ${attr.name}="${escapeAttr(attr.value)}"`;
+  }
+  if (VOID_ELEMENTS.has(tag)) {
+    yield `${openTag} />`;
+    return;
+  }
+  yield `${openTag}>`;
+  for (const child of Array.from(element.childNodes)) {
+    yield* renderToStream(child);
+  }
+  yield `</${tag}>`;
+}
+async function collectStream(stream) {
+  let result = "";
+  for await (const chunk of stream) {
+    result += chunk;
+  }
+  return result;
+}
+function renderToReadableStream(element) {
+  const generator = renderToStream(element);
+  return new ReadableStream({
+    async pull(controller) {
+      const { value, done } = await generator.next();
+      if (done) {
+        controller.close();
+      } else {
+        controller.enqueue(value);
+      }
+    },
+    cancel() {
+      generator.return(void 0);
+    }
+  });
+}
+function island(id, component) {
+  const el = component();
+  el.setAttribute("data-sibu-island", id);
+  return el;
+}
+function hydrateIslands(container, islands) {
+  const markers = container.querySelectorAll("[data-sibu-island]");
+  for (const marker of Array.from(markers)) {
+    const id = marker.getAttribute("data-sibu-island") ?? "";
+    const factory = islands[id];
+    if (!factory) continue;
+    const clientTree = factory();
+    hydrateNode(marker, clientTree);
+    marker.setAttribute("data-sibu-hydrated", "true");
+  }
+  container.setAttribute("data-sibu-hydrated", "partial");
+}
+function hydrateProgressively(container, islands, options) {
+  const markers = container.querySelectorAll("[data-sibu-island]");
+  const cleanups = [];
+  for (const marker of Array.from(markers)) {
+    const id = marker.getAttribute("data-sibu-island") ?? "";
+    const factory = islands[id];
+    if (!factory) continue;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            const clientTree = factory();
+            hydrateNode(marker, clientTree);
+            marker.setAttribute("data-sibu-hydrated", "true");
+            observer.disconnect();
+            break;
+          }
+        }
+      },
+      { rootMargin: "200px", ...options }
+    );
+    observer.observe(marker);
+    cleanups.push(() => observer.disconnect());
+  }
+  container.setAttribute("data-sibu-hydrated", "progressive");
+  return () => {
+    for (const cleanup of cleanups) cleanup();
+  };
+}
+var suspenseIdCounter = 0;
+function resetSSRState() {
+  suspenseIdCounter = 0;
+}
+function ssrSuspense(props) {
+  const id = `sibu-sus-${suspenseIdCounter++}`;
+  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)
+  }));
+  return { element: wrapper, promise };
+}
+function suspenseSwapScript(id) {
+  const safeId = id.replace(/\\/g, "\\\\").replace(/"/g, '\\"').replace(/</g, "\\u003c").replace(/>/g, "\\u003e");
+  return `<script>(function(){var t=document.getElementById("sibu-resolved-${safeId}");var f=document.querySelector('[data-sibu-suspense-id="${safeId}"]');if(t&&f){while(t.firstChild)f.appendChild(t.firstChild);t.remove();f.removeAttribute("data-sibu-suspense-id");}})()</script>`;
+}
+async function* renderToSuspenseStream(element, pendingBoundaries = []) {
+  yield* renderToStream(element);
+  if (pendingBoundaries.length > 0) {
+    const resolved = await Promise.all(pendingBoundaries);
+    for (const { id, html } of resolved) {
+      yield `<div hidden id="sibu-resolved-${id}">${html}</div>`;
+      yield suspenseSwapScript(id);
+    }
+  }
+}
+var SSR_DATA_ATTR = "__SIBU_SSR_DATA__";
+function serializeState(state) {
+  const json = JSON.stringify(state).replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/&/g, "\\u0026");
+  return `<script>window.${SSR_DATA_ATTR}=${json}</script>`;
+}
+function deserializeState() {
+  if (typeof window === "undefined") return void 0;
+  return window[SSR_DATA_ATTR];
+}
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function escapeAttr(str) {
+  return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+export {
+  renderToString,
+  hydrate,
+  renderToDocument,
+  renderToStream,
+  collectStream,
+  renderToReadableStream,
+  island,
+  hydrateIslands,
+  hydrateProgressively,
+  resetSSRState,
+  ssrSuspense,
+  suspenseSwapScript,
+  renderToSuspenseStream,
+  serializeState,
+  deserializeState
+};