ember-loader v0.0.20
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 inROUTERS
fromrouter.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 storesmodule_directory/{{moduleName}}
to be considered for inclusion later.'context'
: Looks at src of the target so that things likecomponents/list-item/index.js
orlist-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 store
ing 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
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago