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, params: unknown): void { - if (typeof params !== 'object' || !params) return + processCallback(_: TemplateInstance, parts: Iterable, state: unknown): void { + if (typeof state !== 'object' || !state) return for (const part of parts) { - if (part.expression in params) { - const value = (params as Record)[part.expression] ?? '' - processPart(part, value) + if (part.expression in state) { + const value = (state as Record)[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 { 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