[new] [jsx-curly-brace-presence] Disallow unnecessary JSX expressions or enforce them

README.md

@@ -141,6 +141,7 @@ Finally, enable all of the rules that you would like to use.  Use [our preset](#
 * [react/jsx-no-literals](docs/rules/jsx-no-literals.md): Prevent usage of unwrapped JSX strings
 * [react/jsx-no-target-blank](docs/rules/jsx-no-target-blank.md): Prevent usage of unsafe `target='_blank'`
 * [react/jsx-no-undef](docs/rules/jsx-no-undef.md): Disallow undeclared variables in JSX
+* [react/jsx-curly-brace-presence](docs/rules/jsx-curly-brace-presence.md): Enforce curly braces or disallow unnecessary curly braces in JSX
 * [react/jsx-pascal-case](docs/rules/jsx-pascal-case.md): Enforce PascalCase for user-defined JSX components
 * [react/jsx-sort-props](docs/rules/jsx-sort-props.md): Enforce props alphabetical sorting
 * [react/jsx-space-before-closing](docs/rules/jsx-space-before-closing.md): Validate spacing before closing bracket in JSX (fixable)

docs/rules/jsx-curly-brace-presence.md

@@ -0,0 +1,63 @@
+# Enforce curly braces or disallow unnecessary curly braces in JSX props and/or children. (react/jsx-curly-brace-presence)
+
+This rule allows you to enforce curly braces or disallow unnecessary curly braces in JSX props and/or children.
+
+For situations where JSX expressions are unnecessary, please refer to [the React doc](https://facebook.github.io/react/docs/jsx-in-depth.html) and [this page about JSX gotchas](https://github.com/facebook/react/blob/v15.4.0-rc.3/docs/docs/02.3-jsx-gotchas.md#html-entities).
+
+**Fixable:** This rule is automatically fixable using the `--fix` flag on the command line but only for fixing unnecessary curly braces.
+
+## Rule Details
+
+By default, this rule will check for and warn about unnecessary curly braces in both JSX props and children.
+
+You can pass in options to enforce the presence of curly braces on JSX props or children or both. The same options are available for not allowing unnecessary curly braces as well as ignoring the check.
+
+## Rule Options
+
+```js
+...
+"react/forbid-elements": [<enabled>, { "props": <string>, "children": <string> }]
+...
+```
+
+### `props`, `children`
+
+For both, the valid values are `always`, `never` and `ignore`.
+
+* `always`: always enforce curly braces inside JSX props or/and children
+* `never`: never allow unnecessary curly braces inside JSX props or/and children
+* `ignore`: ignore the rule for JSX props or/and children
+
+For examples:
+
+When `{ props: "always", children: "always" }` is set, the following patterns will be given warnings.
+
+```jsx
+<App>Hello world</App>;
+<App prop='Hello world'>{'Hello world'}</App>;
+```
+
+The following patterns won't.
+
+```jsx
+<App>{'Hello world'}</App>;
+<App prop={'Hello world'}>{'Hello world'}</App>;
+```
+
+When `{ props: "never", children: "never" }` is set, the following patterns will be given warnings.
+
+```jsx
+<App>{'Hello world'}</App>;
+<App prop={'Hello world'} />;
+```
+
+If passed in the option to fix, they will be corrected to
+
+```jsx
+<App>Hello world</App>;
+<App prop='Hello world' />;
+```
+
+## When Not To Use It
+
+You should turn this rule off if you are not concerned about maintaining consistency regarding the use of curly braces in JSX props and/or children as well as the use of unnecessary JSX expressions.

index.js

@@ -28,6 +28,7 @@ const allRules = {
   'jsx-no-literals': require('./lib/rules/jsx-no-literals'),
   'jsx-no-target-blank': require('./lib/rules/jsx-no-target-blank'),
   'jsx-no-undef': require('./lib/rules/jsx-no-undef'),
+  'jsx-curly-brace-presence': require('./lib/rules/jsx-curly-brace-presence'),
   'jsx-pascal-case': require('./lib/rules/jsx-pascal-case'),
   'jsx-sort-props': require('./lib/rules/jsx-sort-props'),
   'jsx-space-before-closing': require('./lib/rules/jsx-space-before-closing'),

lib/rules/jsx-curly-brace-presence.js

@@ -0,0 +1,132 @@
+/**
+ * @fileoverview Enforce curly braces or disallow unnecessary curly brace in JSX
+ * @author Jacky Ho
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+const optionAlways = 'always';
+const optionNever = 'never';
+const optionIgnore = 'ignore';
+const optionValues = [optionAlways, optionNever, optionIgnore];
+const defaultConfig = {props: optionNever, children: optionNever};
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Disallow unnecessary JSX expressions when literals alone are sufficient',
+      category: 'Stylistic Issues',
+      recommended: false
+    },
+    fixable: 'code',
+
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          props: {enum: optionValues},
+          children: {enum: optionValues}
+        },
+        additionalProperties: false
+      }
+    ]
+  },
+
+  create: function(context) {
+    const userConfig = Object.assign(
+      {},
+      defaultConfig,
+      context.options[0]
+    );
+
+    function containsBackslashForEscaping(rawStringValue) {
+      return JSON.stringify(rawStringValue).includes('\\');
+    }
+
+    function reportUnnecessaryCurly(node) {
+      context.report({
+        node: node,
+        message: 'Curly braces are unnecessary here.',
+        fix: function(fixer) {
+          let {expression: {value}} = node;
+
+          if (node.parent.type === 'JSXAttribute') {
+            value = `"${value}"`;
+          }
+
+          return fixer.replaceText(node, value);
+        }
+      });
+    }
+
+    function reportMissingCurly(node) {
+      context.report({
+        node: node,
+        message: 'Need to wrap this literal in a JSX expression.'
+      });
+    }
+
+    function lintUnnecessaryCurly(node) {
+      const {expression} = node;
+
+      if (
+        typeof expression.value === 'string' &&
+          !containsBackslashForEscaping(expression.raw)
+      ) {
+        reportUnnecessaryCurly(node);
+      }
+    }
+
+    function areRuleConditionsSatisfied({parentType, config, ruleCondition}) {
+      return (
+        parentType === 'JSXAttribute' && config.props === ruleCondition
+      ) || (
+        parentType === 'JSXElement' && config.children === ruleCondition
+      );
+    }
+
+    function shouldCheckForUnnecessaryCurly(expressionType, parentType, config) {
+      if (expressionType !== 'Literal') {
+        return false;
+      }
+
+      return areRuleConditionsSatisfied({
+        parentType, config, ruleCondition: optionNever
+      });
+    }
+
+    function shouldCheckForMissingCurly(parentType, config) {
+      return areRuleConditionsSatisfied({
+        parentType, config, ruleCondition: optionAlways
+      });
+    }
+
+    // --------------------------------------------------------------------------
+    // Public
+    // --------------------------------------------------------------------------
+
+    return {
+      JSXExpressionContainer: function(node) {
+        const {
+          expression: {type},
+          parent: {type: parentType}
+        } = node;
+
+        if (shouldCheckForUnnecessaryCurly(type, parentType, userConfig)) {
+          lintUnnecessaryCurly(node);
+        }
+      },
+
+      Literal: function(node) {
+        const {parent: {type: parentType}} = node;
+
+        if (shouldCheckForMissingCurly(parentType, userConfig)) {
+          reportMissingCurly(node);
+        }
+      }
+    };
+  }
+};

tests/lib/rules/jsx-curly-brace-presence.js

@@ -0,0 +1,130 @@
+/**
+ * @fileoverview Enforce curly braces or disallow unnecessary curly braces in JSX
+ * @author Jacky Ho
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const rule = require('../../../lib/rules/jsx-curly-brace-presence');
+const RuleTester = require('eslint').RuleTester;
+const parserOptions = {
+  sourceType: 'module',
+  ecmaFeatures: {
+    jsx: true
+  }
+};
+
+const missingCurlyMessage = 'Need to wrap this literal in a JSX expression.';
+const unnecessaryCurlyMessage = 'Curly braces are unnecessary here.';
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+const ruleTester = new RuleTester({parserOptions});
+ruleTester.run('jsx-curly-brace-presence', rule, {
+  valid: [
+    {
+      code: '<App>{<myApp></myApp>}</App>'
+    },
+    {
+      code: '<App>{[]}</App>'
+    },
+    {
+      code: '<App>foo</App>'
+    },
+    {
+      code: '<App prop=\'bar\'>foo</App>'
+    },
+    {
+      code: '<App prop={true}>foo</App>'
+    },
+    {
+      code: '<App prop>foo</App>'
+    },
+    {
+      code: '<App prop=\'bar\'>{\'foo \\n bar\'}</App>'
+    },
+    {
+      code: '<App prop={\'foo \\u00b7 bar\'}>foo</App>'
+    },
+    {
+      code: '<MyComponent prop=\'bar\'>foo</MyComponent>',
+      options: [{props: 'never'}]
+    },
+    {
+      code: '<MyComponent>foo</MyComponent>',
+      options: [{children: 'never'}]
+    },
+    {
+      code: '<MyComponent prop={\'bar\'}>foo</MyComponent>',
+      options: [{props: 'always'}]
+    },
+    {
+      code: '<MyComponent>{\'foo\'}</MyComponent>',
+      options: [{children: 'always'}]
+    },
+    {
+      code: '<MyComponent>{\'foo\'}</MyComponent>',
+      options: [{children: 'ignore'}]
+    },
+    {
+      code: '<MyComponent prop={\'bar\'}>foo</MyComponent>',
+      options: [{props: 'ignore'}]
+    },
+    {
+      code: '<MyComponent prop=\'bar\'>foo</MyComponent>',
+      options: [{props: 'ignore'}]
+    },
+    {
+      code: '<MyComponent>foo</MyComponent>',
+      options: [{children: 'ignore'}]
+    },
+    {
+      code: '<MyComponent prop=\'bar\'>{\'foo\'}</MyComponent>',
+      options: [{children: 'always', props: 'never'}]
+    },
+    {
+      code: '<MyComponent prop={\'bar\'}>foo</MyComponent>',
+      options: [{children: 'never', props: 'always'}]
+    }
+  ],
+
+  invalid: [
+    {
+      code: '<MyComponent>{\'foo\'}</MyComponent>',
+      output: '<MyComponent>foo</MyComponent>',
+      errors: [{message: unnecessaryCurlyMessage}]
+    },
+    {
+      code: '<MyComponent prop={\'bar\'}>foo</MyComponent>',
+      output: '<MyComponent prop="bar">foo</MyComponent>',
+      errors: [{message: unnecessaryCurlyMessage}]
+    },
+    {
+      code: '<MyComponent>{\'foo\'}</MyComponent>',
+      output: '<MyComponent>foo</MyComponent>',
+      options: [{children: 'never'}],
+      errors: [{message: unnecessaryCurlyMessage}]
+    },
+    {
+      code: '<MyComponent prop={\'bar\'}>foo</MyComponent>',
+      output: '<MyComponent prop="bar">foo</MyComponent>',
+      options: [{props: 'never'}],
+      errors: [{message: unnecessaryCurlyMessage}]
+    },
+    {
+      code: '<MyComponent prop=\'bar\'>foo</MyComponent>',
+      options: [{props: 'always'}],
+      errors: [{message: missingCurlyMessage}]
+    },
+    {
+      code: '<MyComponent>foo</MyComponent>',
+      options: [{children: 'always'}],
+      errors: [{message: missingCurlyMessage}]
+    }
+  ]
+});