折り返し翻訳 というサービスの Mithril.js を v0.2.x から v1.1.6 に爆上げしたログ。
mithril v1 なかなかいいなと思ったけど、直近で使う予定がないので、あまり掘り下げてはいない……。
m.prop removed
マイグレーションガイド を読みつつすすめると、早速この 2 つで心が折れそうになる
m.prop removed
m.component removed
m.component() の方は全部 m() に置換するだけで動く。
が、 m.prop はそうも行かない。まず var prop = require("mithril/stream") でいけると書いてあるんだけど、仮想 DOM に切り替わった影響か、そもそもこれを使わなくていい場面がほとんどになっている。
かつては m.request の戻り値も m.prop だったりしたんだけど、今はただの Promise になっているし、まずは m.prop を使うべきかどうかをドキュメント見ながら判断する。ちなみに折り返し翻訳ではほぼ削除した。
m.redraw
0.2.x では m.startComputation() と m.endComputation() でうまいこと調整しないと微妙な見え方になる箇所があったけど、この 2 つのメソッドが消滅した。
何も考えずに消してみたけど、微妙な見え方にならなかったので、多分再描画ロジックが賢くなったんだと思う。これから書く人は redraw 周りは極力触らずに困ったら導入考えるくらいが良さそう
controller function -> oninit
というか初期化・dom構築前・dom更新前……といったタイミングで oninit, oncreate, onupdate などなどが呼ばれるようになった。
ライフサイクルに合わせたコードが書きやすくなって、結構コードをスッキリさせることができた。
が、単純な置換で対応しにくいので結構頭を使ったし、かつ数が多かったので、一番きつかった。
vnode
babel 入れてれば oninit ({ state, attrs }) { ... } とか書けるのでおすすめ。
ハマりどころは特にない気がする。
Nested arrays in views
ざっくりいうとルートが複数の要素で出来てるいわゆるフラグメントコンポーネント作ると兄弟関係が把握できなかったりする。
折り返し翻訳でこれによるバグを踏み、 m('div', [ ]) でくくることで解消させた。
所感
v1 使いやすいし覚えやすくなったと思う。やっぱりこの軽量感はステキ。