wompo
TypeScript icon, indicating that this package has built-in type declarations

1.0.8 • Public • Published
Wompo

Fast, React-like, Web-Components.

Published on npm

Documentation

Check the full documentation for Wompo at wompo.dev.

ko-fi

Quick Example: Counter

Creating a custom Counter component is very easy with Wompo, and works exactly like React!

import { defineWompo, html } from 'wompo';

export default function CounterComponent({ styles: s }) {
  const [count, setCount] = useState(0);
  const inc = () => setCount(count + 1);
  return html`<button class=${s.button} @click=${inc}>
    Current value: ${count}
  </button>`;
}

CounterComponent.css = `
  .button {
    border-radius: 10px;
    background-color: #573ef6;
    color: #fff;
    padding: 10px 20px;
    border: none;
  }
`

defineWompo(CounterComponent);

Then, you can simply render it in you HTML:

<counter-component></counter-component>
<!-- Will render: <button>Current value: 0!</button> -->

JSX

Wompo supports JSX. If you use it with Typescript, write this in your tsconfig.json file:

"jsx": "react-jsx",
"jsxImportSource": "wompo",

/wompo/

    Package Sidebar

    Install

    npm i wompo

    Homepage

    wompo.dev

    Weekly Downloads

    1

    Version

    1.0.8

    License

    MIT

    Unpacked Size

    279 kB

    Total Files

    20

    Last publish

    Collaborators

    • saderyal