fix(react-native): rename blacklistRE to blockList in metro.config.js (…

…#10607)

packages/react-native/migrations.json

@@ -41,6 +41,12 @@
       "cli": "nx",
       "description": "changes 'main' tag to project's className",
       "factory": "./src/migrations/update-14-0-2/change-main-to-class-name-14-0-2"
+    },
+    "rename-blockList-metro-config-14-2-1": {
+      "version": "14.2.1-beta.0",
+      "cli": "nx",
+      "description": "Rename blacklistRE to blockList in metro.config.js",
+      "factory": "./src/migrations/update-14-2-1/rename-blockList-metro-config"
     }
   },
   "packageJsonUpdates": {

packages/react-native/src/generators/application/files/app/metro.config.js.template

@@ -21,7 +21,7 @@ module.exports = (async () => {
         assetExts: assetExts.filter((ext) => ext !== 'svg'),
         sourceExts: [...sourceExts, 'svg'],
         resolverMainFields: ['sbmodern', 'browser', 'main'],
-        blacklistRE: exclusionList([/\.\/dist\/.*/]),
+        blockList: exclusionList([/\.\/dist\/.*/]),
       },
     },
     {

packages/react-native/src/migrations/update-14-2-1/rename-blockList-metro-config.spec.ts

@@ -0,0 +1,190 @@
+import { addProjectConfiguration, Tree, getProjects } from '@nrwl/devkit';
+import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
+
+import update from './rename-blockList-metro-config';
+
+describe('Rename blacklistRE to blockList in metro.config.js for react native apps', () => {
+  let tree: Tree;
+
+  beforeEach(async () => {
+    tree = createTreeWithEmptyWorkspace();
+    addProjectConfiguration(tree, 'products', {
+      root: 'apps/products',
+      sourceRoot: 'apps/products/src',
+      targets: {
+        start: {
+          executor: '@nrwl/react-native:start',
+          options: {
+            port: 8081,
+          },
+        },
+      },
+    });
+  });
+
+  it(`should udpate metro.config.js and Rename blacklistRE to blockList`, async () => {
+    tree.write(
+      'apps/products/metro.config.js',
+      `
+const { withNxMetro } = require('@nrwl/react-native');
+const { getDefaultConfig } = require('metro-config');
+
+module.exports = (async () => {
+  const {
+    resolver: { sourceExts, assetExts },
+  } = await getDefaultConfig();
+  // console.log(getModulesRunBeforeMainModule);
+  return withNxMetro(
+    {
+      transformer: {
+        getTransformOptions: async () => ({
+          transform: {
+            experimentalImportSupport: false,
+            inlineRequires: true,
+          },
+        }),
+        babelTransformerPath: require.resolve('react-native-svg-transformer'),
+      },
+      resolver: {
+        assetExts: assetExts.filter((ext) => ext !== 'svg'),
+        sourceExts: [...sourceExts, 'svg'],
+        resolverMainFields: ['sbmodern', 'browser', 'main'],
+        blacklistRE: exclusionList([/\.\/dist\/.*/]),
+      },
+    },
+    {
+      // Change this to true to see debugging info.
+      // Useful if you have issues resolving modules
+      debug: false,
+      // all the file extensions used for imports other than 'ts', 'tsx', 'js', 'jsx'
+      extensions: [],
+    }
+  );
+})();
+`
+    );
+    await update(tree);
+
+    expect(tree.read('apps/products/metro.config.js', 'utf-8')).toEqual(`
+const { withNxMetro } = require('@nrwl/react-native');
+const { getDefaultConfig } = require('metro-config');
+
+module.exports = (async () => {
+  const {
+    resolver: { sourceExts, assetExts },
+  } = await getDefaultConfig();
+  // console.log(getModulesRunBeforeMainModule);
+  return withNxMetro(
+    {
+      transformer: {
+        getTransformOptions: async () => ({
+          transform: {
+            experimentalImportSupport: false,
+            inlineRequires: true,
+          },
+        }),
+        babelTransformerPath: require.resolve('react-native-svg-transformer'),
+      },
+      resolver: {
+        assetExts: assetExts.filter((ext) => ext !== 'svg'),
+        sourceExts: [...sourceExts, 'svg'],
+        resolverMainFields: ['sbmodern', 'browser', 'main'],
+        blockList: exclusionList([/\.\/dist\/.*/]),
+      },
+    },
+    {
+      // Change this to true to see debugging info.
+      // Useful if you have issues resolving modules
+      debug: false,
+      // all the file extensions used for imports other than 'ts', 'tsx', 'js', 'jsx'
+      extensions: [],
+    }
+  );
+})();
+`);
+  });
+
+  it(`should not udpate metro.config.js if blacklistRE does not exist`, async () => {
+    tree.write(
+      'apps/products/metro.config.js',
+      `
+const { withNxMetro } = require('@nrwl/react-native');
+const { getDefaultConfig } = require('metro-config');
+
+module.exports = (async () => {
+  const {
+    resolver: { sourceExts, assetExts },
+  } = await getDefaultConfig();
+  // console.log(getModulesRunBeforeMainModule);
+  return withNxMetro(
+    {
+      transformer: {
+        getTransformOptions: async () => ({
+          transform: {
+            experimentalImportSupport: false,
+            inlineRequires: true,
+          },
+        }),
+        babelTransformerPath: require.resolve('react-native-svg-transformer'),
+      },
+      resolver: {
+        assetExts: assetExts.filter((ext) => ext !== 'svg'),
+        sourceExts: [...sourceExts, 'svg'],
+        resolverMainFields: ['sbmodern', 'browser', 'main'],
+      },
+    },
+    {
+      projectRoot: __dirname,
+      // Change this to true to see debugging info.
+      // Useful if you have issues resolving modules
+      debug: false,
+      // all the file extensions used for imports other than 'ts', 'tsx', 'js', 'jsx'
+      extensions: [],
+    }
+  );
+})();
+`
+    );
+    await update(tree);
+
+    expect(tree.read('apps/products/metro.config.js', 'utf-8')).toEqual(
+      `
+const { withNxMetro } = require('@nrwl/react-native');
+const { getDefaultConfig } = require('metro-config');
+
+module.exports = (async () => {
+  const {
+    resolver: { sourceExts, assetExts },
+  } = await getDefaultConfig();
+  // console.log(getModulesRunBeforeMainModule);
+  return withNxMetro(
+    {
+      transformer: {
+        getTransformOptions: async () => ({
+          transform: {
+            experimentalImportSupport: false,
+            inlineRequires: true,
+          },
+        }),
+        babelTransformerPath: require.resolve('react-native-svg-transformer'),
+      },
+      resolver: {
+        assetExts: assetExts.filter((ext) => ext !== 'svg'),
+        sourceExts: [...sourceExts, 'svg'],
+        resolverMainFields: ['sbmodern', 'browser', 'main'],
+      },
+    },
+    {
+      projectRoot: __dirname,
+      // Change this to true to see debugging info.
+      // Useful if you have issues resolving modules
+      debug: false,
+      // all the file extensions used for imports other than 'ts', 'tsx', 'js', 'jsx'
+      extensions: [],
+    }
+  );
+})();
+`
+    );
+  });
+});

packages/react-native/src/migrations/update-14-2-1/rename-blockList-metro-config.ts

@@ -0,0 +1,40 @@
+import {
+  formatFiles,
+  getProjects,
+  logger,
+  stripIndents,
+  Tree,
+} from '@nrwl/devkit';
+
+/**
+ * Rename blacklistRE to blockList in metro.config.js
+ * @param tree
+ */
+export default async function update(tree: Tree) {
+  const projects = getProjects(tree);
+
+  projects.forEach((project) => {
+    const metroConfigPath = `${project.root}/metro.config.js`;
+    if (
+      project.targets?.start?.executor !== '@nrwl/react-native:start' ||
+      !tree.exists(metroConfigPath)
+    )
+      return;
+
+    try {
+      const metroConfigContent = tree.read(metroConfigPath, 'utf-8');
+      if (!metroConfigContent.includes('blacklistRE:')) {
+        return;
+      }
+      tree.write(
+        metroConfigPath,
+        metroConfigContent.replace('blacklistRE:', 'blockList:')
+      );
+    } catch {
+      logger.error(
+        stripIndents`Unable to update ${metroConfigPath} for project ${project.root}.`
+      );
+    }
+  });
+  await formatFiles(tree);
+}