import {Component} from '@angular/core';

@Component({
  selector: '#app',
  template: `
    <p>{{count}} bottles of beer on the wall</p>
    <button (click)="more()">Buy more</button>
  `
})
export class Clicker {
  count = 3
  more() {
    this.count++
  }
}

import angular from 'angular'

angular.module('clickerapp')
  .component('clicker', {
    template: `
      <p>{{$ctrl.count}} bottles of beer on the wall</p>
      <button ng-click="$ctrl.more()">Buy more</button>
    `,
    controller: class Clicker {
      $onInit () {
        this.count = 3
      }
      more () {
        this.count = this.count + 1
      }
    }
  })

const html = require('choo/html')

const model = {
  state: { count: 3 },
  reducers: {
    buyMore: (state, data) => ({ count: state.count + 1 })
  }
}

const view = (state, prev, send) => html`
  <main>
    <p>${state.count} bottles of beer on the wall</p>
    <button onclick=${e => send('buyMore')}>Buy more</button>
  </main>
`

module.exports = {model: model, view: view}

import {Block} from 'cyclow'

const Counter = () => Block({
  events: {
    init: () => count => 3,
    click: () => count => count + 1
  },
  view: count => ({content: [
    {content: `${count} bottles of beer on the wall`},
    {tag: 'button', on: {click: ['click']}, content: 'Buy more'}
  ]})
})

export default Counter

import React from 'react'

class Clicker extends React.Component {
  constructor () {
    super()
    this.state = {count: 3}
    this.more = () => this.setState({count: this.state.count + 1})
  }
  render () {
    return <div>
      <p>{this.state.count} bottles of beer on the wall</p>
      <button onClick={this.more}>Buy more</button>
    </div>
  }
}

export default Clicker

import Vue from 'vue'

Vue.component('clicker', {
  template: `
    <p>{{count}} bottles of beer on the wall</p>
    <button v-on:click="more">Buy more</button>
  `,
  data: () => ({count: 3}),
  methods: {
    more () {
      this.count++
    }
  }
})