Riot.js/riot_js-railsの手直し

coffee-rails のまねをする†

$ git clone https://github.com/rails/coffee-rails.git
$ mv coffee-rails/ riottag-rails
$ (いろいろ直す)

主には、

LANG:ruby
module RiotTag
  module Rails
    class TemplateHandler
      def self.erb_handler
        @@erb_handler ||= ActionView::Template.registered_template_handler(:erb)
      end

      def self.call(template)
        compiled_source = erb_handler.call(template)
        "'Compiled!'.html_safe"
      end
    end
  end
end

ActiveSupport.on_load(:action_view) do
  ActionView::Template.register_template_handler :tag, RiotTag::Rails::TemplateHandler
end

全然うまくいきません（涙

というか、coffee-rails の該当部分 ActionView::Template.register_template_handler をコメントアウトしても coffee-rails が動き続けているあたり、見ている場所が全然違うのかもしれません？！

素直に rails のバージョンを上げることを考えるべきなのかも・・・

それにしても黒魔術すぎて、キビシイなあ

現行のコードと比べてみる†

riot_js-rails/lib/riot_js/rails/processors/sprockets_processor_v2.rb

LANG:ruby
module RiotJs
  module Rails
    class SprocketsProcessor < Tilt::Template

      self.default_mime_type = 'application/javascript'

      def self.register_self(app)
        app.assets.register_engine '.tag', self
      end

      def evaluate(context, locals, &block)
        @context = context
        process
      end
      
      def prepare
        @data = data
      end

      def process
        raise 'Not implemented'
      end

    end
  end
end

riot_js-rails/lib/riot_js/rails/processors/sprockets_processor_v3.rb

LANG:ruby
module RiotJs
  module Rails
    class SprocketsProcessor
      def self.instance
        @instance ||= new
      end

      def self.call(input)
        instance.call(input)
      end

      def call(input)
        prepare(input)
        data = process

        @context.metadata.merge(data: data)
      end

      def self.register_self(config)
        config.assets.configure do |env|
          env.register_engine '.tag', self, mime_type: 'application/javascript'
        end
      end
 
     private

     def process
        raise 'Not implemented'
      end

      def prepare(input)
        @context = input[:environment].context_class.new(input)
        @data = input[:data]
      end

    end
  end
end

riot_js-rails/lib/riot_js/rails/processors/processor.rb

LANG:ruby
require 'riot_js/rails/processors/compiler'

if Gem::Version.new(Sprockets::VERSION) < Gem::Version.new('3.0.0')
  require 'riot_js/rails/processors/sprockets_processor_v2'
else
  require 'riot_js/rails/processors/sprockets_processor_v3'
end

module RiotJs
  module Rails
    class Processor < SprocketsProcessor

      def process
        compile_tag
      end

      private

      def compile_tag
        ::RiotJs::Rails::Compiler.compile(@data)
      end
    end
  end
end

いろいろ面倒な手順は踏んでいるけれど、やろうとしていることは同じように見える？

やってみる†

まず前提として、Sprocket 3 以降では development 環境でも assets のキャッシュのクリアはひと手間必要で、ちゃんとクリアしないと古い内容が読み込まれてしまうのが問題の特定を難しくしていたっぽい。

LANG:console
$ rake tmp:cache:clear
$ rake assets:clean

でクリアできるとのこと。

上でにっちもさっちもいかなかったのはこれのせい（汗

で、下記コードはかなり良い線行っている気がします。

LANG:ruby
require 'riot_js/rails/processors/compiler'

