hyperapp-html

Html helpers for hyperapp and every h.

Note

This library is builded using meta programing through template engine to allow the use of tree shaking and a better optimisation.

Installation

Using npm:

npm i hyperapp-html

Then setup a build pipeline and import it.

import { div, h1 } from "hyperapp-html"

Using a CDN:

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

Then access the all hmtl tags or the factory from hyperappHtml in the global scope as div, h1, etc...

Usage

const vnode = h1({ id: "title" }, "Hi.")

Example

Try it online

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

API

Tags

tagname

Type: (props: object, children: vnode[]) => vnode

Call the proper h to return a vnode according to the tag name.

const vnode = tagname({ id: "title" }, "Hi.")

Factory

html

Type: (h: function) => tagsObject

Return a calalog of html helpers that call the given h then return a vnode.

const { tagname } = html(h)

const vnode = tagname({ id: "title" }, "Hi.")

License

hyperapp-html is MIT licensed. See LICENSE.