test.js

import { html, render } from 'https://cdn.skypack.dev/uhtml@3';
import { effect, signal } from 'https://cdn.skypack.dev/[email protected]';

const todos = signal([]);

const add = () => {
  const uuid = crypto.randomUUID();
  const text = `Item ${uuid.split('-')[1]}`;
  todos.value = todos.value.concat({ uuid, text });
};

const remove = (todo) => {
  todos.value = todos.value.filter(t => t !== todo);
};

const Todo = (todo) => {
  return html`<li @click=${() => remove(todo)}>${todo.text}</li>`;
};

const Todos = () => html`
  <div class="app">
    <h1>Items (${todos.value.length})</h1>
    <button @click=${add}>Add Item</button>
    <ul>${todos.value.map(Todo)}</ul>
  </div>
`;

const App = () => html`${Todos()}`;

effect(() => render(document.querySelector('#r00t'), App));