module RiotJs
  module Rails

    # Sprockets 2, 3 & 4 interface
    class SprocketsExtensionBase
      attr_reader :default_mime_type

      def initialize(filename, &block)
        @filename = filename
        @source   = block.call
      end

      def render(context, empty_hash_wtf)
        self.class.run(@filename, @source, context)
      end

      def self.run(filename, source, context)
        raise 'Not implemented'
      end

      def self.call(input)
        if input.is_a?(String)
          run("", input, nil)
        else
          filename = input[:filename]
          source   = input[:data]
          context  = input[:environment].context_class.new(input)

          result = run(filename, source, context)
          context.metadata.merge(data: result)
        end
      end

      private

      def self.register_self_helper(app, config, file_ext, mime_type_from, mime_type_to, charset=nil)

        if config.respond_to?(:assets)
          config.assets.configure do |env|
            if env.respond_to?(:register_transformer)
              # Sprockets 3 and 4
              env.register_mime_type mime_type_from, extensions: [file_ext], charset: charset
              env.register_transformer mime_type_from, mime_type_to, self
            elsif env.respond_to?(:register_engine)
              if Sprockets::VERSION.start_with?("3")
                # Sprockets 3 ... is this needed?
                env.register_engine file_ext, self, { mime_type: mime_type_to, silence_deprecation: true }
              else
                # Sprockets 2.12.4
                @default_mime_type = mime_type_to
                env.register_engine file_ext, self
              end
            end
          end
        else
          # Sprockets 2.2.3
          @default_mime_type = mime_type_to
          app.assets.register_engine file_ext, self
        end
      end

    end

    class Processor < SprocketsExtensionBase

      def self.run(filename, source, context)
        ::RiotJs::Rails::Compiler.compile(source)
      end

      def self.register_self(app, config)
        # app is a YourApp::Application
        # config is Rails::Railtie::Configuration that belongs to RiotJs::Rails::Railtie
        register_self_helper(app, config, '.tag', 'text/riot-tag', 'application/javascript', :html)
      end

    end
  end
end

LANG:ruby
require 'rails/railtie'
require 'riot_js/rails/processors/processor'
require 'riot_js/rails/helper'

module RiotJs
  module Rails
    class Railtie < ::Rails::Railtie
      config.riot = ActiveSupport::OrderedOptions.new
      config.riot.node_paths = []

      initializer :setup_sprockets do |app|
        # app is a YourApp::Application
        # config is Rails::Railtie::Configuration that belongs to RiotJs::Rails::Railtie
        Processor.register_self app, config

        if defined?(::Haml)
          require 'tilt/haml'
          Haml::Template.options[:format] = :html5

          if config.respond_to?(:assets)
            config.assets.configure do |env|
              if env.respond_to?(:register_transformer)
                # Sprockets 3 and 4
                env.register_mime_type 'text/riot-tag+haml', extensions: ['.tag.haml'], charset: :html
                env.register_transformer 'text/riot-tag+haml', 'application/javascript',
                        Proc.new{ |input| Processor.call(::Haml::Engine.new(input[:data]).render) }
              elsif env.respond_to?(:register_engine)
                if Sprockets::VERSION.start_with?("3")
                  # Sprockets 3 ... is this needed?
                  env.register_engine '.haml', ::Tilt::HamlTemplate, { silence_deprecation: true }
                else
                  # Sprockets 2.12.4
                  env.register_engine '.haml', ::Tilt::HamlTemplate
                end
              end
            end
          else
            # Sprockets 2
            app.assets.register_engine '.haml', ::Tilt::HamlTemplate
          end
        end
      end

      initializer :add_helpers do |app|
        helpers = %q{ include ::RiotJs::Rails::Helper }
        ::ActionView::Base.module_eval(helpers)
        ::Rails.application.config.assets.context_class.class_eval(helpers)
      end

      config.after_initialize do |app|
        node_paths = ENV['NODE_PATH'].to_s.split(':')
        node_paths += app.config.riot.node_paths
        node_global_path = detect_node_global_path
        node_paths << node_global_path if node_global_path

        ENV['NODE_PATH'] = node_paths.join(':')
      end

      def detect_node_global_path
        prefix = `npm config get prefix`.to_s.chomp("\n")
        possible_paths = [ "#{prefix}/lib/node", "#{prefix}/lib/node_modules" ]

        possible_paths.each do |path|
          return path if File.directory?(path)
        end
        return
      end

    end
  end
end

テスト結果†

テストは下記のスクリプトで行った。

通常の .tag ファイルが正しく読み込めるかどうかと、 haml を使った .tag.haml ファイルが正しく読み込めるかどうかをテストしている。

