From 72b179301b24fc6a6183c9139615b6535a34522c 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 1/2] Remove special treatment for `HTMLTemplateElement`

Now that `InnerTemplatePart` exists, the Node walker should yield
instances of `InnerTemplatePart` instead of collecting nested
`<template>` elements based on their attributes.

Consumers are free to override the `TemplateInstance` processor to
handle `<template>` elements in whichever way they please, while still
being able to fall back to the built-in behavior.
---
 src/processors.ts         | 27 ++++++++++++++++++---------
 src/template-instance.ts  |  8 +-------
 test/template-instance.ts | 20 +++++++++++++++++++-
 3 files changed, 38 insertions(+), 17 deletions(-)

diff --git a/src/processors.ts b/src/processors.ts
index 9146b54..7708f36 100644
--- a/src/processors.ts
+++ b/src/processors.ts
@@ -1,6 +1,7 @@
 import type {TemplatePart, TemplateTypeInit} from './types.js'
-import type {TemplateInstance} from './template-instance.js'
+import {TemplateInstance} from './template-instance.js'
 import {AttributeTemplatePart} from './attribute-template-part.js'
+import {InnerTemplatePart} from './inner-template-part.js'
 
 type PartProcessor = (part: TemplatePart, value: unknown, state: unknown) => void
 
