) {
this.placeholderActions.forEach(({ path, action }) => {
- action(variableParts, followPath(template, path));
+ const state = template.state[path.map(n => '' + n).join('.')] ??= {};
+ action.reset(state, followPath(template.container, path));
+ });
+ this.placeholderActions.forEach(({ path, action }) => {
+ const state = template.state[path.map(n => '' + n).join('.')] ??= {};
+ action.act(state, variableParts, followPath(template.container, path));
});
}
}
@@ -238,17 +308,17 @@ export type HtmlTemplater =
=> ChildNode[];
export function template(): HtmlTemplater {
- let container: ChildNode[] | null = null;
+ let instance: HtmlFragmentInstance | null = null;
return (constantParts, ... variableParts) => {
let b = templateCache.get(constantParts);
if (b === void 0) {
b = new HtmlFragmentBuilder(constantParts);
templateCache.set(constantParts, b);
}
- if (container === null) {
- container = b.clone();
+ if (instance === null) {
+ instance = b.clone();
}
- b.update(container, variableParts);
- return container;
+ b.update(instance, variableParts);
+ return instance.container;
};
}
diff --git a/packages/html2/test/html.test.ts b/packages/html2/test/html.test.ts
index 1fa4205..6a85c50 100644
--- a/packages/html2/test/html.test.ts
+++ b/packages/html2/test/html.test.ts
@@ -20,6 +20,11 @@ describe('basic templating', () => {
compareHTML(template()`${y}`, 'abc');
});
+ it('should substitute multiple strings', () => {
+ const y = 'abc';
+ compareHTML(template()`${y} ${y} ${y}`, 'abc abc abc');
+ });
+
it('should substitute a node', () => {
const y = template()`q`;
compareHTML(template()`${y}`, 'q');
@@ -41,4 +46,57 @@ describe('basic templating', () => {
compareHTML(template()`${ps.map(p => p())}
`,
'123234
');
});
+
+ it('should substitute into attributes, with children', () => {
+ const v = () => 'aaa';
+ const ps = [() => '123', () => '234'];
+ const f = 'z';
+ compareHTML(template()`${f}${ps.map(p => p())}
`,
+ 'z123234
');
+ });
+
+ it('should substitute into attributes, with children and whitespace', () => {
+ const v = () => 'aaa';
+ const ps = [() => '123', () => '234'];
+ const f = 'z';
+ compareHTML(template()`${f}
+ ${ps.map(p => p())}
+
`,
+ `z
+ 123234
+
`);
+ });
+
+ it('example from paradise.js', () => {
+ const pieces = ['C', 'D'];
+ compareHTML(template()`
+ ${'B'}
+ ${pieces.map(p => p)}
+
`,
+ `
+ B
+ CD
+
`);
+ });
+
+ it('should be callable multiple times', () => {
+ const v = () => 'aaa';
+ const ps = [() => '123', () => '234', () => '345'];
+ const expected = '123234345
';
+ const t = template();
+ compareHTML(t`${ps.map(p => p())}
`, expected);
+ compareHTML(t`${ps.map(p => p())}
`, expected);
+ compareHTML(t`${ps.map(p => p())}
`, expected);
+ });
+
+ it('should be callable multiple times with extra items', () => {
+ const v = () => 'aaa';
+ const t = template();
+ const ps = [() => '1'];
+ compareHTML(t`${ps.map(p => p())}
`, '1
');
+ ps.push(() => '2');
+ compareHTML(t`${ps.map(p => p())}
`, '12
');
+ ps.push(() => '3');
+ compareHTML(t`${ps.map(p => p())}
`, '123
');
+ });
});