Convert to angle bracket notation in version 3.7 #357

cah-danmonroe · 2019-01-10T13:39:05Z

Here is the base of the angle bracket notation conversion. There are a few things that will need addressed:

Need a new image for /images/ember-core-concepts/ember-core-concepts.png to convert

tutorial/simple-component and components/defining-a-component :
Update: "A dash is required in every component name to avoid conflicting with a possible HTML element, so rental-listing is acceptable but rental isn't."

Are these correct?

{{#each this.model as |post|}}
  <BlogPost @post.title @post.body/>
{{/each}}

<MyComponent @people={{array
    'Tom Dade'
    'Yehuda Katz'
    this.myOtherPerson}}
 />

theroncross · 2019-01-11T15:47:43Z

Most of the other examples I've seen included the xhtml space before closing (...@post.body />). Is that a thing we care to care about?

jenweber · 2019-01-12T01:09:28Z

I'm going to try converting the Super Rentals app because I need to learn how to do this. Will PR it and @ @DanMonroe for review

jenweber · 2019-01-12T01:09:50Z

P.S. you are the real MVP for tackling this! Thank you!

jenweber · 2019-01-12T01:50:45Z

Super Rentals conversion tracked in ember-learn/super-rentals#114

guides/v3.7.0/tutorial/autocomplete-component.md

jenweber · 2019-01-12T02:44:01Z

<MyComponent @people={{array
    'Tom Dade'
    'Yehuda Katz'
    this.myOtherPerson}}
 />

To answer your question, that is correct! I tested it.

jenweber · 2019-01-12T02:51:26Z

{{#each this.model as |post|}}
  <BlogPost @post.title @post.body/>
{{/each}}

From the RFC:

Positional arguments ({{foo-bar "first" "second"}}) are not supported.

I tested this and found that the statement is accurate. We should show regular components for the positional params example and explain that you can't use Angle Brackets, and recommend a refactor away from positional params

guides/v3.7.0/components/defining-a-component.md

jenweber · 2019-01-22T13:07:07Z

Thanks everyone!!! I will review tonight and get at least 1 more person to look it over.

Next steps are to fix the test failures. We can also add in a few call outs linking to earlier guides versions, but that can come after a merge to master

mansona

2 Minor comments that I'm pretty sure don't affect the functionality of the examples 👍 I'm happy for them to make it through and we can decide to fix them later if we feel like it 😂

mansona · 2019-01-22T14:03:40Z

guides/v3.7.0/components/defining-a-component.md

+```handlebars {data-filename=app/templates/index.hbs}
+{{#each this.model as |post|}}
+  {{!-- either foo-component or bar-component --}}
+  {{#let (component (concat this.componentName)) as |Post|}}


Is this concat left over from something? shouldn't it be:

Suggested change

{{#let (component (concat this.componentName)) as |Post|}}

{{#let (component this.componentName) as |Post|}}

mansona · 2019-01-22T14:06:40Z

guides/v3.7.0/testing/index.md

@@ -92,7 +92,7 @@ module('Component | counter', function(hooks) {
  test('it should count clicks', async function(assert) {
    this.set('value', 0);

-    await render(hbs`{{x-counter value=value onUpdate=( … )}}`);
+    await render(hbs`<XCounter @value={{this.value}} @onUpdate={{( … )}} />`);


Do we still want to use x-counter here? considering we don't need it any more? i.e. we can have single word components like <Counter>

This has already been converted. Are you still seeing it?

I'm still seeing XCounter

I removed the X

mansona · 2019-01-22T14:11:30Z

Regarding the CI Failures, I have marked Travis as required as it's the only thing that needs to be fixed before we merge this 👍

The Netlify stuff can be ignored for now as it's related to #365 👍

jenweber · 2019-01-23T03:20:59Z

guides/v3.7.0/templates/angle-bracket-syntax.md

@@ -0,0 +1,72 @@
+The [Angle Bracket Syntax](https://github.com/emberjs/rfcs/blob/master/text/0311-angle-bracket-invocation.md) is an alternative style of invoking components in templates. The difference between the Angle Bracket Syntax and the Classic Invocation Syntax is purely syntactical and does not affect the semantics of invoking a component.


@chrisrng Thanks for writing this! I would like to maybe put this info in a "conversion guide" type section that is outside of templates. Maybe something like reference/syntax-conversion-guide that could be multi-purpose to other types of syntax. URLs are forever. Since we are teaching angle brackets as the default, we want to avoid a URL structure that makes them seem "new" if that makes any sense. What do you think about moving it under a different topic? Then in places where we use Angle Bracket syntax, we link to this explanation.

Sounds good, makes sense!
I've opened a PR to move them there:
cah-danmonroe#2

jenweber · 2019-01-23T03:25:43Z

This work is so so so good, thanks everyone ❤️

I think our only blocker to merging is my request to move angle brackets under some different table of contents URL heading. In CLI docs, the equivalent is "Appendix" so maybe we should follow the same structure. See here. @locks any thoughts?

Callouts linking to the older guides/the explanation can follow in a later PR, after merging this to master, since guides-source is not continuous deployment (yet 😉 )

jenweber · 2019-01-24T03:52:58Z

Ran this locally and everything looks great! Table of Contents renders as expected, tests pass, etc.

Thanks everyone for your work!!! Merged.

* Convert to angle bracket notation in version 3.7 * fixing travis * updates from review comments * updates from review comments * Add explanation on Angle Bracket Syntax vs Classical Invocation * Removed unnecessary concat in example * 37 angle brackets - Fixed spelling * Refactored x-counter to counter * Moved angle bracket conversion guide to new reference section

mansona mentioned this pull request Jan 10, 2019

WIP do not merge - Beginning angle bracket notation conversion #292

Closed

jayjayjpg mentioned this pull request Jan 10, 2019

Ember Times - Issue No. 80 - Jan 11th, 2019 emberjs/website#3760

Merged

12 tasks

jayjayjpg mentioned this pull request Jan 11, 2019

Ember Times - Issue No. 81 - Jan 18th 2019 emberjs/website#3767

Merged

10 tasks

jenweber added the wip - work in progress label Jan 12, 2019

jenweber mentioned this pull request Jan 12, 2019

Convert to angle brackets components ember-learn/super-rentals#114

Closed

jenweber mentioned this pull request Jan 12, 2019

convert component invocation to angle brackets ember-learn/super-rentals#115

Merged

jenweber requested changes Jan 12, 2019

View reviewed changes

guides/v3.7.0/tutorial/autocomplete-component.md Outdated Show resolved Hide resolved

jenweber mentioned this pull request Jan 12, 2019

Quest: Transition guides documentation to use angle bracket invocation (rfc 311) #139

Closed

knownasilya reviewed Jan 14, 2019

View reviewed changes

guides/v3.7.0/components/defining-a-component.md Show resolved Hide resolved

jayjayjpg mentioned this pull request Jan 18, 2019

Ember Times No. 82 - Jan 25th 2019 emberjs/website#3773

Merged

13 tasks

DanMonroe and others added 5 commits January 21, 2019 22:49

Convert to angle bracket notation in version 3.7

45cb5b8

fixing travis

b6d2950

updates from review comments

fa5d0d9

updates from review comments

8a84fc2

Add explanation on Angle Bracket Syntax vs Classical Invocation

308d3ea

cah-danmonroe force-pushed the 37anglebrackets branch from a32e254 to 308d3ea Compare January 22, 2019 04:01

mansona approved these changes Jan 22, 2019

View reviewed changes

DanMonroe added 3 commits January 22, 2019 09:21

Removed unnecessary concat in example

724ddf1

37 angle brackets - Fixed spelling

ec08c98

Refactored x-counter to counter

bfe63a9

jenweber reviewed Jan 23, 2019

View reviewed changes

chrisrng mentioned this pull request Jan 23, 2019

Move angle bracket syntax explanation to reference/syntax-conversion-guide cah-danmonroe/guides-source#2

Closed

Moved angle bracket conversion guide to new reference section

a078c4f

jenweber approved these changes Jan 24, 2019

View reviewed changes

jenweber merged commit be4e09c into ember-learn:master Jan 24, 2019

amyrlam mentioned this pull request Jan 25, 2019

Angle brackets and contributors for Ember Times emberjs/website#3777

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Convert to angle bracket notation in version 3.7 #357

Convert to angle bracket notation in version 3.7 #357

cah-danmonroe commented Jan 10, 2019

theroncross commented Jan 11, 2019

jenweber commented Jan 12, 2019

jenweber commented Jan 12, 2019

jenweber commented Jan 12, 2019

jenweber commented Jan 12, 2019

jenweber commented Jan 12, 2019

jenweber commented Jan 22, 2019

mansona left a comment

mansona Jan 22, 2019

cah-danmonroe Jan 22, 2019

mansona Jan 22, 2019

cah-danmonroe Jan 22, 2019

knownasilya Jan 22, 2019

cah-danmonroe Jan 23, 2019

mansona commented Jan 22, 2019

jenweber Jan 23, 2019

chrisrng Jan 23, 2019

cah-danmonroe Jan 23, 2019

jenweber commented Jan 23, 2019

jenweber commented Jan 24, 2019

	{{#let (component (concat this.componentName)) as \|Post\|}}
	{{#let (component this.componentName) as \|Post\|}}

		@@ -0,0 +1,72 @@
		The [Angle Bracket Syntax](https://github.com/emberjs/rfcs/blob/master/text/0311-angle-bracket-invocation.md) is an alternative style of invoking components in templates. The difference between the Angle Bracket Syntax and the Classic Invocation Syntax is purely syntactical and does not affect the semantics of invoking a component.

Convert to angle bracket notation in version 3.7 #357

Convert to angle bracket notation in version 3.7 #357

Conversation

cah-danmonroe commented Jan 10, 2019

theroncross commented Jan 11, 2019

jenweber commented Jan 12, 2019

jenweber commented Jan 12, 2019

jenweber commented Jan 12, 2019

jenweber commented Jan 12, 2019

jenweber commented Jan 12, 2019

jenweber commented Jan 22, 2019

mansona left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mansona commented Jan 22, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jenweber commented Jan 23, 2019

jenweber commented Jan 24, 2019