@quicktvui/web-renderer 1.0.0

package/src/components/QtFlexView.js

@@ -0,0 +1,799 @@
+// QtFlexView - A flexible layout container with data binding support
+// Used by tv-flex and FastFlexView components
+import { QtBaseComponent } from './QtBaseComponent'
+import { registerComponent } from '../core/componentRegistry'
+import {
+  bindTemplateDataToNode,
+  extractTemplateValue,
+  syncDomAutoWidthIn,
+} from '../core/templateBinding'
+
+// Global registry for DOM-to-Component mapping
+window.__HIPPY_COMPONENT_REGISTRY__ = window.__HIPPY_COMPONENT_REGISTRY__ || new Map()
+
+export class QtFlexView extends QtBaseComponent {
+  constructor(context, id, pId) {
+    super(context, id, pId)
+    this.tagName = 'FastFlexView'
+    this.dom = document.createElement('div')
+    this.dom.setAttribute('data-component-name', 'QtFlexView')
+
+    this._listData = []
+    this._templateChildren = []
+    this._itemContainer = document.createElement('div')
+    this._itemContainer.className = 'flex-view-item-container'
+    this._itemContainer.style.cssText =
+      'display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start;'
+
+    this.dom.style.cssText = `
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      box-sizing: border-box;
+    `
+    // Don't append _itemContainer yet - wait for templates to be captured
+
+    // Register by id for findComponentById
+    registerComponent(id, this)
+    // Also register by dom for DOM-to-Component lookup
+    window.__HIPPY_COMPONENT_REGISTRY__.set(this.dom, this)
+
+    // Set up MutationObserver to watch for template children
+    this._observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === 'childList') {
+          mutation.addedNodes.forEach((node) => {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+              this._processTemplateNode(node)
+            }
+          })
+        }
+      })
+    })
+    this._observer.observe(this.dom, { childList: true, subtree: false })
+  }
+
+  defaultStyle() {
+    return {
+      display: 'flex',
+      flexDirection: 'column',
+      position: 'relative',
+      boxSizing: 'border-box',
+    }
+  }
+
+  updateProperty(key, value) {
+    switch (key) {
+      case 'list':
+        console.log('[QtFlexView] updateProperty list:', value, 'isArray:', Array.isArray(value))
+        // Store the raw value - will be resolved when template is cloned
+        this._pendingListValue = value
+        if (Array.isArray(value)) {
+          this.dom.removeAttribute('list')
+        } else if (typeof value === 'string') {
+          const attrName = key
+          this.dom.setAttribute(attrName, value)
+        }
+        // If value is already an array, use it directly
+        if (Array.isArray(value)) {
+          this.setListData(value)
+        } else {
+          // Check if DOM has _qtListData set by parent list
+          requestAnimationFrame(() => {
+            console.log('[QtFlexView] Checking dom._qtListData:', this.dom._qtListData)
+            if (this.dom._qtListData && Array.isArray(this.dom._qtListData)) {
+              this.setListData(this.dom._qtListData)
+            }
+          })
+        }
+        break
+      case 'flexStyle':
+        if (typeof value === 'object' && value !== null) {
+          this._applyFlexStyle(value)
+        } else if (typeof value === 'string' && value.startsWith('${')) {
+          this.dom.setAttribute(key, value)
+        }
+        break
+      case 'layout':
+        if (typeof value === 'string' && value.startsWith('${')) {
+          this.dom.setAttribute(key, value)
+        } else {
+          this._updateLayout(value)
+        }
+        break
+      case 'clipChildren':
+        if (value === false) {
+          this.dom.style.overflow = 'visible'
+        }
+        break
+      case 'clipPadding':
+        // Handle clipPadding
+        break
+      default:
+        if (typeof value === 'string' && value.startsWith('${')) {
+          this.dom.setAttribute(key, value)
+        }
+        super.updateProperty(key, value)
+    }
+  }
+
+  // Process a template node added to the component
+  _processTemplateNode(node) {
+    console.log(
+      '[QtFlexView] _processTemplateNode:',
+      node.tagName,
+      node.getAttribute('data-component-name')
+    )
+    const registerTemplate = (element, component = null, id = undefined) => {
+      if (!this._templateChildren.some((t) => t.dom === element)) {
+        const type = _qtFlex_parseTemplateType(element)
+        const templateWrapper = {
+          dom: element,
+          tagName: element.tagName,
+          component,
+          id,
+          type,
+        }
+        this._templateChildren.push(templateWrapper)
+        element.setAttribute('data-template', 'true')
+        if (templateWrapper.type !== null) {
+          element.setAttribute('data-template-type', String(templateWrapper.type))
+        }
+        element.style.display = 'none'
+        console.log('[QtFlexView] Template captured, total:', this._templateChildren.length)
+      }
+    }
+    if (_qtFlex_parseTemplateType(node) === null && node.querySelectorAll) {
+      const nestedTemplates = Array.from(node.querySelectorAll('[type], [data-template-type]'))
+      if (nestedTemplates.length > 0) {
+        node.style.display = 'none'
+        nestedTemplates.forEach((element) => registerTemplate(element))
+        return
+      }
+    }
+    registerTemplate(node)
+  }
+
+  // Override insertChild to capture template children
+  insertChild(view, index) {
+    if (view && view.dom) {
+      const registerTemplate = (element, component = null, id = undefined) => {
+        if (!this._templateChildren.some((t) => t.dom === element)) {
+          const type = _qtFlex_parseTemplateType(element)
+          const templateWrapper = {
+            dom: element,
+            tagName: element.tagName,
+            id,
+            component,
+            type,
+          }
+          this._templateChildren.push(templateWrapper)
+          element.setAttribute('data-template', 'true')
+          if (type !== null && type !== undefined) {
+            element.setAttribute('data-template-type', String(type))
+          }
+          element.style.display = 'none'
+        }
+      }
+      if (_qtFlex_parseTemplateType(view.dom) === null && view.dom.querySelectorAll) {
+        const nestedTemplates = Array.from(
+          view.dom.querySelectorAll('[type], [data-template-type]')
+        )
+        if (nestedTemplates.length > 0) {
+          view.dom.style.display = 'none'
+          nestedTemplates.forEach((element) => registerTemplate(element))
+        } else {
+          registerTemplate(view.dom, view, view.id)
+        }
+      } else {
+        registerTemplate(view.dom, view, view.id)
+      }
+      if (!this.dom.contains(view.dom)) {
+        if (this._itemContainer && this.dom.contains(this._itemContainer)) {
+          this.dom.insertBefore(view.dom, this._itemContainer)
+        } else {
+          this.dom.appendChild(view.dom)
+        }
+      }
+    }
+  }
+
+  // Set list data and render items
+  setListData(data) {
+    console.log('[QtFlexView] setListData:', data, 'isArray:', Array.isArray(data))
+
+    // Handle wrapped params
+    if (Array.isArray(data) && data.length === 1 && Array.isArray(data[0])) {
+      data = data[0]
+    }
+
+    if (!Array.isArray(data)) {
+      console.log('[QtFlexView] setListData: not array, returning')
+      return
+    }
+    this._listData = data
+    console.log(
+      '[QtFlexView] _listData set:',
+      this._listData.length,
+      'items, templates:',
+      this._templateChildren.length
+    )
+
+    // Debounce rendering to avoid multiple rapid renders
+    if (this._renderTimeout) {
+      clearTimeout(this._renderTimeout)
+    }
+
+    // Wait for templates to be ready, then render
+    const tryRender = (attempts = 0) => {
+      if (this._templateChildren.length > 0 || attempts >= 10) {
+        this._renderItems()
+      } else {
+        this._renderTimeout = setTimeout(() => tryRender(attempts + 1), 50)
+      }
+    }
+    this._renderTimeout = setTimeout(() => tryRender(), 0)
+  }
+
+  // Render items based on current data
+  _renderItems() {
+    // Ensure item container is in the DOM
+    if (!this.dom.contains(this._itemContainer)) {
+      this.dom.appendChild(this._itemContainer)
+    }
+
+    this._itemContainer.innerHTML = ''
+
+    if (this._listData.length === 0) {
+      return
+    }
+
+    // Hide all templates
+    this._templateChildren.forEach((t) => {
+      if (t.dom) {
+        t.dom.style.display = 'none'
+      }
+    })
+
+    // If no templates, create placeholder items
+    if (this._templateChildren.length === 0) {
+      this._listData.forEach((itemData, index) => {
+        const item = document.createElement('div')
+        item.setAttribute('data-index', index)
+        item.style.cssText =
+          'width: 200px; height: 200px; margin: 10px; background: #444; display: flex; align-items: center; justify-content: center; border-radius: 8px;'
+
+        const text = document.createElement('span')
+        text.style.cssText = 'color: white; font-size: 14px;'
+        text.textContent = itemData.text || itemData.title || itemData.name || `Item ${index}`
+        item.appendChild(text)
+
+        this._itemContainer.appendChild(item)
+      })
+      return
+    }
+
+    // Create items for each data entry
+    this._listData.forEach((itemData, index) => {
+      const itemElement = this._createItemFromData(itemData, index)
+      if (itemElement) {
+        this._itemContainer.appendChild(itemElement)
+      }
+    })
+  }
+
+  // Create an item element by cloning template and binding data
+  _createItemFromData(itemData, index) {
+    const item = document.createElement('div')
+    item.setAttribute('data-index', index)
+    item.setAttribute('data-position', index)
+
+    if (itemData && itemData.decoration && typeof itemData.decoration === 'object') {
+      const dec = itemData.decoration
+      if (dec.top !== undefined) item.style.marginTop = dec.top + 'px'
+      if (dec.left !== undefined) item.style.marginLeft = dec.left + 'px'
+      if (dec.right !== undefined) item.style.marginRight = dec.right + 'px'
+      if (dec.bottom !== undefined) item.style.marginBottom = dec.bottom + 'px'
+    }
+
+    // Get the item's type
+    const itemType = itemData.type !== undefined ? itemData.type : null
+
+    // Find matching template by type
+    let matchingTemplate = this._templateChildren.find((t) => t.type === itemType)
+
+    const sharedTemplates = window.__QT_SHARED_TEMPLATES__
+    const sharedByType =
+      sharedTemplates && itemType !== null && itemType !== undefined
+        ? sharedTemplates.get(itemType)
+        : null
+
+    if (!matchingTemplate && sharedByType && sharedByType.dom) {
+      matchingTemplate = sharedByType
+    }
+
+    // If no matching template found, try to use template without type (default template)
+    if (!matchingTemplate) {
+      matchingTemplate = this._templateChildren.find((t) => t.type === null)
+    }
+
+    if (!matchingTemplate && sharedTemplates && sharedTemplates.size > 0) {
+      const firstShared = sharedTemplates.values().next().value
+      if (firstShared && firstShared.dom) {
+        matchingTemplate = firstShared
+      }
+    }
+
+    // If still no template, use the first template
+    if (!matchingTemplate && this._templateChildren.length > 0) {
+      matchingTemplate = this._templateChildren[0]
+    }
+
+    // Clone the matching template and bind data
+    if (matchingTemplate && matchingTemplate.dom) {
+      const clonedNode = matchingTemplate.dom.cloneNode(true)
+      clonedNode.removeAttribute('data-template')
+
+      // Reset display
+      clonedNode.style.display = ''
+      clonedNode.style.position = 'relative'
+      applyDomOnlyTemplateRootDefaults(clonedNode)
+
+      // Process component-level props if available
+      if (matchingTemplate.component && matchingTemplate.component.props) {
+        this._bindComponentPropsToNode(clonedNode, matchingTemplate.component.props, itemData)
+      }
+
+      // Bind data to the cloned node
+      this._bindDataToNode(clonedNode, itemData)
+
+      _fixAbsoluteChildCollapse(clonedNode)
+
+      // If clonedNode itself became absolute (e.g. via layout on root),
+      // the wrapper 'item' will collapse. Copy dimensions to 'item'.
+      if (clonedNode.style.position === 'absolute') {
+        if (clonedNode.style.width) item.style.width = clonedNode.style.width
+        if (clonedNode.style.height) item.style.height = clonedNode.style.height
+      }
+
+      item.appendChild(clonedNode)
+    }
+
+    item._itemData = itemData
+    item._itemPosition = index
+
+    item.addEventListener('click', () => {
+      this._dispatchItemClick(index, itemData)
+    })
+
+    return item
+  }
+
+  // Bind component-level props to a cloned node (handles flexStyle etc.)
+  _bindComponentPropsToNode(node, props, data) {
+    if (!props || !data) return
+
+    Object.keys(props).forEach((key) => {
+      const value = props[key]
+
+      if (typeof value === 'string' && value.startsWith('${') && value.endsWith('}')) {
+        let resolvedValue = extractTemplateValue(value, data)
+        const keyLower = key.toLowerCase()
+
+        // Handle flexStyle specially
+        if (
+          (keyLower === 'flexstyle' || keyLower === 'flexstyletemplate') &&
+          resolvedValue &&
+          typeof resolvedValue === 'object'
+        ) {
+          this._applyFlexStyleToElement(node, resolvedValue)
+        }
+
+        // Handle textSize specially
+        if (keyLower === 'textsize' && resolvedValue !== undefined) {
+          const fontSize = typeof resolvedValue === 'number' ? resolvedValue + 'px' : resolvedValue
+          node.style.fontSize = fontSize
+        }
+
+        // Handle src attribute
+        if (keyLower === 'src') {
+          if (resolvedValue && typeof resolvedValue === 'object') {
+            if (resolvedValue.url !== undefined) {
+              resolvedValue = resolvedValue.url
+            } else if (resolvedValue.uri !== undefined) {
+              resolvedValue = resolvedValue.uri
+            } else if (resolvedValue.src !== undefined) {
+              resolvedValue = resolvedValue.src
+            }
+          }
+          if (node.tagName === 'IMG' && typeof resolvedValue === 'string') {
+            node.src = resolvedValue
+          }
+        }
+      }
+    })
+  }
+
+  // Bind data to a node: replace ${prop} in text and attributes
+  _bindDataToNode(node, data) {
+    bindTemplateDataToNode(node, data)
+  }
+
+  // Apply flexStyle object to a DOM element
+  _applyFlexStyleToElement(element, styleObj) {
+    if (!styleObj || typeof styleObj !== 'object') return
+
+    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 {
+        element.style[key] = value
+      } catch (e) {
+        try {
+          const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase()
+          element.style.setProperty(cssKey, value)
+        } catch (err) {}
+      }
+    })
+  }
+
+  // Dispatch item click event
+  _dispatchItemClick(position, itemData) {
+    this.dispatchEvent('onItemClick', {
+      position: position,
+      index: position,
+      item: itemData,
+    })
+  }
+
+  // Update layout direction and size
+  _updateLayout(layout) {
+    // Handle layout array [x, y, width, height]
+    if (Array.isArray(layout)) {
+      const x = layout[0]
+      const y = layout[1]
+      const width = layout[2]
+      const height = layout[3]
+
+      if (x !== undefined && x !== null) {
+        this.dom.style.left = typeof x === 'number' ? `${x}px` : x
+      }
+      if (y !== undefined && y !== null) {
+        this.dom.style.top = typeof y === 'number' ? `${y}px` : y
+      }
+      if (width !== undefined && width !== null && width > 0) {
+        this.dom.style.width = typeof width === 'number' ? `${width}px` : width
+      }
+      if (height !== undefined && height !== null && height > 0) {
+        this.dom.style.height = typeof height === 'number' ? `${height}px` : height
+      }
+
+      if (
+        (x !== undefined || y !== undefined) &&
+        (!this.dom.style.position || this.dom.style.position === 'relative')
+      ) {
+        this.dom.style.position = 'absolute'
+      }
+    } else if (typeof layout === 'object' && layout !== null) {
+      const { x, y, width, height } = layout
+
+      if (x !== undefined && x !== null) {
+        this.dom.style.left = typeof x === 'number' ? `${x}px` : x
+      }
+      if (y !== undefined && y !== null) {
+        this.dom.style.top = typeof y === 'number' ? `${y}px` : y
+      }
+      if (width !== undefined && width !== null && width > 0) {
+        this.dom.style.width = typeof width === 'number' ? `${width}px` : width
+      }
+      if (height !== undefined && height !== null && height > 0) {
+        this.dom.style.height = typeof height === 'number' ? `${height}px` : height
+      }
+
+      if (
+        (x !== undefined || y !== undefined) &&
+        (!this.dom.style.position || this.dom.style.position === 'relative')
+      ) {
+        this.dom.style.position = 'absolute'
+      }
+    }
+
+    // Handle layout direction
+    if (layout === 'H' || layout?.direction === 'H') {
+      this._itemContainer.style.flexDirection = 'row'
+    } else if (Array.isArray(layout)) {
+      // Default to column layout for array format
+      this._itemContainer.style.flexDirection = 'column'
+      this._itemContainer.style.flexWrap = 'wrap'
+    } else {
+      this._itemContainer.style.flexDirection = 'column'
+      this._itemContainer.style.flexWrap = 'nowrap'
+    }
+  }
+
+  // Apply flexStyle object to the main container
+  _applyFlexStyle(styleObj) {
+    if (!styleObj || typeof styleObj !== 'object') return
+
+    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') {
+          this.dom.style[key] = value
+        }
+      } catch (e) {
+        try {
+          if (key !== 'x' && key !== 'y') {
+            const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase()
+            this.dom.style.setProperty(cssKey, value)
+          }
+        } catch (err) {}
+      }
+    })
+  }
+
+  // Add more items to the list
+  addListData(data) {
+    if (!Array.isArray(data)) return
+    const startIndex = this._listData.length
+    this._listData = this._listData.concat(data)
+    data.forEach((itemData, i) => {
+      const index = startIndex + i
+      const itemElement = this._createItemFromData(itemData, index)
+      if (itemElement) {
+        this._itemContainer.appendChild(itemElement)
+      }
+    })
+  }
+
+  // Clear all data
+  clearData() {
+    this._listData = []
+    this._itemContainer.innerHTML = ''
+  }
+}
+
+// ---------------------------
+// DOM-only renderer for cloned templates
+// ---------------------------
+function _qtFlex_parseTemplateType(el) {
+  const raw = el.getAttribute('data-template-type') ?? el.getAttribute('type')
+  if (raw === null || raw === undefined) return null
+  return isNaN(Number(raw)) ? raw : Number(raw)
+}
+
+function _qtFlex_bindDataToNode(node, data) {
+  bindTemplateDataToNode(node, data)
+}
+
+export function applyDomOnlyTemplateRootDefaults(node) {
+  if (!node || node.nodeType !== Node.ELEMENT_NODE) return
+  if (node.tagName === 'DIV' && !node.style.display) {
+    node.style.display = 'flex'
+  }
+  if (!node.style.boxSizing) {
+    node.style.boxSizing = 'border-box'
+  }
+}
+
+function _fixAbsoluteChildCollapse(node) {
+  if (!node || node.nodeType !== Node.ELEMENT_NODE) return
+  if (!node.style.width && !node.style.height) {
+    let maxW = 0,
+      maxH = 0
+    for (let i = 0; i < node.children.length; i++) {
+      const child = node.children[i]
+      // Use inline style directly since node might not be attached to document yet
+      const pos =
+        child.style.position || (child.getAttribute('style') || '').includes('absolute')
+          ? 'absolute'
+          : ''
+      if (pos === 'absolute') {
+        const w = parseFloat(child.style.width) || 0
+        const h = parseFloat(child.style.height) || 0
+        if (w > maxW) maxW = w
+        if (h > maxH) maxH = h
+      }
+    }
+    if (maxW > 0) node.style.width = maxW + 'px'
+    if (maxH > 0) node.style.height = maxH + 'px'
+  }
+}
+
+/**
+ * Render a tv-flex/FastFlexView subtree in-place on a plain DOM element.
+ * Used when parent list clones templates as DOM nodes (no component instance).
+ */
+export function renderQtFlexViewInPlace(rootElement, listData) {
+  if (!rootElement) return
+  if (Array.isArray(listData) && listData.length === 1 && Array.isArray(listData[0])) {
+    listData = listData[0]
+  }
+  if (!Array.isArray(listData)) return
+
+  // Ensure item container exists
+  let itemContainer = null
+  const directChildren = Array.from(rootElement.children || [])
+  for (const child of directChildren) {
+    if (child.classList && child.classList.contains('flex-view-item-container')) {
+      itemContainer = child
+      break
+    }
+  }
+  if (!itemContainer) {
+    itemContainer = document.createElement('div')
+    itemContainer.className = 'flex-view-item-container'
+    itemContainer.style.cssText =
+      'display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start;'
+    rootElement.appendChild(itemContainer)
+  }
+
+  // Collect templates from direct children (exclude item container)
+  const templateElements = Array.from(rootElement.children || []).filter(
+    (el) => el !== itemContainer
+  )
+  const templates = []
+  templateElements.forEach((el) => {
+    const ownType = _qtFlex_parseTemplateType(el)
+    if (ownType !== null) {
+      el.setAttribute('data-template', 'true')
+      el.style.display = 'none'
+      el.setAttribute('data-template-type', String(ownType))
+      templates.push({ dom: el, type: ownType })
+      return
+    }
+    const nestedTemplates = el.querySelectorAll
+      ? Array.from(el.querySelectorAll('[type], [data-template-type]'))
+      : []
+    if (nestedTemplates.length > 0) {
+      el.style.display = 'none'
+      nestedTemplates.forEach((nested) => {
+        const type = _qtFlex_parseTemplateType(nested)
+        nested.setAttribute('data-template', 'true')
+        nested.style.display = 'none'
+        if (type !== null) nested.setAttribute('data-template-type', String(type))
+        templates.push({ dom: nested, type })
+      })
+      return
+    }
+    el.setAttribute('data-template', 'true')
+    el.style.display = 'none'
+    templates.push({ dom: el, type: null })
+  })
+
+  itemContainer.innerHTML = ''
+  if (listData.length === 0) return
+  if (templates.length === 0) {
+    const sharedTemplates = window.__QT_SHARED_TEMPLATES__
+    if (sharedTemplates && sharedTemplates.size > 0) {
+      const shared = Array.from(sharedTemplates.values()).filter((t) => t && t.dom)
+      if (shared.length > 0) {
+        shared.forEach((t) => {
+          t.dom.setAttribute('data-template', 'true')
+          t.dom.style.display = 'none'
+          const type = _qtFlex_parseTemplateType(t.dom)
+          if (type !== null) t.dom.setAttribute('data-template-type', String(type))
+          templates.push({ dom: t.dom, type })
+        })
+      }
+    }
+  }
+  if (templates.length === 0) return
+
+  listData.forEach((itemData, index) => {
+    const itemWrapper = document.createElement('div')
+    itemWrapper.setAttribute('data-index', index)
+    itemWrapper.setAttribute('data-position', index)
+    itemWrapper._itemData = itemData
+    itemWrapper._itemPosition = index
+
+    if (itemData && itemData.decoration && typeof itemData.decoration === 'object') {
+      const dec = itemData.decoration
+      if (dec.top !== undefined) itemWrapper.style.marginTop = dec.top + 'px'
+      if (dec.left !== undefined) itemWrapper.style.marginLeft = dec.left + 'px'
+      if (dec.right !== undefined) itemWrapper.style.marginRight = dec.right + 'px'
+      if (dec.bottom !== undefined) itemWrapper.style.marginBottom = dec.bottom + 'px'
+    }
+
+    const itemType = itemData && itemData.type !== undefined ? itemData.type : null
+    let matching = templates.find((t) => t.type === itemType)
+    if (!matching) matching = templates.find((t) => t.type === null)
+    if (!matching) matching = templates[0]
+
+    const clonedNode = matching.dom.cloneNode(true)
+    clonedNode.removeAttribute('data-template')
+    clonedNode.style.display = ''
+    clonedNode.style.position = 'relative'
+    applyDomOnlyTemplateRootDefaults(clonedNode)
+
+    _qtFlex_bindDataToNode(clonedNode, itemData)
+    _fixAbsoluteChildCollapse(clonedNode)
+
+    // If clonedNode itself became absolute (e.g. via layout on root),
+    // the wrapper 'itemWrapper' will collapse. Copy dimensions.
+    if (clonedNode.style.position === 'absolute') {
+      if (clonedNode.style.width) itemWrapper.style.width = clonedNode.style.width
+      if (clonedNode.style.height) itemWrapper.style.height = clonedNode.style.height
+    }
+
+    itemWrapper.appendChild(clonedNode)
+    itemContainer.appendChild(itemWrapper)
+  })
+
+  requestAnimationFrame(() => syncDomAutoWidthIn(itemContainer))
+}