@@ -9,7 +10,9 @@ export function createProcessor(processPart: PartProcessor): TemplateTypeInit {
     processCallback(_: TemplateInstance, parts: Iterable<TemplatePart>, state: unknown): void {
       if (typeof state !== 'object' || !state) return
       for (const part of parts) {
-        if (part.expression in state) {
+        if (part instanceof InnerTemplatePart) {
+          processPart(part, part.expression, state)
+        } else if (part.expression in state) {
           const value = (state as Record<string, unknown>)[part.expression] ?? ''
           processPart(part, value, state)
         }
@@ -18,8 +21,12 @@ export function createProcessor(processPart: PartProcessor): TemplateTypeInit {
   }
 }
 
-export function processPropertyIdentity(part: TemplatePart, value: unknown): void {
-  part.value = value instanceof Node ? value : String(value)
+export function processPropertyIdentity(part: TemplatePart, value: unknown, state: unknown): void {
+  if (part instanceof InnerTemplatePart) {
+    part.template.content.replaceChildren(new TemplateInstance(part.template, state))
+  } else {
+    part.value = value instanceof Node ? value : String(value)
+  }
 }
 
 export function processBooleanAttribute(part: TemplatePart, value: unknown): boolean {
@@ -35,8 +42,10 @@ export function processBooleanAttribute(part: TemplatePart, value: unknown): boo
 }
 
 export const propertyIdentity = createProcessor(processPropertyIdentity)
-export const propertyIdentityOrBooleanAttribute = createProcessor((part: TemplatePart, value: unknown) => {
-  if (!processBooleanAttribute(part, value)) {
-    processPropertyIdentity(part, value)
-  }
-})
+export const propertyIdentityOrBooleanAttribute = createProcessor(
+  (part: TemplatePart, value: unknown, state: unknown) => {
+    if (!processBooleanAttribute(part, value)) {
+      processPropertyIdentity(part, value, state)
+    }
+  },
+)
diff --git a/src/template-instance.ts b/src/template-instance.ts
index a10cc20..28aeffd 100644
--- a/src/template-instance.ts
+++ b/src/template-instance.ts
@@ -10,13 +10,7 @@ function* collectParts(el: DocumentFragment): Generator<TemplatePart> {
   let node
   while ((node = walker.nextNode())) {
     if (node instanceof HTMLTemplateElement) {
-      if (node.hasAttribute('directive')) {
-        yield new InnerTemplatePart(node)
-      } else {
-        for (const part of collectParts(node.content)) {
-          yield part
-        }
-      }
+      yield new InnerTemplatePart(node)
     } else if (node instanceof Element && node.hasAttributes()) {
       for (let i = 0; i < node.attributes.length; i += 1) {
         const attr = node.attributes.item(i)
diff --git a/test/template-instance.ts b/test/template-instance.ts
index ad41273..bb1992b 100644
--- a/test/template-instance.ts
+++ b/test/template-instance.ts
@@ -388,7 +388,7 @@ describe('template-instance', () => {
               part.replace()
             }
           } else {
-            processPropertyIdentity(part, value)
+            processPropertyIdentity(part, value, state)
           }
         })
         const template = Object.assign(document.createElement('template'), {
@@ -402,6 +402,24 @@ describe('template-instance', () => {
         root.replaceChildren(new TemplateInstance(template, {x: 'x', y: false}, processor))
         expect(root.innerHTML).to.equal('x')
       })
+
+      it('makes outer state available to InnerTemplatePart elements without attributes', () => {
+        let callCount = 0
+        const processor = createProcessor((part, value, state) => {
+          if (part instanceof InnerTemplatePart && value === part.expression) {
+            callCount += 1
+            processPropertyIdentity(part, value, state)
+          }
+        })
+        const template = Object.assign(document.createElement('template'), {
+          innerHTML: '<template>{{x}}</template>',
+        })
+
+        const root = document.createElement('div')
+        root.appendChild(new TemplateInstance(template, {x: 'Hello world'}, processor))
+        expect(callCount).to.equal(1)
+        expect(root.innerHTML).to.equal('<template>Hello world</template>')
+      })
     })
   })
 })

From 2c723d4fd02bf1e41588f234f3d75a20dbe7509e Mon Sep 17 00:00:00 2001
From: Sean Doyle <sean.p.doyle24@gmail.com>
Date: Fri, 13 Dec 2024 12:04:16 -0500
Subject: [PATCH 2/2] Failing tests: not updating

---
 src/processors.ts         | 18 ++++++++++++------
 test/template-instance.ts |  8 ++++----
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/processors.ts b/src/processors.ts
index 7708f36..60ab25c 100644
--- a/src/processors.ts
+++ b/src/processors.ts
@@ -1,7 +1,7 @@
 import type {TemplatePart, TemplateTypeInit} from './types.js'
 import {TemplateInstance} from './template-instance.js'
-import {AttributeTemplatePart} from './attribute-template-part.js'
 import {InnerTemplatePart} from './inner-template-part.js'
+import {AttributeTemplatePart} from './attribute-template-part.js'
 
 type PartProcessor = (part: TemplatePart, value: unknown, state: unknown) => void
 
@@ -21,16 +21,22 @@ export function createProcessor(processPart: PartProcessor): TemplateTypeInit {
   }
 }
 
-export function processPropertyIdentity(part: TemplatePart, value: unknown, state: unknown): void {
+export function processPropertyIdentity(part: TemplatePart, value: unknown, state?: unknown): void {
   if (part instanceof InnerTemplatePart) {
-    part.template.content.replaceChildren(new TemplateInstance(part.template, state))
+    const instance = new TemplateInstance(part.template, state)
+    part.template.content.replaceChildren(instance)
   } else {
     part.value = value instanceof Node ? value : String(value)
   }
 }
 
-export function processBooleanAttribute(part: TemplatePart, value: unknown): boolean {
-  if (
+export function processBooleanAttribute(part: TemplatePart, value: unknown, state?: unknown): boolean {
+  if (part instanceof InnerTemplatePart) {
+    const instance = new TemplateInstance(part.template, state, propertyIdentityOrBooleanAttribute)
+    part.template.content.replaceChildren(instance)
+
+    return true
+  } else if (
     typeof value === 'boolean' &&
     part instanceof AttributeTemplatePart &&
     typeof part.element[part.attributeName as keyof Element] === 'boolean'
@@ -44,7 +50,7 @@ export function processBooleanAttribute(part: TemplatePart, value: unknown): boo
 export const propertyIdentity = createProcessor(processPropertyIdentity)
 export const propertyIdentityOrBooleanAttribute = createProcessor(
   (part: TemplatePart, value: unknown, state: unknown) => {
-    if (!processBooleanAttribute(part, value)) {
+    if (!processBooleanAttribute(part, value, state)) {
       processPropertyIdentity(part, value, state)
     }
   },
diff --git a/test/template-instance.ts b/test/template-instance.ts
index bb1992b..2d203a0 100644
--- a/test/template-instance.ts
+++ b/test/template-instance.ts
@@ -388,7 +388,7 @@ describe('template-instance', () => {
               part.replace()
             }
           } else {
-            processPropertyIdentity(part, value, state)
+            processPropertyIdentity(part, value)
           }
         })
         const template = Object.assign(document.createElement('template'), {
@@ -403,12 +403,12 @@ describe('template-instance', () => {
         expect(root.innerHTML).to.equal('x')
       })
 
-      it('makes outer state available to InnerTemplatePart elements without attributes', () => {
+      it('makes outer state available to InnerTemplatePart elements without attributes with default propertyIdentity processing', () => {
         let callCount = 0
-        const processor = createProcessor((part, value, state) => {
+        const processor = createProcessor((part, value) => {
           if (part instanceof InnerTemplatePart && value === part.expression) {
             callCount += 1
-            processPropertyIdentity(part, value, state)
+            processPropertyIdentity(part, value)
           }
         })
         const template = Object.assign(document.createElement('template'), {