Ember Loader

Enhance a modules object with contents of a folder following Ember naming patterns.

A project with the following structure:

// index.js
// Available to overwrite automatically included options but required to exist
// even if empty.

// src/router.js
module.exports = function() {
  this.route('index');
};

// src/index/controller.js
module.exports = Ember.Controller.extend({
  name: 'world'
});

// src/index/template.hbs
Hello {{name}}!

will return an object like:

module.exports = {
  "IndexController": require('./src/controllers/index'),
  "TEMPLATES": {
    "index": require('./src/templates/index.hbs')
  },
  "ROUTERS": [
    function() {
      this.route('index');
    }
  ]
};

which can become an application the application query parameter:

var Application = require('ember-loader?application!./index');
Application.create();

Examples

Examples can be found in ember-loader-examples.

Use

Make sure in your webpack configuration, to have ember-templates-loader, or another loader, load ember handlebar templates and similar for your stylesheet format of choice.

// Example webpack configuration.
module.exports = {
  context: __dirname,
  entry: __dirname + '/main.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.hbs$/, loader: 'ember-templates-loader' },
      { test: /\.css$/, loader: 'style-loader!css-loader' },
    ]
  },
  resolve: {
    modulesDirectories: ['./bower_components', './node_modules'],
    alias: {
      ember: 'ember/ember',
      handlebars: 'handlebars/handlebars',
      jquery: 'jquery/dist/jquery'
    }
  }
};

Query Parameters

application

Normally ember-loader returns vanilla JS objects since they are easy to operate on. ?application returns an Ember.Application from the object normally returned. Templates and routers are connected to the application through default initializers that can be overriden.

• ember-loader-routers: Calls the Application instance's Router.map on each function defined in ROUTERS from router.js files.
• ember-loader-templates: Sets Ember.TEMPLATES to the TEMPLATES object. Overriding with an empty initializer and adding a custom Resolver, it could resolve off the Application's Namespace instead of Ember.TEMPLATES.

src

The default is 'src'. Instructs ember-loader where in relation to the target file for manual overrides where to look for files to automatically include.

optionKey

The default is 'ember'. Instructs ember-loader where to find values for Configuration.

depsLookup

The default is ['module', 'context']. How ember-loader looks for files to include. Currently supports two values, overriding depsLookup lets you disable one or both of the methods.

• 'module': Looks in webpack's resolve.modulesDirectories for the target and stores module_directory/{{moduleName}} to be considered for inclusion later.
• 'context': Looks at src of the target so that things like components/list-item/index.js or list-item-component.js can be considered later.

ignoreOverrides

If truthy ember-loader doesn't consider the target overrides file. The file is still required for webpack but any values will be skipped. This can be useful if an external module represents instead of a collection of Ember classes, a specific class, like a Component.

Configuration

ember-loader takes options from the webpack config at emberOptions. The following options are available.

typeOrder

typeOrder is an array of types and the order ember-loader considers them in when deciding if to automatically fill with a found file.

If you set typeOrder you need include all types you want ember-loader to consider, any defaults left out of the array are excluded.

{
  ember: {
    typeOrder: [
      'component',
      'model',
      'template',
      'initializer',
      'router',
      'controller',
      'route',
      'view'
    ]
  }
}

types

types defines how to consider a file for inclusion. If a type is defined in typeOrder but not defined in types there the default algorithm is used. To define some changes to a default type, such as templates, you must define any non-generated values that you want to keep. Templates as an example define a store and extend function so if you wanted to overwrite store and keep extend you will need to have an extend key with a value of template.

{
  ember: {
    types: {
      template: {
        store: function(module, params) {
          // Do something other than the normal templates store.
        },
        // Define extend as the custom one for template to keep it.
        extend: 'template'
      }
    }
  }
}

groupName

groupName is either a string or an array of strings. groupName is used in the default store implementation. If the first part of a file up to a separator (a hyphen, underscore, or slash) matches the value of groupName or a value in groupName, store will use that file. groupName by default generates a name from typeOrder suffixed with a 's' to cheaply try to pluralize the name.

suffixName

suffixName is either a string or an array of strings. suffixName is used in the default store implementation. If the last part of a file after a separator (a hyphen, underscore, or slash) matches the value of suffixName or a value in suffixName, store will use that file. suffixName by default generates a name from typeOrder.

store

store is a string or a function. As a string it may refer to an existing defined default type and use its custom store function. As a function it takes two arguments module and params. params is a object with two members name and fullpath. name is technically a relative path from the root of where ember-loader is auto filling from. fullpath is the full system filepath. The default store considers name against groupName and suffixName and title cases the file name storing it on module with fullpath as the value. The extend step generates an object in javascript that requires the fullpath, letting the webpack configuration apply auto loaders to the fullpath such as the ember-templates-loader.

The following defaults have custom store functions:

• components
• models
• initializers
• templates
• routers

extend

extend is a string or a function. As a string it may refer to an existing defined default type and use its custom store function. As a function it takes three arguments merged, auto and manual. merged is the output object. auto is the object created through finding files and storeing them. manual is the object defined in the base file.

extend is written to a constructed file that is included in the webpacked file. As such it can't make references outside of its function. You could require files, but that require statement needs to be inside the function.

extend by default does nothing. The "extend" step first merges the base auto and manual objects. The extend hook is used extend sub objects like INITIALIZERS, TEMPLATES, and ROUTERS.

The following defaults have custom extend functions:

• initializers
• templates
• routers