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

1.3.3 • 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",

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
1.3.31latest

Version History

VersionDownloads (Last 7 Days)Published
1.3.31
1.3.20
1.3.10
1.3.01
1.2.30
1.2.20
1.2.10
1.2.00
1.1.31
1.1.20
1.1.10
1.1.01
1.0.190
1.0.181
1.0.171
1.0.161
1.0.151
1.0.141
1.0.131
1.0.120
1.0.111
1.0.101
1.0.91
1.0.81
1.0.70
1.0.60
1.0.50
1.0.40
1.0.30
1.0.11
1.0.00

Package Sidebar

Install

npm i wompo

Homepage

wompo.dev

Weekly Downloads

15

Version

1.3.3

License

MIT

Unpacked Size

320 kB

Total Files

29

Last publish

Collaborators

  • saderyal