Custom Pre-Processor In Rails 3.1

Well long break,Let me guess It over 3 month since I wrote my last post. I’ve been kind of  busy lately not manage to dedicate much time to thing that I do.

Rails 3.1.0 is been in picture for a quite a while a now and major feature that been included in Rails 3.1.0 is asset pipeline and pre-processor.

For those is who aren’t aware of Rails 3.1.0 asset pipeline and pre-processor there is a very good article on rails guide and recently Ryan Bates introduce a screencast on Rails 3.1.0 asset pipeline.

I’m not here to talk about asset pipeline you can get it all if you just googled it.

So what I’m here upto then ? 🙂

Well ever since I was made aware of what asset pipeline  and pre-processor more importantly pre-processor ,it always trilled me of using a custom pre-processor .

As you all know that Rails 3.1.0.rc1 is bundle with coffee-script and sass support. In your asset folder you may find js and css file that look something like this “*.js.coffee” , “*.css.scss“. Now you can add a chain of pre-processor that just look like this “*.js.coffee.erb” , “*.css.scss.erb

The post is all about chaining your own pre-processor just as above something like “*.js.coffee.mustache

Mustache (Mustache is taken just for example here you can use your own) because I been in love with it ever since I explored it . So how to accomplish this .

Stay with me as I will show how ?

Firstly you need to be aware of Sprockets and Tilt library

First the code

config/initializers/mustache_template.rb

require "mustache"
require "tilt"

class MustacheTemplate < Tilt::Template
  def prepare; end

  def evaluate(context, locals, &block)
    @data = ::Mustache.render @data ,:mustache_variable => "World" ,:name => "Viren Negi"
  end

end

Rails.application.assets.register_preprocessor 'application/javascript', MustacheTemplate

That all it take to define a custom preprocessor Before I explain the above code let me show what exactly my preprocessed file look like .

app/assets/javascripts/user.js.coffee.mustache

# Here is the custom mustache and coffee-script code

a =  "Hello {{ mustache_variable }} from {{ name }}";

if a
  alert a
else
  alert "Sorry LOL"
  alert "The co-processor is not working"

well as you would have guess I received and alert prompt on UI stating “Hello World from Viren Negi”

Well that quite neat 🙂 .

Let me describe what happening under the hood.

Rails.application.assets is Sprocket::Environment instance as you would guess register_preprocessor is Sprocket method to register the preproccessor .

a closer look at the Sprocket ” register_preprocessor “ method

sprockets/lib/sprockets/processing.rb

 def register_preprocessor(mime_type, klass, &block)
      expire_index!

      if block_given?
        name  = klass.to_s
        klass = Class.new(Processor) do
          @name      = name
          @processor = block
        end
      end

      @preprocessors[mime_type].push(klass)
    end

As you guess till now that the method except 2 argument and block (if given).

For all those dump guys like me who still haven’t figure it out.
What it basically does is “it push the class to mime_type” in our case (mime_type = “application/js” and klass = MustacheTemplate)

what it internally does when processing the template is some Tilt magic.

The ruby code


def prepare ;   end

def evaluate(context,locals,&block)

...

...

end

defined above are basically the Tilt method which is overridden in MustacheTemplate to process the template .

That it that how you add your own custom pre-processor .

Hope that it help you in same way or other.

Thanks

Viren Negi

1 comments On Custom Pre-Processor In Rails 3.1

  • Custom Pre-Processor’s are just the beginning for the Asset’s Pipeline. My work on the jsdebug-rails gem used pre-processing to manipulating the javascript for changing console messages (adding line numbers where the debug message is called for example.)

    Nice write up, allow your imaginations to run wild with the possibilities.

Leave a reply:

Your email address will not be published.

Site Footer