Merge pull request #73 from seanpdoyle/accept-node-template-parts

Accept `Node` values as Template Parts

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 = value instanceof Element ? value : String(value)
+  part.value = value instanceof Node ? value : String(value)
 }
 
 export function processBooleanAttribute(part: TemplatePart, value: unknown): boolean {

src/types.ts

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

test/template-instance.ts

@@ -36,6 +36,19 @@ describe('template-instance', () => {
 
     expect(root.innerHTML).to.equal('<template><div>Hello world</div></template>')
   })
+  it('applies data to templated DocumentFragment nodes', () => {
+    const template = document.createElement('template')
+    const fragment = Object.assign(document.createElement('template'), {
+      innerHTML: '<div>Hello world</div>',
+    })
+    const originalHTML = `{{x}}`
+    template.innerHTML = originalHTML
+    const instance = new TemplateInstance(template, {x: fragment.content})
+    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}}!`