Add new rule no-tracked-properties-from-args

README.md

@@ -115,6 +115,12 @@ module.exports = {
 | [no-empty-attrs](docs/rules/no-empty-attrs.md)                                 | disallow usage of empty attributes in Ember Data models              |    |    |    |
 | [use-ember-data-rfc-395-imports](docs/rules/use-ember-data-rfc-395-imports.md) | enforce usage of `@ember-data/` package imports instead `ember-data` | ✅  | 🔧 |    |
 
+### Ember Decorator
+
+| Name                                                                             | Description                                          | 💼 | 🔧 | 💡 |
+| :------------------------------------------------------------------------------- | :--------------------------------------------------- | :- | :- | :- |
+| [no-tracked-properties-from-args](docs/rules/no-tracked-properties-from-args.md) | disallow creating @tracked properties from this.args |    |    |    |
+
 ### Ember Object
 
 | Name                                                                                       | Description                                                                    | 💼 | 🔧 | 💡 |

docs/rules/no-tracked-properties-from-args.md

@@ -0,0 +1,29 @@
+# ember/no-tracked-properties-from-args
+
+<!-- end auto-generated rule header -->
+
+Disallow creation of @tracked properties from args.
+
+## Rule Details
+
+This rule disallows the creation of @tracked properties with values from `this.args`. The @tracked property will not be updated when the args change, which is almost never what you want.
+
+## Examples
+
+Examples of **incorrect** code for this rule:
+
+```js
+@tracked someValue = this.args.someValue;
+```
+
+Examples of **correct** code for this rule:
+```js
+get someValue() {
+    return this.args.someValue;
+}
+```
+
+## References
+
+- [Glimmer Components - args](https://guides.emberjs.com/release/upgrading/current-edition/glimmer-components/#toc_getting-used-to-glimmer-components) guide
+- [tracked](https://guides.emberjs.com/release/in-depth-topics/autotracking-in-depth/) guide

lib/rules/no-tracked-properties-from-args.js

@@ -0,0 +1,51 @@
+'use strict';
+
+const { getImportIdentifier } = require('../utils/import');
+
+const ERROR_MESSAGE =
+  'Do not use this.args to create @tracked properties as this will not be updated if the args change. Instead use a getter.';
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'disallow creating @tracked properties from this.args',
+      category: 'Ember Octane',
+      recommended: false,
+      url: 'https://github.com/ember-cli/eslint-plugin-ember/tree/master/docs/rules/no-tracked-properties-from-args.md',
+    },
+    fixable: null,
+    schema: [],
+    messages: {
+      main: ERROR_MESSAGE,
+    },
+  },
+  create(context) {
+    let trackedImportName;
+
+    return {
+      ImportDeclaration(node) {
+        if (node.source.value === '@glimmer/tracking') {
+          trackedImportName = getImportIdentifier(node, '@glimmer/tracking', 'tracked');
+        }
+      },
+      PropertyDefinition(node) {
+        const hasTrackedDecorator =
+          node.decorators?.length > 0 && node.decorators[0].expression.name === trackedImportName;
+        const hasThisArgsValue =
+          node.value.object?.type === 'MemberExpression' &&
+          node.value.object?.object.type === 'ThisExpression' &&
+          node.value.object?.property.name === 'args';
+
+        if (hasTrackedDecorator && hasThisArgsValue) {
+          context.report({ node, messageId: 'main' });
+        }
+      },
+    };
+  },
+};

tests/lib/rules/no-tracked-properties-from-args.js

@@ -0,0 +1,99 @@
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+const rule = require('../../../lib/rules/no-tracked-properties-from-args');
+const RuleTester = require('eslint').RuleTester;
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+const ruleTester = new RuleTester({
+  parser: require.resolve('@babel/eslint-parser'),
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module',
+  },
+});
+
+ruleTester.run('no-tracked-properties-from-args', rule, {
+  valid: [
+    `
+      import { tracked } from '@glimmer/tracking'
+
+      class Test {
+        @someDecorator test = this.args.test
+      }`,
+    `
+      import { tracked } from '@glimmer/tracking'
+
+      class Test {
+        @tracked test = this.someValue
+      }`,
+    `
+      import { tracked } from '@glimmer/tracking'
+
+      class Test {
+        @tracked test = 7
+      }`,
+    `
+      import { tracked } from '@glimmer/tracking'
+
+      class Test {
+        test = 7
+      }`,
+    `
+      import { tracked } from '@glimmer/tracking'
+
+      class Test {
+        test = "test"
+      }`,
+    `
+      import { tracked } from '@glimmer/tracking'
+
+      class Test {
+        @tracked test = this.notArgs.args.test
+      }`,
+    `
+      import { tracked as fooTracked } from '@glimmer/tracking';
+
+      class Test {
+        @fooTracked test = this.notArgs.args.test
+      }
+    `,
+  ],
+  invalid: [
+    {
+      code: `
+      import { tracked } from '@glimmer/tracking'
+
+      class Test {
+        @tracked test = this.args.test;
+      }`,
+      output: null,
+      errors: [
+        {
+          messageId: 'main',
+          type: 'PropertyDefinition',
+        },
+      ],
+    },
+    {
+      code: `
+      import { tracked as fooTracked } from '@glimmer/tracking';
+
+      class Test {
+        @fooTracked test = this.args.test
+      }
+    `,
+      output: null,
+      errors: [
+        {
+          messageId: 'main',
+          type: 'PropertyDefinition',
+        },
+      ],
+    },
+  ],
+});