@domql/brender 3.2.7

package/dist/cjs/metadata.js

@@ -0,0 +1,102 @@
+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 metadata_exports = {};
+__export(metadata_exports, {
+  extractMetadata: () => extractMetadata,
+  generateHeadHtml: () => generateHeadHtml
+});
+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");
+};

package/dist/cjs/render.js

@@ -0,0 +1,341 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var render_exports = {};
+__export(render_exports, {
+  render: () => render,
+  renderElement: () => renderElement,
+  renderPage: () => renderPage,
+  renderRoute: () => renderRoute
+});
+module.exports = __toCommonJS(render_exports);
+var import_env = require("./env.js");
+var import_keys = require("./keys.js");
+var import_metadata = require("./metadata.js");
+var import_hydrate = require("./hydrate.js");
+var import_linkedom = require("linkedom");
+const import_meta = {};
+const render = async (data, options = {}) => {
+  const { route = "/", state: stateOverrides, context: contextOverrides } = options;
+  const { window, document } = (0, import_env.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 || {}
+  };
+  (0, import_keys.resetKeys)();
+  const element = await createDomqlElement(app, ctx);
+  (0, import_keys.assignKeys)(body);
+  const registry = (0, import_keys.mapKeysToElements)(element);
+  const metadata = (0, import_metadata.extractMetadata)(data, route);
+  const html = body.innerHTML;
+  return { html, metadata, registry, element };
+};
+const renderElement = async (elementDef, options = {}) => {
+  const { context = {} } = options;
+  const { window, document } = (0, import_env.createEnv)();
+  const body = document.body;
+  const { create } = await import("@domql/element");
+  (0, import_keys.resetKeys)();
+  const element = create(elementDef, { node: body }, "root", {
+    context: { document, window, ...context }
+  });
+  (0, import_keys.assignKeys)(body);
+  const registry = (0, import_keys.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 } = (0, import_linkedom.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 {
+  }
+  (0, import_hydrate.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: (0, import_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 = (0, import_metadata.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");
+};

package/dist/esm/env.js

@@ -0,0 +1,38 @@
+import { parseHTML } from "linkedom";
+const createEnv = (html = "<!DOCTYPE html><html><head></head><body></body></html>") => {
+  const { window, document } = parseHTML(html);
+  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 = () => {
+    };
+  }
+  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 };
+};
+export {
+  createEnv
+};