react-problems.mdで発表してきたんだけど、テンプレートエンジンを作っています。

Mithril / Mercuryのサポート

dekuもサポートしようと思ったんだけど、今APIが変わりまくってる最中っぽくて様子見。

最初にこういうテンプレートを吐くDSLのような中間層を作った

mizchi/virdy

const virdy = require('virdy/runtime/mithril')
let template = (props) => virdy($ => {
  $('div', {className: 'root'}, () => {
    $('ul', {className: 'itemWrapper'}, () => {
      [1, 2, 3].map(i => {
        $('li', {}, 'item:' + i.toString());
      });
    });
  });
});

で、こういう風に使える

  m.render(
    document.querySelector('#mithril')
    template(title: 'mithril')
  )

Mercuryだとこう

  hg.app(
    document.querySelector('#mercury')
    hg.state({})
    -> require('../runtime/mercury')(template(title: 'mercury'))
  )

実際に動いてる例はここ virdy/index.coffee at master · mizchi/virdy

各vdom実装でのcomponent呼び出し型に差異があるので、そこはまだ埋めてない。あとでやる。

else, if else 句の追加

else 句が存在してないの途中で気づいたのでさっくり作った

SCSS生成

こんなreinyのインライン記法があったとして

.foo {
  color: 'green'
}
  if true
    if true
      .quux {
        color: #eee
      }
  .bar {
    color: 'red'
  }
    .baz {
      color: 'blue'
    }
    if false
      .fuba {
        color: value
      }

次のようなSCSSを生成する

.foo {
  color:green;
  .bar {
    color:red;
    .baz {
      color:blue;
    }
    .fuba {
      color:$value;
    }
  }
  .quux {
    color:#eee;
  }
}

作った動機は、自分はよくインラインCSSを気軽に書いてマークアップの人に怒られるんだけど、だったらインラインCSSからCSSをいつでも生成できれば移行コスト少なくていいやん！みたいな感じ。実験的な機能。作ったはいいがメンテするか微妙。

というわけで引き続き細かいバグを潰します