うまくいっていれば http://localhost:3000/ をブラウザで見た時に

<test> tag is working.
<haml-test> tag is working. 

と表示される。

テストスクリプト†

Gist に上げた。

https://gist.github.com/osamutake/0ccbdf96a5ac70a36ebce38db0a33137

github に上げた†

上記コードを組み入れた riot_js-rails を github に上げました。

https://github.com/osamutake/riot_js-rails

プルリクエストを書いてみた†

作法をよく知らないので、失礼がないと良いのだけれど。

https://github.com/bjarosze/riot_js-rails/pull/18

本家に取り込まれるまでの間は Gemfile 中で、

LANG:ruby
gem 'riot_js-rails', :git => 'git://github.com/osamutake/riot_js-rails',
                     :branch => 'support_sprockets_2_3_and_4'

とすれば上記コードを使えます。

→ 本家に取り込まれました (2017/01/27)

テストを phantomjs で書いてみる†

phantomjs の導入は、バイナリをとってくればすぐできる。

http://phantomjs.org/download.html を見て、

LANG:console
$ wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2
$ cd /usr/local/src
$ sudo tar fxj ~/phantomjs-2.1.1-linux-x86_64.tar.bz2
$ sudo ln -s /usr/local/src/phantomjs-2.1.1-linux-x86_64/bin/phantomjs /usr/local/bin/phantomjs
$ phantomjs -v
2.1.1

あ、npm でも良いみたいですね。こっちの方が簡単だ。

$ npm install phantomjs-prebuilt
$ ~/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs --version
2.1.1

あとは、

test.js

LANG:js
 (function(){

   var page = require("webpage").create();
   page.viewportSize = {width: 1024, height: 768};

   page.onConsoleMessage = function(msg) {
     console.log(msg);
   };

   page.open("http://localhost:3000/", function(status) {
     if (status === "success") {
       var error = null;
       page.evaluate(function() {
         var expected = "<test> tag is working.\n" +
                        "<haml-test> tag is working.\n" +
                        "<slim-test> tag is working.";
         var result = document.body.innerText.trim();
 	      if(result != expected){
 	        error = "Failed!\nresult:\n" + result + "\n";
 	      }
       });
       if(error) {
         console.log(error);
         phantom.exit(1);
       }else {
         console.log("Success!");
         phantom.exit(0);
       }
     } else {
       phantom.exit(1);
     }
   });

 })();

などというスクリプトを用意して、

$ phantomjs test.js

で実行できる。

slim も扱えるようにする†

haml もいいのだけれど、haml + coffee + sass だと、haml と sass の相性が悪いことに気づきました。

slim はタグの前の % がいらないので、sass との相性がよさそう。

class Processer に

LANG:ruby
     def self.register_nested(app, config, type, charset, tilt_template)
       extention = '.' + type
       if config.respond_to?(:assets)
         config.assets.configure do |env|
           if env.respond_to?(:register_transformer)
             # Sprockets 3 and 4
             env.register_mime_type 'text/riot-tag+'+type, extensions: ['.tag'+extention], charset: charset
             env.register_transformer 'text/riot-tag+'+type, 'application/javascript',
               Proc.new{ |input| Processor.call(tilt_template.new{input[:data]}.render) }
           elsif env.respond_to?(:register_engine)
             if Sprockets::VERSION.start_with?("3")
               # Sprockets 3 ... is this needed?
               env.register_engine extention, tilt_template, { silence_deprecation: true }
             else
               # Sprockets 2.12.4
               env.register_engine extention, tilt_template
             end
           end
         end
       else
         # Sprockets 2
         app.assets.register_engine extention, tilt_template
       end
     end

を用意して、

LANG:ruby
       if defined?(::Haml)
         require 'tilt/haml'
         Haml::Template.options[:format] = :html5
         Processor.register_nested(app, config, 'haml', :html, ::Tilt::HamlTemplate)
       end

       if defined?(::Slim)
         Processor.register_nested(app, config, 'slim', :html, ::Slim::Template)
       end
     end

