Require packages to be opted in via glob, facebook#4570

Author: bradfordlemley

packages/react-dev-utils/workspaceUtils.js

@@ -30,23 +30,29 @@ const findPkgs = (rootPath, globPatterns) => {
 };
 
 const findMonorepo = appDir => {
+  const appPkg = JSON.parse(
+    fs.readFileSync(path.resolve(appDir, 'package.json'))
+  );
   const monoPkgPath = findPkg.sync(path.resolve(appDir, '..'));
   const monoRootPath = monoPkgPath && path.dirname(monoPkgPath);
   const monoPkg = monoPkgPath && require(monoPkgPath);
   const patterns = monoPkg && monoPkg.workspaces;
   const isYarnWs = Boolean(patterns);
+  const srcPatterns = appPkg && appPkg.sourceWorkspaces;
   const allPkgs = patterns && findPkgs(monoRootPath, patterns);
+  const allSrcPkgs =
+    srcPatterns && findPkgs(path.dirname(monoPkgPath), srcPatterns);
   const isIncluded = dir => allPkgs && allPkgs.indexOf(dir) !== -1;
   const isAppIncluded = isIncluded(appDir);
-  const pkgs = allPkgs
-    ? allPkgs.filter(f => fs.realpathSync(f) !== appDir)
+  const srcPkgPaths = allSrcPkgs
+    ? allSrcPkgs.filter(f => fs.realpathSync(f) !== appDir)
     : [];
 
   return {
     isAppIncluded,
     isYarnWs,
-    pkgs,
     rootPath: monoRootPath,
+    srcPkgPaths,
   };
 };
 

packages/react-scripts/config/paths.js

@@ -128,7 +128,7 @@ if (checkForMonorepo) {
   // the monorepo as if they are app source
   const mono = findMonorepo(appDirectory);
   if (mono.isAppIncluded) {
-    Array.prototype.push.apply(module.exports.srcPaths, mono.pkgs);
+    Array.prototype.push.apply(module.exports.srcPaths, mono.srcPkgPaths);
     module.exports.isMonorepo = true;
     module.exports.monorepoRoot = mono.rootPath;
   }

packages/react-scripts/fixtures/monorepos/packages/comp1/index.js renamed to packages/react-scripts/fixtures/monorepos/yarn-ws/packages/comp1/index.js

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "comp2": "^1.0.0",
+    "nwbcomp": ">0.0.0", 
     "react": "^16.2.0",
     "react-dom": "^16.2.0"
   },
@@ -28,5 +29,8 @@
       "Firefox ESR",
       "not ie < 11"
     ]
-  }
+  },
+  "sourceWorkspaces": [
+    "packages/comp*"
+  ]
 }

packages/react-scripts/fixtures/monorepos/packages/comp1/index.test.js renamed to packages/react-scripts/fixtures/monorepos/yarn-ws/packages/comp1/index.test.js

@@ -3,6 +3,7 @@ import logo from './logo.svg';
 import './App.css';
 
 import Comp2 from 'comp2';
+import NwbComp from 'nwbcomp';
 
 class App extends Component {
   render() {
@@ -16,6 +17,7 @@ class App extends Component {
           To get started, edit <code>src/App.js</code> and save to reload.
         </p>
         <Comp2 />
+        <NwbComp />
       </div>
     );
   }

packages/react-scripts/fixtures/monorepos/packages/comp1/package.json renamed to packages/react-scripts/fixtures/monorepos/yarn-ws/packages/comp1/package.json

@@ -0,0 +1,5 @@
+/coverage
+/demo/dist
+/node_modules
+/umd
+npm-debug.log*

packages/react-scripts/fixtures/monorepos/packages/comp2/index.js renamed to packages/react-scripts/fixtures/monorepos/yarn-ws/packages/comp2/index.js

@@ -0,0 +1,16 @@
+sudo: false
+
+language: node_js
+node_js:
+  - 8
+
+before_install:
+  - npm install codecov.io coveralls
+
+after_success:
+  - cat ./coverage/lcov.info | ./node_modules/codecov.io/bin/codecov.io.js
+  - cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js
+
+branches:
+  only:
+    - master

packages/react-scripts/fixtures/monorepos/packages/comp2/index.test.js renamed to packages/react-scripts/fixtures/monorepos/yarn-ws/packages/comp2/index.test.js

@@ -0,0 +1,61 @@
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError('Cannot call a class as a function');
+  }
+}
+
+function _possibleConstructorReturn(self, call) {
+  if (!self) {
+    throw new ReferenceError(
+      "this hasn't been initialised - super() hasn't been called"
+    );
+  }
+  return call && (typeof call === 'object' || typeof call === 'function')
+    ? call
+    : self;
+}
+
+function _inherits(subClass, superClass) {
+  if (typeof superClass !== 'function' && superClass !== null) {
+    throw new TypeError(
+      'Super expression must either be null or a function, not ' +
+        typeof superClass
+    );
+  }
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      enumerable: false,
+      writable: true,
+      configurable: true,
+    },
+  });
+  if (superClass)
+    Object.setPrototypeOf
+      ? Object.setPrototypeOf(subClass, superClass)
+      : (subClass.__proto__ = superClass);
+}
+
+import React, { Component } from 'react';
+
+var _default = (function(_Component) {
+  _inherits(_default, _Component);
+
+  function _default() {
+    _classCallCheck(this, _default);
+
+    return _possibleConstructorReturn(this, _Component.apply(this, arguments));
+  }
+
+  _default.prototype.render = function render() {
+    return React.createElement(
+      'div',
+      null,
+      React.createElement('h2', null, 'Welcome to React components')
+    );
+  };
+
+  return _default;
+})(Component);
+
+export { _default as default };

packages/react-scripts/fixtures/monorepos/packages/comp2/package.json renamed to packages/react-scripts/fixtures/monorepos/yarn-ws/packages/comp2/package.json

@@ -0,0 +1,73 @@
+'use strict';
+
+exports.__esModule = true;
+exports.default = undefined;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError('Cannot call a class as a function');
+  }
+}
+
+function _possibleConstructorReturn(self, call) {
+  if (!self) {
+    throw new ReferenceError(
+      "this hasn't been initialised - super() hasn't been called"
+    );
+  }
+  return call && (typeof call === 'object' || typeof call === 'function')
+    ? call
+    : self;
+}
+
+function _inherits(subClass, superClass) {
+  if (typeof superClass !== 'function' && superClass !== null) {
+    throw new TypeError(
+      'Super expression must either be null or a function, not ' +
+        typeof superClass
+    );
+  }
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      enumerable: false,
+      writable: true,
+      configurable: true,
+    },
+  });
+  if (superClass)
+    Object.setPrototypeOf
+      ? Object.setPrototypeOf(subClass, superClass)
+      : (subClass.__proto__ = superClass);
+}
+
+var _default = (function(_Component) {
+  _inherits(_default, _Component);
+
+  function _default() {
+    _classCallCheck(this, _default);
+
+    return _possibleConstructorReturn(this, _Component.apply(this, arguments));
+  }
+
+  _default.prototype.render = function render() {
+    return _react2.default.createElement(
+      'div',
+      null,
+      _react2.default.createElement('h2', null, 'Welcome to React components')
+    );
+  };
+
+  return _default;
+})(_react.Component);
+
+exports.default = _default;
+module.exports = exports['default'];

packages/react-scripts/fixtures/monorepos/packages/cra-app1/.gitignore renamed to packages/react-scripts/fixtures/monorepos/yarn-ws/packages/cra-app1/.gitignore

@@ -0,0 +1,7 @@
+module.exports = {
+  type: 'react-component',
+  npm: {
+    esModules: true,
+    umd: false,
+  },
+};

packages/react-scripts/fixtures/monorepos/packages/cra-app1/package.json renamed to packages/react-scripts/fixtures/monorepos/yarn-ws/packages/cra-app1/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "nwbcomp",
+  "version": "0.1.0",
+  "description": "nwb React component",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "files": [
+    "css",
+    "es",
+    "lib",
+    "umd"
+  ],
+  "scripts": {
+    "build": "nwb build-react-component",
+    "clean": "nwb clean-module && nwb clean-demo",
+    "start": "nwb serve-react-demo",
+    "test": "nwb test-react",
+    "test:coverage": "nwb test-react --coverage",
+    "test:watch": "nwb test-react --server"
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "react": "16.x"
+  },
+  "devDependencies": {
+    "react": "^16.4.0",
+    "react-dom": "^16.4.0"
+  },
+  "author": "",
+  "homepage": "",
+  "license": "MIT",
+  "repository": "",
+  "keywords": [
+    "react-component"
+  ]
+}

