Riotが自由だからRiotControlをいれたけどまだ自由だったからなんか作ってる

タイトルの通りです。

github.com

まえおき

react-reduxのdocsで読んだ Presentational Component と Container Component の分離はよさそうだなって思ったので採用したい。
ざっくり言うとPresentationalなものは親から渡された値のみで見た目が決定するべきでアプリケーションの状態とかはContainer側に寄せちゃおう、ということだと理解している。
Riotはtagなので Presentational Tag と Container Tag になるのだろうか。
それでよくあるコードをある程度へらしてみた

const reg = /([A-Z])/g;
class DispatcherMaker {
  constructor(rc) { // rcはRiotControl
    this.rc = rc;
    this.handler = [];
  }
  add(name, func) {
    let eventName = name.replace(reg, "_$1").toUpperCase();
    this.rc.on(eventName, func);
    this.handler[name] = ()=> {
      this.rc.trigger(eventName);
    };
  }
  make() {
    return this.handler;
  }
}

module.exports = DispatcherMaker;

/*
こんな風に使う
  <counter
    count={ this.state.count }
    handlers={ this.handlers } ></counter> */
// 以下はscriptタグ部分
  this.state = store;
  const DispatcherMaker = require('../lib/DispatcherMaker.js');
  let maker = new DispatcherMaker(RiotControl);
  maker.add('onButtonUpClick', ()=> {
    this.state.countUp();
    RiotControl.trigger('STATE_CHANGE');
  });
  maker.add('onButtonDownClick', ()=> {
    this.state.countDown();
    RiotControl.trigger('STATE_CHANGE');
  });
  this.handlers = maker.make();
  store.on('STATE_CHANGE', ()=> {
    this.update();
  });

つらつら

handlers

this.handlersについてはbkなのかもしれない。
htmlのattributeとしてfunctionを渡すとRiotが子に引き渡してくれないのでhandlerはhandlersとしてまとめて渡すというやり方をしている。
ソースを見るとどうもfunctionを意図的に渡してないようだが理由がよくわからない。

stateとstore

なにがなんだかわからん。
関心事ごと( = container tagごと)にstoreがわかれていて、それが合わさったものがstateになるんだろうか。 storeの実装もうさんくさい。つかstateにメソッド生えてるのなんか嫌だな……
addStoreしてるんだし結合したオブジェクトの作成も隠蔽したい

require

このままだと各tagのscript内でDispatcherMakerをrequireするハメになるんだけどなんかキモいけどwindowに生やすのもいやだ。
どうすりゃええねん

STATE_CHANGE

stateが変わらないなら要らないからSTATE_CHANGEイベントを発行させないようにしてる。
でも基本的に変わると思うのになんでこれ毎回発行してんのって感じはある。
戻り値がfalsyだったらSTATE_CHANGEを発行しない、みたいなことしたいけど今の実装だと無理そう

on

いま気づいたけどonついてたりついてなかったり気持ち悪いな……

---

追記

babelify

babelifyかませてないからbundle.jsがes6のままだったことに気づいた。chromeだと動きますが他ブラウザだと動かないかもしれません