sonder [WIP]

Usage

Create a Counter component:

export default class Counter {

  render() {
    return `Clicked: {{ count }} times, count is {{ evenOrOdd }}.
    <button click="increment">+</button>
    <button click="decrement">-</button>
    <button click="incrementIfOdd">Increment if odd</button>
    <button click="incrementAsync">Increment async</button>`
  }

  constructor() {
    this.state = {
      count: 0
    }
  }

  increment() {
    this.state.count++
  }

  decrement() {
    this.state.count--
  }

  incrementIfOdd() {
    if ((this.state.count + 1) % 2 === 0) {
      this.increment()
    }
  }

  incrementAsync() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        this.increment()
        resolve()
      }, 1000)
    })
  }

  get evenOrOdd() {
    return this.state.count % 2 === 0 ? 'even' : 'odd'
  }
}

Render it:

import Sounder from './index'
import Counter from './Counter'

new Sounder({
  el: '#app',
  render: h => h(Counter)
})

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Author

sonder © ulivz, Released under the MIT License. Authored and maintained by ulivz with help from contributors (list).

github.com/ulivz · GitHub @ulivz