const {h, render, Component, Text} = require('../');

class Counter extends Component {
	constructor() {
		super();

		this.state = {
			i: 0
		};
	}

	render() {
		return h('div', {}, [
			h('div', {}, []),
			h('div', {}, [
				h(Text, {blue: true}, '~/Projects/ink ')
			]),
			h('div', {}, [
				h(Text, {red: true}, 'λ '),
				h(Text, {green: true}, 'node '),
				h(Text, {}, 'media/example')
			]),
			h(Text, {green: true}, `${this.state.i} tests passed`)
		]);
	}

	componentDidMount() {
		this.timer = setInterval(() => {
			if (this.state.i === 50) {
				process.exit(0); // eslint-disable-line unicorn/no-process-exit
			}

			this.setState({
				i: this.state.i + 1
			});
		}, 100);
	}

	componentWillUnmount() {
		clearInterval(this.timer);
	}
}

render(h(Counter));

'use strict';
const React = require('react');
const {render, Box, Color} = require('..');

class Counter extends React.PureComponent {
	constructor() {
		super();

		this.state = {
			i: 0
		};
	}

	render() {
		return React.createElement(
			Box,
			{flexDirection: 'column'},
			React.createElement(Box, {}, React.createElement(Color, {blue: true}, '~/Projects/ink ')),
			React.createElement(
				Box,
				{},
				React.createElement(Color, {red: true}, 'λ '),
				React.createElement(Color, {green: true}, 'node '),
				React.createElement(Box, {}, 'media/example')
			),
			React.createElement(Color, {green: true}, `${this.state.i} tests passed`)
		);
	}

	componentDidMount() {
		this.timer = setInterval(() => {
			if (this.state.i === 50) {
				process.exit(0); // eslint-disable-line unicorn/no-process-exit
			}

			this.setState(prevState => ({
				i: prevState.i + 1
			}))
		}, 100);
	}

	componentWillUnmount() {
		clearInterval(this.timer);
	}
}

render(React.createElement(Counter));

fix demo