From 38c304abfb1c20d53c9591a0a6d77a871768f9a2 Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Tue, 3 Dec 2024 14:19:08 +0000
Subject: [PATCH 1/7] build before publish

---
 .github/workflows/publish.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index 083f079..de63ebd 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -19,6 +19,6 @@ jobs:
       - run: npm version ${TAG_NAME} --git-tag-version=false
         env:
           TAG_NAME: ${{ github.event.release.tag_name }}
-      - run: npm whoami; npm --ignore-scripts publish
+      - run: npm whoami; npm publish
         env:
           NODE_AUTH_TOKEN: ${{secrets.npm_token}}

From 28f61c6ec235701ddeb312057b6af5f91b2969ba Mon Sep 17 00:00:00 2001
From: Sean Doyle <sean.p.doyle24@gmail.com>
Date: Sun, 8 Dec 2024 20:35:47 -0500
Subject: [PATCH 2/7] Accept `Node` values as Template Parts

Related to [github/template-parts#62][] (see [3.2. Template Parts and Custom Template Process Callback][])
Follow-up to [github/template-parts#65][]

While the changes made in [#65][] improved support for `Element` parts,
the expansion from `string` to `Element | string` was not broadened
enough. While all `Element` instances are DOM Nodes, not all DOM Nodes
are `Element` instances.

For example, this change enables support for [DocumentFragment][]
instances (generated from classes like [Range][] or properties like
[HTMLTemplateElement.content][]), where prior support resulted in
templating the `[object DocumentFragment]` text string instead of the
fragment's `Node` instances.

[github/template-parts#62]: https://github.com/github/template-parts/issues/62
[3.2. Template Parts and Custom Template Process Callback]: https://github.com/WICG/webcomponents/blob/159b1600bab02fe9cd794825440a98537d53b389/proposals/Template-Instantiation.md#32-template-parts-and-custom-template-process-callback
[github/template-parts#65]: https://github.com/github/template-parts/pull/65
[DocumentFragment]: https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment
[HTMLTemplateElement.content]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement/content
---
 src/processors.ts         |  2 +-
 src/types.ts              |  2 +-
 test/template-instance.ts | 13 +++++++++++++
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/processors.ts b/src/processors.ts
index 1115516..1f47ec0 100644
--- a/src/processors.ts
+++ b/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 {
diff --git a/src/types.ts b/src/types.ts
index a5c2520..116cea6 100644
--- a/src/types.ts
+++ b/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
diff --git a/test/template-instance.ts b/test/template-instance.ts
index 55096de..5b5ba07 100644
--- a/test/template-instance.ts
+++ b/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}}!`

From 79b4ee611aec5f9b7578844b06fad4e6a6e6b824 Mon Sep 17 00:00:00 2001
From: Sean Doyle <sean.p.doyle24@gmail.com>
Date: Thu, 12 Dec 2024 17:53:22 -0500
Subject: [PATCH 3/7] Change `NodeTemplatePart.replace` type signature

Replace `ChildNode` with `Node` in `NodeTemplatePart.replace(...nodes)`
signature.

According to the [3.2. Template Parts and Custom Template Process
Callback][] section of the specification, the `NodeTemplatePart`
interface declares `replace(...nodes: Array<string | Node>)`:

```typescript
interface NodeTemplatePart : TemplatePart {
  readonly attribute ContainerNode parentNode;
  readonly attribute Node? previousSibling;
  readonly attribute Node? nextSibling;
  [NewObject] readonly NodeList replacementNodes;
  void replace((Node or DOMString)... nodes);
  void replaceHTML(DOMString html);
}
```

This commit changes the type signature and adds coverage for replacing a
`NodeTemplatePart` with a `DocumentFragment` instance.

[3.2. Template Parts and Custom Template Process Callback]: https://github.com/WICG/webcomponents/blob/gh-pages/proposals/Template-Instantiation.md#32-template-parts-and-custom-template-process-callback
---
 src/node-template-part.ts | 13 +++++++------
 test/template-instance.ts | 21 ++++++++++++++++++++-
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/node-template-part.ts b/src/node-template-part.ts
index 978840c..413251f 100644
--- 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
index 5b5ba07..4b1242b 100644
--- 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>`

From 8aba104892250f3931a1369711c3ce178b238b67 Mon Sep 17 00:00:00 2001
From: Sean Doyle <sean.p.doyle24@gmail.com>
Date: Thu, 12 Dec 2024 17:53:22 -0500
Subject: [PATCH 4/7] Implement `InnerTemplatePart` class

The [3.3. Conditionals and Loops using Nested Templates][] section of
the specification mentions special treatment of `<template>` elements
with `[directive]` and `[expression]` attributes within `<template>`
elements. They're to be treated as parts of their own, represented by an
`InnerTemplatePart` interface:

```ts
 InnerTemplatePart : NodeTemplatePart {
    HTMLTemplateElement template;
    attribute DOMString directive;
}
```

This commit introduces that class, along with special treatment whenever
collecting parts from an `HTMLTemplateElement` that also has a
`[directive]` attribute.

To demonstrate their utility, this commit includes a test case that
exercises a naive implementation of an `if` conditional. As a caveat,
it's worth mentioning that the specification proposal explicitly
mentions the nuance surrounding looping and conditional rendering:

> this approach involves the template process callback cloning template
> parts along with other nodes, or let author scripts manually specify to
> which element each template part belongs. This quickly becomes an
> entangled mess because now we could have multiple template parts that
> refer to a single DOM location or an attribute, and we have to start
> dealing with multiple template parts trying to override one another even
> though there is no good use case for such a behavior.
>
> We like the idea of supporting very basic control flow such as `if` and
> `foreach` in the default template process callback but we don't think it's
> a show stopper if the default template process callback didn't support
> them in the initial cut.

This commit does not aim to introduce a canonical implementation for
conditionals or looping, but it should enable a change like that in the
future.

[3.3. Conditionals and Loops using Nested Templates]: https://github.com/WICG/webcomponents/blob/gh-pages/proposals/Template-Instantiation.md#33-conditionals-and-loops-using-nested-templates
---
 src/inner-template-part.ts | 11 +++++++++++
 src/processors.ts          | 12 ++++++------
 src/template-instance.ts   |  9 +++++++--
 test/processors.ts         | 20 ++++++++++++++++++++
 test/template-instance.ts  | 29 ++++++++++++++++++++++++++++-
 5 files changed, 72 insertions(+), 9 deletions(-)
 create mode 100644 src/inner-template-part.ts

diff --git a/src/inner-template-part.ts b/src/inner-template-part.ts
new file mode 100644
index 0000000..5f599c3
--- /dev/null
+++ b/src/inner-template-part.ts
@@ -0,0 +1,11 @@
+import {NodeTemplatePart} from './node-template-part.js'
+
+export class InnerTemplatePart extends NodeTemplatePart {
+  constructor(public template: HTMLTemplateElement) {
+    super(template, template.getAttribute('expression') ?? '')
+  }
+
+  get directive(): string {
+    return this.template.getAttribute('directive') ?? ''
+  }
+}
diff --git a/src/processors.ts b/src/processors.ts
index 1f47ec0..9146b54 100644
--- a/src/processors.ts
+++ b/src/processors.ts
@@ -2,16 +2,16 @@ import type {TemplatePart, TemplateTypeInit} from './types.js'
 import type {TemplateInstance} from './template-instance.js'
 import {AttributeTemplatePart} from './attribute-template-part.js'
 
-type PartProcessor = (part: TemplatePart, value: unknown) => void
+type PartProcessor = (part: TemplatePart, value: unknown, state: unknown) => void
 
 export function createProcessor(processPart: PartProcessor): TemplateTypeInit {
   return {
-    processCallback(_: TemplateInstance, parts: Iterable<TemplatePart>, params: unknown): void {
-      if (typeof params !== 'object' || !params) return
+    processCallback(_: TemplateInstance, parts: Iterable<TemplatePart>, state: unknown): void {
+      if (typeof state !== 'object' || !state) return
       for (const part of parts) {
-        if (part.expression in params) {
-          const value = (params as Record<string, unknown>)[part.expression] ?? ''
-          processPart(part, value)
+        if (part.expression in state) {
+          const value = (state as Record<string, unknown>)[part.expression] ?? ''
+          processPart(part, value, state)
         }
       }
     },
diff --git a/src/template-instance.ts b/src/template-instance.ts
index 7f4deba..a10cc20 100644
--- a/src/template-instance.ts
+++ b/src/template-instance.ts
@@ -1,5 +1,6 @@
 import {parse} from './template-string-parser.js'
 import {AttributeValueSetter, AttributeTemplatePart} from './attribute-template-part.js'
+import {InnerTemplatePart} from './inner-template-part.js'
 import {NodeTemplatePart} from './node-template-part.js'
 import {propertyIdentity} from './processors.js'
 import {TemplatePart, TemplateTypeInit} from './types.js'
@@ -9,8 +10,12 @@ function* collectParts(el: DocumentFragment): Generator<TemplatePart> {
   let node
   while ((node = walker.nextNode())) {
     if (node instanceof HTMLTemplateElement) {
-      for (const part of collectParts(node.content)) {
-        yield part
+      if (node.hasAttribute('directive')) {
+        yield new InnerTemplatePart(node)
+      } else {
+        for (const part of collectParts(node.content)) {
+          yield part
+        }
       }
     } else if (node instanceof Element && node.hasAttributes()) {
       for (let i = 0; i < node.attributes.length; i += 1) {
diff --git a/test/processors.ts b/test/processors.ts
index b83b4da..89131c0 100644
--- a/test/processors.ts
+++ b/test/processors.ts
@@ -1,5 +1,6 @@
 import {expect} from '@open-wc/testing'
 import {TemplateInstance} from '../src/template-instance'
+import {InnerTemplatePart} from '../src/inner-template-part'
 import type {TemplateTypeInit} from '../src/types'
 import {createProcessor} from '../src/processors'
 describe('createProcessor', () => {
@@ -29,4 +30,23 @@ describe('createProcessor', () => {
     instance.update({y: 'world'})
     expect(calls).to.eql(0)
   })
+
+  describe('handling InnerTemplatePart', () => {
+    beforeEach(() => {
+      processor = createProcessor(part => {
+        if (part instanceof InnerTemplatePart) calls += 1
+      })
+    })
+
+    it('detects InnerTemplatePart instances with <template> element', () => {
+      template.innerHTML = '<template directive="if" expression="x">{{x}}</template>'
+      new TemplateInstance(template, {x: true}, processor)
+      expect(calls).to.eql(1)
+    })
+
+    it('does not detect InnerTemplatePart instances without <template> element', () => {
+      new TemplateInstance(template, {x: true}, processor)
+      expect(calls).to.eql(0)
+    })
+  })
 })
diff --git a/test/template-instance.ts b/test/template-instance.ts
index 4b1242b..76e691a 100644
--- a/test/template-instance.ts
+++ b/test/template-instance.ts
@@ -1,7 +1,8 @@
 import {expect} from '@open-wc/testing'
 import {TemplateInstance} from '../src/template-instance'
 import {NodeTemplatePart} from '../src/node-template-part'
-import {propertyIdentityOrBooleanAttribute, createProcessor} from '../src/processors'
+import {InnerTemplatePart} from '../src/inner-template-part'
+import {processPropertyIdentity, propertyIdentityOrBooleanAttribute, createProcessor} from '../src/processors'
 
 describe('template-instance', () => {
   it('applies data to templated text nodes', () => {
@@ -354,5 +355,31 @@ describe('template-instance', () => {
         expect(processCallCount).to.equal(2)
       })
     })
+
+    describe('handling InnerTemplatePart', () => {
+      it('makes outer state available to inner parts', () => {
+        const processor = createProcessor((part, value, state) => {
+          if (part instanceof InnerTemplatePart && part.directive === 'if') {
+            if (typeof state === 'object' && (state as Record<string, unknown>)[part.expression]) {
+              part.replace(new TemplateInstance(part.template, state, processor))
+            } else {
+              part.replace()
+            }
+          } else {
+            processPropertyIdentity(part, value)
+          }
+        })
+        const template = Object.assign(document.createElement('template'), {
+          innerHTML: '{{x}}<template directive="if" expression="y">{{y}}</template>',
+        })
+
+        const root = document.createElement('div')
+        root.appendChild(new TemplateInstance(template, {x: 'x', y: 'y'}, processor))
+        expect(root.innerHTML).to.equal('xy')
+
+        root.replaceChildren(new TemplateInstance(template, {x: 'x', y: false}, processor))
+        expect(root.innerHTML).to.equal('x')
+      })
+    })
   })
 })

From 4e442b769bd3e61065cc32df2cd59cfba51fb188 Mon Sep 17 00:00:00 2001
From: Sean Doyle <sean.p.doyle24@gmail.com>
Date: Fri, 13 Dec 2024 11:12:08 -0500
Subject: [PATCH 5/7] Add test coverage for both built-in processor strategies

Existing test coverage lacked tests that exercised _both_
the default `processPropertyIdentity` strategy alongside the optional
`propertyIdentityOrBooleanAttribute` strategy.

This commit doesn't contain any implementation changes, but broadens
test coverage instead.
---
 test/template-instance.ts | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/test/template-instance.ts b/test/template-instance.ts
index 76e691a..fac7297 100644
--- a/test/template-instance.ts
+++ b/test/template-instance.ts
@@ -28,14 +28,32 @@ describe('template-instance', () => {
     root.appendChild(instance)
     expect(root.innerHTML).to.equal(`<div>Hello world</div>`)
   })
-  it('applies data to nested templated element nodes', () => {
+  it('applies data to nested templated element nodes with the default processPropertyIdentity', () => {
     const root = document.createElement('div')
     const template = Object.assign(document.createElement('template'), {
       innerHTML: '<template><div>{{x}}</div></template>',
     })
-    root.appendChild(new TemplateInstance(template, {x: 'Hello world'}))
+    const instance = new TemplateInstance(template, {x: 'Hello world'})
 
+    root.appendChild(instance)
     expect(root.innerHTML).to.equal('<template><div>Hello world</div></template>')
+    expect(template.innerHTML).to.equal('<template><div>{{x}}</div></template>')
+    instance.update({x: 'Goodbye world'})
+    expect(root.innerHTML).to.equal('<template><div>Goodbye world</div></template>')
+    expect(template.innerHTML).to.equal('<template><div>{{x}}</div></template>')
+  })
+  it('applies data to nested templated element nodes with propertyIdentityOrBooleanAttribute', () => {
+    const template = Object.assign(document.createElement('template'), {
+      innerHTML: '<template><div hidden="{{hidden}}"></div></template>',
+    })
+    const instance = new TemplateInstance(template, {hidden: true}, propertyIdentityOrBooleanAttribute)
+
+    const root = document.createElement('div')
+    root.appendChild(instance)
+    expect(root.innerHTML).to.equal('<template><div hidden=""></div></template>')
+    expect(template.innerHTML).to.equal('<template><div hidden="{{hidden}}"></div></template>')
+    instance.update({hidden: false})
+    expect(root.innerHTML).to.equal('<template><div></div></template>')
   })
   it('applies data to templated DocumentFragment nodes', () => {
     const template = document.createElement('template')
@@ -357,7 +375,7 @@ describe('template-instance', () => {
     })
 
     describe('handling InnerTemplatePart', () => {
-      it('makes outer state available to inner parts', () => {
+      it('makes outer state available to InnerTemplatePart elements with [directive]', () => {
         const processor = createProcessor((part, value, state) => {
           if (part instanceof InnerTemplatePart && part.directive === 'if') {
             if (typeof state === 'object' && (state as Record<string, unknown>)[part.expression]) {

From 8e8475790d7bb6d69d07449fc50965d8ebadeff7 Mon Sep 17 00:00:00 2001
From: Sean Doyle <sean.p.doyle24@gmail.com>
Date: Fri, 13 Dec 2024 23:29:39 -0500
Subject: [PATCH 6/7] Export `InnerTemplatePart`

Add an entry to the `src/index.ts` to export the new
`InnerTemplatePart`.

Since consumers are most likely to import `TemplateInstance`, change the
`test/template-instance.ts` test file to import properties from the
module in a way that more closely resembles the end-user consumer
experience.
---
 src/index.ts              |  1 +
 test/template-instance.ts | 12 ++++++++----
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index 5ea3b61..176d5d7 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,6 +1,7 @@
 export {TemplateInstance} from './template-instance.js'
 export {parse} from './template-string-parser.js'
 export {AttributeTemplatePart, AttributeValueSetter} from './attribute-template-part.js'
+export {InnerTemplatePart} from './inner-template-part.js'
 export {NodeTemplatePart} from './node-template-part.js'
 export {
   createProcessor,
diff --git a/test/template-instance.ts b/test/template-instance.ts
index 76e691a..6bea832 100644
--- a/test/template-instance.ts
+++ b/test/template-instance.ts
@@ -1,8 +1,12 @@
 import {expect} from '@open-wc/testing'
-import {TemplateInstance} from '../src/template-instance'
-import {NodeTemplatePart} from '../src/node-template-part'
-import {InnerTemplatePart} from '../src/inner-template-part'
-import {processPropertyIdentity, propertyIdentityOrBooleanAttribute, createProcessor} from '../src/processors'
+import {
+  TemplateInstance,
+  NodeTemplatePart,
+  InnerTemplatePart,
+  processPropertyIdentity,
+  propertyIdentityOrBooleanAttribute,
+  createProcessor,
+} from '../src/index'
 
 describe('template-instance', () => {
   it('applies data to templated text nodes', () => {

From b98aa52203f2fe88b3fb41e9f207a3e35c060fef Mon Sep 17 00:00:00 2001
From: Leslie Cohn-Wein <lesliecdubs@github.com>
Date: Fri, 10 Jan 2025 11:59:26 -0600
Subject: [PATCH 7/7] Update CODEOWNERS to Web Systems

---
 CODEOWNERS | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CODEOWNERS b/CODEOWNERS
index 68f394d..e6bf555 100644
--- a/CODEOWNERS
+++ b/CODEOWNERS
@@ -1 +1 @@
-* @github/primer-reviewers
+* @github/web-systems-reviewers