Allow some Javascript preprocessing

[Jan Thomä]

Just as there is preprocessing for SCSS it would be nice if there was built-in preprocessing for JavaScript dialects like TypeScript, CoffeeScript or ES6.

[Jason Porter]

If there's a tilt extension for the preprocessor (and you have the gems
installed) it should just work. Make sure you have the file extension right
for the preprocessor.

On Wednesday, September 16, 2015, Jan Thomä [e-mail]
wrote:

Just as there is preprocessing for SCSS it would be nice if there was
built-in preprocessing for JavaScript dialects like TypeScript,
CoffeeScript or ES6.

—
Reply to this email directly or view it on GitHub
#484.

Sent from Gmail Mobile

[Jan Thomä]

Hmm there seems to be no tilt extension for TypeScript, guess I am out of luck then.

[Jason Porter]

You could write your own tilt handler for it, then register it in an
extension. Shouldn't be terribly difficult. I don't add any gems that look
like they do the work for typescript like they do coffescript though.

On Wednesday, September 23, 2015, Jan Thomä [e-mail]
wrote:

Hmm there seems to be no tilt extension for TypeScript, guess I am out of
luck then.

—
Reply to this email directly or view it on GitHub
#484 (comment)
.

Sent from Gmail Mobile

[Jan Thomä]

Okay, I will give it a shot. Thanks.

[Jan Thomä]

So I added a tilt handler for typescript (which was easy)

# in pipeline.rb
require 'typescript'

::Tilt::register ::Tilt::TypeScriptTemplate, 'ts'

#typescript.rb

require 'tilt/template'
require 'typescript-node'

module Tilt
  class TypeScriptTemplate < Template
    def prepare
      options[:filename] ||= file
    end

    def evaluate(scope, locals, &block)
      @output ||= TypeScript::Node.compile(data, '--target', 'ES5')
    end
  end
end

Seems to work fine, when I name a typescript file like "foo.js.ts", it's getting compiled to "foo.js.html" instead of just "foo.js". How can I make awestruct use the correct extension?

[Jason Porter]

Take a look at https://github.com/awestruct/awestruct/blob/master/lib/awestruct/handlers/base_tilt_handler.rb#L38-L74. You'll see that using a double filename is really just a hack (that honestly probably isn't needed any longer thanks to tilt) for html templates. What you'll need to do is in your Tilt Template create a default_mime_type method which will return 'application/javascript'.

This is some great work by the way!

[Jan Thomä]

Ok added this and it now works. Here's the final code of typescript.rb, just for reference:

require 'tilt/template'
require 'typescript-node'

module Tilt
  class TypeScriptTemplate < Template
    self.default_mime_type = 'application/javascript'

    def prepare
      options[:filename] ||= file
    end

    def evaluate(scope, locals, &block)
      @output ||= TypeScript::Node.compile(data, '--target', 'ES5')
    end
  end
end

You need to add

gem 'typescript-node'

to your Gemfile for this to work.

[Jason Porter]

excellent work! Are we okay to close? This would actually make a very good post to the site on how to add formats.

[Jan Thomä]

Closing it now. Feel free to add it to a post on the site :)