@quicktvui/web-renderer 1.0.0

package/src/core/templateBinding.js

@@ -0,0 +1,666 @@
+export function extractTemplateValueByPath(propPath, data) {
+  let value = propPath.split('.').reduce((obj, key) => {
+    return obj && obj[key] !== undefined ? obj[key] : undefined
+  }, data)
+  return value
+}
+
+export function extractTemplateValue(placeholder, data) {
+  if (!placeholder || !data) return placeholder
+  const match = String(placeholder).match(/^\$\{([^}]+)\}$/)
+  if (!match) return placeholder
+  return extractTemplateValueByPath(match[1], data)
+}
+
+export function replaceTemplatePlaceholders(str, data) {
+  if (!str || !data) return str
+  return String(str).replace(/\$\{([^}]+)\}/g, (match, propPath) => {
+    const value = extractTemplateValueByPath(propPath, data)
+    return value !== undefined ? String(value) : match
+  })
+}
+
+function _normalizeWebAssetSrc(src) {
+  if (!src || typeof src !== 'string') return src
+  if (src.startsWith('file://')) {
+    let rest = src.slice(7)
+    rest = rest.replace(/^\/+/, '')
+    if (rest.startsWith('./')) rest = rest.slice(2)
+    return './' + rest
+  }
+  if (src.startsWith('assets/')) return './' + src
+  return src
+}
+
+function _applyFlexStyleToElement(element, styleObj) {
+  if (!styleObj || typeof styleObj !== 'object') return
+
+  // Flex properties that require display: flex
+  const flexProperties = [
+    'flexDirection',
+    'justifyContent',
+    'alignItems',
+    'alignContent',
+    'flexWrap',
+    'flexGrow',
+    'flexShrink',
+    'flexBasis',
+    'order',
+    'alignSelf',
+  ]
+
+  // Check if any flex property is being set
+  const hasFlexProperty = Object.keys(styleObj).some((key) => flexProperties.includes(key))
+
+  // If flex properties are set and display is not explicitly set, add display: flex
+  // This matches Hippy's behavior where all elements default to flex layout
+  if (hasFlexProperty && !Object.keys(styleObj).includes('display')) {
+    element.style.display = 'flex'
+  }
+
+  Object.keys(styleObj).forEach((key) => {
+    let value = styleObj[key]
+
+    if (typeof value === 'number') {
+      const needsPx = [
+        'width',
+        'height',
+        'minWidth',
+        'minHeight',
+        'maxWidth',
+        'maxHeight',
+        'padding',
+        'paddingTop',
+        'paddingRight',
+        'paddingBottom',
+        'paddingLeft',
+        'margin',
+        'marginTop',
+        'marginRight',
+        'marginBottom',
+        'marginLeft',
+        'top',
+        'left',
+        'right',
+        'bottom',
+        'borderRadius',
+        'borderWidth',
+        'fontSize',
+        'lineHeight',
+        'letterSpacing',
+        'gap',
+        'rowGap',
+        'columnGap',
+      ].includes(key)
+
+      if (needsPx) {
+        value = value + 'px'
+      }
+    }
+
+    try {
+      if (key !== 'x' && key !== 'y') {
+        element.style[key] = value
+      }
+    } catch (e) {
+      try {
+        if (key !== 'x' && key !== 'y') {
+          const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase()
+          element.style.setProperty(cssKey, value)
+        }
+      } catch (err) {}
+    }
+  })
+}
+
+function _applyLayoutToElement(element, layout) {
+  if (!layout) return
+
+  if (Array.isArray(layout)) {
+    const x = layout[0]
+    const y = layout[1]
+    const width = layout[2]
+    const height = layout[3]
+
+    const position = element.style.position || ''
+    const allowXY =
+      position === '' || position === 'absolute' || position === 'fixed' || position === 'relative'
+
+    if (allowXY && x !== undefined && x !== null) {
+      element.style.left = typeof x === 'number' ? `${x}px` : x
+    }
+    if (allowXY && y !== undefined && y !== null) {
+      element.style.top = typeof y === 'number' ? `${y}px` : y
+    }
+    if (width !== undefined && width !== null) {
+      element.style.width = typeof width === 'number' ? `${width}px` : width
+    }
+    if (height !== undefined && height !== null) {
+      element.style.height = typeof height === 'number' ? `${height}px` : height
+    }
+
+    if (
+      allowXY &&
+      (x !== undefined || y !== undefined) &&
+      (!element.style.position || element.style.position === 'relative')
+    ) {
+      element.style.position = 'absolute'
+    }
+    return
+  }
+
+  if (typeof layout === 'object') {
+    const { x, y, width, height } = layout
+
+    const position = element.style.position || ''
+    const allowXY =
+      position === '' || position === 'absolute' || position === 'fixed' || position === 'relative'
+
+    if (allowXY && x !== undefined && x !== null) {
+      element.style.left = typeof x === 'number' ? `${x}px` : x
+    }
+    if (allowXY && y !== undefined && y !== null) {
+      element.style.top = typeof y === 'number' ? `${y}px` : y
+    }
+    if (width !== undefined && width !== null) {
+      element.style.width = typeof width === 'number' ? `${width}px` : width
+    }
+    if (height !== undefined && height !== null) {
+      element.style.height = typeof height === 'number' ? `${height}px` : height
+    }
+
+    if (
+      allowXY &&
+      (x !== undefined || y !== undefined) &&
+      (!element.style.position || element.style.position === 'relative')
+    ) {
+      element.style.position = 'absolute'
+    }
+  }
+}
+
+function _applyDecorationToElement(element, decoration) {
+  if (!decoration || typeof decoration !== 'object') return
+
+  const { left, top, right, bottom } = decoration
+
+  if (left !== undefined && left !== null) {
+    element.style.marginLeft = typeof left === 'number' ? `${left}px` : left
+  }
+  if (top !== undefined && top !== null) {
+    element.style.marginTop = typeof top === 'number' ? `${top}px` : top
+  }
+  if (right !== undefined && right !== null) {
+    element.style.marginRight = typeof right === 'number' ? `${right}px` : right
+  }
+  if (bottom !== undefined && bottom !== null) {
+    element.style.marginBottom = typeof bottom === 'number' ? `${bottom}px` : bottom
+  }
+}
+
+function _applySizeToElement(element, size) {
+  if (!size) return
+
+  if (Array.isArray(size)) {
+    const width = size[0]
+    const height = size[1]
+
+    if (width !== undefined && width !== null) {
+      element.style.width = typeof width === 'number' ? `${width}px` : width
+    }
+    if (height !== undefined && height !== null) {
+      element.style.height = typeof height === 'number' ? `${height}px` : height
+    }
+    return
+  }
+
+  if (typeof size === 'object') {
+    const { width, height } = size
+
+    if (width !== undefined && width !== null) {
+      element.style.width = typeof width === 'number' ? `${width}px` : width
+    }
+    if (height !== undefined && height !== null) {
+      element.style.height = typeof height === 'number' ? `${height}px` : height
+    }
+  }
+}
+
+function _findComponentForElement(el) {
+  const registry = window.__HIPPY_COMPONENT_REGISTRY__
+  if (!registry) return null
+  return registry.get(el) || null
+}
+
+/**
+ * Evaluate showIf expression
+ * Supports (aligned with Android):
+ * - Simple property: showIf="${isPlaying}" - truthy check
+ * - Equality with true: showIf="${isPlaying == true}"
+ * - Equality with false: showIf="${isHidden == false}"
+ * @param {string} expression - The showIf expression
+ * @param {object} data - The data object to resolve values from
+ * @returns {boolean} - Whether the element should be shown
+ */
+function _evaluateShowIf(expression, data) {
+  if (!expression) return true
+
+  // Check if it's a template variable ${...}
+  const templateMatch = expression.match(/^\$\{([^}]+)\}$/)
+  if (!templateMatch) {
+    // Not a template, treat as literal boolean
+    return !!expression
+  }
+
+  const expr = templateMatch[1].trim()
+
+  // Handle == true or == false
+  if (expr.includes('==')) {
+    const parts = expr.split('==').map((s) => s.trim())
+    if (parts.length === 2) {
+      const propValue = extractTemplateValueByPath(parts[0], data)
+      const compareValue = parts[1].trim()
+
+      if (compareValue === 'true') {
+        return propValue === true
+      } else if (compareValue === 'false') {
+        return propValue === false
+      }
+    }
+  }
+
+  // Simple property access - truthy check
+  const value = extractTemplateValueByPath(expr, data)
+  console.log(
+    '[templateBinding] _evaluateShowIf: expr=',
+    expr,
+    'value=',
+    value,
+    'typeof=',
+    typeof value,
+    'result=',
+    !!value
+  )
+  return !!value
+}
+
+function _findComponentForNode(node) {
+  let el = node && node.nodeType === Node.TEXT_NODE ? node.parentElement : node
+  while (el) {
+    const component = _findComponentForElement(el)
+    if (component) return component
+    el = el.parentElement
+  }
+  return null
+}
+
+function _resolveValueOrString(templateStr, data) {
+  const match = String(templateStr).match(/^\$\{([^}]+)\}$/)
+  if (match) {
+    return { isPure: true, value: extractTemplateValueByPath(match[1], data) }
+  }
+  return { isPure: false, value: replaceTemplatePlaceholders(templateStr, data) }
+}
+
+function _getQtTextInnerSpan(textRoot) {
+  if (!textRoot || textRoot.nodeType !== Node.ELEMENT_NODE) return null
+  const children = textRoot.children
+  if (!children || children.length === 0) return null
+  for (const child of Array.from(children)) {
+    if (child.classList && child.classList.contains('qt-text-inner')) return child
+  }
+  return null
+}
+
+function _syncDomOnlyQtTextAutoWidth(textRoot) {
+  if (!textRoot || textRoot.nodeType !== Node.ELEMENT_NODE) return
+  if (
+    textRoot.hasAttribute &&
+    !(textRoot.hasAttribute('autoWidth') || textRoot.hasAttribute('autowidth'))
+  ) {
+    return
+  }
+
+  const inner = _getQtTextInnerSpan(textRoot)
+  if (!inner) return
+
+  const textWidth = inner.scrollWidth || inner.offsetWidth
+  if (textWidth <= 0) return
+
+  textRoot.style.width = textWidth + 'px'
+  textRoot.style.minWidth = textWidth + 'px'
+
+  let parent = textRoot.parentElement
+  while (parent) {
+    if (
+      parent.hasAttribute &&
+      (parent.hasAttribute('autoWidth') || parent.hasAttribute('autowidth'))
+    ) {
+      const style = window.getComputedStyle(parent)
+      const paddingLeft = parseInt(style.paddingLeft) || 0
+      const paddingRight = parseInt(style.paddingRight) || 0
+      const parentWidth = textWidth + paddingLeft + paddingRight
+
+      parent.style.width = parentWidth + 'px'
+      parent.style.minWidth = parentWidth + 'px'
+
+      parent.querySelectorAll('[autoWidth], [autowidth]').forEach((el) => {
+        if (el === textRoot) return
+        if (_getQtTextInnerSpan(el)) return
+        const elStyle = window.getComputedStyle(el)
+        if (elStyle.position === 'absolute') {
+          el.style.left = '0'
+          el.style.right = '0'
+          el.style.width = 'auto'
+        }
+      })
+      break
+    }
+    parent = parent.parentElement
+  }
+}
+
+export function syncDomAutoWidthIn(root) {
+  if (!root || root.nodeType !== Node.ELEMENT_NODE) return
+  if (!root.querySelector) return
+
+  root.querySelectorAll('[autoWidth], [autowidth]').forEach((el) => {
+    const inner = _getQtTextInnerSpan(el)
+    if (inner) _syncDomOnlyQtTextAutoWidth(el)
+  })
+}
+
+export function bindTemplateDataToNode(node, data, options = {}) {
+  if (!data) return
+
+  const scope = options.scope || {}
+  const combinedData = { ...scope, ...data }
+
+  if (node.nodeType === Node.TEXT_NODE) {
+    const text = node.textContent
+    if (text && text.includes('${')) {
+      const newText = replaceTemplatePlaceholders(text, combinedData)
+      if (newText !== text) {
+        const parent = node.parentElement
+        const component =
+          parent && parent.classList && parent.classList.contains('qt-text-inner')
+            ? _findComponentForNode(node)
+            : null
+        if (component && typeof component.setText === 'function') {
+          component.setText(newText)
+        } else {
+          node.textContent = newText
+          if (parent && parent.classList && parent.classList.contains('qt-text-inner')) {
+            _syncDomOnlyQtTextAutoWidth(parent.parentElement)
+          }
+        }
+      }
+    }
+    return
+  }
+
+  if (node.nodeType !== Node.ELEMENT_NODE) return
+
+  for (const child of Array.from(node.childNodes)) {
+    if (
+      child.nodeType === Node.TEXT_NODE &&
+      child.textContent &&
+      child.textContent.includes('${')
+    ) {
+      bindTemplateDataToNode(child, combinedData, options)
+    }
+  }
+
+  const component = _findComponentForElement(node)
+
+  // Flag to track if we should process children recursively
+  // When a node has a 'list' attribute, its children will be processed separately
+  // with the correct item data during sublist rendering
+  let shouldProcessChildren = true
+
+  // Handle type attribute - negative logic filtering
+  const typeAttr = node.getAttribute('data-template-type') ?? node.getAttribute('type')
+  if (typeAttr !== null && typeAttr !== undefined && typeAttr !== '') {
+    let nodeTypeStr = String(typeAttr)
+    // If type is bound dynamically (e.g., type="${type}"), resolve it first
+    if (nodeTypeStr.includes('${')) {
+      nodeTypeStr = String(replaceTemplatePlaceholders(nodeTypeStr, combinedData))
+    }
+    const dataType =
+      combinedData.type !== undefined && combinedData.type !== null
+        ? String(combinedData.type)
+        : null
+
+    // If node has type but it doesn't match data's type, hide it
+    if (nodeTypeStr !== dataType) {
+      node.style.display = 'none'
+      node.setAttribute('data-type-match', 'false')
+      return // Skip processing children for unmatched type
+    } else {
+      // Ensure display is restored if it was previously hidden by type mismatch
+      if (node.style.display === 'none' && node.getAttribute('data-type-match') === 'false') {
+        node.style.removeProperty('display')
+      }
+      node.setAttribute('data-type-match', 'true')
+    }
+  }
+
+  // Handle showIf attribute - evaluate condition and hide element if false
+  // First check for new showIf attribute (initial render)
+  // Note: HTML attributes are case-insensitive but may be stored as lowercase
+  // Check both 'showIf' and 'showif' to ensure compatibility
+  const allAttrs = Array.from(node.attributes)
+    .map((a) => `${a.name}="${a.value}"`)
+    .join(', ')
+  console.log('[templateBinding] Node:', node.tagName, 'All attrs:', allAttrs)
+  let showIfAttr = node.getAttribute('showIf') || node.getAttribute('showif')
+  console.log('[templateBinding] Checking showIf on node:', node.tagName, 'showIf:', showIfAttr)
+  if (showIfAttr) {
+    // Store the expression for re-evaluation when data changes
+    node.setAttribute('data-showif-expr', showIfAttr)
+    // Remove both possible attribute names to ensure cleanup
+    node.removeAttribute('showIf')
+    node.removeAttribute('showif')
+    console.log('[templateBinding] Stored showIf expr:', showIfAttr)
+  }
+
+  // Check for stored showIf expression (for re-evaluation on data updates)
+  const storedShowIfExpr = node.getAttribute('data-showif-expr')
+  if (storedShowIfExpr) {
+    console.log(
+      '[templateBinding] Found stored showIf expr:',
+      storedShowIfExpr,
+      'data:',
+      combinedData
+    )
+    const shouldShow = _evaluateShowIf(storedShowIfExpr, combinedData)
+    const prevResult = node.getAttribute('data-showif-result')
+    const newResult = shouldShow === false ? 'false' : 'true'
+    console.log(
+      '[templateBinding] showIf result:',
+      shouldShow,
+      'prev:',
+      prevResult,
+      'new:',
+      newResult
+    )
+
+    // Only update if result changed
+    if (prevResult !== newResult) {
+      node.setAttribute('data-showif-result', newResult)
+
+      if (shouldShow === false) {
+        node.style.display = 'none'
+        if (component && typeof component.setVisible === 'function') {
+          component.setVisible(false)
+        }
+        return
+      } else {
+        if (node.style.display === 'none') {
+          node.style.removeProperty('display')
+        }
+        if (component && typeof component.setVisible === 'function') {
+          component.setVisible(true)
+        }
+      }
+    } else if (shouldShow === false) {
+      // Still hidden, skip processing children
+      return
+    }
+  }
+
+  for (const attr of Array.from(node.attributes)) {
+    const attrValue = attr.value
+    if (!attrValue || typeof attrValue !== 'string' || !attrValue.includes('${')) continue
+
+    const attrNameLower = attr.name.toLowerCase()
+    const resolved = _resolveValueOrString(attrValue, combinedData)
+
+    if (attrNameLower === 'list' || attrNameLower === 'listdata') {
+      const listValue = resolved.isPure
+        ? resolved.value
+        : extractTemplateValue(attrValue, combinedData)
+      if (Array.isArray(listValue)) {
+        if (typeof options.onListData === 'function') {
+          options.onListData(node, listValue, attr.name)
+        }
+        // Mark that children should not be processed - they will be handled
+        // separately when the sublist renders with correct item data
+        shouldProcessChildren = false
+        node.removeAttribute(attr.name)
+      } else {
+        // If listValue is not an array (could be undefined or a template variable),
+        // pass it to the component so it can handle it appropriately
+        if (component && typeof component.updateProperty === 'function') {
+          component.updateProperty(attr.name, listValue)
+        }
+        // Keep the attribute for debugging or later resolution
+        if (listValue === undefined) {
+          node.setAttribute(attr.name, attrValue)
+        } else {
+          node.setAttribute(attr.name, String(listValue))
+        }
+      }
+      continue
+    }
+
+    if (attrNameLower === 'flexstyle') {
+      const styleObj = resolved.isPure
+        ? resolved.value
+        : extractTemplateValue(attrValue, combinedData)
+      if (styleObj && typeof styleObj === 'object') {
+        if (component && typeof component.updateProperty === 'function') {
+          component.updateProperty(attr.name, styleObj)
+        } else {
+          _applyFlexStyleToElement(node, styleObj)
+        }
+        node.removeAttribute(attr.name)
+      }
+      continue
+    }
+
+    if (attrNameLower === 'layout') {
+      const layoutValue = resolved.isPure
+        ? resolved.value
+        : extractTemplateValue(attrValue, combinedData)
+      if (layoutValue !== undefined && layoutValue !== null) {
+        if (component && typeof component.updateProperty === 'function') {
+          component.updateProperty(attr.name, layoutValue)
+        } else {
+          _applyLayoutToElement(node, layoutValue)
+        }
+        node.removeAttribute(attr.name)
+      }
+      continue
+    }
+
+    if (attrNameLower === 'decoration') {
+      const decorationValue = resolved.isPure
+        ? resolved.value
+        : extractTemplateValue(attrValue, combinedData)
+      if (decorationValue && typeof decorationValue === 'object') {
+        if (component && typeof component.updateProperty === 'function') {
+          component.updateProperty(attr.name, decorationValue)
+        } else {
+          _applyDecorationToElement(node, decorationValue)
+        }
+        node.removeAttribute(attr.name)
+      }
+      continue
+    }
+
+    if (attrNameLower === 'size') {
+      const sizeValue = resolved.isPure
+        ? resolved.value
+        : extractTemplateValue(attrValue, combinedData)
+      if (sizeValue !== undefined && sizeValue !== null) {
+        if (component && typeof component.updateProperty === 'function') {
+          component.updateProperty(attr.name, sizeValue)
+        } else {
+          _applySizeToElement(node, sizeValue)
+        }
+        node.removeAttribute(attr.name)
+      }
+      continue
+    }
+
+    if (attrNameLower === 'textsize' || attrNameLower === 'fontsize') {
+      const sizeValue = resolved.isPure
+        ? resolved.value
+        : extractTemplateValue(attrValue, combinedData)
+      if (sizeValue !== undefined) {
+        if (component && typeof component.updateProperty === 'function') {
+          component.updateProperty(attr.name, sizeValue)
+        } else {
+          const fontSize = typeof sizeValue === 'number' ? sizeValue + 'px' : sizeValue
+          node.style.fontSize = fontSize
+        }
+        node.removeAttribute(attr.name)
+      }
+      continue
+    }
+
+    const finalValue = resolved.isPure
+      ? resolved.value !== undefined
+        ? String(resolved.value)
+        : attrValue
+      : resolved.value
+
+    if (component) {
+      if (attrNameLower === 'text' && typeof component.setText === 'function') {
+        component.setText(finalValue)
+      } else if (typeof component.updateProperty === 'function') {
+        component.updateProperty(attr.name, finalValue)
+      }
+    }
+
+    node.setAttribute(attr.name, finalValue)
+  }
+
+  if (node.style && node.style.cssText && node.style.cssText.includes('${')) {
+    node.style.cssText = replaceTemplatePlaceholders(node.style.cssText, combinedData)
+    _syncDomOnlyQtTextAutoWidth(node)
+  }
+
+  if (node.tagName === 'IMG' && node.getAttribute('src')) {
+    const src = node.getAttribute('src')
+    const resolvedSrc = src.includes('${') ? replaceTemplatePlaceholders(src, combinedData) : src
+    const newSrc = _normalizeWebAssetSrc(resolvedSrc)
+    if (newSrc !== src) {
+      if (component && typeof component.updateProperty === 'function') {
+        component.updateProperty('src', newSrc)
+      }
+      node.setAttribute('src', newSrc)
+      node.src = newSrc
+    }
+  }
+
+  // Only process children if this node doesn't have a list attribute
+  // Nodes with list attribute will have their children processed separately
+  // during sublist rendering with correct item data
+  if (shouldProcessChildren) {
+    Array.from(node.childNodes).forEach((child) => {
+      bindTemplateDataToNode(child, combinedData, options)
+    })
+  }
+}