How to use incremental-dom - 10 common examples

attributes,
  symbols,
  applyProp,
  applyAttr,
  notifications,
  skip,
  currentElement
} from 'incremental-dom'

import { getTagName, getCustomElement } from './src/core.js';


// configure incremental-dom attributes
attributes.class = applyAttr
attributes.is = (...args) => (applyAttr(...args), applyProp(...args))
attributes[symbols.default] = applyProp

// track aspects creation
// notifications.nodesCreated = function (nodes) {
//   console.log(nodes)
// }


// build vdom
html.h = function h(target, props={}, ...children) {
  let use, propsArr = []
  let staticProps = []
  let is, tag, classes = [], id, constructor

  if (typeof target === 'function') {
    tag = getTagName(target)
    constructor = getCustomElement(target)

elementVoid,
  text,
  attributes,
  symbols,
  applyProp,
  applyAttr,
  notifications,
  skip,
  currentElement
} from 'incremental-dom'

import { getTagName, getCustomElement } from './src/core.js';


// configure incremental-dom attributes
attributes.class = applyAttr
attributes.is = (...args) => (applyAttr(...args), applyProp(...args))
attributes[symbols.default] = applyProp

// track aspects creation
// notifications.nodesCreated = function (nodes) {
//   console.log(nodes)
// }


// build vdom
html.h = function h(target, props={}, ...children) {
  let use, propsArr = []
  let staticProps = []
  let is, tag, classes = [], id, constructor

  if (typeof target === 'function') {

text,
  attributes,
  symbols,
  applyProp,
  applyAttr,
  notifications,
  skip,
  currentElement
} from 'incremental-dom'

import { getTagName, getCustomElement } from './src/core.js';


// configure incremental-dom attributes
attributes.class = applyAttr
attributes.is = (...args) => (applyAttr(...args), applyProp(...args))
attributes[symbols.default] = applyProp

// track aspects creation
// notifications.nodesCreated = function (nodes) {
//   console.log(nodes)
// }


// build vdom
html.h = function h(target, props={}, ...children) {
  let use, propsArr = []
  let staticProps = []
  let is, tag, classes = [], id, constructor

  if (typeof target === 'function') {
    tag = getTagName(target)

return function () {
      var createdElement
      if (tagName !== 'virtual' || originalTagName) {
        // console.log('element open ->', tagName, parsedAttrs.key)
        var TagClass = oval.getRegisteredTag(originalTagName || tagName)
        if (!TagClass) {
          IncrementalDOM.elementOpenStart(tagName, parsedAttrs.key, parsedAttrs.staticAttrs)
          for (var key in parsedAttrs.attrs) {
            IncrementalDOM.attr(key, parsedAttrs.attrs[key])
          }
        } else {
          IncrementalDOM.elementOpenStart(tagName, parsedAttrs.key)
        }
        createdElement = IncrementalDOM.elementOpenEnd()
        if (parsedAttrs.attrs['ref']) {
          tag.refs[parsedAttrs.attrs['ref']] = createdElement
        }
        if (parsedAttrs.attrs['freeze']) {
          IncrementalDOM.skip()
        }
        if (createdElement.tag) {
          if (!createdElement.tag.shouldRender) {
            IncrementalDOM.skip()
          } else {
            createdElement.tag.update(children, parsedAttrs.props, parsedAttrs.attrs)

return function () {
      var createdElement
      if (tagName !== 'virtual' || originalTagName) {
        // console.log('element open ->', tagName, parsedAttrs.key)
        var TagClass = oval.getRegisteredTag(originalTagName || tagName)
        if (!TagClass) {
          IncrementalDOM.elementOpenStart(tagName, parsedAttrs.key, parsedAttrs.staticAttrs)
          for (var key in parsedAttrs.attrs) {
            IncrementalDOM.attr(key, parsedAttrs.attrs[key])
          }
        } else {
          IncrementalDOM.elementOpenStart(tagName, parsedAttrs.key)
        }
        createdElement = IncrementalDOM.elementOpenEnd()
        if (parsedAttrs.attrs['ref']) {
          tag.refs[parsedAttrs.attrs['ref']] = createdElement
        }
        if (parsedAttrs.attrs['freeze']) {
          IncrementalDOM.skip()
        }
        if (createdElement.tag) {
          if (!createdElement.tag.shouldRender) {
            IncrementalDOM.skip()
          } else {
            createdElement.tag.update(children, parsedAttrs.props, parsedAttrs.attrs)
          }
          IncrementalDOM.elementClose(tagName)
          tag.childTags.push(createdElement.tag)

return function () {
      var createdElement
      if (tagName !== 'virtual' || originalTagName) {
        // console.log('element open ->', tagName, parsedAttrs.key)
        var TagClass = oval.getRegisteredTag(originalTagName || tagName)
        if (!TagClass) {
          IncrementalDOM.elementOpenStart(tagName, parsedAttrs.key, parsedAttrs.staticAttrs)
          for (var key in parsedAttrs.attrs) {
            IncrementalDOM.attr(key, parsedAttrs.attrs[key])
          }
        } else {
          IncrementalDOM.elementOpenStart(tagName, parsedAttrs.key)
        }
        createdElement = IncrementalDOM.elementOpenEnd()
        if (parsedAttrs.attrs['ref']) {
          tag.refs[parsedAttrs.attrs['ref']] = createdElement
        }
        if (parsedAttrs.attrs['freeze']) {
          IncrementalDOM.skip()
        }
        if (createdElement.tag) {
          if (!createdElement.tag.shouldRender) {
            IncrementalDOM.skip()

return function () {
      var createdElement
      if (tagName !== 'virtual' || originalTagName) {
        // console.log('element open ->', tagName, parsedAttrs.key)
        var TagClass = oval.getRegisteredTag(originalTagName || tagName)
        if (!TagClass) {
          IncrementalDOM.elementOpenStart(tagName, parsedAttrs.key, parsedAttrs.staticAttrs)
          for (var key in parsedAttrs.attrs) {
            IncrementalDOM.attr(key, parsedAttrs.attrs[key])
          }
        } else {
          IncrementalDOM.elementOpenStart(tagName, parsedAttrs.key)
        }
        createdElement = IncrementalDOM.elementOpenEnd()
        if (parsedAttrs.attrs['ref']) {
          tag.refs[parsedAttrs.attrs['ref']] = createdElement
        }
        if (parsedAttrs.attrs['freeze']) {
          IncrementalDOM.skip()
        }
        if (createdElement.tag) {
          if (!createdElement.tag.shouldRender) {
            IncrementalDOM.skip()
          } else {
            createdElement.tag.update(children, parsedAttrs.props, parsedAttrs.attrs)
          }
          IncrementalDOM.elementClose(tagName)
          tag.childTags.push(createdElement.tag)
          return
        }

// Prepare arguments
  // (See: http://google.github.io/incremental-dom/#api/elementOpen)
  let args = [tag, null, null]

  for (let key in props) {
    if (key==='key') {
      args[1] = props.key
      delete props.key
    }
    args.push(key)
    args.push(props[key])
  }

  elementOpen.apply(null, args)
  children.forEach(create)
  elementClose(tag)
}

let el

      // <ul is="">
      if (is) {
        function create() { return document.createElement(tag, { is }) }
        el = elementOpen(create, key, staticProps, ...props)
        children.forEach(render)
        elementClose(create)
      }

      // if (!children) el = elementVoid(tag, key, staticProps, ...props)
      else {
        el = elementOpen(tag, key, staticProps, ...props)
        children.forEach(render)
        elementClose(tag)
      }

      // plan aspects init
      if (use) (new $(el)).use(...use)

      // run provided effects
      for (let effect in effects) {
        $(el)[effect](effects[effect])
      }
    }
</ul>

function ReadView({todo, startEditingTodo}) {
  function onDoubleClick() {
    startEditingTodo(todo.id);

    // TODO: Better way of access the real DOM element of a component?
    // Here we want to focus the input field and set the curor to the end
    const input = document.querySelector('.edit');
    input.focus();
    input.setSelectionRange(input.value.length, input.value.length);
  }

  elementOpen('div', null, ['class', 'view']);
    elementVoid('input', null, ['class', 'toggle', 'type', 'checkbox']);
    elementOpen('label', null, null, 'ondblclick', onDoubleClick);
      text(todo.text);
    elementClose('label');
    elementVoid('button', null, ['class', 'destroy']);
  elementClose('div');
}