1 |
|
2 |
|
3 |
|
4 |
|
5 | 'use strict';
|
6 |
|
7 | const arrayIncludes = require('array-includes');
|
8 |
|
9 | const pragmaUtil = require('../util/pragma');
|
10 | const jsxUtil = require('../util/jsx');
|
11 | const docsUrl = require('../util/docsUrl');
|
12 |
|
13 | function isJSXText(node) {
|
14 | return !!node && (node.type === 'JSXText' || node.type === 'Literal');
|
15 | }
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 | function isOnlyWhitespace(text) {
|
22 | return text.trim().length === 0;
|
23 | }
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 | function isNonspaceJSXTextOrJSXCurly(node) {
|
30 | return (isJSXText(node) && !isOnlyWhitespace(node.raw)) || node.type === 'JSXExpressionContainer';
|
31 | }
|
32 |
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 | function isFragmentWithOnlyTextAndIsNotChild(node) {
|
39 | return node.children.length === 1
|
40 | && isJSXText(node.children[0])
|
41 | && !(node.parent.type === 'JSXElement' || node.parent.type === 'JSXFragment');
|
42 | }
|
43 |
|
44 |
|
45 |
|
46 |
|
47 |
|
48 | function trimLikeReact(text) {
|
49 | const leadingSpaces = /^\s*/.exec(text)[0];
|
50 | const trailingSpaces = /\s*$/.exec(text)[0];
|
51 |
|
52 | const start = arrayIncludes(leadingSpaces, '\n') ? leadingSpaces.length : 0;
|
53 | const end = arrayIncludes(trailingSpaces, '\n') ? text.length - trailingSpaces.length : text.length;
|
54 |
|
55 | return text.slice(start, end);
|
56 | }
|
57 |
|
58 |
|
59 |
|
60 |
|
61 |
|
62 |
|
63 | function isKeyedElement(node) {
|
64 | return node.type === 'JSXElement'
|
65 | && node.openingElement.attributes
|
66 | && node.openingElement.attributes.some(jsxUtil.isJSXAttributeKey);
|
67 | }
|
68 |
|
69 |
|
70 |
|
71 |
|
72 |
|
73 | function containsCallExpression(node) {
|
74 | return node
|
75 | && node.type === 'JSXExpressionContainer'
|
76 | && node.expression
|
77 | && node.expression.type === 'CallExpression';
|
78 | }
|
79 |
|
80 | module.exports = {
|
81 | meta: {
|
82 | type: 'suggestion',
|
83 | fixable: 'code',
|
84 | docs: {
|
85 | description: 'Disallow unnecessary fragments',
|
86 | category: 'Possible Errors',
|
87 | recommended: false,
|
88 | url: docsUrl('jsx-no-useless-fragment')
|
89 | },
|
90 | messages: {
|
91 | NeedsMoreChidren: 'Fragments should contain more than one child - otherwise, there‘s no need for a Fragment at all.',
|
92 | ChildOfHtmlElement: 'Passing a fragment to an HTML element is useless.'
|
93 | }
|
94 | },
|
95 |
|
96 | create(context) {
|
97 | const reactPragma = pragmaUtil.getFromContext(context);
|
98 | const fragmentPragma = pragmaUtil.getFragmentFromContext(context);
|
99 |
|
100 | |
101 |
|
102 |
|
103 |
|
104 |
|
105 | function isPaddingSpaces(node) {
|
106 | return isJSXText(node)
|
107 | && isOnlyWhitespace(node.raw)
|
108 | && arrayIncludes(node.raw, '\n');
|
109 | }
|
110 |
|
111 | |
112 |
|
113 |
|
114 |
|
115 |
|
116 | function hasLessThanTwoChildren(node) {
|
117 | if (!node || !node.children) {
|
118 | return true;
|
119 | }
|
120 |
|
121 |
|
122 | const nonPaddingChildren = node.children.filter(
|
123 | (child) => !isPaddingSpaces(child)
|
124 | );
|
125 |
|
126 | if (nonPaddingChildren.length < 2) {
|
127 | return !containsCallExpression(nonPaddingChildren[0]);
|
128 | }
|
129 | }
|
130 |
|
131 | |
132 |
|
133 |
|
134 |
|
135 | function isChildOfHtmlElement(node) {
|
136 | return node.parent.type === 'JSXElement'
|
137 | && node.parent.openingElement.name.type === 'JSXIdentifier'
|
138 | && /^[a-z]+$/.test(node.parent.openingElement.name.name);
|
139 | }
|
140 |
|
141 | |
142 |
|
143 |
|
144 |
|
145 | function isChildOfComponentElement(node) {
|
146 | return node.parent.type === 'JSXElement'
|
147 | && !isChildOfHtmlElement(node)
|
148 | && !jsxUtil.isFragment(node.parent, reactPragma, fragmentPragma);
|
149 | }
|
150 |
|
151 | |
152 |
|
153 |
|
154 |
|
155 | function canFix(node) {
|
156 |
|
157 | if (!(node.parent.type === 'JSXElement' || node.parent.type === 'JSXFragment')) {
|
158 |
|
159 | if (node.children.length === 0) {
|
160 | return false;
|
161 | }
|
162 |
|
163 |
|
164 | if (node.children.some(isNonspaceJSXTextOrJSXCurly)) {
|
165 | return false;
|
166 | }
|
167 | }
|
168 |
|
169 |
|
170 | if (isChildOfComponentElement(node)) {
|
171 | return false;
|
172 | }
|
173 |
|
174 | return true;
|
175 | }
|
176 |
|
177 | |
178 |
|
179 |
|
180 |
|
181 | function getFix(node) {
|
182 | if (!canFix(node)) {
|
183 | return undefined;
|
184 | }
|
185 |
|
186 | return function fix(fixer) {
|
187 | const opener = node.type === 'JSXFragment' ? node.openingFragment : node.openingElement;
|
188 | const closer = node.type === 'JSXFragment' ? node.closingFragment : node.closingElement;
|
189 |
|
190 | const childrenText = opener.selfClosing ? '' : context.getSourceCode().getText().slice(opener.range[1], closer.range[0]);
|
191 |
|
192 | return fixer.replaceText(node, trimLikeReact(childrenText));
|
193 | };
|
194 | }
|
195 |
|
196 | function checkNode(node) {
|
197 | if (isKeyedElement(node)) {
|
198 | return;
|
199 | }
|
200 |
|
201 | if (hasLessThanTwoChildren(node) && !isFragmentWithOnlyTextAndIsNotChild(node)) {
|
202 | context.report({
|
203 | node,
|
204 | messageId: 'NeedsMoreChidren',
|
205 | fix: getFix(node)
|
206 | });
|
207 | }
|
208 |
|
209 | if (isChildOfHtmlElement(node)) {
|
210 | context.report({
|
211 | node,
|
212 | messageId: 'ChildOfHtmlElement',
|
213 | fix: getFix(node)
|
214 | });
|
215 | }
|
216 | }
|
217 |
|
218 | return {
|
219 | JSXElement(node) {
|
220 | if (jsxUtil.isFragment(node, reactPragma, fragmentPragma)) {
|
221 | checkNode(node);
|
222 | }
|
223 | },
|
224 | JSXFragment: checkNode
|
225 | };
|
226 | }
|
227 | };
|