Next Perpendicular Moonlanding
    Wondering what’s next for npm?Check out our public roadmap! »

    hyperapp-redux-devtools
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.6 • Public • Published

    hyperapp-redux-devtools

    hyperapp HOA (higher order app) to utilize redux-devtools-extension from hyperapp

    import { h, app } from 'hyperapp';
    import devtools from 'hyperapp-redux-devtools';
     
    devtools(app)(
      { count: 0 },
      {
        increment: () => (state) => Object.assign({}, state, { count: state.count + 1 })
      },
      (state, actions) => {
        return (
          <div>
            <button onclick={actions.increment}>Click</button>
            <span>{state.count}</span>
          </div>
        );
      },
      document.body
    );

    Dev vs. Prod

    When deploying a Hyperapp with this HOA, it is advised you don't ship the devtools bundle with it:

    With Webpack Dynamic Import

    import { h, app } from 'hyperapp';
     
    let main;
     
    if (process.env.NODE_ENV !== 'production') {
      import('hyperapp-redux-devtools')
        .then((devtools) => {
          main = devtools(app)(...);
        });
    } else {
      main = app(...);
    }

    With Conditional Require (Rollup/Gulp/etc..)

    import { h, app } from 'hyperapp';
    const devtools = process.env.NODE_ENV !== 'production'
      ? require('hyperapp-redux-devtools')
      : null;
     
    let main;
     
    if (devtools) {
      main = devtools(app)(...);
    } else {
      main = app(...);
    }

    Install

    npm i hyperapp-redux-devtools

    DownloadsWeekly Downloads

    32

    Version

    1.1.6

    License

    MIT

    Unpacked Size

    7.13 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar