vk - CoffeeScript DSLでVirtual DOM をテンプレーティングする

vk は facebook/reactのvirtual DOM 用のテンプレートエンジンみたいなものです。

https://github.com/mizchi/vk

bower install mizchi/vk --save

まだbowerに上げてない。

JSXを使わずCoffeeScriptでReactの仮想DOMを記述するとこうなる。

React.createClass
  render: ->
    React.DOM.div {}, [
      React.DOM.h1 {}, "Hello"
      React.DOM.ul className: 'foobar-container', "bar"
        React.DOM.li {}, "foo"
        React.DOM.li {}, "bar"
      ]
    ]

vkを使うとこんなに短く、直感的に！

React.createClass
  render: -> vk (d) ->
    d.h1 'Hello'
    d.ul className: 'foobar-container', ->
      d.li "foo"
      d.li "bar"

ワ～スゴ～イ
実態はただのReactのラッパーです。

開発経緯

その昔、coffeekupというテンプレートエンジンがありまして、開発が止まってしまったのですが個人的には結構気に入ってたテンプレートエンジンでした。ただのDSLとしてDOMを生成する、という設計です。

mauricemach/coffeekup

で、reactはjsxというAltjs泣かせな独自シンタックスを持っていて、APIを直接叩いてもいいのですが、どうせなら、ラップしたい。Virtual DOM は DOMとJSが密結合することを厭わない設計思想で、今こそCoffeekup的なDSL設計が生きるのでは？と思い、さっくり移植しました。

コンセプト実装的なノリで作ったので、まだコンポーネントの埋め込みとかは細かいのは対応してないです。

JSXのつらさ

次のようなDOMを出力したいとします。

<div>
  <h1> Hello </h1>
  <ul class='foobar-container'>
    <li>foo</li>
    <li>bar</li>
  </ul>
</div>

この場合、reactのjsx記法を使うと、次のようになることでしょう

React.createClass({
  render: function(){
    return <div>
      <h1> Hello </h1>
      <ul class='foobar-container'>
        <li>foo</li>
        <li>bar</li>
      </ul>
    </div>
  }
});

jsxが使えないcoffee-script でベタに書くとこうなります。

React.createClass
  render: ->
    React.DOM.div {}, [
      React.DOM.h1 {}, "Hello"
      React.DOM.ul className: 'foobar-container', "bar"
        React.DOM.li {}, "foo"
        React.DOM.li {}, "bar"
      ]
    ]

明らかにだるい。
で、冒頭にvkならこうなるっていう話。

React.createClass
  render: -> vk (d) ->
    d.h1 'Hello'
    d.ul className: 'foobar-container', ->
      d.li "foo"
      d.li "bar"