@symbo.ls/brender 3.5.1 → 3.6.3

package/README.md

@@ -63,7 +63,7 @@ Browser DOM (static)              DOMQL Tree (no nodes)         After hydrate()
 | `hydrate.js` | `collectBrNodes()` — scans DOM for data-br nodes; `hydrate()` — reconnects DOMQL tree to DOM |
 | `env.js` | `createEnv()` — linkedom virtual DOM with browser API stubs (requestAnimationFrame, history, location, etc.) |
 | `keys.js` | `resetKeys()`, `assignKeys()` — stamps data-br on DOM nodes; `mapKeysToElements()` — builds registry |
-| `metadata.js` | `extractMetadata()`, `generateHeadHtml()` — SEO meta tags from page definitions |
+| `metadata.js` | Re-exports from [`@symbo.ls/helmet`](../helmet/) — `extractMetadata()`, `generateHeadHtml()`, `resolveMetadata()`, `applyMetadata()` |
 | `load.js` | `loadProject()` — imports a symbols/ directory; `loadAndRenderAll()` — renders every route |
 | `index.js` | Re-exports everything |
 
@@ -168,13 +168,15 @@ Creates a linkedom virtual DOM environment with stubs for browser APIs that DOMQ
 
 ### `generateHeadHtml(metadata)`
 
-Converts a metadata object into HTML head tags:
+Converts a metadata object into HTML head tags. Provided by [`@symbo.ls/helmet`](../helmet/):
 
 ```js
 generateHeadHtml({ title: 'My Page', description: 'About', 'og:image': '/img.png' })
 // -> '<meta charset="UTF-8">\n<title>My Page</title>\n<meta name="description" content="About">\n<meta property="og:image" content="/img.png">'
 ```
 
+Metadata values can also be functions — see the [helmet plugin](../helmet/) for details.
+
 ## Examples
 
 The `examples/` directory contains runnable experiments. Copy a project's source into `examples/` first (gitignored), then run:
@@ -280,3 +282,17 @@ This means the server and client don't need to exchange the registry — as long
 - `hydrate.js` is browser-only code (no linkedom dependency) — it's exported separately via `@symbo.ls/brender/hydrate`
 - `createEnv()` sets `globalThis.window/document/Node/HTMLElement` because `@domql/utils` `isDOMNode` uses `instanceof` checks against global constructors
 - `onRender` callbacks that do network requests or call `s.update()` will error during SSR — this is expected and harmless since the HTML is already produced before those callbacks fire
+
+## Theme support
+
+Brender defaults to `globalTheme: 'auto'`, generating CSS with both `prefers-color-scheme` media queries and `[data-theme]` selectors. The SSR output includes theme-switching CSS variables that work without JavaScript:
+
+```css
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) { --theme-document-background: #000; }
+}
+[data-theme="dark"] { --theme-document-background: #000; }
+[data-theme="ocean"] { --theme-document-background: #0a2e4e; }
+```
+
+Custom themes beyond dark/light are activated via `data-theme` attribute on the root element.

package/dist/cjs/index.js

