JSFiddle - React, Tailwind, and code Playground

by Graham Dixon

HTML

<script src="https://cdn.rawgit.com/leeoniya/domvm/master/dist/domvm.min.js"></script>
<div id="root">

JavaScript

// creates a portable getter/setter that emits
// redraw requests, can be used recursively
function createCursor(parent, childKey, vm) {
	var oldVal = parent[childKey];
	return (newVal) => {
		if (typeof newVal === "undefined")
			return oldVal;
		else {
			oldVal = parent[childKey] = newVal;
			vm.emit.redraw();
		}
	};
}

function App(vm, state) {
	var countersCursor = createCursor(state, "counters", vm);
	return () =>
		["div",
			["h1", "App cursor:"],
			["p",
				["code", JSON.stringify(state, undefined, 2)],
				[CounterList, countersCursor],
			]
		]
}

function CounterList(vm, countersCursor) {
	var clickers = countersCursor().map((val, idx) => [Clicker, createCursor(countersCursor(), idx, vm)]);
	return () =>
		["div",
			["h2", "CounterList cursor:"],
			["p", ["code", JSON.stringify(countersCursor(), undefined, 2)]],
			clickers,
		]
}

function Clicker(vm, itemCursor) {
	return () =>
		["div",
			["input", {type: "text", value: itemCursor(), readonly: true}],
			["button", {onclick: () => itemCursor(itemCursor()+1)}, "+1"],
			" ",
			["span",
				"Clicker cursor:",
				["code", itemCursor()],
			]
		]
}

// state/model/whatever
var state = {
	counters: [0,0,0,0,0,0,0,0,0,0]
};

domvm.view(App, state).mount(document.getElementById("root"));