Fix: Add support for relative Platform ES imports (inline-plugin)

read: #1521 (comment)

Author: retyui

packages/metro-transform-plugins/src/__tests__/inline-plugin-test.js

@@ -934,4 +934,76 @@ describe('inline constants', () => {
 
     compare([stripFlow, inlinePlugin], code, expected, {dev: false});
   });
+
+  test('replaces Platform.OS in the code if Platform is a top level relative Node.js require()', () => {
+    // Source code before `@react-native/babel-preset`:
+    // const { Platform } = require('../../Utilities/Platform');
+    const code = `
+      var _require2 = require('../../Utilities/Platform'),
+          Platform = _require2.Platform;
+      var test = Platform.OS === 'ios' ? 'ios' : 'not-ios';
+    `;
+
+    compare([inlinePlugin], code, code.replace('Platform.OS', '"android"'), {
+      inlinePlatform: true,
+      platform: 'android',
+    });
+  });
+
+  test('replaces Platform.OS in the code if Platform is a top level relative ES import', () => {
+    // Source code before `@react-native/babel-preset`:
+    // import {Platform} from '../../Utilities/Platform';
+    const code = `
+      var _Platform = require("../../Utilities/Platform");
+      var test = _Platform.Platform.OS === 'ios' ? 'ios' : 'not-ios';
+    `;
+
+    compare(
+      [inlinePlugin],
+      code,
+      code.replace('_Platform.Platform.OS', '"android"'),
+      {
+        inlinePlatform: true,
+        platform: 'android',
+      },
+    );
+  });
+
+  test('replaces Platform.select in the code if Platform is a top level relative Node.js require()', () => {
+    const code = `
+      var _require2 = require('../../Utilities/Platform'),
+          Platform = _require2.Platform;
+
+      function a() {
+        Platform.select({ios: 1, android: 2});
+        var b = a.Platform.select({});
+      }
+    `;
+
+    compare([inlinePlugin], code, code.replace(/Platform\.select[^;]+/, '2'), {
+      inlinePlatform: 'true',
+      platform: 'android',
+    });
+  });
+
+  test('replaces Platform.select in the code if Platform is a top level relative ES import', () => {
+    const code = `
+      var _Platform = require("../../Utilities/Platform");
+
+      function a() {
+        _Platform.Platform.select({ios: 1, android: 2});
+        var b = a.Platform.select({});
+      }
+    `;
+
+    compare(
+      [inlinePlugin],
+      code,
+      code.replace(/_Platform\.Platform\.select[^;]+/, '2'),
+      {
+        inlinePlatform: 'true',
+        platform: 'android',
+      },
+    );
+  });
 });

packages/metro-transform-plugins/src/utils/createInlinePlatformChecks.js

@@ -148,6 +148,30 @@ export default function createInlinePlatformChecks(
     ) {
       return true;
     }
+    // Special case for handling transformed relative ES imports:
+    // ```tsx
+    // 1. Source code
+    // import {Platform} from '../../Utilities/Platform';
+    // const test = Platform.OS === 'ios' ? 1 : 2;
+    //
+    // 2. After `@react-native/babel-preset`
+    // var _Platform = require("../../Utilities/Platform");
+    // var test = _Platform.Platform.OS === 'ios' ? 1 : 2;
+    // ```
+    if (!identifier && isMemberExpression(node)) {
+      const propIdentifier = patterns.find((pattern: {name: string}) =>
+        isIdentifier(node.property, pattern),
+      );
+      const objName = node.object.name;
+      if (
+        propIdentifier &&
+        objName != null &&
+        isToplevelBinding(scope.getBinding(objName), isWrappedModule) &&
+        objName.startsWith(`_${propIdentifier.name}`)
+      ) {
+        return true;
+      }
+    }
     if (isImport(node, scope, patterns)) {
       return true;
     }