Reduce the changes in our custom metro config (#4939)

* Reduce need for custom metro configs * Change files * Fix for integration tests
microsoft · May 19, 2020 · 8d0d5de · 8d0d5de
1 parent 08ec22c
commit 8d0d5de
Show file tree

Hide file tree

Showing 12 changed files with 110 additions and 191 deletions.
diff --git a/change/@office-iss-react-native-win32-2020-05-18-09-46-04-metrofix.json b/change/@office-iss-react-native-win32-2020-05-18-09-46-04-metrofix.json
@@ -0,0 +1,8 @@
+{
+  "type": "prerelease",
+  "comment": "Reduce need for custom metro configs",
+  "packageName": "@office-iss/react-native-win32",
+  "email": "acoates@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-05-18T16:46:03.284Z"
+}
diff --git a/change/react-native-windows-2020-05-18-09-46-04-metrofix.json b/change/react-native-windows-2020-05-18-09-46-04-metrofix.json
@@ -0,0 +1,8 @@
+{
+  "type": "prerelease",
+  "comment": "Reduce need for custom metro configs",
+  "packageName": "react-native-windows",
+  "email": "acoates@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-05-18T16:46:04.876Z"
+}
diff --git a/packages/E2ETest/metro.config.js b/packages/E2ETest/metro.config.js
@@ -6,10 +6,6 @@
  */
 const path = require('path');
 const blacklist = require('metro-config/src/defaults/blacklist');
-const {
-  getModulesRunBeforeMainModule,
-  reactNativePlatformResolver,
-} = require('react-native-windows/metro-react-native-platform');
 
 const rnwPath = path.resolve(__dirname, '../../vnext');
 
@@ -23,9 +19,6 @@ module.exports = {
   ],
 
   resolver: {
-    resolveRequest: reactNativePlatformResolver({
-      windows: 'react-native-windows',
-    }),
     extraNodeModules: {
       // Redirect metro to rnwPath instead of node_modules/react-native-windows, since metro doesn't like symlinks
       'react-native-windows': rnwPath,
@@ -38,13 +31,7 @@ module.exports = {
       ),
     ]),
   },
-  serializer: {
-    getModulesRunBeforeMainModule,
-  },
   transformer: {
-    // The cli defaults this to a full path to react-native, which bypasses the reactNativePlatformResolver above
-    // Hopefully we can fix the default in the future
-    assetRegistryPath: 'react-native/Libraries/Image/AssetRegistry',
     getTransformOptions: async () => ({
       transform: {
         experimentalImportSupport: false,

diff --git a/packages/microsoft-reactnative-sampleapps/metro.config.js b/packages/microsoft-reactnative-sampleapps/metro.config.js
@@ -6,11 +6,6 @@
  */
 const path = require('path');
 const blacklist = require('metro-config/src/defaults/blacklist');
-const {
-  getModulesRunBeforeMainModule,
-  reactNativePlatformResolver,
-} = require('react-native-windows/metro-react-native-platform');
-
 const rnwPath = path.resolve(__dirname, '../../vnext');
 
 module.exports = {
@@ -23,9 +18,6 @@ module.exports = {
   ],
 
   resolver: {
-    resolveRequest: reactNativePlatformResolver({
-      windows: 'react-native-windows',
-    }),
     extraNodeModules: {
       // Redirect metro to rnwPath instead of node_modules/react-native-windows, since metro doesn't like symlinks
       'react-native-windows': rnwPath,
@@ -40,13 +32,7 @@ module.exports = {
       ),
     ]),
   },
-  serializer: {
-    getModulesRunBeforeMainModule,
-  },
   transformer: {
-    // The cli defaults this to a full path to react-native, which bypasses the reactNativePlatformResolver above
-    // Hopefully we can fix the default in the future
-    assetRegistryPath: 'react-native/Libraries/Image/AssetRegistry',
     getTransformOptions: async () => ({
       transform: {
         experimentalImportSupport: false,

diff --git a/packages/playground/metro.config.js b/packages/playground/metro.config.js
@@ -7,10 +7,6 @@
 const fs = require('fs');
 const path = require('path');
 const blacklist = require('metro-config/src/defaults/blacklist');
-const {
-  getModulesRunBeforeMainModule,
-  reactNativePlatformResolver,
-} = require('react-native-windows/metro-react-native-platform');
 
 const rnwPath = fs.realpathSync(
   path.resolve(require.resolve('react-native-windows/package.json'), '..'),
@@ -26,9 +22,6 @@ module.exports = {
   ],
 
   resolver: {
-    resolveRequest: reactNativePlatformResolver({
-      windows: 'react-native-windows',
-    }),
     extraNodeModules: {
       // Redirect react-native-windows to avoid symlink (metro doesn't like symlinks)
       'react-native-windows': rnwPath,
@@ -40,13 +33,7 @@ module.exports = {
       ),
     ]),
   },
-  serializer: {
-    getModulesRunBeforeMainModule,
-  },
   transformer: {
-    // The cli defaults this to a full path to react-native, which bypasses the reactNativePlatformResolver above
-    // Hopefully we can fix the default in the future
-    assetRegistryPath: 'react-native/Libraries/Image/AssetRegistry',
     getTransformOptions: async () => ({
       transform: {
         experimentalImportSupport: false,

diff --git a/packages/react-native-win32/metro.config.js b/packages/react-native-win32/metro.config.js
@@ -3,10 +3,6 @@
  */
 const fs = require('fs');
 const path = require('path');
-const {
-  getModulesRunBeforeMainModule,
-  reactNativePlatformResolver,
-} = require('./metro-react-native-platform');
 
 module.exports = {
   // WatchFolders is only needed due to the yarn workspace layout of node_modules, we need to watch the symlinked locations separately
@@ -15,18 +11,7 @@ module.exports = {
     path.resolve(__dirname, '../../node_modules'),
   ],
 
-  resolver: {
-    resolveRequest: reactNativePlatformResolver({
-      win32: '@office-iss/react-native-win32',
-    }),
-  },
-  serializer: {
-    getModulesRunBeforeMainModule,
-  },
   transformer: {
-    // The cli defaults this to a full path to react-native, which bypasses the reactNativePlatformResolver above
-    // Hopefully we can fix the default in the future
-    assetRegistryPath: 'react-native/Libraries/Image/AssetRegistry',
     getTransformOptions: async () => ({
       transform: {
         experimentalImportSupport: false,

diff --git a/packages/react-native-win32/react-native.config.js b/packages/react-native-win32/react-native.config.js
@@ -6,6 +6,7 @@ module.exports = {
         linkConfig: () => null,
         projectConfig: (projectRoot, projectParams) => null,
         dependencyConfig: (projectRoot, dependencyParams) => null,
+        npmPackageName: '@office-iss/react-native-win32',
       },
     },
   };
diff --git a/vnext/local-cli/generator-windows/templates/metro.config.js b/vnext/local-cli/generator-windows/templates/metro.config.js
@@ -7,16 +7,8 @@
 const path = require('path');
 const blacklist = require('metro-config/src/defaults/blacklist');
 
-const {
-  getModulesRunBeforeMainModule,
-  reactNativePlatformResolver,
-} = require('react-native-windows/metro-react-native-platform');
-
 module.exports = {
   resolver: {
-    resolveRequest: reactNativePlatformResolver({
-      windows: 'react-native-windows',
-    }),
     blacklistRE: blacklist([
       // This stops "react-native run-windows" from causing the metro server to crash if its already running
       new RegExp(
@@ -30,13 +22,7 @@ module.exports = {
       ),
     ]),
   },
-  serializer: {
-    getModulesRunBeforeMainModule,
-  },
   transformer: {
-    // The cli defaults this to a full path to react-native, which bypasses the reactNativePlatformResolver above
-    // Hopefully we can fix the default in the future
-    assetRegistryPath: 'react-native/Libraries/Image/AssetRegistry',
     getTransformOptions: async () => ({
       transform: {
         experimentalImportSupport: false,

diff --git a/vnext/metro-react-native-platform.js b/vnext/metro-react-native-platform.js
diff --git a/vnext/metro.config.js b/vnext/metro.config.js
@@ -3,13 +3,34 @@
  */
 const fs = require('fs');
 const path = require('path');
+const rnwPath = __dirname;
+const {resolve} = require('metro-resolver');
 
-const {
-  getModulesRunBeforeMainModule,
-  reactNativePlatformResolver,
-} = require('react-native-windows/metro-react-native-platform');
+function reactNativePlatformResolver(platformImplementations) {
+  return (context, _realModuleName, platform, moduleName) => {
+    let backupResolveRequest = context.resolveRequest;
+    delete context.resolveRequest;
 
-const rnwPath = __dirname;
+    try {
+      let modifiedModuleName = moduleName;
+      if (platformImplementations[platform]) {
+        if (moduleName === 'react-native') {
+          modifiedModuleName = platformImplementations[platform];
+        } else if (moduleName.startsWith('react-native/')) {
+          modifiedModuleName = `${
+            platformImplementations[platform]
+          }/${modifiedModuleName.slice('react-native/'.length)}`;
+        }
+      }
+      let result = resolve(context, modifiedModuleName, platform);
+      return result;
+    } catch (e) {
+      throw e;
+    } finally {
+      context.resolveRequest = backupResolveRequest;
+    }
+  };
+}
 
 module.exports = {
   // WatchFolders is only needed due to the yarn workspace layout of node_modules, we need to watch the symlinked locations separately
@@ -19,6 +40,7 @@ module.exports = {
   ],
 
   resolver: {
+    // We need a custom resolveRequest right now since our integration tests use a "windesktop" platform thats specific to integration tests.
     resolveRequest: reactNativePlatformResolver({
       windesktop: 'react-native-windows',
       windows: 'react-native-windows',
@@ -29,14 +51,7 @@ module.exports = {
     },
   },
 
-  serializer: {
-    getModulesRunBeforeMainModule,
-  },
-
   transformer: {
-    // The cli defaults this to a full path to react-native, which bypasses the reactNativePlatformResolver above
-    // Hopefully we can fix the default in the future
-    assetRegistryPath: 'react-native/Libraries/Image/AssetRegistry',
     getTransformOptions: async () => ({
       transform: {
         experimentalImportSupport: false,

diff --git a/vnext/react-native.config.js b/vnext/react-native.config.js
@@ -12,6 +12,7 @@ module.exports = {
         linkConfig: () => null,
         projectConfig: projectConfig.projectConfigWindows,
         dependencyConfig: dependencyConfig.dependencyConfigWindows,
+        npmPackageName: 'react-native-windows',
       },
     },
   };