@nx/react-native 18.0.0-beta.1 → 18.0.0-beta.2

package/.eslintrc.json

@@ -32,7 +32,12 @@
               "react-native",
               // These are in ensurePackage
               "@nx/rollup",
-              "@nx/storybook"
+              "@nx/storybook",
+              "@nx/vite",
+              "@nx/webpack",
+              "@nx/detox",
+              "@nx/cypress",
+              "@nx/playwright"
             ]
           }
         ]

package/executors.json

@@ -49,6 +49,11 @@
       "implementation": "./src/executors/pod-install/pod-install.impl",
       "schema": "./src/executors/pod-install/schema.json",
       "description": "Run `pod install` in the `ios` directory."
+    },
+    "upgrade": {
+      "implementation": "./src/executors/upgrade/upgrade.impl",
+      "schema": "./src/executors/upgrade/schema.json",
+      "description": "upgrade executor"
     }
   }
 }

package/generators.json

@@ -4,9 +4,9 @@
   "extends": ["@nx/workspace"],
   "generators": {
     "init": {
-      "factory": "./src/generators/init/init#reactNativeInitGenerator",
+      "factory": "./src/generators/init/init#reactNativeInitGeneratorInternal",
       "schema": "./src/generators/init/schema.json",
-      "description": "Initialize the `@nrwl/react-native` plugin.",
+      "description": "Initialize the `@nx/react-native` plugin.",
       "hidden": true
     },
     "application": {
@@ -30,28 +30,29 @@
       "aliases": ["c"]
     },
     "storybook-configuration": {
-      "factory": "./src/generators/storybook-configuration/configuration#storybookConfigurationGenerator",
+      "factory": "./src/generators/storybook-configuration/configuration#storybookConfigurationGeneratorInternal",
       "schema": "./src/generators/storybook-configuration/schema.json",
-      "description": "Set up Storybook for a React-native application or library.",
-      "hidden": false
+      "description": "Set up Storybook for a React Native application or library."
     },
     "component-story": {
       "factory": "./src/generators/component-story/component-story#componentStoryGenerator",
       "schema": "./src/generators/component-story/schema.json",
-      "description": "Generate Storybook story for a React-native component.",
-      "hidden": false
+      "description": "Generate Storybook story for a React Native component."
     },
     "stories": {
       "factory": "./src/generators/stories/stories#storiesGenerator",
       "schema": "./src/generators/stories/schema.json",
-      "description": "Create stories/specs for all components declared in an application or library.",
-      "hidden": false
+      "description": "Create stories for all components declared in an application or library."
     },
     "upgrade-native": {
       "factory": "./src/generators/upgrade-native/upgrade-native#reactNativeUpgradeNativeGenerator",
       "schema": "./src/generators/upgrade-native/schema.json",
-      "description": "Destructive command to upgrade native iOS and Android code to latest.",
-      "hidden": false
+      "description": "Destructive command to upgrade native iOS and Android code to latest."
+    },
+    "web-configuration": {
+      "factory": "./src/generators/web-configuration/web-configuration#webConfigurationGenerator",
+      "schema": "./src/generators/web-configuration/schema.json",
+      "description": "Set up web configuration for a React Native app"
     }
   }
 }

package/migrations.json

@@ -41,6 +41,42 @@
       "version": "16.9.0-beta.1",
       "description": "Remove @types/react-native from package.json",
       "implementation": "./src/migrations/update-16-9-0/remove-types-react-native"
