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 library for building frontend applications.

Declarative: HyperApp's design is based on the Elm Architecture. Create scalable browser-based applications using a functional paradigm. The twist is you don't have to learn a new language.
Stateless components: Build complex user interfaces from micro-components. Stateless components are framework agnostic, reusable and easier to debug.
Batteries-included: Out of the box, HyperApp has Elm-like state management and a virtual DOM engine; it still weighs 1kb and has no dependencies.

Get started with HyperApp.

Installation

npm i -S hyperapp

Usage

In Node.js.

import { h, app } from "hyperapp"

In the browser via the CDN.

const { h, app } = hyperapp

Examples

Hello World

app({
  model: "Hi.",
  view: model => <h1>{model}</h1>
})

View online

Counter

app({
  model: 0,
  actions: {
    add: model => model + 1,
    sub: model => model - 1
  },
  view: (model, actions) =>
    <div>
      <button onclick={actions.add}>+</button>
      <h1>{model}</h1>
      <button onclick={actions.sub} disabled={model <= 0}>-</button>
    </div>
})

View online

Input

app({
  model: "",
  actions: {
    text: (_, value) => value
  },
  view: (model, actions) =>
    <div>
      <h1>Hi{model ? " " + model : ""}.</h1>
      <input oninput={e => actions.text(e.target.value)} />
    </div>
})

View online

Drag & Drop

const model = {
  dragging: false,
  position: {
    x: 0,
    y: 0,
    offsetX: 0,
    offsetY: 0
  }
}

const actions = {
  drop: model => ({ dragging: false }),
  drag: (model, { position }) => ({ dragging: true, position }),
  move: (model, { x, y }) => model.dragging
    ? ({ position: { ...model.position, x, y } })
    : model
}

const subscriptions = [
  (_, actions) => addEventListener("mouseup", actions.drop),
  (_, actions) => addEventListener("mousemove", e =>
    actions.move({ x: e.pageX, y: e.pageY }))
]

const view = (model, actions) =>
  <div
    onmousedown={e => actions.drag({
      position: {
        x: e.pageX, y: e.pageY, offsetX: e.offsetX, offsetY: e.offsetY
      }
    })}
    style={{
      position: "absolute",
      left: model.position.x - model.position.offsetX + "px",
      top: model.position.y - model.position.offsetY + "px",
      backgroundColor: model.dragging ? "gold" : "deepskyblue"
    }}
  >
    Drag Me
  </div>

app({ model, view, actions, subscriptions })

View online

Todo

const FilterInfo = { All: 0, Todo: 1, Done: 2 }

app({
  model: {
    todos: [],
    filter: FilterInfo.All,
    input: "",
    placeholder: "Add new todo!"
  },
  view: (model, actions) =>
    <div>
      <h1>Todo</h1>
      <p>
        Show: {Object.keys(FilterInfo)
          .filter(key => FilterInfo[key] !== model.filter)
          .map(key =>
            <span>
              <a
                href="#"
                onclick={_ => actions.filter({
                  value: FilterInfo[key]
                })}
              >{key}</a>
            </span>
          )}
      </p>

      <p>
        <ul>
          {model.todos
            .filter(t =>
              model.filter === FilterInfo.Done
                ? t.done :
              model.filter === FilterInfo.Todo
                ? !t.done :
              model.filter === FilterInfo.All)
            .map(t =>
              <li style={{
                color: t.done ? "gray" : "black",
                textDecoration: t.done ? "line-through" : "none"
              }}
                onclick={e => actions.toggle({
                  value: t.done,
                  id: t.id
                })}
              >
                {t.value}
              </li>)}
        </ul>
      </p>

      <p>
        <input
          type="text"
          onkeyup={e => e.keyCode === 13 ? actions.add() : ""}
          oninput={e => actions.input({ value: e.target.value })}
          value={model.input}
          placeholder={model.placeholder}
        />{" "}
        <button onclick={actions.add}>add</button>
      </p>
    </div>,
  actions: {
    add: model => ({
      input: "",
      todos: model.todos.concat({
        done: false,
        value: model.input,
        id: model.todos.length + 1
      })
    }),
    toggle: (model, { id, value }) => ({
      todos: model.todos.map(t =>
        id === t.id
          ? Object.assign({}, t, { done: !value })
          : t)
    }),
    input: (model, { value }) => ({ input: value }),
    filter: (model, { value }) => ({ filter: value })
  }
})

View online

See more examples.

Issues

No software is free of bugs. If you're not sure if something is a bug or not, please file an issue anyway. Questions, feedback and feature requests are welcome too.

Documentation

The documentation and API reference is located in the wiki.

License

HyperApp is MIT licensed. See LICENSE.