/
jsx-no-useless-fragment.js
121 lines (106 loc) · 2.9 KB
/
jsx-no-useless-fragment.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
113
114
115
116
117
118
119
120
121
/**
* @fileoverview Disallow useless fragments
*/
'use strict';
const pragmaUtil = require('../util/pragma');
const docsUrl = require('../util/docsUrl');
module.exports = {
meta: {
type: 'suggestion',
docs: {
description: 'Disallow unnecessary fragments',
category: 'Possible Errors',
recommended: false,
url: docsUrl('jsx-no-useless-fragment')
},
messages: {
NeedsMoreChidren: 'Fragments should contain more than one child.',
ChildOfHtmlElement: 'Fragment in a html element is useless.'
}
},
create(context) {
const reactPragma = pragmaUtil.getFromContext(context);
const fragmentPragma = pragmaUtil.getFragmentFromContext(context);
/**
* Test whether a JSXElement is a fragment
* @param {JSXElement} node
* @returns {boolean}
*/
function isFragment(node) {
const name = node.openingElement.name;
// <Fragment>
if (
name.type === 'JSXIdentifier'
&& name.name === fragmentPragma
) {
return true;
}
// <React.Fragment>
if (
name.type === 'JSXMemberExpression'
&& name.object.type === 'JSXIdentifier'
&& name.object.name === reactPragma
&& name.property.type === 'JSXIdentifier'
&& name.property.name === fragmentPragma
) {
return true;
}
return false;
}
/**
* Test whether a node is an padding spaces trimmed by react runtime.
* @param {ASTNode} node
* @returns {boolean}
*/
function isPaddingSpaces(node) {
return (node.type === 'JSXText' || node.type === 'Literal')
&& /^\s*$/.test(node.raw)
&& node.raw.includes('\n');
}
/**
* Test whether a JSXElement has less than two children, excluding paddings spaces.
* @param {JSXElement|JSXFragment} node
*/
function hasLessThanTwoChildren(node) {
if (node.children.length < 2) {
return true;
}
return (
node.children.length
- Number(isPaddingSpaces(node.children[0]))
- Number(isPaddingSpaces(node.children[node.children.length - 1]))
) < 2;
}
/**
* @param {JSXElement|JSXFragment} node
* @returns {boolean}
*/
function isChildOfHtmlElement(node) {
return node.parent.type === 'JSXElement'
&& node.parent.openingElement.name.type === 'JSXIdentifier'
&& /^[a-z]+$/.test(node.parent.openingElement.name.name);
}
function checkNode(node) {
if (hasLessThanTwoChildren(node)) {
context.report({
node,
messageId: 'NeedsMoreChidren'
});
}
if (isChildOfHtmlElement(node)) {
context.report({
node,
messageId: 'ChildOfHtmlElement'
});
}
}
return {
JSXElement(node) {
if (isFragment(node)) {
checkNode(node);
}
},
JSXFragment: checkNode
};
}
};