From 20f6de0fd27853f225abc9f73269308187a1afb7 Mon Sep 17 00:00:00 2001
From: Tommy Nguyen <4123478+tido64@users.noreply.github.com>
Date: Tue, 17 Sep 2024 13:25:49 +0200
Subject: [PATCH] fix(metro-serializer-esbuild): do not lower template literals
 (#3362)

---
 .changeset/gentle-eggs-type.md                    |  6 ++++++
 packages/metro-serializer-esbuild/src/index.ts    |  3 ++-
 .../test/__fixtures__/templateLiterals.ts         |  1 +
 .../metro-serializer-esbuild/test/index.test.ts   | 15 +++++++++++++++
 4 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/gentle-eggs-type.md
 create mode 100644 packages/metro-serializer-esbuild/test/__fixtures__/templateLiterals.ts

diff --git a/.changeset/gentle-eggs-type.md b/.changeset/gentle-eggs-type.md
new file mode 100644
index 000000000..b59d21d4e
--- /dev/null
+++ b/.changeset/gentle-eggs-type.md
@@ -0,0 +1,6 @@
+---
+"@rnx-kit/metro-serializer-esbuild": patch
+---
+
+Do not lower template literals. Template literals are partially supported by
+Hermes for most of the use cases we care about (e.g., `styled-components`).
diff --git a/packages/metro-serializer-esbuild/src/index.ts b/packages/metro-serializer-esbuild/src/index.ts
index 4aef895d9..bf016a30d 100644
--- a/packages/metro-serializer-esbuild/src/index.ts
+++ b/packages/metro-serializer-esbuild/src/index.ts
@@ -289,7 +289,7 @@ export function MetroSerializer(
             return undefined;
           }
 
-          // The following features should be safe to enable if we take into
+          // `arrow` and `generator` should be safe to enable if we take into
           // consideration that Hermes does not support classes. They were
           // disabled in esbuild 0.14.49 after the feature compatibility table
           // generator was fixed (see
@@ -297,6 +297,7 @@ export function MetroSerializer(
           return {
             arrow: true,
             generator: true,
+            "template-literal": true, // Used heavily by `styled-components`
           };
         })(),
         write: false,
diff --git a/packages/metro-serializer-esbuild/test/__fixtures__/templateLiterals.ts b/packages/metro-serializer-esbuild/test/__fixtures__/templateLiterals.ts
new file mode 100644
index 000000000..26a502008
--- /dev/null
+++ b/packages/metro-serializer-esbuild/test/__fixtures__/templateLiterals.ts
@@ -0,0 +1 @@
+console.log`Hello`;
diff --git a/packages/metro-serializer-esbuild/test/index.test.ts b/packages/metro-serializer-esbuild/test/index.test.ts
index 62bfeb558..8c7a217e9 100644
--- a/packages/metro-serializer-esbuild/test/index.test.ts
+++ b/packages/metro-serializer-esbuild/test/index.test.ts
@@ -48,6 +48,7 @@ describe("metro-serializer-esbuild", () => {
           require.resolve("react-native/package.json")
         ),
         dependencies: {},
+        assets: [],
         commands: [],
         healthChecks: [],
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -308,4 +309,18 @@ describe("metro-serializer-esbuild", () => {
       )
     );
   });
+
+  it("preserves template literals", async () => {
+    const result = await bundle("test/__fixtures__/templateLiterals.ts");
+    deepEqual(result, [
+      "(() => {",
+      "  // virtual:metro:__rnx_prelude__",
+      '  var global = new Function("return this;")();',
+      "",
+      "  // test/__fixtures__/templateLiterals.ts",
+      "  console.log`Hello`;",
+      "})();",
+      "",
+    ]);
+  });
 });