JarCasting
🏅 One of the four nominated projects to the "Breakthrough of the year" category of Open Source Award in 2019
hybrids is a UI library for creating web components with unique declarative and functional approach based on plain objects and pure functions.
- The simplest definition — just plain objects and pure functions - no
classandthissyntax - No global lifecycle — independent properties with own simplified lifecycle methods
- Composition over inheritance — easy re-use, merge or split property descriptors
- Super fast recalculation — smart cache and change detection mechanisms
- Global state management - model definitions with support for external storages
- Templates without external tooling — template engine based on tagged template literals
- Developer tools included — HMR support out of the box for a fast and pleasant development
Quick Look
Add the hybrids npm package to your application, import required features, and define your custom element:
import { html, define } from 'hybrids';
export function increaseCount(host) {
host.count += 1;
}
export const SimpleCounter = {
count: 0,
render: ({ count }) => html`
<button onclick="${increaseCount}">
Count: ${count}
</button>
`,
};
define('simple-counter', SimpleCounter);
Use the custom element in HTML document:
<simple-counter count="10"></simple-counter>
Click and play with
<simple-counter>example:
Documentation
The project documentation is available at the hybrids.js.org site.
License
hybrids is released under the MIT License.
