大庭です。
下記のVue.js 2系へのアップデートでも触れましたが、Vue.jsの1系から2系へのアップグレードの補助ツールとしてvue-migration-helperがあります。
Vue.jsを2系にバージョンアップしました 🎉 - あしたのチームエンジニアブログ
CoffeeScriptに対して
まあ、これは想像に難くないでしょう。
assets:precompileをしてCoffeeScriptをJavascriptに変換したものにvue-migration-helperを実行すればチェックが可能です。
ただ、そのままだと1ファイルにまとめられてしまい、どのファイルが対象か一目でわかりづらいので下記のようにしてvue.jsの関係しそうなファイルを1つずつprecompileされるようにしました。
[config/initializers/assets.rb] Rails.application.config.assets.precompile += %w(view_models/*.js components/*.js directives/*.js filters/*.js mixins/*js)
CoffeeScriptはこれでバッチリです 😄
Slimに対して
SlimやRailsのviewヘルパーで書かれているものについては、vue-migration-helperのチェック率が悪いので、どうにかしてHTMLに変換されたものにチェックをかけたいです。
そこで、まずfeature specの各stepの最後にcapybaraのsave_htmlの機能を使ってHTMLファイルを保存し、それにvue-migration-helperを実行すればいいのでは？と考えました。
[spec/rails_helper.rb] config.after(type: :feature) do page.save_page end
しかし、これだと上手くいきませんでした 😢
というのも、この方法だとvue.jsが実行された後のv-forなどがなくなった素のHTMLになってしまい、vue-migration-helperでは何も引っかかりません 😅
なので、vue.jsが実行される前のv-forなどが入った状態のHTMLファイルをなんとか取得する必要があります。
Railsでrenderが行われた後のHTML文字列を取得できないものかと色々調べていると、response.bodyで取れることが分かりました。
そこで、application_controller.rbに下記のようにafter_actionでresponse.bodyをファイルに出力するようにしてみました。
after_action: html_save
def html_save
File.open("#{Rails.root}/public/convert_html/#{params[:controller].gsub('/', '_')}-#{params[:action]}-#{Time.current.strftime('%Y%m%d%h%M%S%L')}.html", 'w') {|f| f.write(response.body) }
end
※ファイルの出力先はtmpとかだとvue-migration-helperがチェックしないので注意
これだと、v-forなどが残った状態なのでvue-migration-helperでちゃんとチェックすることができます。
ただ、このままだと部分テンプレートを多用しているとどのファイルかがわかりづらいですし、Slimから変換されたHTMLも見にくいので下記の設定と r7kamura/view_source_mapのgemを入れます。
[config/initializers/slim.rb] Slim::Engine.options[:pretty] = true # HTMLを綺麗にインデント [Gemfile] gem 'view_source_map'
これで実際に画面を動かすなり、spec動かすなりすればファイルが出力されるので、それに対してvue-migration-helperを実行すればチェックが可能になります 💪🏻
※testモードの場合はview_source_mapが実行されないのでローカルでgemをちょっといじりました
終わりに
CoffeeScript/Slimにもvue-migration-helperを使えるようにしてみましたが、もっとスマートなやり方を知っている/思いついた方は教えてくだい！
なんならついでにお話ししませんか？
