@nx/expo 18.0.0-beta.1 → 18.0.0-beta.2

package/.eslintrc.json

@@ -27,6 +27,9 @@
               "nx",
               "@nx/rollup",
               "@nx/webpack",
+              "@nx/cypress",
+              "@nx/playwright",
+              "@nx/detox",
               "typescript",
               "eslint",
               "expo",

package/docs/export-examples.md

@@ -0,0 +1,112 @@
+`project.json`:
+
+```json
+{
+  "name": "mobile",
+  //...
+  "targets": {
+    //...
+    "export": {
+      "executor": "@nx/expo:export",
+      "options": {
+        "outputs": ["{options.outputDir}"],
+        "platform": "all",
+        "outputDir": "dist/apps/mobile"
+      },
+      "dependsOn": ["sync-deps"]
+    }
+    //...
+  }
+}
+```
+
+```shell
+nx run mobile:export
+```
+
+## Examples
+
+{% tabs %}
+{% tab label="Specify outputDir" %}
+The `outputDir` option allows you to specify the output directory of your bundle:
+
+```json
+    "export": {
+      "executor": "@nx/expo:export",
+      "outputs": ["{options.outputDir}"],
+      "options": {
+        "platform": "all",
+        "bundler": "metro",
+        "outputDir": "dist/apps/mobile"
+      },
+      "dependsOn": ["sync-deps"]
+    },
+```
+
+or run command: `nx run mobile:export --outputDir=dist/apps/mobile`.
+
+{% /tab %}
+{% tab label="Specify the platform" %}
+The `platform` option allows you to specify the platform to compile with metro bundler: "ios", "android", "all", and "web".
+
+For example, to bundle for web:
+
+```json
+    "export": {
+      "executor": "@nx/expo:export",
+      "outputs": ["{options.outputDir}"],
+      "options": {
+        "platform": "web",
+        "bundler": "metro",
+        "outputDir": "dist/apps/dogs"
+      },
+      "dependsOn": ["sync-deps"]
+    },
+```
+
+or run command `nx export mobile --platform=web`.
+
+{% /tab %}
+{% tab label="Bundle for development" %}
+
+The `dev` option allows you to bundle for development environments.
+
+```json
+    "export": {
+      "executor": "@nx/expo:export",
+      "outputs": ["{options.outputDir}"],
+      "options": {
+        "platform": "web",
+        "bundler": "metro",
+        "outputDir": "dist/apps/dogs",
+        "dev": true
+      },
+      "dependsOn": ["sync-deps"]
+    },
+```
+
+or run command `nx export mobile --dev`.
+
+{% /tab %}
+{% tab label="Clear bundle cache" %}
+
+The `clear` option allows you to clear bundle cache.
+
+```json
+    "export": {
+      "executor": "@nx/expo:export",
+      "outputs": ["{options.outputDir}"],
+      "options": {
+        "platform": "web",
+        "bundler": "metro",
+        "outputDir": "dist/apps/dogs",
+        "clear": true
+      },
+      "dependsOn": ["sync-deps"]
+    },
+```
+
+or run command `nx export mobile --clear`.
+
+{% /tab %}
+{% /tabs %}

package/docs/start-examples.md

@@ -39,6 +39,8 @@ Opens your app in Expo Go in a currently running iOS simulator on your computer:
     }
 ```
 
+or run command `nx start <your app name> --ios`.
+
 Opens your app in Expo Go on a connected Android device
 
 ```json
@@ -51,6 +53,8 @@ Opens your app in Expo Go on a connected Android device
     }
 ```
 
+or run command `nx start <your app name> --android`.
+
 Opens your app in a web browser:
 
 ```json
