Skip to content

Commit

Permalink
Merge pull request #1384 from evgeny-petukhov/master
Browse files Browse the repository at this point in the history 
[jsx-wrap-multilines] Add new nodes for wrap
  • Loading branch information
@lencioni
lencioni authored Oct 30, 2017
2 parents aad4a37 + cfcb2bb commit da9cbe9
Show file tree
Hide file tree
Showing 3 changed files with 204 additions and 4 deletions.
70 changes: 69 additions & 1 deletion docs/rules/jsx-wrap-multilines.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,17 @@ Wrapping multiline JSX in parentheses can improve readability and/or convenience

## Rule Details

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).
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).

There are the possible syntax available:

* `declaration`
* `assignment`
* `return`
* `arrow`
* `condition` (not enabed by default, by default only conditions in declaraiton or assignment)
* `logical` (not enabled by default)
* `prop` (not enabled by default)

The following patterns are considered warnings:

Expand Down Expand Up @@ -118,3 +121,68 @@ var hello = () => (
</div>
);
```

The following patterns are considered warnings when configured `{condition: true}`.

```jsx
<div>
{foo ? <div>
<p>Hello</p>
</div> : null}
</div>
```

The following patterns are not considered warnings when configured `{condition: true}`.

```jsx
<div>
{foo ? (<div>
<p>Hello</p>
</div>) : null}
</div>
```


The following patterns are considered warnings when configured `{logical: true}`.

```jsx
<div>
{foo &&
<div>
<p>Hello World</p>
</div>
}
</div>
```

The following patterns are not considered warnings when configured `{logical: true}`.

```jsx
<div>
{foo &&
(<div>
<p>Hello World</p>
</div>)
}
</div>
```

The following patterns are considered warnings when configured `{attr: true}`.

```jsx
<div attr={<div>
<p>Hello</p>
</div>}>
<p>Hello</p>
</div>;
```

The following patterns are not considered warnings when configured `{attr: true}`.

```jsx
<div attr={(<div>
<p>Hello</p>
</div>)}>
<p>Hello</p>
</div>;
```
37 changes: 34 additions & 3 deletions lib/rules/jsx-wrap-multilines.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,10 @@ const DEFAULTS = {
declaration: true,
assignment: true,
return: true,
arrow: true
arrow: true,
condition: false,
logical: false,
prop: false
};

// ------------------------------------------------------------------------------
Expand Down Expand Up @@ -44,6 +47,15 @@ module.exports = {
},
arrow: {
type: 'boolean'
},
condition: {
type: 'boolean'
},
logical: {
type: 'boolean'
},
prop: {
type: 'boolean'
}
},
additionalProperties: false
Expand Down Expand Up @@ -100,7 +112,7 @@ module.exports = {
if (!isEnabled('declaration')) {
return;
}
if (node.init && node.init.type === 'ConditionalExpression') {
if (!isEnabled('condition') && node.init && node.init.type === 'ConditionalExpression') {
check(node.init.consequent);
check(node.init.alternate);
return;
Expand All @@ -112,7 +124,7 @@ module.exports = {
if (!isEnabled('assignment')) {
return;
}
if (node.right.type === 'ConditionalExpression') {
if (!isEnabled('condition') && node.right.type === 'ConditionalExpression') {
check(node.right.consequent);
check(node.right.alternate);
return;
Expand All @@ -132,6 +144,25 @@ module.exports = {
if (isEnabled('arrow') && arrowBody.type !== 'BlockStatement') {
check(arrowBody);
}
},

ConditionalExpression: function(node) {
if (isEnabled('condition')) {
check(node.consequent);
check(node.alternate);
}
},

LogicalExpression: function(node) {
if (isEnabled('logical')) {
check(node.right);
}
},

JSXAttribute: function (node) {
if (isEnabled('prop') && node.value && node.value.type === 'JSXExpressionContainer') {
check(node.value.expression);
}
}
};
}
Expand Down
101 changes: 101 additions & 0 deletions tests/lib/rules/jsx-wrap-multilines.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,68 @@ const ARROW_NO_PAREN = `
</div>;
`;

const CONDITION_SINGLE_LINE = 'foo ? <p>Hello</p> : null;';

const CONDITION_PAREN = `
<div>
{foo ? (<div>
<p>Hello</p>
</div>) : null}
</div>
`;

const CONDITION_NO_PAREN = `
<div>
{foo ? <div>
<p>Hello</p>
</div> : null}
</div>
`;

const LOGICAL_SINGLE_LINE = 'foo && <p>Hello</p>;';

const LOGICAL_PAREN = `
<div>
{foo &&
(<div>
<p>Hello World</p>
</div>)
}
</div>
`;

const LOGICAL_NO_PAREN = `
<div>
{foo &&
<div>
<p>Hello World</p>
</div>
}
</div>
`;

const ATTR_SINGLE_LINE = '<div prop={<p>Hello</p>}></div>';

const ATTR_PAREN = `
<div prop={
(<div>
<p>Hello</p>
</div>)
}>
<p>Hello</p>
</div>
`;

const ATTR_NO_PAREN = `
<div prop={
<div>
<p>Hello</p>
</div>
}>
<p>Hello</p>
</div>
`;

// ------------------------------------------------------------------------------
// Tests
// ------------------------------------------------------------------------------
Expand Down Expand Up @@ -187,6 +249,30 @@ ruleTester.run('jsx-wrap-multilines', rule, {
}, {
code: ARROW_NO_PAREN,
options: [{arrow: false}]
}, {
code: CONDITION_SINGLE_LINE
}, {
code: CONDITION_SINGLE_LINE,
options: [{condition: true}]
}, {
code: CONDITION_NO_PAREN
}, {
code: CONDITION_PAREN,
options: [{condition: true}]
}, {
code: LOGICAL_SINGLE_LINE
}, {
code: LOGICAL_NO_PAREN
}, {
code: LOGICAL_PAREN,
options: [{logical: true}]
}, {
code: ATTR_SINGLE_LINE
}, {
code: ATTR_NO_PAREN
}, {
code: ATTR_PAREN,
options: [{prop: true}]
}
],

Expand Down Expand Up @@ -237,6 +323,21 @@ ruleTester.run('jsx-wrap-multilines', rule, {
output: ARROW_PAREN,
options: [{arrow: true}],
errors: [{message: 'Missing parentheses around multilines JSX'}]
}, {
code: CONDITION_NO_PAREN,
output: CONDITION_PAREN,
options: [{condition: true}],
errors: [{message: 'Missing parentheses around multilines JSX'}]
}, {
code: LOGICAL_NO_PAREN,
output: LOGICAL_PAREN,
options: [{logical: true}],
errors: [{message: 'Missing parentheses around multilines JSX'}]
}, {
code: ATTR_NO_PAREN,
output: ATTR_PAREN,
options: [{prop: true}],
errors: [{message: 'Missing parentheses around multilines JSX'}]
}
]
});

0 comments on commit da9cbe9

Please sign in to comment.