@domql/brender 3.2.7

package/dist/cjs/hydrate.js

@@ -0,0 +1,472 @@
+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 hydrate_exports = {};
+__export(hydrate_exports, {
+  collectBrNodes: () => collectBrNodes,
+  hydrate: () => hydrate
+});
+module.exports = __toCommonJS(hydrate_exports);
+const collectBrNodes = (root) => {
+  const container = root || document;
+  const nodes = container.querySelectorAll("[data-br]");
+  const map = {};
+  nodes.forEach((node) => {
+    map[node.getAttribute("data-br")] = node;
+  });
+  return map;
+};
+const hydrate = (element, options = {}) => {
+  const {
+    root,
+    events: attachEvents = true,
+    renderEvents: fireRenderEvents = true,
+    emotion,
+    designSystem
+  } = options;
+  const brNodes = collectBrNodes(root);
+  const colorMap = designSystem?.color || {};
+  const mediaMap = designSystem?.media || {};
+  let linked = 0;
+  let unlinked = 0;
+  const walk = (el) => {
+    if (!el || !el.__ref) return;
+    const brKey = el.__ref.__brKey;
+    if (brKey) {
+      const node = brNodes[brKey];
+      if (node) {
+        el.node = node;
+        node.ref = el;
+        if (emotion) {
+          renderCSS(el, emotion, colorMap, mediaMap);
+        }
+        if (attachEvents) {
+          bindEvents(el);
+        }
+        linked++;
+      } else {
+        unlinked++;
+      }
+    }
+    if (el.__ref.__children) {
+      for (const childKey of el.__ref.__children) {
+        const child = el[childKey];
+        if (child && child.__ref) walk(child);
+      }
+    }
+  };
+  walk(element);
+  if (fireRenderEvents) {
+    fireLifecycle(element);
+  }
+  return { element, linked, unlinked };
+};
+const renderCSS = (el, emotion, colorMap, mediaMap) => {
+  const { node, props } = el;
+  if (!node || !props) return;
+  const css = {};
+  let hasCss = false;
+  for (const key in props) {
+    const val = props[key];
+    if (key.charCodeAt(0) === 64) {
+      const breakpoint = mediaMap[key.slice(1)];
+      if (breakpoint && typeof val === "object") {
+        const mediaCss = resolvePropsToCSS(val, colorMap);
+        if (Object.keys(mediaCss).length) {
+          css[breakpoint] = mediaCss;
+          hasCss = true;
+        }
+      }
+      continue;
+    }
+    if (key.charCodeAt(0) === 58) {
+      if (typeof val === "object") {
+        const pseudoCss = resolvePropsToCSS(val, colorMap);
+        if (Object.keys(pseudoCss).length) {
+          css["&" + key] = pseudoCss;
+          hasCss = true;
+        }
+      }
+      continue;
+    }
+    const expanded = resolveShorthand(key, val);
+    if (expanded) {
+      for (const ek in expanded) {
+        css[ek] = resolveValue(ek, expanded[ek], colorMap);
+      }
+      hasCss = true;
+      continue;
+    }
+    if (!isCSS(key)) continue;
+    css[key] = resolveValue(key, val, colorMap);
+    hasCss = true;
+  }
+  if (el.style && typeof el.style === "object") {
+    Object.assign(css, el.style);
+    hasCss = true;
+  }
+  if (!hasCss) return;
+  const emotionClass = emotion.css(css);
+  const classes = [];
+  if (emotionClass) classes.push(emotionClass);
+  if (typeof el.key === "string" && el.key.charCodeAt(0) === 95 && el.key.charCodeAt(1) !== 95) {
+    classes.push(el.key.slice(1));
+  }
+  if (props.class) classes.push(props.class);
+  if (el.attr?.class) classes.push(el.attr.class);
+  const classlist = el.classlist;
+  if (classlist) {
+    if (typeof classlist === "string") classes.push(classlist);
+    else if (typeof classlist === "object") {
+      for (const k in classlist) {
+        const v = classlist[k];
+        if (typeof v === "boolean" && v) classes.push(k);
+        else if (typeof v === "string") classes.push(v);
+        else if (typeof v === "object" && v) classes.push(emotion.css(v));
+      }
+    }
+  }
+  if (classes.length) {
+    node.setAttribute("class", classes.join(" "));
+  }
+  for (const key in props) {
+    if (isCSS(key) && node.hasAttribute(key)) {
+      node.removeAttribute(key);
+    }
+  }
+};
+const resolvePropsToCSS = (propsObj, colorMap) => {
+  const css = {};
+  for (const key in propsObj) {
+    const expanded = resolveShorthand(key, propsObj[key]);
+    if (expanded) {
+      for (const ek in expanded) css[ek] = resolveValue(ek, expanded[ek], colorMap);
+      continue;
+    }
+    if (!isCSS(key)) continue;
+    css[key] = resolveValue(key, propsObj[key], colorMap);
+  }
+  return css;
+};
+const COLOR_PROPS = /* @__PURE__ */ new Set([
+  "color",
+  "background",
+  "backgroundColor",
+  "borderColor",
+  "borderTopColor",
+  "borderRightColor",
+  "borderBottomColor",
+  "borderLeftColor",
+  "outlineColor",
+  "fill",
+  "stroke",
+  "caretColor",
+  "columnRuleColor",
+  "textDecorationColor",
+  "boxShadow",
+  "textShadow"
+]);
+const resolveValue = (key, val, colorMap) => {
+  if (typeof val !== "string") return val;
+  if (COLOR_PROPS.has(key) && colorMap[val]) return colorMap[val];
+  return val;
+};
+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 resolveShorthand = (key, val) => {
+  if (key === "flexAlign" && typeof val === "string") {
+    const [alignItems, justifyContent] = val.split(" ");
+    return { display: "flex", alignItems, justifyContent };
+  }
+  if (key === "gridAlign" && typeof val === "string") {
+    const [alignItems, justifyContent] = val.split(" ");
+    return { display: "grid", alignItems, justifyContent };
+  }
+  if (key === "round" && val) {
+    return { borderRadius: typeof val === "number" ? val + "px" : val };
+  }
+  if (key === "boxSize" && val) {
+    return { width: val, height: val };
+  }
+  return null;
+};
+const isCSS = (key) => {
+  const ch = key.charCodeAt(0);
+  if (ch === 95 || ch === 64 || ch === 58) return false;
+  if (ch >= 65 && ch <= 90) return false;
+  if (NON_CSS_PROPS.has(key)) return false;
+  return CSS_PROPERTIES.has(key);
+};
+const CSS_PROPERTIES = /* @__PURE__ */ new Set([
+  "display",
+  "position",
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "width",
+  "height",
+  "minWidth",
+  "maxWidth",
+  "minHeight",
+  "maxHeight",
+  "margin",
+  "marginTop",
+  "marginRight",
+  "marginBottom",
+  "marginLeft",
+  "marginBlock",
+  "marginInline",
+  "padding",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+  "paddingBlock",
+  "paddingInline",
+  "border",
+  "borderTop",
+  "borderRight",
+  "borderBottom",
+  "borderLeft",
+  "borderRadius",
+  "borderColor",
+  "borderWidth",
+  "borderStyle",
+  "borderTopWidth",
+  "borderRightWidth",
+  "borderBottomWidth",
+  "borderLeftWidth",
+  "borderTopStyle",
+  "borderRightStyle",
+  "borderBottomStyle",
+  "borderLeftStyle",
+  "borderTopColor",
+  "borderRightColor",
+  "borderBottomColor",
+  "borderLeftColor",
+  "borderTopLeftRadius",
+  "borderTopRightRadius",
+  "borderBottomLeftRadius",
+  "borderBottomRightRadius",
+  "background",
+  "backgroundColor",
+  "backgroundImage",
+  "backgroundSize",
+  "backgroundPosition",
+  "backgroundRepeat",
+  "backgroundAttachment",
+  "color",
+  "fontSize",
+  "fontWeight",
+  "fontFamily",
+  "fontStyle",
+  "lineHeight",
+  "letterSpacing",
+  "textAlign",
+  "textDecoration",
+  "textTransform",
+  "textIndent",
+  "textOverflow",
+  "textShadow",
+  "opacity",
+  "overflow",
+  "overflowX",
+  "overflowY",
+  "zIndex",
+  "cursor",
+  "pointerEvents",
+  "userSelect",
+  "flex",
+  "flexDirection",
+  "flexWrap",
+  "flexFlow",
+  "flexGrow",
+  "flexShrink",
+  "flexBasis",
+  "alignItems",
+  "alignContent",
+  "alignSelf",
+  "justifyContent",
+  "justifyItems",
+  "justifySelf",
+  "gap",
+  "rowGap",
+  "columnGap",
+  "gridTemplateColumns",
+  "gridTemplateRows",
+  "gridColumn",
+  "gridRow",
+  "gridArea",
+  "gridAutoFlow",
+  "gridAutoColumns",
+  "gridAutoRows",
+  "transform",
+  "transformOrigin",
+  "transition",
+  "animation",
+  "animationDelay",
+  "boxShadow",
+  "outline",
+  "outlineColor",
+  "outlineWidth",
+  "outlineStyle",
+  "outlineOffset",
+  "whiteSpace",
+  "wordBreak",
+  "wordWrap",
+  "overflowWrap",
+  "visibility",
+  "boxSizing",
+  "objectFit",
+  "objectPosition",
+  "filter",
+  "backdropFilter",
+  "mixBlendMode",
+  "fill",
+  "stroke",
+  "strokeWidth",
+  "listStyle",
+  "listStyleType",
+  "listStylePosition",
+  "counterReset",
+  "counterIncrement",
+  "content",
+  "aspectRatio",
+  "resize",
+  "appearance",
+  "scrollBehavior",
+  "scrollMargin",
+  "scrollPadding",
+  "willChange",
+  "contain",
+  "isolation",
+  "caretColor",
+  "accentColor",
+  "columnCount",
+  "columnGap",
+  "columnRuleColor",
+  "columnRuleStyle",
+  "columnRuleWidth",
+  "textDecorationColor",
+  "textDecorationStyle",
+  "textDecorationThickness",
+  "clipPath",
+  "shapeOutside"
+]);
+const DOMQL_LIFECYCLE = /* @__PURE__ */ new Set([
+  "render",
+  "create",
+  "init",
+  "start",
+  "complete",
+  "done",
+  "beforeClassAssign",
+  "attachNode",
+  "stateInit",
+  "stateCreated",
+  "renderRouter",
+  "lazyLoad",
+  "error"
+]);
+const bindEvents = (el) => {
+  const { node, on, props } = el;
+  if (!node) return;
+  const handled = /* @__PURE__ */ new Set();
+  if (on) {
+    for (const param in on) {
+      if (DOMQL_LIFECYCLE.has(param)) continue;
+      if (typeof on[param] !== "function") continue;
+      handled.add(param);
+      addListener(node, param, on[param], el);
+    }
+  }
+  if (props) {
+    for (const key in props) {
+      if (key.length <= 2 || key[0] !== "o" || key[1] !== "n") continue;
+      if (typeof props[key] !== "function") continue;
+      const third = key[2];
+      if (third !== third.toUpperCase()) continue;
+      const eventName = third.toLowerCase() + key.slice(3);
+      if (handled.has(eventName) || DOMQL_LIFECYCLE.has(eventName)) continue;
+      addListener(node, eventName, props[key], el);
+    }
+  }
+};
+const addListener = (node, eventName, handler, el) => {
+  node.addEventListener(eventName, (event) => {
+    const result = handler.call(el, event, el, el.state, el.context);
+    if (result && typeof result.then === "function") {
+      result.catch(() => {
+      });
+    }
+  });
+};
+const fireLifecycle = (el) => {
+  if (!el || !el.__ref || !el.node) return;
+  const on = el.on;
+  if (on) {
+    fireEvent(on.render, el);
+    fireEvent(on.renderRouter, el);
+    fireEvent(on.done, el);
+    fireEvent(on.create, el);
+  }
+  if (el.__ref.__children) {
+    for (const childKey of el.__ref.__children) {
+      const child = el[childKey];
+      if (child && child.__ref) fireLifecycle(child);
+    }
+  }
+};
+const fireEvent = (fn, el) => {
+  if (typeof fn !== "function") return;
+  try {
+    const result = fn.call(el, el, el.state, el.context);
+    if (result && typeof result.then === "function") {
+      result.catch(() => {
+      });
+    }
+  } catch (e) {
+    console.warn("[brender hydrate]", el.key, e.message);
+  }
+};

