npm - @domql/brender - Versions diffs - 3.2.7 - Mend

@domql/brender 3.2.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/dist/esm/render.js ADDED Viewed

@@ -0,0 +1,311 @@
+import { createEnv } from "./env.js";
+import { resetKeys, assignKeys, mapKeysToElements } from "./keys.js";
+import { extractMetadata, generateHeadHtml } from "./metadata.js";
+import { hydrate } from "./hydrate.js";
+import { parseHTML } from "linkedom";
+const render = async (data, options = {}) => {
+  const { route = "/", state: stateOverrides, context: contextOverrides } = options;
+  const { window, document } = createEnv();
+  const body = document.body;
+  window.location.pathname = route;
+  const smblsSrc = new URL("../../packages/smbls/src/createDomql.js", import.meta.url);
+  const { createDomqlElement } = await import(smblsSrc.href);
+  const app = data.app || {};
+  const ctx = {
+    state: { ...data.state, ...stateOverrides || {} },
+    dependencies: data.dependencies || {},
+    components: data.components || {},
+    snippets: data.snippets || {},
+    pages: data.pages || {},
+    functions: data.functions || {},
+    methods: data.methods || {},
+    designSystem: data.designSystem || {},
+    files: data.files || {},
+    ...data.config || data.settings || {},
+    // Virtual DOM environment
+    document,
+    window,
+    parent: { node: body },
+    // Caller overrides
+    ...contextOverrides || {}
+  };
+  resetKeys();
+  const element = await createDomqlElement(app, ctx);
+  assignKeys(body);
+  const registry = mapKeysToElements(element);
+  const metadata = extractMetadata(data, route);
+  const html = body.innerHTML;
+  return { html, metadata, registry, element };
+};
+const renderElement = async (elementDef, options = {}) => {
+  const { context = {} } = options;
+  const { window, document } = createEnv();
+  const body = document.body;
+  const { create } = await import("@domql/element");
+  resetKeys();
+  const element = create(elementDef, { node: body }, "root", {
+    context: { document, window, ...context }
+  });
+  assignKeys(body);
+  const registry = mapKeysToElements(element);
+  const html = body.innerHTML;
+  return { html, registry, element };
+};
+const renderRoute = async (data, options = {}) => {
+  const { route = "/" } = options;
+  const ds = data.designSystem || {};
+  const pageDef = (data.pages || {})[route];
+  if (!pageDef) return null;
+  const result = await renderElement(pageDef, {
+    context: {
+      components: data.components || {},
+      snippets: data.snippets || {},
+      designSystem: ds,
+      state: data.state || {},
+      functions: data.functions || {},
+      methods: data.methods || {}
+    }
+  });
+  const { document: cssDoc } = parseHTML(`<html><head></head><body>${result.html}</body></html>`);
+  let emotionInstance;
+  try {
+    const { default: createInstance } = await import("@emotion/css/create-instance");
+    emotionInstance = createInstance({ key: "smbls", container: cssDoc.head });
+  } catch {
+  }
+  hydrate(result.element, {
+    root: cssDoc.body,
+    renderEvents: false,
+    events: false,
+    emotion: emotionInstance,
+    designSystem: ds
+  });
+  return {
+    html: cssDoc.body.innerHTML,
+    css: extractCSS(result.element, ds),
+    resetCss: 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 result = await renderRoute(data, { route });
+  if (!result) return null;
+  const metadata = { ...result.metadata };
+  if (themeColor) metadata["theme-color"] = themeColor;
+  const headTags = generateHeadHtml(metadata);
+  const html = `<!DOCTYPE html>
+<html lang="${lang}">
+<head>
+${headTags}
+${result.fontLinks}
+<style>${result.resetCss}</style>
+<style data-emotion="smbls">
+${result.css}
+</style>
+</head>
+<body>
+${result.html}
+</body>
+</html>`;
+  return { html, route, brKeyCount: result.brKeyCount };
+};
+const CSS_COLOR_PROPS = /* @__PURE__ */ new Set([
+  "color",
+  "background",
+  "backgroundColor",
+  "borderColor",
+  "borderTopColor",
+  "borderRightColor",
+  "borderBottomColor",
+  "borderLeftColor",
+  "outlineColor",
+  "fill",
+  "stroke"
+]);
+const NON_CSS_PROPS = /* @__PURE__ */ new Set([
+  "href",
+  "src",
+  "alt",
+  "title",
+  "id",
+  "name",
+  "type",
+  "value",
+  "placeholder",
+  "target",
+  "rel",
+  "loading",
+  "srcset",
+  "sizes",
+  "media",
+  "role",
+  "tabindex",
+  "for",
+  "action",
+  "method",
+  "enctype",
+  "autocomplete",
+  "autofocus",
+  "theme",
+  "__element",
+  "update"
+]);
+const camelToKebab = (str) => str.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase());
+const resolveShorthand = (key, val) => {
+  if (key === "flexAlign" && typeof val === "string") {
+    const [alignItems, justifyContent] = val.split(" ");
+    return { display: "flex", "align-items": alignItems, "justify-content": justifyContent };
+  }
+  if (key === "gridAlign" && typeof val === "string") {
+    const [alignItems, justifyContent] = val.split(" ");
+    return { display: "grid", "align-items": alignItems, "justify-content": justifyContent };
+  }
+  if (key === "round" && val) {
+    return { "border-radius": typeof val === "number" ? val + "px" : val };
+  }
+  if (key === "boxSize" && val) {
+    return { width: val, height: val };
+  }
+  return null;
+};
+const resolveInnerProps = (obj, colorMap) => {
+  const result = {};
+  for (const k in obj) {
+    const v = obj[k];
+    const expanded = resolveShorthand(k, v);
+    if (expanded) {
+      Object.assign(result, expanded);
+      continue;
+    }
+    if (typeof v !== "string" && typeof v !== "number") continue;
+    result[camelToKebab(k)] = CSS_COLOR_PROPS.has(k) && colorMap[v] ? colorMap[v] : v;
+  }
+  return result;
+};
+const buildCSSFromProps = (props, colorMap, mediaMap) => {
+  const base = {};
+  const mediaRules = {};
+  const pseudoRules = {};
+  for (const key in props) {
+    const val = props[key];
+    if (key.charCodeAt(0) === 64 && typeof val === "object") {
+      const bp = mediaMap?.[key.slice(1)];
+      if (bp) {
+        const inner = resolveInnerProps(val, colorMap);
+        if (Object.keys(inner).length) mediaRules[bp] = inner;
+      }
+      continue;
+    }
+    if (key.charCodeAt(0) === 58 && typeof val === "object") {
+      const inner = resolveInnerProps(val, colorMap);
+      if (Object.keys(inner).length) pseudoRules[key] = inner;
+      continue;
+    }
+    if (typeof val !== "string" && typeof val !== "number") continue;
+    if (key.charCodeAt(0) >= 65 && key.charCodeAt(0) <= 90) continue;
+    if (NON_CSS_PROPS.has(key)) continue;
+    const expanded = resolveShorthand(key, val);
+    if (expanded) {
+      Object.assign(base, expanded);
+      continue;
+    }
+    base[camelToKebab(key)] = CSS_COLOR_PROPS.has(key) && colorMap[val] ? colorMap[val] : val;
+  }
+  return { base, mediaRules, pseudoRules };
+};
+const renderCSSRule = (selector, { base, mediaRules, pseudoRules }) => {
+  const lines = [];
+  const baseDecls = Object.entries(base).map(([k, v]) => `${k}: ${v}`).join("; ");
+  if (baseDecls) lines.push(`${selector} { ${baseDecls}; }`);
+  for (const [pseudo, p] of Object.entries(pseudoRules)) {
+    const decls = Object.entries(p).map(([k, v]) => `${k}: ${v}`).join("; ");
+    if (decls) lines.push(`${selector}${pseudo} { ${decls}; }`);
+  }
+  for (const [query, p] of Object.entries(mediaRules)) {
+    const decls = Object.entries(p).map(([k, v]) => `${k}: ${v}`).join("; ");
+    const mq = query.startsWith("@") ? query : `@media ${query}`;
+    if (decls) lines.push(`${mq} { ${selector} { ${decls}; } }`);
+  }
+  return lines.join("\n");
+};
+const extractCSS = (element, ds) => {
+  const colorMap = ds?.color || {};
+  const mediaMap = ds?.media || {};
+  const animations = ds?.animation || {};
+  const rules = [];
+  const seen = /* @__PURE__ */ new Set();
+  const usedAnimations = /* @__PURE__ */ new Set();
+  const walk = (el) => {
+    if (!el || !el.__ref) return;
+    const { props } = el;
+    if (props && el.node) {
+      const cls = el.node.getAttribute?.("class");
+      if (cls && !seen.has(cls)) {
+        seen.add(cls);
+        const cssResult = buildCSSFromProps(props, colorMap, mediaMap);
+        const has = Object.keys(cssResult.base).length || Object.keys(cssResult.mediaRules).length || Object.keys(cssResult.pseudoRules).length;
+        if (has) rules.push(renderCSSRule("." + cls.split(" ")[0], cssResult));
+        const anim = props.animation || props.animationName;
+        if (typeof anim === "string") {
+          const name = anim.split(" ")[0];
+          if (animations[name]) usedAnimations.add(name);
+        }
+      }
+    }
+    if (el.__ref.__children) {
+      for (const ck of el.__ref.__children) {
+        if (el[ck]?.__ref) walk(el[ck]);
+      }
+    }
+  };
+  walk(element);
+  const keyframes = [];
+  for (const name of usedAnimations) {
+    const frames = animations[name];
+    const frameRules = Object.entries(frames).map(([step, p]) => {
+      const decls = Object.entries(p).map(([k, v]) => `${camelToKebab(k)}: ${v}`).join("; ");
+      return `  ${step} { ${decls}; }`;
+    }).join("\n");
+    keyframes.push(`@keyframes ${name} {
+${frameRules}
+}`);
+  }
+  return [...keyframes, ...rules].join("\n");
+};
+const generateResetCSS = (reset) => {
+  if (!reset) return "";
+  const rules = [];
+  for (const [selector, props] of Object.entries(reset)) {
+    const decls = Object.entries(props).map(([k, v]) => `${camelToKebab(k)}: ${v}`).join("; ");
+    if (decls) rules.push(`${selector} { ${decls}; }`);
+  }
+  return rules.join("\n");
+};
+const generateFontLinks = (ds) => {
+  if (!ds) return "";
+  const families = ds.font_family || ds.fontFamily || {};
+  const fontNames = /* @__PURE__ */ new Set();
+  for (const val of Object.values(families)) {
+    const match = val.match(/'([^']+)'/);
+    if (match) fontNames.add(match[1]);
+  }
+  if (!fontNames.size) return "";
+  const params = [...fontNames].map((name) => {
+    const slug = name.replace(/\s+/g, "+");
+    return `family=${slug}:wght@300;400;500;600;700`;
+  }).join("&");
+  return [
+    '<link rel="preconnect" href="https://fonts.googleapis.com">',
+    '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>',
+    `<link href="https://fonts.googleapis.com/css2?${params}&display=swap" rel="stylesheet">`
+  ].join("\n");
+};
+export {
+  render,
+  renderElement,
+  renderPage,
+  renderRoute
+};

