How can I inline a Component's layout in an AddOn?

Ember CLI
1

I’m creating a library of components that will have very simple layouts. For example:

export default Ember.Component.extend({
  layout: Ember.HTMLBars.compile('{{row.id}}')
});

The problem is, this will fail with the error:

Cannot call `compile` without the template compiler loaded. Please load `ember-template-compiler.js` prior to calling `compile`.

unless I import the template compiler in ember-cli-build.js of the consuming application:

app.import(app.bowerDirectory + '/ember/ember-template-compiler.js');

Is there anyway I can import the template compiler in the AddOn so that I don’t add this dependency in the consuming application?

Thanks!

2

Sounds like a very bad idea. The template compiler is almost 700kB, that’s probably 10 times the size of your addon.
Why don’t you just compile your addon’s templates in your build process?

3

Why don’t you just compile your addon’s templates in your build process?

sounds like a good idea. I’m not quite there yet, however. I’m still developing the addon and using npm link to pull it into the test project. So, I guess I can import the compiler into the test project and then make sure the templates get built when I’m ready to release the addon.

Thanks!

4

Why not just use the htmlbars-inline-compiler? It comes standard in newly generated addon, but I think you need to move it from devDependencies to dependencies

5

Yup, this is exactly what I needed:

import Ember from 'ember';
import hbs from 'htmlbars-inline-precompile';

let TableDataComponent = Ember.Component.extend(
  {
    tagName: 'td',
    layout: hbs('{{get row propertyName}}')
  }
);

export default TableDataComponent;

Thanks!