diff --git a/packages/react-native/migrations.json b/packages/react-native/migrations.json index 7ea12ff4f6e30..98785887ac896 100644 --- a/packages/react-native/migrations.json +++ b/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": { diff --git a/packages/react-native/src/generators/application/files/app/metro.config.js.template b/packages/react-native/src/generators/application/files/app/metro.config.js.template index dd5791a44a8b5..fb3a93437006f 100644 --- a/packages/react-native/src/generators/application/files/app/metro.config.js.template +++ b/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\/.*/]), }, }, { diff --git a/packages/react-native/src/migrations/update-14-2-1/rename-blockList-metro-config.spec.ts b/packages/react-native/src/migrations/update-14-2-1/rename-blockList-metro-config.spec.ts new file mode 100644 index 0000000000000..5043451f79937 --- /dev/null +++ b/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: [], + } + ); +})(); +` + ); + }); +}); diff --git a/packages/react-native/src/migrations/update-14-2-1/rename-blockList-metro-config.ts b/packages/react-native/src/migrations/update-14-2-1/rename-blockList-metro-config.ts new file mode 100644 index 0000000000000..589b63e855872 --- /dev/null +++ b/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); +}