fix(react-native): add migration script to change the main tag to cla…

…ssName (#9957)

packages/react-native/migrations.json

@@ -35,6 +35,12 @@
       "cli": "nx",
       "description": "Add projectRoot option in metro.config.js",
       "factory": "./src/migrations/update-14-0-0/add-project-root-metro-config-14-0-0"
+    },
+    "change-main-to-class-name-14-0-2": {
+      "version": "14.0.3-beta.0",
+      "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"
     }
   },
   "packageJsonUpdates": {

packages/react-native/src/migrations/update-14-0-0/add-project-root-metro-config-14-0-0.ts

@@ -25,7 +25,6 @@ export default async function update(tree: Tree) {
       if (metroConfigContent.includes('projectRoot: __dirname')) {
         return;
       }
-      if (metroConfigContent.includes('projectRoot')) return;
       tree.write(
         metroConfigPath,
         metroConfigContent.replace(

packages/react-native/src/migrations/update-14-0-2/change-main-to-class-name-14-0-2.spec.ts

@@ -0,0 +1,48 @@
+import { addProjectConfiguration, Tree } from '@nrwl/devkit';
+import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
+
+import update from './change-main-to-class-name-14-0-2';
+
+describe('Change from main tag to className tag', () => {
+  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 main file to registerComponent className`, async () => {
+    tree.write(
+      'apps/products/src/main.tsx',
+      `AppRegistry.registerComponent('main', () => App);`
+    );
+    await update(tree);
+
+    expect(tree.read('apps/products/src/main.tsx', 'utf-8')).toEqual(
+      `AppRegistry.registerComponent('Products', () => App);`
+    );
+  });
+
+  it(`should not udpate main file to registerComponent className if it does not exists`, async () => {
+    tree.write(
+      'apps/products/src/main.tsx',
+      `AppRegistry.registerComponent('otherTagName', () => App);`
+    );
+    await update(tree);
+
+    expect(tree.read('apps/products/src/main.tsx', 'utf-8')).toEqual(
+      `AppRegistry.registerComponent('otherTagName', () => App);`
+    );
+  });
+});

packages/react-native/src/migrations/update-14-0-2/change-main-to-class-name-14-0-2.ts

@@ -0,0 +1,45 @@
+import {
+  formatFiles,
+  getProjects,
+  logger,
+  names,
+  stripIndents,
+  Tree,
+} from '@nrwl/devkit';
+import { join } from 'path';
+
+/**
+ * This function changes "main" tag to project's className
+ */
+export default async function update(tree: Tree) {
+  const projects = getProjects(tree);
+
+  for (const [name, config] of projects.entries()) {
+    if (config.targets?.start?.executor !== '@nrwl/react-native:start')
+      continue;
+    let mailFilePath;
+    if (tree.exists(join(config.root, 'src/main.tsx'))) {
+      mailFilePath = join(config.root, 'src/main.tsx');
+    }
+    if (tree.exists(join(config.root, 'src/main.js'))) {
+      mailFilePath = join(config.root, 'src/main.js');
+    }
+    if (!mailFilePath) {
+      continue;
+    }
+    try {
+      const { className } = names(name);
+      const content = tree.read(mailFilePath, 'utf-8');
+      if (!content.includes(`'main'`)) {
+        return;
+      }
+      tree.write(mailFilePath, content.replace(`'main'`, `'${className}'`));
+    } catch {
+      logger.error(
+        stripIndents`Unable to update ${mailFilePath} for project ${name}.`
+      );
+    }
+  }
+
+  await formatFiles(tree);
+}