❤
npm
Sign UpSign In

fit-html
TypeScript icon, indicating that this package has built-in type declarations

0.7.0 • Public • Published

💪 fit-html

npm Travis Bundle Size Greenkeeper badge

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

Readme

Keywords

none

Package Sidebar

Install

npm i fit-html

Repository

github.com/Festify/fit-html

Homepage

github.com/Festify/fit-html#readme

Weekly Downloads

2

Version

0.7.0

License

MIT

Unpacked Size

128 kB

Total Files

32

Last publish

Collaborators

  • mraerino
  • neolegends
Try on RunKit
Report malware