@@ -63,6 +67,8 @@ Opens your app in a web browser:
     }
 ```
 
+or run command `nx start <your app name> --web`.
+
 {% /tab %}
 {% tab label="Specify the host" %}
 The `host` option allows you to specify the type of host to use. `lan` uses the local network; `tunnel` ues any network by tunnel through ngrok; `localhost` connects to the dev server over localhost.

package/executors.json

@@ -54,6 +54,11 @@
       "implementation": "./src/executors/submit/submit.impl",
       "schema": "./src/executors/submit/schema.json",
       "description": "Submit app binary to App Store and/or Play Store"
+    },
+    "serve": {
+      "implementation": "./src/executors/serve/serve.impl",
+      "schema": "./src/executors/serve/schema.json",
+      "description": "Serve up the Expo web app locally"
     }
   }
 }

package/generators.json

@@ -4,9 +4,9 @@
   "extends": ["@nx/workspace"],
   "generators": {
     "init": {
-      "factory": "./src/generators/init/init#expoInitGenerator",
+      "factory": "./src/generators/init/init#expoInitGeneratorInternal",
       "schema": "./src/generators/init/schema.json",
-      "description": "Initialize the @nrwl/expo plugin",
+      "description": "Initialize the @nx/expo plugin",
       "hidden": true
     },
     "application": {

package/migrations.json

@@ -36,12 +36,6 @@
       "description": "Update package.json eas build lifecycle scripts",
       "implementation": "./src/migrations/update-16-1-4/update-eas-scripts"
     },
-    "add-detox-app-json-16-1-4": {
-      "version": "16.1.4-beta.0",
-      "cli": "nx",
-      "description": "Add app.json for detox",
-      "factory": "./src/migrations/update-16-1-4/add-detox-app-json"
-    },
     "update-16-6-0-add-dependsOn": {
       "cli": "nx",
       "version": "16.6.0-beta.0",
@@ -65,6 +59,30 @@
       "version": "16.9.0-beta.1",
       "description": "Update eas.json cli version",
       "implementation": "./src/migrations/update-16-9-0/update-eas-cli-version"
+    },
+    "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-symlink-target": {
+      "cli": "nx",
+      "version": "18.0.0-beta.0",
+      "description": "Remove symlink target in project.json",
+      "implementation": "./src/migrations/update-18-0-0/remove-symlink-target"
+    },
+    "update-18-0-0-remove-eas-cli": {
+      "cli": "nx",
+      "version": "18.0.0-beta.0",
+      "description": "Remove eas-cli from package.json",
+      "implementation": "./src/migrations/update-18-0-0/remove-eas-cli"
+    },
+    "update-18-0-0-remove-offset-export-outputDir": {
+      "cli": "nx",
+      "version": "18.0.0-beta.0",
+      "description": "Remove the offset from the outputDir of the export target",
+      "implementation": "./src/migrations/update-18-0-0/change-outputDir-export-target"
     }
   },
   "packageJsonUpdates": {
@@ -605,6 +623,67 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "18.0.0": {
+      "version": "18.0.0-beta.0",
+      "packages": {
+        "expo": {
+          "version": "50.0.1",
+          "alwaysAddToPackageJson": false
+        },
+        "expo-splash-screen": {
+          "version": "~0.26.1",
+          "alwaysAddToPackageJson": false
+        },
+        "expo-status-bar": {
+          "version": "~1.11.1",
+          "alwaysAddToPackageJson": false
+        },
+        "@expo/cli": {
+          "version": "~0.16.5",
+          "alwaysAddToPackageJson": false
+        },
+        "babel-preset-expo": {
+          "version": "~10.0.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@types/react": {
+          "version": "~18.2.45",
+          "alwaysAddToPackageJson": false
+        },
+        "react-native": {
+          "version": "~0.73.2",
+          "alwaysAddToPackageJson": false
+        },
+        "react-native-web": {
+          "version": "~0.19.9",
+          "alwaysAddToPackageJson": false
+        },
+        "@expo/metro-config": {
+          "version": "~0.17.3",
+          "alwaysAddToPackageJson": false
+        },
+        "@expo/metro-runtime": {
+          "version": "~3.1.1",
+          "addToPackageJson": "devDependencies"
+        },
+        "react-native-svg-transformer": {
+          "version": "1.2.0",
+          "alwaysAddToPackageJson": false
+        },
+        "react-native-svg": {
+          "version": "14.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "@testing-library/react-native": {
+          "version": "~12.4.2",
+          "alwaysAddToPackageJson": false
+        },
+        "jest-expo": {
+          "version": "~50.0.1",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/expo",
-  "version": "18.0.0-beta.1",
+  "version": "18.0.0-beta.2",
   "private": false,
   "description": "The Expo Plugin for Nx contains executors and generators for managing and developing an expo application within your workspace. For example, you can directly build for different target platforms as well as generate projects and publish your code.",
   "keywords": [
@@ -26,27 +26,23 @@
   "main": "./index.js",
   "types": "index.d.ts",
   "dependencies": {
+    "@nx/devkit": "18.0.0-beta.2",
     "chalk": "^4.1.0",
     "enhanced-resolve": "^5.8.3",
     "fs-extra": "^11.1.0",
-    "metro-config": "~0.76.8",
-    "metro-resolver": "~0.76.8",
+    "metro-config": "~0.80.4",
+    "metro-resolver": "~0.80.4",
+    "node-fetch": "^2.6.7",
     "tslib": "^2.3.0",
     "tsconfig-paths": "^4.1.2",
     "tsconfig-paths-webpack-plugin": "^4.0.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/webpack": "18.0.0-beta.1",
-    "@nrwl/expo": "18.0.0-beta.1"
-  },
-  "peerDependencies": {
-    "expo": ">= 49.0.0",
-    "@expo/cli": ">= 0.10.0",
-    "eas-cli": ">= 3.15.0"
+    "@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/web": "18.0.0-beta.2",
+    "@nx/webpack": "18.0.0-beta.2",
+    "@nrwl/expo": "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.js

@@ -58,17 +58,20 @@ function buildExpoTargets(projectRoot, options, context) {
     const namedInputs = (0, get_named_inputs_1.getNamedInputs)(projectRoot, context);
     const targets = {
         [options.startTargetName]: {
-            executor: `@nx/expo:start`,
+            command: `expo start`,
+            options: { cwd: projectRoot },
         },
         [options.serveTargetName]: {
             command: `expo start --web`,
             options: { cwd: projectRoot },
         },
         [options.runIosTargetName]: {
-            executor: `@nx/expo:run-ios`,
+            command: `expo run:ios`,
+            options: { cwd: projectRoot },
         },
         [options.runAndroidTargetName]: {
-            executor: `@nx/expo:run-android`,
+            command: `expo run:android`,
+            options: { cwd: projectRoot },
         },
         [options.exportTargetName]: {
             command: `expo export`,
@@ -86,12 +89,12 @@ function buildExpoTargets(projectRoot, options, context) {
             executor: `@nx/expo:prebuild`,
         },
         [options.buildTargetName]: {
-            executor: `@nx/expo:build`,
-            dependsOn: [`^${options.buildTargetName}`],
-            inputs: getInputs(namedInputs),
+            command: `eas build`,
+            options: { cwd: projectRoot },
         },
         [options.submitTargetName]: {
-            executor: `@nx/expo:submit`,
+            command: `eas submit`,
+            options: { cwd: projectRoot },
         },
     };
     return targets;

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/plugins/with-nx-webpack.d.ts

@@ -1,5 +1,5 @@
 /**
- * @deprecated TODO(v17) use bundler: 'metro' instead, will be removed in 16.0.0
+ * @deprecated TODO(v19) use bundler: 'metro' instead, will be removed in v19
  * This function add additional rules to expo's webpack config to make expo web working
  */
 export declare function withNxWebpack(config: any): Promise<any>;

package/plugins/with-nx-webpack.js

@@ -4,12 +4,12 @@ exports.withNxWebpack = void 0;
 const tsconfig_paths_webpack_plugin_1 = require("tsconfig-paths-webpack-plugin");
 const path_1 = require("path");
 /**
- * @deprecated TODO(v17) use bundler: 'metro' instead, will be removed in 16.0.0
+ * @deprecated TODO(v19) use bundler: 'metro' instead, will be removed in v19
  * This function add additional rules to expo's webpack config to make expo web working
  */
 async function withNxWebpack(config) {
     // add additional rule to load files under libs
-    const rules = config.module.rules[1]?.oneOf;
+    const rules = config.module.rules.find((rule) => Array.isArray(rule.oneOf))?.oneOf;
     if (rules) {
         rules.push({
             test: /\.(mjs|[jt]sx?)$/,
@@ -36,12 +36,16 @@ async function withNxWebpack(config) {
         config.resolve.plugins = [];
     }
     const extensions = ['.ts', '.tsx', '.mjs', '.js', '.jsx'];
-    const tsConfigPath = (0, path_1.resolve)('tsconfig.json');
+    const tsConfigPath = (0, path_1.resolve)(__dirname, 'tsconfig.json');
     config.resolve.plugins.push(new tsconfig_paths_webpack_plugin_1.TsconfigPathsPlugin({
         configFile: tsConfigPath,
         extensions,
     }));
-    config.resolve.symlinks = true;
+    config.resolve.fallback = {
+        ...config.resolve.fallback,
+        crypto: require.resolve('crypto-browserify'),
+        stream: require.resolve('stream-browserify'),
+    };
     return config;
 }
 exports.withNxWebpack = withNxWebpack;

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const devkit_1 = require("@nx/devkit");
 const path_1 = require("path");
 const child_process_1 = require("child_process");
+const resolve_eas_1 = require("../../utils/resolve-eas");
 let childProcess;
 async function* buildExecutor(options, context) {
     const projectRoot = context.projectsConfigurations.projects[context.projectName].root;
@@ -19,7 +20,7 @@ async function* buildExecutor(options, context) {
 exports.default = buildExecutor;
 function runCliBuild(workspaceRoot, projectRoot, options) {
     return new Promise((resolve, reject) => {
-        childProcess = (0, child_process_1.fork)(require.resolve('eas-cli/bin/run'), ['build', ...createBuildOptions(options)], {
+        childProcess = (0, child_process_1.fork)((0, resolve_eas_1.resolveEas)(workspaceRoot), ['build', ...createBuildOptions(options)], {
             cwd: (0, path_1.resolve)(workspaceRoot, projectRoot),
             env: process.env,
         });

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

@@ -4,11 +4,10 @@ exports.runCliBuildList = void 0;
 const devkit_1 = require("@nx/devkit");
 const path_1 = require("path");
 const child_process_1 = require("child_process");
-const ensure_node_modules_symlink_1 = require("../../utils/ensure-node-modules-symlink");
+const resolve_eas_1 = require("../../utils/resolve-eas");
 let childProcess;
 async function* buildListExecutor(options, context) {
     const projectRoot = context.projectsConfigurations.projects[context.projectName].root;
-    (0, ensure_node_modules_symlink_1.ensureNodeModulesSymlink)(context.root, projectRoot);
     try {
         if (options.json) {
             // when json is true, interactive has to be false
@@ -26,7 +25,7 @@ async function* buildListExecutor(options, context) {
 exports.default = buildListExecutor;
 function runCliBuildList(workspaceRoot, projectRoot, options) {
     return new Promise((resolve, reject) => {
-        childProcess = (0, child_process_1.fork)(require.resolve('eas-cli/bin/run'), ['build:list', ...createBuildListOptions(options)], {
+        childProcess = (0, child_process_1.fork)((0, resolve_eas_1.resolveEas)(workspaceRoot), ['build:list', ...createBuildListOptions(options)], {
             cwd: (0, path_1.resolve)(workspaceRoot, projectRoot),
             env: process.env,
             stdio: ['inherit', 'pipe', 'inherit', 'ipc'], // only stream stdout on child process

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

@@ -2,4 +2,8 @@ import { ExecutorContext } from '@nx/devkit';
 export interface ExpoEnsureSymlinkOutput {
     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<ExpoEnsureSymlinkOutput>;

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/export/export.impl.d.ts

@@ -4,3 +4,4 @@ export interface ExpoExportOutput {
     success: boolean;
 }
 export default function exportExecutor(options: ExportExecutorSchema, context: ExecutorContext): AsyncGenerator<ExpoExportOutput>;
+export declare function createExportOptions(options: ExportExecutorSchema, projectRoot: string): any[];

package/src/executors/export/export.impl.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.createExportOptions = void 0;
 const devkit_1 = require("@nx/devkit");
 const child_process_1 = require("child_process");
 const path_1 = require("path");
@@ -21,11 +22,7 @@ async function* exportExecutor(options, context) {
 exports.default = exportExecutor;
 function exportAsync(workspaceRoot, projectRoot, options) {
     return new Promise((resolve, reject) => {
-        childProcess = (0, child_process_1.fork)(require.resolve('@expo/cli/build/bin/cli'), [
-            `export${options.bundler === 'webpack' ? ':web' : ''}`,
-            '.',
-            ...createExportOptions(options),
-        ], { cwd: (0, path_1.resolve)(workspaceRoot, projectRoot), env: process.env });
+        childProcess = (0, child_process_1.fork)(require.resolve('@expo/cli/build/bin/cli'), [`export`, ...createExportOptions(options, projectRoot)], { cwd: (0, path_1.resolve)(workspaceRoot, projectRoot), env: process.env });
         // Ensure the child process is killed when the parent exits
         process.on('exit', () => childProcess.kill());
         process.on('SIGTERM', () => childProcess.kill());
@@ -42,22 +39,35 @@ function exportAsync(workspaceRoot, projectRoot, options) {
         });
     });
 }
-const nxOptions = ['bundler'];
+const nxOptions = ['bundler', 'interactive']; // interactive is passed in by e2e tests
 // options from https://github.com/expo/expo/blob/main/packages/@expo/cli/src/export/index.ts
-function createExportOptions(options) {
+function createExportOptions(options, projectRoot) {
     return Object.keys(options).reduce((acc, k) => {
         if (!nxOptions.includes(k)) {
             const v = options[k];
-            if (typeof v === 'boolean') {
-                if (v === true) {
-                    // when true, does not need to pass the value true, just need to pass the flag in kebob case
-                    acc.push(`--${(0, devkit_1.names)(k).fileName}`);
-                }
-            }
-            else {
-                acc.push(`--${(0, devkit_1.names)(k).fileName}`, v);
+            switch (k) {
+                case 'outputDir':
+                    const path = (0, devkit_1.joinPathFragments)((0, devkit_1.offsetFromRoot)(projectRoot), v); // need to add offset for the outputDir
+                    acc.push('--output-dir', path);
+                    break;
+                case 'minify':
+                    if (v === false) {
+                        acc.push('--no-minify'); // cli only accpets --no-minify
+                    }
+                    break;
+                default:
+                    if (typeof v === 'boolean') {
+                        if (v === true) {
+                            // when true, does not need to pass the value true, just need to pass the flag in kebob case
+                            acc.push(`--${(0, devkit_1.names)(k).fileName}`);
+                        }
+                    }
+                    else {
+                        acc.push(`--${(0, devkit_1.names)(k).fileName}`, v);
+                    }
             }
         }
         return acc;
     }, []);
 }
+exports.createExportOptions = createExportOptions;

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

@@ -1,11 +1,13 @@
 // options form https://github.com/expo/expo/blob/main/packages/%40expo/cli/src/export/resolveOptions.ts
+// https://github.com/expo/expo/blob/main/packages/%40expo/cli/src/export/index.ts
+
 export interface ExportExecutorSchema {
   platform?: 'ios' | 'android' | 'all' | 'web'; // default is 'all'
   outputDir?: string;
   clear?: boolean;
   dev?: boolean;
+  minify?: boolean;
   maxWorkers?: number;
   dumpAssetmap?: boolean;
-  dumpSourcemap?: boolean;
-  bundler: 'metro' | 'webpack';
+  sourcemap?: boolean;
 }