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

• 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
• Allowing single word component names (as long as they begin with a capital letter). Relevant RFC Section
• Support for passing named arguments into the component being invoked (e.g. <FooBar @foo={{somethingSpecial}}></FooBar>).
• Support for passing HTML attributes Relevant RFC Section
  • Should add the specified attributes to an element containing ...attributes
  • Should add the specified attributes to the wrapping element when tagName is not ''
  • Attributes should be added after those specified by the component itself (and therefore "overridable")
  • class attribute should be merged with those in the specified element
• Block support
  • Block can be passed to the invoked component and yielded to.
  • has-block should be false for "self closing" invocations (e.g. <FooBar />)
  • has-block should be true for normal (not self closing) invocations (e.g. <FooBar></FooBar>)
• Dynamic Invocations Relevant RFC Section
  • Allow invocation of block params within scope (casing rules are not applicable)
  • Allow invocations that are path lookups (e.g. <this.foo></this.foo>)
  • Allow invocations that are named blocks (e.g. <@foo></@foo>)

Implementation TODO's

• Update simple-html-tokenizer to support <@foo></@foo> Allow @ to be the first char in a tag name. tildeio/simple-html-tokenizer#62 & Update simple-html-tokenizer to ^0.5.3. glimmerjs/glimmer-vm#818
• Update glimmer-vm to avoid calling didCreateElement on the component's manager for every usage of ...attributes Decouple didCreateElement from ...attributes. glimmerjs/glimmer-vm#820
• Ensure has-block is false for self closing component invocations (e.g. <FooBar />) Ensure has-block is false for <Foo />. glimmerjs/glimmer-vm#819
• Implement support for dynamic angle bracket invocation Implement dynamic angle bracket invocation. glimmerjs/glimmer-vm#822
• Implement support for implicit ...attributes in the Ember.Component wrapper element Add implicit ...attributes to wrapped layouts. glimmerjs/glimmer-vm#823

[rwjblue]

Updated checklist to mark off items from #16686.

[rwjblue]

Marked has-block support completed (as of #16697) as well as one of the implementation TODO's.

[rwjblue]

Updated for items completed in #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.