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.
189 lines
5.3 KiB
189 lines
5.3 KiB
2 years ago
|
/**
|
||
|
* @fileoverview Prevent using string literals in React component definition
|
||
|
* @author Caleb Morris
|
||
|
* @author David Buchan-Swanson
|
||
|
*/
|
||
|
|
||
|
'use strict';
|
||
|
|
||
|
const docsUrl = require('../util/docsUrl');
|
||
|
const report = require('../util/report');
|
||
|
|
||
|
// ------------------------------------------------------------------------------
|
||
|
// Rule Definition
|
||
|
// ------------------------------------------------------------------------------
|
||
|
|
||
|
function trimIfString(val) {
|
||
|
return typeof val === 'string' ? val.trim() : val;
|
||
|
}
|
||
|
|
||
|
const messages = {
|
||
|
invalidPropValue: 'Invalid prop value: "{{text}}"',
|
||
|
noStringsInAttributes: 'Strings not allowed in attributes: "{{text}}"',
|
||
|
noStringsInJSX: 'Strings not allowed in JSX files: "{{text}}"',
|
||
|
literalNotInJSXExpression: 'Missing JSX expression container around literal string: "{{text}}"',
|
||
|
};
|
||
|
|
||
|
module.exports = {
|
||
|
meta: {
|
||
|
docs: {
|
||
|
description: 'Prevent using string literals in React component definition',
|
||
|
category: 'Stylistic Issues',
|
||
|
recommended: false,
|
||
|
url: docsUrl('jsx-no-literals'),
|
||
|
},
|
||
|
|
||
|
messages,
|
||
|
|
||
|
schema: [{
|
||
|
type: 'object',
|
||
|
properties: {
|
||
|
noStrings: {
|
||
|
type: 'boolean',
|
||
|
},
|
||
|
allowedStrings: {
|
||
|
type: 'array',
|
||
|
uniqueItems: true,
|
||
|
items: {
|
||
|
type: 'string',
|
||
|
},
|
||
|
},
|
||
|
ignoreProps: {
|
||
|
type: 'boolean',
|
||
|
},
|
||
|
noAttributeStrings: {
|
||
|
type: 'boolean',
|
||
|
},
|
||
|
},
|
||
|
additionalProperties: false,
|
||
|
}],
|
||
|
},
|
||
|
|
||
|
create(context) {
|
||
|
const defaults = {
|
||
|
noStrings: false,
|
||
|
allowedStrings: [],
|
||
|
ignoreProps: false,
|
||
|
noAttributeStrings: false,
|
||
|
};
|
||
|
const config = Object.assign({}, defaults, context.options[0] || {});
|
||
|
config.allowedStrings = new Set(config.allowedStrings.map(trimIfString));
|
||
|
|
||
|
function defaultMessageId() {
|
||
|
if (config.noAttributeStrings) {
|
||
|
return 'noStringsInAttributes';
|
||
|
}
|
||
|
if (config.noStrings) {
|
||
|
return 'noStringsInJSX';
|
||
|
}
|
||
|
return 'literalNotInJSXExpression';
|
||
|
}
|
||
|
|
||
|
function reportLiteralNode(node, messageId) {
|
||
|
messageId = messageId || defaultMessageId();
|
||
|
|
||
|
report(context, messages[messageId], messageId, {
|
||
|
node,
|
||
|
data: {
|
||
|
text: context.getSourceCode().getText(node).trim(),
|
||
|
},
|
||
|
});
|
||
|
}
|
||
|
|
||
|
function getParentIgnoringBinaryExpressions(node) {
|
||
|
let current = node;
|
||
|
while (current.parent.type === 'BinaryExpression') {
|
||
|
current = current.parent;
|
||
|
}
|
||
|
return current.parent;
|
||
|
}
|
||
|
|
||
|
function getValidation(node) {
|
||
|
if (config.allowedStrings.has(trimIfString(node.value))) {
|
||
|
return false;
|
||
|
}
|
||
|
const parent = getParentIgnoringBinaryExpressions(node);
|
||
|
|
||
|
function isParentNodeStandard() {
|
||
|
if (!/^[\s]+$/.test(node.value) && typeof node.value === 'string' && parent.type.includes('JSX')) {
|
||
|
if (config.noAttributeStrings) {
|
||
|
return parent.type === 'JSXAttribute';
|
||
|
}
|
||
|
if (!config.noAttributeStrings) {
|
||
|
return parent.type !== 'JSXAttribute';
|
||
|
}
|
||
|
}
|
||
|
|
||
|
return false;
|
||
|
}
|
||
|
|
||
|
const standard = isParentNodeStandard();
|
||
|
|
||
|
if (config.noStrings) {
|
||
|
return standard;
|
||
|
}
|
||
|
return standard && parent.type !== 'JSXExpressionContainer';
|
||
|
}
|
||
|
|
||
|
function getParentAndGrandParentType(node) {
|
||
|
const parent = getParentIgnoringBinaryExpressions(node);
|
||
|
const parentType = parent.type;
|
||
|
const grandParentType = parent.parent.type;
|
||
|
|
||
|
return {
|
||
|
parent,
|
||
|
parentType,
|
||
|
grandParentType,
|
||
|
grandParent: parent.parent,
|
||
|
};
|
||
|
}
|
||
|
|
||
|
function hasJSXElementParentOrGrandParent(node) {
|
||
|
const parents = getParentAndGrandParentType(node);
|
||
|
const parentType = parents.parentType;
|
||
|
const grandParentType = parents.grandParentType;
|
||
|
|
||
|
return parentType === 'JSXFragment' || parentType === 'JSXElement' || grandParentType === 'JSXElement';
|
||
|
}
|
||
|
|
||
|
// --------------------------------------------------------------------------
|
||
|
// Public
|
||
|
// --------------------------------------------------------------------------
|
||
|
|
||
|
return {
|
||
|
Literal(node) {
|
||
|
if (getValidation(node) && (hasJSXElementParentOrGrandParent(node) || !config.ignoreProps)) {
|
||
|
reportLiteralNode(node);
|
||
|
}
|
||
|
},
|
||
|
|
||
|
JSXAttribute(node) {
|
||
|
const isNodeValueString = node && node.value && node.value.type === 'Literal' && typeof node.value.value === 'string' && !config.allowedStrings.has(node.value.value);
|
||
|
|
||
|
if (config.noStrings && !config.ignoreProps && isNodeValueString) {
|
||
|
const messageId = 'invalidPropValue';
|
||
|
reportLiteralNode(node, messageId);
|
||
|
}
|
||
|
},
|
||
|
|
||
|
JSXText(node) {
|
||
|
if (getValidation(node)) {
|
||
|
reportLiteralNode(node);
|
||
|
}
|
||
|
},
|
||
|
|
||
|
TemplateLiteral(node) {
|
||
|
const parents = getParentAndGrandParentType(node);
|
||
|
const parentType = parents.parentType;
|
||
|
const grandParentType = parents.grandParentType;
|
||
|
const isParentJSXExpressionCont = parentType === 'JSXExpressionContainer';
|
||
|
const isParentJSXElement = parentType === 'JSXElement' || grandParentType === 'JSXElement';
|
||
|
|
||
|
if (isParentJSXExpressionCont && config.noStrings && (isParentJSXElement || !config.ignoreProps)) {
|
||
|
reportLiteralNode(node);
|
||
|
}
|
||
|
},
|
||
|
};
|
||
|
},
|
||
|
};
|