fix(metro-serializer-esbuild): do not lower template literals (#3362)

.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`).

packages/metro-serializer-esbuild/src/index.ts

@@ -289,14 +289,15 @@ 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
           // https://github.com/evanw/esbuild/releases/tag/v0.14.49).
           return {
             arrow: true,
             generator: true,
+            "template-literal": true, // Used heavily by `styled-components`
           };
         })(),
         write: false,

packages/metro-serializer-esbuild/test/__fixtures__/templateLiterals.ts

@@ -0,0 +1 @@
+console.log`Hello`;

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`;",
+      "})();",
+      "",
+    ]);
+  });
 });