import xs from 'xstream'
import {div, button} from '@cycle/dom'
let teams = ['Valor', 'Mystic', 'Instinct']
function Voter ({DOM, store}) {
const vote$ = DOM.select('button').events('click').map(e => e.target.getAttribute('data-t'))
return {
DOM: xs.merge(vote$, store).map(t => div(
teams.map((_, n) => button({attrs: {'data-t': n, 'class': (n === +t ? 'active' : '')}}, [teams[n]])))
),
store: vote$
}
}
export default Voter
The same file in a TypeScript implementation using Angular (2.4.9):
import {Component} from '@angular/core';
@Component({
selector: '#app',
template: `
<button *ngFor="let t of teams; let i = index" (click)="vote(i)" [class.active]="team===i">{{t}}</button>
`
})
export class Voter {
teams = ["Valor","Mystic","Instinct"]
team = +(localStorage.getItem('JSCOMPVOTE') || 1)
vote(x) {
this.team = x;
localStorage.setItem('JSCOMPVOTE',x)
}
}The same file in an es6 implementation using Cyclow (0.3.0):
import { Block } from 'cyclow'
const {localStorage} = window
let teams = ['Valor', 'Mystic', 'Instinct']
const Voter = () => Block({
events: {
init: () => team => +(localStorage.getItem('JSCOMPVOTE') || 1),
click: i => team => {
localStorage.setItem('JSCOMPVOTE', i)
return i
}
},
view: team => ({content: teams.map((name, i) => ({
tag: 'button',
attrs: {class: team === i ? 'active' : ''},
on: {click: (v, next) => next(['click', i])},
content: name
}))})
})
export default Voter
The same file in a createClass implementation using React (15.3.1):
import React from 'react'
import classNames from 'classnames'
const {localStorage} = window
let teams = ['Valor', 'Mystic', 'Instinct']
let Voter = React.createClass({
getInitialState: () => ({team: +(localStorage.getItem('JSCOMPVOTE') || 1)}),
vote (team) {
this.setState({team})
localStorage.setItem('JSCOMPVOTE', team)
},
render () {
return <div>
{teams.map((t, n) => <button key={n}
className={classNames({active: this.state.team === n})}
onClick={this.vote.bind(this, n)}>{t}</button>
)}
</div>
}
})
export default Voter
The same file in an es6 class implementation using React (15.3.1):
import React from 'react'
import classNames from 'classnames'
const {localStorage} = window
let teams = ['Valor', 'Mystic', 'Instinct']
class Voter extends React.Component {
constructor () {
super()
this.state = {team: +(localStorage.getItem('JSCOMPVOTE') || 1)}
}
vote (team) {
this.setState({team})
localStorage.setItem('JSCOMPVOTE', team)
}
render () {
return <div>
{teams.map((t, n) => <button key={n}
className={classNames({active: this.state.team === n})}
onClick={this.vote.bind(this, n)}>{t}</button>
)}
</div>
}
}
export default Voter
The same file in a vanilla implementation using Vue (1.0.26):
import Vue from 'vue'
const {localStorage} = window
Vue.component('voter', {
template: `
<button v-for="t of teams" v-bind:class="{active: $index === team}" v-on:click="vote($index)">{{t}}</button>
`,
data: () => ({
team: +(localStorage.getItem('JSCOMPVOTE') || 1),
teams: ['Valor', 'Mystic', 'Instinct']
}),
methods: {
vote (x) {
this.team = x
localStorage.setItem('JSCOMPVOTE', x)
}
}
})