How to use the hyperapp.app function in hyperapp

const actions = {
  down: () => state => ({ count: state.count - 1 }),
  up: () => state => ({ count: state.count + 1 })
};

const view = (state, actions) =>
  // logs the state before each render
  console.log(state) && (
    <main>
      <h1>{state.count}</h1>
      <button>-</button>
      <button>+</button>
    </main>
  );

const main = app(state, actions, view, document.body);

import { h, app } from 'hyperapp'; // eslint-disable-line
import home from './pages/home';
import { INITIAL_STATE, actions } from './actions';
import './index.css';

app(INITIAL_STATE, actions, home, document.body);

const initState = set(userLens, sessionRepository.load(), DEFAULT_STATE);

  const actions = {
    location: locationModule.actions,
    ...editorActions,
    ...articleActions,
    ...settingsActions,
    ...authActions,
    ...articlesActions,
    ...profileActions,
    ...sharedActions,
    ...routerActions
  };

  // const main = withLogger(app)(initState, actions, view, document.body)
  const main = app(initState, actions, view, document.body);

  const unsubscribe = locationModule.subscribe(main.location);
  addEventListener("popstate", () => main.setRoute(location.pathname));
  main.loadPage(location.pathname);
  sessionRepository.onChange(main.setUser);

  return { main, unsubscribe };
}

import { app } from 'hyperapp'
import { state, actions, view } from './app'

window.app = app(state, actions, view, document.getElementById('app'))

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('service-worker.js');
}

// Enable hot module replacement
// https://webpack.js.org/concepts/hot-module-replacement/
if (module.hot) {
  let prevState = state
  module.hot.accept('./app', () => {
    const prevApp = window.app
    const currState = prevApp.getState()
    prevApp.destroy()
    const prevContainer = document.getElementById('app')
    const nextContainer = prevContainer.cloneNode(false)
    prevContainer.parentNode.appendChild(nextContainer)

import { app } from 'hyperapp'
import actions from 'actions'
import state from 'state'
import view from 'view'

import 'style/style.css'

app({ state, view, actions }).init()

restart: () => (state, actions) => {
    const commands = state.commands
    actions.updateCommands([])
    setTimeout(() => actions.updateCommands(commands))
  },
  export: () => (state, actions) => {
    actions.updateIsExporting(true)
    return exportProject(state)
      .catch(alert)
      .then(() => actions.updateIsExporting(false))
  }
}

const view = (state, actions) => h(appView, Object.assign(state, actions))

export default app(state, actions, view, document.body)

<h1>hyperapp counter</h1>
    <output>{state.count}</output>
    {Button({ label: '-', action: actions.down, disabled: state.count &lt;= 0 })}
    {SimpleButton('+', actions.up)}
    {Article({
      text: state.action,
      'data-atributes': 'work',
      style: { color: 'inherit' },
    })}
    <button>save</button>
    <button>clear</button>
    <footer>{state.saved !== null &amp;&amp; <p>saved: {state.saved}</p>} </footer>
  
);

const counter = app(state, actions, View, document.body);
window.counter = counter;

<table class="table table-hover table-striped test-data">
                <tbody>
                    </tbody>
            </table>
            <span aria-hidden="true" class="preloadicon glyphicon glyphicon-remove">
        
    )
}

app(state, actions, view, document.getElementById("main"))
</span>

'gray-light':         '#aab0b6',
        'gray-lighter':       '#dbdde0',
        'gray-lightest':      '#f3f4f5',
        'gray-dark':          '#343a40',
        'gray-dark-darkest':  '#0a0c0d',
        'gray-dark-darker':   '#15171a',
        'gray-dark-dark':     '#2a2e33',
        'gray-dark-light':    '#717579',
        'gray-dark-lighter':  '#c2c4c6',
        'gray-dark-lightest': '#ebebec'
    }
};

import tabler from 'tabler-core';

const main = app(
    state,
    actions,
    router,
    document.getElementById('app')
);

location.subscribe(main.location);

main.bootstrap();
setInterval(main.bootstrap, 30000);

reset: () => ({ count: 0 }),
  sum: data => ({ count }) => ({ count: count + data }),
}

const view = (state, actions) => (
  <main>
    <h1>{state.count}</h1>
    <div>
      <button> actions.sum(-1)}&gt;Sub</button>
      <button> actions.reset()}&gt;Reset</button>
      <button> actions.sum(1)}&gt;Add</button>
    </div>
  </main>
)

app(state, actions, view, document.body)