1 | /**
|
---|
2 | * @fileoverview Enforce stateless components to be written as a pure function
|
---|
3 | * @author Yannick Croissant
|
---|
4 | * @author Alberto Rodríguez
|
---|
5 | * @copyright 2015 Alberto Rodríguez. All rights reserved.
|
---|
6 | */
|
---|
7 |
|
---|
8 | 'use strict';
|
---|
9 |
|
---|
10 | const values = require('object.values');
|
---|
11 |
|
---|
12 | const Components = require('../util/Components');
|
---|
13 | const testReactVersion = require('../util/version').testReactVersion;
|
---|
14 | const astUtil = require('../util/ast');
|
---|
15 | const componentUtil = require('../util/componentUtil');
|
---|
16 | const docsUrl = require('../util/docsUrl');
|
---|
17 | const report = require('../util/report');
|
---|
18 | const eslintUtil = require('../util/eslint');
|
---|
19 |
|
---|
20 | const getScope = eslintUtil.getScope;
|
---|
21 | const getText = eslintUtil.getText;
|
---|
22 |
|
---|
23 | // ------------------------------------------------------------------------------
|
---|
24 | // Rule Definition
|
---|
25 | // ------------------------------------------------------------------------------
|
---|
26 |
|
---|
27 | const messages = {
|
---|
28 | componentShouldBePure: 'Component should be written as a pure function',
|
---|
29 | };
|
---|
30 |
|
---|
31 | /** @type {import('eslint').Rule.RuleModule} */
|
---|
32 | module.exports = {
|
---|
33 | meta: {
|
---|
34 | docs: {
|
---|
35 | description: 'Enforce stateless components to be written as a pure function',
|
---|
36 | category: 'Stylistic Issues',
|
---|
37 | recommended: false,
|
---|
38 | url: docsUrl('prefer-stateless-function'),
|
---|
39 | },
|
---|
40 |
|
---|
41 | messages,
|
---|
42 |
|
---|
43 | schema: [{
|
---|
44 | type: 'object',
|
---|
45 | properties: {
|
---|
46 | ignorePureComponents: {
|
---|
47 | default: false,
|
---|
48 | type: 'boolean',
|
---|
49 | },
|
---|
50 | },
|
---|
51 | additionalProperties: false,
|
---|
52 | }],
|
---|
53 | },
|
---|
54 |
|
---|
55 | create: Components.detect((context, components, utils) => {
|
---|
56 | const configuration = context.options[0] || {};
|
---|
57 | const ignorePureComponents = configuration.ignorePureComponents || false;
|
---|
58 |
|
---|
59 | // --------------------------------------------------------------------------
|
---|
60 | // Public
|
---|
61 | // --------------------------------------------------------------------------
|
---|
62 |
|
---|
63 | /**
|
---|
64 | * Checks whether a given array of statements is a single call of `super`.
|
---|
65 | * @see eslint no-useless-constructor rule
|
---|
66 | * @param {ASTNode[]} body - An array of statements to check.
|
---|
67 | * @returns {boolean} `true` if the body is a single call of `super`.
|
---|
68 | */
|
---|
69 | function isSingleSuperCall(body) {
|
---|
70 | return (
|
---|
71 | body.length === 1
|
---|
72 | && body[0].type === 'ExpressionStatement'
|
---|
73 | && body[0].expression.type === 'CallExpression'
|
---|
74 | && body[0].expression.callee.type === 'Super'
|
---|
75 | );
|
---|
76 | }
|
---|
77 |
|
---|
78 | /**
|
---|
79 | * Checks whether a given node is a pattern which doesn't have any side effects.
|
---|
80 | * Default parameters and Destructuring parameters can have side effects.
|
---|
81 | * @see eslint no-useless-constructor rule
|
---|
82 | * @param {ASTNode} node - A pattern node.
|
---|
83 | * @returns {boolean} `true` if the node doesn't have any side effects.
|
---|
84 | */
|
---|
85 | function isSimple(node) {
|
---|
86 | return node.type === 'Identifier' || node.type === 'RestElement';
|
---|
87 | }
|
---|
88 |
|
---|
89 | /**
|
---|
90 | * Checks whether a given array of expressions is `...arguments` or not.
|
---|
91 | * `super(...arguments)` passes all arguments through.
|
---|
92 | * @see eslint no-useless-constructor rule
|
---|
93 | * @param {ASTNode[]} superArgs - An array of expressions to check.
|
---|
94 | * @returns {boolean} `true` if the superArgs is `...arguments`.
|
---|
95 | */
|
---|
96 | function isSpreadArguments(superArgs) {
|
---|
97 | return (
|
---|
98 | superArgs.length === 1
|
---|
99 | && superArgs[0].type === 'SpreadElement'
|
---|
100 | && superArgs[0].argument.type === 'Identifier'
|
---|
101 | && superArgs[0].argument.name === 'arguments'
|
---|
102 | );
|
---|
103 | }
|
---|
104 |
|
---|
105 | /**
|
---|
106 | * Checks whether given 2 nodes are identifiers which have the same name or not.
|
---|
107 | * @see eslint no-useless-constructor rule
|
---|
108 | * @param {ASTNode} ctorParam - A node to check.
|
---|
109 | * @param {ASTNode} superArg - A node to check.
|
---|
110 | * @returns {boolean} `true` if the nodes are identifiers which have the same
|
---|
111 | * name.
|
---|
112 | */
|
---|
113 | function isValidIdentifierPair(ctorParam, superArg) {
|
---|
114 | return (
|
---|
115 | ctorParam.type === 'Identifier'
|
---|
116 | && superArg.type === 'Identifier'
|
---|
117 | && ctorParam.name === superArg.name
|
---|
118 | );
|
---|
119 | }
|
---|
120 |
|
---|
121 | /**
|
---|
122 | * Checks whether given 2 nodes are a rest/spread pair which has the same values.
|
---|
123 | * @see eslint no-useless-constructor rule
|
---|
124 | * @param {ASTNode} ctorParam - A node to check.
|
---|
125 | * @param {ASTNode} superArg - A node to check.
|
---|
126 | * @returns {boolean} `true` if the nodes are a rest/spread pair which has the
|
---|
127 | * same values.
|
---|
128 | */
|
---|
129 | function isValidRestSpreadPair(ctorParam, superArg) {
|
---|
130 | return (
|
---|
131 | ctorParam.type === 'RestElement'
|
---|
132 | && superArg.type === 'SpreadElement'
|
---|
133 | && isValidIdentifierPair(ctorParam.argument, superArg.argument)
|
---|
134 | );
|
---|
135 | }
|
---|
136 |
|
---|
137 | /**
|
---|
138 | * Checks whether given 2 nodes have the same value or not.
|
---|
139 | * @see eslint no-useless-constructor rule
|
---|
140 | * @param {ASTNode} ctorParam - A node to check.
|
---|
141 | * @param {ASTNode} superArg - A node to check.
|
---|
142 | * @returns {boolean} `true` if the nodes have the same value or not.
|
---|
143 | */
|
---|
144 | function isValidPair(ctorParam, superArg) {
|
---|
145 | return (
|
---|
146 | isValidIdentifierPair(ctorParam, superArg)
|
---|
147 | || isValidRestSpreadPair(ctorParam, superArg)
|
---|
148 | );
|
---|
149 | }
|
---|
150 |
|
---|
151 | /**
|
---|
152 | * Checks whether the parameters of a constructor and the arguments of `super()`
|
---|
153 | * have the same values or not.
|
---|
154 | * @see eslint no-useless-constructor rule
|
---|
155 | * @param {ASTNode[]} ctorParams - The parameters of a constructor to check.
|
---|
156 | * @param {ASTNode} superArgs - The arguments of `super()` to check.
|
---|
157 | * @returns {boolean} `true` if those have the same values.
|
---|
158 | */
|
---|
159 | function isPassingThrough(ctorParams, superArgs) {
|
---|
160 | if (ctorParams.length !== superArgs.length) {
|
---|
161 | return false;
|
---|
162 | }
|
---|
163 |
|
---|
164 | for (let i = 0; i < ctorParams.length; ++i) {
|
---|
165 | if (!isValidPair(ctorParams[i], superArgs[i])) {
|
---|
166 | return false;
|
---|
167 | }
|
---|
168 | }
|
---|
169 |
|
---|
170 | return true;
|
---|
171 | }
|
---|
172 |
|
---|
173 | /**
|
---|
174 | * Checks whether the constructor body is a redundant super call.
|
---|
175 | * @see eslint no-useless-constructor rule
|
---|
176 | * @param {Array} body - constructor body content.
|
---|
177 | * @param {Array} ctorParams - The params to check against super call.
|
---|
178 | * @returns {boolean} true if the constructor body is redundant
|
---|
179 | */
|
---|
180 | function isRedundantSuperCall(body, ctorParams) {
|
---|
181 | return (
|
---|
182 | isSingleSuperCall(body)
|
---|
183 | && ctorParams.every(isSimple)
|
---|
184 | && (
|
---|
185 | isSpreadArguments(body[0].expression.arguments)
|
---|
186 | || isPassingThrough(ctorParams, body[0].expression.arguments)
|
---|
187 | )
|
---|
188 | );
|
---|
189 | }
|
---|
190 |
|
---|
191 | /**
|
---|
192 | * Check if a given AST node have any other properties the ones available in stateless components
|
---|
193 | * @param {ASTNode} node The AST node being checked.
|
---|
194 | * @returns {Boolean} True if the node has at least one other property, false if not.
|
---|
195 | */
|
---|
196 | function hasOtherProperties(node) {
|
---|
197 | const properties = astUtil.getComponentProperties(node);
|
---|
198 | return properties.some((property) => {
|
---|
199 | const name = astUtil.getPropertyName(property);
|
---|
200 | const isDisplayName = name === 'displayName';
|
---|
201 | const isPropTypes = name === 'propTypes' || ((name === 'props') && property.typeAnnotation);
|
---|
202 | const contextTypes = name === 'contextTypes';
|
---|
203 | const defaultProps = name === 'defaultProps';
|
---|
204 | const isUselessConstructor = property.kind === 'constructor'
|
---|
205 | && !!property.value.body
|
---|
206 | && isRedundantSuperCall(property.value.body.body, property.value.params);
|
---|
207 | const isRender = name === 'render';
|
---|
208 | return !isDisplayName && !isPropTypes && !contextTypes && !defaultProps && !isUselessConstructor && !isRender;
|
---|
209 | });
|
---|
210 | }
|
---|
211 |
|
---|
212 | /**
|
---|
213 | * Mark component as pure as declared
|
---|
214 | * @param {ASTNode} node The AST node being checked.
|
---|
215 | */
|
---|
216 | function markSCUAsDeclared(node) {
|
---|
217 | components.set(node, {
|
---|
218 | hasSCU: true,
|
---|
219 | });
|
---|
220 | }
|
---|
221 |
|
---|
222 | /**
|
---|
223 | * Mark childContextTypes as declared
|
---|
224 | * @param {ASTNode} node The AST node being checked.
|
---|
225 | */
|
---|
226 | function markChildContextTypesAsDeclared(node) {
|
---|
227 | components.set(node, {
|
---|
228 | hasChildContextTypes: true,
|
---|
229 | });
|
---|
230 | }
|
---|
231 |
|
---|
232 | /**
|
---|
233 | * Mark a setState as used
|
---|
234 | * @param {ASTNode} node The AST node being checked.
|
---|
235 | */
|
---|
236 | function markThisAsUsed(node) {
|
---|
237 | components.set(node, {
|
---|
238 | useThis: true,
|
---|
239 | });
|
---|
240 | }
|
---|
241 |
|
---|
242 | /**
|
---|
243 | * Mark a props or context as used
|
---|
244 | * @param {ASTNode} node The AST node being checked.
|
---|
245 | */
|
---|
246 | function markPropsOrContextAsUsed(node) {
|
---|
247 | components.set(node, {
|
---|
248 | usePropsOrContext: true,
|
---|
249 | });
|
---|
250 | }
|
---|
251 |
|
---|
252 | /**
|
---|
253 | * Mark a ref as used
|
---|
254 | * @param {ASTNode} node The AST node being checked.
|
---|
255 | */
|
---|
256 | function markRefAsUsed(node) {
|
---|
257 | components.set(node, {
|
---|
258 | useRef: true,
|
---|
259 | });
|
---|
260 | }
|
---|
261 |
|
---|
262 | /**
|
---|
263 | * Mark return as invalid
|
---|
264 | * @param {ASTNode} node The AST node being checked.
|
---|
265 | */
|
---|
266 | function markReturnAsInvalid(node) {
|
---|
267 | components.set(node, {
|
---|
268 | invalidReturn: true,
|
---|
269 | });
|
---|
270 | }
|
---|
271 |
|
---|
272 | /**
|
---|
273 | * Mark a ClassDeclaration as having used decorators
|
---|
274 | * @param {ASTNode} node The AST node being checked.
|
---|
275 | */
|
---|
276 | function markDecoratorsAsUsed(node) {
|
---|
277 | components.set(node, {
|
---|
278 | useDecorators: true,
|
---|
279 | });
|
---|
280 | }
|
---|
281 |
|
---|
282 | function visitClass(node) {
|
---|
283 | if (ignorePureComponents && componentUtil.isPureComponent(node, context)) {
|
---|
284 | markSCUAsDeclared(node);
|
---|
285 | }
|
---|
286 |
|
---|
287 | if (node.decorators && node.decorators.length) {
|
---|
288 | markDecoratorsAsUsed(node);
|
---|
289 | }
|
---|
290 | }
|
---|
291 |
|
---|
292 | return {
|
---|
293 | ClassDeclaration: visitClass,
|
---|
294 | ClassExpression: visitClass,
|
---|
295 |
|
---|
296 | // Mark `this` destructuring as a usage of `this`
|
---|
297 | VariableDeclarator(node) {
|
---|
298 | // Ignore destructuring on other than `this`
|
---|
299 | if (!node.id || node.id.type !== 'ObjectPattern' || !node.init || node.init.type !== 'ThisExpression') {
|
---|
300 | return;
|
---|
301 | }
|
---|
302 | // Ignore `props` and `context`
|
---|
303 | const useThis = node.id.properties.some((property) => {
|
---|
304 | const name = astUtil.getPropertyName(property);
|
---|
305 | return name !== 'props' && name !== 'context';
|
---|
306 | });
|
---|
307 | if (!useThis) {
|
---|
308 | markPropsOrContextAsUsed(node);
|
---|
309 | return;
|
---|
310 | }
|
---|
311 | markThisAsUsed(node);
|
---|
312 | },
|
---|
313 |
|
---|
314 | // Mark `this` usage
|
---|
315 | MemberExpression(node) {
|
---|
316 | if (node.object.type !== 'ThisExpression') {
|
---|
317 | if (node.property && node.property.name === 'childContextTypes') {
|
---|
318 | const component = utils.getRelatedComponent(node);
|
---|
319 | if (!component) {
|
---|
320 | return;
|
---|
321 | }
|
---|
322 | markChildContextTypesAsDeclared(component.node);
|
---|
323 | }
|
---|
324 | return;
|
---|
325 | // Ignore calls to `this.props` and `this.context`
|
---|
326 | }
|
---|
327 | if (
|
---|
328 | (node.property.name || node.property.value) === 'props'
|
---|
329 | || (node.property.name || node.property.value) === 'context'
|
---|
330 | ) {
|
---|
331 | markPropsOrContextAsUsed(node);
|
---|
332 | return;
|
---|
333 | }
|
---|
334 | markThisAsUsed(node);
|
---|
335 | },
|
---|
336 |
|
---|
337 | // Mark `ref` usage
|
---|
338 | JSXAttribute(node) {
|
---|
339 | const name = getText(context, node.name);
|
---|
340 | if (name !== 'ref') {
|
---|
341 | return;
|
---|
342 | }
|
---|
343 | markRefAsUsed(node);
|
---|
344 | },
|
---|
345 |
|
---|
346 | // Mark `render` that do not return some JSX
|
---|
347 | ReturnStatement(node) {
|
---|
348 | let blockNode;
|
---|
349 | let scope = getScope(context, node);
|
---|
350 | while (scope) {
|
---|
351 | blockNode = scope.block && scope.block.parent;
|
---|
352 | if (blockNode && (blockNode.type === 'MethodDefinition' || blockNode.type === 'Property')) {
|
---|
353 | break;
|
---|
354 | }
|
---|
355 | scope = scope.upper;
|
---|
356 | }
|
---|
357 | const isRender = blockNode && blockNode.key && blockNode.key.name === 'render';
|
---|
358 | const allowNull = testReactVersion(context, '>= 15.0.0'); // Stateless components can return null since React 15
|
---|
359 | const isReturningJSX = utils.isReturningJSX(node, !allowNull);
|
---|
360 | const isReturningNull = node.argument && (node.argument.value === null || node.argument.value === false);
|
---|
361 | if (
|
---|
362 | !isRender
|
---|
363 | || (allowNull && (isReturningJSX || isReturningNull))
|
---|
364 | || (!allowNull && isReturningJSX)
|
---|
365 | ) {
|
---|
366 | return;
|
---|
367 | }
|
---|
368 | markReturnAsInvalid(node);
|
---|
369 | },
|
---|
370 |
|
---|
371 | 'Program:exit'() {
|
---|
372 | const list = components.list();
|
---|
373 | values(list)
|
---|
374 | .filter((component) => (
|
---|
375 | !hasOtherProperties(component.node)
|
---|
376 | && !component.useThis
|
---|
377 | && !component.useRef
|
---|
378 | && !component.invalidReturn
|
---|
379 | && !component.hasChildContextTypes
|
---|
380 | && !component.useDecorators
|
---|
381 | && !component.hasSCU
|
---|
382 | && (
|
---|
383 | componentUtil.isES5Component(component.node, context)
|
---|
384 | || componentUtil.isES6Component(component.node, context)
|
---|
385 | )
|
---|
386 | ))
|
---|
387 | .forEach((component) => {
|
---|
388 | report(context, messages.componentShouldBePure, 'componentShouldBePure', {
|
---|
389 | node: component.node,
|
---|
390 | });
|
---|
391 | });
|
---|
392 | },
|
---|
393 | };
|
---|
394 | }),
|
---|
395 | };
|
---|