JSFiddle - React, Tailwind, and code Playground

by skane

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.min.js"></script>

JavaScript

const { div, ul, li } = React.DOM

function * CountTo ( total ) {
	let t = 0	
  
  while ( t < total ) yield t++
}

function * Oscillate () {
	let t = 0
  
  while ( true ) yield Math.sin(t++ / 10)
}

class RocketComponent extends React.Component {
	render() {
  	const rocket = this.props.rocket
    const props = {
      style: {
      	boxSizing: 'border-box',
        width: '100px', 
        height: '100px',
        backgroundColor: 'blue',
        color: 'white',
        flex: '1 0 1',
        margin: '0px 10px',
        padding: '10px',
        fontSize: '12px',
        transform: `translate(${ rocket.position[0] * 10 }px, ${ rocket.position[1] * 10 }px)`
      } 
    }
    
    return ul(props, [
    	li({}, 'X: ' + rocket.position[0].toFixed(2)),
      li({}, 'Y: ' + rocket.position[1].toFixed(2))
    ])
  }
}

class Stage extends React.Component {
	render() {
  	const props = {
   		style: {
     		display: 'flex'
      }
    }
    const taskProps = {
   		style: {
      	position: 'fixed',
        bottom: '0px'
      } 
    }
  	const rockets = this.props.appState.rockets.map(function (rocket, i) {
   		return React.createElement(RocketComponent, { rocket: rocket, key: rocket.name }) 
    })
    
 		return div(props, [
   		div(taskProps, [
     		'TaskCount: '  + this.props.tasks.length,
        JSON.stringify(this.props.appState.rockets[0])
      ]),
      ...rockets
    ])
  }
}

class Task {
	constructor(doWith, run, andThen) {
 		this.doWith = doWith 
    this.run = run
    this.andThen = andThen
  }
}

function tick () {
	requestAnimationFrame(tick)
  
  for ( let i = 0, t; t = tasks[i]; i++) {
  	let { value, done } = t.run.next(t.doWith(appState))
   
    if ( done ) tasks.splice(i--, 1)
    else 				t.andThen(appState, value)
  }
	ReactDOM.render(React.createElement(Stage, { appState: appState, tasks: tasks }), document.body)
}

const appState = {
	rockets: [
 		{ position: [ 0, 0 ], name: 'Fred' }
  ]
}
const tasks = [ 
	new Task(as => null,...