All Projects → hybridsjs → Hybrids

hybridsjs / Hybrids

Licence: mit
Extraordinary JavaScript framework with unique declarative and functional architecture

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Hybrids

Custom Element
A base class for Web Components (Custom Elements) which provides simple data binding.
Stars: ✭ 60 (-97.63%)
Mutual labels:  webcomponents, custom-elements, shadow-dom
Crab
JavaScript library for building user interfaces with Custom Elements, Shadow DOM and React like API
Stars: ✭ 22 (-99.13%)
Mutual labels:  webcomponents, custom-elements, shadow-dom
Dna
Progressive Web Components.
Stars: ✭ 22 (-99.13%)
Mutual labels:  webcomponents, custom-elements, shadow-dom
material-webcomponents
Material Design implemented in Web Components (Custom Elements v1)
Stars: ✭ 110 (-95.65%)
Mutual labels:  webcomponents, custom-elements, shadow-dom
crab
JavaScript library for building user interfaces with Custom Elements, Shadow DOM and React like API
Stars: ✭ 22 (-99.13%)
Mutual labels:  webcomponents, custom-elements, shadow-dom
Nutmeg
Build, test, and publish vanilla Web Components with a little spice
Stars: ✭ 111 (-95.61%)
Mutual labels:  webcomponents, custom-elements, shadow-dom
Switzerland
🇨🇭Switzerland takes a functional approach to Web Components by applying middleware to your components. Supports Redux, attribute mutations, CSS variables, React-esque setState/state, etc… out-of-the-box, along with Shadow DOM for style encapsulation and Custom Elements for interoperability.
Stars: ✭ 261 (-89.68%)
Mutual labels:  webcomponents, custom-elements, shadow-dom
Omi
Front End Cross-Frameworks Framework - 前端跨框架跨平台框架
Stars: ✭ 12,153 (+380.55%)
Mutual labels:  webcomponents, custom-elements, shadow-dom
Custom Elements Ts
Create native custom elements using Typescript
Stars: ✭ 52 (-97.94%)
Mutual labels:  custom-elements, shadow-dom
Web Components Angular React
Multiple apps as components POC
Stars: ✭ 64 (-97.47%)
Mutual labels:  webcomponents, custom-elements
Redux Store Element
A custom element allowing a more declarative use of Redux.
Stars: ✭ 83 (-96.72%)
Mutual labels:  webcomponents, custom-elements
Osagai
🀄️A tiny library for creating WebComponents in a Functional way
Stars: ✭ 42 (-98.34%)
Mutual labels:  functional-programming, webcomponents
Reactshadow
🔰 Utilise Shadow DOM in React with all the benefits of style encapsulation.
Stars: ✭ 948 (-62.51%)
Mutual labels:  webcomponents, shadow-dom
Calcite Components
Web Components for the Calcite Design System. Built with Stencil JS. Currently in Beta!
Stars: ✭ 96 (-96.2%)
Mutual labels:  webcomponents, custom-elements
Aybolit
Lightweight web components library built with LitElement.
Stars: ✭ 90 (-96.44%)
Mutual labels:  webcomponents, custom-elements
Vanilla Hamburger
Animated hamburger menu icons for modern web apps (1.8 KB) 🍔
Stars: ✭ 110 (-95.65%)
Mutual labels:  webcomponents, custom-elements
Stencil
A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.
Stars: ✭ 9,880 (+290.67%)
Mutual labels:  webcomponents, custom-elements
Query Selector Shadow Dom
querySelector that can pierce Shadow DOM roots without knowing the path through nested shadow roots. Useful for automated testing of Web Components. Production use is not advised, this is for test environments/tools such as Web Driver, Playwright, Puppeteer
Stars: ✭ 115 (-95.45%)
Mutual labels:  webcomponents, shadow-dom
Vaadin Combo Box
The Web Component for displaying a list of items with filtering. Part of the Vaadin components.
Stars: ✭ 113 (-95.53%)
Mutual labels:  webcomponents, custom-elements
Api Viewer Element
API documentation and live playground for Web Components
Stars: ✭ 121 (-95.22%)
Mutual labels:  webcomponents, custom-elements

npm version build status coverage status

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>

Edit <simple-counter> web component built with hybrids library

* 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

License

hybrids is released under the MIT License.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].