smbls 3.14.2 → 3.14.6

package/src/fetchOnCreate.js

@@ -1,125 +0,0 @@
-'use strict'
-
-import { isArray, isFunction, isObject, window, isDevelopment, overwriteDeep, deepDestringifyFunctions } from '@symbo.ls/utils'
-
-const IS_DEVELOPMENT =
-  window && window.location
-    ? window.location.host.includes('dev.')
-    : isDevelopment()
-
-const SERVER_URL = IS_DEVELOPMENT
-  ? 'http://localhost:8080/get'
-  : 'https://api.symbols.app/get'
-
-const defaultOptions = {
-  endpoint: SERVER_URL
-}
-
-const fetchRemote = async (key, options = defaultOptions) => {
-  const baseUrl = options.endpoint || SERVER_URL
-  const route = options.serviceRoute
-    ? isArray(options.serviceRoute)
-      ? options.serviceRoute.map((v) => v.toLowerCase() + '=true').join('&')
-      : options.serviceRoute
-    : ''
-
-  let response
-  try {
-    response = await globalThis.fetch(baseUrl + '/' + '?' + route, {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json',
-        'X-AppKey': key,
-        'X-Metadata': options.metadata
-      }
-    })
-
-    return await response.json()
-  } catch (e) {
-    if (isFunction(options.onError)) return options.onError(e)
-    else console.error(e)
-  }
-}
-
-const fetchProject = async (key, options) => {
-  const { editor } = options
-
-  if (editor && editor.remote) {
-    const data = await fetchRemote(key, editor)
-    const evalData =
-      IS_DEVELOPMENT || options.isDevelopment
-        ? deepDestringifyFunctions(data)
-        : deepDestringifyFunctions(data.releases[0])
-
-    if (editor.serviceRoute) {
-      if (isArray(editor.serviceRoute)) {
-        editor.serviceRoute.forEach((route) => {
-          overwriteDeep(options[route], evalData[route.toLowerCase()])
-        })
-      } else {
-        overwriteDeep(options[editor.serviceRoute], evalData)
-      }
-    } else {
-      ;[
-        'state',
-        'designSystem',
-        'components',
-        'snippets',
-        'pages',
-        'utils',
-        'files',
-        'assets',
-        'packages',
-        'functions',
-        'globalScope'
-      ].forEach((key) => {
-        overwriteDeep(options[key], evalData[key.toLowerCase()])
-      })
-    }
-  }
-
-  return options
-}
-
-const fetchProjectAsync = async (key, options, callback) => {
-  const { editor } = options
-
-  if (editor && editor.remote) {
-    const data = await fetchRemote(key, editor)
-    const evalData =
-      IS_DEVELOPMENT || options.isDevelopment
-        ? deepDestringifyFunctions(data)
-        : deepDestringifyFunctions(data.releases[0])
-    callback(evalData)
-  }
-}
-
-export const fetchSync = async (key, options) => {
-  if (key && options.editor) {
-    try {
-      if (!options.editor.async) await fetchProject(key, options)
-    } catch (e) {
-      console.error(e)
-    }
-  }
-}
-
-export const fetchAsync = (app, key, options, callback) => {
-  if (key && options.editor) {
-    try {
-      if (options.editor.async) {
-        fetchProjectAsync(key, options, callback || ((data) => {
-          const designSystem = data.designSystem
-          if (isObject(designSystem)) {
-            options.utils.init(designSystem)
-          }
-          if (isObject(data.state)) {
-            app.state.set(data.state)
-          }
-        }))
-      }
-    } catch (e) {
-      console.error(e)
-    }
-  }
-}

package/src/hydrate.js

