@nx/react-native 17.0.2 → 17.0.4

package/src/executors/ensure-symlink/schema.json

@@ -3,7 +3,7 @@
   "outputCapture": "direct-nodejs",
   "cli": "nx",
   "$id": "NxReactNativeEnsureSymlink",
-  "$schema": "http://json-schema.org/schema",
+  "$schema": "https://json-schema.org/schema",
   "title": "Ensure Symlink for React Native",
   "description": "Ensure workspace node_modules is symlink under app's node_modules folder.",
   "type": "object",

package/src/executors/pod-install/schema.json

@@ -3,7 +3,7 @@
   "outputCapture": "direct-nodejs",
   "cli": "nx",
   "$id": "NxReactNativePodInstall",
-  "$schema": "http://json-schema.org/schema",
+  "$schema": "https://json-schema.org/schema",
   "title": "Run Pod Install for React Native iOS Project",
   "description": "Run `pod install` for React Native iOS Project.",
   "type": "object",

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

@@ -8,28 +8,16 @@ const get_cli_options_1 = require("../../utils/get-cli-options");
 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'));
+    (0, chmod_android_gradle_files_1.chmodAndroidGradlewFiles)((0, path_1.join)(context.root, 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';
 
@@ -19,31 +19,22 @@ export default async function* runAndroidExecutor(
 ): AsyncGenerator<ReactNativeRunAndroidOutput> {
   const projectRoot =
     context.projectsConfigurations.projects[context.projectName].root;
-  chmodAndroidGradlewFiles(join(projectRoot, 'android'));
+  chmodAndroidGradlewFiles(join(context.root, 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-android/schema.json

@@ -3,7 +3,7 @@
   "outputCapture": "direct-nodejs",
   "cli": "nx",
   "$id": "NxReactNativeRunAndroid",
-  "$schema": "http://json-schema.org/schema",
+  "$schema": "https://json-schema.org/schema",
   "title": "Run Android application",
   "description": "Run Android target options.",
   "type": "object",

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/run-ios/schema.json

@@ -3,7 +3,7 @@
   "outputCapture": "direct-nodejs",
   "cli": "nx",
   "$id": "NxReactNativeRunIos",
-  "$schema": "http://json-schema.org/schema",
+  "$schema": "https://json-schema.org/schema",
   "title": "Run iOS application",
   "description": "Run iOS target options.",
   "type": "object",

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/schema.json

@@ -3,7 +3,7 @@
   "outputCapture": "direct-nodejs",
   "cli": "nx",
   "$id": "NxReactNativeStart",
-  "$schema": "http://json-schema.org/schema",
+  "$schema": "https://json-schema.org/schema",
   "title": "Packager Server for React Native",
   "description": "Packager Server target options.",
   "type": "object",

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) {

package/src/executors/start/start.impl.ts

@@ -16,27 +16,12 @@ export default async function* startExecutor(
   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<void>((resolve) => {
-    const processExitListener = (signal?: number | NodeJS.Signals) => () => {
-      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);
-  });
 }
 
 /*
@@ -61,7 +46,9 @@ export async function runCliStart(
       return await startAsync(workspaceRoot, projectRoot, options);
     } catch (error) {
       logger.error(
-        `Failed to start the packager server. Error details: ${error.message}`
+        `Failed to start the packager server. Error details: ${
+          error.message ?? error
+        }`
       );
       throw error;
     }
@@ -80,20 +67,10 @@ function startAsync(
       {
         cwd: pathResolve(workspaceRoot, projectRoot),
         env: process.env,
-        stdio: ['inherit', 'pipe', 'pipe', 'ipc'],
+        stdio: 'inherit',
       }
     );
 
-    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);
-    });
-
     childProcess.on('error', (err) => {
       reject(err);
     });
@@ -104,6 +81,15 @@ function startAsync(
         reject(code);
       }
     });
+
+    const processExitListener = (signal?: number | NodeJS.Signals) => () => {
+      childProcess.kill(signal);
+      process.exit();
+    };
+    process.once('exit', (signal) => childProcess.kill(signal));
+    process.once('SIGTERM', processExitListener);
+    process.once('SIGINT', processExitListener);
+    process.once('SIGQUIT', processExitListener);
   });
 }
 

package/src/executors/storybook/storybook.impl.d.ts

@@ -1,5 +1,9 @@
 import { ExecutorContext } from '@nx/devkit';
 import { ReactNativeStorybookOptions } from './schema';
+/**
+ * TODO (@xiongemi): remove this function in v19.
+ * @deprecated Going to use the default react storybook target. Use @nx/react:storybook executor instead.
+ */
 export default function reactNativeStorybookExecutor(options: ReactNativeStorybookOptions, context: ExecutorContext): AsyncGenerator<{
     success: boolean;
 }>;

package/src/executors/storybook/storybook.impl.js

@@ -8,13 +8,20 @@ const chalk = require("chalk");
 const glob_1 = require("glob");
 const sync_deps_impl_1 = require("../sync-deps/sync-deps.impl");
 const fs_extra_1 = require("fs-extra");
+/**
+ * TODO (@xiongemi): remove this function in v19.
+ * @deprecated Going to use the default react storybook target. Use @nx/react:storybook executor instead.
+ */
 async function* reactNativeStorybookExecutor(options, context) {
     const projectRoot = context.projectsConfigurations.projects[context.projectName].root;
     devkit_1.logger.info(`${chalk.bold.cyan('info')} To see your Storybook stories on the device, you should start your mobile app for the <platform> of your choice (typically ios or android).`);
     // add storybook addons to app's package.json
     const packageJsonPath = (0, path_1.join)(context.root, projectRoot, 'package.json');
+    const workspacePackageJsonPath = (0, path_1.join)(context.root, 'package.json');
+    const workspacePackageJson = (0, devkit_1.readJsonFile)(workspacePackageJsonPath);
+    const projectPackageJson = (0, devkit_1.readJsonFile)(packageJsonPath);
     if ((0, fileutils_1.fileExists)(packageJsonPath))
-        (0, sync_deps_impl_1.displayNewlyAddedDepsMessage)(context.projectName, await (0, sync_deps_impl_1.syncDeps)(context.projectName, projectRoot, context.root, context.projectGraph, [
+        (0, sync_deps_impl_1.displayNewlyAddedDepsMessage)(context.projectName, await (0, sync_deps_impl_1.syncDeps)(context.projectName, projectPackageJson, packageJsonPath, workspacePackageJson, context.projectGraph, [
             `@storybook/react-native`,
             '@storybook/addon-ondevice-actions',
             '@storybook/addon-ondevice-backgrounds',
@@ -28,7 +35,13 @@ async function* reactNativeStorybookExecutor(options, context) {
 }
 exports.default = reactNativeStorybookExecutor;
 function runCliStorybook(workspaceRoot, options) {
-    const storiesFiles = options.searchDir.flatMap((dir) => (0, glob_1.sync)((0, path_1.join)(dir, options.pattern)));
+    const storiesFiles = options.searchDir.flatMap((dir) => {
+        const storyFilePaths = (0, glob_1.sync)((0, path_1.join)(dir, options.pattern));
+        return storyFilePaths.map((storyFilePath) => {
+            const loaderPath = (0, path_1.resolve)((0, path_1.dirname)(options.outputFile));
+            return (0, path_1.relative)(loaderPath, storyFilePath);
+        });
+    });
     if (storiesFiles.length === 0) {
         devkit_1.logger.warn(`${chalk.bold.yellow('warn')} No stories found.`);
     }

package/src/executors/storybook/storybook.impl.ts

@@ -1,5 +1,5 @@
-import { join } from 'path';
-import { ExecutorContext, logger } from '@nx/devkit';
+import { join, relative, resolve, dirname } from 'path';
+import { ExecutorContext, logger, readJsonFile } from '@nx/devkit';
 import { fileExists } from '@nx/workspace/src/utilities/fileutils';
 import * as chalk from 'chalk';
 import { sync as globSync } from 'glob';
@@ -10,7 +10,12 @@ import {
   syncDeps,
 } from '../sync-deps/sync-deps.impl';
 import { writeFileSync } from 'fs-extra';
+import { PackageJson } from 'nx/src/utils/package-json';
 
+/**
+ * TODO (@xiongemi): remove this function in v19.
+ * @deprecated Going to use the default react storybook target. Use @nx/react:storybook executor instead.
+ */
 export default async function* reactNativeStorybookExecutor(
   options: ReactNativeStorybookOptions,
   context: ExecutorContext
@@ -25,13 +30,21 @@ export default async function* reactNativeStorybookExecutor(
 
   // add storybook addons to app's package.json
   const packageJsonPath = join(context.root, projectRoot, 'package.json');
+  const workspacePackageJsonPath = join(context.root, 'package.json');
+
+  const workspacePackageJson = readJsonFile<PackageJson>(
+    workspacePackageJsonPath
+  );
+  const projectPackageJson = readJsonFile<PackageJson>(packageJsonPath);
+
   if (fileExists(packageJsonPath))
     displayNewlyAddedDepsMessage(
       context.projectName,
       await syncDeps(
         context.projectName,
-        projectRoot,
-        context.root,
+        projectPackageJson,
+        packageJsonPath,
+        workspacePackageJson,
         context.projectGraph,
         [
           `@storybook/react-native`,
@@ -53,9 +66,15 @@ export function runCliStorybook(
   workspaceRoot: string,
   options: ReactNativeStorybookOptions
 ) {
-  const storiesFiles: string[] = options.searchDir.flatMap((dir) =>
-    globSync(join(dir, options.pattern))
-  );
+  const storiesFiles: string[] = options.searchDir.flatMap((dir) => {
+    const storyFilePaths: string[] = globSync(join(dir, options.pattern));
+
+    return storyFilePaths.map((storyFilePath) => {
+      const loaderPath: string = resolve(dirname(options.outputFile));
+      return relative(loaderPath, storyFilePath);
+    });
+  });
+
   if (storiesFiles.length === 0) {
     logger.warn(`${chalk.bold.yellow('warn')} No stories found.`);
   }

package/src/executors/sync-deps/schema.d.ts

@@ -1,4 +1,5 @@
 export interface ReactNativeSyncDepsOptions {
   include: string[] | string; // default is an empty array []
   exclude: string[] | string; // default is an empty array []
+  all: boolean; // default is false
 }

package/src/executors/sync-deps/schema.json

@@ -3,7 +3,7 @@
   "outputCapture": "direct-nodejs",
   "cli": "nx",
   "$id": "NxReactNativeSyncDeps",
-  "$schema": "http://json-schema.org/schema",
+  "$schema": "https://json-schema.org/schema",
   "title": "Sync Deps for React Native",
   "description": "Updates `package.json` with project dependencies.",
   "type": "object",
@@ -23,6 +23,11 @@
       },
       "default": [],
       "description": "An array of npm packages to exclude."
+    },
+    "all": {
+      "type": "boolean",
+      "description": "Copy all dependencies and devDependencies from the workspace root package.json.",
+      "default": false
     }
   }
 }

package/src/executors/sync-deps/sync-deps.impl.d.ts

@@ -1,8 +1,9 @@
 import { ExecutorContext, ProjectGraph } from '@nx/devkit';
 import { ReactNativeSyncDepsOptions } from './schema';
+import { PackageJson } from 'nx/src/utils/package-json';
 export interface ReactNativeSyncDepsOutput {
     success: boolean;
 }
 export default function syncDepsExecutor(options: ReactNativeSyncDepsOptions, context: ExecutorContext): AsyncGenerator<ReactNativeSyncDepsOutput>;
-export declare function syncDeps(projectName: string, projectRoot: string, workspaceRoot: string, projectGraph: ProjectGraph, include?: string[], exclude?: string[]): Promise<string[]>;
+export declare function syncDeps(projectName: string, projectPackageJson: PackageJson, projectPackageJsonPath: string, workspacePackageJson: PackageJson, projectGraph?: ProjectGraph, include?: string[], exclude?: string[], all?: boolean): Promise<string[]>;
 export declare function displayNewlyAddedDepsMessage(projectName: string, deps: string[]): void;

package/src/executors/sync-deps/sync-deps.impl.js

@@ -7,22 +7,29 @@ const devkit_1 = require("@nx/devkit");
 const find_all_npm_dependencies_1 = require("../../utils/find-all-npm-dependencies");
 async function* syncDepsExecutor(options, context) {
     const projectRoot = context.projectsConfigurations.projects[context.projectName].root;
-    displayNewlyAddedDepsMessage(context.projectName, await syncDeps(context.projectName, projectRoot, context.root, context.projectGraph, typeof options.include === 'string'
+    const workspacePackageJsonPath = (0, path_1.join)(context.root, 'package.json');
+    const projectPackageJsonPath = (0, path_1.join)(context.root, projectRoot, 'package.json');
+    const workspacePackageJson = (0, devkit_1.readJsonFile)(workspacePackageJsonPath);
+    const projectPackageJson = (0, devkit_1.readJsonFile)(projectPackageJsonPath);
+    displayNewlyAddedDepsMessage(context.projectName, await syncDeps(context.projectName, projectPackageJson, projectPackageJsonPath, workspacePackageJson, context.projectGraph, typeof options.include === 'string'
         ? options.include.split(',')
         : options.include, typeof options.exclude === 'string'
         ? options.exclude.split(',')
-        : options.exclude));
+        : options.exclude, options.all));
     yield { success: true };
 }
 exports.default = syncDepsExecutor;
-async function syncDeps(projectName, projectRoot, workspaceRoot, projectGraph, include = [], exclude = []) {
-    let npmDeps = (0, find_all_npm_dependencies_1.findAllNpmDependencies)(projectGraph, projectName);
-    const packageJsonPath = (0, path_1.join)(workspaceRoot, projectRoot, 'package.json');
-    const packageJson = (0, devkit_1.readJsonFile)(packageJsonPath);
+async function syncDeps(projectName, projectPackageJson, projectPackageJsonPath, workspacePackageJson, projectGraph = (0, devkit_1.readCachedProjectGraph)(), include = [], exclude = [], all = false) {
+    let npmDeps = all
+        ? Object.keys(workspacePackageJson.dependencies || {})
+        : (0, find_all_npm_dependencies_1.findAllNpmDependencies)(projectGraph, projectName);
+    let npmDevdeps = all
+        ? Object.keys(workspacePackageJson.devDependencies || {})
+        : [];
     const newDeps = [];
     let updated = false;
-    if (!packageJson.dependencies) {
-        packageJson.dependencies = {};
+    if (!projectPackageJson.dependencies) {
+        projectPackageJson.dependencies = {};
         updated = true;
     }
     if (include && include.length) {
@@ -31,15 +38,30 @@ async function syncDeps(projectName, projectRoot, workspaceRoot, projectGraph, i
     if (exclude && exclude.length) {
         npmDeps = npmDeps.filter((dep) => !exclude.includes(dep));
     }
+    if (!projectPackageJson.devDependencies) {
+        projectPackageJson.devDependencies = {};
+    }
+    if (!projectPackageJson.dependencies) {
+        projectPackageJson.dependencies = {};
+    }
     npmDeps.forEach((dep) => {
-        if (!packageJson.dependencies[dep]) {
-            packageJson.dependencies[dep] = '*';
+        if (!projectPackageJson.dependencies[dep] &&
+            !projectPackageJson.devDependencies[dep]) {
+            projectPackageJson.dependencies[dep] = '*';
+            newDeps.push(dep);
+            updated = true;
+        }
+    });
+    npmDevdeps.forEach((dep) => {
+        if (!projectPackageJson.dependencies[dep] &&
+            !projectPackageJson.devDependencies[dep]) {
+            projectPackageJson.devDependencies[dep] = '*';
             newDeps.push(dep);
             updated = true;
         }
     });
     if (updated) {
-        (0, devkit_1.writeJsonFile)(packageJsonPath, packageJson);
+        (0, devkit_1.writeJsonFile)(projectPackageJsonPath, projectPackageJson);
     }
     return newDeps;
 }