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.

191 lines
6.1 KiB

4 years ago
/**
* @fileoverview Enforce shorthand or standard form for React fragments.
* @author Alex Zherdev
*/
'use strict';
const elementType = require('jsx-ast-utils/elementType');
const pragmaUtil = require('../util/pragma');
const variableUtil = require('../util/variable');
const versionUtil = require('../util/version');
const docsUrl = require('../util/docsUrl');
// ------------------------------------------------------------------------------
// Rule Definition
// ------------------------------------------------------------------------------
function replaceNode(source, node, text) {
return `${source.slice(0, node.range[0])}${text}${source.slice(node.range[1])}`;
}
module.exports = {
meta: {
docs: {
description: 'Enforce shorthand or standard form for React fragments',
category: 'Stylistic Issues',
recommended: false,
url: docsUrl('jsx-fragments')
},
fixable: 'code',
schema: [{
enum: ['syntax', 'element']
}]
},
create(context) {
const configuration = context.options[0] || 'syntax';
const reactPragma = pragmaUtil.getFromContext(context);
const fragmentPragma = pragmaUtil.getFragmentFromContext(context);
const openFragShort = '<>';
const closeFragShort = '</>';
const openFragLong = `<${reactPragma}.${fragmentPragma}>`;
const closeFragLong = `</${reactPragma}.${fragmentPragma}>`;
function reportOnReactVersion(node) {
if (!versionUtil.testReactVersion(context, '16.2.0')) {
context.report({
node,
message: 'Fragments are only supported starting from React v16.2. ' +
'Please disable the `react/jsx-fragments` rule in ESLint settings or upgrade your version of React.'
});
return true;
}
return false;
}
function getFixerToLong(jsxFragment) {
const sourceCode = context.getSourceCode();
return function fix(fixer) {
let source = sourceCode.getText();
source = replaceNode(source, jsxFragment.closingFragment, closeFragLong);
source = replaceNode(source, jsxFragment.openingFragment, openFragLong);
const lengthDiff = openFragLong.length - sourceCode.getText(jsxFragment.openingFragment).length +
closeFragLong.length - sourceCode.getText(jsxFragment.closingFragment).length;
const range = jsxFragment.range;
return fixer.replaceTextRange(range, source.slice(range[0], range[1] + lengthDiff));
};
}
function getFixerToShort(jsxElement) {
const sourceCode = context.getSourceCode();
return function fix(fixer) {
let source = sourceCode.getText();
let lengthDiff;
if (jsxElement.closingElement) {
source = replaceNode(source, jsxElement.closingElement, closeFragShort);
source = replaceNode(source, jsxElement.openingElement, openFragShort);
lengthDiff = sourceCode.getText(jsxElement.openingElement).length - openFragShort.length +
sourceCode.getText(jsxElement.closingElement).length - closeFragShort.length;
} else {
source = replaceNode(source, jsxElement.openingElement, `${openFragShort}${closeFragShort}`);
lengthDiff = sourceCode.getText(jsxElement.openingElement).length - openFragShort.length -
closeFragShort.length;
}
const range = jsxElement.range;
return fixer.replaceTextRange(range, source.slice(range[0], range[1] - lengthDiff));
};
}
function refersToReactFragment(name) {
const variableInit = variableUtil.findVariableByName(context, name);
if (!variableInit) {
return false;
}
// const { Fragment } = React;
if (variableInit.type === 'Identifier' && variableInit.name === reactPragma) {
return true;
}
// const Fragment = React.Fragment;
if (
variableInit.type === 'MemberExpression' &&
variableInit.object.type === 'Identifier' &&
variableInit.object.name === reactPragma &&
variableInit.property.type === 'Identifier' &&
variableInit.property.name === fragmentPragma
) {
return true;
}
// const { Fragment } = require('react');
if (
variableInit.callee &&
variableInit.callee.name === 'require' &&
variableInit.arguments &&
variableInit.arguments[0] &&
variableInit.arguments[0].value === 'react'
) {
return true;
}
return false;
}
const jsxElements = [];
const fragmentNames = new Set([`${reactPragma}.${fragmentPragma}`]);
// --------------------------------------------------------------------------
// Public
// --------------------------------------------------------------------------
return {
JSXElement(node) {
jsxElements.push(node);
},
JSXFragment(node) {
if (reportOnReactVersion(node)) {
return;
}
if (configuration === 'element') {
context.report({
node,
message: `Prefer ${reactPragma}.${fragmentPragma} over fragment shorthand`,
fix: getFixerToLong(node)
});
}
},
ImportDeclaration(node) {
if (node.source && node.source.value === 'react') {
node.specifiers.forEach((spec) => {
if (spec.imported && spec.imported.name === fragmentPragma) {
if (spec.local) {
fragmentNames.add(spec.local.name);
}
}
});
}
},
'Program:exit'() {
jsxElements.forEach((node) => {
const openingEl = node.openingElement;
const elName = elementType(openingEl);
if (fragmentNames.has(elName) || refersToReactFragment(elName)) {
if (reportOnReactVersion(node)) {
return;
}
const attrs = openingEl.attributes;
if (configuration === 'syntax' && !(attrs && attrs.length > 0)) {
context.report({
node,
message: `Prefer fragment shorthand over ${reactPragma}.${fragmentPragma}`,
fix: getFixerToShort(node)
});
}
}
});
}
};
}
};