Skip to content

Commit da9cbe9

Browse files
lencionilencioni
authored
Merge pull request #1384 from evgeny-petukhov/master
[jsx-wrap-multilines] Add new nodes for wrap
2 parents aad4a37 + cfcb2bb commit da9cbe9

File tree

3 files changed

+204
-4
lines changed

3 files changed

+204
-4
lines changed

‎docs/rules/jsx-wrap-multilines.md

Lines changed: 69 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,17 @@ Wrapping multiline JSX in parentheses can improve readability and/or convenience
66

77
## Rule Details
88

9-
This rule optionally takes a second parameter in the form of an object, containing places to apply the rule. By default, all the syntax listed below will be checked, but these can be explicitly disabled. Any syntax type missing in the object will follow the default behavior (become enabled).
9+
This rule optionally takes a second parameter in the form of an object, containing places to apply the rule. By default, all the syntax listed below will be checked except the conditions out of declaration or assignment, logical expressions and JSX attributes, but these can be explicitly disabled. Any syntax type missing in the object will follow the default behavior (become enabled).
1010

1111
There are the possible syntax available:
1212

1313
* `declaration`
1414
* `assignment`
1515
* `return`
1616
* `arrow`
17+
* `condition` (not enabed by default, by default only conditions in declaraiton or assignment)
18+
* `logical` (not enabled by default)
19+
* `prop` (not enabled by default)
1720

1821
The following patterns are considered warnings:
1922

