New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add new rule no-tracked-properties-from-args
#1702
Merged
bmish
merged 14 commits into
ember-cli:master
from
joancc:no-tracked-properties-from-args
Dec 19, 2022
Merged
Changes from 11 commits
Commits
Show all changes
14 commits
Select commit
Hold shift + click to select a range
180d08e
add no-tracked-properties-from-args rule
395ae63
update copy
70e312c
fix typo
04622b5
Updates from initial feedback
634a15e
remove unused const
1d9bdf0
Validate both ClassProperty and PropertyDefinition
a33ff58
update docs
7615023
run yarn update
ded063f
linting
5f6b579
linting
1f2d52c
update docs
f3bb1b9
Update docs/rules/no-tracked-properties-from-args.md
joancc 5cf5659
Update lib/rules/no-tracked-properties-from-args.js
bmish d049e2a
Apply suggestions from code review
bmish File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
# 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. Instead, use a getter to derive the desired state. | ||
If you need to modify a specific arg, consider having the parent provide a way for the child component to update it. This avoids having two sources of truth that you will need to keep in sync. | ||
|
||
## Examples | ||
|
||
Examples of **incorrect** code for this rule: | ||
|
||
```js | ||
class Example { | ||
@tracked someValue = this.args.someValue; | ||
} | ||
``` | ||
|
||
Examples of **correct** code for this rule: | ||
```js | ||
joancc marked this conversation as resolved.
Show resolved
Hide resolved
|
||
class Example { | ||
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,61 @@ | ||
'use strict'; | ||
|
||
const { getImportIdentifier } = require('../utils/import'); | ||
const { isClassPropertyOrPropertyDefinitionWithDecorator } = require('../utils/decorators'); | ||
|
||
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.'; | ||
|
||
function visitClassPropertyOrPropertyDefinition(node, context, trackedImportName) { | ||
const hasTrackedDecorator = | ||
node.decorators?.length > 0 && | ||
isClassPropertyOrPropertyDefinitionWithDecorator(node, 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' }); | ||
} | ||
} | ||
|
||
//------------------------------------------------------------------------------ | ||
// 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'); | ||
bmish marked this conversation as resolved.
Show resolved
Hide resolved
|
||
} | ||
}, | ||
ClassProperty(node) { | ||
visitClassPropertyOrPropertyDefinition(node, context, trackedImportName); | ||
}, | ||
PropertyDefinition(node) { | ||
visitClassPropertyOrPropertyDefinition(node, context, trackedImportName); | ||
}, | ||
}; | ||
}, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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: [ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Another valid test case: |
||
` | ||
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', | ||
bmish marked this conversation as resolved.
Show resolved
Hide resolved
|
||
}, | ||
], | ||
}, | ||
{ | ||
code: ` | ||
import { tracked as fooTracked } from '@glimmer/tracking'; | ||
|
||
class Test { | ||
@fooTracked test = this.args.test | ||
} | ||
`, | ||
output: null, | ||
errors: [ | ||
{ | ||
messageId: 'main', | ||
type: 'PropertyDefinition', | ||
bmish marked this conversation as resolved.
Show resolved
Hide resolved
|
||
}, | ||
], | ||
}, | ||
], | ||
}); |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you show a correct example? (with a getter?)