hyperapp 1.2.10 with htm

hyperapp with htm

by Warwick Grigg

HTML

<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/htm"></script>
<div id="app">

</div>

Babel + JSX

const { h, app } = hyperapp
const html = htm.bind(h);
/** @jsx h */
const hello = () => html`<h1 id=hello>Hello world!</h1>`;

const state = { o1: {}, o2: {} };

const actions = { 
	o1: v => (s, a) => ({
  	o1: {
    	v,
  	},
	})
}

const view = (state, actions) => {
  console.log("render");
  return h("div", {}, [
  	hello(),
    h("button", {onclick: e => actions.o1(state.o1.v + 1  || 1)}, "o1"),
    h("pre", {}, JSON.stringify(state, null, 2)),
  ]);
}

const main = app(state, actions, view, document.getElementById("app"));