@@ -118,3 +121,68 @@ var hello = () => (
118121
</div>
119122
);
120123
```
124+
125+
The following patterns are considered warnings when configured `{condition: true}`.
126+
127+
```jsx
128+
<div>
129+
{foo ? <div>
130+
<p>Hello</p>
131+
</div> : null}
132+
</div>
133+
```
134+
135+
The following patterns are not considered warnings when configured `{condition: true}`.
136+
137+
```jsx
138+
<div>
139+
{foo ? (<div>
140+
<p>Hello</p>
141+
</div>) : null}
142+
</div>
143+
```
144+
145+
146+
The following patterns are considered warnings when configured `{logical: true}`.
147+
148+
```jsx
149+
<div>
150+
{foo &&
151+
<div>
152+
<p>Hello World</p>
153+
</div>
154+
}
155+
</div>
156+
```
157+
158+
The following patterns are not considered warnings when configured `{logical: true}`.
159+
160+
```jsx
161+
<div>
162+
{foo &&
163+
(<div>
164+
<p>Hello World</p>
165+
</div>)
166+
}
167+
</div>
168+
```
169+
170+
The following patterns are considered warnings when configured `{attr: true}`.
171+
172+
```jsx
173+
<div attr={<div>
174+
<p>Hello</p>
175+
</div>}>
176+
<p>Hello</p>
177+
</div>;
178+
```
179+
180+
The following patterns are not considered warnings when configured `{attr: true}`.
181+
182+
```jsx
183+
<div attr={(<div>
184+
<p>Hello</p>
185+
</div>)}>
186+
<p>Hello</p>
187+
</div>;
188+
```

‎lib/rules/jsx-wrap-multilines.js

Lines changed: 34 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,10 @@ const DEFAULTS = {
1414
declaration: true,
1515
assignment: true,
1616
return: true,
17-
arrow: true
17+
arrow: true,
18+
condition: false,
19+
logical: false,
20+
prop: false
1821
};
1922

2023
// ------------------------------------------------------------------------------
@@ -44,6 +47,15 @@ module.exports = {
4447
},
4548
arrow: {
4649
type: 'boolean'
50+
},
51+
condition: {
52+
type: 'boolean'
53+
},
54+
logical: {
55+
type: 'boolean'
56+
},
57+
prop: {
58+
type: 'boolean'
4759
}
4860
},
4961
additionalProperties: false
@@ -100,7 +112,7 @@ module.exports = {
100112
if (!isEnabled('declaration')) {
101113
return;
102114
}
103-
if (node.init && node.init.type === 'ConditionalExpression') {
115+
if (!isEnabled('condition') && node.init && node.init.type === 'ConditionalExpression') {
104116
check(node.init.consequent);
105117
check(node.init.alternate);
106118
return;
@@ -112,7 +124,7 @@ module.exports = {
112124
if (!isEnabled('assignment')) {
113125
return;
114126
}
115-
if (node.right.type === 'ConditionalExpression') {
127+
if (!isEnabled('condition') && node.right.type === 'ConditionalExpression') {
116128
check(node.right.consequent);
117129
check(node.right.alternate);
118130
return;
@@ -132,6 +144,25 @@ module.exports = {
132144
if (isEnabled('arrow') && arrowBody.type !== 'BlockStatement') {
133145
check(arrowBody);
134146
}
147+
},
148+
149+
ConditionalExpression: function(node) {
150+
if (isEnabled('condition')) {
151+
check(node.consequent);
152+
check(node.alternate);
153+
}
154+
},
155+
156+
LogicalExpression: function(node) {
157+
if (isEnabled('logical')) {
158+
check(node.right);
159+
}
160+
},
161+
162+
JSXAttribute: function (node) {
163+
if (isEnabled('prop') && node.value && node.value.type === 'JSXExpressionContainer') {
164+
check(node.value.expression);
165+
}
135166
}
136167
};
137168
}

‎tests/lib/rules/jsx-wrap-multilines.js

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,68 @@ const ARROW_NO_PAREN = `
134134
</div>;
135135
`;
136136

137+
const CONDITION_SINGLE_LINE = 'foo ? <p>Hello</p> : null;';
138+
139+
const CONDITION_PAREN = `
140+
<div>
141+
{foo ? (<div>
142+
<p>Hello</p>
143+
</div>) : null}
144+
</div>
145+
`;
146+
147+
const CONDITION_NO_PAREN = `
148+
<div>
149+
{foo ? <div>
150+
<p>Hello</p>
151+
</div> : null}
152+
</div>
153+
`;
154+
155+
const LOGICAL_SINGLE_LINE = 'foo && <p>Hello</p>;';
156+
157+
const LOGICAL_PAREN = `
158+
<div>
159+
{foo &&
160+
(<div>
161+
<p>Hello World</p>
162+
</div>)
163+
}
164+
</div>
165+
`;
166+
167+
const LOGICAL_NO_PAREN = `
168+
<div>
169+
{foo &&
170+
<div>
171+
<p>Hello World</p>
172+
</div>
173+
}
174+
</div>
175+
`;
176+
177+
const ATTR_SINGLE_LINE = '<div prop={<p>Hello</p>}></div>';
178+
179+
const ATTR_PAREN = `
180+
<div prop={
181+
(<div>
182+
<p>Hello</p>
183+
</div>)
184+
}>
185+
<p>Hello</p>
186+
</div>
187+
`;
188+
189+
const ATTR_NO_PAREN = `
190+
<div prop={
191+
<div>
192+
<p>Hello</p>
193+
</div>
194+
}>
195+
<p>Hello</p>
196+
</div>
197+
`;
198+
137199
// ------------------------------------------------------------------------------
138200
// Tests
139201
// ------------------------------------------------------------------------------
@@ -187,6 +249,30 @@ ruleTester.run('jsx-wrap-multilines', rule, {
187249
}, {
188250
code: ARROW_NO_PAREN,
189251
options: [{arrow: false}]
252+
}, {
253+
code: CONDITION_SINGLE_LINE
254+
}, {
255+
code: CONDITION_SINGLE_LINE,
256+
options: [{condition: true}]
257+
}, {
258+
code: CONDITION_NO_PAREN
259+
}, {
260+
code: CONDITION_PAREN,
261+
options: [{condition: true}]
262+
}, {
263+
code: LOGICAL_SINGLE_LINE
264+
}, {
265+
code: LOGICAL_NO_PAREN
266+
}, {
267+
code: LOGICAL_PAREN,
268+
options: [{logical: true}]
269+
}, {
270+
code: ATTR_SINGLE_LINE
271+
}, {
272+
code: ATTR_NO_PAREN
273+
}, {
274+
code: ATTR_PAREN,
275+
options: [{prop: true}]
190276
}
191277
],
192278

@@ -237,6 +323,21 @@ ruleTester.run('jsx-wrap-multilines', rule, {
237323
output: ARROW_PAREN,
238324
options: [{arrow: true}],
239325
errors: [{message: 'Missing parentheses around multilines JSX'}]
326+
}, {
327+
code: CONDITION_NO_PAREN,
328+
output: CONDITION_PAREN,
329+
options: [{condition: true}],
330+
errors: [{message: 'Missing parentheses around multilines JSX'}]
331+
}, {
332+
code: LOGICAL_NO_PAREN,
333+
output: LOGICAL_PAREN,
334+
options: [{logical: true}],
335+
errors: [{message: 'Missing parentheses around multilines JSX'}]
336+
}, {
337+
code: ATTR_NO_PAREN,
338+
output: ATTR_PAREN,
339+
options: [{prop: true}],
340+
errors: [{message: 'Missing parentheses around multilines JSX'}]
240341
}
241342
]
242343
});

0 commit comments

Comments
 (0)