bouzuya.hatenablog.com

ぼうずやのにっき

bouzuya/rally-rxjs の Google Maps 対応をつくった

2016-03-08 につくった bouzuya/rally-rxjsGoogle Maps 対応のことを書く。virtual-dom の Widget を使い、 rally-rxjs から Cycle.js のような selector を削除することで、対応した。

bouzuya/rally-rxjsbouzuya/vdom-rxjs-ssr をより実践的な形にしようという取り組みだ。bouzuya/b-o-a の検証を兼ねている。rally-rxjs は過去に何度か書いている。

今回の Google Maps 対応の目的は Virtual DOM に対応できない要素を埋め込む場合を検証することだ。

実装としては virtual-dom の Widget を使っている。virtual-dom の Widget については virtual-dom の docs/widgets.mdmercury の document を参考にすると良い。 virtual-dom の Widget の実装は document どおりといった感じだ。新しく要素を作りなおす際には init が、更新時には update が呼ばれるだけだ。

関連して Event Listener まわりを変更している。 rally-rxjs の DOM は Cycle.js のような selector を利用していた。この selector は bouzuya/virtual-dom-ssr から引き継いだものであり、2016-02-10 にはその記事も書いた。しかし、この構造では Google Maps の Event 処理が難しいので、今回で削除した。代わりに Action を投げ込むための helper を渡すようにした。Action などの rally-rxjs の構造については 2016-02-27 を参照してほしい。

ちなみに Event Listener まわりの変更は 2016-03-02 に終えている。commit は https://github.com/bouzuya/rally-rxjs/commit/f77b85920a89c163099b22dbc6273524976f6ffc

ひとまず目的である「 Virtual DOM に対応できない要素を埋め込む」ということに関しては問題なさそうだ。 Event も強引に対応できた。

将来の課題としては、もうすこし helper の渡し方を検討したいと思っている。