nanohtml icon indicating copy to clipboard operation
nanohtml copied to clipboard

Support array for multiple roots?

Open gilbert opened this issue 6 years ago • 0 comments

Here's a case when multiple roots throws an error:

var html = require('nanohtml')

var nums = [10,20,30]

var el = html`
  <main>
    <h1>Hello planet</h1>
  </main>
  ${nums.map(n =>
    html`<div>${n}</div>`
  )}
`
document.body.appendChild(el)

Updating nanohtml's createFragment to look something like this solves the problem:

function createFragment (nodes) {
  var fragment = document.createDocumentFragment()
  for (var i = 0; i < nodes.length; i++) {
    if (typeof nodes[i] === 'string') nodes[i] = document.createTextNode(nodes[i])

    if (Array.isArray(nodes[i])) {
      for (var n=0; n < nodes[i].length; n++) {
        fragment.appendChild(nodes[i][n])
      }
    }
    else {
      fragment.appendChild(nodes[i])
    }
  }
  return fragment
}

gilbert avatar Apr 29 '19 05:04 gilbert