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

    Keywords

    none

    Install

    npm i fit-html

    DownloadsWeekly Downloads

    16

    Version

    0.7.0

    License

    MIT

    Unpacked Size

    128 kB

    Total Files

    32

    Last publish

    Collaborators

    • mraerino
    • neolegends