Easy way to precompile Emberjs Handlebar templates with nodejs?

Question

I\'m enjoying emberjs a lot and would like to take the next step in a couple of my small, mobile apps and precompile my Ember/Handlebars templates as part of my build process.

Answer 1

Found a good enough solution to my problem that seems easy enough to maintain that I'll consider my problem solved.

Here's how I solved things:

• Grab the minimal amount of code I need to precompile the ember templates.
  • Copy the contents of the ember handlebars into a file. This file is located at the emberjs repo: https://github.com/emberjs/ember.js/blob/master/packages/handlebars/lib/main.js
  • Within the code, find the one instance of window.Handlebars = Handlebars; and remove it.
  • Append the contents of the Ember template compiler and handlebar overrides. The file is located at the emberjs repo: https://github.com/emberjs/ember.js/blob/master/packages/ember-handlebars/lib/ext.js
  • Find all instances of Ember.create and change to Object.create.
• Outline of the simple precompile procedure:
  • Load up the code with a var Ember = require('./my_ember_precompiler').Ember.
  • Get your templates as strings and compile them with var templateString = Ember.Handlebars.precompile(str).toString().
  • This will be different from app to app, but Ember seems to require registration of precompiled templates. After loading, for every created template, we need to register our templates. Basically wrap templateString in a call to Handlebars.template() and make sure this wrapped function is added to the Ember.TEMPLATES object.

The above is painless when it's automated in a script.

Answer 2

I've published a version of ember-precompiler with a similar interface to the handlebars command line utility. You can install it from NPM:

npm install -g ember-precompile

and then run it as:

ember-precompile template... [-f OUTPUT_FILE]

It does essentially what you describe (and what the gist versions do too): mock out the missing components needed to run Ember and Handlebars, compile the templates and add them to Ember.TEMPLATES.

Answer 3

Look at the code for the official ember-rails gem at https://github.com/emberjs/ember-rails

While it's not a node.js project, it does show you how to precompile the templates using the Rails 3.1+ asset pipeline, and it includes all the necessary Javascript code that you would need to do it in Node without having to hack together a solution that you'd have to maintain on your own.

More specifically, look at vendor/assets/javascripts/ember-precompiler.js and lib/ember-rails/hjs_template.rb

I'm far from an expert on Node (obviously, Rails is more my thing).. but I think those two files should point you in the right direction. Basically, you're going to want to concatenate ember-precompiler.js (which acts as a "shim" for lack of a better word) with ember.js and then call EmberRails.precompile to compile your templates.

Answer 4

The following gist contains a nodejs build script that will precompile all .handlebars files in a given folder:

https://gist.github.com/1622236

Answer 5

I've written a grunt plugin called grunt-ember-handlebars that does exactly this. It pretty much mimics Garth's script, with one important difference:

It uses lib/headless-ember.js and lib/ember.js, which are maintained (at least for now) by ember.js to precompile default templates. If you don't want to use grunt, you can extract the relevant code from the precompile_handlebars helper in tasks/ember-handlebars.js.

Answer 6

I wrote an official precompiler npm module for anyone else who might be wanting to do this w/ a recent version of ember.js

https://npmjs.org/package/ember-template-compiler

It's simple to install and use (example below)

npm install ember-template-compiler

var compiler = require('ember-template-compiler');
var template = fs.readFileSync('foo.handlebars').toString();
var input = compiler.precompile(template).toString();
var output = "Ember.TEMPLATES['foo'] = Ember.Handlebars.template(" + input + ");";