Skip to content

Commit 5dbf7e3

Browse files
dejoeandejoean
committed
Integrate feedback
- Remove `instance-variables` from default sort order - Put `componentDidCatch` before `componentWillUnmount` - Add a test that covers all the new lifecycles with the default parser - Add a `createReactClass` test that covers most of the new lifecycles - Add an instance method to the test next to the arrow method
1 parent 2461709 commit 5dbf7e3

File tree

3 files changed

+65
-22
lines changed

3 files changed

+65
-22
lines changed

‎docs/rules/sort-comp.md

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Enforce component methods order (react/sort-comp)
22

3-
When creating React components it is more convenient to always follow the same organisation for method order to help you easily find lifecyle methods, event handlers, etc.
3+
When creating React components it is more convenient to always follow the same organisation for method order to help you easily find lifecycle methods, event handlers, etc.
44

55
**Fixable:** This rule is automatically fixable using the [`sort-comp` transform](https://github.com/reactjs/react-codemod/blob/master/transforms/sort-comp.js) in [react-codemod](https://www.npmjs.com/package/react-codemod).
66

@@ -9,7 +9,7 @@ When creating React components it is more convenient to always follow the same o
99
The default configuration ensures that the following order must be followed:
1010

1111
1. static methods and properties
12-
2. lifecycle methods: `displayName`, `propTypes`, `contextTypes`, `childContextTypes`, `mixins`, `statics`, `defaultProps`, `constructor`, `instance-variables`, `getDefaultProps`, `state`, `getInitialState`, `getChildContext`, `getDerivedStateFromProps`, `componentWillMount`, `UNSAFE_componentWillMount`, `componentDidMount`, `componentWillReceiveProps`, `UNSAFE_componentWillReceiveProps`, `shouldComponentUpdate`, `componentWillUpdate`, `UNSAFE_componentWillUpdate`, `getSnapshotBeforeUpdate`, `componentDidUpdate`, `componentWillUnmount`, `componentDidCatch` (in this order).
12+
2. lifecycle methods: `displayName`, `propTypes`, `contextTypes`, `childContextTypes`, `mixins`, `statics`, `defaultProps`, `constructor`, `getDefaultProps`, `state`, `getInitialState`, `getChildContext`, `getDerivedStateFromProps`, `componentWillMount`, `UNSAFE_componentWillMount`, `componentDidMount`, `componentWillReceiveProps`, `UNSAFE_componentWillReceiveProps`, `shouldComponentUpdate`, `componentWillUpdate`, `UNSAFE_componentWillUpdate`, `getSnapshotBeforeUpdate`, `componentDidUpdate`, `componentDidCatch`, `componentWillUnmount` (in this order).
1313
3. custom methods
1414
4. `render` method
1515

@@ -69,7 +69,6 @@ The default configuration is:
6969
'statics',
7070
'defaultProps',
7171
'constructor',
72-
'instance-variables',
7372
'getDefaultProps',
7473
'state',
7574
'getInitialState',
@@ -85,22 +84,22 @@ The default configuration is:
8584
'UNSAFE_componentWillUpdate',
8685
'getSnapshotBeforeUpdate',
8786
'componentDidUpdate',
88-
'componentWillUnmount',
89-
'componentDidCatch'
87+
'componentDidCatch',
88+
'componentWillUnmount'
9089
]
9190
}
9291
}
9392
```
9493

9594
* `static-methods` is a special keyword that refers to static class methods.
96-
* `lifecycle` is referring to the `lifecycle` group defined in `groups`.
97-
* `everything-else` is a special group that match all the methods that do not match any of the other groups.
98-
* `render` is referring to the `render` method.
99-
* `type-annotations`. This group is not specified by default, but can be used to enforce flow annotations positioning.
100-
* `getters` This group is not specified by default, but can be used to enforce class getters positioning.
101-
* `setters` This group is not specified by default, but can be used to enforce class setters positioning.
102-
* `instance-variables` This group can be used to enforce all other instance variables' positioning.
103-
* `instance-methods` This group is not specified by default, but can be used to enforce all other instance methods positioning.
95+
* `lifecycle` refers to the `lifecycle` group defined in `groups`.
96+
* `everything-else` is a special group that matches all of the methods that do not match any of the other groups.
97+
* `render` refers to the `render` method.
98+
* `type-annotations`. This group is not specified by default, but can be used to enforce flow annotations' positioning.
99+
* `getters` This group is not specified by default, but can be used to enforce class getters' positioning.
100+
* `setters` This group is not specified by default, but can be used to enforce class setters' positioning.
101+
* `instance-variables` This group is not specified by default, but can be used to enforce all other instance variables' positioning.
102+
* `instance-methods` This group is not specified by default, but can be used to enforce all other instance methods' positioning.
104103

105104
You can override this configuration to match your needs.
106105

@@ -224,7 +223,6 @@ class Hello extends React.Component<any, Props, void> {
224223
}
225224
```
226225

