Merge pull request #65 from seanpdoyle/node-template-part

Extend `processPropertyIdentity` to handle Element

Author: keithamus

src/processors.ts

@@ -19,7 +19,7 @@ export function createProcessor(processPart: PartProcessor): TemplateTypeInit {
 }
 
 export function processPropertyIdentity(part: TemplatePart, value: unknown): void {
-  part.value = String(value)
+  part.value = value instanceof Element ? value : String(value)
 }
 
 export function processBooleanAttribute(part: TemplatePart, value: unknown): boolean {

src/template-instance.ts

@@ -5,7 +5,7 @@ import {propertyIdentity} from './processors.js'
 import {TemplatePart, TemplateTypeInit} from './types.js'
 
 function* collectParts(el: DocumentFragment): Generator<TemplatePart> {
-  const walker = el.ownerDocument.createTreeWalker(el, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT, null, false)
+  const walker = el.ownerDocument.createTreeWalker(el, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT, null)
   let node
   while ((node = walker.nextNode())) {
     if (node instanceof Element && node.hasAttributes()) {

src/types.ts

@@ -2,7 +2,7 @@ import type {TemplateInstance} from './template-instance.js'
 
 export interface TemplatePart {
   expression: string
-  value: string | null
+  value: Element | string | null
 }
 
 type TemplateProcessCallback = (instance: TemplateInstance, parts: Iterable<TemplatePart>, params: unknown) => void

test/template-instance.ts

@@ -14,6 +14,19 @@ describe('template-instance', () => {
     root.appendChild(instance)
     expect(root.innerHTML).to.equal(`Hello world`)
   })
+  it('applies data to templated element nodes', () => {
+    const template = document.createElement('template')
+    const element = Object.assign(document.createElement('div'), {
+      innerHTML: 'Hello world'
+    })
+    const originalHTML = `{{x}}`
+    template.innerHTML = originalHTML
+    const instance = new TemplateInstance(template, {x: element})
+    expect(template.innerHTML).to.equal(originalHTML)
+    const root = document.createElement('div')
+    root.appendChild(instance)
+    expect(root.innerHTML).to.equal(`<div>Hello world</div>`)
+  })
   it('can render into partial text nodes', () => {
     const template = document.createElement('template')
     const originalHTML = `Hello {{x}}!`