Esempio completo

Costruiamo una piccola Todo app con componenti, props, stato e liste.

Obiettivo

Creiamo una Todo app composta da un form e una lista. L'esempio mostra come passare funzioni ai figli e aggiornare lo stato nel componente padre.

Il componente principale

import { defineWompo, html, useState } from 'wompo';

function TodoApp() {
  const [todos, setTodos] = useState([]);

  const addTodo = (title) => {
    setTodos([...todos, { id: crypto.randomUUID(), title, done: false }]);
  };

  const toggleTodo = (id) => {
    setTodos(todos.map((todo) =>
      todo.id === id ? { ...todo, done: !todo.done } : todo
    ));
  };

  return html`
    <${TodoForm} onSubmit=${addTodo} />
    <${TodoList} todos=${todos} onToggle=${toggleTodo} />
  `;
}

defineWompo(TodoApp);

Form controllato

function TodoForm({ onSubmit }) {
  const [title, setTitle] = useState('');

  const submit = (event) => {
    event.preventDefault();
    if (!title.trim()) return;
    onSubmit(title.trim());
    setTitle('');
  };

  return html`
    <form @submit=${submit}>
      <input value=${title} @input=${(event) => setTitle(event.target.value)} />
      <button>Add</button>
    </form>
  `;
}

Lista

function TodoList({ todos, onToggle }) {
  const items = todos.map((todo) => html`
    <li>
      <label>
        <input
          type="checkbox"
          checked=${todo.done}
          @change=${() => onToggle(todo.id)}
        />
        ${todo.title}
      </label>
    </li>
  `);

  return html`
    <ul>
      ${items}
    </ul>
  `;
}

Pattern da ricordare

  • Tieni lo stato condiviso nel padre più vicino.
  • Passa callback ai figli quando devono notificare un cambiamento.
  • Per liste dinamiche, costruisci l'HTML con map.
  • Mantieni stabile la forma del template principale.