How to import addon into its dummy app in Ember? - ember.js

I am new to Ember and have started to build an addon. Currently, I want to build the addon and implement it in an application inside its dummy application (path: tests/dummy/app).
My addon has a component which I want available in the dummy project.
How can we include the addon inside the dummy project ?
(I am using ember version: 1.13.0)

In your addon, if you define addon/components/my-component.js and you re-export it in app/components/my-component.js, then you should be able to use it normally in the dummy app like {{my-component}}.
Note that the ember-cli component generator handles the file locations for you. e.g running $ ember g component my-component would yield the files I mentioned above.
Also, you addon project should also be generated using ember-cli using $ ember addon addon-name.

Related

How to use ember sass in ember addon and correctly implement it into ember project

The following problem needs to be solved: I try to create a component within an ember addon, that's using sass. Within my addon I don't want to compile that scss files, that should be done within my project using ember-cli-sass and ember-css-modules-sass. The component I'm creating in my addon is also using sass modules, but I didn't install the ember packages for this, because I do that in my project.
I run into the problem, that when I try to serve my ember application from my project directory, I get the error that within my addon an imported scss file is unreadable or not there.
What am I doing wrong?
Thank you very much!
Add the Sass files to /app/styles/, not /addon/styles. This way they will be merged with the host app.

Packaging an ember addon in app.js instead of vendor.js

Is there a way to bundle an ember addon in app.js instead of vendor.js. Addons seem to get packaged into vendor.js by default with no hooks to customize this. In this case both the app and the addon is authored by the same person.

How should I import Bower dependencies from an Ember-cli addon into the consuming application?

I am successfully importing a jQuery plugin via Bower to be used in a component in an Ember-cli addon. However, this only works is because I defined a Bower dependency on this plugin in both the addon and the consuming application.
This seems like I'm doing it wrong. Why should the consuming application have to declare a dependency on a resource that should be provided with the addon?
The crux of the matter seems to be the app context when building. I can omit the Bower dependency in the consuming application if I use the following import statement in the addon's index.js file:
app.import('node_modules/my-ember-cli-addon/bower_components/jquery.stickyHooters/dist/jquery.stickyHooters.min.js');
... but this breaks when I build the addon as a stand-alone application. In that case, this path is required:
app.import('bower_components/jquery.stickyHooters/dist/jquery.stickyHooters.min.js');
How this is intended to work?
Declaring the Bower dependency in two places seems counter-intuitive
I don't know how detect the app context in the index.js of the addon
Checkout ember-cli homepage on default blueprints. It describes how you can import a bower component package upon installing your addon.

Component exposed in ember addon is not recognised in ember app

I have an addon that records integration tests for ember:
https://github.com/QuantumInformation/ember-cli-test-recorder
However I find that when I import it into an ember cli project via npm and then use the component it exposes like so in appplication.hbs:
<h2 id="title">Welcome to Ember.js</h2>
{{outlet}}
{{test-recorder currentRouteName=currentRouteName}}
I get the following at runtime:
`Uncaught Error: Assertion Failed: A helper named 'test-recorder' could not be found
Note that the component works fine in the dummy app and this addon used to work in version 1.10 of ember.
Using ember cli 0.2.5 for both addon and ember project in this case
Running ember install ember-cli-test-recorder solved this for me.
For some reason just running npm install ember-cli-test-recorder wasn't enough.

Exclude files while using Ember-CLI testem

I am trying to run my tests using Ember-CLI - Testem.
Ember-CLI uses tests/index.html and not the usual testem.json config for testing.
Is there any way I can exclude certain files from being built into app.js?
Usecase : I have some js files where I inject some dependencies. These dependencies are different during the testing environment. I would like to ignore these files and inject the dependencies from my test-injectors.
I'm answering in the context of an ember application using ember-cli 1.13.8 and ember 2.1.
ember-cli does use testem.json unless you pass another test configuration file via ember test -c path/to/testem.json. Though, not all options from testem.json are integrated into ember-cli's test process.
To exclude trees, checkout:
ember-cli exclude a directory beneath "tests" from being watched by "ember serve"
For ignoring specific files in tests, you can rename files so that they do not match the pattern embedded into ember-cli-test-loader:
https://github.com/ember-cli/ember-cli-test-loader/blob/master/test-loader.js#L38-L40