You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
103 lines
2.9 KiB
103 lines
2.9 KiB
/** |
|
* @fileoverview Prevent extra closing tags for components without children |
|
* @author Yannick Croissant |
|
*/ |
|
|
|
'use strict'; |
|
|
|
const docsUrl = require('../util/docsUrl'); |
|
const jsxUtil = require('../util/jsx'); |
|
const report = require('../util/report'); |
|
|
|
// ------------------------------------------------------------------------------ |
|
// Rule Definition |
|
// ------------------------------------------------------------------------------ |
|
|
|
const optionDefaults = { component: true, html: true }; |
|
|
|
const messages = { |
|
notSelfClosing: 'Empty components are self-closing', |
|
}; |
|
|
|
module.exports = { |
|
meta: { |
|
docs: { |
|
description: 'Prevent extra closing tags for components without children', |
|
category: 'Stylistic Issues', |
|
recommended: false, |
|
url: docsUrl('self-closing-comp'), |
|
}, |
|
fixable: 'code', |
|
|
|
messages, |
|
|
|
schema: [{ |
|
type: 'object', |
|
properties: { |
|
component: { |
|
default: optionDefaults.component, |
|
type: 'boolean', |
|
}, |
|
html: { |
|
default: optionDefaults.html, |
|
type: 'boolean', |
|
}, |
|
}, |
|
additionalProperties: false, |
|
}], |
|
}, |
|
|
|
create(context) { |
|
function isComponent(node) { |
|
return ( |
|
node.name |
|
&& (node.name.type === 'JSXIdentifier' || node.name.type === 'JSXMemberExpression') |
|
&& !jsxUtil.isDOMComponent(node) |
|
); |
|
} |
|
|
|
function childrenIsEmpty(node) { |
|
return node.parent.children.length === 0; |
|
} |
|
|
|
function childrenIsMultilineSpaces(node) { |
|
const childrens = node.parent.children; |
|
|
|
return ( |
|
childrens.length === 1 |
|
&& (childrens[0].type === 'Literal' || childrens[0].type === 'JSXText') |
|
&& childrens[0].value.indexOf('\n') !== -1 |
|
&& childrens[0].value.replace(/(?!\xA0)\s/g, '') === '' |
|
); |
|
} |
|
|
|
function isShouldBeSelfClosed(node) { |
|
const configuration = Object.assign({}, optionDefaults, context.options[0]); |
|
return ( |
|
(configuration.component && isComponent(node)) |
|
|| (configuration.html && jsxUtil.isDOMComponent(node)) |
|
) && !node.selfClosing && (childrenIsEmpty(node) || childrenIsMultilineSpaces(node)); |
|
} |
|
|
|
return { |
|
JSXOpeningElement(node) { |
|
if (!isShouldBeSelfClosed(node)) { |
|
return; |
|
} |
|
report(context, messages.notSelfClosing, 'notSelfClosing', { |
|
node, |
|
fix(fixer) { |
|
// Represents the last character of the JSXOpeningElement, the '>' character |
|
const openingElementEnding = node.range[1] - 1; |
|
// Represents the last character of the JSXClosingElement, the '>' character |
|
const closingElementEnding = node.parent.closingElement.range[1]; |
|
|
|
// Replace />.*<\/.*>/ with '/>' |
|
const range = [openingElementEnding, closingElementEnding]; |
|
return fixer.replaceTextRange(range, ' />'); |
|
}, |
|
}); |
|
}, |
|
}; |
|
}, |
|
};
|
|
|