Extract rule: template-no-at-ember-render-modifiers

README.md

@@ -204,6 +204,7 @@ rules in templates can be disabled with eslint directives with mustache or html
 | [template-no-action-on-submit-button](docs/rules/template-no-action-on-submit-button.md)                     | disallow action attribute on submit buttons                                  |    |    |    |
 | [template-no-arguments-for-html-elements](docs/rules/template-no-arguments-for-html-elements.md)             | disallow @arguments on HTML elements                                         |    |    |    |
 | [template-no-array-prototype-extensions](docs/rules/template-no-array-prototype-extensions.md)               | disallow usage of Ember Array prototype extensions                           |    |    |    |
+| [template-no-at-ember-render-modifiers](docs/rules/template-no-at-ember-render-modifiers.md)                 | disallow usage of @ember/render-modifiers                                    |    |    |    |
 | [template-no-bare-yield](docs/rules/template-no-bare-yield.md)                                               | disallow templates whose only meaningful content is a bare {{yield}}         |    |    |    |
 | [template-no-block-params-for-html-elements](docs/rules/template-no-block-params-for-html-elements.md)       | disallow block params on HTML elements                                       |    |    |    |
 | [template-no-capital-arguments](docs/rules/template-no-capital-arguments.md)                                 | disallow capital arguments (use lowercase @arg instead of @Arg)              |    |    |    |

docs/rules/template-no-at-ember-render-modifiers.md

@@ -0,0 +1,68 @@
+# ember/template-no-at-ember-render-modifiers
+
+<!-- end auto-generated rule header -->
+
+Disallows usage of modifiers from @ember/render-modifiers.
+
+## Rule Details
+
+The modifiers from `@ember/render-modifiers` (`{{did-insert}}`, `{{did-update}}`, `{{will-destroy}}`) should be replaced with alternatives from `ember-render-helpers` or other modern approaches.
+
+## Examples
+
+Examples of **incorrect** code for this rule:
+
+```gjs
+<template>
+  <div {{did-insert this.setup}}></div>
+</template>
+```
+
+```gjs
+<template>
+  <div {{did-update this.update}}></div>
+</template>
+```
+
+```gjs
+<template>
+  <div {{will-destroy this.cleanup}}></div>
+</template>
+```
+
+Examples of **correct** code for this rule:
+
+```gjs
+<template>
+  <div {{on "click" this.handleClick}}></div>
+</template>
+```
+
+## Migration
+
+The migration path typically depends on what the render-modifier was used for, but if you need a custom modifier, the [`ember-modifier` README](https://github.com/ember-modifier/ember-modifier) covers everything you need to know for making custom modifiers.
+
+For example, if render modifiers were used for setup/teardown, the migration to `ember-modifier` could be the following:
+
+```js
+import Component from '@glimmer/component';
+import { modifier } from 'ember-modifier';
+
+export default class MyComponent extends Component {
+  myModifier = modifier((element) => {
+    const handleEvent = () => {};
+
+    element.addEventListener('eventName', handleEvent);
+
+    return () => element.removeEventListener('eventName', handelEvent);
+  });
+}
+```
+
+```hbs
+<div {{this.myModifier}}>
+```
+
+## References
+
+- [eslint-plugin-ember template-no-at-ember-render-modifiers](https://github.com/ember-cli/eslint-plugin-ember/blob/master/docs/rules/template-no-at-ember-render-modifiers.md)

lib/rules/template-no-at-ember-render-modifiers.js

@@ -0,0 +1,50 @@
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'disallow usage of @ember/render-modifiers',
+      category: 'Best Practices',
+      url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/template-no-at-ember-render-modifiers.md',
+      templateMode: 'both',
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      noRenderModifier:
+        'Do not use the `{{modifier}}` modifier. This modifier was intended to ease migration to Octane and not for long-term side-effects. Instead, either refactor to use data derivation patterns for a performance boost, or refactor to use a custom modifier. See https://github.com/ember-modifier/ember-modifier',
+    },
+    originallyFrom: {
+      name: 'ember-template-lint',
+      rule: 'lib/rules/no-at-ember-render-modifiers.js',
+      docs: 'docs/rule/no-at-ember-render-modifiers.md',
+      tests: 'test/unit/rules/no-at-ember-render-modifiers-test.js',
+    },
+  },
+
+  create(context) {
+    return {
+      GlimmerElementNode(node) {
+        if (!node.modifiers) {
+          return;
+        }
+
+        for (const modifier of node.modifiers) {
+          if (
+            modifier.path &&
+            modifier.path.type === 'GlimmerPathExpression' &&
+            (modifier.path.original === 'did-insert' ||
+              modifier.path.original === 'did-update' ||
+              modifier.path.original === 'will-destroy')
+          ) {
+            context.report({
+              node: modifier,
+              messageId: 'noRenderModifier',
+              data: { modifier: modifier.path.original },
+            });
+          }
+        }
+      },
+    };
+  },
+};