のようにして登録したところ、slim も使えるようになった。

rails 4 では(?) slim-rails を導入していれば何もしなくても slim がつかえるようだったが、 上記コードにより slim-rails を Gemfile に含める必要はなく、slim のみでよくなる。

属性の引用符†

riot で属性を javascript で与える場合、引用符を省略して次のように書けますが、

LANG: html
<li each={ item, i in items }>{ item }</li>

slim で

LANG: slim
li each={ item, i in items }
  | { item }

と書くと属性値の { } の中を ruby で解釈しようとしてエラーになってしまいます。

属性値は必ず引用符で囲まなければなりません。

LANG: slim
li each="{ item, i in items }"
  | { item }

style scoped†

もしかして、、、これ実現不可能？？？

sass 中で改行のエスケープ†

https://github.com/sass/sass/commit/3d27be5d0c9cff02e48398d29997f0a99d558ef1

これで良さそうなんだけれど、

gem 'sass', :git => 'git://github.com/sass/sass.git', :ref => 　'3d27be5d0c9cff02e48398d29997f0a99d558ef1'

とすると、

Fetching git://github.com/sass/sass.git
fatal: Could not parse object '3d27be5d0c9cff02e48398d29997f0a99d558ef1'.
Git error: command `git reset --hard 3d27be5d0c9cff02e48398d29997f0a99d558ef1` in directory
/home/osamu/.rvm/gems/ruby-2.3.1@album/bundler/gems/sass-3d27be5d0c9c has failed.
If this error persists you could try removing the cache directory
'/home/osamu/.rvm/gems/ruby-2.3.1@album/cache/bundler/git/sass-d1bc97264a602a16cbc8b7962b139cf458860561'

といって怒られてしまいます？？？

試してみる†

bootstrap-carousel

  div[ id="carousel-example-generic" class="carousel slide" data-ride="carousel" 
       data-interval="{ this.interval }" data-pause="{ this.pause }"
       data-wrap="{ this.wrap }" data-keyboard="{ this.keyboard }" ]

    / Indicators
    ol class="carousel-indicators"
      li[ each="{ this.items }" data-target="#carousel-example-generic" 
          data-slide-to="{ index }" class="{ active: index==0 }" ]

    / Wrapper for slides
    div class="carousel-inner"
      div each="{ this.items }" class="{ item: true, active: index==0 }"
        img src="{ src }" alt="{ caption }"
        div class="carousel-caption"
          h2
            | { caption }

    / Controls
    a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"
      span class="fa fa-angle-left"
    a class="right carousel-control" href="#carousel-example-generic" data-slide="next"
      span class="fa fa-angle-right"
  
  sass:
    .carousel-inner > .item
      text-align: center

    .carousel-inner > .item > img 
      display: inline

    .carousel-inner .carousel-caption h2 
      color:       rgba(0,0,0,0.6)
      font-size:   40px
      text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.6), 0px 0px 10px rgba(255, 255, 255, 0.6)

    .carousel-indicators li
      background-color: rgba(0,0,0,0.4)
      box-shadow: 0 0 5px rgba(0,0,0,0.6)
      border-color: rgba(255,255,255,0.8)
      margin-left: 6px
      margin-right: 6px

    .carousel-indicators li.active 
      border-color: rgba(255,255,255,0.8)
      background-color: rgba(255,255,255,0.8)
      margin-left: 6px
      margin-right: 6px

    img 
      opacity: 0.8

  coffee:
    @on 'update', ->
      @interval = opts.interval ? 5000
      @pause    = opts.pause    ? "hover"
      @wrap     = opts.wrap     ? true
      @keyboard = opts.keyboard ? true

      @items = for img, i in $(@root._innerHTML) when img.tagName == 'IMG'
        caption: img.alt
        src:     img.src
        index:   i

こんな感じで、かなり良いのだけれど・・・style タグに scoped を付けられないのが痛すぎる？？？

そうでもないか。sass の先頭に tag 名を書いて、他を全て & から始めれば同じことになりそう。