| /** |
| * @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 (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 (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': function () { |
| 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) |
| }); |
| } |
| } |
| }); |
| } |
| }; |
| } |
| }; |