feat: support autolinking in monorepos

docs/autolinking.md

@@ -36,28 +36,6 @@ The implementation ensures that a library is imported only once. If you need to
 
 See example usage in React Native template's [Podfile](https://github.com/facebook/react-native/blob/0.60-stable/template/ios/Podfile).
 
-### Custom root (monorepos)
-
-The project root is where `node_modules` with `react-native` is. Autolinking script assume your project root to be `".."`, relative to `ios` directory. If you're in a project with custom structure, like this:
-
-```
-root/
-  node_modules
-  example/
-    ios/
-```
-
-you'll need to set a custom root. Pass it as an argument to `use_native_modules!` function inside the targets and adjust the relatively required `native_modules` path accordingly:
-
-```rb
-# example/ios/Podfile
-require_relative '../../node_modules/@react-native-community/cli-platform-ios/native_modules'
-target 'RNapp' do
-  # React pods and custom pods here...
-  use_native_modules!("../..")
-end
-```
-
 ## Platform Android
 
 The [native_modules.gradle](https://github.com/react-native-community/cli/blob/master/packages/platform-android/native_modules.gradle) script is included in your project's `settings.gradle` and `app/build.gradle` files and:
@@ -76,31 +54,6 @@ See example usage in React Native template:
 - [app/build.gradle](https://github.com/facebook/react-native/blob/0.60-stable/template/android/app/build.gradle#L185)
 - [MainApplication.java](https://github.com/facebook/react-native/blob/769e35ba5f4c31ef913035a5cc8bc0e88546ca55/template/android/app/src/main/java/com/helloworld/MainApplication.java#L22-L28)
 
-### Custom root (monorepos)
-
-The project root is where `node_modules` with `react-native` is. Autolinking scripts assume your project root to be `".."`, relative to `android` directory. If you're in a project with custom structure, like this:
-
-```
-root/
-  node_modules
-  example/
-    android/
-```
-
-you'll need to set a custom root. Pass it as a second argument to `applyNativeModulesSettingsGradle` and `applyNativeModulesAppBuildGradle` methods and adjust the `native_modules.gradle` path accordingly:
-
-```groovy
-// example/android/settings.gradle
-apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle");
-applyNativeModulesSettingsGradle(settings, "../..")
-```
-
-```groovy
-// example/android/app/build.gradle
-apply from: file("../../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle");
-applyNativeModulesAppBuildGradle(project, "../..")
-```
-
 ## What do I need to have in my package to make it work?
 
 You’re already using Gradle, so Android support will work by default.
@@ -142,3 +95,14 @@ module.exports = {
   },
 };
 ```
+
+## How can I use autolinking in a monorepo?
+
+There is nothing extra you need to do - monorepos are supported by default.
+
+Please note that in certain scenarios, such as when using Yarn workspaces, your packages might be hoisted to the root of the repository. If that is the case, please make sure that the following paths are pointing to the
+correct location and update them accordingly:
+
+- path to `native_modules.rb` in your `ios/Podfile`
+- path to `native_modules.gradle` in your `android/settings.gradle`
+- path to `native_modules.gradle` in your `android/app/build.gradle`

packages/cli-types/src/index.ts

@@ -39,6 +39,16 @@ export interface Command<Args = Object> {
   }>;
 }
 
+export type DetachedCommandFunction<Args = Object> = (
+  argv: Array<string>,
+  args: Args,
+) => Promise<void> | void;
+
+export type DetachedCommand<Args = Object> = Command<Args> & {
+  detached: true;
+  func: DetachedCommandFunction<Args>;
+};
+
 interface PlatformConfig<
   ProjectConfig,
   ProjectParams,

packages/cli/package.json

@@ -42,6 +42,7 @@
     "envinfo": "^7.1.0",
     "errorhandler": "^1.5.0",
     "execa": "^1.0.0",
+    "find-up": "^4.1.0",
     "fs-extra": "^7.0.1",
     "glob": "^7.1.1",
     "graceful-fs": "^4.1.3",
@@ -71,8 +72,8 @@
   },
   "devDependencies": {
     "@types/command-exists": "^1.2.0",
-    "@types/graceful-fs": "^4.1.3",
     "@types/cosmiconfig": "^5.0.3",
+    "@types/graceful-fs": "^4.1.3",
     "@types/hapi__joi": "^15.0.4",
     "@types/minimist": "^1.2.0",
     "@types/mkdirp": "^0.5.2",

packages/cli/src/cliEntry.js

@@ -14,14 +14,12 @@ import path from 'path';
 
 import type {CommandT, ConfigT} from 'types';
 // $FlowFixMe - converted to TS
-import commands from './commands';
+import {detachedCommands, projectCommands} from './commands';
 // $FlowFixMe - converted to TS
 import init from './commands/init/initCompat';
 // $FlowFixMe - converted to TS
 import assertRequiredOptions from './tools/assertRequiredOptions';
 import {logger} from '@react-native-community/cli-tools';
-// $FlowFixMe - converted to TS
-import {setProjectDir} from './tools/packageManager';
 import pkgJson from '../package.json';
 // $FlowFixMe - converted to TS
 import loadConfig from './tools/config';
@@ -117,7 +115,11 @@ const addCommand = (command: CommandT, ctx: ConfigT) => {
 
       try {
         assertRequiredOptions(options, passedOptions);
-        await command.func(argv, ctx, passedOptions);
+        if (command.detached) {
+          await command.func(argv, passedOptions);
+        } else {
+          await command.func(argv, ctx, passedOptions);
+        }
       } catch (error) {
         handleError(error);
       }
@@ -149,6 +151,9 @@ async function run() {
 }
 
 async function setupAndRun() {
+  // Commander is not available yet
+  logger.setVerbose(process.argv.includes('--verbose'));
+
   // We only have a setup script for UNIX envs currently
   if (process.platform !== 'win32') {
     const scriptName = 'setup_env.sh';
@@ -168,19 +173,29 @@ async function setupAndRun() {
     }
   }
 
-  // when we run `config`, we don't want to output anything to the console. We
-  // expect it to return valid JSON
-  if (process.argv.includes('config')) {
-    logger.disable();
-  }
+  detachedCommands.forEach(addCommand);
 
-  const ctx = loadConfig();
+  try {
+    // when we run `config`, we don't want to output anything to the console. We
+    // expect it to return valid JSON
+    if (process.argv.includes('config')) {
+      logger.disable();
+    }
 
-  logger.enable();
+    const ctx = loadConfig();
 
-  setProjectDir(ctx.root);
+    logger.enable();
 
-  [...commands, ...ctx.commands].forEach(command => addCommand(command, ctx));
+    [...projectCommands, ...ctx.commands].forEach(command =>
+      addCommand(command, ctx),
+    );
+  } catch (e) {
+    logger.enable();
+    logger.debug(e.message);
+    logger.debug(
+      'Failed to load configuration of your project. Only a subset of commands will be available.',
+    );
+  }
 
   commander.parse(process.argv);
 
@@ -194,8 +209,6 @@ async function setupAndRun() {
   if (commander.args.length === 0 && commander.rawArgs.includes('--version')) {
     console.log(pkgJson.version);
   }
-
-  logger.setVerbose(commander.verbose);
 }
 
 export default {

packages/cli/src/commands/index.ts

@@ -1,4 +1,4 @@
-import {Command} from '@react-native-community/cli-types';
+import {DetachedCommand, Command} from '@react-native-community/cli-types';
 
 // @ts-ignore - JS file
 import server from './server/server';
@@ -15,7 +15,7 @@ import init from './init';
 // @ts-ignore - JS file
 import doctor from './doctor';
 
-export default [
+export const projectCommands = [
   server,
   bundle,
   ramBundle,
@@ -26,6 +26,7 @@ export default [
   upgrade,
   info,
   config,
-  init,
   doctor,
 ] as Command[];
+
+export const detachedCommands = [init] as DetachedCommand[];

packages/cli/src/commands/init/__tests__/template.test.ts

@@ -26,7 +26,7 @@ test('installTemplatePackage', async () => {
   expect(PackageManger.install).toHaveBeenCalledWith([TEMPLATE_NAME], {
     preferYarn: false,
     silent: true,
-    cwd: TEMPLATE_SOURCE_DIR,
+    root: TEMPLATE_SOURCE_DIR,
   });
 });
 

packages/cli/src/commands/init/index.ts

@@ -2,6 +2,7 @@ import init from './init';
 
 export default {
   func: init,
+  detached: true,
   name: 'init <projectName>',
   description:
     'Initialize a new React Native project named <projectName> in a directory of the same name.',

packages/cli/src/commands/init/init.ts

@@ -11,7 +11,6 @@ import {validateProjectName} from './validate';
 import DirectoryAlreadyExistsError from './errors/DirectoryAlreadyExistsError';
 import printRunInstructions from './printRunInstructions';
 import {CLIError, logger} from '@react-native-community/cli-tools';
-import {Config} from '@react-native-community/cli-types';
 import {
   installTemplatePackage,
   getTemplateConfig,
@@ -47,16 +46,6 @@ function doesDirectoryExist(dir: string) {
   return fs.existsSync(dir);
 }
 
-function getProjectDirectory({
-  projectName,
-  directory,
-}: {
-  projectName: string;
-  directory: string;
-}): string {
-  return path.relative(process.cwd(), directory || projectName);
-}
-
 async function setProjectDirectory(directory: string) {
   const directoryExists = doesDirectoryExist(directory);
   if (directoryExists) {
@@ -87,6 +76,8 @@ async function setProjectDirectory(directory: string) {
       error,
     );
   }
+
+  return process.cwd();
 }
 
 function adjustNameIfUrl(name: string, cwd: string) {
@@ -112,7 +103,7 @@ async function createFromTemplate({
   logger.debug('Initializing new project');
   logger.log(banner);
 
-  await setProjectDirectory(directory);
+  const projectDirectory = await setProjectDirectory(directory);
 
   const Loader = getLoader();
   const loader = new Loader({text: 'Downloading template'});
@@ -152,7 +143,12 @@ async function createFromTemplate({
       loader.succeed();
     }
 
-    await installDependencies({projectName, npm, loader});
+    await installDependencies({
+      projectName,
+      npm,
+      loader,
+      root: projectDirectory,
+    });
   } catch (e) {
     loader.fail();
     throw new Error(e);
@@ -165,16 +161,19 @@ async function installDependencies({
   projectName,
   npm,
   loader,
+  root,
 }: {
   projectName: string;
   npm?: boolean;
   loader: ora.Ora;
+  root: string;
 }) {
   loader.start('Installing dependencies');
 
   await PackageManager.installAll({
     preferYarn: !npm,
     silent: true,
+    root,
   });
 
   if (process.platform === 'darwin') {
@@ -213,10 +212,9 @@ async function createProject(
 
 export default (async function initialize(
   [projectName]: Array<string>,
-  context: Config,
   options: Options,
 ) {
-  const rootFolder = context.root;
+  const root = process.cwd();
 
   validateProjectName(projectName);
 
@@ -226,15 +224,12 @@ export default (async function initialize(
    */
   const version: string = minimist(process.argv).version || DEFAULT_VERSION;
 
-  const directoryName = getProjectDirectory({
-    projectName,
-    directory: options.directory || projectName,
-  });
+  const directoryName = path.relative(root, options.directory || projectName);
 
   try {
     await createProject(projectName, directoryName, version, options);
 
-    const projectFolder = path.join(rootFolder, projectName);
+    const projectFolder = path.join(root, projectName);
     printRunInstructions(projectFolder, projectName);
   } catch (e) {
     logger.error(e.message);

packages/cli/src/commands/init/initCompat.ts

@@ -56,27 +56,33 @@ async function generateProject(
   const pkgJson = require('react-native/package.json');
   const reactVersion = pkgJson.peerDependencies.react;
 
-  PackageManager.setProjectDir(destinationRoot);
   await createProjectFromTemplate(
     destinationRoot,
     newProjectName,
     options.template,
   );
 
   logger.info('Adding required dependencies');
-  await PackageManager.install([`react@${reactVersion}`]);
+  await PackageManager.install([`react@${reactVersion}`], {
+    root: destinationRoot,
+  });
 
   logger.info('Adding required dev dependencies');
-  await PackageManager.installDev([
-    '@babel/core',
-    '@babel/runtime',
-    '@react-native-community/eslint-config',
-    'eslint',
-    'jest',
-    'babel-jest',
-    'metro-react-native-babel-preset',
-    `react-test-renderer@${reactVersion}`,
-  ]);
+  await PackageManager.installDev(
+    [
+      '@babel/core',
+      '@babel/runtime',
+      '@react-native-community/eslint-config',
+      'eslint',
+      'jest',
+      'babel-jest',
+      'metro-react-native-babel-preset',
+      `react-test-renderer@${reactVersion}`,
+    ],
+    {
+      root: destinationRoot,
+    },
+  );
 
   addJestToPackageJson(destinationRoot);