Overview

An expression can be an array of templates, so items.map(item => html`…`) works. That fits a short list that does not reorder.

repeat(items, keyFn, item => html`…`) keeps a DOM node with its key when the list inserts, removes, or reorders. In JSX that identity was key={…} on the element. Here it is the key function passed to repeat.

keyed(value, template) is the single-node version: when value changes, that subtree is thrown away and the template is shown fresh. Import repeat and keyed from mates.

.map() vs repeat() vs keyed()

API
Best for
Notes
items.map(…) Short / stable Simple. Nodes may be recreated when the order changes.
repeat(items, keyFn, tpl) Keyed lists Moves existing nodes. Imported from mates.
keyed(value, tpl) One subtree Remounts when value changes. Imported from mates.

Short list with .map()

A stable array of templates is enough when items do not move.

import { html, renderApp } from 'mates';

const tags = ['html', 'lists', 'directives'];

const App = () => () => html`
<div class="m-col m-gap">
<p class="label m-0">Short / stable — .map() is fine</p>
<ul class="m-0">
${tags.map((t) => html`<li>${t}</li>`)}
</ul>
</div>
`;
renderApp(App, document.getElementById('app'));

Keyed list with repeat()

repeat(items, keyFn, template) moves existing DOM nodes when the list changes.

import { html, atom, repeat, renderApp } from 'mates';

const App = () => {
const items = atom([
{ id: 1, text: 'Learn templates' },
{ id: 2, text: 'Build something' },
{ id: 3, text: 'Ship it' },
]);
const draft = atom('');

const add = () => {
const text = draft().trim();
if (!text) return;
items.set((list) => [...list, { id: Date.now(), text }]);
draft.set('');
};

return () => html`
<div class="m-col m-gap">
<div class="m-flex m-gap-sm">
<input
class="m-flex-1"
.value=${draft()}
@input=${(e) => draft.set(e.target.value)}
@keydown=${(e) => e.key === 'Enter' && add()}
placeholder="Add item…"
/>
<button class="btn-primary" @click=${add}>Add</button>
</div>
${repeat(items(), (i) => i.id, (i) => html`
<div class="card card-body m-flex m-justify-between m-items-center">
<span>${i.text}</span>
<button
class="btn-ghost btn-sm"
@click=${() => items.set((list) => list.filter((x) => x.id !== i.id))}
>✕</button>

keyed() remounts one subtree

When the key changes, the previous DOM for that expression is discarded and the template is shown fresh.

import { html, atom, keyed, renderApp } from 'mates';

const App = () => {
const userId = atom(1);
return () => html`
<div class="m-col m-gap">
<button @click=${() => userId.set((n) => n + 1)}>
Next user (${userId()})
</button>
${keyed(userId(), html`
<div class="card card-body">
<p class="m-0">Profile #${userId()}</p>
<input placeholder="Draft resets when the key changes" />
</div>
`)}
</div>
`;
};
renderApp(App, document.getElementById('app'));