Merge pull request #74 from seanpdoyle/replace-child-node

Change `NodeTemplatePart.replace` type signature
github · Dec 13, 2024 · 743b970 · 743b970
2 parents 0678eb7 + 79b4ee6
commit 743b970
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 7 deletions.
diff --git a/src/node-template-part.ts b/src/node-template-part.ts
@@ -1,9 +1,9 @@
 import {TemplatePart} from './types.js'
 
-const parts = new WeakMap<NodeTemplatePart, ChildNode[]>()
+const parts = new WeakMap<NodeTemplatePart, Node[]>()
 export class NodeTemplatePart implements TemplatePart {
   constructor(
-    node: ChildNode,
+    node: Node,
     public expression: string,
   ) {
     parts.set(this, [node])
@@ -29,14 +29,15 @@ export class NodeTemplatePart implements TemplatePart {
     return parts.get(this)![parts.get(this)!.length - 1].nextSibling
   }
 
-  replace(...nodes: Array<string | ChildNode>): void {
-    const normalisedNodes: ChildNode[] = nodes.map(node => {
+  replace(...nodes: Array<string | Node>): void {
+    const normalisedNodes: Node[] = nodes.map(node => {
       if (typeof node === 'string') return new Text(node)
       return node
     })
     if (!normalisedNodes.length) normalisedNodes.push(new Text(''))
-    parts.get(this)![0].before(...normalisedNodes)
-    for (const part of parts.get(this)!) part.remove()
+    const node = parts.get(this)![0]
+    for (const normalisedNode of normalisedNodes) node.parentNode?.insertBefore(normalisedNode, node)
+    for (const part of parts.get(this)!) part.parentNode?.removeChild(part)
     parts.set(this, normalisedNodes)
   }
 }
diff --git a/test/template-instance.ts b/test/template-instance.ts
@@ -1,6 +1,6 @@
 import {expect} from '@open-wc/testing'
 import {TemplateInstance} from '../src/template-instance'
-import type {NodeTemplatePart} from '../src/node-template-part'
+import {NodeTemplatePart} from '../src/node-template-part'
 import {propertyIdentityOrBooleanAttribute, createProcessor} from '../src/processors'
 
 describe('template-instance', () => {
@@ -238,6 +238,25 @@ describe('template-instance', () => {
 
   describe('edge cases', () => {
     describe('NodeTemplatePart', () => {
+      it('replace supports a DocumentFragment Node that is not a ChildNode', () => {
+        const template = Object.assign(document.createElement('template'), {
+          innerHTML: '<div>{{a}}</div>',
+        })
+        const {content} = Object.assign(document.createElement('template'), {
+          innerHTML: 'after',
+        })
+        const instance = new TemplateInstance(
+          template,
+          {a: 'before'},
+          createProcessor(part => {
+            if (part instanceof NodeTemplatePart) part.replace(content)
+          }),
+        )
+        const root = document.createElement('div')
+        root.appendChild(instance)
+        expect(root.innerHTML).to.equal('<div>after</div>')
+      })
+
       it('replaces an empty replace() call with an empty text node', () => {
         const template = document.createElement('template')
         template.innerHTML = `<div>{{a}}</div>`