feat(polyfills): introduce @rnx-kit/polyfills

[tido64]

Description

This is a polyfills "autolinker" for Metro. It works like native module autolinking, but gathers polyfills from dependencies instead.

Note

This package is temporary. Ideally, this should be upstreamed to @react-native-community/cli.

Test plan

Cherry-pick the BatteryStatus module:

git cherry-pick tido/webapis/battery-manager

Apply the following changes to the test app:

diff --git a/packages/test-app/metro.config.js b/packages/test-app/metro.config.js
index 7c0dcfc2..df0f8b0d 100644
--- a/packages/test-app/metro.config.js
+++ b/packages/test-app/metro.config.js
@@ -33,4 +33,7 @@ module.exports = makeMetroConfig({
     blacklistRE: blockList,
     blockList,
   },
+  serializer: {
+    getModulesRunBeforeMainModule: require("@rnx-kit/polyfills").default,
+  },
 });
diff --git a/packages/test-app/src/App.native.tsx b/packages/test-app/src/App.native.tsx
index 599634a9..b465f0fe 100644
--- a/packages/test-app/src/App.native.tsx
+++ b/packages/test-app/src/App.native.tsx
@@ -1,3 +1,5 @@
+// Temporary until we figure out how to magically inject WebAPIs
+import "@react-native-webapis/battery-status";
 import { acquireTokenWithScopes } from "@rnx-kit/react-native-auth";
 // Both `internal` imports are used to verify that `metro-resolver-symlinks`
 // resolves them correctly when `experimental_retryResolvingFromDisk` is
@@ -7,7 +9,7 @@ import {
   getRemoteDebuggingAvailability,
 } from "internal";
 import { getHermesVersion } from "internal/hermes";
-import React, { useCallback, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import type { LayoutChangeEvent } from "react-native";
 import {
   NativeModules,
@@ -186,6 +188,14 @@ function App({ concurrentRoot }: { concurrentRoot?: boolean }) {
     [setFabric]
   );

+  const [batteryLevel, setBatteryLevel] = useState(-1);
+  useEffect(() => {
+    // @ts-expect-error FIXME
+    global.navigator.getBattery().then((status) => {
+      setBatteryLevel(status.level);
+    });
+  }, []);
+
   return (
     <SafeAreaView style={styles.body}>
       <StatusBar barStyle={isDarkMode ? "light-content" : "dark-content"} />
@@ -195,6 +205,9 @@ function App({ concurrentRoot }: { concurrentRoot?: boolean }) {
         style={styles.body}
       >
         <Header />
+        <View style={styles.group}>
+          <Feature value={batteryLevel.toFixed(2)}>Battery Level</Feature>
+        </View>
         <View style={styles.group}>
           <Button onPress={startAcquireToken}>Acquire Token</Button>
         </View>

Build and run:

yarn
cd packages/test-app
yarn build --dependencies
yarn bundle:ios
pod install --project-directory=ios
yarn ios

Note: When running in the simulator, the battery level will always be '-1'.

[kelset]