JSFiddle - React, Tailwind, and code Playground

by Kris Zyp

HTML

<script src="https://rawgit.com/kriszyp/alkali/master/dist/index.js"></script>
<div id='target'></div>

JavaScript

let { Variable, Div } = alkali
let MyVariable = Variable({
	*name() { // this will create a computed property for "name"
		return `${yield this.firstName} ${yield this.lastName}`
	},
	firstName: Variable,
	lastName: Variable
})
let v = new MyVariable({
	firstName: 'John',
	lastName: 'Doe'
})


document.getElementById('target').appendChild(new Div([
  	Div(['name: ', v.name])]))

v.lastName = 'Smith' // this will update "name" to have a value of "John Smith"
console.log(v) // make updates in the debugger, and see the element update