JSFiddle - React, Tailwind, and code Playground

by Warwick Grigg

HTML

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

</div>

Babel + JSX

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

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

const state = { totpsecret: "abc", o1: {}, o2: {} };

const actions = { 
		o1: dt => (s, a) => { 
		// s.o2.a = dt; // mutates s, state and hyperapp's state
  	return {
    	o1: {
      	a: dt,
      },
      f:  a => a,
      // callerState: state
    }; // proper state update  
  },
}

const view = (state, actions) => {
  console.log("render");
  return h("div", {}, [
  	h("img", { src: QRCode.generatePNG(state.totpsecret, {ecclevel: "M"}) }),
    h("button", {onclick: e => actions.o1(dt())}, "o1"),
    h("pre", {}, JSON.stringify(state, null, 2)),
    h("pre", {}, state.f || "")
  ]);
}

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