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.

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
Show file tree
Hide file tree
Changes from 1 commit
Commits
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
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

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
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