Skip to content

Add no-context rule (fixes #455) #736

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

Closed
wants to merge 2 commits into from
Closed

Add no-context rule (fixes #455) #736

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
46c2a18
Add no-context rule (fixes #455)
zachguo Aug 3, 2016
174c2a2
no-context: fix false positive but failed to detect stateless functio…
zachguo Aug 4, 2016
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
21 changes: 19 additions & 2 deletions lib/rules/no-context.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ module.exports = {
schema: []
},

create: Components.detect(function(context) {
create: Components.detect(function(context, component, utils) {

/**
* Checks if we are using context
Expand All @@ -29,6 +29,7 @@ module.exports = {
*/
function isContextUsage(node) {
return Boolean(
(utils.getParentES6Component() || utils.getParentES5Component()) &&
node.object.type === 'ThisExpression' &&
node.property.name === 'context'
);
Expand Down Expand Up @@ -58,6 +59,19 @@ module.exports = {
);
}

/**
* @param {ASTNode} node We expect either an ArrowFunctionExpression,
* FunctionDeclaration, or FunctionExpression
* @returns {Boolean} True if node is a stateless functional component,
* false if not.
*/
function isStatelessComponent(node) {
Copy link
Author

@zachguo zachguo Aug 4, 2016 •
edited
Loading

Choose a reason for hiding this comment

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

Component.detect seems to be not working, so I tried detecting stateless functional component manually. However, utils.isReturningJSX didn't work as expected, it's returning false no matter what.

return Boolean(
node.parent.type === 'VariableDeclarator' &&
utils.isReturningJSX(node)
);
}

/**
* @param {ASTNode} node We expect either an ArrowFunctionExpression,
* FunctionDeclaration, or FunctionExpression
Expand All @@ -76,7 +90,10 @@ module.exports = {
* FunctionDeclaration, or FunctionExpression
*/
function handleStatelessComponent(node) {
if (isContextUsageInStatelessComponent(node)) {
if (
isStatelessComponent(node) &&
isContextUsageInStatelessComponent(node)
) {
context.report({
node: node,
message: 'Using context is not allowed.'
Expand Down
51 changes: 51 additions & 0 deletions tests/lib/rules/no-context.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,43 @@ ruleTester.run('no-context', rule, {
'});'
].join('\n'),
parserOptions: parserOptions
}, {
code: [
'class Hello extends React.Component {',
' render() {',
' const names = ["foo", "bar"];',
' return (',
' <div>',
' {names.map((e, i) => <p key={i}>{e}</p>)}',
' </div>',
' );',
' }',
'};'
].join('\n'),
parser: 'babel-eslint',
parserOptions: parserOptions
}, {
code: [
'class Hello extends React.Component {',
' handleClick = (e, i) => i',
' render() {',
' return <div onClick={this.handleClick}>Hello {this.props.name}</div>;',
' }',
'};'
].join('\n'),
parser: 'babel-eslint',
parserOptions: parserOptions
}, {
code: [
'class Hello extends React.Component {',
' render() {',
' const handleClick = (e, i) => i;',
' return <div onClick={handleClick}>Hello {this.props.name}</div>;',
' }',
'};'
].join('\n'),
parser: 'babel-eslint',
parserOptions: parserOptions
}],

invalid: [{
Expand Down Expand Up @@ -252,6 +289,20 @@ ruleTester.run('no-context', rule, {
errors: [{
message: 'Using context is not allowed.'
}]
}, {
code: [
'class Hello extends React.Component {',
' handleClick = (e, i) => i',
' render() {',
' return <div onClick={this.handleClick}>Hello {this.context.name}</div>;',
' }',
'};'
].join('\n'),
parser: 'babel-eslint',
parserOptions: parserOptions,
errors: [{
message: 'Using context is not allowed.'
}]
}, {
code: [
'const Hello = (props, context) => {',
Expand Down