Emberate


Note: You probably want to use ember-cli, which has browserify support with the ember-browserify module.

Emberate is used to create a commonjs require hierarchy for your Ember.js project structure, mainly to be used for building with browserify.

For example, given the following structure:

app.js
router.js
controllers/
  |_ user.js
  |_ user/
    |_ new.js
views/
  |_ profile.js
mixins/
  |_ draggable.js
models/
pods/
  |_ application
  |_ index
    |_ template.hbs
  |_ post/
    |_ route.js
    |_ index/
      |_ template.hbs
      |_ controller.js
    |_ edit/
      |_ template.hbs
      |_ route.js

Emberate can be used to generate a file that can be used as the entry point for browserify.

Usage

Install required packages:

npm install --save-dev emberate hbsfy handlebars ember-template-compiler browserify

Note: hbsfy can only be used for versions >= 2.1.0 and if using Handlebars >= 2, then the ember-template-compiler needs to be version 1.9.0-alpha or greater.

Basic Example:

var emberate = require('emberate');

emberate('./client', { outPath: './client/.index.js' }, function () {
  // './client/.index.js' now exists.. browserify it.
});

From here you can run browserify:

browserify -t [ hbsfy -p ember-template-compiler -c Ember.Handlebars ] ./client/.index.js --outfile ./dist/scripts/application.js`

This is a basic example, for something more useful have a look at the gulp and grunt examples, or the getting started with emberate scaffold repo.

Available Options:

Emberate exports a function with the following signature: emberate(path, options, callback).

• path - The path to the root of your client directory.
• options - optional, options hash with the available options listed below.
  • appName - 'App' by default, used as your application global.
  • templatePath - lib/defaultTemplate.hbs (in emberate project) by default.
  • outPath - where to save the generated file (can only be used if specifying a done callaback after options).
  • podModulePrefix - Name of the directory containing pod modules. pods by default.
• callback - optional, returns once done writing, if used outPath option above.

The callback is only fired if you specify outPath in the options hash, e.g.

emberate('./client', { outPath: './client/.index.js' }, function () {
  // './client/.index.js' now exists
});

Otherwise it's assumed that you are streaming and will create your own output file, etc..

emberate('./client')
  .pipe(fs.createWriteStream('./client/.index.js'));

Folder Structure

• app.js
• router.js
• initializers/
• transforms/
• mixins/
• adapters/
• serializers/
• models/
• routes/
• controllers/
• views/
• components/
• templates/
• pods/

CLI

For ease of use with npm scripts and for quick testing.

Usage: emberate [options]

  Options:

    -h, --help                   output usage information
    -V, --version                output the version number
    -o, --output-path [path]     Output path of generated file, default: './client/.index.js'
    -i, --input-directory [dir]  Directory to start crawling file tree, default: './client'
    -n, --app-name [app-name]    App Name, where your app resides globally, default 'App'

Via Grunt

// creates a file with requires for App.* for ember
grunt.registerTask('emberate', function () {
  var done = this.async();
  var emberate = require('emberate');

  emberate('./client', { outPath: './tmp/.index.js' }, function () {
    done();
  });
});

Via Gulp

// creates a file with requires for App.* for ember
gulp.task('emberate', function () {
  var emberate = require('emberate');
  var source = require('vinyl-source-stream');

  return emberate('./client')
    .pipe(source('.index.js'))
    .pipe(gulp.dest('./client'));
});

Acknowledgment

The concept and some of the code comes from Ryan Florence's loom-ember. Also lots of the work regarding streams and performance was done by Calvin Metcalf.