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.
431 lines
14 KiB
431 lines
14 KiB
2 years ago
|
/**
|
||
|
* @fileoverview Enforce or disallow spaces inside of curly braces in JSX attributes.
|
||
|
* @author Jamund Ferguson
|
||
|
* @author Brandyn Bennett
|
||
|
* @author Michael Ficarra
|
||
|
* @author Vignesh Anand
|
||
|
* @author Jamund Ferguson
|
||
|
* @author Yannick Croissant
|
||
|
* @author Erik Wendel
|
||
|
*/
|
||
|
|
||
|
'use strict';
|
||
|
|
||
|
const has = require('object.hasown/polyfill')();
|
||
|
const docsUrl = require('../util/docsUrl');
|
||
|
const report = require('../util/report');
|
||
|
|
||
|
// ------------------------------------------------------------------------------
|
||
|
// Rule Definition
|
||
|
// ------------------------------------------------------------------------------
|
||
|
|
||
|
const SPACING = {
|
||
|
always: 'always',
|
||
|
never: 'never',
|
||
|
};
|
||
|
const SPACING_VALUES = [SPACING.always, SPACING.never];
|
||
|
|
||
|
const messages = {
|
||
|
noNewlineAfter: 'There should be no newline after \'{{token}}\'',
|
||
|
noNewlineBefore: 'There should be no newline before \'{{token}}\'',
|
||
|
noSpaceAfter: 'There should be no space after \'{{token}}\'',
|
||
|
noSpaceBefore: 'There should be no space before \'{{token}}\'',
|
||
|
spaceNeededAfter: 'A space is required after \'{{token}}\'',
|
||
|
spaceNeededBefore: 'A space is required before \'{{token}}\'',
|
||
|
};
|
||
|
|
||
|
module.exports = {
|
||
|
meta: {
|
||
|
docs: {
|
||
|
description: 'Enforce or disallow spaces inside of curly braces in JSX attributes',
|
||
|
category: 'Stylistic Issues',
|
||
|
recommended: false,
|
||
|
url: docsUrl('jsx-curly-spacing'),
|
||
|
},
|
||
|
fixable: 'code',
|
||
|
|
||
|
messages,
|
||
|
|
||
|
schema: {
|
||
|
definitions: {
|
||
|
basicConfig: {
|
||
|
type: 'object',
|
||
|
properties: {
|
||
|
when: {
|
||
|
enum: SPACING_VALUES,
|
||
|
},
|
||
|
allowMultiline: {
|
||
|
type: 'boolean',
|
||
|
},
|
||
|
spacing: {
|
||
|
type: 'object',
|
||
|
properties: {
|
||
|
objectLiterals: {
|
||
|
enum: SPACING_VALUES,
|
||
|
},
|
||
|
},
|
||
|
},
|
||
|
},
|
||
|
},
|
||
|
basicConfigOrBoolean: {
|
||
|
oneOf: [{
|
||
|
$ref: '#/definitions/basicConfig',
|
||
|
}, {
|
||
|
type: 'boolean',
|
||
|
}],
|
||
|
},
|
||
|
},
|
||
|
type: 'array',
|
||
|
items: [{
|
||
|
oneOf: [{
|
||
|
allOf: [{
|
||
|
$ref: '#/definitions/basicConfig',
|
||
|
}, {
|
||
|
type: 'object',
|
||
|
properties: {
|
||
|
attributes: {
|
||
|
$ref: '#/definitions/basicConfigOrBoolean',
|
||
|
},
|
||
|
children: {
|
||
|
$ref: '#/definitions/basicConfigOrBoolean',
|
||
|
},
|
||
|
},
|
||
|
}],
|
||
|
}, {
|
||
|
enum: SPACING_VALUES,
|
||
|
}],
|
||
|
}, {
|
||
|
type: 'object',
|
||
|
properties: {
|
||
|
allowMultiline: {
|
||
|
type: 'boolean',
|
||
|
},
|
||
|
spacing: {
|
||
|
type: 'object',
|
||
|
properties: {
|
||
|
objectLiterals: {
|
||
|
enum: SPACING_VALUES,
|
||
|
},
|
||
|
},
|
||
|
},
|
||
|
},
|
||
|
additionalProperties: false,
|
||
|
}],
|
||
|
},
|
||
|
},
|
||
|
|
||
|
create(context) {
|
||
|
function normalizeConfig(configOrTrue, defaults, lastPass) {
|
||
|
const config = configOrTrue === true ? {} : configOrTrue;
|
||
|
const when = config.when || defaults.when;
|
||
|
const allowMultiline = has(config, 'allowMultiline') ? config.allowMultiline : defaults.allowMultiline;
|
||
|
const spacing = config.spacing || {};
|
||
|
let objectLiteralSpaces = spacing.objectLiterals || defaults.objectLiteralSpaces;
|
||
|
if (lastPass) {
|
||
|
// On the final pass assign the values that should be derived from others if they are still undefined
|
||
|
objectLiteralSpaces = objectLiteralSpaces || when;
|
||
|
}
|
||
|
|
||
|
return {
|
||
|
when,
|
||
|
allowMultiline,
|
||
|
objectLiteralSpaces,
|
||
|
};
|
||
|
}
|
||
|
|
||
|
const DEFAULT_WHEN = SPACING.never;
|
||
|
const DEFAULT_ALLOW_MULTILINE = true;
|
||
|
const DEFAULT_ATTRIBUTES = true;
|
||
|
const DEFAULT_CHILDREN = false;
|
||
|
|
||
|
let originalConfig = context.options[0] || {};
|
||
|
if (SPACING_VALUES.indexOf(originalConfig) !== -1) {
|
||
|
originalConfig = Object.assign({ when: context.options[0] }, context.options[1]);
|
||
|
}
|
||
|
const defaultConfig = normalizeConfig(originalConfig, {
|
||
|
when: DEFAULT_WHEN,
|
||
|
allowMultiline: DEFAULT_ALLOW_MULTILINE,
|
||
|
});
|
||
|
const attributes = has(originalConfig, 'attributes') ? originalConfig.attributes : DEFAULT_ATTRIBUTES;
|
||
|
const attributesConfig = attributes ? normalizeConfig(attributes, defaultConfig, true) : null;
|
||
|
const children = has(originalConfig, 'children') ? originalConfig.children : DEFAULT_CHILDREN;
|
||
|
const childrenConfig = children ? normalizeConfig(children, defaultConfig, true) : null;
|
||
|
|
||
|
// --------------------------------------------------------------------------
|
||
|
// Helpers
|
||
|
// --------------------------------------------------------------------------
|
||
|
|
||
|
/**
|
||
|
* Determines whether two adjacent tokens have a newline between them.
|
||
|
* @param {Object} left - The left token object.
|
||
|
* @param {Object} right - The right token object.
|
||
|
* @returns {boolean} Whether or not there is a newline between the tokens.
|
||
|
*/
|
||
|
function isMultiline(left, right) {
|
||
|
return left.loc.end.line !== right.loc.start.line;
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Trims text of whitespace between two ranges
|
||
|
* @param {Fixer} fixer - the eslint fixer object
|
||
|
* @param {number} fromLoc - the start location
|
||
|
* @param {number} toLoc - the end location
|
||
|
* @param {string} mode - either 'start' or 'end'
|
||
|
* @param {string=} spacing - a spacing value that will optionally add a space to the removed text
|
||
|
* @returns {Object|*|{range, text}}
|
||
|
*/
|
||
|
function fixByTrimmingWhitespace(fixer, fromLoc, toLoc, mode, spacing) {
|
||
|
let replacementText = context.getSourceCode().text.slice(fromLoc, toLoc);
|
||
|
if (mode === 'start') {
|
||
|
replacementText = replacementText.replace(/^\s+/gm, '');
|
||
|
} else {
|
||
|
replacementText = replacementText.replace(/\s+$/gm, '');
|
||
|
}
|
||
|
if (spacing === SPACING.always) {
|
||
|
if (mode === 'start') {
|
||
|
replacementText += ' ';
|
||
|
} else {
|
||
|
replacementText = ` ${replacementText}`;
|
||
|
}
|
||
|
}
|
||
|
return fixer.replaceTextRange([fromLoc, toLoc], replacementText);
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Reports that there shouldn't be a newline after the first token
|
||
|
* @param {ASTNode} node - The node to report in the event of an error.
|
||
|
* @param {Token} token - The token to use for the report.
|
||
|
* @param {string} spacing
|
||
|
* @returns {void}
|
||
|
*/
|
||
|
function reportNoBeginningNewline(node, token, spacing) {
|
||
|
report(context, messages.noNewlineAfter, 'noNewlineAfter', {
|
||
|
node,
|
||
|
loc: token.loc.start,
|
||
|
data: {
|
||
|
token: token.value,
|
||
|
},
|
||
|
fix(fixer) {
|
||
|
const nextToken = context.getSourceCode().getTokenAfter(token);
|
||
|
return fixByTrimmingWhitespace(fixer, token.range[1], nextToken.range[0], 'start', spacing);
|
||
|
},
|
||
|
});
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Reports that there shouldn't be a newline before the last token
|
||
|
* @param {ASTNode} node - The node to report in the event of an error.
|
||
|
* @param {Token} token - The token to use for the report.
|
||
|
* @param {string} spacing
|
||
|
* @returns {void}
|
||
|
*/
|
||
|
function reportNoEndingNewline(node, token, spacing) {
|
||
|
report(context, messages.noNewlineBefore, 'noNewlineBefore', {
|
||
|
node,
|
||
|
loc: token.loc.start,
|
||
|
data: {
|
||
|
token: token.value,
|
||
|
},
|
||
|
fix(fixer) {
|
||
|
const previousToken = context.getSourceCode().getTokenBefore(token);
|
||
|
return fixByTrimmingWhitespace(fixer, previousToken.range[1], token.range[0], 'end', spacing);
|
||
|
},
|
||
|
});
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Reports that there shouldn't be a space after the first token
|
||
|
* @param {ASTNode} node - The node to report in the event of an error.
|
||
|
* @param {Token} token - The token to use for the report.
|
||
|
* @returns {void}
|
||
|
*/
|
||
|
function reportNoBeginningSpace(node, token) {
|
||
|
report(context, messages.noSpaceAfter, 'noSpaceAfter', {
|
||
|
node,
|
||
|
loc: token.loc.start,
|
||
|
data: {
|
||
|
token: token.value,
|
||
|
},
|
||
|
fix(fixer) {
|
||
|
const sourceCode = context.getSourceCode();
|
||
|
const nextToken = sourceCode.getTokenAfter(token);
|
||
|
let nextComment;
|
||
|
|
||
|
// eslint >=4.x
|
||
|
if (sourceCode.getCommentsAfter) {
|
||
|
nextComment = sourceCode.getCommentsAfter(token);
|
||
|
// eslint 3.x
|
||
|
} else {
|
||
|
const potentialComment = sourceCode.getTokenAfter(token, { includeComments: true });
|
||
|
nextComment = nextToken === potentialComment ? [] : [potentialComment];
|
||
|
}
|
||
|
|
||
|
// Take comments into consideration to narrow the fix range to what is actually affected. (See #1414)
|
||
|
if (nextComment.length > 0) {
|
||
|
return fixByTrimmingWhitespace(fixer, token.range[1], Math.min(nextToken.range[0], nextComment[0].range[0]), 'start');
|
||
|
}
|
||
|
|
||
|
return fixByTrimmingWhitespace(fixer, token.range[1], nextToken.range[0], 'start');
|
||
|
},
|
||
|
});
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Reports that there shouldn't be a space before the last token
|
||
|
* @param {ASTNode} node - The node to report in the event of an error.
|
||
|
* @param {Token} token - The token to use for the report.
|
||
|
* @returns {void}
|
||
|
*/
|
||
|
function reportNoEndingSpace(node, token) {
|
||
|
report(context, messages.noSpaceBefore, 'noSpaceBefore', {
|
||
|
node,
|
||
|
loc: token.loc.start,
|
||
|
data: {
|
||
|
token: token.value,
|
||
|
},
|
||
|
fix(fixer) {
|
||
|
const sourceCode = context.getSourceCode();
|
||
|
const previousToken = sourceCode.getTokenBefore(token);
|
||
|
let previousComment;
|
||
|
|
||
|
// eslint >=4.x
|
||
|
if (sourceCode.getCommentsBefore) {
|
||
|
previousComment = sourceCode.getCommentsBefore(token);
|
||
|
// eslint 3.x
|
||
|
} else {
|
||
|
const potentialComment = sourceCode.getTokenBefore(token, { includeComments: true });
|
||
|
previousComment = previousToken === potentialComment ? [] : [potentialComment];
|
||
|
}
|
||
|
|
||
|
// Take comments into consideration to narrow the fix range to what is actually affected. (See #1414)
|
||
|
if (previousComment.length > 0) {
|
||
|
return fixByTrimmingWhitespace(fixer, Math.max(previousToken.range[1], previousComment[0].range[1]), token.range[0], 'end');
|
||
|
}
|
||
|
|
||
|
return fixByTrimmingWhitespace(fixer, previousToken.range[1], token.range[0], 'end');
|
||
|
},
|
||
|
});
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Reports that there should be a space after the first token
|
||
|
* @param {ASTNode} node - The node to report in the event of an error.
|
||
|
* @param {Token} token - The token to use for the report.
|
||
|
* @returns {void}
|
||
|
*/
|
||
|
function reportRequiredBeginningSpace(node, token) {
|
||
|
report(context, messages.spaceNeededAfter, 'spaceNeededAfter', {
|
||
|
node,
|
||
|
loc: token.loc.start,
|
||
|
data: {
|
||
|
token: token.value,
|
||
|
},
|
||
|
fix(fixer) {
|
||
|
return fixer.insertTextAfter(token, ' ');
|
||
|
},
|
||
|
});
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Reports that there should be a space before the last token
|
||
|
* @param {ASTNode} node - The node to report in the event of an error.
|
||
|
* @param {Token} token - The token to use for the report.
|
||
|
* @returns {void}
|
||
|
*/
|
||
|
function reportRequiredEndingSpace(node, token) {
|
||
|
report(context, messages.spaceNeededBefore, 'spaceNeededBefore', {
|
||
|
node,
|
||
|
loc: token.loc.start,
|
||
|
data: {
|
||
|
token: token.value,
|
||
|
},
|
||
|
fix(fixer) {
|
||
|
return fixer.insertTextBefore(token, ' ');
|
||
|
},
|
||
|
});
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Determines if spacing in curly braces is valid.
|
||
|
* @param {ASTNode} node The AST node to check.
|
||
|
* @returns {void}
|
||
|
*/
|
||
|
function validateBraceSpacing(node) {
|
||
|
let config;
|
||
|
switch (node.parent.type) {
|
||
|
case 'JSXAttribute':
|
||
|
case 'JSXOpeningElement':
|
||
|
config = attributesConfig;
|
||
|
break;
|
||
|
|
||
|
case 'JSXElement':
|
||
|
case 'JSXFragment':
|
||
|
config = childrenConfig;
|
||
|
break;
|
||
|
|
||
|
default:
|
||
|
return;
|
||
|
}
|
||
|
if (config === null) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
const sourceCode = context.getSourceCode();
|
||
|
const first = sourceCode.getFirstToken(node);
|
||
|
const last = sourceCode.getLastToken(node);
|
||
|
let second = sourceCode.getTokenAfter(first, { includeComments: true });
|
||
|
let penultimate = sourceCode.getTokenBefore(last, { includeComments: true });
|
||
|
|
||
|
if (!second) {
|
||
|
second = sourceCode.getTokenAfter(first);
|
||
|
const leadingComments = sourceCode.getNodeByRangeIndex(second.range[0]).leadingComments;
|
||
|
second = leadingComments ? leadingComments[0] : second;
|
||
|
}
|
||
|
if (!penultimate) {
|
||
|
penultimate = sourceCode.getTokenBefore(last);
|
||
|
const trailingComments = sourceCode.getNodeByRangeIndex(penultimate.range[0]).trailingComments;
|
||
|
penultimate = trailingComments ? trailingComments[trailingComments.length - 1] : penultimate;
|
||
|
}
|
||
|
|
||
|
const isObjectLiteral = first.value === second.value;
|
||
|
const spacing = isObjectLiteral ? config.objectLiteralSpaces : config.when;
|
||
|
if (spacing === SPACING.always) {
|
||
|
if (!sourceCode.isSpaceBetweenTokens(first, second)) {
|
||
|
reportRequiredBeginningSpace(node, first);
|
||
|
} else if (!config.allowMultiline && isMultiline(first, second)) {
|
||
|
reportNoBeginningNewline(node, first, spacing);
|
||
|
}
|
||
|
if (!sourceCode.isSpaceBetweenTokens(penultimate, last)) {
|
||
|
reportRequiredEndingSpace(node, last);
|
||
|
} else if (!config.allowMultiline && isMultiline(penultimate, last)) {
|
||
|
reportNoEndingNewline(node, last, spacing);
|
||
|
}
|
||
|
} else if (spacing === SPACING.never) {
|
||
|
if (isMultiline(first, second)) {
|
||
|
if (!config.allowMultiline) {
|
||
|
reportNoBeginningNewline(node, first, spacing);
|
||
|
}
|
||
|
} else if (sourceCode.isSpaceBetweenTokens(first, second)) {
|
||
|
reportNoBeginningSpace(node, first);
|
||
|
}
|
||
|
if (isMultiline(penultimate, last)) {
|
||
|
if (!config.allowMultiline) {
|
||
|
reportNoEndingNewline(node, last, spacing);
|
||
|
}
|
||
|
} else if (sourceCode.isSpaceBetweenTokens(penultimate, last)) {
|
||
|
reportNoEndingSpace(node, last);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// --------------------------------------------------------------------------
|
||
|
// Public
|
||
|
// --------------------------------------------------------------------------
|
||
|
|
||
|
return {
|
||
|
JSXExpressionContainer: validateBraceSpacing,
|
||
|
JSXSpreadAttribute: validateBraceSpacing,
|
||
|
};
|
||
|
},
|
||
|
};
|