[Fix] jsx-curly-brace-presence: make unwrapping single-expression t…

…emplate literals configurable Fixes #3607
jsx-eslint · Jul 21, 2023 · f73bdab · f73bdab
1 parent 1a3a17a
commit f73bdab
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 6 deletions.
diff --git a/docs/rules/jsx-curly-brace-presence.md b/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" }`:
 

diff --git a/lib/rules/jsx-curly-brace-presence.js b/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);

diff --git a/tests/lib/rules/jsx-curly-brace-presence.js b/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,
+      }],
     }
   )),
 });