Merge pull request #8 from github/fix-html-allow-for-nested-text-nodes-in-iterables

Fix html allow for nested text nodes in iterables

Author: keithamus

src/html.ts

@@ -19,7 +19,7 @@ function processSubTemplate(part: TemplatePart, value: unknown): boolean {
 
 function processDocumentFragment(part: TemplatePart, value: unknown): boolean {
   if (value instanceof DocumentFragment && part instanceof NodeTemplatePart) {
-    part.replace((value as unknown) as ChildNode)
+    if (value.childNodes.length) part.replace(...value.childNodes)
     return true
   }
   return false
@@ -37,9 +37,9 @@ function processIterable(part: TemplatePart, value: unknown): boolean {
       if (item instanceof TemplateResult) {
         const fragment = document.createDocumentFragment()
         item.renderInto(fragment)
-        nodes.push(...fragment.children)
+        nodes.push(...fragment.childNodes)
       } else if (item instanceof DocumentFragment) {
-        nodes.push(...item.children)
+        nodes.push(...item.childNodes)
       } else {
         nodes.push(String(item))
       }

test/html.ts

@@ -40,6 +40,17 @@ describe('render', () => {
       render(main(child('Goodbye')), surface)
       expect(surface.innerHTML).to.equal('<div><span>Goodbye</span></div>')
     })
+
+    it('can nest document fragments and text nodes', () => {
+      const main = frag => html`<span>${frag}</span>`
+      const fragment = document.createDocumentFragment()
+      fragment.append(new Text('Hello World'))
+      render(main(fragment), surface)
+      expect(surface.innerHTML).to.equal('<span>Hello World</span>')
+      fragment.append(document.createTextNode('Hello Universe!'))
+      render(main(fragment), surface)
+      expect(surface.innerHTML).to.equal('<span>Hello Universe!</span>')
+    })
   })
 
   describe('iterables', () => {
@@ -51,6 +62,34 @@ describe('render', () => {
       expect(surface.innerHTML).to.equal('<div>fourfivesix</div>')
     })
 
+    it('supports iterables of Sub Templates with text nodes', () => {
+      const main = list => html`<div>${list}</div>`
+      let fragments = ['one', 'two', 'three'].map(text => html`${text}`)
+      render(main(fragments), surface)
+      expect(surface.innerHTML).to.equal('<div>onetwothree</div>')
+      fragments = ['four', 'five', 'six'].map(text => html`${text}`)
+      render(main(fragments), surface)
+      expect(surface.innerHTML).to.equal('<div>fourfivesix</div>')
+    })
+
+    it('supports iterables of fragments with text nodes', () => {
+      const main = list => html`<div>${list}</div>`
+      let fragments = ['one', 'two', 'three'].map(text => {
+        const fragment = document.createDocumentFragment()
+        fragment.append(new Text(text))
+        return fragment
+      })
+      render(main(fragments), surface)
+      expect(surface.innerHTML).to.equal('<div>onetwothree</div>')
+      fragments = ['four', 'five', 'six'].map(text => {
+        const fragment = document.createDocumentFragment()
+        fragment.append(new Text(text))
+        return fragment
+      })
+      render(main(fragments), surface)
+      expect(surface.innerHTML).to.equal('<div>fourfivesix</div>')
+    })
+
     it('supports other strings iterables in nodes', () => {
       const main = list => html`<div>${list}</div>`
       render(main(new Set(['one', 'two', 'three'])), surface)