Quick Start

Impara le basi di Wompo creando componenti reali con props, eventi, stato e rendering dinamico.

Primo componente

Un componente Wompo è una funzione che ritorna html. Dopo averlo definito, lo registri con defineWompo.

import { defineWompo, html } from 'wompo';

function GreetingCard() {
  return html`<p>Hello, World!</p>`;
}

defineWompo(GreetingCard);

Il nome della funzione diventa un tag HTML in kebab-case.

<greeting-card></greeting-card>

Puoi anche scegliere un nome esplicito.

defineWompo(GreetingCard, { name: 'app-greeting' });

Template con `html`

html è una template tag. Ti permette di mescolare markup e valori JavaScript senza costruire stringhe a mano.

function UserCard({ user }) {
  return html`
    <article>
      <strong>${user.name}</strong>
      <span>${user.role}</span>
    </article>
  `;
}

Se passi un componente Wompo dentro un altro template, usa la sintassi componente.

function App() {
  const user = { name: 'Ada', role: 'Admin' };

  return html`
    <main>
      <${UserCard} user=${user} />
    </main>
  `;
}

Props

Le props arrivano come primo parametro. Se usi il componente da HTML, gli attributi sono stringhe; se lo usi dentro un template Wompo puoi passare anche oggetti, array e funzioni.

function ProductPrice({ amount, currency = 'EUR' }) {
  return html`
    <strong>
      ${new Intl.NumberFormat('it-IT', { style: 'currency', currency }).format(amount)}
    </strong>
  `;
}
function ProductRow() {
  return html`<${ProductPrice} amount=${24.9} currency="EUR" />`;
}

Eventi

Gli eventi si collegano con il prefisso @. Il valore deve essere una funzione.

function SaveButton({ onSave }) {
  return html`
    <button type="button" @click=${onSave}>
      Salva
    </button>
  `;
}

Lo stesso sistema funziona su elementi nativi e custom elements, perché Wompo lavora con il DOM reale.

Stato

useState rende un componente reattivo. Quando chiami setCount, Wompo renderizza di nuovo il componente e aggiorna la UI.

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

function Counter() {
  const [count, setCount] = useState(0);

  return html`
    <button @click=${() => setCount(count + 1)}>
      Count: ${count}
    </button>
  `;
}

defineWompo(Counter);

Liste

Per renderizzare liste, mappa i dati in template html. Mantieni sempre stabile la struttura del markup.

function TodoList({ todos }) {
  return html`
    <ul>
      ${todos.map((todo) => html`
        <li>
          <input type="checkbox" checked=${todo.done} />
          <span>${todo.title}</span>
        </li>
      `)}
    </ul>
  `;
}

Condizioni

Puoi usare normali condizioni JavaScript, ma evita di cambiare completamente la forma del componente a ogni render.

function SessionStatus({ user }) {
  const label = user ? `Ciao ${user.name}` : 'Accedi';

  return html`
    <p>${label}</p>
  `;
}

Evita invece di alternare radici molto diverse quando puoi mantenere una struttura comune.

// Meno prevedibile.
function Status({ logged }) {
  if (logged) return html`<p>Logged in</p>`;
  return html`<section>Guest</section>`;
}

// Più stabile.
function Status({ logged }) {
  return html`<p>${logged ? 'Logged in' : 'Guest'}</p>`;
}

Prossimo passo

Quando hai capito componenti, props, eventi e stato, continua con:

  • Installazione per scegliere setup e tool;
  • Styling per CSS modules e Shadow DOM;
  • Esempio complesso per una piccola app completa.

Gli hook devono essere chiamati sempre nello stesso ordine. Non metterli dentro if, loop o callback.