tests/lib/rules/template-no-at-ember-render-modifiers.js

@@ -0,0 +1,124 @@
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+const rule = require('../../../lib/rules/template-no-at-ember-render-modifiers');
+const RuleTester = require('eslint').RuleTester;
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+const ruleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser'),
+  parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
+});
+
+ruleTester.run('template-no-at-ember-render-modifiers', rule, {
+  valid: [
+    `<template>
+      <div></div>
+    </template>`,
+    `<template>
+      <div {{on "click" this.handleClick}}></div>
+    </template>`,
+    `<template>
+      <MyComponent />
+    </template>`,
+
+    '<template><div {{this.someModifier}}></div></template>',
+    '<template><div {{someModifier}}></div></template>',
+    '<template><div {{did-foo}}></div></template>',
+    '<template>{{did-insert}}</template>',
+    '<template>{{did-update}}</template>',
+    '<template>{{will-destroy}}</template>',
+  ],
+
+  invalid: [
+    {
+      code: `<template>
+        <div {{did-insert this.setup}}></div>
+      </template>`,
+      output: null,
+      errors: [
+        {
+          messageId: 'noRenderModifier',
+          type: 'GlimmerElementModifierStatement',
+        },
+      ],
+    },
+    {
+      code: `<template>
+        <div {{did-update this.update}}></div>
+      </template>`,
+      output: null,
+      errors: [
+        {
+          messageId: 'noRenderModifier',
+          type: 'GlimmerElementModifierStatement',
+        },
+      ],
+    },
+    {
+      code: `<template>
+        <div {{will-destroy this.cleanup}}></div>
+      </template>`,
+      output: null,
+      errors: [
+        {
+          messageId: 'noRenderModifier',
+          type: 'GlimmerElementModifierStatement',
+        },
+      ],
+    },
+
+    {
+      code: '<template><div {{did-insert}}></div></template>',
+      output: null,
+      errors: [{ messageId: 'noRenderModifier' }],
+    },
+    {
+      code: '<template><div {{did-update}}></div></template>',
+      output: null,
+      errors: [{ messageId: 'noRenderModifier' }],
+    },
+    {
+      code: '<template><div {{will-destroy}}></div></template>',
+      output: null,
+      errors: [{ messageId: 'noRenderModifier' }],
+    },
+  ],
+});
+
+const hbsRuleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser/hbs'),
+  parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
+});
+
+hbsRuleTester.run('template-no-at-ember-render-modifiers (hbs)', rule, {
+  valid: [
+    '<div {{this.someModifier}}></div>',
+    '<div {{someModifier}}></div>',
+    '<div {{did-foo}}></div>',
+    '{{did-insert}}',
+    '{{did-update}}',
+    '{{will-destroy}}',
+  ],
+  invalid: [
+    {
+      code: '<div {{did-insert}}></div>',
+      output: null,
+      errors: [{ messageId: 'noRenderModifier' }],
+    },
+    {
+      code: '<div {{did-update}}></div>',
+      output: null,
+      errors: [{ messageId: 'noRenderModifier' }],
+    },
+    {
+      code: '<div {{will-destroy}}></div>',
+      output: null,
+      errors: [{ messageId: 'noRenderModifier' }],
+    },
+  ],
+});