フロントエンドフレームワークの一つで、コアの大きさがかなり小さいことで有名な（なんと12KB！）Mithril。
しかし、Viewの書き方がイケてないという声がチラホラ。
例えば以下の様なHTML
<html>
<body>
<input type="checkbox" />
</body>
</html>
これがMithrilのViewでは以下の様に表記します。
m("html",[
m("body", [
m("input[type=checkbox]")
])
]);
確かに分かることは分かりますがちょっと取っ付きにくいですね・・・
で、この書き方に慣れない方にはMSXというツールがオススメです！
どういうツールなの？
MSXはReact.jsで使われているJSXを模したもので、
普段書き慣れているHTMLの書き方からMithril独自の書き方に変換してくれるスグレモノです。
色々と使い方があるツールですが、今回は簡単にコマンドラインから変換する方法を紹介します。
やり方
まずはMSXのインストールを行います。
$ npm install -g msx
そして、次にViewを以下の様に書いてみましょう。
view.js
app.view = function() {
return <html>
<body>
<input onchange={m.withAttr("value", app.vm.description)} value={app.vm.description()}/>
<button onclick={app.vm.add}>追加</button>
</body>
</html>
};
そして、このViewを変換するのですが変換の入力/出力先の指定がディレクトリのみになっていますので、
事前にviewとcompile_viewなどのディレクトリを切ってから以下の様にコマンドを叩いてみましょう。
$ msx view/ compile_view/
built Module("app.view")
["app.view"]
という感じでcompile_view内に変換されたViewが生成されているはずです。
実際にはmsxのオプションとして用意されている--watchを使って、監視しつつ常に変換するというやり方がベターなやり方になりそうです。
試してみたいけどファイルやら用意するのが面倒くさいという方は、
以下のGithubリポジトリにチュートリアルのTODOリストを修正したものを用意しましたので、
git cloneしてからmsxコマンドを試してみてください。