@uniweb/runtime 1.1.20 → 1.2.1

package/dist/ssr.js

@@ -106,7 +106,7 @@ function assembleData(block, meta, entityData) {
     else if (entityData && entityData[key] !== void 0) data[key] = entityData[key];
     else data[key] = null;
   }
-  warnUndeclaredBlocks(block, declared);
+  warnUndeclaredBlocks(block, Object.keys(held).filter((key) => !Object.hasOwn(data, key)));
   block.parsedContent.data = data;
   return declared;
 }
@@ -121,17 +121,18 @@ function holdOneRecord(block, declared) {
   if (out) block.parsedContent.data = out;
 }
 const warnedBlocks = /* @__PURE__ */ new Set();
-function warnUndeclaredBlocks(block, declared) {
-  if (!block.website?.entityStore?.dev) return;
-  const keys = new Set(declared.map(([key]) => key));
-  for (const item of block.parsedContent?.sequence || []) {
-    const kind = item?.type === "dataBlock" ? "data block" : item?.type === "concept_block" ? "concept block" : null;
-    if (!kind || typeof item.tag !== "string" || keys.has(item.tag)) continue;
-    const memo = `${block.type}::${item.tag}`;
+function warnUndeclaredBlocks(block, leftOut) {
+  if (!leftOut.length || !block.website?.entityStore?.dev) return;
+  const sequence = block.parsedContent?.sequence || [];
+  for (const tag of leftOut) {
+    const memo = `${block.type}::${tag}`;
     if (warnedBlocks.has(memo)) continue;
+    const element = sequence.find((e) => (e?.type === "dataBlock" || e?.type === "concept_block") && e.tag === tag);
+    if (!element) continue;
     warnedBlocks.add(memo);
+    const kind = element.type === "dataBlock" ? "data block" : "concept block";
     console.warn(
-      `[uniweb] ${block.type}: the \`${item.tag}\` ${kind} is not in content.data — ${block.type} does not declare \`${item.tag}\` in its meta.js \`data:\`. It stays in content.sequence.`
+      `[uniweb] ${block.type}: the \`${tag}\` ${kind} is not in content.data — ${block.type} does not declare \`${tag}\` in its meta.js \`data:\`. It stays in content.sequence.`
     );
   }
 }
@@ -221,9 +222,12 @@ function siteUrl(url) {
 function withOpacity(color, opacity) {
   if (typeof color !== "string" || !color) return color;
   if (color.startsWith("#")) {
-    const r = parseInt(color.slice(1, 3), 16);
-    const g = parseInt(color.slice(3, 5), 16);
-    const b = parseInt(color.slice(5, 7), 16);
+    let hex = color.slice(1);
+    if (hex.length === 3 || hex.length === 4) hex = [...hex].map((c) => c + c).join("");
+    if (!/^[0-9a-f]{6}([0-9a-f]{2})?$/i.test(hex)) return color;
+    const r = parseInt(hex.slice(0, 2), 16);
+    const g = parseInt(hex.slice(2, 4), 16);
+    const b = parseInt(hex.slice(4, 6), 16);
     return `rgba(${r}, ${g}, ${b}, ${opacity})`;
   }
   if (color.startsWith("rgb")) {
@@ -232,6 +236,76 @@ function withOpacity(color, opacity) {
   }
   return color;
 }
+const h = React.createElement;
+const FILL = { position: "absolute", inset: 0 };
+function ColorLayer({ color }) {
+  if (!color) return null;
+  return h("div", { className: "background-color", style: { ...FILL, backgroundColor: color }, "aria-hidden": "true" });
+}
+function GradientLayer({ gradient }) {
+  if (!gradient) return null;
+  if (typeof gradient === "string") {
+    return h("div", { className: "background-gradient", style: { ...FILL, background: gradient }, "aria-hidden": "true" });
+  }
+  const start = gradient.start ?? "transparent";
+  const end = gradient.end ?? "transparent";
+  const startOpacity = gradient.startOpacity ?? 1;
+  const endOpacity = gradient.endOpacity ?? 1;
+  const startColor = startOpacity < 1 ? withOpacity(start, startOpacity) : start;
+  const endColor = endOpacity < 1 ? withOpacity(end, endOpacity) : end;
+  const background = `linear-gradient(${gradient.angle ?? 0}deg, ${startColor} ${gradient.startPosition ?? 0}%, ${endColor} ${gradient.endPosition ?? 100}%)`;
+  return h("div", { className: "background-gradient", style: { ...FILL, background }, "aria-hidden": "true" });
+}
+function ImageLayer({ image }) {
+  if (!image?.src) return null;
+  const style = {
+    ...FILL,
+    backgroundImage: `url(${siteUrl(image.src)})`,
+    backgroundPosition: image.position ?? "center",
+    backgroundSize: image.size ?? "cover",
+    backgroundRepeat: "no-repeat"
+  };
+  return h("div", { className: "background-image", style, "aria-hidden": "true" });
+}
+function VideoPoster({ video }) {
+  if (!video?.src || !video.poster) return null;
+  return h(ImageLayer, { image: { src: video.poster, size: "cover", position: "center" } });
+}
+function Overlay({ overlay }) {
+  if (!overlay?.enabled) return null;
+  const opacity = overlay.opacity ?? 0.5;
+  if (overlay.gradient) {
+    const g = overlay.gradient;
+    const background = `linear-gradient(${g.angle ?? 180}deg, ${g.start ?? "rgba(0,0,0,0.7)"} ${g.startPosition ?? 0}%, ${g.end ?? "rgba(0,0,0,0)"} ${g.endPosition ?? 100}%)`;
+    return h("div", {
+      className: "background-overlay background-overlay--gradient",
+      style: { ...FILL, background, opacity, pointerEvents: "none" },
+      "aria-hidden": "true"
+    });
+  }
+  const base = overlay.type === "light" ? "255, 255, 255" : "0, 0, 0";
+  return h("div", {
+    className: "background-overlay background-overlay--solid",
+    style: { ...FILL, backgroundColor: `rgba(${base}, ${opacity})`, pointerEvents: "none" },
+    "aria-hidden": "true"
+  });
+}
+function Background({ mode, color, gradient, image, video, overlay, className = "", Video = VideoPoster }) {
+  if (!mode) return null;
+  return h(
+    "div",
+    {
+      className: `background background--${mode} ${className}`.trim(),
+      style: { ...FILL, overflow: "hidden", zIndex: 0 },
+      "aria-hidden": "true"
+    },
+    mode === "color" ? h(ColorLayer, { color }) : null,
+    mode === "gradient" ? h(GradientLayer, { gradient }) : null,
+    mode === "image" ? h(ImageLayer, { image }) : null,
+    mode === "video" ? h(Video, { video }) : null,
+    h(Overlay, { overlay })
+  );
+}
 function default404Html(basePath = "") {
   const homeHref = basePath ? `${basePath}/` : "/";
   return `<div class="page-not-found" style="min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center"><h1 style="font-size:3rem;font-weight:bold;color:#1f2937;margin-bottom:1rem">404</h1><p style="color:#64748b;margin-bottom:2rem">Page not found</p><a href="${homeHref}" style="color:#3b82f6;text-decoration:underline">Go to homepage</a></div>`;
@@ -451,105 +525,7 @@ function getWrapperProps(block) {
 }
 function renderBackground(background) {
   if (!background?.mode) return null;
-  const containerStyle = {
-    position: "absolute",
-    inset: "0",
-    overflow: "hidden",
-    zIndex: 0
-  };
-  const children = [];
-  if (background.mode === "color" && background.color) {
-    children.push(
-      React.createElement("div", {
-        key: "bg-color",
-        className: "background-color",
-        style: { position: "absolute", inset: "0", backgroundColor: background.color },
-        "aria-hidden": "true"
-      })
-    );
-  }
-  if (background.mode === "gradient" && background.gradient) {
-    const g = background.gradient;
-    let bgValue;
-    if (typeof g === "string") {
-      bgValue = g;
-    } else {
-      const {
-        start = "transparent",
-        end = "transparent",
-        angle = 0,
-        startPosition = 0,
-        endPosition = 100,
-        startOpacity = 1,
-        endOpacity = 1
-      } = g;
-      const startColor = startOpacity < 1 ? withOpacity(start, startOpacity) : start;
-      const endColor = endOpacity < 1 ? withOpacity(end, endOpacity) : end;
-      bgValue = `linear-gradient(${angle}deg, ${startColor} ${startPosition}%, ${endColor} ${endPosition}%)`;
-    }
-    children.push(
-      React.createElement("div", {
-        key: "bg-gradient",
-        className: "background-gradient",
-        style: { position: "absolute", inset: "0", background: bgValue },
-        "aria-hidden": "true"
-      })
-    );
-  }
-  if (background.mode === "image" && background.image?.src) {
-    const img = background.image;
-    children.push(
-      React.createElement("div", {
-        key: "bg-image",
-        className: "background-image",
-        style: {
-          position: "absolute",
-          inset: "0",
-          backgroundImage: `url(${siteUrl(img.src)})`,
-          backgroundPosition: img.position || "center",
-          backgroundSize: img.size || "cover",
-          backgroundRepeat: "no-repeat"
-        },
-        "aria-hidden": "true"
-      })
-    );
-  }
-  if (background.overlay?.enabled) {
-    const ov = background.overlay;
-    let overlayStyle;
-    if (ov.gradient) {
-      const g = ov.gradient;
-      overlayStyle = {
-        position: "absolute",
-        inset: "0",
-        pointerEvents: "none",
-        background: `linear-gradient(${g.angle || 180}deg, ${g.start || "rgba(0,0,0,0.7)"} ${g.startPosition || 0}%, ${g.end || "rgba(0,0,0,0)"} ${g.endPosition || 100}%)`,
-        opacity: ov.opacity ?? 0.5
-      };
-    } else {
-      const baseColor = ov.type === "light" ? "255, 255, 255" : "0, 0, 0";
-      overlayStyle = {
-        position: "absolute",
-        inset: "0",
-        pointerEvents: "none",
-        backgroundColor: `rgba(${baseColor}, ${ov.opacity ?? 0.5})`
-      };
-    }
-    children.push(
-      React.createElement("div", {
-        key: "bg-overlay",
-        className: ov.gradient ? "background-overlay background-overlay--gradient" : "background-overlay background-overlay--solid",
-        style: overlayStyle,
-        "aria-hidden": "true"
-      })
-    );
-  }
-  if (children.length === 0) return null;
-  return React.createElement("div", {
-    className: `background background--${background.mode}`,
-    style: containerStyle,
-    "aria-hidden": "true"
-  }, ...children);
+  return React.createElement(Background, background);
 }
 function renderBlock(block, { as = "section", stickySelf = false } = {}) {
   const Component = block.initComponent();
@@ -562,10 +538,13 @@ function renderBlock(block, { as = "section", stickySelf = false } = {}) {
   const meta = getComponentMeta(block.type);
   const entityStore = block.website?.entityStore;
   let entityData = null;
+  let pending = false;
   if (entityStore) {
     const resolved = entityStore.resolve(block, meta);
     if (resolved.status === "ready") entityData = resolved.data;
+    pending = resolved.status === "pending";
   }
+  block.dataLoading = pending;
   const prepared = prepareProps(block, meta, entityData);
   const params = prepared.params;
   const content = { ...prepared.content, ...block.properties };
@@ -690,9 +669,7 @@ function initPrerender(content, foundation, extensionsOrOptions, maybeOptions) {
       )
     );
   };
-  uniweb.backgroundRenderer = function InlineBackground(background) {
-    return renderBackground(background);
-  };
+  uniweb.backgroundRenderer = Background;
   wireFoundationCapabilities(uniweb, foundation);
   ensureThemeCss(uniweb, foundation);
   const website = uniweb.activeWebsite;
@@ -822,37 +799,46 @@ ${options.sectionOverrideCSS}
       `<title>${escapeHtml(title)}</title>`
     );
   }
-  if (page.description) {
-    const metaDesc = `<meta name="description" content="${escapeHtml(page.description)}">`;
-    if (result.includes('<meta name="description"')) {
-      result = result.replace(/<meta name="description"[^>]*>/, metaDesc);
-    } else {
-      result = result.replace("</head>", `${metaDesc}
-</head>`);
-    }
-  }
-  const headMeta = page.getHeadMeta?.();
-  if (headMeta) {
-    const og = headMeta.og || {};
-    const keywords = Array.isArray(headMeta.keywords) ? headMeta.keywords.join(", ") : headMeta.keywords;
-    const tags = [];
-    if (keywords) tags.push(`<meta name="keywords" content="${escapeHtml(keywords)}">`);
-    if (headMeta.robots) tags.push(`<meta name="robots" content="${escapeHtml(headMeta.robots)}">`);
-    if (og.title) tags.push(`<meta property="og:title" content="${escapeHtml(og.title)}">`);
-    if (og.description) tags.push(`<meta property="og:description" content="${escapeHtml(og.description)}">`);
-    if (og.image) tags.push(`<meta property="og:image" content="${escapeHtml(og.image)}">`);
-    if (og.url) tags.push(`<meta property="og:url" content="${escapeHtml(og.url)}">`);
-    tags.push('<meta property="og:type" content="website">');
-    tags.push(`<meta name="twitter:card" content="${og.image ? "summary_large_image" : "summary"}">`);
-    if (og.title) tags.push(`<meta name="twitter:title" content="${escapeHtml(og.title)}">`);
-    if (og.description) tags.push(`<meta name="twitter:description" content="${escapeHtml(og.description)}">`);
-    if (og.image) tags.push(`<meta name="twitter:image" content="${escapeHtml(og.image)}">`);
-    if (headMeta.canonical) tags.push(`<link rel="canonical" href="${escapeHtml(headMeta.canonical)}">`);
-    if (tags.length) result = result.replace("</head>", `${tags.join("\n")}
-</head>`);
-  }
+  result = writeHeadMeta(result, page);
   return result;
 }
+function writeHeadMeta(html, page) {
+  const meta = typeof page?.getHeadMeta === "function" ? page.getHeadMeta() : { description: page?.description || null };
+  const end = html.indexOf("</head>");
+  if (!meta || end === -1) return html;
+  const og = meta.og || {};
+  const keywords = Array.isArray(meta.keywords) ? meta.keywords.join(", ") : meta.keywords;
+  const metaTags = [
+    ["name", "description", meta.description],
+    ["name", "keywords", keywords],
+    ["name", "robots", meta.robots],
+    ["property", "og:type", "website"],
+    ["property", "og:site_name", og.siteName],
+    ["property", "og:title", og.title],
+    ["property", "og:description", og.description],
+    ["property", "og:image", og.image],
+    ["property", "og:url", og.url],
+    ["name", "twitter:card", og.image ? "summary_large_image" : "summary"],
+    ["name", "twitter:site", meta.twitter?.site],
+    ["name", "twitter:title", og.title],
+    ["name", "twitter:description", og.description],
+    ["name", "twitter:image", og.image]
+  ];
+  let head = html.slice(0, end);
+  const written = [];
+  for (const [attr, key, value] of metaTags) {
+    head = head.replace(new RegExp(`<meta\\b[^>]*\\b(?:name|property)=["']${key}["'][^>]*>\\s*`, "gi"), "");
+    if (value) written.push(`<meta ${attr}="${key}" content="${escapeHtml(value)}">`);
+  }
+  head = head.replace(/<link\b[^>]*\brel=["']canonical["'][^>]*>\s*/gi, "");
+  if (meta.canonical) written.push(`<link rel="canonical" href="${escapeHtml(meta.canonical)}">`);
+  head = head.replace(/<link\b[^>]*\bhreflang=["'][^"']*["'][^>]*>\s*/gi, "");
+  for (const { hreflang, url } of meta.alternates || []) {
+    written.push(`<link rel="alternate" hreflang="${escapeHtml(hreflang)}" href="${escapeHtml(url)}">`);
+  }
+  return `${head}${written.join("\n")}
+${html.slice(end)}`;
+}
 function generate404Html({ baseHtml, website, siteContent }) {
   const dynamicTemplates = siteContent.pages?.filter((p) => p.isDynamic || isDynamicRoute(p.route)) || [];
   const routePatterns = dynamicTemplates.map((p) => routePatternToRegex(p.route).regex.source);
@@ -1171,6 +1157,12 @@ function safeParseJSON(text) {
     return void 0;
   }
 }
+function requireTransport(fetch2, entry) {
+  if (typeof fetch2 === "function") return fetch2;
+  throw new Error(
+    `${entry}: \`fetch\` must be a function. A transport does not survive a JSON-serialized isolate boundary — pass it as an RPC method argument. To use the ambient fetch deliberately, pass \`fetch: globalThis.fetch\`.`
+  );
+}
 function blocksOf(page) {
   const out = [];
   const walk = (list) => {
@@ -1189,6 +1181,7 @@ async function loadPageData({ website, route, fetch: fetch2, dev = false, locale
   if (prerender !== "author" && prerender !== "always") {
     throw new Error(`loadPageData: prerender must be 'author' or 'always', got ${JSON.stringify(prerender)}`);
   }
+  requireTransport(fetch2, "loadPageData");
   const active = website?.getActiveLocale?.() ?? null;
   if (locale && active && locale !== active) {
     throw new Error(
@@ -1259,16 +1252,13 @@ async function prefetchAndHydrate({ website, content, route, locale = null, fetc
   if (!website?.dataStore) {
     throw new Error("prefetchAndHydrate: `website` must be an initialized Website with a dataStore");
   }
-  if (typeof fetch2 !== "function") {
-    throw new Error(
-      "prefetchAndHydrate: `fetch` must be a function. A transport does not survive a JSON-serialized isolate boundary — pass it as an RPC method argument. To use the ambient fetch deliberately, pass `fetch: globalThis.fetch`."
-    );
-  }
+  requireTransport(fetch2, "prefetchAndHydrate");
   const fetched = await loadPageData({ website, route, fetch: fetch2, dev, locale, prerender });
   hydrateDataStore(website, fetched);
   return fetched;
 }
 async function collectSiteRecords(content, { locale, fetch: fetch2, signal, only = null, whole = false, maxPages } = {}) {
+  requireTransport(fetch2, "collectSiteRecords");
   const config = content?.config;
   const services = config?.services ?? null;
   const queries = config?.queries ?? null;