/
no-unstable-nested-components.js
112 lines (95 loc) · 3.63 KB
/
no-unstable-nested-components.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
/**
* @fileoverview Prevent creating unstable components inside components
* @author Ari Perkkiö
*/
'use strict';
const Components = require('../util/Components');
const docsUrl = require('../util/docsUrl');
// ------------------------------------------------------------------------------
// Constants
// ------------------------------------------------------------------------------
const ERROR_MESSAGE = 'Do not create unstable nested components. Declare them outside the component or memoize them.';
// ------------------------------------------------------------------------------
// Rule Definition
// ------------------------------------------------------------------------------
module.exports = {
meta: {
docs: {
description: 'Prevent creating unstable components inside components',
category: 'Possible Errors',
recommended: false,
url: docsUrl('no-unstable-nested-components')
},
schema: []
},
create: Components.detect((context, components, utils) => {
/**
* Check whether given node is declared inside another component
* @param {ASTNode} node The AST node being checked
* @returns {Boolean} True if node has a parent component, false if not
*/
function isAnyParentComponent(node) {
if (!node.parent || node.parent.type === 'Program') {
return false;
}
return components.get(node.parent) || isAnyParentComponent(node.parent);
}
/**
* Check whether given node is inside class component's render block
* @param {ASTNode} node The AST node being checked
* @returns {Boolean} True if node is inside class component's render block, false if not
*/
function isInsideRenderMethod(node) {
const parentComponent = utils.getParentComponent();
if (!parentComponent || parentComponent.type !== 'ClassDeclaration') {
return false;
}
return (
node.parent
&& node.parent.type === 'MethodDefinition'
&& node.parent.key
&& node.parent.key.name === 'render'
);
}
/**
* Check whether current node is a stateless component declared inside class component.
* Util's component detection fails to detect stateless components inside class components.
* @returns {Boolean} True if current node a stateless component declared inside class component, false if not
*/
function isStatelessComponentInsideClassComponent() {
const parentComponent = utils.getParentComponent();
const parentStatelessComponent = utils.getParentStatelessComponent();
return (
parentComponent
&& parentStatelessComponent
&& parentComponent.type === 'ClassDeclaration'
&& utils.getStatelessComponent(parentStatelessComponent)
);
}
/**
* Check whether given node is a unstable nested component
* @param {ASTNode} node The AST node being checked
*/
function validate(node) {
if (!components.get(node) && !isStatelessComponentInsideClassComponent()) {
return;
}
// Prevent reporting nested class components twice
if (isInsideRenderMethod(node)) {
return;
}
if (isAnyParentComponent(node)) {
context.report({node, message: ERROR_MESSAGE});
}
}
// --------------------------------------------------------------------------
// Public
// --------------------------------------------------------------------------
return {
FunctionDeclaration(node) { validate(node); },
ArrowFunctionExpression(node) { validate(node); },
FunctionExpression(node) { validate(node); },
ClassDeclaration(node) { validate(node); }
};
})
};