直接requireされているreact-jadeのファイルをwatchifyできるようにする

対象バージョン

• jadejs/react-jade :: v2.4.0

react-jadeのインライン展開

react-jadeはbrowserify用のtransformを提供しており、jadeファイルをコンパイルして生成したjsコードをsubstack/brfsと同じようにインライン挿入することができます。

watchifyにjadeファイルの変更が伝わらない

substack/brfsと同じようにwatchifyによる差分更新をしたいのですが、現状のreact-jadeが提供するbrowserify用のtrasformは'file'イベントを発火しないため、watchifyがjadeファイルの変更を探知してくれません。そのためjadeファイルを編集するたびに、それをrequireしているjsファイルも更新(もしくはtouch)しなければなりません。

自分で書く

react-jadeのtransformがfileイベントを発火するように修正してもいいですが、自分が欲しいのはcomfileFileだけだったのでスクラッチで小さいtransformを書いてみました。

var reactJade = require('react-jade');
var staticModule = require('static-module');
var path = require('path');

module.exports = transform;

function transform(file) {
  var modules = {
    "react-jade": {
      "compileFile": compileFile,
    },
  };
  var vars = {
    __dirname: path.dirname(file)
  };
  var sm = staticModule(modules, {vars: vars});
  return sm;

  function compileFile(file, localOptions) {
    sm.emit('file', file); // これが必要
    return reactJade.compileFile(file, localOptions);
  }
}

static-moduleはjsコードを構文解析した上で特定モジュールの関数呼び出しを静的に評価しインライン展開します。上の例では、"react-jade"というモジュールのcompileFile関数を呼び出している文があれば、そこだけ静的に評価します。その静的評価の中でfileイベントを発火するように書けばwatchifyに依存ファイル情報が追加されます。

jadeファイル間の依存は未対応

記事タイトルの通りこの実装はjsコードからrequireされているjadeファイルだけwatchします。つまり、jadeファイルからincludes構文などで参照されているjadeファイルには対応出来ていませんので注意してください。(jadeのcompileClientWithDependenciesTrackedのようにjadeファイル間の依存を簡単に取得出来ればいいのですが...)