Put local components / helpers where they belong
ember install ember-local-resolver
Rather than clutter your global components and helpers directories with components/helpers that are only used in a specific case, wouldn't it be nice to locate them alongside the consuming template?
"That would great"
You've come to the right place!
This addon makes the most sense in a pods structure (although classic is supported).
The standard Ember resolver looks up components and helpers from root directories
app/components
app/helpers
This works fine most of the time, but for complex apps you'll often want to create a number of components / helpers that are really only relevant to a particular route.
Unfortunately with the current resolver those components / helpers either have to live in the root
directories or you need to provide a nested path with /
that both looks ugly and won't be supported
when angle-bracket components land.
The module unification RFC solves this issue using the concept of private collections
which allows -components
/ -helpers
in a feature pod to provide locally scoped private modules.
This addon enables these capabilities today, so you can use a structure like:
app/user-account/route.js
app/user-account/controller.js
app/user-account/template.hbs
app/user-account/-components/user-avatar/component.js
app/user-account/-components/user-avatar/template.hbs
app/user-account/-helpers/generate-moniker/helper.js
And use them within your user-account
template as
{{user-avatar}}
{{generate-moniker}}
That's it, now get out there and go have some fun!
In the event that a local and global component / helper share a name, the local version wins when in the local template.
You can also reference the global component / helper from within the local component's template, but please...for the sake of everyone's sanity...just rename one of them.
Unfortunately, we don't have a fancy generator to make new local components / helpers (cough...PRs welcome...)
so the easiest way to handle this is to just move a generated directory into your local -components
/
-helpers
path.
Thanks to @rwjblue for the initial gist for this implementation.
git clone [email protected]:ciena-frost/ember-local-resolver.git
cd ember-local-resolver
npm install && bower install
A dummy application for development is available under ember-local-resolver/tests/dummy
.
To run the server run ember server
(or npm start
) from the root of the repository and
visit the app at http://localhost:4200.
Run npm test
from the root of the project to run linting checks as well as execute the test suite
and output code coverage.