Package Exports

hyperapp

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (hyperapp) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Hyperapp

Hyperapp is a JavaScript micro-framework for building web applications.

Getting Started

This is our first example to get started. Right off the bat, I'll show you the hard stuff. If you survive this you basically win.

import { h, app } from "hyperapp"
import { delay } from "@hyperapp/time"

const changeName = (state, name) => ({ ...state, name })

app({
  init: [
    { name: "Hello" },
    delay([changeName, "World"], {
      duration: 1000
    })
  ],
  view: state => <h1>{state.name}</h1>,
  container: document.body
})

What's that delay magic? Glad you asked. Here's a way it can be implemented. Hyperapp ships with effects and subscriptions out of the box, so you don't have to create your own, but like they say: knowledge is power!

// hyperapp/time.js
export const delay = (fx => (action, { duration }) => [
  fx,
  { action, duration }
])((props, dispatch) =>
  setTimeout(() => dispatch(props.action), props.duration)
)

Installation

npm i hyperapp

Then with a module bundler like Rollup or Webpack, use as you would anything else.

import { h, app } from "hyperapp"

If you don't want to set up a build environment, you can download Hyperapp from a CDN like unpkg.com and it will be globally available through the window.hyperapp object. We support all ES5-compliant browsers, including Internet Explorer 10 and above.

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

License

MIT

hyperapp