hyperapp-module-view

Use you module view as component today !

Installation

Using npm:

npm i hyperapp-module-view

Then setup a build pipeline and import it.

import { app } from "hyperapp-module-view"

Using a CDN:

<script src="https://unpkg.com/hyperapp-module-view"></script>

Then use moduleView.app.

Example

Try it online

import { app } from "hyperapp-module-view"

const counter = {
  state: {
    count: 0
  },
  actions: {
    down: state => ({ count: state.count - 1 }),
    up: state => ({ count: state.count + 1 })
  },
  view: (state, actions) => (
    div([
      h2(state.count),
      button({
        onclick: actions.down,
        disabled: state.count <= 0
      }, "ー"),
      button({
        onclick: actions.up
      }, "＋")
    ]),
  )
}

app({
  modules: { counter },
  view: (state, actions, { Counter }) => (
    main([
      h1("The counter :"),
      counter()
    ])
  )
})

Note

The counter module is given as Counter to be JSX compliant as JSX require component to be capitalized.

API

app

The pre-ehanced hyperapp app function

import { app } from "hyperapp-module-view"

app(Props)

moduleView

The HOA to enhance hyperapp app function

import { moduleView } from "hyperapp-module-view"

moduleView(app)(Props)

License

hyperapp-module-view is MIT licensed. See LICENSE.

Swizz / hyperapp-module-view