sokra / ember-webpack-resolver

An Ember resolver for use with webpack

ember-webpack-resolver

An Ember.js resolver heavily inspired by https://github.com/stefanpenner/ember-jj-abrams-resolver but mainly for use with webpack.

Install

npm install ember-webpack-resolver --save-dev

Usage

This resolver is intended to resolve modules with a folder structure like such:

| - app/
| --- components/
| --- controllers/
| --- models/
| --- routes/
| --- templates/
| --- views/
| --- app.js
| --- router.js
| - node_modules/
| --- some-widget-ember-component
| ----- index.js
| ----- index.hbs

A very simple config will resolve just your local modules:

var App = Ember.Application.create({
  Resolver: require('ember-webpack-resolver?' + __dirname)()
});

If you're using a file extension other than .js, supply the lookup extensions such use with coffeescript:

var App = Ember.Application.create({
  Resolver: require('ember-webpack-resolver?' + __dirname)({
    extensions: ['.coffee', '.hbs'],
  })
});

Resolving Components

If you want to also resolve modules within vendor folders, a bit more configuration is required:

var App = Ember.Application.create({
  Resolver: require('ember-webpack-resolver?' + __dirname)({
    component: [{
      context: require.context('../node_modules/', true, /(.+)-ember-component\/index/),
      format: '%@-ember-component/index'
    }]
  })
});

This will look for modules within the node_modules/ folder that end with -ember-component/index.

// node_modules/some-widget-ember-component/index.js
module.exports = Ember.Component.extend({
  defaultTemplate: require('./index.hbs'),
  classNames: ['some-widget']
});

<!-- node_modules/some-widget-ember-component/index.hbs -->
<div {{bindAttr width="width" height="height"}}>SOME WIDGET</div>

You can still explicitly require your components and dynamically set the template name:

App.AnotherWidgetComponent = require('some-widget-ember-component');
Ember.TEMPLATES['components/another-widget'] = require('some-widget-ember-component/index.hbs');

Or if you want to extend another component and package it:

// node_modules/enhanced-widget-ember-component/index.js
module.exports = require('some-widget-ember-component').extend({
  classNames: ['enhanced-widget']
});

Hooray! Shareable, nested, auto-resolving Ember components!

Release History

• 0.2.0 - handle nested components, update API
• 0.1.0 - initial release

License

Copyright (c) 2013 Kyle Robinson Young
Licensed under the MIT license.