@@ -23,6 +23,7 @@ __export(index_exports, {
   default: () => index_default,
   extractMetadata: () => import_metadata.extractMetadata,
   generateHeadHtml: () => import_metadata.generateHeadHtml,
+  generateSitemap: () => import_sitemap.generateSitemap,
   hydrate: () => import_hydrate.hydrate,
   loadAndRenderAll: () => import_load.loadAndRenderAll,
   loadProject: () => import_load.loadProject,
@@ -40,6 +41,7 @@ var import_load = require("./load.js");
 var import_render = require("./render.js");
 var import_metadata = require("./metadata.js");
 var import_hydrate = require("./hydrate.js");
+var import_sitemap = require("./sitemap.js");
 var index_default = {
   createEnv: import_env.createEnv,
   resetKeys: import_keys.resetKeys,
@@ -54,5 +56,6 @@ var index_default = {
   extractMetadata: import_metadata.extractMetadata,
   generateHeadHtml: import_metadata.generateHeadHtml,
   collectBrNodes: import_hydrate.collectBrNodes,
-  hydrate: import_hydrate.hydrate
+  hydrate: import_hydrate.hydrate,
+  generateSitemap: import_sitemap.generateSitemap
 };

package/dist/cjs/metadata.js

@@ -17,86 +17,10 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var metadata_exports = {};
 __export(metadata_exports, {
-  extractMetadata: () => extractMetadata,
-  generateHeadHtml: () => generateHeadHtml
+  applyMetadata: () => import_helmet.applyMetadata,
+  extractMetadata: () => import_helmet.extractMetadata,
+  generateHeadHtml: () => import_helmet.generateHeadHtml,
+  resolveMetadata: () => import_helmet.resolveMetadata
 });
 module.exports = __toCommonJS(metadata_exports);
-const extractMetadata = (data, route = "/") => {
-  const pages = data.pages || {};
-  const page = pages[route];
-  let metadata = {};
-  if (data.integrations?.seo) {
-    metadata = { ...data.integrations.seo };
-  }
-  if (page) {
-    const pageMeta = page.metadata || page.helmet || {};
-    metadata = { ...metadata, ...pageMeta };
-    if (!metadata.title && page.state?.title) {
-      metadata.title = page.state.title;
-    }
-    if (!metadata.description && page.state?.description) {
-      metadata.description = page.state.description;
-    }
-  }
-  if (!metadata.title) {
-    metadata.title = data.name || "Symbols";
-  }
-  return metadata;
-};
-const generateHeadHtml = (metadata) => {
-  const esc = (text) => {
-    if (text === null || text === void 0) return "";
-    const map = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#039;" };
-    return text.toString().replace(/[&<>"']/g, (m) => map[m]);
-  };
-  const tags = [
-    '<meta charset="UTF-8">',
-    '<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">'
-  ];
-  for (const [key, value] of Object.entries(metadata)) {
-    if (!value && value !== 0 && value !== false) continue;
-    if (key === "title") {
-      tags.push(`<title>${esc(value)}</title>`);
-      continue;
-    }
-    if (key === "canonical") {
-      tags.push(`<link rel="canonical" href="${esc(value)}">`);
-      continue;
-    }
-    if (key === "alternate" && Array.isArray(value)) {
-      value.forEach((alt) => {
-        if (typeof alt === "object") {
-          const attrs = Object.entries(alt).map(([k, v]) => `${k}="${esc(v)}"`).join(" ");
-          tags.push(`<link rel="alternate" ${attrs}>`);
-        }
-      });
-      continue;
-    }
-    const propertyPrefixes = ["og:", "article:", "product:", "fb:", "profile:", "book:", "business:", "music:", "video:"];
-    const namePrefixes = ["twitter:", "DC:", "DCTERMS:"];
-    const isProperty = propertyPrefixes.some((p) => key.startsWith(p));
-    const isName = namePrefixes.some((p) => key.startsWith(p));
-    if (key.startsWith("http-equiv:")) {
-      const httpKey = key.replace("http-equiv:", "");
-      tags.push(`<meta http-equiv="${esc(httpKey)}" content="${esc(value)}">`);
-    } else if (key.startsWith("itemprop:")) {
-      const itemKey = key.replace("itemprop:", "");
-      tags.push(`<meta itemprop="${esc(itemKey)}" content="${esc(value)}">`);
-    } else if (isProperty) {
-      if (Array.isArray(value)) {
-        value.forEach((v) => tags.push(`<meta property="${esc(key)}" content="${esc(v)}">`));
-      } else {
-        tags.push(`<meta property="${esc(key)}" content="${esc(value)}">`);
-      }
-    } else if (isName) {
-      tags.push(`<meta name="${esc(key)}" content="${esc(value)}">`);
-    } else if (key !== "favicon" && key !== "favicons") {
-      if (Array.isArray(value)) {
-        value.forEach((v) => tags.push(`<meta name="${esc(key)}" content="${esc(v)}">`));
-      } else if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
-        tags.push(`<meta name="${esc(key)}" content="${esc(value)}">`);
-      }
-    }
-  }
-  return tags.join("\n");
-};
+var import_helmet = require("@symbo.ls/helmet");

package/dist/cjs/render.js

@@ -30,9 +30,11 @@ __export(render_exports, {
   render: () => render,
   renderElement: () => renderElement,
   renderPage: () => renderPage,
-  renderRoute: () => renderRoute
+  renderRoute: () => renderRoute,
+  resetGlobalCSSCache: () => resetGlobalCSSCache
 });
 module.exports = __toCommonJS(render_exports);
+var import_path = require("path");
 var import_env = require("./env.js");
 var import_keys = require("./keys.js");
 var import_metadata = require("./metadata.js");
@@ -92,7 +94,15 @@ const UIKIT_STUBS = {
   H3: { tag: "h3" },
   H4: { tag: "h4" },
   H5: { tag: "h5" },
-  H6: { tag: "h6" }
+  H6: { tag: "h6" },
+  Svg: {
+    tag: "svg",
+    attr: {
+      xmlns: "http://www.w3.org/2000/svg",
+      "xmlns:xlink": "http://www.w3.org/1999/xlink"
+    }
+  },
+  Text: { tag: "span" }
 };
 const render = async (data, options = {}) => {
   const { route = "/", state: stateOverrides, context: contextOverrides } = options;
@@ -150,9 +160,169 @@ const renderElement = async (elementDef, options = {}) => {
   }
   (0, import_keys.assignKeys)(body);
   const registry = element ? (0, import_keys.mapKeysToElements)(element) : {};
-  const html = body.innerHTML;
+  const html = fixSvgContent(body.innerHTML);
   return { html, registry, element };
 };
+const fixSvgContent = (html) => {
+  return html.replace(
+    /(<svg\b[^>]*>)([\s\S]*?)(<\/svg>)/gi,
+    (match, open, content, close) => {
+      if (content.includes("&lt;")) {
+        const unescaped = content.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&quot;/g, '"').replace(/&#39;/g, "'");
+        return open + unescaped + close;
+      }
+      return match;
+    }
+  );
+};
+let _cachedGlobalCSS = null;
+const generateGlobalCSS = async (ds, config) => {
+  if (_cachedGlobalCSS) return _cachedGlobalCSS;
+  try {
+    const { existsSync, writeFileSync, unlinkSync } = await import("fs");
+    const { tmpdir } = await import("os");
+    const { randomBytes } = await import("crypto");
+    const esbuild = await import("esbuild");
+    const dsJson = JSON.stringify(ds || {});
+    const cfgJson = JSON.stringify(config || {});
+    const tmpEntry = (0, import_path.join)(tmpdir(), `br_global_${randomBytes(6).toString("hex")}.mjs`);
+    const tmpOut = (0, import_path.join)(tmpdir(), `br_global_${randomBytes(6).toString("hex")}_out.mjs`);
+    writeFileSync(tmpEntry, `
+      import { set, getActiveConfig, getFontFaceString } from '@symbo.ls/scratch'
+      import { DEFAULT_CONFIG } from '@symbo.ls/default-config'
+
+      const ds = ${dsJson}
+      const cfg = ${cfgJson}
+
+      // Merge with defaults (same as initEmotion)
+      const merged = {}
+      for (const k in DEFAULT_CONFIG) merged[k] = DEFAULT_CONFIG[k]
+      for (const k in ds) {
+        if (typeof ds[k] === 'object' && !Array.isArray(ds[k]) && typeof merged[k] === 'object' && !Array.isArray(merged[k])) {
+          merged[k] = { ...merged[k], ...ds[k] }
+        } else {
+          merged[k] = ds[k]
+        }
+      }
+
+      const conf = set({
+        useReset: true,
+        useVariable: true,
+        useFontImport: true,
+        useDocumentTheme: true,
+        useDefaultConfig: true,
+        globalTheme: 'auto',
+        ...merged,
+        ...cfg
+      }, { newConfig: {} })
+
+      const result = {
+        CSS_VARS: conf.CSS_VARS || {},
+        CSS_MEDIA_VARS: conf.CSS_MEDIA_VARS || {},
+        RESET: conf.RESET || conf.reset || {},
+        ANIMATION: conf.animation || conf.ANIMATION || {}
+      }
+      // Export as globalThis so we can read it
+      globalThis.__BR_GLOBAL_CSS__ = result
+      export default result
+    `);
+    const brenderDir = new URL(".", import_meta.url).pathname;
+    const monorepoRoot = (0, import_path.resolve)(brenderDir, "../..");
+    const workspacePlugin = {
+      name: "workspace-resolve",
+      setup(build) {
+        build.onResolve({ filter: /^@symbo\.ls\// }, (args) => {
+          const pkg = args.path.replace("@symbo.ls/", "");
+          for (const dir of ["packages", "plugins"]) {
+            const src = (0, import_path.resolve)(monorepoRoot, dir, pkg, "src", "index.js");
+            if (existsSync(src)) return { path: src };
+            const dist = (0, import_path.resolve)(monorepoRoot, dir, pkg, "index.js");
+            if (existsSync(dist)) return { path: dist };
+          }
+          const blank = (0, import_path.resolve)(monorepoRoot, "packages", "default-config", "blank", "index.js");
+          if (pkg === "default-config" && existsSync(blank)) return { path: blank };
+        });
+        build.onResolve({ filter: /^@domql\// }, (args) => {
+          const pkg = args.path.replace("@domql/", "");
+          const src = (0, import_path.resolve)(monorepoRoot, "packages", "domql", "packages", pkg, "src", "index.js");
+          if (existsSync(src)) return { path: src };
+        });
+      }
+    };
+    await esbuild.build({
+      entryPoints: [tmpEntry],
+      bundle: true,
+      format: "esm",
+      platform: "node",
+      outfile: tmpOut,
+      write: true,
+      logLevel: "silent",
+      plugins: [workspacePlugin],
+      external: ["fs", "path", "os", "crypto", "url", "http", "https", "stream", "util", "events", "buffer", "child_process", "worker_threads", "net", "tls", "dns", "dgram", "zlib", "assert", "querystring", "string_decoder", "readline", "perf_hooks", "async_hooks", "v8", "vm", "cluster", "inspector", "module", "process", "tty", "color-contrast-checker"]
+    });
+    const mod = await import(`file://${tmpOut}`);
+    const data = mod.default || {};
+    try {
+      unlinkSync(tmpEntry);
+    } catch {
+    }
+    try {
+      unlinkSync(tmpOut);
+    } catch {
+    }
+    const cssVars = data.CSS_VARS || {};
+    const cssMediaVars = data.CSS_MEDIA_VARS || {};
+    const reset = data.RESET || {};
+    const animations = data.ANIMATION || {};
+    const varDecls = Object.entries(cssVars).map(([k, v]) => `  ${k}: ${v}`).join(";\n");
+    let rootRule = varDecls ? `:root {
+${varDecls};
+}` : "";
+    const themeVarRules = Object.entries(cssMediaVars).map(([key, vars]) => {
+      const decls = Object.entries(vars).map(([k, v]) => `    ${k}: ${v}`).join(";\n");
+      if (!decls) return "";
+      if (key.startsWith("@media")) {
+        return `${key} {
+  :root:not([data-theme]) {
+${decls};
+  }
+}`;
+      }
+      return `${key} {
+${decls};
+}`;
+    }).filter(Boolean).join("\n\n");
+    if (themeVarRules) rootRule += "\n\n" + themeVarRules;
+    const resetRules = generateResetCSS(reset);
+    const keyframeRules = [];
+    for (const name in animations) {
+      const frames = animations[name];
+      if (!frames || typeof frames !== "object") continue;
+      const frameRules = Object.entries(frames).map(([step, p]) => {
+        if (typeof p !== "object") return "";
+        const decls = Object.entries(p).map(([k, v]) => `${camelToKebab(k)}: ${v}`).join("; ");
+        return `  ${step} { ${decls}; }`;
+      }).join("\n");
+      keyframeRules.push(`@keyframes ${name} {
+${frameRules}
+}`);
+    }
+    _cachedGlobalCSS = {
+      rootRule,
+      resetRules,
+      fontFaceCSS: "",
+      keyframeRules: keyframeRules.join("\n")
+    };
+    return _cachedGlobalCSS;
+  } catch (err) {
+    console.warn("generateGlobalCSS failed:", err.message, err.stack);
+    _cachedGlobalCSS = { rootRule: "", resetRules: "", fontFaceCSS: "", keyframeRules: "" };
+    return _cachedGlobalCSS;
+  }
+};
+const resetGlobalCSSCache = () => {
+  _cachedGlobalCSS = null;
+};
 const renderRoute = async (data, options = {}) => {
   const { route = "/" } = options;
   const ds = data.designSystem || {};
@@ -182,34 +352,66 @@ const renderRoute = async (data, options = {}) => {
     emotion: emotionInstance,
     designSystem: ds
   });
+  const globalCSS = await generateGlobalCSS(ds, data.config || data.settings);
   return {
     html: cssDoc.body.innerHTML,
     css: extractCSS(result.element, ds),
-    resetCss: generateResetCSS(ds.reset),
+    globalCSS,
+    resetCss: globalCSS.resetRules || generateResetCSS(ds.reset),
     fontLinks: generateFontLinks(ds),
     metadata: (0, import_metadata.extractMetadata)(data, route),
     brKeyCount: Object.keys(result.registry).length
   };
 };
 const renderPage = async (data, route = "/", options = {}) => {
-  const { lang = "en", themeColor } = options;
+  const { lang = "en", themeColor, isr } = options;
   const result = await renderRoute(data, { route });
   if (!result) return null;
   const metadata = { ...result.metadata };
   if (themeColor) metadata["theme-color"] = themeColor;
   const headTags = (0, import_metadata.generateHeadHtml)(metadata);
+  const globalCSS = result.globalCSS || {};
+  let isrBody = "";
+  if (isr && isr.clientScript) {
+    const depth = route === "/" ? 0 : route.replace(/^\/|\/$/g, "").split("/").length;
+    const prefix = depth > 0 ? "../".repeat(depth) : "./";
+    isrBody = `<script type="module">
+{
+  const brEls = document.querySelectorAll('body > :not(script):not(style)')
+  const observer = new MutationObserver((mutations) => {
+    for (const m of mutations) {
+      for (const node of m.addedNodes) {
+        if (node.nodeType === 1 && node.tagName !== 'SCRIPT' && node.tagName !== 'STYLE' && !node.hasAttribute('data-br')) {
+          brEls.forEach(el => { if (el.hasAttribute('data-br') || el.querySelector('[data-br]')) el.remove() })
+          observer.disconnect()
+          return
+        }
+      }
+    }
+  })
+  observer.observe(document.body, { childList: true })
+}
+<\/script>
+<script type="module" src="${prefix}${isr.clientScript}"><\/script>`;
+  }
   const html = `<!DOCTYPE html>
 <html lang="${lang}">
 <head>
 ${headTags}
 ${result.fontLinks}
-<style>${result.resetCss}</style>
+${globalCSS.fontFaceCSS ? `<style>${globalCSS.fontFaceCSS}</style>` : ""}
+<style>
+${globalCSS.rootRule || ""}
+${result.resetCss}
+${globalCSS.keyframeRules || ""}
+</style>
 <style data-emotion="smbls">
 ${result.css}
 </style>
 </head>
 <body>
 ${result.html}
+${isrBody}
 </body>
 </html>`;
   return { html, route, brKeyCount: result.brKeyCount };
@@ -538,6 +740,34 @@ const getExtendsCSS = (el) => {
   }
   return null;
 };
+const resolveElementProps = (el) => {
+  const { props } = el;
+  if (!props) return props;
+  let resolved;
+  for (const key in props) {
+    if (typeof props[key] !== "function") continue;
+    if (NON_CSS_PROPS.has(key)) continue;
+    if (key.charCodeAt(0) >= 65 && key.charCodeAt(0) <= 90) continue;
+    if (key.startsWith("on")) continue;
+    if (!resolved) resolved = { ...props };
+    let result;
+    try {
+      result = props[key](el, el.state || {});
+    } catch {
+      try {
+        const mockState = { root: {}, ...el.state || {} };
+        result = props[key](el, mockState);
+      } catch {
+      }
+    }
+    if (result !== void 0 && result !== null && result !== false) {
+      resolved[key] = result;
+    } else {
+      delete resolved[key];
+    }
+  }
+  return resolved || props;
+};
 const extractCSS = (element, ds) => {
   const mediaMap = ds?.media || {};
   const animations = ds?.animation || {};
@@ -546,7 +776,7 @@ const extractCSS = (element, ds) => {
   const usedAnimations = /* @__PURE__ */ new Set();
   const walk = (el) => {
     if (!el || !el.__ref) return;
-    const { props } = el;
+    const props = resolveElementProps(el);
     if (props && el.node) {
       const cls = el.node.getAttribute?.("class");
       if (cls && !seen.has(cls)) {
@@ -568,7 +798,7 @@ const extractCSS = (element, ds) => {
         }
       }
     }
-    if (el.__ref.__children) {
+    if (el.__ref?.__children) {
       for (const ck of el.__ref.__children) {
         if (el[ck]?.__ref) walk(el[ck]);
       }
@@ -593,8 +823,20 @@ const generateResetCSS = (reset) => {
   const rules = [];
   for (const [selector, props] of Object.entries(reset)) {
     if (!props || typeof props !== "object") continue;
-    const decls = Object.entries(props).map(([k, v]) => `${camelToKebab(k)}: ${v}`).join("; ");
-    if (decls) rules.push(`${selector} { ${decls}; }`);
+    const baseDecls = [];
+    const mediaRules = [];
+    for (const [k, v] of Object.entries(props)) {
+      if (typeof v === "object" && v !== null) {
+        if (k.startsWith("@media") || k.startsWith("@")) {
+          const inner = Object.entries(v).filter(([, iv]) => typeof iv !== "object").map(([ik, iv]) => `${camelToKebab(ik)}: ${iv}`).join("; ");
+          if (inner) mediaRules.push(`${k} { ${selector} { ${inner}; } }`);
+        }
+        continue;
+      }
+      baseDecls.push(`${camelToKebab(k)}: ${v}`);
+    }
+    if (baseDecls.length) rules.push(`${selector} { ${baseDecls.join("; ")}; }`);
+    rules.push(...mediaRules);
   }
   return rules.join("\n");
 };

package/dist/cjs/sitemap.js

@@ -0,0 +1,41 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var sitemap_exports = {};
+__export(sitemap_exports, {
+  generateSitemap: () => generateSitemap
+});
+module.exports = __toCommonJS(sitemap_exports);
+function generateSitemap(baseUrl, routes) {
+  const urls = Object.entries(routes).map(([path, config]) => {
+    const metadata = config.metadata || {};
+    const canonical = metadata.canonical || `${baseUrl}${path === "/" ? "" : path}`;
+    return `
+  <url>
+    <loc>${canonical}</loc>
+    <lastmod>${(/* @__PURE__ */ new Date()).toISOString()}</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>${path === "/" ? "1.0" : "0.8"}</priority>
+  </url>`;
+  });
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<urlset
+  xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+  xmlns:xhtml="http://www.w3.org/1999/xhtml">
+${urls.join("\n")}
+</urlset>`;
+}

package/dist/esm/index.js

@@ -4,6 +4,7 @@ import { loadProject, loadAndRenderAll } from "./load.js";
 import { render, renderElement, renderRoute, renderPage } from "./render.js";
 import { extractMetadata, generateHeadHtml } from "./metadata.js";
 import { collectBrNodes, hydrate } from "./hydrate.js";
+import { generateSitemap } from "./sitemap.js";
 var index_default = {
   createEnv,
   resetKeys,
@@ -18,7 +19,8 @@ var index_default = {
   extractMetadata,
   generateHeadHtml,
   collectBrNodes,
-  hydrate
+  hydrate,
+  generateSitemap
 };
 export {
   assignKeys,
@@ -27,6 +29,7 @@ export {
   index_default as default,
   extractMetadata,
   generateHeadHtml,
+  generateSitemap,
   hydrate,
   loadAndRenderAll,
   loadProject,

package/dist/esm/metadata.js

@@ -1,83 +1,7 @@
-const extractMetadata = (data, route = "/") => {
-  const pages = data.pages || {};
-  const page = pages[route];
-  let metadata = {};
-  if (data.integrations?.seo) {
-    metadata = { ...data.integrations.seo };
-  }
-  if (page) {
-    const pageMeta = page.metadata || page.helmet || {};
-    metadata = { ...metadata, ...pageMeta };
-    if (!metadata.title && page.state?.title) {
-      metadata.title = page.state.title;
-    }
-    if (!metadata.description && page.state?.description) {
-      metadata.description = page.state.description;
-    }
-  }
-  if (!metadata.title) {
-    metadata.title = data.name || "Symbols";
-  }
-  return metadata;
-};
-const generateHeadHtml = (metadata) => {
-  const esc = (text) => {
-    if (text === null || text === void 0) return "";
-    const map = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#039;" };
-    return text.toString().replace(/[&<>"']/g, (m) => map[m]);
-  };
-  const tags = [
-    '<meta charset="UTF-8">',
-    '<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">'
-  ];
-  for (const [key, value] of Object.entries(metadata)) {
-    if (!value && value !== 0 && value !== false) continue;
-    if (key === "title") {
-      tags.push(`<title>${esc(value)}</title>`);
-      continue;
-    }
-    if (key === "canonical") {
-      tags.push(`<link rel="canonical" href="${esc(value)}">`);
-      continue;
-    }
-    if (key === "alternate" && Array.isArray(value)) {
-      value.forEach((alt) => {
-        if (typeof alt === "object") {
-          const attrs = Object.entries(alt).map(([k, v]) => `${k}="${esc(v)}"`).join(" ");
-          tags.push(`<link rel="alternate" ${attrs}>`);
-        }
-      });
-      continue;
-    }
-    const propertyPrefixes = ["og:", "article:", "product:", "fb:", "profile:", "book:", "business:", "music:", "video:"];
-    const namePrefixes = ["twitter:", "DC:", "DCTERMS:"];
-    const isProperty = propertyPrefixes.some((p) => key.startsWith(p));
-    const isName = namePrefixes.some((p) => key.startsWith(p));
-    if (key.startsWith("http-equiv:")) {
-      const httpKey = key.replace("http-equiv:", "");
-      tags.push(`<meta http-equiv="${esc(httpKey)}" content="${esc(value)}">`);
-    } else if (key.startsWith("itemprop:")) {
-      const itemKey = key.replace("itemprop:", "");
-      tags.push(`<meta itemprop="${esc(itemKey)}" content="${esc(value)}">`);
-    } else if (isProperty) {
-      if (Array.isArray(value)) {
-        value.forEach((v) => tags.push(`<meta property="${esc(key)}" content="${esc(v)}">`));
-      } else {
-        tags.push(`<meta property="${esc(key)}" content="${esc(value)}">`);
-      }
-    } else if (isName) {
-      tags.push(`<meta name="${esc(key)}" content="${esc(value)}">`);
-    } else if (key !== "favicon" && key !== "favicons") {
-      if (Array.isArray(value)) {
-        value.forEach((v) => tags.push(`<meta name="${esc(key)}" content="${esc(v)}">`));
-      } else if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
-        tags.push(`<meta name="${esc(key)}" content="${esc(value)}">`);
-      }
-    }
-  }
-  return tags.join("\n");
-};
+import { extractMetadata, generateHeadHtml, resolveMetadata, applyMetadata } from "@symbo.ls/helmet";
 export {
+  applyMetadata,
   extractMetadata,
-  generateHeadHtml
+  generateHeadHtml,
+  resolveMetadata
 };