Merge pull request #2571 from NullVoxPopuli/nvp/template-lint-extract-rule-template-no-route-action

Extract rule: template-no-route-action

Author: NullVoxPopuli

README.md

@@ -343,6 +343,7 @@ rules in templates can be disabled with eslint directives with mustache or html
 | [template-no-attrs-in-components](docs/rules/template-no-attrs-in-components.md)                 | disallow attrs in component templates                     |    |    |    |
 | [template-no-link-to-positional-params](docs/rules/template-no-link-to-positional-params.md)     | disallow positional params in LinkTo component            |    |    |    |
 | [template-no-link-to-tagname](docs/rules/template-no-link-to-tagname.md)                         | disallow tagName attribute on LinkTo component            |    |    |    |
+| [template-no-route-action](docs/rules/template-no-route-action.md)                               | disallow usage of route-action helper                     |    |    |    |
 | [template-no-unbound](docs/rules/template-no-unbound.md)                                         | disallow {{unbound}} helper                               |    |    |    |
 | [template-no-with](docs/rules/template-no-with.md)                                               | disallow {{with}} helper                                  |    |    |    |
 

docs/rules/template-no-route-action.md

@@ -0,0 +1,151 @@
+# ember/template-no-route-action
+
+> **HBS Only**: This rule applies to classic `.hbs` template files only (loose mode). It is not relevant for `gjs`/`gts` files (strict mode), where these patterns cannot occur.
+
+<!-- end auto-generated rule header -->
+
+This rule disallows the usage of `route-action`.
+
+[ember-route-action-helper](https://github.com/DockYard/ember-route-action-helper) was a popular addon used to add actions to a route without creating a separate controller. Given the changes in Ember since ember-route-action-helper was a widely used pattern, controllers are now encouraged and we want to discourage the use of route-action.
+
+Most route actions should either be sent to the controller first or encapsulated within a downstream component instead. We should never be escaping the DDAU hierarchy to lob actions up to the route.
+
+## Examples
+
+This rule **forbids** the following:
+
+```hbs
+<CustomComponent @onUpdate={{route-action 'updateFoo'}} />
+```
+
+```hbs
+<CustomComponent @onUpdate={{route-action 'updateFoo' 'bar'}} />
+```
+
+```hbs
+{{custom-component onUpdate=(route-action 'updateFoo')}}
+```
+
+```hbs
+{{custom-component onUpdate=(route-action 'updateFoo' 'bar')}}
+```
+
+With the given route:
+
+```js
+// app/routes/foo.js
+export default class extends Route {
+  @action
+  updateFoo(baz) {
+    // ...
+  }
+}
+```
+
+This rule **allows** the following:
+
+```hbs
+<CustomComponent @onUpdate={{this.updateFoo}} />
+```
+
+```hbs
+<CustomComponent @onUpdate={{fn this.updateFoo 'bar'}} />
+```
+
+```hbs
+{{custom-component onUpdate=this.updateFoo}}
+```
+
+```hbs
+{{custom-component onUpdate=(fn this.updateFoo 'bar')}}
+```
+
+With the given controller:
+
+```js
+// app/controllers/foo.js
+export default class extends Controller {
+  @action
+  updateFoo(baz) {
+    // ...
+  }
+}
+```
+
+## Migration
+
+The example below shows how to migrate from route-action to controller actions.
+
+### Before
+
+```js
+// app/routes/posts.js
+export default class extends Route {
+  model(params) {
+    return this.store.query('post', { page: params.page });
+  }
+
+  @action
+  goToPage(pageNum) {
+    this.transitionTo({ queryParams: { page: pageNum } });
+  }
+}
+```
+
+```js
+// app/controllers/posts.js
+export default class extends Controller {
+  queryParams = ['page'];
+  page = 1;
+}
+```
+
+```hbs
+{{#each @model as |post|}}
+  <Post @title={{post.title}} @content={{post.content}} />
+{{/each}}
+
+<button {{action (route-action 'goToPage' 1)}}>1</button>
+<button {{action (route-action 'goToPage' 2)}}>2</button>
+<button {{action (route-action 'goToPage' 3)}}>3</button>
+```
+
+### After
+
+```js
+// app/routes/posts.js
+export default class extends Route {
+  model(params) {
+    return this.store.query('post', { page: params.page });
+  }
+}
+```
+
+```js
+// app/controllers/posts.js
+export default class extends Controller {
+  queryParams = ['page'];
+  page = 1;
+
+  @action
+  goToPage(pageNum) {
+    this.transitionToRoute({ queryParams: { page: pageNum } });
+  }
+}
+```
+
+```hbs
+{{#each @model as |post|}}
+  <Post @title={{post.title}} @content={{post.content}} />
+{{/each}}
+
+<button {{on 'click' (fn this.goToPage 1)}}>1</button>
+<button {{on 'click' (fn this.goToPage 2)}}>2</button>
+<button {{on 'click' (fn this.goToPage 3)}}>3</button>
+```
+
+## References
+
+- [ember-route-action-helper](https://github.com/DockYard/ember-route-action-helper)
+- [Ember guides/Controllers](https://guides.emberjs.com/release/routing/controllers/)
+- [Ember Best Practices: What are controllers good for?](https://dockyard.com/blog/2017/06/16/ember-best-practices-what-are-controllers-good-for)

lib/rules/template-no-route-action.js

@@ -0,0 +1,49 @@
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'disallow usage of route-action helper',
+      category: 'Deprecations',
+      url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-no-route-action.md',
+      templateMode: 'loose',
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      unexpected:
+        'Do not use the (route-action) helper. Use the (fn) helper or closure actions instead.',
+    },
+    originallyFrom: {
+      name: 'ember-template-lint',
+      rule: 'lib/rules/no-route-action.js',
+      docs: 'docs/rule/no-route-action.md',
+      tests: 'test/unit/rules/no-route-action-test.js',
+    },
+  },
+
+  create(context) {
+    function checkForRouteAction(node) {
+      if (
+        node.path &&
+        node.path.type === 'GlimmerPathExpression' &&
+        node.path.original === 'route-action'
+      ) {
+        context.report({
+          node,
+          messageId: 'unexpected',
+        });
+      }
+    }
+
+    return {
+      GlimmerMustacheStatement(node) {
+        checkForRouteAction(node);
+      },
+
+      GlimmerSubExpression(node) {
+        checkForRouteAction(node);
+      },
+    };
+  },
+};