How to use the incremental-dom.elementVoid function in incremental-dom

To help you get started, we’ve selected a few incremental-dom examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github spectjs / spect / src / html.js View on Github external
// numbers/strings are serialized as text
  if (typeof arg === 'number') return text(arg)
  if (typeof arg === 'string') return text(arg)

  if (isIterable(arg)) {
    for (let el of arg) render.call(this, el)
    return
  }

  if (typeof arg === 'object' && !arg._ref && !arg._vnode) {
    return text(arg.toString())
  }

  // stub refs to native els
  if (arg._ref) return elementVoid('span', null, ['id', SPECT_CLASS + '-ref-' + arg._ref])

  // objects create elements
  let { tag, key, props, staticProps, children, use, create, fn } = arg

  // fragment (direct vdom)
  if (!tag) {
    return children && children.forEach(render, this)
  }

  let el
  if (!children || !children.length) {
    el = elementVoid(create, key, staticProps, ...props)
  }
  else {
    el = elementOpen(create, key, staticProps, ...props)
    children.forEach(render, this)
github joshthecoder / idom-redux-todomvc-app / components / TodoItem.js View on Github external
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');
}
github spectjs / spect / src / html-idom.js View on Github external
if (isElement(arg)) {
    let el = elementVoid(function () { return arg })
    return
  }

  if (typeof arg === 'object' && !arg[_vnode]) return text(arg.toString())

  // objects create elements
  let { tag, key, props, staticProps, children } = arg

  // fragment (direct vdom)
  if (!tag) return children && children.forEach(render)

  let el
  if (!children || !children.length) {
    el = elementVoid(tag, key, staticProps, ...props)
  }
  else {
    el = elementOpen(tag, key, staticProps, ...props)
    children.forEach(render)
    elementClose(tag)
  }
}
github spectjs / spect / src / html.js View on Github external
}

  // stub refs to native els
  if (arg._ref) return elementVoid('span', null, ['id', SPECT_CLASS + '-ref-' + arg._ref])

  // objects create elements
  let { tag, key, props, staticProps, children, use, create, fn } = arg

  // fragment (direct vdom)
  if (!tag) {
    return children && children.forEach(render, this)
  }

  let el
  if (!children || !children.length) {
    el = elementVoid(create, key, staticProps, ...props)
  }
  else {
    el = elementOpen(create, key, staticProps, ...props)
    children.forEach(render, this)
    elementClose(create)
  }

  // if spect instance - init aspects
  if (this[_instance]) {
    let Spect = this[_instance].constructor
    let proto = Spect.prototype

    const $el = new Spect(el)
    el[_spect] = $el

    if (fn) $el.update(fn)
github spectjs / spect / src / html-idom.js View on Github external
function render(arg) {
  if (arg == null) return

  // numbers/strings are serialized as text
  if (typeof arg === 'number') return text(arg)
  if (typeof arg === 'string') return text(arg)

  if (isIterable(arg)) {
    for (let el of arg) render(el)
    return
  }

  if (isElement(arg)) {
    let el = elementVoid(function () { return arg })
    return
  }

  if (typeof arg === 'object' && !arg[_vnode]) return text(arg.toString())

  // objects create elements
  let { tag, key, props, staticProps, children } = arg

  // fragment (direct vdom)
  if (!tag) return children && children.forEach(render)

  let el
  if (!children || !children.length) {
    el = elementVoid(tag, key, staticProps, ...props)
  }
  else {
github joshthecoder / idom-redux-todomvc-app / components / TodoItem.js View on Github external
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');
}