Funziona in ogni stack
Un componente Wompo resta un vero custom element, quindi puoi inserirlo in pagine esistenti e mescolarlo con altri framework.
Wompo
Crea custom element reattivi con un'API simile a React, primitive native del browser, SSR, hydration a isole e stili che non intralciano il lavoro.
$
npm i wompoCosa fa
Wompo trasforma piccole funzioni in primitive UI portabili.
Definisci un componente una volta sola, renderizzalo come vero custom element e riusalo in HTML statico, app Wompo, pagine SSR o accanto a React, Vue, Angular e JavaScript vanilla.
Workflow developer
Scrivi componenti come funzioni. Pubblicali come elementi HTML.
State, eventi, children, refs, context, CSS modules, componenti lazy, portal e SSR usano una API compatta pensata per lavorare velocemente sul front-end.
import { defineWompo, html, useState } from 'wompo';
function LikeButton({ initial = 0 }) {
const [likes, setLikes] = useState(initial);
return html`
<button @click=${() => setLikes(likes + 1)}>
Likes: ${likes}
</button>
`;
}
defineWompo(LikeButton);Elemento renderizzato
<like-button initial="12"></like-button>
<!-- Works as a native custom element. -->Perché usarlo
Web Components moderni con meno parti da gestire.
Wompo conserva il modello nativo degli elementi, ma aggiunge l'ergonomia che gli sviluppatori si aspettano da una libreria a componenti.
Hooks e DOM dinamico
Usa hook familiari come useState, useEffect, useMemo e context per mantenere lo stato della UI esplicito e locale.
CSS modules integrati
I nomi delle classi possono essere isolati automaticamente, così i componenti restano prevedibili senza obbligare lo Shadow DOM di default.
Rendering server e isole
Renderizza gli stessi componenti sul server e idrata solo le isole che hanno bisogno di comportamento client-side.
Bundler non obbligatorio
Installa da npm, usa una import map, carica da CDN o distribuisci un singolo componente dove serve.
Pronto per TypeScript
Il core è scritto in TypeScript ed espone tipi per componenti, props, elementi e helper di rendering.
Dall'installazione alla produzione
Un workflow piccolo per UI reali.
- 01InstallaAggiungi Wompo con npm o mappalo direttamente nel browser.
- 02ComponiCrea componenti con funzioni, hooks, eventi, children e stili locali.
- 03RilasciaRenderizza come Web Components, idrata quando serve e riusa tra progetti.
Parti da un componente, non da una migrazione di framework.
La documentazione include esempi rapidi, reference API, SSR, hooks e pattern pratici per costruire con Wompo.