From d61c993bbae33bf6dd42f6f9a047e8bbaa04b6c5 Mon Sep 17 00:00:00 2001
From: roboz0r <mental.blindfolds.on@gmail.com>
Date: Thu, 19 Sep 2024 10:47:08 -0500
Subject: [PATCH] fix: Fix escaping of `{` and `}` in FormattableString (#3890)

---------

Co-authored-by: Maxime Mangel <mangel.maxime@protonmail.com>
---
 src/Fable.Cli/CHANGELOG.md           |  4 +++
 src/Fable.Transforms/BabelPrinter.fs |  7 ++++-
 src/fable-library-ts/CHANGELOG.md    |  4 +++
 src/fable-library-ts/String.ts       |  8 ++++--
 tests/Js/Main/StringTests.fs         | 40 ++++++++++++++++++++++++++++
 5 files changed, 60 insertions(+), 3 deletions(-)

diff --git a/src/Fable.Cli/CHANGELOG.md b/src/Fable.Cli/CHANGELOG.md
index 9a719ee7e..abc466a14 100644
--- a/src/Fable.Cli/CHANGELOG.md
+++ b/src/Fable.Cli/CHANGELOG.md
@@ -15,6 +15,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 * [Python] Remove `$` sign when reporting an error from `assert_equal` and `assert_not_equal` (#3878) (by @joprice)
 
+### Fixed
+
+* [JS/TS] Fix escaping of `{` and `}` in FormattableString (#3890) (by @roboz0r)
+
 ## 4.20.0 - 2024-09-04
 
 ### Added
diff --git a/src/Fable.Transforms/BabelPrinter.fs b/src/Fable.Transforms/BabelPrinter.fs
index e4ba357eb..71749afc9 100644
--- a/src/Fable.Transforms/BabelPrinter.fs
+++ b/src/Fable.Transforms/BabelPrinter.fs
@@ -573,7 +573,12 @@ module PrinterExtensions =
             | Literal.DirectiveLiteral(literal) -> printer.Print(literal)
             | StringTemplate(tag, parts, values, loc) ->
                 let escape str =
-                    Regex.Replace(str, @"(?<!\\)\\", @"\\").Replace("`", @"\`")
+                    Regex
+                        .Replace(str, @"(?<!\\)\\", @"\\")
+                        .Replace("`", @"\`")
+                        // FormattableString replaces { with {{
+                        .Replace("{{", "{")
+                        .Replace("}}", "}")
 
                 printer.AddLocation(loc)
                 printer.PrintOptional(tag)
diff --git a/src/fable-library-ts/CHANGELOG.md b/src/fable-library-ts/CHANGELOG.md
index d931ef557..e82a31c94 100644
--- a/src/fable-library-ts/CHANGELOG.md
+++ b/src/fable-library-ts/CHANGELOG.md
@@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 * [JS/TS] Add support for `OrdinalIgnoreCase` overload for `String.EndsWith` (#3892) (by @goswinr)
 
+### Fixed
+
+* [JS/TS] Fix escaping of `{` and `}` in FormattableString (#3890) (by @roboz0r)
+
 ## 1.4.3 - 2024-09-04
 
 * [JS/TS] Fixed Decimal comparisons (#3884) (by @ncave)
diff --git a/src/fable-library-ts/String.ts b/src/fable-library-ts/String.ts
index 41ff21d45..6b58e844b 100644
--- a/src/fable-library-ts/String.ts
+++ b/src/fable-library-ts/String.ts
@@ -596,7 +596,11 @@ export function fmtWith(fmts: string[]) {
 }
 
 export function getFormat(s: FormattableString) {
+  const strs = s.strs.map((value) => value.replace(/{/g, '{{').replace(/}/g, '}}'));
+
   return s.fmts
-    ? s.strs.reduce((acc, newPart, index) => acc + `{${String(index - 1) + s.fmts![index - 1]}}` + newPart)
-    : s.strs.reduce((acc, newPart, index) => acc + `{${index - 1}}` + newPart);
+    ? strs
+      .reduce((acc, newPart, index) => acc + `{${String(index - 1) + s.fmts![index - 1]}}` + newPart)
+    : strs
+      .reduce((acc, newPart, index) => acc + `{${index - 1}}` + newPart);
 }
diff --git a/tests/Js/Main/StringTests.fs b/tests/Js/Main/StringTests.fs
index 3707d3a48..bda0f73e7 100644
--- a/tests/Js/Main/StringTests.fs
+++ b/tests/Js/Main/StringTests.fs
@@ -1166,6 +1166,8 @@ let tests = testList "Strings" [
         s4.Format |> equal "I have `backticks`"
         let s5: FormattableString = $"I have {{escaped braces}} and %%percentage%%"
         s5.Format |> equal "I have {{escaped braces}} and %percentage%"
+        let s6: FormattableString = $$$$"""I have {{escaped braces}} and %%percentage%%"""
+        s6.Format |> equal "I have {{{{escaped braces}}}} and %%percentage%%"
         ()
 
 #if FABLE_COMPILER
@@ -1184,5 +1186,43 @@ let tests = testList "Strings" [
         s2.GetStrings() |> toArray |> equal [|""; "This is \""; "\" awesome!"|]
         let s3: FormattableString = $"""I have no holes"""
         s3.GetStrings() |> toArray |> equal [|"I have no holes"|]
+
+    testCase "FormattableString fragments handle { and }" <| fun () ->
+// TypeScript will complain because TemplateStringsArray is not equivalent to string[]
+#if FABLE_COMPILER_TYPESCRIPT
+        let toArray = Seq.toArray
+#else
+        let toArray = id
+#endif
+        let classAttr = "item-panel"
+        let cssNew :FormattableString = $$""".{{classAttr}}:hover {background-color: #eee;}"""
+        let strs = cssNew.GetStrings() |> toArray
+        strs |> equal [|"."; ":hover {background-color: #eee;}"|]
+        let args = cssNew.GetArguments()
+        args |> equal [|classAttr|]
+
+        let cssNew :FormattableString = $""".{classAttr}:hover {{background-color: #eee;}}"""
+        let strs = cssNew.GetStrings() |> toArray
+        strs |> equal [|"."; ":hover {background-color: #eee;}"|]
+        let args = cssNew.GetArguments()
+        args |> equal [|classAttr|]
+
+        let cssNew :FormattableString = $".{classAttr}:hover {{background-color: #eee;}}"
+        let strs = cssNew.GetStrings() |> toArray
+        strs |> equal [|"."; ":hover {background-color: #eee;}"|]
+        let args = cssNew.GetArguments()
+        args |> equal [|classAttr|]
+
+        let another :FormattableString = $$"""{ { } {{classAttr}} } } }"""
+        let strs = another.GetStrings() |> toArray
+        strs |> equal [|"{ { } "; " } } }"|]
+        let args = another.GetArguments()
+        args |> equal [|classAttr|]
+
+        let another :FormattableString = $"""{{ {{{{ }}}}}} {classAttr} }}}} }} }}}}"""
+        let strs = another.GetStrings() |> toArray
+        strs |> equal [|"{ {{ }}} "; " }} } }}"|]
+        let args = another.GetArguments()
+        args |> equal [|classAttr|]
 #endif
 ]