From d7c490b20534848a177abd7c91201b5c6ebdc2bb Mon Sep 17 00:00:00 2001
From: Godfrey Chan <godfreykfc@gmail.com>
Date: Fri, 15 Mar 2019 13:50:43 -0700
Subject: [PATCH 1/2] =?UTF-8?q?[FEATURE=20angle-bracket-nested-lookup]=20e?=
 =?UTF-8?q?nable=20=F0=9F=91=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/@ember/canary-features/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/@ember/canary-features/index.ts b/packages/@ember/canary-features/index.ts
index 94395a45289..cef6a5609b8 100644
--- a/packages/@ember/canary-features/index.ts
+++ b/packages/@ember/canary-features/index.ts
@@ -17,7 +17,7 @@ export const DEFAULT_FEATURES = {
   EMBER_IMPROVED_INSTRUMENTATION: null,
   EMBER_MODULE_UNIFICATION: null,
   EMBER_METAL_TRACKED_PROPERTIES: null,
-  EMBER_GLIMMER_ANGLE_BRACKET_NESTED_LOOKUP: null,
+  EMBER_GLIMMER_ANGLE_BRACKET_NESTED_LOOKUP: true,
   EMBER_ROUTING_BUILD_ROUTEINFO_METADATA: true,
   EMBER_NATIVE_DECORATOR_SUPPORT: null,
 };

From cf0b9725c5aee0df46e946c86e15b8bfe4e6324f Mon Sep 17 00:00:00 2001
From: Godfrey Chan <godfreykfc@gmail.com>
Date: Sat, 16 Mar 2019 15:18:41 -0700
Subject: [PATCH 2/2] [WIP] API docs for nested angle invocation

---
 .../-internals/glimmer/lib/component.ts       | 57 +++++++++++++++----
 1 file changed, 47 insertions(+), 10 deletions(-)

diff --git a/packages/@ember/-internals/glimmer/lib/component.ts b/packages/@ember/-internals/glimmer/lib/component.ts
index d661970ff29..e96a45ccf9a 100644
--- a/packages/@ember/-internals/glimmer/lib/component.ts
+++ b/packages/@ember/-internals/glimmer/lib/component.ts
@@ -38,24 +38,61 @@ export const BOUNDS = symbol('BOUNDS');
 
   The easiest way to create a `Component` is via
   a template. If you name a template
-  `app/templates/components/my-foo.hbs`, you will be able to use
-  `<MyFoo />` or `{{my-foo}}` in other templates, which will make
-  an instance of the isolated component.
+  `app/templates/components/person-profile.hbs`:
 
-  ```app/templates/components/my-foo.hbs
+  ```app/templates/components/person-profile.hbs
+  <h1>{{@person.name}}</h1>
+  <img src={{@person.avatar}}>
+  <p class='signature'>{{@person.signature}}</p>
+  ```
+
+  You will be able to use `<PersonProfile />` to
+  refer to this component elsewhere in your
+  application:
+
+  ```app/templates/application.hbs
   <PersonProfile @person={{this.currentUser}} />
   ```
 
-  or
+  Note that component names are capitalized here
+  in order to distinguish them from regular HTML
+  elements.
+
+  While the angle bracket is generally preferred,
+  it is also possible to invoke the same component
+  with the `{{person-profile}}` syntax:
 
-  ```app/templates/components/my-foo.hbs
+  ```app/templates/application.hbs
   {{person-profile person=this.currentUser}}
   ```
 
-  ```app/templates/components/person-profile.hbs
-  <h1>{{person.title}}</h1>
-  <img src={{person.avatar}}>
-  <p class='signature'>{{person.signature}}</p>
+  Not that with this syntax, component names are
+  dashified and arguments are passed without the `@`
+  sign.
+
+  In both cases, it will render the content of the
+  component template we created above. The end result
+  will be something like this:
+
+  ```hbs
+  <h1>Tomster</h1>
+  <img src="https://emberjs.com/tomster.jpg">
+  <p class='signature'>Out of office this week</p>
+  ```
+
+  Components can be nested inside sub-folders for
+  logical groupping. For example, if we placed our
+  template in `app/templates/components/person/short-profile.hbs`,
+  we can invoke it as `<Person::ShortProfile />`:
+
+  ```app/templates/application.hbs
+  <Person::ShortProfile @person={{this.currentUser}} />
+  ```
+
+  Or equivalently, `{{person/short-profile}}`:
+
+  ```app/templates/application.hbs
+  {{person/short-profile person=this.currentUser}}
   ```
 
   You can use `yield` inside a template to