package/env.js ADDED Viewed

@@ -0,0 +1,43 @@
+import { parseHTML } from 'linkedom'
+/**
+ * Creates a virtual DOM environment for server-side rendering.
+ * Returns window and document that DomQL can use as context.
+ */
+export const createEnv = (html = '<!DOCTYPE html><html><head></head><body></body></html>') => {
+  const { window, document } = parseHTML(html)
+  // Stub APIs that DomQL/smbls may call during rendering
+  if (!window.requestAnimationFrame) {
+    window.requestAnimationFrame = (fn) => setTimeout(fn, 0)
+  }
+  if (!window.cancelAnimationFrame) {
+    window.cancelAnimationFrame = (id) => clearTimeout(id)
+  }
+  if (!window.history) {
+    window.history = {
+      pushState: () => {},
+      replaceState: () => {},
+      state: null
+    }
+  }
+  if (!window.location) {
+    window.location = { pathname: '/', search: '', hash: '', origin: 'http://localhost' }
+  }
+  if (!window.URL) {
+    window.URL = URL
+  }
+  if (!window.scrollTo) {
+    window.scrollTo = () => {}
+  }
+  // Expose linkedom constructors on globalThis so @domql/utils isDOMNode
+  // can use instanceof checks (it reads from globalThis.Node, etc.)
+  globalThis.window = window
+  globalThis.document = document
+  globalThis.Node = window.Node || globalThis.Node
+  globalThis.HTMLElement = window.HTMLElement || globalThis.HTMLElement
+  globalThis.Window = window.constructor
+  return { window, document }
+}