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

Add instance-properties group to sort-comp. Issue #599. #685

Closed
wants to merge 4 commits into from
Closed

Add instance-properties group to sort-comp. Issue #599. #685

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7c0f1ed
Add instance-properties group to sort-comp
le0nik Jul 17, 2016
88edb8a
Allow non-initialized instance-property in sort-comp
le0nik Jul 17, 2016
73b4b40
Removes instance-properties from default order of sort-comp
le0nik Jul 17, 2016
44f6f52
Fix typos in tests for instance-properties in sort-comp
le0nik Jul 17, 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
11 changes: 8 additions & 3 deletions docs/rules/sort-comp.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,10 @@ When creating React components it is more convenient to always follow the same o
With default configuration the following organisation must be followed:

1. static methods and properties
2. lifecycle methods: `displayName`, `propTypes`, `contextTypes`, `childContextTypes`, `mixins`, `statics`,`defaultProps`, `constructor`, `getDefaultProps`, `getInitialState`, `state`, `getChildContext`, `componentWillMount`, `componentDidMount`, `componentWillReceiveProps`, `shouldComponentUpdate`, `componentWillUpdate`, `componentDidUpdate`, `componentWillUnmount` (in this order).
3. custom methods
4. `render` method
2. instance properties
Copy link
Collaborator

Choose a reason for hiding this comment

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

It looks like this documentation needs to be updated, since the default order has not been modified yet.

It would be nice to open a PR that updates the default and documentation that we could bring in as part of v7.0.0.

3. lifecycle methods: `displayName`, `propTypes`, `contextTypes`, `childContextTypes`, `mixins`, `statics`,`defaultProps`, `constructor`, `getDefaultProps`, `getInitialState`, `state`, `getChildContext`, `componentWillMount`, `componentDidMount`, `componentWillReceiveProps`, `shouldComponentUpdate`, `componentWillUpdate`, `componentDidUpdate`, `componentWillUnmount` (in this order).
4. custom methods
5. `render` method

The following patterns are considered warnings:

Expand Down Expand Up @@ -55,6 +56,7 @@ The default configuration is:
{
order: [
'static-methods',
'instance-properties',
'lifecycle',
'everything-else',
'render'
Expand Down Expand Up @@ -86,6 +88,7 @@ The default configuration is:
```

* `static-methods` is a special keyword that refers to static class methods.
* `instance-properties` is a special keyword that refers to class instance properties.
* `lifecycle` is referring to the `lifecycle` group defined in `groups`.
* `everything-else` is a special group that match all the methods that do not match any of the other groups.
* `render` is referring to the `render` method.
Expand All @@ -98,6 +101,7 @@ For example, if you want to place your event handlers (`onClick`, `onSubmit`, et
"react/sort-comp": [1, {
order: [
'static-methods',
'instance-properties',
'lifecycle',
'/^on.+$/',
'render',
Expand Down Expand Up @@ -134,6 +138,7 @@ If you want to split your `render` method into smaller ones and keep them just b
"react/sort-comp": [1, {
order: [
'static-methods',
'instance-properties',
'lifecycle',
'everything-else',
'rendering',
Expand Down
14 changes: 13 additions & 1 deletion lib/rules/sort-comp.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,15 @@ module.exports = Components.detect(function(context, components) {
}
}

if (method.instanceProperty) {
for (i = 0, j = methodsOrder.length; i < j; i++) {
if (methodsOrder[i] === 'instance-properties') {
indexes.push(i);
break;
}
}
}

// Either this is not a static method or static methods are not specified
// in the methodsOrder.
if (indexes.length === 0) {
Expand Down Expand Up @@ -320,7 +329,10 @@ module.exports = Components.detect(function(context, components) {
var propertiesInfos = properties.map(function(node) {
return {
name: getPropertyName(node),
static: node.static
static: node.static,
instanceProperty: !node.static &&
(node.type === 'ClassProperty') &&
(!node.value || node.value.type !== 'ArrowFunctionExpression')
};
});

Expand Down
96 changes: 96 additions & 0 deletions tests/lib/rules/sort-comp.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,6 +203,38 @@ ruleTester.run('sort-comp', rule, {
'});'
].join('\n'),
parser: 'babel-eslint'
}, {
// Must consider `instance-properties` part of `everything-else` by default
code: [
'class Hello extends React.Component {',
' static displayName = \'Hello\';',
' componentDidMount() {}',
' count = 5;',
' render() {',
' return <div>Hello</div>;',
' }',
'}'
].join('\n'),
parser: 'babel-eslint',
parserOptions: parserOptions
}, {
// Must allow non-initialized instance properties
code: [
'class Hello extends React.Component {',
' count;',
' render() {',
' return <div>Hello</div>;',
' }',
'}'
].join('\n'),
parser: 'babel-eslint',
options: [{
order: [
'instance-properties',
'render'
]
}],
parserOptions: parserOptions
}],

invalid: [{
Expand Down Expand Up @@ -273,5 +305,69 @@ ruleTester.run('sort-comp', rule, {
parser: 'babel-eslint',
parserOptions: parserOptions,
errors: [{message: 'render should be placed after displayName'}]
}, {
// Must validate instance properties
// if `instance-properties` is found in configuration
code: [
'class Hello extends React.Component {',
' render() {',
' return <div></div>',
' }',
' count = 2;',
'}'
].join('\n'),
parser: 'babel-eslint',
options: [{
order: [
'instance-properties',
'render'
]
}],
parserOptions: parserOptions,
errors: [{message: 'render should be placed after count'}]
}, {
// Must differentiate between instance and static properties
// if `instance-properties` is found in configuration
code: [
'class Hello extends React.Component {',
' count = 2;',
' static displayName = \'Hello\';',
' render() {',
' return <div></div>',
' }',
'}'
].join('\n'),
parser: 'babel-eslint',
options: [{
order: [
'static-methods',
'instance-properties',
'render'
]
}],
parserOptions: parserOptions,
errors: [{message: 'count should be placed after displayName'}]
}, {
// Must differentiate between `instance-properties` and instance arrow functions
// if `instance-properties` is found in configuration
code: [
'class Hello extends React.Component {',
' handleClick = () => {}',
' count = 2;',
' render() {',
' return <div></div>',
' }',
'}'
].join('\n'),
parser: 'babel-eslint',
options: [{
order: [
'instance-properties',
'everything-else',
'render'
]
}],
parserOptions: parserOptions,
errors: [{message: 'handleClick should be placed after count'}]
}]
});