Add support for yarn and lerna monorepos.

.travis.yml

@@ -15,11 +15,13 @@ script:
  - 'if [ $TEST_SUITE = "installs" ]; then tasks/e2e-installs.sh; fi'
  - 'if [ $TEST_SUITE = "kitchensink" ]; then tasks/e2e-kitchensink.sh; fi'
  - 'if [ $TEST_SUITE = "old-node" ]; then tasks/e2e-old-node.sh; fi'
+ - 'if [ $TEST_SUITE = "monorepos" ]; then tasks/e2e-monorepos.sh; fi'
 env:
   matrix:
     - TEST_SUITE=simple
     - TEST_SUITE=installs
     - TEST_SUITE=kitchensink
+    - TEST_SUITE=monorepos
 matrix:
   include:
     - node_js: 0.10

appveyor.yml

@@ -8,13 +8,16 @@ environment:
       test_suite: "installs"
     - nodejs_version: 8
       test_suite: "kitchensink"
+    - nodejs_version: 8
+      test_suite: "monorepos"
     - nodejs_version: 6
       test_suite: "simple"
     - nodejs_version: 6
       test_suite: "installs"
     - nodejs_version: 6
       test_suite: "kitchensink"
-
+    - nodejs_version: 6
+      test_suite: "monorepos"
 cache:
   - node_modules -> appveyor.cleanup-cache.txt
   - packages\react-scripts\node_modules -> appveyor.cleanup-cache.txt

packages/react-scripts/config/jest/babelTransform.js

