hyperapp experiments

hyperapp experiment

HTML

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

</div>

Babel + JSX

const { h, app } = hyperapp
/** @jsx h */

const dt = () => { return new Date(Date.now()).toISOString() };

const state = {
}

const actions = {
	setWidth: () => (state, actions) => {
    const iw = window.innerWidth;
 		const deviceWidths = [200, 400, 640, 860, 1024, 999999999];
  	const wb = deviceWidths.find((e) => e>iw);
    const rv = wb === state.widthBreak ? null : {
  		widthBreak: wb,
 		};
    console.log(state.widthBreak, rv);
    return rv;
  },
  setS1: dt => (_, actions) => { return {s1: dt} }, // changes state
  setS2: dt => (_, actions) => { return {s2: dt} }, // changes state
  setS1S2: dt => (_, actions) => {
    actions.setS1(dt); // changes state
    actions.setS2(dt); // changes state
  },
  setS1rS2:dt => (_, actions)  => {
    actions.setS1(dt); // no effect (!)
    return {s2: dt};   // changes state for s2
  },
  setS1cS2:dt => (_, actions)  => {
    s1obj = actions.setS1(dt); // assume no effect (?), but returns obj
    return Object.assign({}, s1obj, {s2: dt}); // changes state
  },
  setS1S2d: dt => (_, actions) => {
    setTimeout(() => actions.setS1(dt, 0)); //changes state after 0ms
    setTimeout(() => actions.setS2(dt, 0)); //changes state after 0ms
  },
  substate: {
   setS1: dt => { return {s1: dt} }, // changes substate
  }
}

const view = (state, actions) => {
	console.log ("render");
  return (
<div>
  <p oncreate={	() => {
  	actions.setWidth();
    window.onresize=actions.setWidth;
  }}>
    innerWidth {state.widthBreak}
  </p>
  <button onclick={e => actions.setS1(dt())}>S1</button>
  <button onclick={e => actions.setS2(dt())}>S2</button>
  <button onclick={e => actions.setS1S2(dt())}>S1S2</button>
  <button onclick={e => actions.setS1rS2(dt())}>S1rS2</button>
  <button onclick={e => actions.setS1cS2(dt())}>S1cS2</button>
  <button onclick={e => {
                    actions.setS1(dt()); // changes state
                    actions.setS2(dt()); // changes substate
                   }}>xS1S2</button>
  <button onclick={e...