JavaScript
Mithril.js

Mithril.js を v0.2.x から v1.1.6 に上げてのログ

More than 1 year has passed since last update.

折り返し翻訳 というサービスの 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

https://mithril.js.org/change-log.html#changes-in-redraw-behaviour

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

https://mithril.js.org/change-log.html#nested-arrays-in-views

ざっくりいうとルートが複数の要素で出来てるいわゆるフラグメントコンポーネント作ると兄弟関係が把握できなかったりする。

折り返し翻訳でこれによるバグを踏み、 m('div', [ ]) でくくることで解消させた。


所感

v1 使いやすいし覚えやすくなったと思う。やっぱりこの軽量感はステキ。