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

visit this implementation
hide

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)
  }
}

visit this implementation
hide

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

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

visit this implementation
hide

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

visit this implementation
hide

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)
    }
  }
})

visit this implementation
hide