packages/react-scripts/fixtures/monorepos/packages/cra-app1/public/favicon.ico renamed to packages/react-scripts/fixtures/monorepos/yarn-ws/packages/cra-app1/public/favicon.ico

@@ -0,0 +1,11 @@
+import React, { Component } from 'react';
+
+export default class extends Component {
+  render() {
+    return (
+      <div>
+        <h2>Welcome to React components</h2>
+      </div>
+    );
+  }
+}

packages/react-scripts/fixtures/monorepos/packages/cra-app1/public/index.html renamed to packages/react-scripts/fixtures/monorepos/yarn-ws/packages/cra-app1/public/index.html

@@ -0,0 +1,5 @@
+{
+  "env": {
+    "mocha": true
+  }
+}

packages/react-scripts/fixtures/monorepos/packages/cra-app1/public/manifest.json renamed to packages/react-scripts/fixtures/monorepos/yarn-ws/packages/cra-app1/public/manifest.json

@@ -0,0 +1,23 @@
+import expect from 'expect';
+import React from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+
+import Component from 'src/';
+
+describe('Component', () => {
+  let node;
+
+  beforeEach(() => {
+    node = document.createElement('div');
+  });
+
+  afterEach(() => {
+    unmountComponentAtNode(node);
+  });
+
+  it('displays a welcome message', () => {
+    render(<Component />, node, () => {
+      expect(node.innerHTML).toContain('Welcome to React components');
+    });
+  });
+});

packages/react-scripts/fixtures/monorepos/packages/cra-app1/src/App.css renamed to packages/react-scripts/fixtures/monorepos/yarn-ws/packages/cra-app1/src/App.css

@@ -1831,14 +1831,30 @@ monorepo/
     "private": true
   app1/
     package.json:
-      "dependencies": ["@myorg/comp1": ">=0.0.0", "react": "^16.2.0"],
-      "devDependencies": ["react-scripts": "2.0.0"]
+      "dependencies": {
+        "@myorg/comp1": ">=0.0.0",
+        "react": "^16.2.0"
+      },
+      "devDependencies": {
+        "react-scripts": "2.0.0"
+      },
+      "sourceWorkspaces" : [
+        "comp*"
+      ]
     src/
       app.js: import comp1 from '@myorg/comp1';
   app2/
     package.json:
-      "dependencies": ["@myorg/comp1": ">=0.0.0", "react": "^16.2.0"],
-      "devDependencies": ["react-scripts": "2.0.0"]
+      "dependencies": {
+        "@myorg/comp1": ">=0.0.0",
+        "react": "^16.2.0"
+      },
+      "devDependencies": {
+        "react-scripts": "2.0.0"
+      },
+      "sourceWorkspaces" : [
+        "comp*"
+      ]
     src/
       app.js: import comp1 from '@myorg/comp1';
   comp1/
@@ -1856,7 +1872,8 @@ monorepo/
 ```
 
 - Monorepo tools work on a package level, the same level as an npm package.
-- The "workspaces" in the top-level package.json is an array of glob patterns specifying where shared packages are located in the monorepo.
+- The "workspaces" entry in the top-level package.json is an array of glob patterns specifying where shared packages are located in the monorepo.
+- The "sourceWorkspaces" entry in an app's package.json is array of glob patterns similar to "workspaces", but specifying which packages in the monorepo should be treated as source.
 - The scoping prefixes, e.g. @myorg/, are not required, but are recommended, allowing you to differentiate your packages from others of the same name. See [scoped packages ](https://docs.npmjs.com/misc/scope) for more info.
 - Using a package in the monorepo is accomplished in the same manner as a published npm package, by specifying the shared package as dependency.
 - In order to pick up the monorepo version of a package, the specified dependency version must semantically match the package version in the monorepo. See [semver](https://docs.npmjs.com/misc/semver) for info on semantic version matching.

packages/react-scripts/fixtures/monorepos/packages/cra-app1/src/App.js renamed to packages/react-scripts/fixtures/monorepos/yarn-ws/packages/cra-app1/src/App.js

@@ -109,7 +109,6 @@ function verifyBuild {
 pushd "$temp_app_path"
 cp -r "$root_path/packages/react-scripts/fixtures/monorepos/yarn-ws" .
 cd "yarn-ws"
-cp -r "$root_path/packages/react-scripts/fixtures/monorepos/packages" .
 yarn
 
 # Test cra-app1