feat: move all metro logic and commands into a dedicated package (#1447)

* Move metro configuration and bundling logic into their own packages, making them available to external users.

* Rename metro-config package to metro

* Move cli-bundle-api package and bundle command (cli package) into metro.

* Move resolveNodeModuleDir to cli-tools package

* Move releaseChecker into cli-tools

* Move hookStdout to cli-tools

* Move start command into metro package

* Rename 'metro' package to 'cli-plugin-metro'.

* Update dependency

* More renaming

* Revert buildBundle to default export

* Make exports explicit

* Revert exports to default

* PR feedback

* refactor(structure): moved some files around to reflect the convention a bit better

* Fix type bug, export missing funciton/type.

Co-authored-by: Mike Grabowski <grabbou@gmail.com>

Author: afoxman

packages/cli-plugin-metro/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@react-native-community/cli-plugin-metro",
+  "version": "6.0.0",
+  "license": "MIT",
+  "main": "build/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@react-native-community/cli-tools": "^6.0.0-rc.0",
+    "@react-native-community/cli-server-api": "^6.0.0-rc.0",
+    "chalk": "^3.0.0",
+    "metro": "^0.66.1",
+    "metro-config": "^0.66.1",
+    "metro-core": "^0.66.1",
+    "metro-react-native-babel-transformer": "^0.66.1",
+    "metro-resolver": "^0.66.1",
+    "metro-runtime": "^0.66.1",
+    "mkdirp": "^0.5.1",
+    "readline": "^1.3.0"
+  },
+  "devDependencies": {
+    "@react-native-community/cli-types": "^6.0.0"
+  },
+  "files": [
+    "build",
+    "!*.map"
+  ],
+  "homepage": "https://github.com/react-native-community/cli/tree/master/packages/cli-plugin-metro",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/react-native-community/cli.git",
+    "directory": "packages/cli-plugin-metro"
+  }
+}

packages/cli/src/commands/bundle/__mocks__/sign.js packages/cli-plugin-metro/src/commands/bundle/__mocks__/sign.js

@@ -9,13 +9,16 @@
 // @ts-ignore - no typed definition for the package
 import Server from 'metro/src/Server';
 // @ts-ignore - no typed definition for the package
-import outputBundle from 'metro/src/shared/output/bundle';
+const outputBundle = require('metro/src/shared/output/bundle');
 import path from 'path';
 import chalk from 'chalk';
 import {CommandLineArgs} from './bundleCommandLineArgs';
-import {Config} from '@react-native-community/cli-types';
+import type {Config} from '@react-native-community/cli-types';
 import saveAssets from './saveAssets';
-import loadMetroConfig from '../../tools/loadMetroConfig';
+import {
+  default as loadMetroConfig,
+  MetroConfig,
+} from '../../tools/loadMetroConfig';
 import {logger} from '@react-native-community/cli-tools';
 
 interface RequestOptions {
@@ -51,6 +54,19 @@ async function buildBundle(
     config: args.config,
   });
 
