From 70bc8ca1c96cc30bb13e6f3275c57271d2691294 Mon Sep 17 00:00:00 2001 From: NullVoxPopuli <199018+NullVoxPopuli@users.noreply.github.com> Date: Tue, 13 Feb 2024 15:41:34 -0500 Subject: [PATCH 1/8] Deprecate the (action) template-helper --- text/1005-deprecate-action-template-helper.md | 126 ++++++++++++++++++ 1 file changed, 126 insertions(+) create mode 100644 text/1005-deprecate-action-template-helper.md diff --git a/text/1005-deprecate-action-template-helper.md b/text/1005-deprecate-action-template-helper.md new file mode 100644 index 0000000000..1c12a44744 --- /dev/null +++ b/text/1005-deprecate-action-template-helper.md @@ -0,0 +1,126 @@ +--- +stage: accepted +start-date: 2024-02-13T00:00:00.000Z +release-date: +release-versions: +teams: # delete teams that aren't relevant + - cli + - data + - framework + - learning + - steering + - typescript +prs: + accepted: # update this to the PR that you propose your RFC in +project-link: +--- + + + +# Deprecate `(action)` template helper + +## Summary + +The `(action)` template helper was common pre-Octane. Now that we have native classes and the `{{on}}` modifier, we no longer need to use `(action)` + +## Motivation + +Remove legacy code with confusing semantics. + +## Transition Path + +This was written in the [Octave vs Classic cheatsheet](https://ember-learn.github.io/ember-octane-vs-classic-cheat-sheet/#component-properties__ddau) + +That content here: + +### Before (pre-Octane) + +```js +// parent-component.js +import Component from '@ember/component'; + +export default Component.extend({ + count: 0 +}); + +``` +```hbs +{{!-- parent-component.hbs --}} +{{child-component count=count}} +Count: {{this.count}} + +``` +```js +// child-component.js +import Component from '@ember/component'; + +export default Component.extend({ + actions: { + plusOne() { + this.set('count', this.get('count') + 1); + } + } +}); +``` +```hbs +{{!-- child-component.hbs --}} + +``` + +### After (post-Octane) +```js +// parent-component.js +import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; +import { action } from '@ember/object'; + +export default class ParentComponent extends Component { + @tracked count = 0; + + @action plusOne() { + this.count++; + } +} + +``` +```hbs +{{!-- parent-component.hbs --}} + +Count: {{this.count}} + +``` +```hbs +{{!-- child-component.hbs --}} + + +``` + +## How We Teach This + +The guides already cover how to invoke functions in the modern way. + +Remove: https://api.emberjs.com/ember/5.6/classes/Ember.Templates.helpers/methods/action?anchor=action + +## Drawbacks + +Older code will stop working once the deprecated code is removed. + +## Alternatives + +## Unresolved questions + From e35074ccbcd70dd72a48e528ec35038f43e2bb06 Mon Sep 17 00:00:00 2001 From: NullVoxPopuli <199018+NullVoxPopuli@users.noreply.github.com> Date: Tue, 13 Feb 2024 15:43:24 -0500 Subject: [PATCH 2/8] set link --- ...plate-helper.md => 1006-deprecate-action-template-helper.md} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename text/{1005-deprecate-action-template-helper.md => 1006-deprecate-action-template-helper.md} (97%) diff --git a/text/1005-deprecate-action-template-helper.md b/text/1006-deprecate-action-template-helper.md similarity index 97% rename from text/1005-deprecate-action-template-helper.md rename to text/1006-deprecate-action-template-helper.md index 1c12a44744..087c9643db 100644 --- a/text/1005-deprecate-action-template-helper.md +++ b/text/1006-deprecate-action-template-helper.md @@ -11,7 +11,7 @@ teams: # delete teams that aren't relevant - steering - typescript prs: - accepted: # update this to the PR that you propose your RFC in + accepted: https://github.com/emberjs/rfcs/pull/1006 project-link: --- From 8b8c1e4c652d3b21a127b87b5ae280724059f14c Mon Sep 17 00:00:00 2001 From: NullVoxPopuli <199018+NullVoxPopuli@users.noreply.github.com> Date: Fri, 16 Feb 2024 15:21:47 -0500 Subject: [PATCH 3/8] Clarify helper *and* modifier, and provide more migration examples for the deprecation guide --- text/1006-deprecate-action-template-helper.md | 83 ++++++++++++++++++- 1 file changed, 80 insertions(+), 3 deletions(-) diff --git a/text/1006-deprecate-action-template-helper.md b/text/1006-deprecate-action-template-helper.md index 087c9643db..4b35dc87d7 100644 --- a/text/1006-deprecate-action-template-helper.md +++ b/text/1006-deprecate-action-template-helper.md @@ -28,11 +28,11 @@ prs: project-link: Leave as is --> -# Deprecate `(action)` template helper +# Deprecate `(action)` template helper and `{{action}}` modifier. ## Summary -The `(action)` template helper was common pre-Octane. Now that we have native classes and the `{{on}}` modifier, we no longer need to use `(action)` +The `(action)` template helper and `{{action}}` modifier was common pre-Octane. Now that we have native classes and the `{{on}}` modifier, we no longer need to use `(action)` or `{{action}}` ## Motivation @@ -42,7 +42,7 @@ Remove legacy code with confusing semantics. This was written in the [Octave vs Classic cheatsheet](https://ember-learn.github.io/ember-octane-vs-classic-cheat-sheet/#component-properties__ddau) -That content here: +
that content here ### Before (pre-Octane) @@ -110,6 +110,77 @@ Count: {{this.count}} ``` +
+ +But what we could put in the deprecation app: + +### Scenario: `action` is passed a string + +Before: +```hbs + +``` + +After + +```hbs + +``` +or, if `plusOne` is passed in as an argument +```hbs + +``` + +### Scenario: `action` is passed a function reference + +Before: +```hbs + +``` + +After + +```hbs + +``` + +### Scenario: `action` is passed parameters + +Before: +```hbs + +``` + +After: +```hbs + +``` + +### Scenario: `action` is used with `mut` + +Before: +```hbs + +``` +After: +```js +// parent.js +export default class SomeComponent extends Component { + handleUpdate = (value) => this.args.property = value; +} +``` +```hbs +{{! parent.hbs }} + +``` + + ## How We Teach This The guides already cover how to invoke functions in the modern way. @@ -122,5 +193,11 @@ Older code will stop working once the deprecated code is removed. ## Alternatives +- adding an import so folks can keep using action in gjs. + I don't think we should do this because we want to clean up antiquated patterns, rather than encourage their continued existence. + ## Unresolved questions +- Could there be a codemod? + _Potentially_ for action usage that references `this.properties`. For string actions, it's impossible. + From 76f1583f258958123ecf2b48c62e635363afb4b7 Mon Sep 17 00:00:00 2001 From: NullVoxPopuli <199018+NullVoxPopuli@users.noreply.github.com> Date: Fri, 16 Feb 2024 15:24:20 -0500 Subject: [PATCH 4/8] Reference deprecating ember classic meta/quest issue --- text/1006-deprecate-action-template-helper.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/text/1006-deprecate-action-template-helper.md b/text/1006-deprecate-action-template-helper.md index 4b35dc87d7..5c961ef26b 100644 --- a/text/1006-deprecate-action-template-helper.md +++ b/text/1006-deprecate-action-template-helper.md @@ -38,6 +38,8 @@ The `(action)` template helper and `{{action}}` modifier was common pre-Octane. Remove legacy code with confusing semantics. +This is a part of _[Deprecating Ember Classic (pre-Octane)](https://github.com/emberjs/rfcs/issues/832)_. + ## Transition Path This was written in the [Octave vs Classic cheatsheet](https://ember-learn.github.io/ember-octane-vs-classic-cheat-sheet/#component-properties__ddau) From e133d3497c11e9b136964408c204c02b50975cb7 Mon Sep 17 00:00:00 2001 From: NullVoxPopuli <199018+NullVoxPopuli@users.noreply.github.com> Date: Sat, 17 Feb 2024 13:37:41 -0500 Subject: [PATCH 5/8] Examples for the actions hash --- text/1006-deprecate-action-template-helper.md | 56 +++++++++++++++++++ 1 file changed, 56 insertions(+) diff --git a/text/1006-deprecate-action-template-helper.md b/text/1006-deprecate-action-template-helper.md index 5c961ef26b..57cea07c60 100644 --- a/text/1006-deprecate-action-template-helper.md +++ b/text/1006-deprecate-action-template-helper.md @@ -139,6 +139,62 @@ or, if `plusOne` is passed in as an argument ``` +If the `plusOne` action is in an actions object, it needs to move out: + +Before: +```js +import Component from '@glimmer/component'; + +export default class Demo extends Component { + actions = { + plusOne() { + /* ... */ + } + } +} +``` +or +```js +import Component from '@ember/component'; + +export default class Demo extends Component { + actions = { + plusOne() { + /* ... */ + } + } +} +``` +or +```js +import Component from '@ember/component'; + +export default Component.extend({ + actions: { + plusOne() { + /* ... */ + } + } +}) +``` + +After: +```js +import Component from '@glimmer/component'; +import { action } from '@ember/object'; + +export default class Demo extends Component { + @action + plusOne() { + /* ... */ + } +} +``` + +Note that `@action` is completely different from `(action)` or `{{action}}` (and is partly a motivator for deprecating `(action)` and `{{action}}`, to reduce ambiguity). + +`@action` is binds the `this` on the method to the instance of the class. + ### Scenario: `action` is passed a function reference Before: From 2a73a6f770246b94f34946e341d23c35fc1f38c3 Mon Sep 17 00:00:00 2001 From: NullVoxPopuli <199018+NullVoxPopuli@users.noreply.github.com> Date: Sat, 17 Feb 2024 13:39:04 -0500 Subject: [PATCH 6/8] Verbosify the action --- text/1006-deprecate-action-template-helper.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/text/1006-deprecate-action-template-helper.md b/text/1006-deprecate-action-template-helper.md index 57cea07c60..b70b4cfef5 100644 --- a/text/1006-deprecate-action-template-helper.md +++ b/text/1006-deprecate-action-template-helper.md @@ -229,8 +229,14 @@ Before: After: ```js // parent.js +import Component from '@glimmer/component'; +import { action } from '@ember/object'; + export default class SomeComponent extends Component { - handleUpdate = (value) => this.args.property = value; + @action + handleUpdate(value) { + this.args.property = value; + } } ``` ```hbs From 02b44d40f303c6319f897b5f55ce0cb66449eb49 Mon Sep 17 00:00:00 2001 From: NullVoxPopuli <199018+NullVoxPopuli@users.noreply.github.com> Date: Sat, 17 Feb 2024 14:28:41 -0500 Subject: [PATCH 7/8] Mention send --- text/1006-deprecate-action-template-helper.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/text/1006-deprecate-action-template-helper.md b/text/1006-deprecate-action-template-helper.md index b70b4cfef5..9f4c1ed724 100644 --- a/text/1006-deprecate-action-template-helper.md +++ b/text/1006-deprecate-action-template-helper.md @@ -244,6 +244,11 @@ export default class SomeComponent extends Component { ``` +Related, [Combining function arguments with action functions](https://guides.emberjs.com/release/components/component-state-and-actions/#toc_combining-arguments-and-actions) + +### Related: `send` + +When removing `(action)` or `{{action}}` with a _string_ name, you'll also need to verify that there are no [`send`](https://api.emberjs.com/ember/5.6/classes/Component/methods/send?anchor=send) calls with that same string. ## How We Teach This From 7f0b3eab7797a3b111a04d6452fe6c228442a618 Mon Sep 17 00:00:00 2001 From: NullVoxPopuli <199018+NullVoxPopuli@users.noreply.github.com> Date: Wed, 6 Mar 2024 10:43:57 -0500 Subject: [PATCH 8/8] Update text/1006-deprecate-action-template-helper.md Co-authored-by: Chris Manson --- text/1006-deprecate-action-template-helper.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/text/1006-deprecate-action-template-helper.md b/text/1006-deprecate-action-template-helper.md index 9f4c1ed724..056841ba3a 100644 --- a/text/1006-deprecate-action-template-helper.md +++ b/text/1006-deprecate-action-template-helper.md @@ -224,7 +224,7 @@ After: Before: ```hbs - + ``` After: ```js