227-
228226
## When Not To Use It
229227

230228
This rule is a formatting preference and not following it won't negatively affect the quality of your code. If components organisation isn't a part of your coding standards, then you can leave this rule off.

‎lib/rules/sort-comp.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ const defaultConfig = {
2828
'statics',
2929
'defaultProps',
3030
'constructor',
31-
'instance-variables',
3231
'getDefaultProps',
3332
'state',
3433
'getInitialState',
@@ -44,8 +43,8 @@ const defaultConfig = {
4443
'UNSAFE_componentWillUpdate',
4544
'getSnapshotBeforeUpdate',
4645
'componentDidUpdate',
47-
'componentWillUnmount',
48-
'componentDidCatch'
46+
'componentDidCatch',
47+
'componentWillUnmount'
4948
]
5049
}
5150
};

‎tests/lib/rules/sort-comp.js

Lines changed: 51 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -92,14 +92,59 @@ ruleTester.run('sort-comp', rule, {
9292
]
9393
}]
9494
}, {
95-
// Must validate a full React 16.3 class
95+
// Must validate a full React 16.3 createReactClass class
96+
code: [
97+
'var Hello = createReactClass({',
98+
' displayName : \'\',',
99+
' propTypes: {},',
100+
' contextTypes: {},',
101+
' childContextTypes: {},',
102+
' mixins: [],',
103+
' statics: {},',
104+
' getDefaultProps: function() {},',
105+
' getInitialState: function() {},',
106+
' getChildContext: function() {},',
107+
' UNSAFE_componentWillMount: function() {},',
108+
' componentDidMount: function() {},',
109+
' UNSAFE_componentWillReceiveProps: function() {},',
110+
' shouldComponentUpdate: function() {},',
111+
' UNSAFE_componentWillUpdate: function() {},',
112+
' getSnapshotBeforeUpdate: function() {},',
113+
' componentDidUpdate: function() {},',
114+
' componentDidCatch: function() {},',
115+
' componentWillUnmount: function() {},',
116+
' render: function() {',
117+
' return <div>Hello</div>;',
118+
' }',
119+
'});'
120+
].join('\n')
121+
}, {
122+
// Must validate React 16.3 lifecycle methods with the default parser
123+
code: [
124+
'class Hello extends React.Component {',
125+
' constructor() {}',
126+
' static getDerivedStateFromProps() {}',
127+
' UNSAFE_componentWillMount() {}',
128+
' componentDidMount() {}',
129+
' UNSAFE_componentWillReceiveProps() {}',
130+
' shouldComponentUpdate() {}',
131+
' UNSAFE_componentWillUpdate() {}',
132+
' getSnapshotBeforeUpdate() {}',
133+
' componentDidUpdate() {}',
134+
' componentDidCatch() {}',
135+
' componentWillUnmount() {}',
136+
' testInstanceMethod() {}',
137+
' render() { return (<div>Hello</div>); }',
138+
'}'
139+
].join('\n')
140+
}, {
141+
// Must validate a full React 16.3 ES6 class
96142
code: [
97143
'class Hello extends React.Component {',
98144
' static displayName = \'\'',
99145
' static propTypes = {}',
100-
' static defaultProps = () => {}',
146+
' static defaultProps = {}',
101147
' constructor() {}',
102-
' myInstanceVariable = \'\'',
103148
' state = {}',
104149
' static getDerivedStateFromProps = () => {}',
105150
' UNSAFE_componentWillMount = () => {}',
@@ -109,9 +154,10 @@ ruleTester.run('sort-comp', rule, {
109154
' UNSAFE_componentWillUpdate = () => {}',
110155
' getSnapshotBeforeUpdate = () => {}',
111156
' componentDidUpdate = () => {}',
112-
' componentWillUnmount = () => {}',
113157
' componentDidCatch = () => {}',
114-
' myInstanceMethod = () => {}',
158+
' componentWillUnmount = () => {}',
159+
' testArrowMethod = () => {}',
160+
' testInstanceMethod() {}',
115161
' render = () => (<div>Hello</div>)',
116162
'}'
117163
].join('\n'),

0 commit comments

Comments
 (0)