npm - @symbo.ls/brender - Versions diffs - 3.14.7 → 3.14.8 - Mend

@symbo.ls/brender 3.14.7 → 3.14.8

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 (11) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,16 @@
 # @symbo.ls/brender
+## 3.14.8
+### Patch Changes
+- Manual patch bump triggered via workflow_dispatch (scope: @symbo.ls).
+  No source change behind this bump — released to refresh dist or
+  coordinate a cross-package version line.
+- Updated dependencies
+  - @symbo.ls/css@3.14.10
+  - @symbo.ls/helmet@3.14.8
 ## 3.14.7
 ### Patch Changes

package/env.js ADDED Viewed

@@ -0,0 +1,76 @@
+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) => {
+      const id = setTimeout(fn, 0)
+      if (id?.unref) id.unref()
+      return id
+    }
+  }
+  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 = () => {}
+  }
+  // Storage stubs
+  const createStorage = () => {
+    const store = {}
+    return {
+      getItem: (k) => store[k] ?? null,
+      setItem: (k, v) => { store[k] = String(v) },
+      removeItem: (k) => { delete store[k] },
+      clear: () => { for (const k in store) delete store[k] },
+      get length () { return Object.keys(store).length },
+      key: (i) => Object.keys(store)[i] ?? null
+    }
+  }
+  if (!window.localStorage) window.localStorage = createStorage()
+  if (!window.sessionStorage) window.sessionStorage = createStorage()
+  if (!globalThis.localStorage) globalThis.localStorage = window.localStorage
+  if (!globalThis.sessionStorage) globalThis.sessionStorage = window.sessionStorage
+  // Stub MutationObserver for SSR (not provided by linkedom)
+  if (!window.MutationObserver) {
+    window.MutationObserver = class MutationObserver {
+      constructor () {}
+      observe () {}
+      disconnect () {}
+      takeRecords () { return [] }
+    }
+  }
+  // Expose linkedom constructors on globalThis so @symbo.ls/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.Element = window.Element || globalThis.Element
+  globalThis.HTMLElement = window.HTMLElement || globalThis.HTMLElement
+  globalThis.MutationObserver = window.MutationObserver
+  globalThis.Window = window.constructor
+  return { window, document }
+}

package/hydrate.js ADDED Viewed

