Compare: Vanilla · vfunc · React/Vue

const list = document.querySelector('#list');
const items = [];
document.querySelector('#add').addEventListener('click', () => {
  const input = document.querySelector('#text');
  items.push(input.value);
  list.innerHTML = items.map((t) => '<li>' + t + '</li>').join('');  // no escaping → XSS
  input.value = '';
});

const todo = vf.vfunc({
  state: { items: [] },
  render: (s) => vf.html`
    <form data-action="add"><input data-ref="text"><button>Add</button></form>
    <ul>${s.items.map((t) => vf.html`<li>${t}</li>`)}</ul>`,
  delegates: [{ selector: '[data-action="add"]', eventType: 'submit', onEvent: (e) => {
    e.event.preventDefault();
    e.sender.setState({ items: e.sender.items.concat(e.sender.refs.text.value) });
  } }]
});
todo.mount('#app');

function Todo() {
  const [items, setItems] = useState([]);
  const [text, setText] = useState('');
  return (
    <>
      <form onSubmit={(e) => { e.preventDefault(); setItems([...items, text]); setText(''); }}>
        <input value={text} onChange={(e) => setText(e.target.value)} /><button>Add</button>
      </form>
      <ul>{items.map((t, i) => <li key={i}>{t}</li>)}</ul>
    </>
  );
}