all imlementations using Preact all imlementations of Interval

a vanilla implementation
of the Interval demo using Preact



/** @jsx h */
import { h, render } from 'preact'
import Singer from './singer'

render(<Singer />, document.getElementById('app'))

The same file in a TypeScript implementation using Angular (2.4.9):

import 'zone.js'
import 'reflect-metadata'

import { NgModule, Component }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Singer } from './singer.ts';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

@NgModule({
    imports:      [ BrowserModule ],
    declarations: [ Singer ],
    bootstrap:    [ Singer ]
})
class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

The same file in an xstream, driver implementation using CycleJS (12.2.2):

import {run} from '@cycle/xstream-run'
import {makeDOMDriver} from '@cycle/dom'

import makeIteratorDriver from './extras'
import {lyrics} from '../../../lyrics'
import Singer from './singer'

run(Singer, {
  DOM: makeDOMDriver('#app'),
  line$: makeIteratorDriver(lyrics)
})

The same file in an xstream implementation using CycleJS (12.2.2):

import {run} from '@cycle/xstream-run'
import {makeDOMDriver} from '@cycle/dom'

import Singer from './singer'

run(Singer, { DOM: makeDOMDriver('#app') })

The same file in an es6 implementation using Cyclow (0.3.0):

import {run} from 'cyclow'
import Singer from './singer'

run(Singer, {target: 'app'})

The same file in an es6-iterator implementation using Cyclow (0.3.0):

import {run} from 'cyclow'
import Singer from './singer'

run(Singer, {target: 'app'})

The same file in a react-elm-comps implementation using Elm (0.17.1):

import React from 'react'
import ReactDOM from 'react-dom'
import Elm from 'react-elm-components'

import { Singer } from './singer.elm'

ReactDOM.render(<Elm src={Singer} />, document.getElementById('app'))

The same file in a createClass implementation using React (15.3.1):

import React from 'react'
import ReactDOM from 'react-dom'

import Singer from './singer'

ReactDOM.render(<Singer />, document.getElementById('app'))

The same file in an es6 class implementation using React (15.3.1):

import React from 'react'
import ReactDOM from 'react-dom'

import Singer from './singer'

ReactDOM.render(<Singer />, document.getElementById('app'))

The same file in a vanilla implementation using Vue (1.0.26):

import Vue from 'vue'

import './singer'

new Vue({ 
  template: '<singer/>',
  replace: false,
  el: '#app'
})