Wompo

The fast, lightweight, React-like, web-components library.

Why Wompo?

Wompo is built with native Javascript functionalities, meaning that it can run everywhere, wether you use a compiler or not. This also means that you can use Wompo and other libraries like React, Angular, Vue, etc. at the same time, without having to worry about conflicts.

Wompo is super fast, because there is no virtual DOM: only the dynamic parts of your components are updated, and cache is used heavily to ensure better performances when rendering the same component multiple times.

No need to learn advanced Javascript features, classes, the this keyword, or TypeScript: to use Wompo you only need to know basic Javascript, basic HTML, and basic CSS. Wompo is suitable for both beginners and experts.

Wompo is super light: less than 6kb minfied and gzipped. It will probably be the lighter part of your application, while still providing a lot of functionalities.
This will help keeping your loading time short if you care about your site's performance.

Shadow DOM?

Yes, but NO

Unlike other Web-components libraries, Shadow DOM is not enabled by default when building your components. Why?
Shadow DOM is great, but it can make your life harder: no global CSSs, no possibility to select elements through document.querySelector (which a lot of third party libraries rely on), and, first of all, the need to learn what Shadow DOM is and what it does.
Not really beginner friendly, huh?

Instead...

Built-in CSS Modules

To help your components avoid style confilcts with other components that use the same class names, Wompo comes out with built-in CSS Modules. Your class names will be automatically replaced with a more unique name, based on the name of the component (which is unique). The object with all the replaced class names will then be put on the component's props.

Look how beautiful I am! And my beauty will not affect other components' own beauty. Every component is unique on its own, even without having to live in the obscure world of Shadow DOM.
I also have the "container" class from another component, but I am not a "StyledComponent" and I'm not affected by its styles! I am completely independent and safe! Exactly how components are supposed to be, without writing additional code ;)

Want more?

JSX
Support

Wompo already comes out with JSX support! HTML check, props validation, and more. Of course, you will need a compiler for that.

Typescript
Compatible

file_type_typescript
Wompo is built with TypeScript. This means that type checking is available by default.

Automatic
Naming

Your TodoList component will simply be a "todo-list" HTML element, right?
We know it, so we do it for you!

Help Wompo to grow

Every kind of support on this project, even just a feedback on it, is highly appreciated!
You can further support the Wompo project by becoming a contributor or a sponsor, and be featured on this Website. You can also email lanninolore@gmail.com if you are actually using Wompo on your project and want to appear on this website, by describing your use-case and how Wompo improved your code.
The purpose of Wompo is to create easy-shareable components that can be used on every Web Environment, in cooperation with any library or framework, without needing to worry about compatibility issues or setting up compilers.

Become a contributor on GitHub

Become a Sponsor on KoFi