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

    0.0.2 • Public • Published
    mehlm

    mehlm

    2kb JS view framework and state management

    • Uses Picodom and Mehdux under the hood

    Usage

    /** @jsx h */
    import { h } from 'picodom';
    import { render } from 'mehlm';
     
    function view(state, actions, storeInstance) {
      return <h1>{state.value}</h1>;
    }
     
    const App = {
      state: {
        value: 0
      },
      actions: {
        inc: state => value => ({
          ...state,
          value: state.value + value,
        })
      },
      view,
      rootElm: document.querySelector('.app')
    };
     
    render(App);

    The app object can have the following properties:

    • store: An optional instance of a mehdux store. If present state and actions properties gets bypassed
    • state: The initial state object (default is an empty object)
    • actions: An object with the stores actions (default is an empty object)
    • view: The view-function that gets passed state, actions and the store instance, returning the view (required)
    • rootElm: The element in which mehlm gets rendered (required)
    • mapStateToProps: A function that maps the state tree to props – you might not care about the entire state tree
    • mapActionsToProps: A function that maps actions to props – you might not care about all the actions
    • preventUpdate: To make nested connected components work, the store auto-emits updates to the state – this does not force a rerender, don't worry (default is false)

    Nested stateful connected components

    Mehlm also support components being connect to the main store, with other mapStateToProps and mapActionsToProps functions.

    /** @jsx h */
    import { h } from 'picodom';
    import { render, connect } from 'mehlm';
     
     
    const AwesomeButton = ({ state, actions }) => {
      return <button onclick={actions.inc}>{state.value}</button>
    }
     
    const ConnectedButton = connect()(AwesomeButton);
     
    // in `viewFn``
    function view(state, actions, storeInstance) {
      return (
        <div>
          <ConnectedButton store={storeInstance}>
        </div>
      );
    }
     
    // ... render the app

    Keywords

    none

    Install

    npm i mehlm

    DownloadsWeekly Downloads

    0

    Version

    0.0.2

    License

    MIT

    Unpacked Size

    15.9 kB

    Total Files

    11

    Last publish

    Collaborators

    • rognstadragnar