@@ -0,0 +1,462 @@
+/**
+ * Client-side hydration — reconnects pre-rendered HTML (with data-br keys)
+ * to a live DOMQL element tree, attaches events, and fires lifecycle hooks.
+ *
+ * After hydration the DOMQL tree owns every DOM node:
+ * - el.node points to the real DOM element
+ * - node.ref points back to the DOMQL element
+ * - CSS classes are generated via emotion and applied
+ * - DOM events (click, input, etc.) are bound
+ * - on.render / on.renderRouter callbacks fire
+ */
+/**
+ * Collects all elements with data-br attributes from the document.
+ * Returns a map of brKey -> DOM node.
+ */
+export 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
+}
+/**
+ * Walks a DOMQL element tree that was created with onlyResolveExtends.
+ * For each element with a __brKey, attaches the matching real DOM node,
+ * renders CSS via emotion, binds DOM events, and fires lifecycle hooks.
+ *
+ * @param {object} element - Root DOMQL element (from create with onlyResolveExtends)
+ * @param {object} [options]
+ * @param {Element} [options.root] - Root DOM element to scan for data-br nodes
+ * @param {boolean} [options.events=true] - Attach DOM events (click, input, etc.)
+ * @param {boolean} [options.renderEvents=true] - Fire on.render / on.renderRouter
+ * @param {object} [options.emotion] - Emotion instance for CSS class generation
+ * @param {object} [options.designSystem] - Design system with color/media/spacing definitions
+ * @returns {{ element: object, linked: number, unlinked: number }}
+ */
+export 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 }
+}
+/**
+ * Renders CSS for an element: resolves props into a CSS object,
+ * resolves design system values (colors, media queries, pseudo-classes),
+ * generates emotion class name, and applies it to the DOM node.
+ */
+const renderCSS = (el, emotion, colorMap, mediaMap) => {
+  const { node } = el
+  if (!node) return
+  const css = {}
+  let hasCss = false
+  for (const key in el) {
+    const val = el[key]
+    // @media breakpoint objects: @mobile, @tablet, etc.
+    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
+    }
+    // :pseudo-class objects: :hover, :focus, :active, etc.
+    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
+    }
+    // Resolve DOMQL shorthands (flexAlign, round, boxSize, etc.)
+    const expanded = resolveShorthand(key, val)
+    if (expanded) {
+      for (const ek in expanded) {
+        css[ek] = resolveValue(ek, expanded[ek], colorMap)
+      }
+      hasCss = true
+      continue
+    }
+    // Skip non-CSS props
+    if (!isCSS(key)) continue
+    // Resolve design system color values
+    css[key] = resolveValue(key, val, colorMap)
+    hasCss = true
+  }
+  // Inject CSS from extends chain (e.g. extends: 'Flex' → display: flex)
+  const extsCss = getExtendsCSS(el)
+  if (extsCss) {
+    for (const [k, v] of Object.entries(extsCss)) {
+      if (!css[k]) { css[k] = v; hasCss = true }
+    }
+  }
+  // Handle element.style object
+  if (el.style && typeof el.style === 'object') {
+    Object.assign(css, el.style)
+    hasCss = true
+  }
+  if (!hasCss) return
+  // Generate emotion class
+  const emotionClass = emotion.css(css)
+  // Build final class string
+  const classes = []
+  if (emotionClass) classes.push(emotionClass)
+  // Preserve key-based classname (keys starting with _ become class names)
+  if (typeof el.key === 'string' && el.key.charCodeAt(0) === 95 && el.key.charCodeAt(1) !== 95) {
+    classes.push(el.key.slice(1))
+  }
+  // Preserve explicit class from props/attr
+  if (el.class) classes.push(el.class)
+  if (el.attr?.class) classes.push(el.attr.class)
+  // Handle classlist
+  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(' '))
+  }
+  // Clean up CSS prop attributes that leaked into HTML
+  for (const key in el) {
+    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 = 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 = 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'
+])
+// Map of component names to their implicit CSS from extends
+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
+}
+// DOMQL shorthand props that expand to multiple CSS properties
+const resolveShorthand = (key, val) => {
+  if (typeof val === 'undefined' || val === null) return null
+  // Flex shorthands
+  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 }
+  }
+  // Box/size shorthands
+  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 }
+  }
+  // Grid aliases
+  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 = 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'
+])
+/**
+ * Binds DOM events from element's onX properties onto the real node.
+ */
+const DOMQL_LIFECYCLE = new Set([
+  'render', 'create', 'init', 'start', 'complete', 'done',
+  'beforeClassAssign', 'attachNode', 'stateInit', 'stateCreated',
+  'renderRouter', 'lazyLoad', 'error'
+])
+const bindEvents = (el) => {
+  const { node } = el
+  if (!node) return
+  if (!el.__ref.__eventCleanup) el.__ref.__eventCleanup = []
+  // v3.14: event handlers are flat on element as onX properties
+  for (const key in el) {
+    if (key.length <= 2 || key[0] !== 'o' || key[1] !== 'n') continue
+    if (typeof el[key] !== 'function') continue
+    const third = key[2]
+    if (third !== third.toUpperCase()) continue
+    const eventName = third.toLowerCase() + key.slice(3)
+    if (DOMQL_LIFECYCLE.has(eventName)) continue
+    addListener(node, eventName, el[key], el)
+  }
+}
+const addListener = (node, eventName, handler, el) => {
+  const listener = (event) => {
+    try {
+      handler.call(el, event, el, el.state, el.context)
+    } catch (e) {
+      console.warn('[brender hydrate]', eventName, e.message)
+    }
+  }
+  node.addEventListener(eventName, listener)
+  el.__ref.__eventCleanup.push(() => node.removeEventListener(eventName, listener))
+}
+/**
+ * Walks the tree and fires onRender, onRenderRouter, onDone, onCreate
+ * lifecycle events — the same ones that fire during normal DOMQL create.
+ */
+const fireLifecycle = (el) => {
+  if (!el || !el.__ref || !el.node) return
+  fireEvent(el.onRender, el)
+  fireEvent(el.onRenderRouter, el)
+  fireEvent(el.onDone, el)
+  fireEvent(el.onCreate, 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/index.js ADDED Viewed

@@ -0,0 +1,54 @@
+import { createEnv } from './env.js'
+import { resetKeys, assignKeys, mapKeysToElements } from './keys.js'
+import { loadProject, loadAndRenderAll } from './load.js'
+import { render, renderElement, renderRoute, renderPage, resetGlobalCSSCache, getAccumulatedEmotionCSS, replaceEmotionCSS } from './render.js'
+import { extractMetadata, generateHeadHtml } from './metadata.js'
+import { collectBrNodes, hydrate } from './hydrate.js'
+import { generateSitemap } from './sitemap.js'
+import { prefetchPageData, injectPrefetchedState } from './prefetch.js'
+export {
+  createEnv,
+  resetKeys,
+  assignKeys,
+  mapKeysToElements,
+  loadProject,
+  loadAndRenderAll,
+  render,
+  renderElement,
+  renderRoute,
+  renderPage,
+  resetGlobalCSSCache,
+  getAccumulatedEmotionCSS,
+  replaceEmotionCSS,
+  extractMetadata,
+  generateHeadHtml,
+  collectBrNodes,
+  hydrate,
+  generateSitemap,
+  prefetchPageData,
+  injectPrefetchedState
+}
+export default {
+  createEnv,
+  resetKeys,
+  assignKeys,
+  mapKeysToElements,
+  loadProject,
+  loadAndRenderAll,
+  render,
+  renderElement,
+  renderRoute,
+  renderPage,
+  resetGlobalCSSCache,
+  getAccumulatedEmotionCSS,
+  replaceEmotionCSS,
+  extractMetadata,
+  generateHeadHtml,
+  collectBrNodes,
+  hydrate,
+  generateSitemap,
+  prefetchPageData,
+  injectPrefetchedState
+}

package/keys.js ADDED Viewed

@@ -0,0 +1,54 @@
+let _keyCounter = 0
+export const resetKeys = () => {
+  _keyCounter = 0
+}
+/**
+ * Recursively assigns `data-br` attributes to all element nodes.
+ * These keys allow qsql to remap static HTML back onto DOMQL elements.
+ */
+export 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])
+    }
+  }
+}
+/**
+ * Walks a DOMQL element tree and builds a registry
+ * mapping data-br keys to DOMQL elements.
+ */
+export 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
+}