[Fix] jsx-curly-brace-presence: make unwrapping single-expression template literals configurable

Fixes #3607

Author: akx

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

@@ -20,7 +20,7 @@ You can pass in options to enforce the presence of curly braces on JSX props, ch
 
 ```js
 ...
-"react/jsx-curly-brace-presence": [<enabled>, { "props": <string>, "children": <string>, "propElementValues": <string> }]
+"react/jsx-curly-brace-presence": [<enabled>, { "props": <string>, "children": <string>, "propElementValues": <string>, "unwrapTemplateLiterals": <boolean> }]
 ...
 ```
 
@@ -47,7 +47,13 @@ If passed in the option to fix, this is how a style violation will get fixed
 
 - All fixing operations use double quotes.
 
-For examples:
+### `unwrapTemplateLiterals`
+
+- `true`: unwrap template literals that only have a single expression inside of them.
+  Since template literals return strings, this may cause changes in semantics, or type errors.
+- `false` (default): do not unwrap template literals that only have a single expression inside of them.
+
+## Examples
 
 Examples of **incorrect** code for this rule, when configured with `{ props: "always", children: "always" }`:
 

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

@@ -25,7 +25,12 @@ const OPTION_VALUES = [
   OPTION_NEVER,
   OPTION_IGNORE,
 ];
-const DEFAULT_CONFIG = { props: OPTION_NEVER, children: OPTION_NEVER, propElementValues: OPTION_IGNORE };
+const DEFAULT_CONFIG = {
+  props: OPTION_NEVER,
+  children: OPTION_NEVER,
+  propElementValues: OPTION_IGNORE,
+  unwrapTemplateLiterals: false,
+};
 
 // ------------------------------------------------------------------------------
 // Rule Definition
@@ -57,6 +62,7 @@ module.exports = {
               props: { enum: OPTION_VALUES },
               children: { enum: OPTION_VALUES },
               propElementValues: { enum: OPTION_VALUES },
+              unwrapTemplateLiterals: { type: 'boolean' },
             },
             additionalProperties: false,
           },
@@ -287,7 +293,9 @@ module.exports = {
       ) {
         reportUnnecessaryCurly(JSXExpressionNode);
       } else if (
-        isSingleExpressionTemplateLiteral(expression)) {
+        isSingleExpressionTemplateLiteral(expression)
+        && userConfig.unwrapTemplateLiterals
+      ) {
         reportUnnecessaryCurly(JSXExpressionNode);
       } else if (jsxUtil.isJSX(expression)) {
         reportUnnecessaryCurly(JSXExpressionNode);

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

@@ -944,13 +944,17 @@ ruleTester.run('jsx-curly-brace-presence', rule, {
       code: '<App label={`${label}`} />',
       output: '<App label={label} />',
       errors: [{ messageId: 'unnecessaryCurly' }],
-      options: [{ props: 'never', children: 'never', propElementValues: 'never' }],
+      options: [{
+        props: 'never', children: 'never', propElementValues: 'never', unwrapTemplateLiterals: true,
+      }],
     },
     {
       code: '<App>{`${label}`}</App>',
       output: '<App>{label}</App>',
       errors: [{ messageId: 'unnecessaryCurly' }],
-      options: [{ props: 'never', children: 'never', propElementValues: 'never' }],
+      options: [{
+        props: 'never', children: 'never', propElementValues: 'never', unwrapTemplateLiterals: true,
+      }],
     }
   )),
 });