Skip to content

Commit e907b67

Browse files
[fix] Allow whitespace jsx container in jsx-curly-brace-presence (fixes: #1717)
1 parent 14b8d01 commit e907b67

File tree

3 files changed

+60
-4
lines changed

3 files changed

+60
-4
lines changed

docs/rules/jsx-curly-brace-presence.md

+7-1
Original file line numberDiff line numberDiff line change
@@ -139,12 +139,18 @@ will warned and fixed to:
139139

140140
* If the rule is set to get rid of unnecessary curly braces(JSX expression) and there are characters that need to be escaped in its JSX form, such as quote characters, [forbidden JSX text characters](https://facebook.github.io/jsx/), escaped characters and anything that looks like HTML entity names, the code will not be warned because the fix may make the code less readable.
141141

142-
The following pattern will **not** be given a warning even if `'never'` is passed.
142+
The following patterns will **not** be given a warning even if `'never'` is passed.
143143

144144
```jsx
145145
<Color text={"\u00a0"} />
146146
<App>{"Hello \u00b7 world"}</App>;
147147
<style type="text/css">{'.main { margin-top: 0; }'}</style>;
148+
/**
149+
* there's no way to inject a whitespace into jsx without a container so this
150+
* will always be allowed.
151+
*/
152+
<App>{' '}</App>
153+
<App>{' '}</App>
148154
```
149155

150156
## When Not To Use It

lib/rules/jsx-curly-brace-presence.js

+27-3
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,14 @@ module.exports = {
9999
);
100100
}
101101

102+
function containsWhitespaceExpression(child) {
103+
if (child.type === 'JSXExpressionContainer') {
104+
const value = child.expression.value;
105+
return value ? !(/\S/.test(value)) : false;
106+
}
107+
return false;
108+
}
109+
102110
/**
103111
* Report and fix an unnecessary curly brace violation on a node
104112
* @param {ASTNode} node - The AST node with an unnecessary JSX expression
@@ -204,11 +212,27 @@ module.exports = {
204212
return false;
205213
}
206214

215+
if (
216+
parent.children
217+
&& parent.children.length === 1
218+
&& containsWhitespaceExpression(parent.children[0])
219+
) {
220+
return false;
221+
}
222+
207223
return areRuleConditionsSatisfied(parentType, config, OPTION_NEVER);
208224
}
209225

210-
function shouldCheckForMissingCurly(parentType, config) {
211-
return areRuleConditionsSatisfied(parentType, config, OPTION_ALWAYS);
226+
function shouldCheckForMissingCurly(parent, config) {
227+
if (
228+
parent.children
229+
&& parent.children.length === 1
230+
&& containsWhitespaceExpression(parent.children[0])
231+
) {
232+
return false;
233+
}
234+
235+
return areRuleConditionsSatisfied(parent.type, config, OPTION_ALWAYS);
212236
}
213237

214238
// --------------------------------------------------------------------------
@@ -223,7 +247,7 @@ module.exports = {
223247
},
224248

225249
Literal: node => {
226-
if (shouldCheckForMissingCurly(node.parent.type, userConfig)) {
250+
if (shouldCheckForMissingCurly(node.parent, userConfig)) {
227251
reportMissingCurly(node);
228252
}
229253
}

tests/lib/rules/jsx-curly-brace-presence.js

+26
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,32 @@ ruleTester.run('jsx-curly-brace-presence', rule, {
3636
code: '<App {...props}>foo</App>',
3737
options: [{props: 'never'}]
3838
},
39+
/*
40+
* There is no way to inject the space into JSX without an expression container
41+
* so this format should always be allowed regardless of the `children` option.
42+
*/
43+
{
44+
code: '<App>{\' \'}</App>'
45+
},
46+
{
47+
code: '<App>{\' \'}</App>'
48+
},
49+
{
50+
code: '<App>{\' \'}</App>',
51+
options: [{children: 'never'}]
52+
},
53+
{
54+
code: '<App>{\' \'}</App>',
55+
options: [{children: 'never'}]
56+
},
57+
{
58+
code: '<App>{\' \'}</App>',
59+
options: [{children: 'always'}]
60+
},
61+
{
62+
code: '<App>{\' \'}</App>',
63+
options: [{children: 'always'}]
64+
},
3965
{
4066
code: '<App {...props}>foo</App>',
4167
options: [{props: 'always'}]

0 commit comments

Comments
 (0)