smbls 3.8.1 → 3.8.2

package/dist/esm/package.json

@@ -1 +1 @@
-{"name":"smbls","version":"3.8.0"}
+{"name":"smbls","version":"3.8.1"}

package/dist/esm/src/createDomql.js

@@ -27,6 +27,7 @@ import { polyglotPlugin } from "@symbo.ls/polyglot";
 import { polyglotFunctions } from "@symbo.ls/polyglot/functions";
 import { helmetPlugin } from "@symbo.ls/helmet";
 import { fetchPlugin } from "@symbo.ls/fetch";
+import { hydrate, assignBrKeysFromRegistry } from "./hydrate.js";
 const prepareContext = async (app, context = {}) => {
   const key = context.key = context.key || (isString(app) ? app : "smblsapp");
   context.define = context.define || defaultDefine;
@@ -122,6 +123,57 @@ const createDomqlElement = async (app, ctx) => {
 const hydrateFromBrender = async (app, ctx, doc, win) => {
   const parentNode = ctx.parent || doc.body;
   const domqlCreate = DOM.default && DOM.default.create || DOM.create;
+  const brRegistry = win.__BR_REGISTRY__ || {};
+  const hasRegistry = Object.keys(brRegistry).length > 0;
+  if (hasRegistry) {
+    const ssrShell = parentNode.querySelector ? parentNode.querySelector(":scope > [data-ssr]") || doc.querySelector("[data-ssr]") : null;
+    if (ssrShell) {
+      const frag = doc.createDocumentFragment ? doc.createDocumentFragment() : null;
+      if (frag) {
+        while (ssrShell.firstChild) frag.appendChild(ssrShell.firstChild);
+        parentNode.insertBefore(frag, ssrShell);
+        ssrShell.remove();
+      }
+    }
+    let skeleton;
+    try {
+      skeleton = await domqlCreate(app, parentNode, ctx.key, {
+        verbose: ctx.verbose,
+        ...ctx.domqlOptions,
+        onlyResolveExtends: true
+      });
+    } catch (e) {
+      console.warn("[smbls] Skeleton creation failed, falling back to full render:", e.message);
+      return fallbackRender(domqlCreate, app, parentNode, ctx, win);
+    }
+    if (!skeleton) {
+      return fallbackRender(domqlCreate, app, parentNode, ctx, win);
+    }
+    assignBrKeysFromRegistry(skeleton, brRegistry);
+    const result = hydrate(skeleton, {
+      root: doc,
+      emotion: ctx.emotion,
+      designSystem: ctx.designSystem,
+      events: true,
+      renderEvents: true
+    });
+    if (result.linked === 0 && result.unlinked > 0) {
+      console.warn(
+        `[smbls] Hydration linked 0/${result.linked + result.unlinked} elements \u2014 falling back to full render. Pre-rendered structure may have changed.`
+      );
+      return fallbackRender(domqlCreate, app, parentNode, ctx, win);
+    }
+    if (result.unlinked > 0) {
+      console.debug(
+        `[smbls] Hydration: ${result.linked} linked, ${result.unlinked} unlinked elements`
+      );
+    }
+    cleanup(win);
+    return skeleton;
+  }
+  return fallbackRender(domqlCreate, app, parentNode, ctx, win);
+};
+const fallbackRender = async (domqlCreate, app, parentNode, ctx, win) => {
   const toRemove = [];
   for (const child of parentNode.childNodes) {
     if (child.nodeType === 1) {
@@ -133,12 +185,16 @@ const hydrateFromBrender = async (app, ctx, doc, win) => {
   toRemove.forEach((n) => n.remove());
   const smblsApp = await domqlCreate(app, parentNode, ctx.key, {
     verbose: ctx.verbose,
-    ...ctx.domqlOptions,
-    onlyResolveExtends: false
+    ...ctx.domqlOptions
   });
-  delete win.__BRENDER__;
+  cleanup(win);
   return smblsApp;
 };
+const cleanup = (win) => {
+  if (!win) return;
+  delete win.__BRENDER__;
+  delete win.__BR_REGISTRY__;
+};
 export {
   createDomqlElement,
   prepareContext

package/dist/esm/src/hydrate.js

@@ -0,0 +1,558 @@
+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 assignBrKeysFromRegistry = (element, registry, path = "") => {
+  if (!element || !element.__ref) return;
+  const lookupKey = path || "__root";
+  const brKey = registry[lookupKey];
+  if (brKey !== void 0) element.__ref.__brKey = brKey;
+  if (element.__ref.__children) {
+    for (const childKey of element.__ref.__children) {
+      const child = element[childKey];
+      if (child && child.__ref) {
+        const childPath = path ? `${path}.${childKey}` : childKey;
+        assignBrKeysFromRegistry(child, registry, childPath);
+      }
+    }
+  }
+};
+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;
+  }
+  const extsCss = getExtendsCSS(el);
+  if (extsCss) {
+    for (const [k, v] of Object.entries(extsCss)) {
+      if (!css[k]) {
+        css[k] = v;
+        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 EXTENDS_CSS = {
+  Flex: { display: "flex" },
+  InlineFlex: { display: "inline-flex" },
+  Grid: { display: "grid" },
+  InlineGrid: { display: "inline-grid" },
+  Block: { display: "block" },
+  Inline: { display: "inline" }
+};
+const getExtendsCSS = (el) => {
+  const exts = el.__ref?.__extends;
+  if (!exts || !Array.isArray(exts)) return null;
+  for (const ext of exts) {
+    if (EXTENDS_CSS[ext]) return EXTENDS_CSS[ext];
+  }
+  return null;
+};
+const resolveShorthand = (key, val) => {
+  if (typeof val === "undefined" || val === null) return null;
+  if (key === "flow" && typeof val === "string") {
+    let [direction, wrap] = (val || "row").split(" ");
+    if (val.startsWith("x") || val === "row") direction = "row";
+    if (val.startsWith("y") || val === "column") direction = "column";
+    return { display: "flex", flexFlow: (direction || "") + " " + (wrap || "") };
+  }
+  if (key === "wrap") return { display: "flex", flexWrap: val };
+  if ((key === "align" || 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 === "flexFlow" && typeof val === "string") {
+    let [direction, wrap] = (val || "row").split(" ");
+    if (val.startsWith("x") || val === "row") direction = "row";
+    if (val.startsWith("y") || val === "column") direction = "column";
+    return { display: "flex", flexFlow: (direction || "") + " " + (wrap || "") };
+  }
+  if (key === "flexWrap") return { display: "flex", flexWrap: val };
+  if (key === "round" || key === "borderRadius" && val) {
+    return { borderRadius: typeof val === "number" ? val + "px" : val };
+  }
+  if (key === "boxSize" && typeof val === "string") {
+    const [height, width] = val.split(" ");
+    return { height, width: width || height };
+  }
+  if (key === "widthRange" && typeof val === "string") {
+    const [minWidth, maxWidth] = val.split(" ");
+    return { minWidth, maxWidth: maxWidth || minWidth };
+  }
+  if (key === "heightRange" && typeof val === "string") {
+    const [minHeight, maxHeight] = val.split(" ");
+    return { minHeight, maxHeight: maxHeight || minHeight };
+  }
+  if (key === "column") return { gridColumn: val };
+  if (key === "columns") return { gridTemplateColumns: val };
+  if (key === "templateColumns") return { gridTemplateColumns: val };
+  if (key === "row") return { gridRow: val };
+  if (key === "rows") return { gridTemplateRows: val };
+  if (key === "templateRows") return { gridTemplateRows: val };
+  if (key === "area") return { gridArea: val };
+  if (key === "template") return { gridTemplate: val };
+  if (key === "templateAreas") return { gridTemplateAreas: val };
+  if (key === "autoColumns") return { gridAutoColumns: val };
+  if (key === "autoRows") return { gridAutoRows: val };
+  if (key === "autoFlow") return { gridAutoFlow: val };
+  if (key === "columnStart") return { gridColumnStart: val };
+  if (key === "rowStart") return { gridRowStart: 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",
+  "inset",
+  "inlineSize",
+  "blockSize",
+  "minInlineSize",
+  "maxInlineSize",
+  "minBlockSize",
+  "maxBlockSize",
+  "paddingBlockStart",
+  "paddingBlockEnd",
+  "paddingInlineStart",
+  "paddingInlineEnd",
+  "marginBlockStart",
+  "marginBlockEnd",
+  "marginInlineStart",
+  "marginInlineEnd",
+  "transform",
+  "transformOrigin",
+  "transition",
+  "animation",
+  "animationName",
+  "animationDuration",
+  "animationDelay",
+  "animationTimingFunction",
+  "animationFillMode",
+  "animationIterationCount",
+  "animationPlayState",
+  "animationDirection",
+  "gridTemplate",
+  "gridTemplateAreas",
+  "gridColumnStart",
+  "gridRowStart",
+  "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("[smbls hydrate]", el.key, e.message);
+  }
+};
+export {
+  assignBrKeysFromRegistry,
+  collectBrNodes,
+  hydrate
+};