Ember.js: Angle Bracket Invocation Syntax

[rwjblue]

Summary

Now that the Angle Bracket Invocation RFC has been merged (🎉) this issue aims to track landing the functionality proposed there behind the EMBER_GLIMMER_ANGLE_BRACKET_INVOCATION feature flag.

Where possible individual items will cross link to the related section of the RFC.

Features

• [x] Static invocation of existing Ember.Component based components via angle brackets with "capital case" component naming (e.g. <FooBar></FooBar> would find app/components/foo-bar.js). Relevant RFC Section
• [x] Allowing single word component names (as long as they begin with a capital letter). Relevant RFC Section
• [x] Support for passing named arguments into the component being invoked (e.g. <FooBar @foo={{somethingSpecial}}></FooBar>).
• [x] Support for passing HTML attributes Relevant RFC Section
  
  
  
  • [x] Should add the specified attributes to an element containing ...attributes
  
  
  • [x] Should add the specified attributes to the wrapping element when tagName is not ''
  
  
  • [x] Attributes should be added _after_ those specified by the component itself (and therefore "overridable")
  
  
  • [x] class attribute should be merged with those in the specified element
  
  
• [x] Block support
  
  
  
  • [x] Block can be passed to the invoked component and yielded to.
  
  
  • [x] has-block should be false for "self closing" invocations (e.g. <FooBar />)
  
  
  • [x] has-block should be true for normal (not self closing) invocations (e.g. <FooBar></FooBar>)
  
  
• [x] Dynamic Invocations Relevant RFC Section
  
  
  
  • [x] Allow invocation of block params within scope (casing rules are not applicable)
  
  
  • [x] Allow invocations that are path lookups (e.g. <this.foo></this.foo>)
  
  
  • [x] Allow invocations that are named blocks (e.g. <@foo></@foo>)
  
  

Implementation TODO's

• [x] Update simple-html-tokenizer to support <@foo></@foo> https://github.com/tildeio/simple-html-tokenizer/pull/62 & https://github.com/glimmerjs/glimmer-vm/pull/818
• [x] Update glimmer-vm to avoid calling didCreateElement on the component's manager for _every_ usage of ...attributes https://github.com/glimmerjs/glimmer-vm/pull/820
• [x] Ensure has-block is false for self closing component invocations (e.g. <FooBar />) https://github.com/glimmerjs/glimmer-vm/pull/819
• [x] Implement support for dynamic angle bracket invocation https://github.com/glimmerjs/glimmer-vm/pull/822
• [x] Implement support for implicit ...attributes in the Ember.Component wrapper element https://github.com/glimmerjs/glimmer-vm/pull/823

[rwjblue]

Updated checklist to mark off items from #16686.

[rwjblue]

Marked has-block support completed (as of https://github.com/emberjs/ember.js/pull/16697) as well as one of the implementation TODO's.

[rwjblue]

Updated for items completed in https://github.com/emberjs/ember.js/pull/16704.

[rwjblue]

This is now enabled by default on canary, and barring any additional issues will be included in the 3.4 series of releases.