Simplest cans counter application

cans-counter.js

import cans, { inject } from 'cans'
import { observable, action } from 'cans/mobx'
import { BrowserRouter, Route } from 'cans/router'

const app = cans()

// model
app.model({
  namespace: 'counter',
  observable: observable({
    count: 0,
    
    incr: action.bound(function () {
      this.count += 1
    }),
    
    decr: action.bound(function () {
      this.count -= 1
    })
  })
})

// view
const Counter = inject(({ models })) => {
  return (
    <div>
      <span>{models.counter.count}</span>
      <button onClick={models.counter.incr}>+</button>
      <button onClick={models.counter.decr}>-</button>
    </div>
  )
}

// router
const route = () => (
  <BrowserRouter>
    <Route path='/' component={Counter} />
  </BrowserRouter>
)
app.route(route)

// mount the app
app.start(document.querySelector('#root'))