Fully embrace yarn and its workspaces (#978)

Given the `yarn.lock` in the root of this repo, tools like Travis and
users are likely to manage dependencies with yarn. However, many of the
`scripts` call out to `npm`, resulting in mixing package managers. The
version of lerna here at the time was also coupled to npm, and it now
supports yarn.

This moves nearly all references from npm to yarn in package.json's `scripts`,
build scripts, READMEs, travis configuration, and lerna configuration.

This enables yarn's workspaces with the `packages/` directory. It also updates
lerna to its latest version which supports yarn and configures it to use workspaces.

Lerna is now only really needed for its bulk versioning and publishing functionality,
so I removed it from the `postinstall` step [(which leaving it in incidentally also
causes it to stall
indefinitely)](lerna/lerna#1001)

This also adds a `.yarnrc` forcing the yarn client to run post-install
scripts for dependencies. The `electron` dependency for the standalone
devtools relies on this, and while it is the default for yarn, more
secure configurations disable it.

Test plan:
  * `yarn lint && yarn typecheck && yarn test`
  * `yarn build:extension && yarn test:chrome`
    * I ran the test for the firefox extension as well but doesn't seem to pick up
      that sites are using react and doesn't activate. This happens on
      the master branch as well.
  * `yarn build:standalone && yarn test:standalone`
  * Let travis run and pass

I'm unsure how to test lerna's publishing functionality. Hopefully
someone can help with that part :)

.travis.yml

@@ -1,13 +1,15 @@
 sudo: false
 install:
-  - npm install
+  - yarn
 language: node_js
 node_js:
   - '8'
 script:
-  - npm run lint
-  - flow check
-  - npm test
+  - yarn run lint
+  - yarn run typecheck
+  - yarn run test
+cache:
+  yarn: true
 env:
   - CXX=g++-4.8
 addons:
@@ -16,4 +18,3 @@ addons:
       - ubuntu-toolchain-r-test
     packages:
       - g++-4.8
-

.yarnrc

@@ -0,0 +1,4 @@
+ignore-scripts false
+
+# Allow dependencies to be added to the root package.json.
+--ignore-workspace-root-check true

CONTRIBUTING.md

@@ -12,11 +12,12 @@ The core team will be monitoring for pull requests.
 *Before* submitting a pull request, please make sure the following is done…
 
 1. Fork the repo and create your branch from `master`.
-2. If you've added code that should be tested, add tests!
-3. If you've changed APIs, update the documentation.
-4. Make sure your code lints (`npm run lint`) - we've done our best to make sure these rules match our internal linting guidelines.
-5. Also make sure your code passes flow check(`flow check`).
-6. If you haven't already, complete the CLA.
+2. Within the repo, run `yarn install`
+3. If you've added code that should be tested, add tests!
+4. If you've changed APIs, update the documentation.
+5. Make sure your code lints (`yarn run lint`) - we've done our best to make sure these rules match our internal linting guidelines.
+6. Also make sure your code passes flow check(`yarn run typecheck`).
+7. If you haven't already, complete the CLA.
 
 ### Contributor License Agreement ("CLA")
 
@@ -53,7 +54,7 @@ Facebook has a [bounty program](https://www.facebook.com/whitehat/) for the safe
 * 80 character line length
 * "Attractive"
 
-Please `npm run lint`.
+Please `yarn run lint`.
 
 ## License
 

lerna.json

@@ -1,7 +1,6 @@
 {
-  "lerna": "2.0.0-beta.36",
-  "packages": [
-    "packages/*"
-  ],
-  "version": "3.0.0"
+  "lerna": "2.8.0",
+  "version": "3.0.0",
+  "npmClient": "yarn",
+  "useWorkspaces": true
 }

package.json

@@ -37,18 +37,21 @@
   },
   "license": "BSD-3-Clause",
   "repository": "facebook/react-devtools",
+  "private": true,
+  "workspaces": [
+    "packages/*"
+  ],
   "scripts": {
-    "build:extension": "npm run build:extension:chrome && npm run build:extension:firefox",
+    "build:extension": "yarn run build:extension:chrome && yarn run build:extension:firefox",
     "build:extension:chrome": "node ./shells/chrome/build",
     "build:extension:firefox": "node ./shells/firefox/build",
-    "build:standalone": "cd packages/react-devtools-core && npm run build",
+    "build:standalone": "cd packages/react-devtools-core && yarn run build",
     "deploy": "cd ./shells/theme-preview && ./build.sh && gh-pages -d .",
     "lint": "eslint .",
-    "postinstall": "lerna bootstrap",
     "test": "jest",
     "test:chrome": "node ./shells/chrome/test",
     "test:firefox": "node ./shells/firefox/test",
-    "test:standalone": "cd packages/react-devtools && npm start",
+    "test:standalone": "cd packages/react-devtools && yarn start",
     "typecheck": "flow check"
   },
   "jest": {
@@ -59,7 +62,7 @@
   "devDependencies": {
     "chrome-launch": "^1.1.4",
     "firefox-profile": "^1.0.2",
-    "lerna": "2.0.0-beta.36",
+    "lerna": "^2.8.0",
     "web-ext": "^1.10.1"
   }
 }

packages/react-devtools-core/package.json

@@ -18,8 +18,8 @@
     "backend:watch": "cross-env NODE_ENV=production ../../node_modules/.bin/webpack --config webpack.backend.js --watch",
     "standalone": "cross-env NODE_ENV=production ../../node_modules/.bin/webpack --config webpack.standalone.js",
     "standalone:watch": "cross-env NODE_ENV=production ../../node_modules/.bin/webpack --config webpack.standalone.js --watch",
-    "build": "npm run backend && npm run standalone",
-    "prepublish": "npm run build"
+    "build": "yarn run backend && yarn run standalone",
+    "prepublish": "yarn run build"
   },
   "author": "Jared Forsyth",
   "license": "BSD-3-Clause",

