sibujs 1.2.0 → 1.4.0

package/dist/chunk-3X2YG6YM.js

@@ -0,0 +1,505 @@
+import {
+  sanitizeUrl
+} from "./chunk-CMBFNA7L.js";
+import {
+  isDev
+} from "./chunk-5X6PP2UK.js";
+
+// src/platform/ssr.ts
+var _isDev = isDev();
+var SAFE_ATTR_NAME = /^[A-Za-z_:][-A-Za-z0-9_.:]*$/;
+function isSafeAttrName(name) {
+  return SAFE_ATTR_NAME.test(name);
+}
+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 URL_ATTRS = /* @__PURE__ */ new Set([
+  "href",
+  "src",
+  "action",
+  "formaction",
+  "cite",
+  "poster",
+  "background",
+  "srcset",
+  "ping",
+  "manifest",
+  "data",
+  "xlink:href"
+]);
+function ssrErrorComment(err) {
+  if (_isDev) {
+    const msg = escapeHtml(err instanceof Error ? err.message : String(err));
+    return `<!--SSR error: ${safeCommentText(msg)}-->`;
+  }
+  return "<!--SSR error-->";
+}
+function safeCommentText(text) {
+  return text.replace(/-->/g, "--&gt;").replace(/--!>/g, "--!&gt;").replace(/<!--/g, "&lt;!--").replace(/--$/g, "--&#45;");
+}
+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) => {
+      try {
+        return renderToString(child);
+      } catch (err) {
+        return ssrErrorComment(err);
+      }
+    }).join("");
+  }
+  if (element.nodeType === 3) {
+    return escapeHtml(element.textContent || "");
+  }
+  if (element.nodeType === 8) {
+    return `<!--${safeCommentText(element.textContent || "")}-->`;
+  }
+  if (!(element instanceof HTMLElement)) {
+    return escapeHtml(element.textContent || "");
+  }
+  const tag = element.tagName.toLowerCase();
+  if (tag === "script" || tag === "style") {
+    return _isDev ? `<!--ssr:${tag}-stripped-->` : "";
+  }
+  if (!/^[a-z][a-z0-9-]*$/i.test(tag)) {
+    return _isDev ? "<!--ssr:invalid-tag-->" : "";
+  }
+  let html = `<${tag}`;
+  for (const attr of Array.from(element.attributes)) {
+    const rawName = attr.name;
+    if (!isSafeAttrName(rawName)) continue;
+    if (isEventHandlerAttr(rawName)) continue;
+    const lowerName = rawName.toLowerCase();
+    let value = attr.value;
+    if (URL_ATTRS.has(lowerName)) {
+      value = sanitizeUrl(value);
+      if (!value) continue;
+    }
+    html += ` ${rawName}="${escapeAttr(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)) {
+    try {
+      html += renderToString(child);
+    } catch (err) {
+      html += ssrErrorComment(err);
+    }
+  }
+  html += `</${tag}>`;
+  return html;
+}
+function hydrate(component, container, options = {}) {
+  const clientTree = component();
+  if (options.diagnostics) {
+    const mismatches = [];
+    collectMismatches(container.firstElementChild, clientTree, "", mismatches);
+    if (mismatches.length > 0) {
+      const first = mismatches[0];
+      if (options.onMismatch) {
+        options.onMismatch(first);
+      } else if (_isDev) {
+        console.warn(
+          `[Sibu hydration] ${first.message}
+  at ${first.path}
+  server: ${first.serverValue}
+  client: ${first.clientValue}`
+        );
+      }
+    }
+  }
+  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 collectMismatches(serverNode, clientNode, path, out, max = 5) {
+  if (out.length >= max) return;
+  const nodePath = path || clientNode?.tagName?.toLowerCase() || "(root)";
+  if (!serverNode && clientNode) {
+    out.push({
+      kind: "child-count",
+      path: nodePath,
+      serverValue: "(missing)",
+      clientValue: clientNode.tagName.toLowerCase(),
+      message: "Client rendered a node that the server did not emit."
+    });
+    return;
+  }
+  if (serverNode && !clientNode) {
+    out.push({
+      kind: "child-count",
+      path: nodePath,
+      serverValue: serverNode.tagName.toLowerCase(),
+      clientValue: "(missing)",
+      message: "Server rendered a node that the client did not produce."
+    });
+    return;
+  }
+  if (!serverNode || !clientNode) return;
+  if (serverNode.tagName !== clientNode.tagName) {
+    out.push({
+      kind: "tag",
+      path: nodePath,
+      serverValue: serverNode.tagName.toLowerCase(),
+      clientValue: clientNode.tagName.toLowerCase(),
+      message: "Element tag mismatch \u2014 server and client disagree on the element type."
+    });
+    return;
+  }
+  const skipAttrs = /* @__PURE__ */ new Set(["data-sibu-ssr", "data-sibu-hydrated", "data-sibu-island"]);
+  const serverAttrs = /* @__PURE__ */ new Map();
+  for (const a of Array.from(serverNode.attributes)) {
+    if (!skipAttrs.has(a.name)) serverAttrs.set(a.name, a.value);
+  }
+  const clientAttrs = /* @__PURE__ */ new Map();
+  for (const a of Array.from(clientNode.attributes)) {
+    if (!skipAttrs.has(a.name)) clientAttrs.set(a.name, a.value);
+  }
+  for (const [name, value] of serverAttrs) {
+    if (out.length >= max) return;
+    if (!clientAttrs.has(name)) {
+      out.push({
+        kind: "attribute",
+        path: `${nodePath}[${name}]`,
+        serverValue: value,
+        clientValue: "(missing)",
+        message: `Attribute "${name}" present on server but missing on client.`
+      });
+    } else if (clientAttrs.get(name) !== value) {
+      out.push({
+        kind: "attribute",
+        path: `${nodePath}[${name}]`,
+        serverValue: value,
+        clientValue: clientAttrs.get(name) ?? "",
+        message: `Attribute "${name}" differs between server and client.`
+      });
+    }
+  }
+  for (const [name, value] of clientAttrs) {
+    if (out.length >= max) return;
+    if (!serverAttrs.has(name)) {
+      out.push({
+        kind: "attribute",
+        path: `${nodePath}[${name}]`,
+        serverValue: "(missing)",
+        clientValue: value,
+        message: `Attribute "${name}" present on client but missing on server.`
+      });
+    }
+  }
+  const serverChildren = Array.from(serverNode.children);
+  const clientChildren = Array.from(clientNode.children);
+  const max2 = Math.max(serverChildren.length, clientChildren.length);
+  for (let i = 0; i < max2; i++) {
+    if (out.length >= max) return;
+    const childPath = `${nodePath} > ${clientChildren[i]?.tagName?.toLowerCase() ?? serverChildren[i]?.tagName?.toLowerCase() ?? "?"}:nth-child(${i + 1})`;
+    collectMismatches(serverChildren[i] ?? null, clientChildren[i] ?? null, childPath, out, max);
+  }
+}
+function trustHTML(html) {
+  return html;
+}
+function buildAttrString(attrs, { allowEventHandlers = false } = {}) {
+  if (!attrs) return "";
+  const out = [];
+  for (const rawKey of Object.keys(attrs)) {
+    if (!Object.hasOwn(attrs, rawKey)) continue;
+    if (!isSafeAttrName(rawKey)) continue;
+    if (!allowEventHandlers && isEventHandlerAttr(rawKey)) continue;
+    const lowerKey = rawKey.toLowerCase();
+    let value = String(attrs[rawKey]);
+    if (URL_ATTRS.has(lowerKey)) {
+      value = sanitizeUrl(value);
+      if (!value) continue;
+    }
+    out.push(`${rawKey}="${escapeAttr(value)}"`);
+  }
+  return out.join(" ");
+}
+function isDangerousMetaRefresh(metaProps) {
+  const httpEquiv = metaProps["http-equiv"];
+  if (typeof httpEquiv !== "string") return false;
+  if (httpEquiv.toLowerCase() !== "refresh") return false;
+  const content = metaProps.content;
+  if (typeof content !== "string") return false;
+  const normalized = content.replace(/[\x00-\x20\x7f-\x9f]+/g, "").toLowerCase();
+  return normalized.includes("url=javascript:") || normalized.includes("url=data:") || normalized.includes("url=vbscript:") || normalized.includes("url=blob:");
+}
+function renderToDocument(component, options = {}) {
+  let content;
+  try {
+    content = renderToString(component());
+  } catch (err) {
+    content = ssrErrorComment(err);
+  }
+  const metaTags = (options.meta || []).map((attrs) => {
+    if (isDangerousMetaRefresh(attrs)) return "";
+    const pairs = buildAttrString(attrs);
+    return pairs ? `<meta ${pairs} />` : "";
+  }).filter(Boolean).join("\n    ");
+  const linkTags = (options.links || []).map((attrs) => {
+    const pairs = buildAttrString(attrs);
+    return pairs ? `<link ${pairs} />` : "";
+  }).filter(Boolean).join("\n    ");
+  const scriptTags = (options.scripts || []).map((src) => {
+    const safe = sanitizeUrl(String(src));
+    if (!safe) return "";
+    return `<script src="${escapeAttr(safe)}"></script>`;
+  }).filter(Boolean).join("\n    ");
+  const bodyAttrPairs = buildAttrString(options.bodyAttrs);
+  const bodyAttrs = bodyAttrPairs ? ` ${bodyAttrPairs}` : "";
+  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)) {
+      try {
+        yield* renderToStream(child);
+      } catch (err) {
+        yield ssrErrorComment(err);
+      }
+    }
+    return;
+  }
+  if (element.nodeType === 3) {
+    yield escapeHtml(element.textContent || "");
+    return;
+  }
+  if (element.nodeType === 8) {
+    yield `<!--${safeCommentText(element.textContent || "")}-->`;
+    return;
+  }
+  if (!(element instanceof HTMLElement)) {
+    yield escapeHtml(element.textContent || "");
+    return;
+  }
+  const tag = element.tagName.toLowerCase();
+  if (tag === "script" || tag === "style") {
+    if (_isDev) yield `<!--ssr:${tag}-stripped-->`;
+    return;
+  }
+  if (!/^[a-z][a-z0-9-]*$/i.test(tag)) {
+    if (_isDev) yield "<!--ssr:invalid-tag-->";
+    return;
+  }
+  let openTag = `<${tag}`;
+  for (const attr of Array.from(element.attributes)) {
+    const rawName = attr.name;
+    if (!isSafeAttrName(rawName)) continue;
+    if (isEventHandlerAttr(rawName)) continue;
+    const lowerName = rawName.toLowerCase();
+    let value = attr.value;
+    if (URL_ATTRS.has(lowerName)) {
+      value = sanitizeUrl(value);
+      if (!value) continue;
+    }
+    openTag += ` ${rawName}="${escapeAttr(value)}"`;
+  }
+  if (VOID_ELEMENTS.has(tag)) {
+    yield `${openTag} />`;
+    return;
+  }
+  yield `${openTag}>`;
+  for (const child of Array.from(element.childNodes)) {
+    try {
+      yield* renderToStream(child);
+    } catch (err) {
+      yield ssrErrorComment(err);
+    }
+  }
+  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") ?? "";
+    if (!Object.hasOwn(islands, id)) continue;
+    const factory = islands[id];
+    if (typeof factory !== "function") 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") ?? "";
+    if (!Object.hasOwn(islands, id)) continue;
+    const factory = islands[id];
+    if (typeof factory !== "function") 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 };
+}
+var SAFE_SUSPENSE_ID = /^[A-Za-z0-9_-]+$/;
+function suspenseSwapScript(id, nonce) {
+  if (!SAFE_SUSPENSE_ID.test(id)) {
+    throw new Error(
+      `[SibuJS SSR] suspenseSwapScript: id must match [A-Za-z0-9_-]+ (got: ${JSON.stringify(id.slice(0, 32))})`
+    );
+  }
+  const nonceAttr = nonce ? ` nonce="${escapeAttr(nonce)}"` : "";
+  return `<script${nonceAttr}>(function(){var t=document.getElementById("sibu-resolved-${id}");var f=document.querySelector('[data-sibu-suspense-id="${id}"]');if(t&&f){while(t.firstChild)f.appendChild(t.firstChild);t.remove();f.removeAttribute("data-sibu-suspense-id");}})()</script>`;
+}
+async function* renderToSuspenseStream(element, pendingBoundaries = [], options) {
+  yield* renderToStream(element);
+  if (pendingBoundaries.length > 0) {
+    const resolved = await Promise.all(pendingBoundaries);
+    for (const { id, html } of resolved) {
+      if (!SAFE_SUSPENSE_ID.test(id)) continue;
+      yield `<div hidden id="sibu-resolved-${id}">${html}</div>`;
+      yield suspenseSwapScript(id, options?.nonce);
+    }
+  }
+}
+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));
+  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 (raw === void 0) return void 0;
+  if (validate && !validate(raw)) return void 0;
+  return raw;
+}
+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, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+export {
+  renderToString,
+  hydrate,
+  trustHTML,
+  renderToDocument,
+  renderToStream,
+  collectStream,
+  renderToReadableStream,
+  island,
+  hydrateIslands,
+  hydrateProgressively,
+  resetSSRState,
+  ssrSuspense,
+  suspenseSwapScript,
+  renderToSuspenseStream,
+  escapeScriptJson,
+  serializeState,
+  deserializeState
+};

package/dist/chunk-5X6PP2UK.js

@@ -0,0 +1,28 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/core/dev.ts
+function isDev() {
+  return typeof globalThis.__SIBU_DEV__ !== "undefined" ? !!globalThis.__SIBU_DEV__ : typeof __SIBU_DEV__ !== "undefined" ? __SIBU_DEV__ : typeof process !== "undefined" && process.env?.NODE_ENV !== "production";
+}
+var _isDev = isDev();
+function devAssert(condition, message) {
+  if (_isDev && !condition) {
+    throw new Error(`[Sibu] ${message}`);
+  }
+}
+function devWarn(message) {
+  if (_isDev) {
+    console.warn(`[Sibu] ${message}`);
+  }
+}
+
+export {
+  __export,
+  isDev,
+  devAssert,
+  devWarn
+};