Ember-cli@0.2.0 component templates in the addon

Question

I am wondering what agreement should be used when creating a component inside an addon project ... If I generate a component in my addon project using ember-cli@0.2.0, a js file will be created in the project in addon / components, a template in addon / templates / components and js file in application / components. The part I don’t quite understand about is where the templates should live for these components. If my component template requires a partial, I need to put an incomplete template in the application / template directory. If it lives in the addon / templates directory, it cannot be resolved. Therefore, the question arises: is it better to place all the templates (component template and partial) in the application / template directory or leave the component template in the addon / templates / components directory and partial in the app / templates directory? The latter feels a little disorganized, and the former seems more correct only because of the behavior of the plan. Does anyone have an understanding?

Thanks in advance.

Answer 1

Ember-cli is in a difficult development, so most of the file structure is likely to change soon, but here, according to some information about the current state of the folder structure and why it is organized as it is:

The app/ folder is what is directly imported into your application. Helpers come from here, so you should have a file for each of your components in this folder. In addition, the templates will be extracted from the main application here, and therefore they will be available in such a way that the templates are usually available in the ember application ( render , partial and standard resolution).

Some people prefer to place all the code of their components in app/ , but this is a bad idea, because the addon/ folder exists not only as a separation of the code of your add-ons, but also as a way to import it using ES6 import. Therefore, while you cannot directly access components in addon/components/ , you can import them into your application as follows:

 import SomeComponent from 'some-addon/components/some-component' 

This is very useful for addon consumers if they want to expand the addon to add some features.

Templates in addon get assemblies precompiled in the tree, which makes add-ons a little more reliable (for example, if they use a different version of htmlbars, they will still be compatible with the base application). However, they are not accessible through the recognizer, so you need to import them manually in your add-on components, so the project for add-on components looks like this:

 import Ember from 'ember'; import layout from '../templates/components/some-component'; export default Ember.Component.extend({ layout: layout }); 

Styles for add-ons can be placed in addon/styles/ or app/styles/ . In addon/styles/ they are also precompiled and included in the application by default. I highly recommend including styles in app/styles because this makes them available using preprocessor imports in the base application:

 @import some-addon/main.css 

This makes them completely optional for add-on users without resorting to the app.import and config tricks (which is good because _do nested add-ons do not support app.import . Do not use it.)

NOTE. They are not automatically replaced with names, so you should put your styles in a folder to make sure that they do not contradict other styles of adding.

In short:

• Any add-on code that should not be directly accessible to the base application through helpers, initializers, etc. Must live in addon/
• All you want to be available for ES6 import must be in addon/
• Templates must be in addon/templates/ and imported manually
• Component stubs, initializers, and other files that should be included in the standard Ember build chain must be in app/
• Styles should live in app/styles/ and should be placed in a folder (e.g. app/styles/some-addon/ )
• Do not use app.import .