package/dist/cjs/index.js

@@ -0,0 +1,58 @@
+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 index_exports = {};
+__export(index_exports, {
+  assignKeys: () => import_keys.assignKeys,
+  collectBrNodes: () => import_hydrate.collectBrNodes,
+  createEnv: () => import_env.createEnv,
+  default: () => index_default,
+  extractMetadata: () => import_metadata.extractMetadata,
+  generateHeadHtml: () => import_metadata.generateHeadHtml,
+  hydrate: () => import_hydrate.hydrate,
+  loadAndRenderAll: () => import_load.loadAndRenderAll,
+  loadProject: () => import_load.loadProject,
+  mapKeysToElements: () => import_keys.mapKeysToElements,
+  render: () => import_render.render,
+  renderElement: () => import_render.renderElement,
+  renderPage: () => import_render.renderPage,
+  renderRoute: () => import_render.renderRoute,
+  resetKeys: () => import_keys.resetKeys
+});
+module.exports = __toCommonJS(index_exports);
+var import_env = require("./env.js");
+var import_keys = require("./keys.js");
+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 index_default = {
+  createEnv: import_env.createEnv,
+  resetKeys: import_keys.resetKeys,
+  assignKeys: import_keys.assignKeys,
+  mapKeysToElements: import_keys.mapKeysToElements,
+  loadProject: import_load.loadProject,
+  loadAndRenderAll: import_load.loadAndRenderAll,
+  render: import_render.render,
+  renderElement: import_render.renderElement,
+  renderRoute: import_render.renderRoute,
+  renderPage: import_render.renderPage,
+  extractMetadata: import_metadata.extractMetadata,
+  generateHeadHtml: import_metadata.generateHeadHtml,
+  collectBrNodes: import_hydrate.collectBrNodes,
+  hydrate: import_hydrate.hydrate
+};

