Add support for yarn and lerna monorepos. (facebook#3741)

* Support for multiple source paths via package.json srcPaths entry. Initial support for yarn workspace. Support lerna workspace, fix for when to use template files. Remove support for specifying srcPaths in package.json. Re-enable transpilation caching. * Clean up, use file matching (similar to original) in webpack configs instead of matching function. * Remove package lock files. * Fix for eject. Note: monorepos won't work after eject. Can be fixed easily with JEST 22.0.?+ which has file pattern matches against realpaths. * Filter tests to run only tests in monorepo components included by the app. (Not sure this is desireable, might be cool to be able to easily run all tests in monorepo from one app.) * Fix conditions for when to use template. * Fix eject. * Remove code that is not needed w/ Jest 22. * Include all cra-comp tests in monorepo instead of trying to include only tests that are dependencies of app. (tests can be easily filtered via jest cli if desired, e.g. 'npm test -- myapp comp1') * Pin find-pkg version. * Hopefully fix jest test file matching on windows by removing first slash. * E2E tests for monorepo. * Run monorepo tests in CI. * Fix and test post-eject build. * Fix e2e test. * Fix test suite names in appveyor. * Include individual package dirs as srcPaths instead of top-level monorepo root. Fixes build/start after eject. * Fix running tests after eject. * Clean up test workspace, add some verifcations. * Cleanup. * Try to fix hang when running test on appveyor. * Don't write babel or lint config to package.json when ejecting. * Incorporate review comments. * Simply monorepo pkg finder * Only include monorepo pkgs if app itself is included in monorepo * Check for specific tests in e2e * Fixes for windows. * Fix for kitchensink mocha tests compiling. * Add lerna monorepo test. * Fix lerna bootstrap on windows. * Incorporate more review comments: * remove support for lerna w/o yarn workspace * add react and react-dom as devDeps to comp1 and comp2 * Add monorepo info to user guide.
bradfordlemley · Oct 10, 2018 · b0750fd · b0750fd
1 parent bff8b6c
commit b0750fd
Show file tree

Hide file tree

Showing 33 changed files with 609 additions and 77 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -19,13 +19,15 @@ script:
   - 'if [ $TEST_SUITE = "kitchensink-eject" ]; then tasks/e2e-kitchensink-eject.sh; fi'
   - 'if [ $TEST_SUITE = "old-node" ]; then tasks/e2e-old-node.sh; fi'
   - 'if [ $TEST_SUITE = "behavior" ]; then tasks/e2e-behavior.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=kitchensink-eject
     - TEST_SUITE=behavior
+    - TEST_SUITE=monorepos
 matrix:
   include:
     - os: osx

diff --git a/appveyor.yml b/appveyor.yml
@@ -20,6 +20,8 @@ environment:
       test_suite: 'kitchensink'
     - nodejs_version: 8
       test_suite: 'kitchensink-eject'
+    - nodejs_version: 8
+      test_suite: "monorepos"
 cache:
   - '%APPDATA%\npm-cache -> appveyor.cleanup-cache.txt'
   - '%LOCALAPPDATA%\Yarn\Cache -> appveyor.cleanup-cache.txt'

diff --git a/packages/react-error-overlay/package.json b/packages/react-error-overlay/package.json
@@ -30,14 +30,13 @@
     "lib/index.js"
   ],
   "devDependencies": {
-    "@babel/code-frame": "7.0.0-beta.46",
-    "@babel/core": "7.0.0-beta.46",
-    "@babel/runtime": "7.0.0-beta.46",
-    "anser": "1.4.6",
+    "@babel/code-frame": "7.0.0",
+    "@babel/core": "7.1.0",
+    "anser": "1.4.7",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-eslint": "^8.2.2",
-    "babel-jest": "^22.4.3",
-    "babel-loader": "^8.0.0-beta.0",
+    "babel-eslint": "9.0.0",
+    "babel-jest": "23.6.0",
+    "babel-loader": "8.0.4",
     "@bradfordlemley/babel-preset-react-app": "^5.0.3",
     "chalk": "^2.3.2",
     "chokidar": "^2.0.2",

diff --git a/packages/react-scripts/config/jest/babelTransform.js b/packages/react-scripts/config/jest/babelTransform.js
@@ -1,10 +1,11 @@
-// @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');
@@ -14,4 +15,5 @@ module.exports = babelJest.createTransformer({
   // @remove-on-eject-begin
   babelrc: false,
   configFile: false,
+  // @remove-on-eject-end
 });
diff --git a/packages/react-scripts/config/paths.js b/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/facebook/create-react-app/issues/637
@@ -99,6 +101,8 @@ module.exports = {
   servedPath: getServedPath(resolveApp('package.json')),
 };
 
+let checkForMonorepo = true;
+
 // @remove-on-eject-begin
 const resolveOwn = relativePath => path.resolve(__dirname, '..', relativePath);
 
@@ -124,17 +128,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('.'),
@@ -157,3 +157,40 @@ 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) {
+    // get monorepo config from yarn workspace
+    const pkgPatterns = require(monoPkgPath).workspaces;
+    const pkgPaths = findPkgs(path.dirname(monoPkgPath), pkgPatterns);
+    // only include monorepo pkgs if app itself is included in 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());
+}
diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
@@ -20,9 +20,9 @@ const getCSSModuleLocalIdent = require('@bradfordlemley/react-dev-utils/getCSSMo
 const getClientEnvironment = require('./env');
 const paths = require('./paths');
 const ManifestPlugin = require('webpack-manifest-plugin');
-const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
+const ModuleNotFoundPlugin = require('@bradfordlemley/react-dev-utils/ModuleNotFoundPlugin');
 // @remove-on-eject-begin
-const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier');
+const getCacheIdentifier = require('@bradfordlemley/react-dev-utils/getCacheIdentifier');
 // @remove-on-eject-end
 
 // Webpack uses `publicPath` to determine where the app is being served from.
@@ -146,7 +146,14 @@ module.exports = {
     // https://github.com/facebook/create-react-app/issues/290
     // `web` extension prefixes have been added for better support
     // for React Native Web.
-    extensions: paths.jsExts.concat(['.mjs', '.web.js', '.js', '.json', '.web.jsx', '.jsx']),
+    extensions: paths.jsExts.concat([
+      '.mjs',
+      '.web.js',
+      '.js',
+      '.json',
+      '.web.jsx',
+      '.jsx',
+    ]),
     alias: {
       // Support React Native Web
       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
@@ -186,11 +193,15 @@ module.exports = {
         use: [
           {
             options: {
-              formatter: require.resolve('react-dev-utils/eslintFormatter'),
+              formatter: require.resolve(
+                '@bradfordlemley/react-dev-utils/eslintFormatter'
+              ),
               eslintPath: require.resolve('eslint'),
               // @remove-on-eject-begin
               baseConfig: {
-                extends: [require.resolve('@bradfordlemley/eslint-config-react-app')],
+                extends: [
+                  require.resolve('@bradfordlemley/eslint-config-react-app'),
+                ],
                 settings: { react: { version: '999.999.999' } },
               },
               ignore: false,
@@ -200,7 +211,8 @@ module.exports = {
             loader: require.resolve('eslint-loader'),
           },
         ],
-        include: paths.appSrc,
+        include: paths.srcPaths,
+        exclude: [/[/\\\\]node_modules[/\\\\]/],
       },
       {
         // "oneOf" will traverse all following loaders until one will
@@ -222,7 +234,8 @@ module.exports = {
           // The preset includes JSX, Flow, and some ESnext features.
           {
             test: /\.(js|mjs|jsx)$/,
-            include: paths.appSrc,
+            include: paths.srcPaths,
+            exclude: [/[/\\\\]node_modules[/\\\\]/],
             loader: require.resolve('babel-loader'),
             options: {
               customize: require.resolve(
@@ -231,7 +244,9 @@ module.exports = {
               // @remove-on-eject-begin
               babelrc: false,
               configFile: false,
-              presets: [require.resolve('@bradfordlemley/babel-preset-react-app')],
+              presets: [
+                require.resolve('@bradfordlemley/babel-preset-react-app'),
+              ],
               // Make sure we have a unique cache identifier, erring on the
               // side of caution.
               // We remove this when the user ejects because the default
@@ -246,7 +261,9 @@ module.exports = {
               // @remove-on-eject-end
               plugins: [
                 [
-                  require.resolve('babel-plugin-named-asset-import'),
+                  require.resolve(
+                    '@bradfordlemley/babel-plugin-named-asset-import'
+                  ),
                   {
                     loaderMap: {
                       svg: {
@@ -276,7 +293,9 @@ module.exports = {
               compact: false,
               presets: [
                 [
-                  require.resolve('@bradfordlemley/babel-preset-react-app/dependencies'),
+                  require.resolve(
+                    '@bradfordlemley/babel-preset-react-app/dependencies'
+                  ),
                   { helpers: true },
                 ],
               ],

diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
@@ -24,9 +24,9 @@ const ModuleScopePlugin = require('@bradfordlemley/react-dev-utils/ModuleScopePl
 const getCSSModuleLocalIdent = require('@bradfordlemley/react-dev-utils/getCSSModuleLocalIdent');
 const paths = require('./paths');
 const getClientEnvironment = require('./env');
-const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
+const ModuleNotFoundPlugin = require('@bradfordlemley/react-dev-utils/ModuleNotFoundPlugin');
 // @remove-on-eject-begin
-const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier');
+const getCacheIdentifier = require('@bradfordlemley/react-dev-utils/getCacheIdentifier');
 // @remove-on-eject-end
 
 // Webpack uses `publicPath` to determine where the app is being served from.
@@ -221,7 +221,14 @@ module.exports = {
     // https://github.com/facebook/create-react-app/issues/290
     // `web` extension prefixes have been added for better support
     // for React Native Web.
-    extensions: paths.jsExts.concat(['.mjs', '.web.js', '.js', '.json', '.web.jsx', '.jsx']),
+    extensions: paths.jsExts.concat([
+      '.mjs',
+      '.web.js',
+      '.js',
+      '.json',
+      '.web.jsx',
+      '.jsx',
+    ]),
     alias: {
       // Support React Native Web
       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
@@ -261,13 +268,17 @@ module.exports = {
         use: [
           {
             options: {
-              formatter: require.resolve('@bradfordlemley/react-dev-utils/eslintFormatter'),
+              formatter: require.resolve(
+                '@bradfordlemley/react-dev-utils/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('@bradfordlemley/eslint-config-react-app')],
+                extends: [
+                  require.resolve('@bradfordlemley/eslint-config-react-app'),
+                ],
                 settings: { react: { version: '999.999.999' } },
               },
               ignore: false,
@@ -277,7 +288,8 @@ module.exports = {
             loader: require.resolve('eslint-loader'),
           },
         ],
-        include: paths.appSrc,
+        include: paths.srcPaths,
+        exclude: [/[/\\\\]node_modules[/\\\\]/],
       },
       {
         // "oneOf" will traverse all following loaders until one will
@@ -298,8 +310,8 @@ module.exports = {
           // The preset includes JSX, Flow, and some ESnext features.
           {
             test: /\.(js|mjs|jsx)$/,
-            include: paths.appSrc,
-
+            include: paths.srcPaths,
+            exclude: [/[/\\\\]node_modules[/\\\\]/],
             loader: require.resolve('babel-loader'),
             options: {
               customize: require.resolve(
@@ -308,7 +320,9 @@ module.exports = {
               // @remove-on-eject-begin
               babelrc: false,
               configFile: false,
-              presets: [require.resolve('@bradfordlemley/babel-preset-react-app')],
+              presets: [
+                require.resolve('@bradfordlemley/babel-preset-react-app'),
+              ],
               // Make sure we have a unique cache identifier, erring on the
               // side of caution.
               // We remove this when the user ejects because the default
@@ -323,7 +337,9 @@ module.exports = {
               // @remove-on-eject-end
               plugins: [
                 [
-                  require.resolve('@bradfordlemley/babel-plugin-named-asset-import'),
+                  require.resolve(
+                    '@bradfordlemley/babel-plugin-named-asset-import'
+                  ),
                   {
                     loaderMap: {
                       svg: {
@@ -351,7 +367,9 @@ module.exports = {
               compact: false,
               presets: [
                 [
-                  require.resolve('@bradfordlemley/babel-preset-react-app/dependencies'),
+                  require.resolve(
+                    '@bradfordlemley/babel-preset-react-app/dependencies'
+                  ),
                   { helpers: true },
                 ],
               ],
@@ -479,7 +497,8 @@ module.exports = {
     }),
     // Inlines the webpack runtime script. This script is too small to warrant
     // a network request.
-    shouldInlineRuntimeChunk && new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
+    shouldInlineRuntimeChunk &&
+      new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
     // Makes some environment variables available in index.html.
     // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

diff --git a/packages/react-scripts/fixtures/kitchensink/.babelrc b/packages/react-scripts/fixtures/kitchensink/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["react-app"]
+}
diff --git a/packages/react-scripts/fixtures/monorepos/packages/comp1/index.js b/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;
diff --git a/packages/react-scripts/fixtures/monorepos/packages/comp1/index.test.js b/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);
+});
diff --git a/packages/react-scripts/fixtures/monorepos/packages/comp1/package.json b/packages/react-scripts/fixtures/monorepos/packages/comp1/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "comp1",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "devDependencies": {
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0"
+  }
+}