JSFiddle - React, Tailwind, and code Playground

by Thomas Aylott

HTML

<script src="http://fb.me/JSXTransformer-0.5.1.js"></script>
<script src="http://fb.me/react-with-addons-0.5.1.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>


<script type="text/jsx">/** @jsx React.DOM */
  <component extends="span" name="tickTockClock">
    {function(template, props, state, update){
      var now = new Date;
      if (!state.now || +now - +state.now > 1000) {
        state.now = now;
        if (props.onchange) props.onchange(state.now);
      }
      state.alt = state.now.getSeconds() % 2;
      var hour = state.now.getHours();
      if (hour > 12) hour -= 12;
      
      <template style={{background:"blue", color:"white"}}>
        <span>{hour}</span>
        <span id="sep" style={{ visibility:state.alt ? 'hidden':'visible' }}>:</span>
        <span>{state.now.getMinutes()}</span>
        <span id="sep" style={{ visibility:state.alt ? 'hidden':'visible' }}>:</span>
        <span>{state.now.getSeconds()}</span>
      </template>
      
      setTimeout(update, 500);
    }}
  </component>
</script>

<script type="text/jsx">/** @jsx React.DOM */
  <component extends="form" name="inputToy">
    {function(template, props, state, redrawSoon){
      if (!state.foo) state.foo = (props.max - props.min) * Math.random() + props.min;
      var step = (props.max - props.min) / (props.steps || 100);
      if (state.shouldRound) state.foo = Math.round(state.foo);
      if (props.value) state.foo = props.value;
      
      <Spring input={+state.foo} precision={1000}>{state.springState || (state.springState = {value:state.foo})}</Spring>;
      if (state.springState.isDirty) redrawSoon();
      
      <template style={props.style}>
        <label>Round? <input type="checkbox" onChange={state.handlerFor('shouldRound')} /></label>
        <input type="range"  min={props.min} max={props.max} step={step} value={state.foo} onChange={state.handlerFor('foo')} />
        <input type="number" min={props.min} max={props.max}...

JavaScript 1.7

function Root(props, firstChild){
  var parentNode = props && (props.parentNode || props.mountNode || (props.parentNodeId && document.getElementById(props.parentNodeId))) || document.body;
  if (!parentNode) return setTimeout(Root.bind(this, props, firstChild), 1000/60);
  var children = Array.prototype.slice.call(arguments, 1);
  if (children.length > 1) firstChild = React.DOM[props && props.nodeName || 'div'](null, children);
  React.renderComponent(
    firstChild,
    parentNode
  );
}

function component(componentProps, render){
  var root;
  var superComponent, superComponentId = componentProps && componentProps["extends"];
  superComponent = React.DOM[superComponentId] || window[superComponentId] || React.DOM.div;
  
  function template(props){
    var children = Array.prototype.slice.call(arguments, 1);
    return root = superComponent(props, children);
  }
  window[componentProps.name] = React.createClass({
    getInitialState: ComponentState.getInitialState,
    _render:render,
    render: function(){
      this._render(template, this.props, this.state, this.state.updateEventually);
      return root;
    }
  });
}

var requestAnimationFrame = (window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function(callback){return setTimeout(callback, 1000/30);}).bind(window);
var cancelAnimationFrame = (window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame || window.msCancelAnimationFrame || function(timerId){return clearTimeout(timerId);}).bind(window);

function ComponentState(component){
  if (!(this instanceof ComponentState)) throw TypeError('ComponentState must be called with `new`');
  var state = this;
  state.update = component.replaceState.bind(component, state, undefined);
  state.updateEventually = state.updateEventually.bind(state);
}

ComponentState.getInitialState = function(){
  return new...