Hyperapp V2 in Under 5 Minutes

Hyperapp V2 in under 5 minutes.
import { h, app } from "hyperapp";
const init = {
counter: 0,
};
const add     = state => ({ ...state, counter: state.counter + 1 });
const subract = state => ({ ...state, counter: state.counter - 1});
const view = state => (<div>   <div>{state.counter}</div>   <button onclick={add}>Add</button>
<button onclick={subract}>Subtract</button>
</div>);
const KeyDownSubscription = (dispatch, { onup, ondown }) => {
let handler = ev => {
if (ev.key === ‘ArrowUp’) dispatch(onup)
if (ev.key === ‘ArrowDown’) dispatch(ondown)
};
window.addEventListener(‘keydown’, handler); // subscriptions return a cleanup method
return () => window.removeEventListener(‘keydown’, handler)
});

Effects

const alertFx = (dispatch, message) => window.alert(message);
const add = state => [
{ ...state, counter: state.counter + 1 },
state.counter + 1 === 13 && [alertFx, 'Thirteen is unlucky!'],
];
// index.jsapp({
init,
view,
subscriptions: state => [
[KeyDownSubscription, { onup: add, ondown: sub }],
],
node: document.querySelector('#container'),
});
// index.html<html>
<body>
<div id="container"></div>
<script src="index.js"></script>
</body>
</html>
Hyperapp V2 in under 5 minutes complete example.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store