# Wompo

Wompo is a lightweight JavaScript library for building reactive, reusable, server-renderable Web Components with a React-like API. It is designed for framework-agnostic UI primitives that can be shared across vanilla apps, SSR pages, and component libraries.

## Canonical URLs
- [Website](https://wompo.dev/)
- [Documentation](https://wompo.dev/docs/introduction)
- [Italian documentation](https://wompo.dev/it/docs/introduction)
- [Quick start](https://wompo.dev/docs/guides/quick-start)
- [Installation](https://wompo.dev/docs/installation)
- [Server-side rendering](https://wompo.dev/docs/ssr)
- [TypeScript](https://wompo.dev/docs/typescript)
- [GitHub](https://github.com/wompojs/wompo)

## Install

```sh
npm i wompo
```

## Core Example

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

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

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

defineWompo(CounterButton, { name: 'counter-button' });
```

## Important Concepts

- `defineWompo` registers a function component as a native custom element.
- `html` returns safe template output for component rendering.
- Hooks include `useState`, `useEffect`, `useMemo`, `useCallback`, `useRef`, `useReducer`, `useContext`, `useAsync`, `useId`, `useLayoutEffect`, `useSelf`, `useExposed`, and `useHook`.
- Components can be rendered on the server and hydrated on the client.
- Wompo works with standard HTML attributes, events, slots, custom elements, and CSS.

## Documentation Map
- [Guides](https://wompo.dev/docs/guides)
- [Hooks](https://wompo.dev/docs/hooks)
- [Components](https://wompo.dev/docs/components)
- [APIs](https://wompo.dev/docs/apis)
- [Styling](https://wompo.dev/docs/guides/styling)
- [Custom hooks](https://wompo.dev/docs/guides/custom-hooks)