Merge pull request #1202 from deecewan/master

Allow for stricter no-literals rule

Author: yannickcr

docs/rules/jsx-no-literals.md

@@ -1,11 +1,12 @@
-# Prevent usage of unwrapped JSX strings (react/jsx-no-literals)
+# Prevent usage of string literals in JSX (react/jsx-no-literals)
 
-In JSX when using a literal string you can wrap it in a JSX container `{'TEXT'}`.
-This rules 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.
+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.
 
 ## 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.
+
 The following patterns are considered warnings:
 
 ```jsx
@@ -18,6 +19,40 @@ The following patterns are not considered warnings:
 var Hello = <div>{'test'}</div>;
 ```
 
+### Options
+
+There is only one option:
+
+* `noStrings` - Enforces no string literals used as children, wrapped or unwrapped.
+
+To use, you can specify like the following:
+
+```json
+"react/jsx-no-literals": [{"noStrings": true}]
+```
+
+In this configuration, the following are considered warnings:
+
+```jsx
+var Hello = <div>test</div>;
+```
+
+```jsx
+var Hello = <div>{'test'}</div>;
+```
+
+The following are not considered warnings:
+
+```jsx
+// When using something like `react-intl`
+var Hello = <div><Text {...message} /></div>
+```
+
+```jsx
+// When using something similar to Rails translations
+var Hello = <div>{translate('my.translation.key')}</div>
+```
+
 ## When Not To Use It
 
 If you do not want to enforce any style JSX literals, then you can disable this rule.

lib/rules/jsx-no-literals.js

@@ -1,6 +1,7 @@
 /**
  * @fileoverview Prevent using string literals in React component definition
  * @author Caleb Morris
+ * @author David Buchan-Swanson
  */
 'use strict';
 
@@ -18,33 +19,48 @@ module.exports = {
 
     schema: [{
       type: 'object',
-      properties: {},
+      properties: {
+        noStrings: {
+          type: 'boolean'
+        }
+      },
       additionalProperties: false
     }]
   },
 
   create: function(context) {
+    const isNoStrings = context.options[0] ? context.options[0].noStrings : false;
+
+    const message = isNoStrings ?
+      'Strings not allowed in JSX files' :
+      'Missing JSX expression container around literal string';
+
     function reportLiteralNode(node) {
       context.report({
         node: node,
-        message: 'Missing JSX expression container around literal string'
+        message: message
       });
     }
 
+    function getValidation(node) {
+      const standard = !/^[\s]+$/.test(node.value) &&
+          node.parent &&
+          node.parent.type.indexOf('JSX') !== -1 &&
+          node.parent.type !== 'JSXAttribute';
+      if (isNoStrings) {
+        return standard;
+      }
+      return standard && node.parent.type !== 'JSXExpressionContainer';
+    }
+
     // --------------------------------------------------------------------------
     // Public
     // --------------------------------------------------------------------------
 
     return {
 
       Literal: function(node) {
-        if (
-          !/^[\s]+$/.test(node.value) &&
-          node.parent &&
-          node.parent.type !== 'JSXExpressionContainer' &&
-          node.parent.type !== 'JSXAttribute' &&
-          node.parent.type.indexOf('JSX') !== -1
-        ) {
+        if (getValidation(node)) {
           reportLiteralNode(node);
         }
       }

tests/lib/rules/jsx-no-literals.js

@@ -1,6 +1,7 @@
 /**
  * @fileoverview Prevent using unwrapped literals in a React component definition
  * @author Caleb morris
+ * @author David Buchan-Swanson
  */
 'use strict';
 
@@ -109,6 +110,36 @@ ruleTester.run('jsx-no-literals', rule, {
         '</Foo>'
       ].join('\n'),
       parser: 'babel-eslint'
+    }, {
+      code: `
+        <Foo bar="test">
+          {intl.formatText(message)}
+        </Foo>
+      `,
+      parser: 'babel-eslint',
+      options: [{noStrings: true}]
+    }, {
+      code: `
+        <Foo bar="test">
+          {translate('my.translate.key')}
+        </Foo>
+      `,
+      parser: 'babel-eslint',
+      options: [{noStrings: true}]
+    }, {
+      code: `
+        <Foo bar="test">
+          {intl.formatText(message)}
+        </Foo>
+      `,
+      options: [{noStrings: true}]
+    }, {
+      code: `
+        <Foo bar="test">
+          {translate('my.translate.key')}
+        </Foo>
+      `,
+      options: [{noStrings: true}]
     }
   ],
 
@@ -202,6 +233,40 @@ ruleTester.run('jsx-no-literals', rule, {
       ].join('\n'),
       parser: 'babel-eslint',
       errors: [{message: 'Missing JSX expression container around literal string'}]
+    }, {
+      code: `
+        <Foo bar="test">
+          {'Test'}
+        </Foo>
+      `,
+      parser: 'babel-eslint',
+      options: [{noStrings: true}],
+      errors: [{message: 'Strings not allowed in JSX files'}]
+    }, {
+      code: `
+        <Foo bar="test">
+          {'Test'}
+        </Foo>
+      `,
+      options: [{noStrings: true}],
+      errors: [{message: 'Strings not allowed in JSX files'}]
+    }, {
+      code: `
+        <Foo bar="test">
+          Test
+        </Foo>
+      `,
+      parser: 'babel-eslint',
+      options: [{noStrings: true}],
+      errors: [{message: 'Strings not allowed in JSX files'}]
+    }, {
+      code: `
+        <Foo bar="test">
+          Test
+        </Foo>
+      `,
+      options: [{noStrings: true}],
+      errors: [{message: 'Strings not allowed in JSX files'}]
     }
   ]
 });