@symbo.ls/brender 3.5.1 → 3.6.1

package/dist/esm/render.js

@@ -1,3 +1,4 @@
+import { resolve, join } from "path";
 import { createEnv } from "./env.js";
 import { resetKeys, assignKeys, mapKeysToElements } from "./keys.js";
 import { extractMetadata, generateHeadHtml } from "./metadata.js";
@@ -56,7 +57,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;
@@ -114,9 +123,169 @@ const renderElement = async (elementDef, options = {}) => {
   }
   assignKeys(body);
   const registry = element ? 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 = join(tmpdir(), `br_global_${randomBytes(6).toString("hex")}.mjs`);
+    const tmpOut = 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 = 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 = resolve(monorepoRoot, dir, pkg, "src", "index.js");
+            if (existsSync(src)) return { path: src };
+            const dist = resolve(monorepoRoot, dir, pkg, "index.js");
+            if (existsSync(dist)) return { path: dist };
+          }
+          const blank = 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 = 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 || {};
@@ -146,34 +315,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: 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 = 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 };
@@ -502,6 +703,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 || {};
@@ -510,7 +739,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)) {
@@ -532,7 +761,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]);
       }
@@ -557,8 +786,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");
 };
@@ -586,5 +827,6 @@ export {
   render,
   renderElement,
   renderPage,
-  renderRoute
+  renderRoute,
+  resetGlobalCSSCache
 };

package/dist/esm/sitemap.js

@@ -0,0 +1,22 @@
+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>`;
+}
+export {
+  generateSitemap
+};

package/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'
 
 export {
   createEnv,
@@ -19,7 +20,8 @@ export {
   extractMetadata,
   generateHeadHtml,
   collectBrNodes,
-  hydrate
+  hydrate,
+  generateSitemap
 }
 
 export default {
@@ -36,5 +38,6 @@ export default {
   extractMetadata,
   generateHeadHtml,
   collectBrNodes,
-  hydrate
+  hydrate,
+  generateSitemap
 }

package/metadata.js

@@ -1,117 +1,5 @@
 /**
- * Extracts metadata for a given route from project data.
- * Compatible with the server's seo.js getPageMetadata/generateMetaTags.
- *
- * Pages can define metadata via:
- *   - page.metadata (standard)
- *   - page.helmet (legacy)
- *   - page.state (fallback: state-level title/description)
- *
- * Global SEO is merged from data.integrations.seo
+ * Re-exports metadata utilities from the shared helmet plugin.
+ * Brender uses these for SSR head generation.
  */
-export const extractMetadata = (data, route = '/') => {
-  const pages = data.pages || {}
-  const page = pages[route]
-
-  let metadata = {}
-
-  // Merge global SEO settings first (lower priority)
-  if (data.integrations?.seo) {
-    metadata = { ...data.integrations.seo }
-  }
-
-  if (page) {
-    // Page-level metadata (highest priority)
-    const pageMeta = page.metadata || page.helmet || {}
-    metadata = { ...metadata, ...pageMeta }
-
-    // Fallback: extract title/description from page state if not set
-    if (!metadata.title && page.state?.title) {
-      metadata.title = page.state.title
-    }
-    if (!metadata.description && page.state?.description) {
-      metadata.description = page.state.description
-    }
-  }
-
-  // Ensure title always exists
-  if (!metadata.title) {
-    metadata.title = data.name || 'Symbols'
-  }
-
-  return metadata
-}
-
-/**
- * Generates an HTML <head> string from metadata.
- * Can be used standalone or alongside the server's existing generateMetaTags.
- */
-export const generateHeadHtml = (metadata) => {
-  const esc = (text) => {
-    if (text === null || text === undefined) 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
-    }
-
-    // Prefixed property tags (og:, twitter:, article:, etc.)
-    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') {
-      // Standard meta name tag
-      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')
-}
+export { extractMetadata, generateHeadHtml, resolveMetadata, applyMetadata } from '@symbo.ls/helmet'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbo.ls/brender",
-  "version": "3.5.1",
+  "version": "3.6.1",
   "license": "MIT",
   "type": "module",
   "module": "./dist/esm/index.js",
@@ -8,16 +8,13 @@
   "exports": {
     ".": {
       "import": "./index.js",
-      "require": "./dist/cjs/index.js",
-      "default": "./index.js"
+      "require": "./dist/cjs/index.js"
     },
     "./hydrate": {
-      "import": "./hydrate.js",
-      "default": "./hydrate.js"
+      "import": "./hydrate.js"
     },
     "./load": {
-      "import": "./load.js",
-      "default": "./load.js"
+      "import": "./load.js"
     }
   },
   "source": "index.js",
@@ -39,10 +36,14 @@
     "dev:rita": "node examples/serve-rita.js"
   },
   "dependencies": {
+    "@symbo.ls/helmet": "^3.6.1",
     "linkedom": "^0.16.8"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0"
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  }
 }