JSFiddle - React, Tailwind, and code Playground

by spicyj

HTML

<script src="http://fb.me/react-with-addons-0.8.0.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/coffee-script/1.6.3/coffee-script.min.js"></script>

CSS

textarea {
    display: block;
    width: 80%;
    height: 4em;
    font-family: monospace;
}

CoffeeScript

D = React.DOM

Editor = React.createClass
    getInitialState: -> value: "h1 'Example'\np 'Hello, World!'\nbutton {onClick: -> p 'Clicked!'}, 'Click Me'"
    handleRunClick: -> @props.onRun(@state.value)
    handleClearClick: -> @props.onClear()
    handleChange: (e) -> @setState value: e.target.value
    render: ->
        D.div {}, [
            D.textarea {onChange: @handleChange, defaultValue: @state.value}
            D.button {onClick: @handleRunClick}, "Run"
            D.button {onClick: @handleClearClick}, "Clear"
        ]

Layout = React.createClass
    getInitialState: ->
        scripts: []
    handleRun: (code) ->
        @setState scripts: @state.scripts.concat [code]
    handleClear: ->
        @setState scripts: []
    render: -> D.div {}, [
        D.p {}, "Enter CoffeeScript Here:"
        Editor onRun: @handleRun, onClear: @handleClear
        Execution code: code for code in @state.scripts
    ]

Execution = React.createClass
    shouldComponentUpdate: (nextProps, nextState) ->
        @props.code != nextProps.code
    render: ->
        D.div {}, run @props.code

components = []
outputFunctions = {}

for name, constructor of D
    do (constructor) ->
        outputFunctions[name] = (a, b) ->
            console.log(a, b)
            components.push(if b? then constructor(a, b) else constructor({}, a))

run = (s) ->
    components = []
    js = CoffeeScript.compile s
    `with (outputFunctions) { eval(js); }`
    components

React.renderComponent Layout(), document.body