XiaoShenOL / hybrids

The simplest way to create web components from plain objects and pure functions! 💯

🏅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 class and this syntax
• 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

<script type="module">
  import { html, define } from 'https://unpkg.com/hybrids@^5';
  
  function increaseCount(host) {
    host.count += 1;
  }

  const SimpleCounter = {
    count: 0,
    render: ({ count }) => html`
      <button onclick="${increaseCount}">
        Count: ${count}
      </button>
    `,
  };

  define('simple-counter', SimpleCounter);
</script>

<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.