ckyambitny / hyperapp

1kb JavaScript library for building frontend applications.

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,
    reducers: {
        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: "",
    reducers: {
        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 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>

const reducers = {
    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 }))
]

app({ model, view, reducers, 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 data-no-routing 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>,
    reducers: {
        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.