packages/react-devtools/README.md

@@ -10,6 +10,14 @@ It works both with React DOM and React Native.
 
 Install the `react-devtools` package globally:
 
+with yarn:
+
+```
+yarn global add react-devtools
+```
+
+or with npm:
+
 ```
 npm install -g react-devtools
 ```
@@ -55,6 +63,13 @@ The standalone shell can also be useful with React DOM (for example, to debug ap
 
 Install the `react-devtools` package globally:
 
+with yarn:
+```
+yarn global add react-devtools
+```
+
+or with npm:
+
 ```
 npm install -g react-devtools
 ```
@@ -77,7 +92,7 @@ Finally, add `<script src="http://localhost:8097"></script>` as the very first `
 This will ensure the developer tools are connected.  
 **Don’t forget to remove it before deploying to production!**
 
->Note: if you prefer to avoid global installations, you can add `react-devtools` as a project dependency. With Yarn, you can run `yarn add --dev react-devtools`, and then run `yarn react-devtools` from your project folder to open the DevTools. With npm, you can run `npm install --save-dev react-devtools`, add `"react-devtools": "react-devtools"` to the `scripts` section in your `package.json`, and then run `npm run react-devtools` from your project folder to open the DevTools. 
+>Note: if you prefer to avoid global installations, you can add `react-devtools` as a project dependency. With Yarn, you can run `yarn add --dev react-devtools`, and then run `yarn react-devtools` from your project folder to open the DevTools. With npm, you can run `npm install --save-dev react-devtools`, add `"react-devtools": "react-devtools"` to the `scripts` section in your `package.json`, and then run `npm run react-devtools` from your project folder to open the DevTools.
 
 >If you install `react-devtools` as a project dependency, you may also replace the `<script>` suggested above with a JavaScript import (`import 'react-devtools'`). It is important that this import comes before any other imports in your app (especially before `react-dom`). Make sure to remove the import before deploying to production, as it carries a large DevTools client with it. If you use Webpack and have control over its configuration, you could alternatively add `'react-devtools'` as the first item in the `entry` array of the development-only configuration, and then you wouldn’t need to deal either with `<script>` tags or `import` statements.
 
@@ -88,7 +103,7 @@ If you need to customize host, port, or other settings, see the `react-devtools-
 
 ## Developing
 
-* Run `npm run backend:watch` and `npm run standalone:watch` in `../react-devtools-core`
-* Run `npm start` in this folder
+* Run `yarn run backend:watch` and `yarn run standalone:watch` in `../react-devtools-core`
+* Run `yarn start` in this folder
 * Refresh the app after it has recompiled on change
 * For React Native, copy `react-devtools-core` to its `node_modules` to test your changes

packages/react-devtools/app.html

@@ -98,7 +98,7 @@ <h4>React DOM</h4>
             } catch (err) {
                 alert(
                     err.toString() +
-                    '\n\nDid you run `npm run build` and `npm install` in packages/react-devtools-core?'
+                    '\n\nDid you run `yarn` and `yarn run build` in packages/react-devtools-core?'
                 );
             }
             window.devtools = devtools;

shells/chrome/build.js

@@ -20,7 +20,7 @@ const main = async () => {
   console.log(chalk.green('\nThe Chrome extension has been built!'));
   console.log(chalk.green('You can test this build by running:'));
   console.log(chalk.gray('\n# From the react-devtools root directory:'));
-  console.log('npm run test:chrome');
+  console.log('yarn run test:chrome');
 };
 
 main();