Inferno Simple Clock demo (JSX)

Starting point for creating JSFiddles with Inferno. This uses Inferno.

HTML

<script src="https://rawgit.com/trueadm/inferno/master/browser/browser.js"></script>
<script src="https://unpkg.com/inferno@3.0.3/dist/inferno.js"></script>
<script src="https://unpkg.com/inferno-component@3.0.3/dist/inferno-component.js"></script>
<script src="https://cdn.rawgit.com/trueadm/inferno/master/browser/jsfiddle-integration-babel.js"></script>
<script src="https://rawgit.com/aretecode/c86f877bcd28cfd911048850fa7a0d03/raw/2313b36ba073f37f983ddb61c4854e3b4dab19ce/chainable.js"></script>
<style>
.column.right {
  width: 20% !important;
}
</style>
<!-- This element's contents will be replaced with your component. -->
<div id="container"></div>

JavaScript 1.7

// normally these would be come in the form of ES2015 import statements
const { render, Component, version } = Inferno;
const Chain = Chainable

const chain = new Chain()
const now = () => Date.now()
const prettyDate = x => new Date(x).toLocaleTimeString()

chain
  .methods('time')
  .build()
  .transform('time', x => now())
  .transform('time', prettyDate)

class Clock extends Component {
    constructor() {
        super();
        // set initial time:
        this.state = {chain};
        chain.observe('time', time => this.setState({chain}))
    }

    componentDidMount() {
        // update time every second
        this.timer = setInterval(chain.time, 1000);
    }

    componentWillUnmount() {
        // stop when not renderable
        clearInterval(this.timer);
    }

    render() {
        return (<div><span>{ chain.get('time') }</span></div>);
    }
}

// render an instance of Clock into <body>:
render(<Clock />, document.getElementById('container'));