This addon allows you to use import-style syntax to create local bindings to a component within a template file.
In other words, it's pods + angle bracket component = goodness.
- Use pods and angle bracket components together
- More concise component invocation while making it explicit where it comes from
- No hyphens needed!
- Relative imports!
- Autocomplete imported components with Unstable Ember Language Server!
Can be used together with
ember install ember-template-component-import
Use the same kind of import syntax you are familiar with from Javascript:
The component is looked up from the given string using the normal lookup
patterns. In fact, all this addon does is rewrite that import ...
statement
into a wrapping {{#let (component 'ui/button') as |Button|}}
.
We also do a bit of path magic at build time to let you use relative imports!
We recommend using the JS style.
Editor integration currently provides auto completion of imported components.
Currently works with VSCode combined with the Unstable Ember Language Server.
Possible by using https://github.com/NullVoxPopuli/coc-ember
Angle bracket components are unreasonably delightful to use, but they can be tedious to use when nested, i.e.
<Dashboard::Setup::Form/>
, which makes you write components that are not nested. Another limitation is that it's
hard to understand where components are coming from.
This addon works around that by leveraging the component
and let
helpers
to create a local alias for that component.
A side benefit is the relative paths for imports. Normally, even with pods,
all components must be specified by their full path, i.e.
<Posts::Post::Comments::Comment::AuthorAvatar/>
rather than <./AuthorAvatar/>
(which doesn't work).
By rewriting the import syntax at build time, we can replace your relative paths with the full paths, and everyone is happy!
There is an RFC for adding framework level primitives emberjs/rfcs#454, but it hasn't been merged or worked on. Once this lands our goal is to use that API to keep the functionality that this addon provides. The goal of this addon is to get people to try it and to get hooked so we have an official solution faster!
But be warned - this addon is not official and when an official solution does exist, it might be different. So weigh the pros and cons carefully before widely adopting this addon.
This project is licensed under the MIT License.
unstable-ls: https://marketplace.visualstudio.com/items?itemName=lifeart.vscode-ember-unstable