Merge pull request #9 from github/fix-html-only-call-update-after-initial-render

fix(html): only call `update()` after initial render

Author: keithamus

src/html.ts

@@ -95,6 +95,7 @@ export class TemplateResult {
       } else {
         element.appendChild(instance)
       }
+      return
     }
     renderedTemplateInstances.get(element)!.update((this.values as unknown) as Record<string, unknown>)
   }

test/html.ts

@@ -16,6 +16,22 @@ describe('render', () => {
     surface = document.createElement('section')
   })
 
+  it('calls `createCallback` on first render', () => {
+    const main = (x = null) => html`<div class="${x}"></div>`
+    let called = false
+    const instance = main()
+    instance.processor = {
+      processCallback() {
+        throw new Error('Expected processCallback to not be called')
+      },
+      createCallback() {
+        called = true
+      }
+    }
+    instance.renderInto(surface)
+    expect(called).to.equal(true)
+  })
+
   it('memoizes by TemplateResult#template, updating old templates with new values', () => {
     const main = (x = null) => html`<div class="${x}"></div>`
     render(main('foo'), surface)
@@ -51,6 +67,17 @@ describe('render', () => {
       render(main(fragment), surface)
       expect(surface.innerHTML).to.equal('<span>Hello Universe!</span>')
     })
+
+    it('renders DocumentFragments nested in sub templates nested in arrays', () => {
+      const sub = () => {
+        const frag = document.createDocumentFragment()
+        frag.appendChild(document.createElement('div'))
+        return html`<span>${frag}</span>`
+      }
+      const main = () => html`<div>${[sub(), sub()]}</div>`
+      render(main(), surface)
+      expect(surface.innerHTML).to.contain('<div><span><div></div></span><span><div></div></span></div>')
+    })
   })
 
   describe('iterables', () => {