@@ -1,15 +1,18 @@
-// @remove-file-on-eject
+// @remove-on-eject-begin
 /**
  * Copyright (c) 2014-present, Facebook, Inc.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+// @remove-on-eject-end
 'use strict';
 
 const babelJest = require('babel-jest');
 
 module.exports = babelJest.createTransformer({
   presets: [require.resolve('babel-preset-react-app')],
+  // @remove-on-eject-begin
   babelrc: false,
+  // @remove-on-eject-end
 });

packages/react-scripts/config/paths.js

@@ -11,6 +11,8 @@
 const path = require('path');
 const fs = require('fs');
 const url = require('url');
+const findPkg = require('find-pkg');
+const globby = require('globby');
 
 // Make sure any symlinks in the project folder are resolved:
 // https://github.com/facebookincubator/create-react-app/issues/637
@@ -63,6 +65,8 @@ module.exports = {
   servedPath: getServedPath(resolveApp('package.json')),
 };
 
+let checkForMonorepo = true;
+
 // @remove-on-eject-begin
 const resolveOwn = relativePath => path.resolve(__dirname, '..', relativePath);
 
@@ -86,17 +90,13 @@ module.exports = {
   ownNodeModules: resolveOwn('node_modules'), // This is empty on npm 3
 };
 
-const ownPackageJson = require('../package.json');
-const reactScriptsPath = resolveApp(`node_modules/${ownPackageJson.name}`);
-const reactScriptsLinked =
-  fs.existsSync(reactScriptsPath) &&
-  fs.lstatSync(reactScriptsPath).isSymbolicLink();
-
-// config before publish: we're in ./packages/react-scripts/config/
-if (
-  !reactScriptsLinked &&
-  __dirname.indexOf(path.join('packages', 'react-scripts', 'config')) !== -1
-) {
+// detect if template should be used, ie. when cwd is react-scripts itself
+const useTemplate =
+  appDirectory === fs.realpathSync(path.join(__dirname, '..'));
+
+checkForMonorepo = !useTemplate;
+
+if (useTemplate) {
   module.exports = {
     dotenv: resolveOwn('template/.env'),
     appPath: resolveApp('.'),
@@ -117,3 +117,45 @@ if (
   };
 }
 // @remove-on-eject-end
+
+module.exports.srcPaths = [module.exports.appSrc];
+
+const findPkgs = (rootPath, globPatterns) => {
+  const globOpts = {
+    cwd: rootPath,
+    strict: true,
+    absolute: true,
+  };
+  return globPatterns
+    .reduce(
+      (pkgs, pattern) =>
+        pkgs.concat(globby.sync(path.join(pattern, 'package.json'), globOpts)),
+      []
+    )
+    .map(f => path.dirname(path.normalize(f)));
+};
+
+const getMonorepoPkgPaths = () => {
+  const monoPkgPath = findPkg.sync(path.resolve(appDirectory, '..'));
+  if (monoPkgPath) {
+    // Yarn workspace
+    let pkgPatterns = require(monoPkgPath).workspaces;
+    if (!pkgPatterns) {
+      // lerna
+      const lernaJson = path.resolve(path.dirname(monoPkgPath), 'lerna.json');
+      pkgPatterns = fs.existsSync(lernaJson) && require(lernaJson).packages;
+    }
+    const pkgPaths = findPkgs(path.dirname(monoPkgPath), pkgPatterns);
+    // check if app is part of monorepo
+    if (pkgPaths.indexOf(appDirectory) !== -1) {
+      return pkgPaths.filter(f => fs.realpathSync(f) !== appDirectory);
+    }
+  }
+  return [];
+};
+
+if (checkForMonorepo) {
+  // if app is in a monorepo (lerna or yarn workspace), treat other packages in
+  // the monorepo as if they are app source
+  Array.prototype.push.apply(module.exports.srcPaths, getMonorepoPkgPaths());
+}

packages/react-scripts/config/webpack.config.dev.js

@@ -145,18 +145,19 @@ module.exports = {
             options: {
               formatter: eslintFormatter,
               eslintPath: require.resolve('eslint'),
-              // @remove-on-eject-begin
               baseConfig: {
                 extends: [require.resolve('eslint-config-react-app')],
               },
+              // @remove-on-eject-begin
               ignore: false,
               useEslintrc: false,
               // @remove-on-eject-end
             },
             loader: require.resolve('eslint-loader'),
           },
         ],
-        include: paths.appSrc,
+        include: paths.srcPaths,
+        exclude: [/[/\\\\]node_modules[/\\\\]/],
       },
       {
         // "oneOf" will traverse all following loaders until one will
@@ -178,7 +179,8 @@ module.exports = {
           // The preset includes JSX, Flow, and some ESnext features.
           {
             test: /\.(js|jsx|mjs)$/,
-            include: paths.appSrc,
+            include: paths.srcPaths,
+            exclude: [/[/\\\\]node_modules[/\\\\]/],
             use: [
               // This loader parallelizes code compilation, it is optional but
               // improves compile time on larger projects
@@ -188,8 +190,8 @@ module.exports = {
                 options: {
                   // @remove-on-eject-begin
                   babelrc: false,
-                  presets: [require.resolve('babel-preset-react-app')],
                   // @remove-on-eject-end
+                  presets: [require.resolve('babel-preset-react-app')],
                   // This is a feature of `babel-loader` for webpack (not Babel itself).
                   // It enables caching results in ./node_modules/.cache/babel-loader/
                   // directory for faster rebuilds.
@@ -275,8 +277,8 @@ module.exports = {
                 options: {
                   // @remove-on-eject-begin
                   babelrc: false,
-                  presets: [require.resolve('babel-preset-react-app')],
                   // @remove-on-eject-end
+                  presets: [require.resolve('babel-preset-react-app')],
                   cacheDirectory: true,
                 },
               },

packages/react-scripts/config/webpack.config.prod.js

@@ -152,20 +152,21 @@ module.exports = {
             options: {
               formatter: eslintFormatter,
               eslintPath: require.resolve('eslint'),
-              // @remove-on-eject-begin
               // TODO: consider separate config for production,
               // e.g. to enable no-console and no-debugger only in production.
               baseConfig: {
                 extends: [require.resolve('eslint-config-react-app')],
               },
+              // @remove-on-eject-begin
               ignore: false,
               useEslintrc: false,
               // @remove-on-eject-end
             },
             loader: require.resolve('eslint-loader'),
           },
         ],
-        include: paths.appSrc,
+        include: paths.srcPaths,
+        exclude: [/[/\\\\]node_modules[/\\\\]/],
       },
       {
         // "oneOf" will traverse all following loaders until one will
@@ -186,7 +187,8 @@ module.exports = {
           // The preset includes JSX, Flow, and some ESnext features.
           {
             test: /\.(js|jsx|mjs)$/,
-            include: paths.appSrc,
+            include: paths.srcPaths,
+            exclude: [/[/\\\\]node_modules[/\\\\]/],
             use: [
               // This loader parallelizes code compilation, it is optional but
               // improves compile time on larger projects
@@ -196,8 +198,8 @@ module.exports = {
                 options: {
                   // @remove-on-eject-begin
                   babelrc: false,
-                  presets: [require.resolve('babel-preset-react-app')],
                   // @remove-on-eject-end
+                  presets: [require.resolve('babel-preset-react-app')],
                   compact: true,
                   highlightCode: true,
                 },
@@ -317,8 +319,8 @@ module.exports = {
                 options: {
                   // @remove-on-eject-begin
                   babelrc: false,
-                  presets: [require.resolve('babel-preset-react-app')],
                   // @remove-on-eject-end
+                  presets: [require.resolve('babel-preset-react-app')],
                   cacheDirectory: true,
                 },
               },

packages/react-scripts/fixtures/kitchensink/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["react-app"]
+}

packages/react-scripts/fixtures/monorepos/lerna-ws/bootstrap.js

@@ -0,0 +1,70 @@
+'use strict';
+
+const { execSync } = require('child_process');
+const { resolve } = require('path');
+const { existsSync } = require('fs');
+const { platform } = require('os');
+const crossSpawn = require('cross-spawn');
+
+// function shouldUseYarn() {
+//   try {
+//     execSync('yarnpkg --version', { stdio: 'ignore' });
+//     return true;
+//   } catch (e) {
+//     return false;
+//   }
+// }
+
+function shouldUseNpmConcurrently() {
+  try {
+    const versionString = execSync('npm --version');
+    const m = /^(\d+)[.]/.exec(versionString);
+    // NPM >= 5 support concurrent installs
+    return Number(m[1]) >= 5;
+  } catch (e) {
+    return false;
+  }
+}
+
+// const yarn = shouldUseYarn();
+const yarn = false;
+const windows = platform() === 'win32';
+const lerna = resolve(
+  __dirname,
+  'node_modules',
+  '.bin',
+  windows ? 'lerna.cmd' : 'lerna'
+);
+
+if (!existsSync(lerna)) {
+  if (yarn) {
+    console.log('Cannot find lerna. Please run `yarn --check-files`.');
+  } else {
+    console.log(
+      'Cannot find lerna. Please remove `node_modules` and run `npm install`.'
+    );
+  }
+  process.exit(1);
+}
+
+let args = ['bootstrap'].concat(process.argv.slice(2));
+if (yarn) {
+  // Yarn does not support concurrency
+  crossSpawn.sync(
+    lerna,
+    args.concat(['--npm-client=yarn', '--concurrency=1']),
+    {
+      stdio: 'inherit',
+    }
+  );
+} else {
+  if (
+    // The Windows filesystem does not handle concurrency well
+    windows ||
+    // Only newer npm versions support concurrency
+    !shouldUseNpmConcurrently()
+  ) {
+    args.push('--concurrency=1');
+  }
+  crossSpawn.sync(lerna, args, { stdio: 'inherit' });
+}

packages/react-scripts/fixtures/monorepos/lerna-ws/lerna.json

@@ -0,0 +1,7 @@
+{
+  "lerna": "2.6.0",
+  "packages": [
+    "packages/*"
+  ],
+  "version": "0.0.0"
+}

packages/react-scripts/fixtures/monorepos/lerna-ws/package.json

@@ -0,0 +1,9 @@
+{
+ "devDependencies": {
+  "cross-spawn": "6.0.3",
+  "lerna": "2.6.0"
+ },
+ "scripts": {
+  "postinstall": "node bootstrap.js --hoist \"@(react|react-dom)\""
+ }
+}

packages/react-scripts/fixtures/monorepos/packages/comp1/index.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const Comp1 = () => <div>Comp1</div>;
+
+export default Comp1;

packages/react-scripts/fixtures/monorepos/packages/comp1/index.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Comp1 from '.';
+
+it('renders Comp1 without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<Comp1 />, div);
+});

packages/react-scripts/fixtures/monorepos/packages/comp1/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "comp1",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT"
+}

packages/react-scripts/fixtures/monorepos/packages/comp2/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import Comp1 from 'comp1';
+
+const Comp2 = () => (
+  <div>
+    Comp2, nested Comp1: <Comp1 />
+  </div>
+);
+
+export default Comp2;

packages/react-scripts/fixtures/monorepos/packages/comp2/index.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Comp2 from '.';
+
+it('renders Comp2 without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<Comp2 />, div);
+});

packages/react-scripts/fixtures/monorepos/packages/comp2/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "comp2",
+  "dependencies": {
+    "comp1": "^1.0.0"
+  },
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT"
+}