@@ -1,495 +0,0 @@
-'use strict'
-
-/**
- * Client-side hydration — reconnects pre-rendered HTML (with data-br keys)
- * to a live DOMQL element tree, attaches events, and fires lifecycle hooks.
- *
- * This module is part of the smbls browser bundle (IIFE / browser build).
- * It is intentionally self-contained — no imports — so it can be bundled
- * without pulling in any server-only dependencies.
- *
- * After hydration the DOMQL tree owns every DOM node:
- * - el.node points to the real (pre-rendered) DOM element
- * - node.ref points back to the DOMQL element
- * - CSS classes are generated via @symbo.ls/css and applied
- * - DOM events (click, input, etc.) are bound
- * - on.render / on.renderRouter / on.done / on.create callbacks fire
- */
-
-// ── DOM scanning ──────────────────────────────────────────────────────────────
-
-/**
- * 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
-}
-
-// ── Registry helpers ──────────────────────────────────────────────────────────
-
-/**
- * Assign __brKey values to skeleton elements from the BR registry.
- * The registry maps element path (dot-separated key chain) to brKey.
- *
- * Example registry: { '__root': 'br-0', 'Header': 'br-5', 'Header.Nav': 'br-8' }
- */
-export const assignBrKeysFromRegistry = (element, registry, path = '') => {
-  if (!element || !element.__ref) return
-
-  const lookupKey = path || '__root'
-  const brKey = registry[lookupKey]
-  if (brKey !== undefined) 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)
-      }
-    }
-  }
-}
-
-// ── Main hydration ────────────────────────────────────────────────────────────
-
-/**
- * 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 @symbo.ls/css, binds DOM events, and fires lifecycle hooks.
- *
- * @param {object} element - Root DOMQL element (skeleton)
- * @param {object} [options]
- * @param {Element|Document} [options.root] - Root to scan for data-br nodes
- * @param {boolean} [options.events=true] - Attach DOM events
- * @param {boolean} [options.renderEvents=true] - Fire on.render / on.renderRouter
- * @param {object} [options.cssEngine] - CSS engine instance ({ css }) for class generation
- * @param {object} [options.designSystem] - Design system (color, media tokens)
- * @returns {{ element, linked: number, unlinked: number }}
- */
-export const hydrate = (element, options = {}) => {
-  const {
-    root,
-    events: attachEvents = true,
-    renderEvents: fireRenderEvents = true,
-    cssEngine,
-    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 (cssEngine) {
-          renderCSS(el, cssEngine, 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 }
-}
-
-// ── CSS rendering ─────────────────────────────────────────────────────────────
-
-/**
- * Renders CSS for an element: resolves props into a CSS object,
- * resolves design system values (colors, media queries, pseudo-classes),
- * generates a CSS class name, and applies it to the DOM node.
- */
-const renderCSS = (el, cssEngine, 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 (flow, align, 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
-
-    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
-
-  const cssClass = cssEngine.css(css)
-
-  const classes = []
-  if (cssClass) classes.push(cssClass)
-
-  // Preserve key-based classname (_key → class)
-  if (typeof el.key === 'string' && el.key.charCodeAt(0) === 95 && el.key.charCodeAt(1) !== 95) {
-    classes.push(el.key.slice(1))
-  }
-
-  if (el.class) classes.push(el.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(cssEngine.css(v))
-      }
-    }
-  }
-
-  if (classes.length) {
-    node.setAttribute('class', classes.join(' '))
-  }
-
-  // Clean up leaked CSS prop attributes from SSR
-  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 // uppercase = component ref
-  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'
-])
-
-// ── Event binding ─────────────────────────────────────────────────────────────
-
-const DOMQL_LIFECYCLE = new Set([
-  'render', 'create', 'init', 'start', 'complete', 'done',
-  'beforeClassAssign', 'attachNode', 'stateInit', 'stateCreated',
-  'renderRouter', 'lazyLoad', 'error'
-])
-
-/**
- * Binds DOM events from element's onX properties onto the real node.
- */
-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('[smbls hydrate]', eventName, e.message)
-    }
-  }
-  node.addEventListener(eventName, listener)
-  el.__ref.__eventCleanup.push(() => node.removeEventListener(eventName, listener))
-}
-
-// ── Lifecycle ─────────────────────────────────────────────────────────────────
-
-/**
- * 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('[smbls hydrate]', el.key, e.message)
-  }
-}