+    },
+    "update-18-0-0-add-web-configuration": {
+      "cli": "nx",
+      "version": "18.0.0-beta.0",
+      "description": "Add web configuration to react native projects",
+      "implementation": "./src/migrations/update-18-0-0/add-web-configuration"
+    },
+    "update-18-0-0-change-storybook-targets": {
+      "cli": "nx",
+      "version": "18.0.0-beta.0",
+      "description": "Upgrade react native storybook target to use web",
+      "implementation": "./src/migrations/update-18-0-0/change-storybook-targets"
+    },
+    "update-18-0-0-remove-block-list": {
+      "cli": "nx",
+      "version": "18.0.0-beta.0",
+      "description": "Remove blockList in metro.config.js.",
+      "implementation": "./src/migrations/update-18-0-0/remove-block-list"
+    },
+    "update-18-0-0-remove-metro": {
+      "cli": "nx",
+      "version": "18.0.0-beta.0",
+      "description": "Remove metro-* and @react-native-community/cli-* from package.json devDependencies",
+      "implementation": "./src/migrations/update-18-0-0/remove-metro"
+    },
+    "update-18-0-0-remove-symlink-target": {
+      "cli": "nx",
+      "version": "18.0.0-beta.0",
+      "description": "Remove ensure-symlink target",
+      "implementation": "./src/migrations/update-18-0-0/remove-symlink-target"
+    },
+    "update-18-0-0-add-upgrade-target": {
+      "cli": "nx",
+      "version": "18.0.0-beta.0",
+      "description": "Add upgrade target to react native projects",
+      "implementation": "./src/migrations/update-18-0-0/add-upgrade-target"
     }
   },
   "packageJsonUpdates": {
@@ -551,7 +587,43 @@
       "version": "17.3.0-beta.3",
       "packages": {
         "@types/node": {
-          "version": "18.16.9",
+          "version": "18.16.9"
+        }
+      }
+    },
+    "18.0.0": {
+      "version": "18.0.0-beta.0",
+      "packages": {
+        "react-native": {
+          "version": "0.73.2",
+          "alwaysAddToPackageJson": false
+        },
+        "@react-native/babel-preset": {
+          "version": "^0.73.18",
+          "addToPackageJson": "devDependencies"
+        },
+        "@react-native/metro-config": {
+          "version": "^0.73.2",
+          "addToPackageJson": "devDependencies"
+        },
+        "@types/react": {
+          "version": "~18.2.45",
+          "alwaysAddToPackageJson": false
+        },
+        "@testing-library/react-native": {
+          "version": "~12.4.2",
+          "alwaysAddToPackageJson": false
+        },
+        "react-native-svg-transformer": {
+          "version": "1.2.0",
+          "alwaysAddToPackageJson": false
+        },
+        "react-native-svg": {
+          "version": "14.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@react-native-community/cli-platform-android": {
+          "version": "12.3.0",
           "alwaysAddToPackageJson": false
         }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react-native",
-  "version": "18.0.0-beta.1",
+  "version": "18.0.0-beta.2",
   "private": false,
   "description": "The Nx Plugin for React Native contains generators for managing React Native applications and libraries within an Nx workspace. It provides: \n\n-Integration with libraries such as Jest, Detox, and Storybook.\n-Scaffolding for creating buildable libraries that can be published to npm.\n-Utilities for automatic workspace refactoring.",
   "keywords": [
@@ -30,23 +30,18 @@
     "fs-extra": "^11.1.0",
     "glob": "7.1.4",
     "ignore": "^5.0.4",
-    "metro-config": "~0.76.8",
-    "metro-resolver": "~0.76.8",
-    "minimatch": "9.0.3",
+    "metro-config": "~0.80.4",
+    "metro-resolver": "~0.80.4",
     "node-fetch": "^2.6.7",
     "tsconfig-paths": "^4.1.2",
     "tslib": "^2.3.0",
-    "@nx/detox": "18.0.0-beta.1",
-    "@nx/devkit": "18.0.0-beta.1",
-    "@nx/jest": "18.0.0-beta.1",
-    "@nx/js": "18.0.0-beta.1",
-    "@nx/eslint": "18.0.0-beta.1",
-    "@nx/react": "18.0.0-beta.1",
-    "@nx/workspace": "18.0.0-beta.1",
-    "@nrwl/react-native": "18.0.0-beta.1"
-  },
-  "peerDependencies": {
-    "react-native": ">= 0.72.0 < 0.73.0"
+    "@nx/devkit": "18.0.0-beta.2",
+    "@nx/jest": "18.0.0-beta.2",
+    "@nx/js": "18.0.0-beta.2",
+    "@nx/eslint": "18.0.0-beta.2",
+    "@nx/react": "18.0.0-beta.2",
+    "@nx/workspace": "18.0.0-beta.2",
+    "@nrwl/react-native": "18.0.0-beta.2"
   },
   "executors": "./executors.json",
   "ng-update": {

package/plugins/metro-resolver.js

@@ -27,6 +27,9 @@ function getResolveRequest(extensions) {
         if (resolvedPath) {
             return resolvedPath;
         }
+        if (debug) {
+            console.log(chalk.red(`[Nx] Unable to resolve with any resolver: ${realModuleName}`));
+        }
         throw new Error(`Cannot resolve ${chalk.bold(realModuleName)}`);
     };
 }
@@ -84,7 +87,7 @@ function tsconfigPathsResolver(context, extensions, realModuleName, platform, de
     }
     catch {
         if (debug) {
-            console.log(chalk.red(`[Nx] Failed to resolve ${chalk.bold(realModuleName)}`));
+            console.log(chalk.cyan(`[Nx] Failed to resolve ${chalk.bold(realModuleName)}`));
             console.log(chalk.cyan(`[Nx] The following tsconfig paths was used:\n:${chalk.bold(JSON.stringify(paths, null, 2))}`));
         }
     }

package/plugins/plugin.d.ts

@@ -7,6 +7,8 @@ export interface ReactNativePluginOptions {
     buildIosTargetName?: string;
     buildAndroidTargetName?: string;
     bundleTargetName?: string;
+    syncDepsTargetName?: string;
+    upgradeTargetname?: string;
 }
 export declare const createDependencies: CreateDependencies;
 export declare const createNodes: CreateNodes<ReactNativePluginOptions>;

package/plugins/plugin.js

@@ -57,11 +57,13 @@ function buildReactNativeTargets(projectRoot, options, context) {
     const namedInputs = (0, get_named_inputs_1.getNamedInputs)(projectRoot, context);
     const targets = {
         [options.startTargetName]: {
-            executor: `@nx/react-native:start`,
+            command: `react-native start`,
+            options: { cwd: projectRoot },
         },
         [options.podInstallTargetName]: {
             command: `pod install`,
             options: { cwd: (0, devkit_1.joinPathFragments)(projectRoot, 'ios') },
+            dependsOn: [`${options.syncDepsTargetName}`],
             cache: true,
             inputs: getInputs(namedInputs),
             outputs: [
@@ -99,6 +101,13 @@ function buildReactNativeTargets(projectRoot, options, context) {
             dependsOn: [`^${options.bundleTargetName}`],
             inputs: getInputs(namedInputs),
         },
+        [options.syncDepsTargetName]: {
+            executor: '@nx/react-native:sync-deps',
+        },
+        [options.upgradeTargetname]: {
+            command: `react-native upgrade`,
+            options: { cwd: projectRoot },
+        },
     };
     return targets;
 }
@@ -147,5 +156,7 @@ function normalizeOptions(options) {
     options.buildIosTargetName ??= 'build-ios';
     options.buildAndroidTargetName ??= 'build-android';
     options.bundleTargetName ??= 'bundle';
+    options.syncDepsTargetName ??= 'sync-deps';
+    options.upgradeTargetname ??= 'upgrade';
     return options;
 }

package/plugins/with-nx-metro.js

@@ -11,14 +11,18 @@ async function withNxMetro(userConfig, opts = {}) {
         process.env.NX_REACT_NATIVE_DEBUG = 'true';
     if (opts.extensions)
         extensions.push(...opts.extensions);
-    let watchFolders = [devkit_1.workspaceRoot];
+    let watchFolders = (0, fs_extra_1.readdirSync)(devkit_1.workspaceRoot)
+        .filter((fileName) => !['dist', 'e2e'].includes(fileName) && !fileName.startsWith('.'))
+        .map((fileName) => (0, devkit_1.joinPathFragments)(devkit_1.workspaceRoot, fileName))
+        .filter((filePath) => (0, fs_extra_1.statSync)(filePath).isDirectory());
     if (opts.watchFolders?.length) {
         watchFolders = watchFolders.concat(opts.watchFolders);
     }
-    watchFolders = watchFolders.filter((folder) => (0, fs_extra_1.existsSync)(folder));
+    watchFolders = [...new Set(watchFolders)].filter((folder) => (0, fs_extra_1.existsSync)(folder));
     const nxConfig = {
         resolver: {
             resolveRequest: (0, metro_resolver_1.getResolveRequest)(extensions),
+            nodeModulesPaths: [(0, devkit_1.joinPathFragments)(devkit_1.workspaceRoot, 'node_modules')],
         },
         watchFolders,
     };

package/src/executors/build-android/build-android.impl.js

@@ -13,11 +13,7 @@ async function* buildAndroidExecutor(options, context) {
 exports.default = buildAndroidExecutor;
 function runCliBuild(workspaceRoot, projectRoot, options) {
     return new Promise((res, reject) => {
-        /**
-         * Call the react native cli with option `--no-packager`
-         * Not passing '--packager' due to cli will launch start command from the project root
-         */
-        const childProcess = (0, child_process_1.fork)(require.resolve('react-native/cli.js'), ['build-android', ...createBuildAndroidOptions(options), '--no-packager'], {
+        const childProcess = (0, child_process_1.fork)(require.resolve('react-native/cli.js'), ['build-android', ...createBuildAndroidOptions(options)], {
             stdio: 'inherit',
             cwd: (0, path_1.resolve)(workspaceRoot, projectRoot),
             env: { ...process.env, RCT_METRO_PORT: options.port.toString() },

package/src/executors/build-android/build-android.impl.ts

@@ -27,13 +27,9 @@ function runCliBuild(
   options: ReactNativeBuildAndroidOptions
 ) {
   return new Promise<ChildProcess>((res, reject) => {
-    /**
-     * Call the react native cli with option `--no-packager`
-     * Not passing '--packager' due to cli will launch start command from the project root
-     */
     const childProcess = fork(
       require.resolve('react-native/cli.js'),
-      ['build-android', ...createBuildAndroidOptions(options), '--no-packager'],
+      ['build-android', ...createBuildAndroidOptions(options)],
       {
         stdio: 'inherit',
         cwd: pathResolve(workspaceRoot, projectRoot),

package/src/executors/bundle/schema.d.ts

@@ -1,4 +1,4 @@
-// options form https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
+// options form https://github.com/facebook/react-native/tree/main/packages/community-cli-plugin#bundle
 export interface ReactNativeBundleOptions {
   entryFile: string;
   platform: string;

package/src/executors/ensure-symlink/ensure-symlink.impl.d.ts

@@ -2,4 +2,8 @@ import { ExecutorContext } from '@nx/devkit';
 export interface ReactNativeEnsureSymlinkOutput {
     success: boolean;
 }
+/**
+ * TODO (@xiongemi): remove this function in v19.
+ * @deprecated It is no longer needed for react native 73.
+ */
 export default function ensureSymlinkExecutor(_: any, context: ExecutorContext): AsyncGenerator<ReactNativeEnsureSymlinkOutput>;

package/src/executors/ensure-symlink/ensure-symlink.impl.js

@@ -1,6 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const ensure_node_modules_symlink_1 = require("../../utils/ensure-node-modules-symlink");
+/**
+ * TODO (@xiongemi): remove this function in v19.
+ * @deprecated It is no longer needed for react native 73.
+ */
 async function* ensureSymlinkExecutor(_, context) {
     const projectRoot = context.projectsConfigurations.projects[context.projectName].root;
     (0, ensure_node_modules_symlink_1.ensureNodeModulesSymlink)(context.root, projectRoot);

package/src/executors/ensure-symlink/ensure-symlink.impl.ts

@@ -5,6 +5,10 @@ export interface ReactNativeEnsureSymlinkOutput {
   success: boolean;
 }
 
+/**
+ * TODO (@xiongemi): remove this function in v19.
+ * @deprecated It is no longer needed for react native 73.
+ */
 export default async function* ensureSymlinkExecutor(
   _,
   context: ExecutorContext

package/src/executors/run-android/run-android.impl.js

@@ -9,27 +9,15 @@ let childProcess;
 async function* runAndroidExecutor(options, context) {
     const projectRoot = context.projectsConfigurations.projects[context.projectName].root;
     (0, chmod_android_gradle_files_1.chmodAndroidGradlewFiles)((0, path_1.join)(projectRoot, 'android'));
+    const tasks = [runCliRunAndroid(context.root, projectRoot, options)];
     if (options.mode !== 'Release') {
-        const startResults = (0, start_impl_1.default)({
+        tasks.push((0, start_impl_1.runCliStart)(context.root, projectRoot, {
             port: options.port,
             resetCache: options.resetCache,
             interactive: true,
-        }, context);
-        for await (const result of startResults) {
-            if (result.success) {
-                await runCliRunAndroid(context.root, projectRoot, options);
-                yield {
-                    success: true,
-                };
-            }
-            else {
-                return result;
-            }
-        }
-    }
-    else {
-        await runCliRunAndroid(context.root, projectRoot, options);
+        }));
     }
+    await Promise.all(tasks);
     yield { success: true };
 }
 exports.default = runAndroidExecutor;

package/src/executors/run-android/run-android.impl.ts

@@ -3,7 +3,7 @@ import { join, resolve as pathResolve } from 'path';
 import { ChildProcess, fork } from 'child_process';
 
 import { ReactNativeRunAndroidOptions } from './schema';
-import startExecutor from '../start/start.impl';
+import { runCliStart } from '../start/start.impl';
 import { chmodAndroidGradlewFiles } from '../../utils/chmod-android-gradle-files';
 import { getCliOptions } from '../../utils/get-cli-options';
 
@@ -21,29 +21,20 @@ export default async function* runAndroidExecutor(
     context.projectsConfigurations.projects[context.projectName].root;
   chmodAndroidGradlewFiles(join(projectRoot, 'android'));
 
+  const tasks = [runCliRunAndroid(context.root, projectRoot, options)];
+
   if (options.mode !== 'Release') {
-    const startResults = startExecutor(
-      {
+    tasks.push(
+      runCliStart(context.root, projectRoot, {
         port: options.port,
         resetCache: options.resetCache,
         interactive: true,
-      },
-      context
+      })
     );
-    for await (const result of startResults) {
-      if (result.success) {
-        await runCliRunAndroid(context.root, projectRoot, options);
-        yield {
-          success: true,
-        };
-      } else {
-        return result;
-      }
-    }
-  } else {
-    await runCliRunAndroid(context.root, projectRoot, options);
   }
 
+  await Promise.all(tasks);
+
   yield { success: true };
 }
 

package/src/executors/run-ios/run-ios.impl.js

@@ -10,27 +10,15 @@ async function* runIosExecutor(options, context) {
         throw new Error(`The run-ios build requires Mac to run`);
     }
     const projectRoot = context.projectsConfigurations.projects[context.projectName].root;
+    const tasks = [runCliRunIOS(context.root, projectRoot, options)];
     if (options.mode !== 'Release') {
-        const startResults = (0, start_impl_1.default)({
+        tasks.push((0, start_impl_1.runCliStart)(context.root, projectRoot, {
             port: options.port,
             resetCache: options.resetCache,
             interactive: true,
-        }, context);
-        for await (const result of startResults) {
-            if (result.success) {
-                await runCliRunIOS(context.root, projectRoot, options);
-                yield {
-                    success: true,
-                };
-            }
-            else {
-                return result;
-            }
-        }
-    }
-    else {
-        await runCliRunIOS(context.root, projectRoot, options);
+        }));
     }
+    await Promise.all(tasks);
     yield { success: true };
 }
 exports.default = runIosExecutor;

package/src/executors/run-ios/run-ios.impl.ts

@@ -1,9 +1,9 @@
-import { ExecutorContext } from '@nx/devkit';
+import { ExecutorContext, GeneratorCallback, workspaceRoot } from '@nx/devkit';
 import { resolve as pathResolve } from 'path';
 import { ChildProcess, fork } from 'child_process';
 import { platform } from 'os';
 
-import startExecutor from '../start/start.impl';
+import { runCliStart } from '../start/start.impl';
 import { getCliOptions } from '../../utils/get-cli-options';
 
 import { ReactNativeRunIosOptions } from './schema';
@@ -21,29 +21,20 @@ export default async function* runIosExecutor(
   const projectRoot =
     context.projectsConfigurations.projects[context.projectName].root;
 
+  const tasks = [runCliRunIOS(context.root, projectRoot, options)];
+
   if (options.mode !== 'Release') {
-    const startResults = startExecutor(
-      {
+    tasks.push(
+      runCliStart(context.root, projectRoot, {
         port: options.port,
         resetCache: options.resetCache,
         interactive: true,
-      },
-      context
+      })
     );
-    for await (const result of startResults) {
-      if (result.success) {
-        await runCliRunIOS(context.root, projectRoot, options);
-        yield {
-          success: true,
-        };
-      } else {
-        return result;
-      }
-    }
-  } else {
-    await runCliRunIOS(context.root, projectRoot, options);
   }
 
+  await Promise.all(tasks);
+
   yield { success: true };
 }
 

package/src/executors/start/schema.d.ts

@@ -1,4 +1,4 @@
-// options from https://github.com/react-native-community/cli/blob/main/packages/cli-plugin-metro/src/commands/start/index.ts
+// options from https://github.com/facebook/react-native/blob/main/packages/community-cli-plugin/src/commands/start/index.js
 
 export interface ReactNativeStartOptions {
   port: number;

package/src/executors/start/start.impl.js

@@ -7,25 +7,11 @@ const path_1 = require("path");
 const is_packager_running_1 = require("./lib/is-packager-running");
 async function* startExecutor(options, context) {
     const projectRoot = context.projectsConfigurations.projects[context.projectName].root;
-    const startProcess = await runCliStart(context.root, projectRoot, options);
+    await runCliStart(context.root, projectRoot, options);
     yield {
         port: options.port,
         success: true,
     };
-    if (!startProcess) {
-        return;
-    }
-    await new Promise((resolve) => {
-        const processExitListener = (signal) => () => {
-            startProcess.kill(signal);
-            resolve();
-            process.exit();
-        };
-        process.once('exit', (signal) => startProcess.kill(signal));
-        process.once('SIGTERM', processExitListener);
-        process.once('SIGINT', processExitListener);
-        process.once('SIGQUIT', processExitListener);
-    });
 }
 exports.default = startExecutor;
 /*
@@ -47,7 +33,7 @@ async function runCliStart(workspaceRoot, projectRoot, options) {
             return await startAsync(workspaceRoot, projectRoot, options);
         }
         catch (error) {
-            devkit_1.logger.error(`Failed to start the packager server. Error details: ${error.message}`);
+            devkit_1.logger.error(`Failed to start the packager server. Error details: ${error.message ?? error}`);
             throw error;
         }
     }
@@ -58,16 +44,7 @@ function startAsync(workspaceRoot, projectRoot, options) {
         const childProcess = (0, child_process_1.fork)(require.resolve('react-native/cli.js'), ['start', ...createStartOptions(options)], {
             cwd: (0, path_1.resolve)(workspaceRoot, projectRoot),
             env: process.env,
-            stdio: ['inherit', 'pipe', 'pipe', 'ipc'],
-        });
-        childProcess.stdout.on('data', (data) => {
-            process.stdout.write(data);
-            if (data.toString().includes('reload the app')) {
-                resolve(childProcess);
-            }
-        });
-        childProcess.stderr.on('data', (data) => {
-            process.stderr.write(data);
+            stdio: 'inherit',
         });
         childProcess.on('error', (err) => {
             reject(err);
@@ -80,6 +57,14 @@ function startAsync(workspaceRoot, projectRoot, options) {
                 reject(code);
             }
         });
+        const processExitListener = (signal) => () => {
+            childProcess.kill(signal);
+            process.exit();
+        };
+        process.once('exit', (signal) => childProcess.kill(signal));
+        process.once('SIGTERM', processExitListener);
+        process.once('SIGINT', processExitListener);
+        process.once('SIGQUIT', processExitListener);
     });
 }
 function createStartOptions(options) {