metro-serializer-esbuild: `/*#__PURE__*/` markers are not respected

[tido64]

What happened?

/*#__PURE__*/ markers are stripped out by Metro (in metro-transform-worker) and never reaches esbuild.

Metro hard-codes the option to strip out comments so there is currently no clean way to change this. Verified that replacing the three instances of comments: false with comments: true fixes the issue.

Docs: https://babeljs.io/blog/2018/08/27/7.0.0#pure-annotation-support

Affected Package

@rnx-kit/metro-serializer-esbuild

Version

*

Which platforms are you seeing this issue on?

• Android
• iOS
• macOS
• Windows

System Information

n/a

Steps to Reproduce

Add react-native-icons and bundle:

diff --git a/packages/test-app/package.json b/packages/test-app/package.json
index eb0bdcbb..4f134247 100644
--- a/packages/test-app/package.json
+++ b/packages/test-app/package.json
@@ -25,6 +25,7 @@
     "start": "react-native rnx-start"
   },
   "dependencies": {
+    "@warren-ms/react-native-icons": "2.0.199",
     "react": "18.2.0",
     "react-native": "^0.71.0",
     "react-native-macos": "^0.71.0",
diff --git a/packages/test-app/src/App.native.tsx b/packages/test-app/src/App.native.tsx
index 1345c498..94911607 100644
--- a/packages/test-app/src/App.native.tsx
+++ b/packages/test-app/src/App.native.tsx
@@ -1,4 +1,5 @@
 import { acquireTokenWithScopes } from "@rnx-kit/react-native-auth";
+import { Add16Regular } from "@warren-ms/react-native-icons/lib/sizedIcons/chunk-0";
 import React, { useCallback, useMemo, useState } from "react";
 import {
   NativeModules,
@@ -106,7 +107,7 @@ function useStyles() {
         marginStart: margin,
       },
     });
-  }, [colorScheme]);
+  }, [colorScheme, Add16Regular]);
 }

 function Button({ children, onPress }: ButtonProps) {

Code of Conduct

• I agree to follow this project's Code of Conduct

[tido64]

Upstream fix: facebook/metro#967

[tido64]

Merged in 8d8f317.