flumpt で decorator インターフェースを追加した

flumpt, 正直自分ではあんまり使ってなくて、薄く作って手離れがいいように作ってたつもりではあったんだけど、「プロダクションで使ってます」ってのをちょくちょく聞いたんで、v0.3.0 出して、インターフェースをモダンな感じに対応しといた。

import React from 'react'
import {withFlux, dispatchable} from 'flumpt'

@dispatchable
class CounterIncrement extends React.Component {
  render() {
    return <button onClick={_ev => this.context.dispatch('increment')}>+1</button>
  }
}

@withFlux((update, on) => {
  on('increment', () => {
    update(state => {
      return {count: state.count + 1}
    })
  })
}, {count: 0})
class MyApp extends React.Component {
  render () {
    return <div>
      <span>{this.props.count}</span>
      <CounterIncrement/>
    </div>
  }
}

継承じゃなくしたので、より自然なReactと「後付で」統合できる。他の環境に移行するのにも使える。SSRもこれで対応したと思う。

他の例: https://github.com/mizchi/flumpt/blob/master/examples/with-decorator/main.js