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
1kband has no dependencies.
npm i -S hyperapp
In Node.js.
import { h, app } from "hyperapp"In the browser via the CDN.
const { h, app } = hyperappCounter
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>
})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>
})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 })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 })
}
})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.
The documentation and API reference is located in the wiki.
HyperApp is MIT licensed. See LICENSE.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent