fix(metro-serializer-esbuild): removing `"use strict";` breaks source maps (#1869)

.changeset/rich-donkeys-design.md

@@ -0,0 +1,5 @@
+---
+"@rnx-kit/metro-serializer-esbuild": patch
+---
+
+Stop removing `"use strict";` by default as it breaks source maps

packages/metro-serializer-esbuild/README.md

@@ -126,6 +126,17 @@ parameter. For instance, to output ES6 compliant code, set the target option:
 
 Below are all the currently supported options.
 
+### `target`
+
+Sets the target environment for the transpiled JavaScript code.
+
+See the full documentation at https://esbuild.github.io/api/#target.
+
+Values: Any JS language version string such as `es6` or `esnext`. You can also
+use environment names. See the full documentation for a list of supported names.
+
+Defaults to `hermes0.7.0`.
+
 ### `fabric`
 
 When enabled, includes Fabric-enabled version of React. You can save some bytes
@@ -141,17 +152,6 @@ See the full documentation at https://esbuild.github.io/api/#minify.
 
 Defaults to `true` in production environment; `false` otherwise.
 
-### `target`
-
-Sets the target environment for the transpiled JavaScript code.
-
-See the full documentation at https://esbuild.github.io/api/#target.
-
-Values: Any JS language version string such as `es6` or `esnext`. You can also
-use environment names. See the full documentation for a list of supported names.
-
-Defaults to `hermes0.7.0`.
-
 ### `sourceMapPaths`
 
 Determines whether paths in the output source map are absolute or relative to
@@ -161,6 +161,20 @@ Values: `absolute` | `relative`
 
 Defaults to `relative`.
 
+### `strictMode`
+
+By default, the `"use strict";` directive is added by Babel and esbuild when
+lowering to ES5. You can save some bytes by telling this serializer to strip
+them from the bundle.
+
+Note that disabling `strictMode` here will definitely break source maps. It is
+recommended to try disabling strict mode in Babel or TypeScript first before
+considering this option. If you can target ES6, that is a better alternative.
+
+This flag only affects production environment.
+
+Defaults to `true`.
+
 ### `analyze`
 
 Sets whether esbuild should output a report at the end of bundling.

packages/metro-serializer-esbuild/package.json

@@ -49,6 +49,8 @@
   },
   "depcheck": {
     "ignoreMatches": [
+      "@fluentui/utilities",
+      "lodash-es",
       "metro-config",
       "metro-transform-worker"
     ]

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

@@ -15,6 +15,7 @@ export type Options = Pick<BuildOptions, "logLevel" | "minify" | "target"> & {
   analyze?: boolean | "verbose";
   fabric?: boolean;
   sourceMapPaths?: "absolute" | "relative";
+  strictMode?: boolean;
 };
 
 function assertVersion(requiredVersion: string): void {
@@ -139,10 +140,10 @@ export function MetroSerializer(
       setup: (build) => {
         const pluginOptions = { filter: /.*/ };
 
-        // Metro does not inject `"use strict"`, but esbuild does. We should
-        // strip them out like Metro does. See also
+        // Metro does not inject `"use strict"`, but esbuild does. We can strip
+        // them out like Metro does, but it'll break the source map. See also
         // https://github.com/facebook/metro/blob/0fe1253cc4f76aa2a7683cfb2ad0253d0a768c83/packages/metro-react-native-babel-preset/src/configs/main.js#L68
-        if (!options.dev) {
+        if (!options.dev && buildOptions?.strictMode === false) {
           const encoder = new TextEncoder();
           build.onEnd(({ outputFiles }) => {
             outputFiles?.forEach(({ path, text }, index) => {

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

@@ -9,9 +9,9 @@ describe("metro-serializer-esbuild", () => {
   async function bundle(
     entryFile: string,
     dev = true,
-    sourcemapOutput = undefined
+    sourcemapOutput: string | undefined = undefined
   ): Promise<string> {
-    let result: string | undefined = undefined;
+    let result = "";
     await buildBundle(
       {
         entryFile,
@@ -254,14 +254,6 @@ describe("metro-serializer-esbuild", () => {
     `);
   });
 
-  test('strips out `"use strict"`', async () => {
-    const result = await bundle("test/__fixtures__/direct.ts", false);
-    expect(result).toMatchInlineSnapshot(`
-      "(()=>{var e=new Function(\\"return this;\\")();})();
-      "
-    `);
-  });
-
   test("adds sourceMappingURL comment", async () => {
     const result = await bundle(
       "test/__fixtures__/direct.ts",
@@ -269,7 +261,7 @@ describe("metro-serializer-esbuild", () => {
       ".test-output.jsbundle.map"
     );
     expect(result).toMatchInlineSnapshot(`
-      "(()=>{var e=new Function(\\"return this;\\")();})();
+      "\\"use strict\\";(()=>{var e=new Function(\\"return this;\\")();})();
       //# sourceMappingURL=.test-output.jsbundle.map
       "
     `);