package/dist/cjs/keys.js

@@ -0,0 +1,62 @@
+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 keys_exports = {};
+__export(keys_exports, {
+  assignKeys: () => assignKeys,
+  mapKeysToElements: () => mapKeysToElements,
+  resetKeys: () => resetKeys
+});
+module.exports = __toCommonJS(keys_exports);
+let _keyCounter = 0;
+const resetKeys = () => {
+  _keyCounter = 0;
+};
+const assignKeys = (node) => {
+  if (!node) return;
+  if (node.nodeType === 1) {
+    const key = `br-${_keyCounter++}`;
+    node.setAttribute("data-br", key);
+  }
+  const children = node.childNodes;
+  if (children) {
+    for (let i = 0; i < children.length; i++) {
+      assignKeys(children[i]);
+    }
+  }
+};
+const mapKeysToElements = (element, registry = {}) => {
+  if (!element) return registry;
+  const node = element.node;
+  if (node && node.getAttribute) {
+    const brKey = node.getAttribute("data-br");
+    if (brKey) {
+      if (!element.__ref) element.__ref = {};
+      element.__ref.__brKey = brKey;
+      registry[brKey] = element;
+    }
+  }
+  if (element.__ref && element.__ref.__children) {
+    for (const childKey of element.__ref.__children) {
+      const child = element[childKey];
+      if (child && child.__ref) {
+        mapKeysToElements(child, registry);
+      }
+    }
+  }
+  return registry;
+};

