How to use the htm.call function in htm

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

github spectjs / spect / src / html.js View on Github external
export default function html(...args) {
  let prevUseCache = plannedComponentInit
  plannedComponentInit = new Set()

  // render DOM
  let result = htm.call(h, ...args) || document.createTextNode('')

  // non-DOM htm result to DOM
  if (isPrimitive(result)) result = document.createTextNode(result)
  else if (Array.isArray(result)) {
    // let frag = document.createDocumentFragment()
    // frag.append(...result)
    // result = frag
    result = html`<>${result}</>`
  }

  // seal result
  result[_morph] = false

  return result
}
github spectjs / spect / src / html-morph.js View on Github external
export default function html (...args) {
  let prevUseCache = currentUseCache
  currentUseCache = new Set()

  // render DOM
  let result = htm.call(h, ...args)

  // non-DOM htm result to DOM
  if (typeof result === 'string') result = document.createTextNode(result)
  else if (Array.isArray(result)) {
    result = result.map(el => used(el))
    let frag = document.createDocumentFragment()
    frag.append(...result)
    result = frag
  }
  else result = used(result)

  // run `use`, `is` in children
  for (let el of currentUseCache) {
    used(el)
  }
  currentUseCache = prevUseCache
github spectjs / spect / src / html-idom.js View on Github external
export default function html(el, ...args) {
  let content
  // html`<...>`
  // html(...)
  if (!args.length || (Array.isArray(el) && el.raw)) {
    content = htm.call(h, el, ...args)
    el = document.createDocumentFragment()
  }
  // html(el, ...)`
  else {
    content = args[0]
    // html('.selector', ...)
    if (typeof el === 'string') el = document.querySelectorAll(el)

  }

  if (isElement(el)) {
    // html(el, htmlContent)
    if (isElement(content) || isIterable(content)) {
      if (isElement(content)) content = [content]
      domdiff(el, [...el.childNodes], content)
    }
github spectjs / spect / src / html.js View on Github external
export default function html(...args) {
  let el = this[_target] || this

  // tpl string: html`<a foo=${bar}/>`
  let vdom
  if (args[0].raw) {
    vdom = htm.call(h, ...args)
  }

  // html('<a foo/>')
  else if (typeof args[0] === 'string') vdom = htm.call(h, args)

  // fn: html(children => [...children])
  else if (typeof args[0] === 'function') {
    let output = args[0](el)
    if (output && output !== el) {
      // substitute previous node with the new one in both DOM/spect collection

      // TODO: wrapping part is not ready
      // wrapping
      if (output[0].contains(el)) {
        throw Error('TODO: organize wrapping')
      }

      // new node
      else {
        el.replaceWith(...output)
github spectjs / spect / src / html.js View on Github external
export default function html(...args) {
  let el = this[_target] || this

  // tpl string: html`<a foo=${bar}/>`
  let vdom
  if (args[0].raw) {
    vdom = htm.call(h, ...args)
  }

  // html('<a foo/>')
  else if (typeof args[0] === 'string') vdom = htm.call(h, args)

  // fn: html(children => [...children])
  else if (typeof args[0] === 'function') {
    let output = args[0](el)
    if (output && output !== el) {
      // substitute previous node with the new one in both DOM/spect collection

      // TODO: wrapping part is not ready
      // wrapping
      if (output[0].contains(el)) {
        throw Error('TODO: organize wrapping')
      }

htm

The Tagged Template syntax for Virtual DOM. Only browser-compatible syntax.

Apache-2.0
Latest version published 5 months ago

Package Health Score

87 / 100
Full package analysis

Popular htm functions

Similar packages