Repository: ember-template-lint/ember-template-lint (js)

Issue:
Default rules for 'octane' config contain conflicting recommendations
Using the `octane` config, both the "no-action-modifiers" and "no-element-event-actions" rules are enabled; I'm guessing the idea is to encourage use of `{{on ...}}` but the recommendations for these rules don't get along:

The no-action-modifiers error says to use `onclick`:
> `action` modifiers should not be used (use `onclick` attributes instead).  no-action-modifiers

While no-element-event-action says to use `{{action ...}}`:
> Use Ember `{{action ...}}` helper instead of HTML element event properties like `onclick`.  no-element-event-actions

Pull request:
Update `no-action-modifiers` and `no-element-event-actions` rules to suggest using the `on` modifier
Fixes #804. This was also discussed in #746.

`on` was introduced in [Ember 3.11](https://blog.emberjs.com/2019/07/15/ember-3-11-released.html).

Patch:
diff --git a/docs/rule/no-action-modifiers.md b/docs/rule/no-action-modifiers.md
index d924027c..15526006 100644
--- a/docs/rule/no-action-modifiers.md
+++ b/docs/rule/no-action-modifiers.md
@@ -2,16 +2,18 @@
 
 This rule forbids the use of `{{action}}` modifiers on elements.
 
+The recommended alternative is the `on` modifier. `on` is available in Ember 3.11+ and by [polyfill](https://github.com/buschtoens/ember-on-modifier) for earlier versions.
+
 This rule **forbids** the following:
 
 ```hbs
-<button {{action 'handleClick'}}>
+<button {{action 'submit'}}>Submit</button>
 ```
 
 This rule **allows** the following:
 
 ```hbs
-<button onclick={{action 'handleClick'}}>
+<button {{on 'click' this.submit}}>Submit</button>
 ```
 
 ### Configuration
@@ -21,6 +23,13 @@ The following values are valid configuration:
   * boolean -- `true` for enabled / `false` for disabled
   * array -- an array of whitelisted element tag names, which will accept action modifiers
 
+### References
+
+* [Documentation](https://guides.emberjs.com/release/templates/actions/) for template actions
+* [Polyfill](https://github.com/buschtoens/ember-on-modifier) for the `on` modifier (needed below Ember 3.11)
+* [Spec](http://api.emberjs.com/ember/release/classes/Ember.Templates.helpers/methods/fn?anchor=on) for the `on` modifier
+* [Spec](https://api.emberjs.com/ember/release/classes/Ember.Templates.helpers/methods/action?anchor=action) for the `action` modifier
+
 ### Related Rules
 
 * [no-element-event-actions](no-element-event-actions.md)
diff --git a/docs/rule/no-element-event-actions.md b/docs/rule/no-element-event-actions.md
index 53df4edf..f0f32155 100644
--- a/docs/rule/no-element-event-actions.md
+++ b/docs/rule/no-element-event-actions.md
@@ -5,6 +5,8 @@ Using HTML element event properties such as `onclick` for Ember actions is not r
 * It doesn't work for SVGs (since there is no `onclick` property of `SVGElement`).
 * It can lead to confusing and unexpected behavior when mixed with normal action usage. For a comprehensive explanation of why, read [Deep Dive on Ember Events].
 
+The recommended alternative is the `on` modifier. `on` is available in Ember 3.11+ and by [polyfill](https://github.com/buschtoens/ember-on-modifier) for earlier versions.
+
 This rule **forbids** the following:
 
 ```hbs
@@ -14,19 +16,17 @@ This rule **forbids** the following:
 This rule **allows** the following:
 
 ```hbs
-<button {{action "submit"}}>Submit</button>
-```
-
-```hbs
-<button {{action "submit" on="doubleClick"}}>Submit On Double Click</button>
+<button {{on 'click' this.submit}}>Submit</button>
 ```
 
 ### References
 
-* [Deep Dive on Ember Events]
-* Ember [Template Action](https://guides.emberjs.com/release/templates/actions/) documentation
-* [Spec](https://api.emberjs.com/ember/release/classes/Ember.Templates.helpers/methods/action?anchor=action) for `action` helper
+* [Documentation](https://guides.emberjs.com/release/templates/actions/) for template actions
+* [Polyfill](https://github.com/buschtoens/ember-on-modifier) for the `on` modifier (needed below Ember 3.11)
+* [Spec](http://api.emberjs.com/ember/release/classes/Ember.Templates.helpers/methods/fn?anchor=on) for the `on` modifier
+* [Spec](https://api.emberjs.com/ember/release/classes/Ember.Templates.helpers/methods/action?anchor=action) for the `action` modifier
 * [List of DOM Events](https://developer.mozilla.org/en-US/docs/Web/Events)
+* [Deep Dive on Ember Events]
 
 [Deep Dive on Ember Events]: https://medium.com/square-corner-blog/deep-dive-on-ember-events-cf684fd3b808
 
diff --git a/lib/rules/lint-no-action-modifiers.js b/lib/rules/lint-no-action-modifiers.js
index d95e2bbf..cc0aa909 100644
--- a/lib/rules/lint-no-action-modifiers.js
+++ b/lib/rules/lint-no-action-modifiers.js
@@ -3,6 +3,8 @@
 const Rule = require('./base');
 const createErrorMessage = require('../helpers/create-error-message');
 
+const ERROR_MESSAGE = 'Do not use the `action` modifier. Instead, use the `on` modifier.';
+
 module.exports = class NoActionModifiers extends Rule {
   parseConfig(config) {
     switch (typeof config) {
@@ -60,7 +62,7 @@ module.exports = class NoActionModifiers extends Rule {
         }
 
         this.log({
-          message: '`action` modifiers should not be used (use `onclick` attributes instead).',
+          message: ERROR_MESSAGE,
           line: node.loc && node.loc.start.line,
           column: node.loc && node.loc.start.column,
           source: this.sourceForNode(this._element),
@@ -69,3 +71,5 @@ module.exports = class NoActionModifiers extends Rule {
     };
   }
 };
+
+module.exports.ERROR_MESSAGE = ERROR_MESSAGE;
diff --git a/lib/rules/lint-no-element-event-actions.js b/lib/rules/lint-no-element-event-actions.js
index 1d22b310..1640439b 100644
--- a/lib/rules/lint-no-element-event-actions.js
+++ b/lib/rules/lint-no-element-event-actions.js
@@ -4,7 +4,7 @@ const Rule = require('./base');
 const AstNodeInfo = require('../helpers/ast-node-info');
 
 const ERROR_MESSAGE =
-  'Use Ember `{{action ...}}` helper instead of HTML element event properties like `onclick`.';
+  'Do not use HTML element event properties like `onclick`. Instead, use the `on` modifier.';
 
 module.exports = class NoElementEventActions extends Rule {
   visitor() {


Test patch:
diff --git a/test/unit/rules/lint-no-action-modifiers-test.js b/test/unit/rules/lint-no-action-modifiers-test.js
index bc9fdc3c..0b8b14e4 100644
--- a/test/unit/rules/lint-no-action-modifiers-test.js
+++ b/test/unit/rules/lint-no-action-modifiers-test.js
@@ -1,6 +1,7 @@
 'use strict';
 
 const generateRuleTests = require('../../helpers/rule-test-harness');
+const ERROR_MESSAGE = require('../../../lib/rules/lint-no-action-modifiers').ERROR_MESSAGE;
 
 generateRuleTests({
   name: 'no-action-modifiers',
@@ -25,7 +26,7 @@ generateRuleTests({
       template: '<button {{action "foo"}}></button>',
 
       result: {
-        message: '`action` modifiers should not be used (use `onclick` attributes instead).',
+        message: ERROR_MESSAGE,
         moduleId: 'layout.hbs',
         source: '<button {{action "foo"}}></button>',
         line: 1,
@@ -36,7 +37,7 @@ generateRuleTests({
       template: '<a href="#" {{action "foo"}}></a>',
 
       result: {
-        message: '`action` modifiers should not be used (use `onclick` attributes instead).',
+        message: ERROR_MESSAGE,
         moduleId: 'layout.hbs',
         source: '<a href="#" {{action "foo"}}></a>',
         line: 1,
@@ -48,7 +49,7 @@ generateRuleTests({
       template: '<a href="#" {{action "foo"}}></a>',
 
       result: {
-        message: '`action` modifiers should not be used (use `onclick` attributes instead).',
+        message: ERROR_MESSAGE,
         moduleId: 'layout.hbs',
         source: '<a href="#" {{action "foo"}}></a>',
         line: 1,