5KB 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, it still manages to keep the total size of the framework below 5KB1, including dependencies.
You need the following:
import { connect, createProvider, withExtended } from 'fit-html';
import { html } from 'lit-html';
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']);Set up redux provider element (this must be at the root of your element tree):
const provider = createProvider(store);
customElements.define('redux-provider', provider);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 = withExtended(connect(
state => ({ todos: state }),
{ addTodo },
render
));
customElements.define('todo-app', TodosApp);index.html:
<html>
<head>
<title>My cool 💪-html app</title>
</head>
<body>
<redux-provider>
<todo-app></todo-app>
</redux-provider>
</body>
</html>Please see https://github.com/Festify/fit-html-demo for more and larger examples.
MIT
1: Actually 4k right now