package/dist/cjs/load.js

@@ -0,0 +1,82 @@
+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 load_exports = {};
+__export(load_exports, {
+  loadAndRenderAll: () => loadAndRenderAll,
+  loadProject: () => loadProject
+});
+module.exports = __toCommonJS(load_exports);
+var import_path = require("path");
+const loadProject = async (projectPath) => {
+  const symbolsDir = (0, import_path.resolve)(projectPath, "symbols");
+  const tryImport = async (modulePath) => {
+    try {
+      return await import(modulePath);
+    } catch {
+      return null;
+    }
+  };
+  const [
+    appModule,
+    stateModule,
+    configModule,
+    depsModule,
+    componentsModule,
+    snippetsModule,
+    pagesModule,
+    functionsModule,
+    methodsModule,
+    designSystemModule,
+    filesModule
+  ] = await Promise.all([
+    tryImport((0, import_path.join)(symbolsDir, "app.js")),
+    tryImport((0, import_path.join)(symbolsDir, "state.js")),
+    tryImport((0, import_path.join)(symbolsDir, "config.js")),
+    tryImport((0, import_path.join)(symbolsDir, "dependencies.js")),
+    tryImport((0, import_path.join)(symbolsDir, "components", "index.js")),
+    tryImport((0, import_path.join)(symbolsDir, "snippets", "index.js")),
+    tryImport((0, import_path.join)(symbolsDir, "pages", "index.js")),
+    tryImport((0, import_path.join)(symbolsDir, "functions", "index.js")),
+    tryImport((0, import_path.join)(symbolsDir, "methods", "index.js")),
+    tryImport((0, import_path.join)(symbolsDir, "designSystem", "index.js")),
+    tryImport((0, import_path.join)(symbolsDir, "files", "index.js"))
+  ]);
+  return {
+    app: appModule?.default || {},
+    state: stateModule?.default || {},
+    dependencies: depsModule?.default || {},
+    components: componentsModule || {},
+    snippets: snippetsModule || {},
+    pages: pagesModule?.default || {},
+    functions: functionsModule || {},
+    methods: methodsModule || {},
+    designSystem: designSystemModule?.default || {},
+    files: filesModule?.default || {},
+    config: configModule?.default || {}
+  };
+};
+const loadAndRenderAll = async (projectPath, renderFn) => {
+  const data = await loadProject(projectPath);
+  const pages = data.pages || {};
+  const routes = Object.keys(pages);
+  const results = {};
+  for (const route of routes) {
+    results[route] = await renderFn(data, { route });
+  }
+  return results;
+};