import Vue from 'vue'
import './singer'
new Vue({
template: '<singer/>',
replace: false,
el: '#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 vanilla implementation using Preact (5.7.0):
/** @jsx h */
import { h, render } from 'preact'
import Singer from './singer'
render(<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'))