Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[New] Support shorthand fragment syntax #1956

Merged
merged 16 commits into from
Sep 8, 2018
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 9 additions & 11 deletions lib/rules/jsx-curly-brace-presence.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
'use strict';

const docsUrl = require('../util/docsUrl');
const jsxUtil = require('../util/jsx');

// ------------------------------------------------------------------------------
// Constants
Expand Down Expand Up @@ -168,13 +169,12 @@ module.exports = {
function lintUnnecessaryCurly(JSXExpressionNode) {
const expression = JSXExpressionNode.expression;
const expressionType = expression.type;
const parentType = JSXExpressionNode.parent.type;

if (
(expressionType === 'Literal' || expressionType === 'JSXText') &&
typeof expression.value === 'string' &&
!needToEscapeCharacterForJSX(expression.raw) && (
parentType === 'JSXElement' ||
jsxUtil.isJSX(JSXExpressionNode.parent) ||
!containsQuoteCharacters(expression.value)
)
) {
Expand All @@ -183,32 +183,30 @@ module.exports = {
expressionType === 'TemplateLiteral' &&
expression.expressions.length === 0 &&
!needToEscapeCharacterForJSX(expression.quasis[0].value.raw) && (
parentType === 'JSXElement' ||
jsxUtil.isJSX(JSXExpressionNode.parent) ||
!containsQuoteCharacters(expression.quasis[0].value.cooked)
)
) {
reportUnnecessaryCurly(JSXExpressionNode);
}
}

function areRuleConditionsSatisfied(parentType, config, ruleCondition) {
function areRuleConditionsSatisfied(parent, config, ruleCondition) {
return (
parentType === 'JSXAttribute' &&
parent.type === 'JSXAttribute' &&
typeof config.props === 'string' &&
config.props === ruleCondition
) || (
parentType === 'JSXElement' &&
jsxUtil.isJSX(parent) &&
typeof config.children === 'string' &&
config.children === ruleCondition
);
}

function shouldCheckForUnnecessaryCurly(parent, config) {
const parentType = parent.type;

// If there are more than one JSX child, there is no need to check for
// unnecessary curly braces.
if (parentType === 'JSXElement' && parent.children.length !== 1) {
if (jsxUtil.isJSX(parent) && parent.children.length !== 1) {
return false;
}

Expand All @@ -220,7 +218,7 @@ module.exports = {
return false;
}

return areRuleConditionsSatisfied(parentType, config, OPTION_NEVER);
return areRuleConditionsSatisfied(parent, config, OPTION_NEVER);
}

function shouldCheckForMissingCurly(parent, config) {
Expand All @@ -232,7 +230,7 @@ module.exports = {
return false;
}

return areRuleConditionsSatisfied(parent.type, config, OPTION_ALWAYS);
return areRuleConditionsSatisfied(parent, config, OPTION_ALWAYS);
}

// --------------------------------------------------------------------------
Expand Down
7 changes: 4 additions & 3 deletions lib/util/Components.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ const variableUtil = require('./variable');
const pragmaUtil = require('./pragma');
const astUtil = require('./ast');
const propTypes = require('./propTypes');
const jsxUtil = require('./jsx');

function getId(node) {
return node && node.range.join(':');
Expand Down Expand Up @@ -349,12 +350,12 @@ function componentRule(rule, context) {
const returnsConditionalJSXConsequent =
node[property] &&
node[property].type === 'ConditionalExpression' &&
node[property].consequent.type === 'JSXElement'
jsxUtil.isJSX(node[property].consequent)
;
const returnsConditionalJSXAlternate =
node[property] &&
node[property].type === 'ConditionalExpression' &&
node[property].alternate.type === 'JSXElement'
jsxUtil.isJSX(node[property].alternate)
;
const returnsConditionalJSX =
strict ?
Expand All @@ -363,7 +364,7 @@ function componentRule(rule, context) {

const returnsJSX =
node[property] &&
node[property].type === 'JSXElement'
jsxUtil.isJSX(node[property])
;
const returnsReactCreateElement = this.isReactCreateElement(node[property]);

Expand Down
14 changes: 12 additions & 2 deletions lib/util/jsx.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const COMPAT_TAG_REGEX = /^[a-z]|\-/;

/**
* Checks if a node represents a DOM element.
* @param {String} node - JSXOpeningElement to check.
* @param {object} node - JSXOpeningElement to check.
* @returns {boolean} Whether or not the node corresponds to a DOM element.
*/
function isDOMComponent(node) {
Expand All @@ -25,6 +25,16 @@ function isDOMComponent(node) {
return COMPAT_TAG_REGEX.test(name);
}

/**
* Checks if a node represents a JSX element or fragment.
* @param {object} node - node to check.
* @returns {boolean} Whether or not the node if a JSX element or fragment.
*/
function isJSX(node) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggestions for a better name welcome (isJSXElementOrFragment seemed too wordy)

return ['JSXElement', 'JSXFragment'].indexOf(node.type) >= 0;
}

module.exports = {
isDOMComponent: isDOMComponent
isDOMComponent: isDOMComponent,
isJSX: isJSX
};
11 changes: 11 additions & 0 deletions tests/lib/rules/jsx-curly-brace-presence.js
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,10 @@ ruleTester.run('jsx-curly-brace-presence', rule, {
{
code: '<App {...props}>foo</App>'
},
{
code: '<>foo</>',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This rule doesn't really care whether it's an element or a fragment, so I just added one simple valid test, and one invalid.

parser: 'babel-eslint'
},
{
code: '<App {...props}>foo</App>',
options: [{props: 'never'}]
Expand Down Expand Up @@ -259,6 +263,13 @@ ruleTester.run('jsx-curly-brace-presence', rule, {
options: [{children: 'never'}],
errors: [{message: unnecessaryCurlyMessage}]
},
{
code: '<>{`foo`}</>',
output: '<>foo</>',
parser: 'babel-eslint',
options: [{children: 'never'}],
errors: [{message: unnecessaryCurlyMessage}]
},
{
code: `<MyComponent>{'foo'}</MyComponent>`,
output: '<MyComponent>foo</MyComponent>',
Expand Down