+  return buildBundleWithConfig(args, config, output);
+}
+
+/**
+ * Create a bundle using a pre-loaded Metro config. The config can be
+ * re-used for several bundling calls if multiple platforms are being
+ * bundled.
+ */
+export async function buildBundleWithConfig(
+  args: CommandLineArgs,
+  config: MetroConfig,
+  output: typeof outputBundle = outputBundle,
+) {
   if (config.resolver.platforms.indexOf(args.platform) === -1) {
     logger.error(
       `Invalid platform ${

packages/cli/src/commands/bundle/__tests__/filterPlatformAssetScales-test.ts packages/cli-plugin-metro/src/commands/bundle/__tests__/filterPlatformAssetScales-test.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import {Config} from '@react-native-community/cli-types';
+import type {Config} from '@react-native-community/cli-types';
 import buildBundle from './buildBundle';
 import bundleCommandLineArgs, {CommandLineArgs} from './bundleCommandLineArgs';
 

packages/cli/src/commands/bundle/__tests__/getAssetDestPathAndroid-test.ts packages/cli-plugin-metro/src/commands/bundle/__tests__/getAssetDestPathAndroid-test.ts

@@ -0,0 +1,4 @@
+export {default as bundleCommand} from './bundle';
+export {buildBundleWithConfig} from './buildBundle';
+export type {CommandLineArgs} from './bundleCommandLineArgs';
+export {default as ramBundleCommand} from './ramBundle';

packages/cli/src/commands/bundle/__tests__/getAssetDestPathIOS-test.ts packages/cli-plugin-metro/src/commands/bundle/__tests__/getAssetDestPathIOS-test.ts

@@ -9,7 +9,7 @@
 import outputUnbundle from 'metro/src/shared/output/RamBundle';
 import {withOutput as bundleWithOutput} from './bundle';
 import bundleCommandLineArgs, {CommandLineArgs} from './bundleCommandLineArgs';
-import {Config} from '@react-native-community/cli-types';
+import type {Config} from '@react-native-community/cli-types';
 
 /**
  * Builds the bundle starting to look for dependencies at the given entry path.
@@ -30,3 +30,5 @@ export default {
     default: false,
   }),
 };
+
+export {ramBundle};

packages/cli/src/commands/bundle/assetPathUtils.ts packages/cli-plugin-metro/src/commands/bundle/assetPathUtils.ts

@@ -14,7 +14,7 @@ import filterPlatformAssetScales from './filterPlatformAssetScales';
 import getAssetDestPathAndroid from './getAssetDestPathAndroid';
 import getAssetDestPathIOS from './getAssetDestPathIOS';
 import {logger} from '@react-native-community/cli-tools';
-import {AssetData} from './buildBundle';
+import type {AssetData} from './buildBundle';
 
 interface CopiedFiles {
   [src: string]: string;

packages/cli/src/commands/bundle/buildBundle.ts packages/cli-plugin-metro/src/commands/bundle/buildBundle.ts

@@ -0,0 +1,6 @@
+import {bundleCommand, ramBundleCommand} from './bundle';
+import startCommand from './start';
+
+export default [bundleCommand, ramBundleCommand, startCommand];
+export {buildBundleWithConfig} from './bundle';
+export type {CommandLineArgs} from './bundle';

packages/cli/src/commands/bundle/bundle.ts packages/cli-plugin-metro/src/commands/bundle/bundle.ts

@@ -17,7 +17,7 @@ import {
 import {Config} from '@react-native-community/cli-types';
 
 import loadMetroConfig from '../../tools/loadMetroConfig';
-import releaseChecker from '../../tools/releaseChecker';
+import {releaseChecker} from '@react-native-community/cli-tools';
 import enableWatchMode from './watchMode';
 
 export type Args = {
@@ -128,7 +128,7 @@ function getReporterImpl(customLogReporterPath: string | undefined) {
     // as expected. eg: require('my-package/reporter');
     return require(customLogReporterPath);
   } catch (e) {
-    if (e.code !== 'MODULE_NOT_FOUND') {
+    if ((<any>e).code !== 'MODULE_NOT_FOUND') {
       throw e;
     }
     // If that doesn't work, then we next try relative to the cwd, eg:

packages/cli/src/commands/bundle/bundleCommandLineArgs.ts packages/cli-plugin-metro/src/commands/bundle/bundleCommandLineArgs.ts

@@ -1,6 +1,5 @@
 import readline from 'readline';
-import hookStdout from '../../tools/hookStdout';
-import {logger} from '@react-native-community/cli-tools';
+import {logger, hookStdout} from '@react-native-community/cli-tools';
 
 function printWatchModeInstructions() {
   logger.log(

packages/cli/src/commands/bundle/filterPlatformAssetScales.ts packages/cli-plugin-metro/src/commands/bundle/filterPlatformAssetScales.ts

@@ -0,0 +1,12 @@
+export {
+  Config,
+  ConfigLoadingContext,
+  MetroConfig,
+  getDefaultConfig,
+  default as loadMetroConfig,
+} from './tools/loadMetroConfig';
+export {
+  default as commands,
+  buildBundleWithConfig,
+  CommandLineArgs,
+} from './commands';

packages/cli/src/commands/bundle/getAssetDestPathAndroid.ts packages/cli-plugin-metro/src/commands/bundle/getAssetDestPathAndroid.ts

@@ -8,6 +8,7 @@ describe('getDefaultConfig', () => {
     const config = getDefaultConfig({
       root: '/',
       reactNativePath: '',
+      // @ts-ignore
       platforms: {},
     });
 

packages/cli/src/commands/bundle/getAssetDestPathIOS.ts packages/cli-plugin-metro/src/commands/bundle/getAssetDestPathIOS.ts

@@ -4,7 +4,7 @@
 import path from 'path';
 // @ts-ignore - no typed definition for the package
 import {loadConfig} from 'metro-config';
-import {Config} from '@react-native-community/cli-types';
+import type {Config} from '@react-native-community/cli-types';
 import {reactNativePlatformResolver} from './metroPlatformResolver';
 
 const INTERNAL_CALLSITES_REGEX = new RegExp(
@@ -20,7 +20,9 @@ const INTERNAL_CALLSITES_REGEX = new RegExp(
   ].join('|'),
 );
 
-type ConfigLoadingContext = Pick<
+export type {Config};
+
+export type ConfigLoadingContext = Pick<
   Config,
   'root' | 'reactNativePath' | 'platforms'
 >;
@@ -141,7 +143,7 @@ export interface ConfigOptionsT {
  *
  * This allows the CLI to always overwrite the file settings.
  */
-export default function load(
+export default function loadMetroConfig(
   ctx: ConfigLoadingContext,
   options?: ConfigOptionsT,
 ): Promise<MetroConfig> {

packages/cli-plugin-metro/src/commands/bundle/index.ts

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "build"
+  },
+  "references": [
+    {"path": "../cli-types"},
+    {"path": "../cli-server-api"},
+    {"path": "../tools"},
+  ]
+}

packages/cli/src/commands/bundle/ramBundle.ts packages/cli-plugin-metro/src/commands/bundle/ramBundle.ts

@@ -29,6 +29,7 @@
     "@react-native-community/cli-server-api": "^6.0.0-rc.0",
     "@react-native-community/cli-tools": "^6.0.0-rc.0",
     "@react-native-community/cli-types": "^6.0.0",
+    "@react-native-community/cli-plugin-metro": "^6.0.0",
     "appdirsjs": "^1.2.4",
     "chalk": "^3.0.0",
     "command-exists": "^1.2.8",
@@ -44,12 +45,6 @@
     "joi": "^17.2.1",
     "leven": "^3.1.0",
     "lodash": "^4.17.15",
-    "metro": "^0.66.1",
-    "metro-config": "^0.66.1",
-    "metro-core": "^0.66.1",
-    "metro-react-native-babel-transformer": "^0.66.1",
-    "metro-resolver": "^0.66.1",
-    "metro-runtime": "^0.66.1",
     "minimist": "^1.2.0",
     "mkdirp": "^0.5.1",
     "node-stream-zip": "^1.9.1",

packages/cli/src/commands/bundle/saveAssets.ts packages/cli-plugin-metro/src/commands/bundle/saveAssets.ts

@@ -1,7 +1,5 @@
 import {Command, DetachedCommand} from '@react-native-community/cli-types';
-import start from './start/start';
-import bundle from './bundle/bundle';
-import ramBundle from './bundle/ramBundle';
+import {commands as metroCommands} from '@react-native-community/cli-plugin-metro';
 import link from './link/link';
 import unlink from './link/unlink';
 import install from './install/install';
@@ -14,9 +12,7 @@ import doctor from './doctor';
 import profileHermes from '@react-native-community/cli-hermes';
 
 export const projectCommands = [
-  start,
-  bundle,
-  ramBundle,
+  ...metroCommands,
   link,
   unlink,
   install,

packages/cli-plugin-metro/src/commands/index.ts

@@ -7,9 +7,8 @@
 
 // @ts-ignore untyped
 import getEnvironmentInfo from '../../tools/envinfo';
-import {logger} from '@react-native-community/cli-tools';
+import {logger, releaseChecker} from '@react-native-community/cli-tools';
 import {Config} from '@react-native-community/cli-types';
-import releaseChecker from '../../tools/releaseChecker';
 
 const info = async function getInfo(_argv: Array<string>, ctx: Config) {
   try {

packages/cli/src/commands/start/start.ts packages/cli-plugin-metro/src/commands/start/index.ts

@@ -5,8 +5,6 @@ import {
   getTempDirectory,
 } from '../../../../../../jest/helpers';
 
-jest.mock('../resolveNodeModuleDir');
-
 beforeEach(async () => {
   await cleanup(DIR);
   jest.resetModules();

packages/cli/src/commands/start/runServer.ts packages/cli-plugin-metro/src/commands/start/runServer.ts

@@ -1,15 +1,2 @@
-import path from 'path';
-
-/**
- * Finds a path inside `node_modules`
- */
-export default function resolveNodeModuleDir(
-  root: string,
-  packageName: string,
-): string {
-  return path.dirname(
-    require.resolve(path.join(packageName, 'package.json'), {
-      paths: [root],
-    }),
-  );
-}
+import {resolveNodeModuleDir} from '@react-native-community/cli-tools';
+export default resolveNodeModuleDir;

packages/cli/src/commands/start/watchMode.ts packages/cli-plugin-metro/src/commands/start/watchMode.ts

@@ -9,6 +9,7 @@
     {"path": "../cli-types"},
     {"path": "../debugger-ui"},
     {"path": "../cli-server-api"},
-    {"path": "../cli-hermes"}
+    {"path": "../cli-hermes"},
+    {"path": "../cli-plugin-metro"},
   ]
 }

packages/cli-plugin-metro/src/index.ts

@@ -7,12 +7,15 @@
     "access": "public"
   },
   "dependencies": {
+    "appdirsjs": "^1.2.4",
     "chalk": "^3.0.0",
     "lodash": "^4.17.15",
+    "mkdirp": "^0.5.1",
     "mime": "^2.4.1",
     "node-fetch": "^2.6.0",
     "open": "^6.2.0",
-    "shell-quote": "1.6.1"
+    "shell-quote": "1.6.1",
+    "semver": "^6.3.0"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.149",

packages/cli/src/tools/__tests__/loadMetroConfig-test.ts packages/cli-plugin-metro/src/tools/__tests__/loadMetroConfig-test.ts

@@ -6,5 +6,8 @@ export {fetch, fetchToTemp} from './fetch';
 export {default as launchDefaultBrowser} from './launchDefaultBrowser';
 export {default as launchDebugger} from './launchDebugger';
 export {default as launchEditor} from './launchEditor';
+export {default as releaseChecker} from './releaseChecker';
+export {default as resolveNodeModuleDir} from './resolveNodeModuleDir';
+export {default as hookStdout} from './hookStdout';
 
 export * from './errors';

packages/cli/src/tools/loadMetroConfig.ts packages/cli-plugin-metro/src/tools/loadMetroConfig.ts

@@ -1,6 +1,7 @@
 import semver from 'semver';
 import cacheManager from './releaseCacheManager';
-import {fetch, logger} from '@react-native-community/cli-tools';
+import {fetch} from '../fetch';
+import logger from '../logger';
 
 export type Release = {
   version: string;

packages/cli/src/tools/metroPlatformResolver.ts packages/cli-plugin-metro/src/tools/metroPlatformResolver.ts

@@ -1,7 +1,7 @@
 import path from 'path';
-import {logger} from '@react-native-community/cli-tools';
+import logger from '../logger';
 // @ts-ignore - JS file
-import resolveNodeModuleDir from '../config/resolveNodeModuleDir';
+import resolveNodeModuleDir from '../resolveNodeModuleDir';
 import getLatestRelease from './getLatestRelease';
 import printNewRelease from './printNewRelease';
 

packages/cli-plugin-metro/tsconfig.json

@@ -1,5 +1,5 @@
 import chalk from 'chalk';
-import {logger} from '@react-native-community/cli-tools';
+import logger from '../logger';
 import {Release} from './getLatestRelease';
 import cacheManager from './releaseCacheManager';
 

packages/cli/package.json

@@ -3,7 +3,7 @@ import fs from 'fs';
 import os from 'os';
 import appDirs from 'appdirsjs';
 import mkdirp from 'mkdirp';
-import {logger} from '@react-native-community/cli-tools';
+import logger from '../logger';
 
 type ReleaseCacheKey = 'eTag' | 'lastChecked' | 'latestVersion';
 type Cache = {[key in ReleaseCacheKey]?: string};

packages/cli/src/commands/index.ts

@@ -0,0 +1,15 @@
+import path from 'path';
+
+/**
+ * Finds a path inside `node_modules`
+ */
+export default function resolveNodeModuleDir(
+  root: string,
+  packageName: string,
+): string {
+  return path.dirname(
+    require.resolve(path.join(packageName, 'package.json'), {
+      paths: [root],
+    }),
+  );
+}

packages/cli/src/commands/info/info.ts

@@ -10167,6 +10167,11 @@ readdirp@~3.3.0:
   dependencies:
     picomatch "^2.0.7"
 
+readline@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/readline/-/readline-1.3.0.tgz#c580d77ef2cfc8752b132498060dc9793a7ac01c"
+  integrity sha1-xYDXfvLPyHUrEySYBg3JeTp6wBw=
+
 realpath-native@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/realpath-native/-/realpath-native-2.0.0.tgz#7377ac429b6e1fd599dc38d08ed942d0d7beb866"