Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Fix no-this-in-sfc rule behavior for arrow functions inside a class field #1989

Merged
merged 3 commits into from
Sep 20, 2018
Merged

Fix no-this-in-sfc rule behavior for arrow functions inside a class field #1989

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c885535
Fix `no-this-in-sfc` behavior for arrow functions
sergei-startsev Sep 19, 2018
1a9d54c
Fixed typo, added more tests
sergei-startsev Sep 19, 2018
e0d5821
Add a test to cover FunctionDeclaration type as a parent scope
sergei-startsev Sep 20, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions lib/rules/no-this-in-sfc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,11 @@ module.exports = {

create: Components.detect((context, components, utils) => ({
MemberExpression(node) {
const component = components.get(utils.getParentStatelessComponent());
if (!component) {
return;
}
if (node.object.type === 'ThisExpression') {
const component = components.get(utils.getParentStatelessComponent());
if (!component) {
return;
}
context.report({
node: node,
message: ERROR_MESSAGE
Expand Down
25 changes: 24 additions & 1 deletion lib/util/Components.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -469,7 +469,13 @@ function componentRule(rule, context) {
const node = scope.block;
const isClass = node.type === 'ClassExpression';
const isFunction = /Function/.test(node.type); // Functions
const isMethod = node.parent && node.parent.type === 'MethodDefinition'; // Classes methods
const isArrowFunction = node.type === 'ArrowFunctionExpression';
let functionScope = scope;
if (isArrowFunction) {
functionScope = utils.getParentFunctionScope(scope);
}
const methodNode = functionScope && functionScope.block.parent;
const isMethod = methodNode && methodNode.type === 'MethodDefinition'; // Classes methods
const isArgument = node.parent && node.parent.type === 'CallExpression'; // Arguments (callback, etc.)
// Attribute Expressions inside JSX Elements (<button onClick={() => props.handleClick()}></button>)
const isJSXExpressionContainer = node.parent && node.parent.type === 'JSXExpressionContainer';
Expand All @@ -486,6 +492,23 @@ function componentRule(rule, context) {
return null;
},

/**
* Get a parent scope created by a FunctionExpression or FunctionDeclaration
* @param {Scope} scope The child scope
* @returns {Scope} A parent function scope
*/
getParentFunctionScope(scope) {
scope = scope.upper;
while (scope) {
const type = scope.block.type;
ljharb marked this conversation as resolved.
Show resolved Hide resolved
if (type === 'FunctionExpression' || type === 'FunctionExpression') {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this meant to be checking the same thing twice?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good catch, it should be FunctionExpression and FunctionDeclaration

return scope;
}
scope = scope.upper;
}
return null;
},

/**
* Get the related component from a node
*
Expand Down
20 changes: 20 additions & 0 deletions tests/lib/rules/no-this-in-sfc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,26 @@ ruleTester.run('no-this-in-sfc', rule, {
code: 'const Foo = (props) => props.foo ? <span>{props.bar}</span> : null;'
}, {
code: 'const Foo = ({ foo, bar }) => foo ? <span>{bar}</span> : null;'
}, {
code: `
class Foo {
bar() {
() => {
this.something();
return null;
};
}
}`
}, {
code: `
class Foo {
bar() {
() => () => {
this.something();
return null;
};
}
}`
}],
invalid: [{
code: `
Expand Down