Festify / Fit Html
💪 Combining web components + lit-html + redux (3KB)
Stars: ✭ 121
Programming Languages
typescript
32286 projects
Labels
Projects that are alternatives of or similar to Fit Html
Minna Ui
😸 A fast, friendly, and fun web UI kit for everyone.
Stars: ✭ 86 (-28.93%)
Mutual labels: web-components
Gulp Vulcanize
Concatenate a set of Web Components into one file
Stars: ✭ 101 (-16.53%)
Mutual labels: web-components
Smart Webcomponents
Web Components & Custom Elements for Professional Web Applications
Stars: ✭ 110 (-9.09%)
Mutual labels: web-components
Scale
The Scale library offers a set of customizable web components written with Stencil.js & TypeScript. The default theme of the library can be easily replaced so that a corresponding corporate identity of a dedicated brand can be represented.
Stars: ✭ 87 (-28.1%)
Mutual labels: web-components
Feature Hub
Create scalable web applications using micro frontends.
Stars: ✭ 98 (-19.01%)
Mutual labels: web-components
Use Custom Element
Custom hook to bridge Custom Elements (Web Components) to React.
Stars: ✭ 77 (-36.36%)
Mutual labels: web-components
Polydev
Automatic web components profiling in chrome devtools
Stars: ✭ 118 (-2.48%)
Mutual labels: web-components
Polymer3 Webpack Starter
Polymer 3 starter built with Vaadin components and Vaadin.Router library, using webpack and modern tools
Stars: ✭ 99 (-18.18%)
Mutual labels: web-components
Nutmeg
Build, test, and publish vanilla Web Components with a little spice
Stars: ✭ 111 (-8.26%)
Mutual labels: web-components
Funcy.js
funcy.js - a functional web components wrapper
Stars: ✭ 87 (-28.1%)
Mutual labels: web-components
Dataformsjs
🌟 DataFormsJS 🌟 A minimal JavaScript Framework and standalone React and Web Components for rapid development of high quality websites and single page applications.
Stars: ✭ 95 (-21.49%)
Mutual labels: web-components
Open Wc
Open Web Components: guides, tools and libraries for developing web components.
Stars: ✭ 1,670 (+1280.17%)
Mutual labels: web-components
Auto Check Element
An input element that validates its value with a server endpoint.
Stars: ✭ 85 (-29.75%)
Mutual labels: web-components
Hot Table
Handsontable - Best Data Grid Web Component with Spreadsheet Look and Feel.
Stars: ✭ 114 (-5.79%)
Mutual labels: web-components
Polymer Bundler
Moved to Polymer/tools monorepo
Stars: ✭ 1,206 (+896.69%)
Mutual labels: web-components
Podcast Player
An audio web component for podcasts
Stars: ✭ 106 (-12.4%)
Mutual labels: web-components
Vime
Customizable, extensible, accessible and framework agnostic media player. Modern alternative to Video.js and Plyr. Supports HTML5, HLS, Dash, YouTube, Vimeo, Dailymotion...
Stars: ✭ 1,928 (+1493.39%)
Mutual labels: web-components
Image Crop Element
A custom element for cropping a square image. Returns x, y, width, and height.
Stars: ✭ 115 (-4.96%)
Mutual labels: web-components
Vanilla Hamburger
Animated hamburger menu icons for modern web apps (1.8 KB) 🍔
Stars: ✭ 110 (-9.09%)
Mutual labels: web-components
💪 fit-html
3KB web components + lit-html + redux library without bloat.
Overview
fit-html is a combination of lit-html, web components and redux bringing efficient rendering and a functional application architecture together. Yet, the total size of the framework is below 3KB, including dependencies.
Small Example
You need the following:
import { connect, withStore } from 'fit-html';
import { html } from 'lit-html/lib/lit-extended';
import { createStore } from 'redux';
Set up redux store:
const todos = (state = [], action) => {
switch (action.type) {
case 'ADD_TODO':
return state.concat([action.text]);
default:
return state;
}
};
const store = createStore(todos, ['Use Redux']);
Define actions and view:
function addTodo() {
return {
type: 'ADD_TODO',
text: `Hello ${Math.random()}`
};
}
const render = ({ addTodo, todos }) => html`
<ul>
${todos.map(text => html`<li>${text}</li>`)}
</ul>
<button on-click="${addTodo}">
Add
</button>
`;
const TodosApp = connect(
state => ({ todos: state }),
{ addTodo }
)(render);
// Define the custom element.
//
// The withStore mixin is only required for the root element of your
// app. All other 💪-elements will get the redux store from that element.
customElements.define('todo-app', withStore(store)(TodosApp));
index.html:
<html>
<head>
<title>My cool 💪-html app</title>
</head>
<body>
<todo-app></todo-app>
</body>
</html>
Please see https://github.com/Festify/fit-html-demo for more and larger examples.
Compatibility
💪-html is written for use with evergreen browsers. Not so much for Internet Explorer (though we strive to become compatible with IE11 once lit-html itself is).
License
MIT
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].