Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@diesdasdigital/hyperapp-html

Html helper functions for Hyperapp.

hyperapp, hyperscript, html

readme

@diesdasdigital/hyperapp-html

npm

NOTE: This is a fork of Swizz/hyperapp-html to provide better types for Typescript:

  • allow lazy components
  • allow passing a single VNode as children

Html helper functions for Hyperapp. Use @diesdasdigital/hyperapp-html as an alternative to JSX or the <samp>hyperapp.h</samp> function.

Installation

yarn add @diesdasdigital/hyperapp-html

Usage

Here is a counter that can be incremented or decremented. Go ahead and try it online.

import { h, app } from "hyperapp"
import { div, h1, button } from "@diesdasdigital/hyperapp-html"

const state = {
  count: 0
}

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

const view = (state, actions) =>
  div([
    h1(state.count),
    button({ onclick: actions.down }, "-"),
    button({ onclick: actions.up }, "+")
  ])

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

See /vars.json for the list of available Html tags you can use in your program.

License

@diesdasdigital/hyperapp-html is MIT licensed. See LICENSE.