This addon provides a polyfill for angle bracket invocation syntax as described in RFC 311 and RFC 457. It's the same components you know and love, no longer surrounded by mustaches. \o/
ember install ember-angle-bracket-invocation-polyfill
You will additionally need to ensure ember-cli-htmlbars-inline-precompile is at least version 1.0.3.
The best usage guide are the RFCs themselves (emberjs/rfcs#311 emberjs/rfcs#457), but here are a few examples of "before"/"after" to whet your appetite:
Before:
{{site-header user=this.user class=(if this.user.isAdmin "admin")}}
{{#super-select selected=this.user.country as |s|}}
{{#each this.availableCountries as |country|}}
{{#s.option value=country}}{{country.name}}{{/s.option}}
{{/each}}
{{/super-select}}
After:
<SiteHeader @user={{this.user}} class={{if this.user.isAdmin "admin"}} />
<SuperSelect @selected={{this.user.country}} as |s|>
{{#each this.availableCountries as |country|}}
<s.option @value={{country}}>{{country.name}}</s.option>
{{/each}}
</SuperSelect>
<FooBar></FooBar>
<FooBar />
<some.thing></some.thing>
{{#with (component 'foo-bar') as |Foo|}}
<Foo></Foo>
{{/with}}
@
prefix<FooBar @title={{whateverHere}}></FooBar>
@
prefix<FooBar data-test-foo-bar></FooBar>
has-block
inside the invoked component to determine if a block was provided<FooBar /> {{! checking `has-block` inside would be `false`}}
<FooBar></FooBar> {{! checking `has-block` inside would be `true`}}
<FooBar as |qux|>{{qux}}</FooBar>
...attributes
into another angle bracket invocation<FooBar ...attributes>
...attributes
into a non-component element<div ...attributes></div>
...attributes
into tagless components<Title />
<Foo::Bar />
Any addons wanting to use angle bracket components (in either addon/ or addon-test-support/) need to install ember-angle-bracket-invocation-polyfill
as a dependency.
There are no known limitations, all features described in the RFC are polyfilled.
git clone <repository-url>
cd ember-angle-bracket-invocation-polyfill
yarn install
yarn lint:js
yarn lint:js --fix
ember test
– Runs the test suite on the current Ember versionember test --server
– Runs the test suite in "watch mode"ember try:each
– Runs the test suite against multiple Ember versionsember serve
For more information on using ember-cli, visit https://ember-cli.com/.
This project is licensed under the MIT License.