tiny-dream/src/tiny-dream/virtual-element.js

A tiny Incremental DOM implementation for modern browsers.

import {
  open as coreOpen,
  close as coreClose,
  text as coreText
} from './core'
import { updateAttribute } from './attributes'
import getNodeData from './get-node-data'

const tagOpen = (nameOrCtor, attributes, key) => {
  const node = coreOpen(nameOrCtor, key)

  if (!attributes) {
    return
  }

  const data = getNodeData(node)
  if (!data.attributesApplied) {
    for (let i = 0; i < attributes.length; i += 2) {
      const name = (attributes[i])
      const value = attributes[i + 1]
      updateAttribute(node, name, value)
    }

    data.attributesApplied = true
  }

  const attrs = data.attributes
  const isNew = !attrs.length
  for (let i = 0; i < attributes.length; i += 2) {
    const name = attributes[i]

    if (isNew) {
      attrs[i] = name
    }

    const value = attributes[i + 1]
    if (isNew || attrs[i + 1] !== value) {
      attrs[i + 1] = value
      updateAttribute(node, name, value)
    }
  }

  return node
}

const tagClose = (nameOrCtor) => {
  const node = coreClose()
  return node
}

const tagVoid = (nameOrCtor, attributes, key) => {
  tagOpen(nameOrCtor, attributes, key)
  return tagClose(nameOrCtor)
}

const text = (value, attributes) => {
  const node = coreText()
  const data = getNodeData(node)

  if (data.text !== value) {
    data.text = value
    node.data = value
  }

  return node
}

export {
  tagOpen,
  tagClose,
  tagVoid,
  text
}