Ember NYC - RFC Roundup

As part of Ember NYC's RFC Roundup meetup, I shared the following Ember RFCs:
- RFC 459: Angle Bracket Invocation for Built-in Components
- RFC 470: {{fn}} Helper
- RFC 471: {{on}} Helper

Transcript

1. RFC 459:
 Angle Bracket Invocation for Built-in Components
2. {{link-to}} {{input}} {{textarea}}
3. {{link-to}} {{input}} {{textarea}} <LinkTo> <Input> <Textarea>
4. {{link-to}} • Uses positional arguments as the main API:
 
 {{#link-to "route"}}Link Text{{/link-to}} • Supports an inline form:
 
 {{link-to "Link Text" "route"}}
5. <LinkTo> {{#link-to "route"}}Link Text{{/link-to}}
 
 <LinkTo @route="route">Link Text</LinkTo> {{link-to "Link Text" "route"}}
 
 <LinkTo @route="route">Link Text</LinkTo>
6. <LinkTo> {{#link-to "route"}}Link Text{{/link-to}}
 
 <LinkTo @route="route">Link Text</LinkTo> {{link-to "Link Text" "route"}}
 
 <LinkTo @route="route">Link Text</LinkTo>
7. <LinkTo> {{#link-to "route"}}Link Text{{/link-to}}
 
 <LinkTo @route="route">Link Text</LinkTo> {{link-to "Link Text" "route"}}
 
 <LinkTo @route="route">Link Text</LinkTo>
8. <LinkTo> {{#link-to "route"}}Link Text{{/link-to}}
 
 <LinkTo @route="route">Link Text</LinkTo> {{link-to "Link Text" "route"}}
 
 <LinkTo @route="route">Link Text</LinkTo>
9. <LinkTo> <LinkTo
 @route="route"
 @model={{model}}
 >
 Link Text
 </LinkTo>
10. <LinkTo> <LinkTo
 @route="route"
 @models={{array modelA modelB}}
 >
 Link Text
 </LinkTo>
11. {{input}} •Internally implemented as several components •Selected based on type argument
 
 {{input type="text" value=model.name}}
12. <Input> {{input type="text" value=model.name}}
 
 <Input @type="text" @value={{model.name}} />
13. <Input> {{input type="text" value=model.name}}
 
 <Input @type="text" @value={{model.name}} />
14. <Input> {{input
 type="checkbox"
 name="opt-in"
 checked=model.emailPref
 }}
 
 <Input
 @type="checkbox"
 @name="opt-in"
 @checked={{model.emailPref}}
 />
15. <Input> {{input
 type="checkbox"
 name="opt-in"
 checked=model.emailPref
 }}
 
 <Input
 @type="checkbox"
 @name="opt-in"
 @checked={{model.emailPref}}
 />
16. <Textarea> {{textarea value=model.body}}
 
 <Textarea @value={{model.body}} />
17. <Textarea> {{textarea value=model.body}}
 
 <Textarea @value={{model.body}} />
19. RFC 470:
 {{fn}} Helper
20. {{action}} Modifier •Argument partial application (currying) •this context binding •send checks for Component and Controllers
21. {{fn}} Helper {{fn this.log 1}}
 
 return function() {
 this.log.call(this, 1);
 }
22. {{fn}} Helper {{fn this.log 1 2}}
 
 return function() {
 this.log.call(this, 1, 2);
 }
23. {{fn}} Helper <button {{action "increment" 5}}>Click</button>
 <button {{action this.increment 5}}>Click</button>
 <button onclick={{action "increment" 5}}>Click</button>
 <button onclick={{action this.increment 5}}>Click</button>
 <button {{action (action "increment" 5)}}>Click</button>
 <button {{action (action this.increment 5)}}>Click</button>
 
 <button onclick={{fn this.increment 5}}>Click</button>
 <button {{on "click" (fn this.increment 5)}}>Click</button>
24. {{fn}} Helper <button {{action (mut showModal) true}}>Click</button>
 <button onclick={{action (mut showModal) true}}>Click</button>
 <button {{action (action (mut showModal) true)}}>Click</button>
 
 <button onclick={{fn (mut showModal) true}}>Click</button>
 <button {{on "click" (fn (mut showModal) true)}}>Click</button>
26. RFC 471:
 {{on}} Modifier
27. {{action}} Modifier •Uses non-standard AST transform to pass this •Binds to the click event by default •Confused with @action decorator and
 {{action}} helper
28. on* Properties •Bind to element properties =
 not SSR/rehydration friendly •Not all events are bindable via on* •Do not work at all for elements like <svg> •Not compatible with standard web components
29. {{on}} Modifier <div {{on "click" this.handleClick passive=true}}>
 </div>
 
 
 element.addEventListener(
 'click',
 this.handleClick,
 { passive: true }
 );
30. {{on}} Modifier <div
 {{on "click" this.handleClick}}
 {{on "mouseenter" this.handleMouseEnter}}
 >
 </div>
31. {{on}} Modifier <div
 {{on "click" (fn this.addNumber 123)}}
 >
 </div>
32. {{on}} Modifier class ClickComponent extends Component { @action handleClick() { // ... } }
33. EMBER_GLIMMER_ON_MODIFIER: true