Merge pull request #315 from facebook/main

merging upstream master

Author: joeycozza

.eslintrc.json

@@ -4,7 +4,8 @@
     "browser": true,
     "commonjs": true,
     "node": true,
-    "es6": true
+    "es6": true,
+    "jest": true
   },
   "parserOptions": {
     "ecmaVersion": 2018

.github/CODEOWNERS

@@ -1,2 +1,2 @@
-packages/ @ianschmitz @iansu @mrmckeb @petetnt
-docusaurus/ @ianschmitz @iansu @mrmckeb
+packages/ @iansu @mrmckeb
+docusaurus/ @iansu @mrmckeb

.github/ISSUE_TEMPLATE/bug_report.md

@@ -32,7 +32,7 @@ labels: 'issue: bug report, needs triage'
     * yarn.lock
 
   Then you need to decide which package manager you prefer to use.
-  We support both npm (https://npmjs.com) and yarn (http://yarnpkg.com/).
+  We support both npm (https://npmjs.com) and yarn (https://yarnpkg.com/).
   However, **they can't be used together in one project** so you need to pick one.
 
   If you decided to use npm, run this in your project directory:

.github/workflows/build.yml

@@ -6,8 +6,14 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+          cache: 'npm'
+      - name: Install npm@8
+        run: npm i -g npm@8
       - name: Install
-        run: yarn --no-progress --non-interactive --no-lockfile
+        run: npm ci --prefer-offline
       - name: Build
-        run: yarn build
+        run: npm run build

.github/workflows/integration.yml

@@ -0,0 +1,32 @@
+name: Integration Tests
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  job:
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: ['ubuntu-latest', 'macos-latest', 'windows-latest']
+        node: ['14', '16']
+    steps:
+      - uses: actions/checkout@v2
+      - name: Setup node
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node }}
+          cache: 'npm'
+      - name: Install npm@8
+        run: npm i -g npm@8
+      - name: Install yarn
+        run: npm i -g yarn
+      - name: Install packages
+        run: npm ci --prefer-offline
+      - name: Run integration tests
+        run: npm run test:integration

.github/workflows/lint.yml

@@ -6,8 +6,14 @@ jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+          cache: 'npm'
+      - name: Install npm@8
+        run: npm i -g npm@8
       - name: Install
-        run: yarn --no-progress --non-interactive --no-lockfile
+        run: npm ci --prefer-offline
       - name: Alex
-        run: yarn alex
+        run: npm run alex

.gitignore

@@ -12,4 +12,3 @@ yarn-debug.log*
 yarn-error.log*
 /.changelog
 .npm/
-yarn.lock

CHANGELOG-0.x.md

@@ -1365,7 +1365,7 @@ or
 yarn add --dev --exact [email protected]
 ```
 
-If you previously had issues with an `Invalid Host Header` error, [follow these new instructions](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#invalid-host-header-errors-after-configuring-proxy) to fix it.
+If you previously had issues with an `Invalid Host Header` error, [follow these new instructions](https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/template/README.md#invalid-host-header-errors-after-configuring-proxy) to fix it.
 
 ## 1.0.1 (May 19, 2017)
 
@@ -1547,7 +1547,7 @@ You can automatically convert your project to fix them by running the [correspon
 
 #### How do I make my tests work with Jest 20?
 
-Please refer to the [Jest 19](https://facebook.github.io/jest/blog/2017/02/21/jest-19-immersive-watch-mode-test-platform-improvements.html#breaking-changes) and [Jest 20](http://facebook.github.io/jest/blog/2017/05/06/jest-20-delightful-testing-multi-project-runner.html#breaking-changes) breaking changes for migration instructions.
+Please refer to the [Jest 19](https://facebook.github.io/jest/blog/2017/02/21/jest-19-immersive-watch-mode-test-platform-improvements.html#breaking-changes) and [Jest 20](https://facebook.github.io/jest/blog/2017/05/06/jest-20-delightful-testing-multi-project-runner.html#breaking-changes) breaking changes for migration instructions.
 
 If you use snapshots, you will likely need to update them once because of the change in format.
 
@@ -1572,7 +1572,7 @@ If you still have the problem please file an issue.
 
 Unhandled Promise rejections will now crash tests. You can fix them by explicitly catching the errors you don???t care about.
 
-#### How to turn my app into a [Progressive Web App](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app)?
+#### How to turn my app into a [Progressive Web App](https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/template/README.md#making-a-progressive-web-app)?
 
 After the regular update procedure above, add these line to `<head>` in `public/index.html`:
 
@@ -1588,9 +1588,7 @@ After the regular update procedure above, add these line to `<head>` in `public/
 Add `<noscript>` to `<body>` in `public/index.html`:
 
 ```html
-<noscript>
-  You need to enable JavaScript to run this app.
-</noscript>
+<noscript> You need to enable JavaScript to run this app. </noscript>
 ```
 
 Then create a file called `public/manifest.json` that looks like this:

CHANGELOG-1.x.md

@@ -823,7 +823,7 @@ import 'react-app-polyfill/ie9'; // For IE 9-11 support
 import 'react-app-polyfill/ie11'; // For IE 11 support
 ```
 
-You can read more about [these polyfills here](https://github.com/facebook/create-react-app/tree/master/packages/react-app-polyfill).
+You can read more about [these polyfills here](https://github.com/facebook/create-react-app/tree/main/packages/react-app-polyfill).
 
 ### Dynamic `import()` of a CommonJS module now has a `.default` property
 
@@ -845,7 +845,7 @@ We previously allowed code splitting with a webpack-specific directive, `require
 **Single Module**
 
 ```js
-require.ensure(['module-a'], function() {
+require.ensure(['module-a'], function () {
   var a = require('module-a');
   // ...
 });
@@ -859,7 +859,7 @@ import('module-a').then(a => {
 **Multiple Module**
 
 ```js
-require.ensure(['module-a', 'module-b'], function() {
+require.ensure(['module-a', 'module-b'], function () {
   var a = require('module-a');
   var b = require('module-b');
   // ...
@@ -913,7 +913,7 @@ Next, create `src/setupProxy.js` and place the following contents in it:
 ```js
 const proxy = require('http-proxy-middleware');
 
-module.exports = function(app) {
+module.exports = function (app) {
   // ...
 };
 ```
@@ -936,7 +936,7 @@ Place entries into `src/setupProxy.js` like so:
 ```js
 const proxy = require('http-proxy-middleware');
 
-module.exports = function(app) {
+module.exports = function (app) {
   app.use(proxy('/api', { target: 'http://localhost:5000/' }));
   app.use(proxy('/*.svg', { target: 'http://localhost:5000/' }));
 };

CHANGELOG-2.x.md

@@ -330,7 +330,7 @@ v3.3.0 is a minor release that adds new features, including custom templates and
 
 You can now create a new app using custom templates.
 
-We've published our existing templates as [`cra-template`](https://github.com/facebook/create-react-app/tree/master/packages/cra-template) and [`cra-template-typescript`](https://github.com/facebook/create-react-app/tree/master/packages/cra-template-typescript), but we expect to see many great templates from the community over the coming weeks.
+We've published our existing templates as [`cra-template`](https://github.com/facebook/create-react-app/tree/main/packages/cra-template) and [`cra-template-typescript`](https://github.com/facebook/create-react-app/tree/main/packages/cra-template-typescript), but we expect to see many great templates from the community over the coming weeks.
 
 The below command shows how you can create a new app with `cra-template-typescript`.
 

CHANGELOG-3.x.md

@@ -48,66 +48,74 @@ Please also provide a **test plan**, i.e. specify how you verified that your add
 ## Folder Structure of Create React App
 
 `create-react-app` is a monorepo, meaning it is divided into independent sub-packages.<br>
-These packages can be found in the [`packages/`](https://github.com/facebook/create-react-app/tree/master/packages) directory.
+These packages can be found in the [`packages/`](https://github.com/facebook/create-react-app/tree/main/packages) directory.
 
 ### Overview of directory structure
 
 ```
 packages/
+  babel-plugin-named-asset-import/
   babel-preset-react-app/
+  confusing-browser-globals/
+  cra-template/
+  cra-template-typescript/
   create-react-app/
   eslint-config-react-app/
+  react-app-polyfill/
   react-dev-utils/
+  react-error-overlay/
   react-scripts/
 ```
 
 ### Package Descriptions
 
-#### [babel-preset-react-app](https://github.com/facebook/create-react-app/tree/master/packages/babel-preset-react-app)
+#### [babel-preset-react-app](https://github.com/facebook/create-react-app/tree/main/packages/babel-preset-react-app)
 
 This package is a babel preset intended to be used with `react-scripts`.<br>
 It targets platforms that React is designed to support (IE 11+) and enables experimental features used heavily at Facebook.<br>
 This package is enabled by default for all `create-react-app` scaffolded applications.
 
-#### [create-react-app](https://github.com/facebook/create-react-app/tree/master/packages/create-react-app)
+#### [create-react-app](https://github.com/facebook/create-react-app/tree/main/packages/create-react-app)
 
 The global CLI command code can be found in this directory, and shouldn't often be changed. It should run on Node 0.10+.
 
-#### [eslint-config-react-app](https://github.com/facebook/create-react-app/tree/master/packages/eslint-config-react-app)
+#### [eslint-config-react-app](https://github.com/facebook/create-react-app/tree/main/packages/eslint-config-react-app)
 
 This package contains a conservative set of rules focused on making errors apparent and enforces no style rules.<br>
 This package is enabled by default for all `create-react-app` scaffolded applications.
 
-#### [react-dev-utils](https://github.com/facebook/create-react-app/tree/master/packages/react-dev-utils)
+#### [react-dev-utils](https://github.com/facebook/create-react-app/tree/main/packages/react-dev-utils)
 
 This package contains utilities used for `react-scripts` and sibling packages.<br>
 Its main purpose is to conceal code which the user shouldn't be burdened with upon ejecting.
 
-#### [react-scripts](https://github.com/facebook/create-react-app/tree/master/packages/react-scripts)
+#### [react-scripts](https://github.com/facebook/create-react-app/tree/main/packages/react-scripts)
 
 This package is the heart of the project, which contains the scripts for setting up the development server, building production builds, configuring all software used, etc.<br>
 All functionality must be retained (and configuration given to the user) if they choose to eject.
 
 ## Setting Up a Local Copy
 
+You will need `npm@7` and `yarn@1` in order to bootstrap and test a local copy of this repo.
+
 1. Clone the repo with `git clone https://github.com/facebook/create-react-app`
 
-2. Run `yarn` in the root `create-react-app` folder.
+2. Run `npm install` in the root `create-react-app` folder.
 
-Once it is done, you can modify any file locally and run `yarn start`, `yarn test` or `yarn build` like you can in a generated project. It will serve the application from the files located in `packages/cra-template/template`.
+Once it is done, you can modify any file locally and run `npm start`, `npm test` or `npm run build` like you can in a generated project. It will serve the application from the files located in `packages/cra-template/template`.
 
 If you want to try out the end-to-end flow with the global CLI, you can do this too:
 
 ```sh
-yarn create-react-app my-app
+npx create-react-app my-app
 cd my-app
 ```
 
-and then run `yarn start` or `yarn build`.
+and then run `npm start` or `npm run build`.
 
 ## Contributing to E2E (end to end) tests
 
-**TL;DR** use the command `yarn e2e:docker` to run unit and e2e tests.
+**TL;DR** use the command `npm run e2e:docker` to run unit and e2e tests.
 
 More detailed information are in the dedicated [README](/test/README.md).
 
@@ -143,11 +151,11 @@ By default git would use `CRLF` line endings which would cause the scripts to fa
 2. Close the milestone and create a new one for the next release.
 3. In most releases, only `react-scripts` needs to be released. If you don’t have any changes to the `packages/create-react-app` folder, you don’t need to bump its version or publish it (the publish script will publish only changed packages).
 4. Note that files in `packages/create-react-app` should be modified with extreme caution. Since it’s a global CLI, any version of `create-react-app` (global CLI) including very old ones should work with the latest version of `react-scripts`.
-5. Run `yarn compile:lockfile`. The command will generate an updated lockfile in `packages/create-react-app` that should be committed.
+5. Pull the latest changes from GitHub, run `npm ci`.
 6. Create a change log entry for the release:
 
 - You'll need an [access token for the GitHub API](https://help.github.com/articles/creating-an-access-token-for-command-line-use/). Save it to this environment variable: `export GITHUB_AUTH="..."`
-- Run `yarn changelog`. The command will find all the labeled pull requests merged since the last release and group them by the label and affected packages, and create a change log entry with all the changes and links to PRs and their authors. Copy and paste it to `CHANGELOG.md`.
+- Run `npm run changelog`. The command will find all the labeled pull requests merged since the last release and group them by the label and affected packages, and create a change log entry with all the changes and links to PRs and their authors. Copy and paste it to `CHANGELOG.md`.
 - Add a four-space indented paragraph after each non-trivial list item, explaining what changed and why. For each breaking change also write who it affects and instructions for migrating existing code.
 - Maybe add some newlines here and there. Preview the result on GitHub to get a feel for it. Changelog generator output is a bit too terse for my taste, so try to make it visually pleasing and well grouped.
 
@@ -161,9 +169,10 @@ Make sure to test the released version! If you want to be extra careful, you can
 ## Releasing the Docs
 
 1. Go to the `docusaurus/website` directory
-2. Run `yarn build`
-3. You'll need an [access token for the GitHub API](https://help.github.com/articles/creating-an-access-token-for-command-line-use/). Save it to this environment variable: `export GITHUB_AUTH="..."`
-4. Run `GIT_USER=<GITHUB_USERNAME> CURRENT_BRANCH=master USE_SSH=true yarn deploy`
+2. Run `npm ci`
+3. Run `npm run build`
+4. You'll need an [access token for the GitHub API](https://help.github.com/articles/creating-an-access-token-for-command-line-use/). Save it to this environment variable: `export GITHUB_AUTH="..."`
+5. Run `GIT_USER=<GITHUB_USERNAME> CURRENT_BRANCH=main USE_SSH=true npm run deploy`
 
 ---
 

CONTRIBUTING.md

@@ -1,4 +1,4 @@
-# Create React App [![Build Status](https://dev.azure.com/facebook/create-react-app/_apis/build/status/facebook.create-react-app?branchName=master)](https://dev.azure.com/facebook/create-react-app/_build/latest?definitionId=1&branchName=master) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-green.svg)](https://github.com/facebook/create-react-app/blob/master/CONTRIBUTING.md)
+# Create React App [![Build Status](https://dev.azure.com/facebook/create-react-app/_apis/build/status/facebook.create-react-app?branchName=main)](https://dev.azure.com/facebook/create-react-app/_build/latest?definitionId=1&branchName=main) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-green.svg)](https://github.com/facebook/create-react-app/blob/main/CONTRIBUTING.md)
 
 <img alt="Logo" align="right" src="https://create-react-app.dev/img/logo.svg" width="20%" />
 
@@ -39,7 +39,7 @@ Create a project, and you’re good to go.
 
 ## Creating an App
 
-**You’ll need to have Node 10.16.0 or later version on your local development machine** (but it’s not required on the server). We recommend using the latest LTS version. You can use [nvm](https://github.com/creationix/nvm#installation) (macOS/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to switch Node versions between different projects.
+**You’ll need to have Node 14.0.0 or later version on your local development machine** (but it’s not required on the server). We recommend using the latest LTS version. You can use [nvm](https://github.com/creationix/nvm#installation) (macOS/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to switch Node versions between different projects.
 
 To create a new app, you may choose one of the following methods:
 
@@ -217,4 +217,4 @@ We are grateful to the authors of existing related projects for their ideas and
 
 ## License
 
-Create React App is open source software [licensed as MIT](https://github.com/facebook/create-react-app/blob/master/LICENSE). The Create React App logo is licensed under a [Creative Commons Attribution 4.0 International license](https://creativecommons.org/licenses/by/4.0/).
+Create React App is open source software [licensed as MIT](https://github.com/facebook/create-react-app/blob/main/LICENSE). The Create React App logo is licensed under a [Creative Commons Attribution 4.0 International license](https://creativecommons.org/licenses/by/4.0/).

README.md

@@ -6,8 +6,8 @@ parameters:
   name: ''
   testScript: ''
   configurations:
-    LinuxNode10: { vmImage: 'ubuntu-16.04', nodeVersion: 10.x }
-    LinuxNode12: { vmImage: 'ubuntu-16.04', nodeVersion: 12.x }
+    LinuxNode14: { vmImage: 'ubuntu-latest', nodeVersion: 14.x }
+    LinuxNode16: { vmImage: 'ubuntu-latest', nodeVersion: 16.x }
 
 jobs:
   - job: ${{ parameters.name }}
@@ -31,8 +31,11 @@ jobs:
           versionSpec: $(nodeVersion)
         displayName: 'Install Node.js'
 
-      - script: yarn --frozen-lockfile
-        displayName: 'Run yarn'
+      - script: npm i -g npm@8
+        displayName: 'Update npm to v8'
+
+      - script: npm ci
+        displayName: 'Run npm ci'
 
       - bash: ${{ parameters.testScript }}
         displayName: 'Run tests'

azure-pipelines-test-job.yml

@@ -3,7 +3,7 @@
 #
 
 trigger:
-  - master
+  - main
 
 variables:
   CI: true
@@ -42,25 +42,25 @@ jobs:
   # ******************************************************************************
   # Kitchensink Eject test suite
   # ******************************************************************************
-  - template: azure-pipelines-test-job.yml
-    parameters:
-      name: KitchensinkEject
-      testScript: tasks/e2e-kitchensink-eject.sh
+  # - template: azure-pipelines-test-job.yml
+  #   parameters:
+  #     name: KitchensinkEject
+  #     testScript: tasks/e2e-kitchensink-eject.sh
 
   # ******************************************************************************
   # Behavior test suite
   # ******************************************************************************
-  - template: azure-pipelines-test-job.yml
-    parameters:
-      name: Behavior
-      testScript: tasks/e2e-behavior.sh
-      configurations:
-        LinuxNode10: { vmImage: 'ubuntu-16.04', nodeVersion: 10.x }
-        LinuxNode12: { vmImage: 'ubuntu-16.04', nodeVersion: 12.x }
-        WindowsNode10: { vmImage: 'windows-2019', nodeVersion: 10.x }
-        WindowsNode12: { vmImage: 'windows-2019', nodeVersion: 12.x }
-        MacNode10: { vmImage: 'macOS-10.15', nodeVersion: 10.x }
-        MacNode12: { vmImage: 'macOS-10.15', nodeVersion: 12.x }
+  # - template: azure-pipelines-test-job.yml
+  #   parameters:
+  #     name: Behavior
+  #     testScript: tasks/e2e-behavior.sh
+  #     configurations:
+  #       LinuxNode14: { vmImage: 'ubuntu-latest', nodeVersion: 14.x }
+  #       LinuxNode16: { vmImage: 'ubuntu-latest', nodeVersion: 16.x }
+  #       WindowsNode14: { vmImage: 'windows-2019', nodeVersion: 14.x }
+  #       WindowsNode16: { vmImage: 'windows-2019', nodeVersion: 16.x }
+  #       MacNode14: { vmImage: 'macOS-10.15', nodeVersion: 14.x }
+  #       MacNode16: { vmImage: 'macOS-10.15', nodeVersion: 16.x }
 
   # ******************************************************************************
   # Old Node test suite