ExpressでViewとかEngineをカスタマイズする方法

vulcanize-middlewareを作る時、

JadeとかレンダリングしたHTMLを送信前に取得するにはどうすればいいんだろー

とか　思いながらexpressを調べてた時に知ったことをメモしときます。

独自のtemplate engineを使う - app.engine(ext, callback)

jadeやejsやhoganやhandlebarsなど様々なHTMLを簡単に書くためのテンプレートエンジンが色々あります。

「よっしゃ！いっちょオレオレテンプレートエンジン作ったる！」と思い立った時こうすることで作ることができます。

app.js

// 第一引数にfileの拡張子
// 第二引数に関数を入れます。
app.engine('oreno', function(path, options, fn){
  // ToDo: 最高のHTMLテンプレートの実装
});

pathにはソースファイルのフルパスが入ります。

第三引数のfunctionの第二引数にHTMLを入れて実行することで完了です。

htmlを返すのはnode.jsでお馴染みのやり方で。

//parseが成功なら
return fn(null, html);

//失敗なら
fn(new Error(/*Error Message*/));

実装ができたら以下のようにファイルをapp.set('views', path);で指定した
ディレクトリの下に作成すればOKです。

index.oreno

俺の考えた最強のテンプレートエンジン！

ちなみに　もし　パッケージを公開する場合は拡張子名でパッケージを登録し

以下のコードのように__expressに関数をセットするらしいです。

oreno.js

exports.__express = function(path, options, fn){
  // ToDo: 最高のHTMLテンプレートの実装
};

以下のコードで自動でrequireして使ってくれます。

$ npm install -save oreno

app.js

app.set('view engine', 'oreno');

独自のカスタムViewを使う

独自Viewのメリットがいまいちわからないんですが
サンプルではgithubに置いてるファイルのプロキシサーバーにする感じでした。

ちなみに自動でテンプレートエンジンを呼んでくれるのはこのViewのおかげです。

独自Viewを定義するにはView#constructorとView#renderを実装すればいいようです。

// デフォルトのViewの取得方法
var DefaultView = app.get('view');

var oreno = require('oreno').__express;

var CustomView = function(){

  function getAbsPath(root, name) {
    //いい感じにファイルの絶対パスを取得して返す
  }

  function CustomView(name, options) {
    this.path = getAbsPath(options.root, name);
  }

  CustomView.prototype.render = function(options, fn){
    oreno(this.path, options, fn);
  };

  return CustomView;
};

app.set('view', CustomView);

まとめ

app.engineとデフォルトのViewの振る舞いをおさえとけばテンプレートエンジンを作るときも安心ですね。

まぁ一番上で紹介したvulcanize-middlewareに関してはちっともここらへん触れなくても実装できるっぽかったですがorz