1 | /**
|
---|
2 | * @fileoverview Prevent usage of Array index in keys
|
---|
3 | * @author Joe Lencioni
|
---|
4 | */
|
---|
5 |
|
---|
6 | 'use strict';
|
---|
7 |
|
---|
8 | const has = require('hasown');
|
---|
9 | const astUtil = require('../util/ast');
|
---|
10 | const docsUrl = require('../util/docsUrl');
|
---|
11 | const pragma = require('../util/pragma');
|
---|
12 | const report = require('../util/report');
|
---|
13 | const variableUtil = require('../util/variable');
|
---|
14 |
|
---|
15 | // ------------------------------------------------------------------------------
|
---|
16 | // Rule Definition
|
---|
17 | // ------------------------------------------------------------------------------
|
---|
18 |
|
---|
19 | function isCreateCloneElement(node, context) {
|
---|
20 | if (!node) {
|
---|
21 | return false;
|
---|
22 | }
|
---|
23 |
|
---|
24 | if (node.type === 'MemberExpression' || node.type === 'OptionalMemberExpression') {
|
---|
25 | return node.object
|
---|
26 | && node.object.name === pragma.getFromContext(context)
|
---|
27 | && ['createElement', 'cloneElement'].indexOf(node.property.name) !== -1;
|
---|
28 | }
|
---|
29 |
|
---|
30 | if (node.type === 'Identifier') {
|
---|
31 | const variable = variableUtil.findVariableByName(context, node, node.name);
|
---|
32 | if (variable && variable.type === 'ImportSpecifier') {
|
---|
33 | return variable.parent.source.value === 'react';
|
---|
34 | }
|
---|
35 | }
|
---|
36 |
|
---|
37 | return false;
|
---|
38 | }
|
---|
39 |
|
---|
40 | const messages = {
|
---|
41 | noArrayIndex: 'Do not use Array index in keys',
|
---|
42 | };
|
---|
43 |
|
---|
44 | /** @type {import('eslint').Rule.RuleModule} */
|
---|
45 | module.exports = {
|
---|
46 | meta: {
|
---|
47 | docs: {
|
---|
48 | description: 'Disallow usage of Array index in keys',
|
---|
49 | category: 'Best Practices',
|
---|
50 | recommended: false,
|
---|
51 | url: docsUrl('no-array-index-key'),
|
---|
52 | },
|
---|
53 |
|
---|
54 | messages,
|
---|
55 |
|
---|
56 | schema: [],
|
---|
57 | },
|
---|
58 |
|
---|
59 | create(context) {
|
---|
60 | // --------------------------------------------------------------------------
|
---|
61 | // Public
|
---|
62 | // --------------------------------------------------------------------------
|
---|
63 | const indexParamNames = [];
|
---|
64 | const iteratorFunctionsToIndexParamPosition = {
|
---|
65 | every: 1,
|
---|
66 | filter: 1,
|
---|
67 | find: 1,
|
---|
68 | findIndex: 1,
|
---|
69 | flatMap: 1,
|
---|
70 | forEach: 1,
|
---|
71 | map: 1,
|
---|
72 | reduce: 2,
|
---|
73 | reduceRight: 2,
|
---|
74 | some: 1,
|
---|
75 | };
|
---|
76 |
|
---|
77 | function isArrayIndex(node) {
|
---|
78 | return node.type === 'Identifier'
|
---|
79 | && indexParamNames.indexOf(node.name) !== -1;
|
---|
80 | }
|
---|
81 |
|
---|
82 | function isUsingReactChildren(node) {
|
---|
83 | const callee = node.callee;
|
---|
84 | if (
|
---|
85 | !callee
|
---|
86 | || !callee.property
|
---|
87 | || !callee.object
|
---|
88 | ) {
|
---|
89 | return null;
|
---|
90 | }
|
---|
91 |
|
---|
92 | const isReactChildMethod = ['map', 'forEach'].indexOf(callee.property.name) > -1;
|
---|
93 | if (!isReactChildMethod) {
|
---|
94 | return null;
|
---|
95 | }
|
---|
96 |
|
---|
97 | const obj = callee.object;
|
---|
98 | if (obj && obj.name === 'Children') {
|
---|
99 | return true;
|
---|
100 | }
|
---|
101 | if (obj && obj.object && obj.object.name === pragma.getFromContext(context)) {
|
---|
102 | return true;
|
---|
103 | }
|
---|
104 |
|
---|
105 | return false;
|
---|
106 | }
|
---|
107 |
|
---|
108 | function getMapIndexParamName(node) {
|
---|
109 | const callee = node.callee;
|
---|
110 | if (callee.type !== 'MemberExpression' && callee.type !== 'OptionalMemberExpression') {
|
---|
111 | return null;
|
---|
112 | }
|
---|
113 | if (callee.property.type !== 'Identifier') {
|
---|
114 | return null;
|
---|
115 | }
|
---|
116 | if (!has(iteratorFunctionsToIndexParamPosition, callee.property.name)) {
|
---|
117 | return null;
|
---|
118 | }
|
---|
119 |
|
---|
120 | const name = /** @type {keyof iteratorFunctionsToIndexParamPosition} */ (callee.property.name);
|
---|
121 |
|
---|
122 | const callbackArg = isUsingReactChildren(node)
|
---|
123 | ? node.arguments[1]
|
---|
124 | : node.arguments[0];
|
---|
125 |
|
---|
126 | if (!callbackArg) {
|
---|
127 | return null;
|
---|
128 | }
|
---|
129 |
|
---|
130 | if (!astUtil.isFunctionLikeExpression(callbackArg)) {
|
---|
131 | return null;
|
---|
132 | }
|
---|
133 |
|
---|
134 | const params = callbackArg.params;
|
---|
135 |
|
---|
136 | const indexParamPosition = iteratorFunctionsToIndexParamPosition[name];
|
---|
137 | if (params.length < indexParamPosition + 1) {
|
---|
138 | return null;
|
---|
139 | }
|
---|
140 |
|
---|
141 | return params[indexParamPosition].name;
|
---|
142 | }
|
---|
143 |
|
---|
144 | function getIdentifiersFromBinaryExpression(side) {
|
---|
145 | if (side.type === 'Identifier') {
|
---|
146 | return side;
|
---|
147 | }
|
---|
148 |
|
---|
149 | if (side.type === 'BinaryExpression') {
|
---|
150 | // recurse
|
---|
151 | const left = getIdentifiersFromBinaryExpression(side.left);
|
---|
152 | const right = getIdentifiersFromBinaryExpression(side.right);
|
---|
153 | return [].concat(left, right).filter(Boolean);
|
---|
154 | }
|
---|
155 |
|
---|
156 | return null;
|
---|
157 | }
|
---|
158 |
|
---|
159 | function checkPropValue(node) {
|
---|
160 | if (isArrayIndex(node)) {
|
---|
161 | // key={bar}
|
---|
162 | report(context, messages.noArrayIndex, 'noArrayIndex', {
|
---|
163 | node,
|
---|
164 | });
|
---|
165 | return;
|
---|
166 | }
|
---|
167 |
|
---|
168 | if (node.type === 'TemplateLiteral') {
|
---|
169 | // key={`foo-${bar}`}
|
---|
170 | node.expressions.filter(isArrayIndex).forEach(() => {
|
---|
171 | report(context, messages.noArrayIndex, 'noArrayIndex', {
|
---|
172 | node,
|
---|
173 | });
|
---|
174 | });
|
---|
175 |
|
---|
176 | return;
|
---|
177 | }
|
---|
178 |
|
---|
179 | if (node.type === 'BinaryExpression') {
|
---|
180 | // key={'foo' + bar}
|
---|
181 | const identifiers = getIdentifiersFromBinaryExpression(node);
|
---|
182 |
|
---|
183 | identifiers.filter(isArrayIndex).forEach(() => {
|
---|
184 | report(context, messages.noArrayIndex, 'noArrayIndex', {
|
---|
185 | node,
|
---|
186 | });
|
---|
187 | });
|
---|
188 |
|
---|
189 | return;
|
---|
190 | }
|
---|
191 |
|
---|
192 | if (node.type === 'CallExpression'
|
---|
193 | && node.callee
|
---|
194 | && node.callee.type === 'MemberExpression'
|
---|
195 | && node.callee.object
|
---|
196 | && isArrayIndex(node.callee.object)
|
---|
197 | && node.callee.property
|
---|
198 | && node.callee.property.type === 'Identifier'
|
---|
199 | && node.callee.property.name === 'toString'
|
---|
200 | ) {
|
---|
201 | // key={bar.toString()}
|
---|
202 | report(context, messages.noArrayIndex, 'noArrayIndex', {
|
---|
203 | node,
|
---|
204 | });
|
---|
205 | return;
|
---|
206 | }
|
---|
207 |
|
---|
208 | if (node.type === 'CallExpression'
|
---|
209 | && node.callee
|
---|
210 | && node.callee.type === 'Identifier'
|
---|
211 | && node.callee.name === 'String'
|
---|
212 | && Array.isArray(node.arguments)
|
---|
213 | && node.arguments.length > 0
|
---|
214 | && isArrayIndex(node.arguments[0])
|
---|
215 | ) {
|
---|
216 | // key={String(bar)}
|
---|
217 | report(context, messages.noArrayIndex, 'noArrayIndex', {
|
---|
218 | node: node.arguments[0],
|
---|
219 | });
|
---|
220 | }
|
---|
221 | }
|
---|
222 |
|
---|
223 | function popIndex(node) {
|
---|
224 | const mapIndexParamName = getMapIndexParamName(node);
|
---|
225 | if (!mapIndexParamName) {
|
---|
226 | return;
|
---|
227 | }
|
---|
228 |
|
---|
229 | indexParamNames.pop();
|
---|
230 | }
|
---|
231 |
|
---|
232 | return {
|
---|
233 | 'CallExpression, OptionalCallExpression'(node) {
|
---|
234 | if (isCreateCloneElement(node.callee, context) && node.arguments.length > 1) {
|
---|
235 | // React.createElement
|
---|
236 | if (!indexParamNames.length) {
|
---|
237 | return;
|
---|
238 | }
|
---|
239 |
|
---|
240 | const props = node.arguments[1];
|
---|
241 |
|
---|
242 | if (props.type !== 'ObjectExpression') {
|
---|
243 | return;
|
---|
244 | }
|
---|
245 |
|
---|
246 | props.properties.forEach((prop) => {
|
---|
247 | if (!prop.key || prop.key.name !== 'key') {
|
---|
248 | // { ...foo }
|
---|
249 | // { foo: bar }
|
---|
250 | return;
|
---|
251 | }
|
---|
252 |
|
---|
253 | checkPropValue(prop.value);
|
---|
254 | });
|
---|
255 |
|
---|
256 | return;
|
---|
257 | }
|
---|
258 |
|
---|
259 | const mapIndexParamName = getMapIndexParamName(node);
|
---|
260 | if (!mapIndexParamName) {
|
---|
261 | return;
|
---|
262 | }
|
---|
263 |
|
---|
264 | indexParamNames.push(mapIndexParamName);
|
---|
265 | },
|
---|
266 |
|
---|
267 | JSXAttribute(node) {
|
---|
268 | if (node.name.name !== 'key') {
|
---|
269 | // foo={bar}
|
---|
270 | return;
|
---|
271 | }
|
---|
272 |
|
---|
273 | if (!indexParamNames.length) {
|
---|
274 | // Not inside a call expression that we think has an index param.
|
---|
275 | return;
|
---|
276 | }
|
---|
277 |
|
---|
278 | const value = node.value;
|
---|
279 | if (!value || value.type !== 'JSXExpressionContainer') {
|
---|
280 | // key='foo' or just simply 'key'
|
---|
281 | return;
|
---|
282 | }
|
---|
283 |
|
---|
284 | checkPropValue(value.expression);
|
---|
285 | },
|
---|
286 |
|
---|
287 | 'CallExpression:exit': popIndex,
|
---|
288 | 'OptionalCallExpression:exit': popIndex,
|
---|
289 | };
|
---|
290 | },
|
---|
291 | };
|
---|