Failing tests: not updating

Author: seanpdoyle

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)
     }
   },

test/template-instance.ts

@@ -28,15 +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')
@@ -367,7 +384,7 @@ describe('template-instance', () => {
               part.replace()
             }
           } else {
-            processPropertyIdentity(part, value, state)
+            processPropertyIdentity(part, value)
           }
         })
         const template = Object.assign(document.createElement('template'), {
@@ -382,12 +399,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'), {