diff --git a/docs/rules/jsx-no-literals.md b/docs/rules/jsx-no-literals.md index 0b1b977dd8..ab920844df 100644 --- a/docs/rules/jsx-no-literals.md +++ b/docs/rules/jsx-no-literals.md @@ -1,11 +1,10 @@ # Prevent usage of string literals in JSX (react/jsx-no-literals) -There are a couple of scenarios where you want to avoid string literals in JSX. Either to enforce consistency and reducing strange behaviour, or for enforcing that literals aren't kept in JSX so they can be translated. +There are a few scenarios where you want to avoid string literals in JSX. You may want to enforce consistency, reduce syntax highlighting issues, or ensure that strings are part of a translation system. ## Rule Details -In JSX when using a literal string you can wrap it in a JSX container `{'TEXT'}`. This rules by default requires that you wrap all literal strings. -Prevents any odd artifacts of highlighters if your unwrapped string contains an enclosing character like `'` in contractions and enforces consistency. +By default this rule requires that you wrap all literal strings in a JSX container `{'TEXT'}`. The following patterns are considered warnings: @@ -19,14 +18,20 @@ The following patterns are **not** considered warnings: var Hello =
{'test'}
; ``` -### Options +```jsx +var Hello =
+ {'test'} +
; +``` + +## Rule Options There are two options: * `noStrings` - Enforces no string literals used as children, wrapped or unwrapped. -* `allowedStrings` - an array of unique string values that would otherwise warn, but will be ignored. +* `allowedStrings` - An array of unique string values that would otherwise warn, but will be ignored. -To use, you can specify like the following: +To use, you can specify as follows: ```js "react/jsx-no-literals": [, {"noStrings": true, "allowedStrings": ["allowed"]}] @@ -42,6 +47,12 @@ var Hello =
test
; var Hello =
{'test'}
; ``` +```jsx +var Hello =
+ {'test'} +
; +``` + The following are **not** considered warnings: ```jsx @@ -59,6 +70,13 @@ var Hello =
{translate('my.translation.key')}
var Hello =
allowed
``` +```jsx +// an allowed string surrounded by only whitespace +var Hello =
+ allowed +
; +``` + ## When Not To Use It If you do not want to enforce any style JSX literals, then you can disable this rule. diff --git a/lib/rules/jsx-no-literals.js b/lib/rules/jsx-no-literals.js index fd4d91be06..f2bb83dd01 100644 --- a/lib/rules/jsx-no-literals.js +++ b/lib/rules/jsx-no-literals.js @@ -40,10 +40,15 @@ module.exports = { }, create(context) { - const isNoStrings = context.options[0] ? context.options[0].noStrings : false; - const allowedStrings = context.options[0] ? new Set(context.options[0].allowedStrings) : false; + function trimIfString(val) { + return typeof val === 'string' ? val.trim() : val; + } + + const defaults = {noStrings: false, allowedStrings: []}; + const config = Object.assign({}, defaults, context.options[0] || {}); + config.allowedStrings = new Set(config.allowedStrings.map(trimIfString)); - const message = isNoStrings ? + const message = config.noStrings ? 'Strings not allowed in JSX files' : 'Missing JSX expression container around literal string'; @@ -63,7 +68,7 @@ module.exports = { } function getValidation(node) { - if (allowedStrings && allowedStrings.has(node.value)) { + if (config.allowedStrings.has(trimIfString(node.value))) { return false; } const parent = getParentIgnoringBinaryExpressions(node); @@ -71,7 +76,7 @@ module.exports = { typeof node.value === 'string' && parent.type.indexOf('JSX') !== -1 && parent.type !== 'JSXAttribute'; - if (isNoStrings) { + if (config.noStrings) { return standard; } return standard && parent.type !== 'JSXExpressionContainer'; @@ -97,7 +102,7 @@ module.exports = { TemplateLiteral(node) { const parent = getParentIgnoringBinaryExpressions(node); - if (isNoStrings && parent.type === 'JSXExpressionContainer') { + if (config.noStrings && parent.type === 'JSXExpressionContainer') { reportLiteralNode(node); } } diff --git a/tests/lib/rules/jsx-no-literals.js b/tests/lib/rules/jsx-no-literals.js index 5f1267757e..b620571b7a 100644 --- a/tests/lib/rules/jsx-no-literals.js +++ b/tests/lib/rules/jsx-no-literals.js @@ -207,6 +207,15 @@ ruleTester.run('jsx-no-literals', rule, { } `, options: [{allowedStrings: ['asdf']}] + }, { + code: ` + class Comp1 extends Component { + render() { + return
asdf
+ } + } + `, + options: [{noStrings: false, allowedStrings: ['asdf']}] }, { code: ` @@ -218,6 +227,20 @@ ruleTester.run('jsx-no-literals', rule, { `, options: [{noStrings: true, allowedStrings: [' ']}] }, + { + code: ` + class Comp1 extends Component { + render() { + return ( +
+   +
+ ); + } + } + `, + options: [{noStrings: true, allowedStrings: [' ']}] + }, { code: ` class Comp1 extends Component { @@ -227,6 +250,16 @@ ruleTester.run('jsx-no-literals', rule, { } `, options: [{noStrings: true, allowedStrings: ['foo: ', '*']}] + }, + { + code: ` + class Comp1 extends Component { + render() { + return
foo
+ } + } + `, + options: [{noStrings: true, allowedStrings: [' foo ']}] } ],