au-z/hybrids

UI library for creating web components with plain objects and pure functions

A JavaScript framework for creating fully-featured web applications, components libraries, and single web components with unique declarative and functional architecture.

Quick Look

Component Model

The component model is based on plain objects and pure functions*, still using the Web Components API under the hood:

import { html, define } from "hybrids";
  
function increaseCount(host) {
  host.count += 1;
}

export default define({
  tag: "simple-counter",
  count: 0,
  render: ({ count }) => html`
    <button onclick="${increaseCount}">
      Count: ${count}
    </button>
  `,
});

<simple-counter count="42"></simple-counter>

* Pure functions only apply to the component definition. Side effects attached to event listeners might mutate the host element.

You can read more in the Component Model section of the documentation.

Store

The store provides global state management based on declarative model definitions with built-in support for async external storage, relations, offline caching, and many more.

It follows the declarative architecture to simplify the process of defining and using data structures in the component definition:

import { define, store, html } from "hybrids";

const User = {
  id: true,
  firstName: "",
  lastName: "",
  [store.connect] : {
    get: id => fetch(`/users/${id}`).then(res => res.json()),
  },
};

define({
  tag: "my-user-details",
  user: store(User),
  render: ({ user }) => html`
    <div>
      ${store.pending(user) && `Loading...`}
      ${store.error(user) && `Something went wrong...`}

      ${store.ready(user) && html`
        <p>${user.firstName} ${user.lastName}</p>
      `}
    </div>
  `,
});

<my-user-details user="2"></my-user-details>

You can read more in the Store section of the documentation.

Router

The router provides a global navigation system for client-side applications. Rather than just matching URLs with the corresponding components, it depends on a tree-like structure of views, which have their own routing configuration in the component definition.

import { define, html, router } from "hybrids";

import Home from "./views/Home.js";

export define({
  tag: "my-app",
  views: router(Home),
  content: ({ views }) => html`
    <my-app-layout>
      ${views}
    </my-app-layout>
  `,
});

<my-app></my-app>

You can read more in the Router section of the documentation.

Documentation

The project documentation is available at the hybrids.js.org site.

Community

• Follow on Twitter
• Chat on Gitter

License

hybrids is released under the MIT License.