From f73bdab7f6d20ce8c8bae676a6e87c414ee6aec7 Mon Sep 17 00:00:00 2001
From: Aarni Koskela <akx@iki.fi>
Date: Fri, 21 Jul 2023 15:52:14 +0300
Subject: [PATCH] [Fix] `jsx-curly-brace-presence`: make unwrapping
 single-expression template literals configurable

Fixes #3607
---
 docs/rules/jsx-curly-brace-presence.md      | 10 ++++++++--
 lib/rules/jsx-curly-brace-presence.js       | 12 ++++++++++--
 tests/lib/rules/jsx-curly-brace-presence.js |  8 ++++++--
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/docs/rules/jsx-curly-brace-presence.md b/docs/rules/jsx-curly-brace-presence.md
index ddd296926a..156d3503c5 100644
--- 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
index 28b72e86eb..fec0cf63ec 100755
--- 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
index 284d008bfd..f4968a5d53 100755
--- 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,
+      }],
     }
   )),
 });