reiny - Reactに最適化したテンプレートエンジンを作り始めた - Qiitaで紹介したreiny、どんどんバージョンあげてて今0.3.4。

mizchi/reiny

発表時点からの細かい改良点は無限にあって列挙できない、というか元がバグりまくってたので、ひたすら直していた。

とはいえだいぶ動くようになったので、v0.3.4時点でのめぼしい機能を紹介したいと思う。コメントが怪しい以外はちゃんと動いてると思うが、実験的な段階は脱していない。

中身の詳細はここに。 reiny開発メモ - mizchi's blog

Natural Inline Style

次のように比較的自然なCSSを記述できるようになった。

.container {
  background-color: #eee
  width: 640px
  height: 100%
}

会社でこれ頼むと言われた。今まで通りの backgroundColor = 'red' みたいな書き方もできる。url()だとかシステムカラーとかはサポートしていない。

システムカラー、列挙が面倒という理由はあるんだけど、見た目から変数と区別できないことと、文字列で与えるという必要十分な回避策があること、そしてちゃんと開発しているとそもそもシステムカラーは使わないのが理由。

pegjsで書いていて嬉しい理由の一つに、ググればそこら辺にパーサが落ちてて、公式のリポジトリにもjavascriptパーサとcssパーサがあるので、必要なら持ってくればよいってのがある。

Inline PropTypes

このテンプレートがどういうプロパティを要求してるか、テンプレート内部で宣言できるようにした。内部的にはReact.PropTypes を使っている。

@greeting: string
@items: number[]?

.foo(
  data-id = @foo
)

実行する側はこんな感じ

global.React = require('react');
var template = require('./template');
var C = React.createClass({
  propTypes: template.propTypes || {},
  render: function(){
    return template(this.props);
  }
});

console.log(React.renderToStaticMarkup(
  React.createElement(C, {greeting: 'hello', items: [1, 2]})
));

template.propTypes に型情報が入っているというだけ。

InlineCodeの記法

最初はmarkdown(gfm)と同じバッククオート3つでコードブロックにしてたけど、markdownに貼る時に相性最悪で結局 --- をリーダーにした。

---
var foo = 1;
var bar = 2;
---

- var baz = 3;

一行のコードは react-jade と同じ記法。---markdown みたいな感じでここで登録したプリプロセッサに渡す、みたいに出来るとかっこいい気がしているが、シンタックスハイライターを作ろうとすると死ぬ。

既知の不具合

コメントが上手くパースできない。動かねーと思ったらコメントを消すと解決したりしていて、よろしくない。どうにかしたい。

実装案

Inline CSSからcss/scssを生成する。開発時に雑に書いて、あとでちゃんと移行する用途に使える気がしている
atom用のシンタックスハイライターを提供する
完全なexpressionパーサを備える。かなりプログラミング言語に近くなるが、メンテが必要な領域も増えるので考えもの。

より良いテンプレートエンジンを求めて拡張していくと、自分自身が言語として機能するようにする方向性になってしまうの、結局人類はPHPに至るのか、という気持ちが若干あり、ややつらい気持ちに。

こんな機能がほしい！

Issues · mizchi/reiny までどうぞ