3KB web components + lit-html + redux library without bloat.
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.
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:
consttodos=(state=[],action)=>{switch(action.type){case'ADD_TODO':
returnstate.concat([action.text]);default:
returnstate;}};conststore=createStore(todos,['Use Redux']);Define actions and view:
functionaddTodo(){return{type: 'ADD_TODO',text: `Hello ${Math.random()}`};}constrender=({ addTodo, todos })=>html`<ul>${todos.map(text=>html`<li>${text}</li>`)}</ul><buttonon-click="${addTodo}"> Add</button>`;constTodosApp=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.
💪-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).
MIT