diff --git a/docs/rules/jsx-wrap-multilines.md b/docs/rules/jsx-wrap-multilines.md index b2c90f9783..4d82a9be81 100644 --- a/docs/rules/jsx-wrap-multilines.md +++ b/docs/rules/jsx-wrap-multilines.md @@ -6,7 +6,7 @@ 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: @@ -14,6 +14,9 @@ There are the possible syntax available: * `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: @@ -118,3 +121,68 @@ var hello = () => ( ); ``` + +The following patterns are considered warnings when configured `{condition: true}`. + +```jsx +
Hello
+Hello
+Hello World
+Hello World
+Hello
+Hello
+; +``` + +The following patterns are not considered warnings when configured `{attr: true}`. + +```jsx +Hello
+Hello
+; +``` diff --git a/lib/rules/jsx-wrap-multilines.js b/lib/rules/jsx-wrap-multilines.js index ca12f033e6..b4e7bbc005 100644 --- a/lib/rules/jsx-wrap-multilines.js +++ b/lib/rules/jsx-wrap-multilines.js @@ -14,7 +14,10 @@ const DEFAULTS = { declaration: true, assignment: true, return: true, - arrow: true + arrow: true, + condition: false, + logical: false, + prop: false }; // ------------------------------------------------------------------------------ @@ -44,6 +47,15 @@ module.exports = { }, arrow: { type: 'boolean' + }, + condition: { + type: 'boolean' + }, + logical: { + type: 'boolean' + }, + prop: { + type: 'boolean' } }, additionalProperties: false @@ -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; @@ -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; @@ -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); + } } }; } diff --git a/tests/lib/rules/jsx-wrap-multilines.js b/tests/lib/rules/jsx-wrap-multilines.js index 3d3b7bdc1d..59ad236d51 100644 --- a/tests/lib/rules/jsx-wrap-multilines.js +++ b/tests/lib/rules/jsx-wrap-multilines.js @@ -134,6 +134,68 @@ const ARROW_NO_PAREN = ` ; `; +const CONDITION_SINGLE_LINE = 'foo ?Hello
: null;'; + +const CONDITION_PAREN = ` +Hello
+Hello
+Hello
;'; + +const LOGICAL_PAREN = ` +Hello World
+Hello World
+Hello
+Hello
+ +`; + +const ATTR_NO_PAREN = ` +Hello
+Hello
+ +`; + // ------------------------------------------------------------------------------ // Tests // ------------------------------------------------------------------------------ @@ -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}] } ], @@ -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'}] } ] });