From af339ec343eba172d81df9f26dfaabc77b62e5c2 Mon Sep 17 00:00:00 2001 From: Rico Kahler Date: Fri, 1 Feb 2019 10:49:52 -0500 Subject: [PATCH 01/62] Add '--no-watch' flag for tests (#6285) --- packages/react-scripts/scripts/test.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/react-scripts/scripts/test.js b/packages/react-scripts/scripts/test.js index ac07e4792af..3659e8bc151 100644 --- a/packages/react-scripts/scripts/test.js +++ b/packages/react-scripts/scripts/test.js @@ -54,10 +54,12 @@ function isInMercurialRepository() { } } -// Watch unless on CI, in coverage mode, or explicitly running all tests +// Watch unless on CI, in coverage mode, explicitly adding `--no-watch`, +// or explicitly running all tests if ( !process.env.CI && argv.indexOf('--coverage') === -1 && + argv.indexOf('--no-watch') === -1 && argv.indexOf('--watchAll') === -1 ) { // https://github.com/facebook/create-react-app/issues/5210 @@ -65,6 +67,11 @@ if ( argv.push(hasSourceControl ? '--watch' : '--watchAll'); } +// Jest doesn't have this option so we'll remove it +if (argv.indexOf('--no-watch') !== -1) { + argv = argv.filter(arg => arg !== '--no-watch'); +} + // @remove-on-eject-begin // This is not necessary after eject because we embed config into package.json. const createJestConfig = require('./utils/createJestConfig'); From a78be99b5e64208a303d65101da3b832fcc96a95 Mon Sep 17 00:00:00 2001 From: James George Date: Sun, 3 Feb 2019 20:37:31 +0530 Subject: [PATCH 02/62] Check for multiple project names when initializing (#6080) --- packages/create-react-app/createReactApp.js | 23 ++++++++++++++++----- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/packages/create-react-app/createReactApp.js b/packages/create-react-app/createReactApp.js index ff4beff99a2..356d886556f 100755 --- a/packages/create-react-app/createReactApp.js +++ b/packages/create-react-app/createReactApp.js @@ -143,11 +143,24 @@ if (program.info) { .then(console.log); } -if (typeof projectName === 'undefined') { - console.error('Please specify the project directory:'); - console.log( - ` ${chalk.cyan(program.name())} ${chalk.green('')}` - ); +const hasMultipleProjectNameArgs = + process.argv[3] && !process.argv[3].startsWith('-'); +if (typeof projectName === 'undefined' || hasMultipleProjectNameArgs) { + console.log(); + if (hasMultipleProjectNameArgs) { + console.error( + `You have provided more than one argument for ${chalk.green( + '' + )}.` + ); + console.log(); + console.log('Please specify only one project directory, without spaces.'); + } else { + console.error('Please specify the project directory:'); + console.log( + ` ${chalk.cyan(program.name())} ${chalk.green('')}` + ); + } console.log(); console.log('For example:'); console.log(` ${chalk.cyan(program.name())} ${chalk.green('my-react-app')}`); From dea19fdb30c2e896ed8ac75b68a612b0b92b2406 Mon Sep 17 00:00:00 2001 From: Rico Kahler Date: Mon, 4 Feb 2019 02:21:05 -0500 Subject: [PATCH 03/62] Add `--no-watch` test flag to docs (#6331) --- docusaurus/docs/debugging-tests.md | 3 ++- docusaurus/docs/getting-started.md | 2 +- docusaurus/docs/running-tests.md | 8 +++++--- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/docusaurus/docs/debugging-tests.md b/docusaurus/docs/debugging-tests.md index 93da201a9f6..80ca856cf33 100644 --- a/docusaurus/docs/debugging-tests.md +++ b/docusaurus/docs/debugging-tests.md @@ -54,7 +54,8 @@ Use the following [`launch.json`](https://code.visualstudio.com/docs/editor/debu "args": [ "test", "--runInBand", - "--no-cache" + "--no-cache", + "--no-watch" ], "cwd": "${workspaceRoot}", "protocol": "inspector", diff --git a/docusaurus/docs/getting-started.md b/docusaurus/docs/getting-started.md index a77beb5c1b0..6945b4e6f08 100644 --- a/docusaurus/docs/getting-started.md +++ b/docusaurus/docs/getting-started.md @@ -18,7 +18,7 @@ npm start _([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))_ -Then open [http://localhost:3000/](http://localhost:3000/) to see your app. +Then open [http://localhost:3000/](http://localhost:3000/) to see your app. When you’re ready to deploy to production, create a minified bundle with `npm run build`. diff --git a/docusaurus/docs/running-tests.md b/docusaurus/docs/running-tests.md index 6daaffb73aa..851e0c3a581 100644 --- a/docusaurus/docs/running-tests.md +++ b/docusaurus/docs/running-tests.md @@ -29,12 +29,14 @@ We recommend to put the test files (or `__tests__` folders) next to the code the ## Command Line Interface -When you run `npm test`, Jest will launch in the watch mode. Every time you save a file, it will re-run the tests, just like `npm start` recompiles the code. +When you run `npm test`, Jest will launch in watch mode\*. Every time you save a file, it will re-run the tests, just like `npm start` recompiles the code. The watcher includes an interactive command-line interface with the ability to run all tests, or focus on a search pattern. It is designed this way so that you can keep it open and enjoy fast re-runs. You can learn the commands from the “Watch Usage” note that the watcher prints after every run: ![Jest watch mode](https://jestjs.io/img/blog/15-watch.gif) +> \*Although we recommend running your tests in watch mode during development, you can disable this behavior by passing in the `--no-watch` flag. In most CI environments, this is handled for you (see [On CI servers](#on-ci-servers)). + ## Version Control Integration By default, when you run `npm test`, Jest will only run the tests related to files changed since the last commit. This is an optimization designed to make your tests run fast regardless of how many tests you have. However it assumes that you don’t often commit the code that doesn’t pass the tests. @@ -372,9 +374,9 @@ CI=true npm test CI=true npm run build ``` -The test command will force Jest to run tests once instead of launching the watcher. +The test command will force Jest to run in CI-mode, and tests will only run once instead of launching the watcher. -> If you find yourself doing this often in development, please [file an issue](https://github.com/facebook/create-react-app/issues/new) to tell us about your use case because we want to make watcher the best experience and are open to changing how it works to accommodate more workflows. +For non-CI environments, you can simply pass the `--no-watch` flag to disable test-watching. The build command will check for linter warnings and fail if any are found. From bacb4407488a7730da9d9d8eb22b58b5739a14fb Mon Sep 17 00:00:00 2001 From: Charles Pritchard Date: Mon, 4 Feb 2019 23:38:52 -0800 Subject: [PATCH 04/62] Add empty mock for dns (#6292) --- packages/react-scripts/config/webpack.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index 25cc88ae716..942c22a2cc7 100644 --- a/packages/react-scripts/config/webpack.config.js +++ b/packages/react-scripts/config/webpack.config.js @@ -646,6 +646,7 @@ module.exports = function(webpackEnv) { node: { module: 'empty', dgram: 'empty', + dns: 'mock', fs: 'empty', net: 'empty', tls: 'empty', From 1648ce8106916a3ed9cff5b3e46e9c55621f24c0 Mon Sep 17 00:00:00 2001 From: gottfired Date: Tue, 5 Feb 2019 08:45:57 +0100 Subject: [PATCH 05/62] Fix order of args in tasks/cra test (#6342) --- tasks/cra.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tasks/cra.js b/tasks/cra.js index 82343b1563a..6d873a837ec 100644 --- a/tasks/cra.js +++ b/tasks/cra.js @@ -113,7 +113,7 @@ const args = process.argv.slice(2); // Now run the CRA command const craScriptPath = path.join(packagesDir, 'create-react-app', 'index.js'); cp.execSync( - `node ${craScriptPath} --scripts-version="${scriptsPath}" ${args.join(' ')}`, + `node ${craScriptPath} ${args.join(' ')} --scripts-version="${scriptsPath}"`, { cwd: rootDir, stdio: 'inherit', From aa25c77bbcdbd65186999273964722bd15bcd94b Mon Sep 17 00:00:00 2001 From: Nathan Schneider Date: Wed, 6 Feb 2019 02:56:36 -0500 Subject: [PATCH 06/62] Fix missing article in README (#6346) --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 881ba7f4ad5..75aed91b989 100644 --- a/README.md +++ b/README.md @@ -163,7 +163,7 @@ Create React App is a great fit for: - **Starting new single-page React applications.** - **Creating examples** with React for your libraries and components. -Here are few common cases where you might want to try something else: +Here are a few common cases where you might want to try something else: - If you want to **try React** without hundreds of transitive build tool dependencies, consider [using a single HTML file or an online sandbox instead](https://reactjs.org/docs/try-react.html). From 1deb811c5d91ac6d337d2fd4e4f36c7d8c352ebd Mon Sep 17 00:00:00 2001 From: Chris Self Date: Wed, 6 Feb 2019 22:40:17 -0500 Subject: [PATCH 07/62] Make manifest.json description more generic (#6355) --- packages/react-scripts/template-typescript/public/index.html | 4 ++-- packages/react-scripts/template/public/index.html | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-scripts/template-typescript/public/index.html b/packages/react-scripts/template-typescript/public/index.html index 323182f3920..75980d58e22 100644 --- a/packages/react-scripts/template-typescript/public/index.html +++ b/packages/react-scripts/template-typescript/public/index.html @@ -9,8 +9,8 @@ /> + ```html
You are running this application in development mode. -
+
+ +
``` + + The above form is looking for a variable called `REACT_APP_NOT_SECRET_CODE` from the environment. In order to consume this value, we need to have it defined in the environment. This can be done using two ways: either in your shell or in a `.env` file. Both of these ways are described in the next few sections. Having access to the `NODE_ENV` is also useful for performing actions conditionally: From c54e36d810b9e80745dd0b21900bd3a68d18c120 Mon Sep 17 00:00:00 2001 From: ThePrez Date: Sat, 9 Mar 2019 13:58:03 -0600 Subject: [PATCH 56/62] Update webpack-dev-server to 3.2.1 (#6483) * Upgrade webpack-dev-server to 3.2.1 --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 257f2f7ea20..d33bd46a236 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -67,7 +67,7 @@ "terser-webpack-plugin": "1.2.2", "url-loader": "1.1.2", "webpack": "4.28.3", - "webpack-dev-server": "3.1.14", + "webpack-dev-server": "3.2.1", "webpack-manifest-plugin": "2.0.4", "workbox-webpack-plugin": "3.6.3" }, From bac02873ebbef14977a62a6f096ba03d9d01cf56 Mon Sep 17 00:00:00 2001 From: John Reilly Date: Sun, 10 Mar 2019 16:31:30 +0000 Subject: [PATCH 57/62] Enable click to go to error in console for TypeScript (#6502) * reattempt changes * formatter fixes * fix missing colon in path * revert path tweaking amends as per discussion with @ianschmitz --- packages/react-dev-utils/README.md | 2 +- .../react-dev-utils/formatWebpackMessages.js | 2 +- .../react-dev-utils/typescriptFormatter.js | 69 +++++++++---------- 3 files changed, 35 insertions(+), 38 deletions(-) diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md index 9d43182d05e..d89dc95f667 100644 --- a/packages/react-dev-utils/README.md +++ b/packages/react-dev-utils/README.md @@ -332,7 +332,7 @@ Creates a Webpack compiler instance for WebpackDevServer with built-in helpful m The `args` object accepts a number of properties: - **appName** `string`: The name that will be printed to the terminal. -- **config** `Object`: The webpack configuration options to be provided to the webpack constructor. +- **config** `Object`: The webpack configuration options to be provided to the webpack constructor. - **devSocket** `Object`: Required if `useTypeScript` is `true`. This object should include `errors` and `warnings` which are functions accepting an array of errors or warnings emitted by the type checking. This is useful when running `fork-ts-checker-webpack-plugin` with `async: true` to report errors that are emitted after the webpack build is complete. - **urls** `Object`: To provide the `urls` argument, use `prepareUrls()` described below. - **useYarn** `boolean`: If `true`, yarn instructions will be emitted in the terminal instead of npm. diff --git a/packages/react-dev-utils/formatWebpackMessages.js b/packages/react-dev-utils/formatWebpackMessages.js index 4b0f44acb74..799c92be2c4 100644 --- a/packages/react-dev-utils/formatWebpackMessages.js +++ b/packages/react-dev-utils/formatWebpackMessages.js @@ -16,7 +16,7 @@ function isLikelyASyntaxError(message) { // Cleans up webpack error messages. // eslint-disable-next-line no-unused-vars -function formatMessage(message, isError) { +function formatMessage(message) { let lines = message.split('\n'); // Strip Webpack-added headers off errors/warnings diff --git a/packages/react-dev-utils/typescriptFormatter.js b/packages/react-dev-utils/typescriptFormatter.js index 3a33b37a427..dc2f85d2e3e 100644 --- a/packages/react-dev-utils/typescriptFormatter.js +++ b/packages/react-dev-utils/typescriptFormatter.js @@ -12,48 +12,45 @@ const codeFrame = require('@babel/code-frame').codeFrameColumns; const chalk = require('chalk'); const fs = require('fs'); +const types = { diagnostic: 'TypeScript', lint: 'TSLint' }; + function formatter(message, useColors) { - const hasGetters = typeof message.getFile === 'function'; + const { type, severity, file, line, content, code, character } = + typeof message.getFile === 'function' + ? { + type: message.getType(), + severity: message.getSeverity(), + file: message.getFile(), + line: message.getLine(), + content: message.getContent(), + code: message.getCode(), + character: message.getCharacter(), + } + : message; + const colors = new chalk.constructor({ enabled: useColors }); const messageColor = message.isWarningSeverity() ? colors.yellow : colors.red; - - let source; - - if (hasGetters) { - source = - message.getFile() && - fs.existsSync(message.getFile()) && - fs.readFileSync(message.getFile(), 'utf-8'); - } else { - source = - message.file && - fs.existsSync(message.file) && - fs.readFileSync(message.file, 'utf-8'); - } - - let frame = ''; - - if (source) { - frame = codeFrame( - source, - { start: { line: message.line, column: message.character } }, - { highlightCode: useColors } - ) - .split('\n') - .map(str => ' ' + str) - .join(os.EOL); - } - - const severity = hasGetters ? message.getSeverity() : message.severity; - const types = { diagnostic: 'TypeScript', lint: 'TSLint' }; + const fileAndNumberColor = colors.bold.cyan; + + const source = file && fs.existsSync(file) && fs.readFileSync(file, 'utf-8'); + const frame = source + ? codeFrame( + source, + { start: { line: line, column: character } }, + { highlightCode: useColors } + ) + .split('\n') + .map(str => ' ' + str) + .join(os.EOL) + : ''; return [ - messageColor.bold(`${types[message.type]} ${severity.toLowerCase()}: `) + - (hasGetters ? message.getContent() : message.content) + + messageColor.bold(`${types[type]} ${severity.toLowerCase()} in `) + + fileAndNumberColor(`${file}(${line},${character})`) + + messageColor(':'), + content + ' ' + - messageColor.underline( - (message.type === 'lint' ? 'Rule: ' : 'TS') + message.code - ), + messageColor.underline((type === 'lint' ? 'Rule: ' : 'TS') + code), '', frame, ].join(os.EOL); From 2591590194ce9a5808a32864e5059df7ac1e96d6 Mon Sep 17 00:00:00 2001 From: Aftab Khan Date: Mon, 11 Mar 2019 00:52:19 +0530 Subject: [PATCH 58/62] Update html-webpack-plugin (#6361) --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index d33bd46a236..7ab92a86661 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -46,7 +46,7 @@ "eslint-plugin-react": "7.12.4", "file-loader": "2.0.0", "fs-extra": "7.0.1", - "html-webpack-plugin": "4.0.0-alpha.2", + "html-webpack-plugin": "4.0.0-beta.5", "identity-obj-proxy": "3.0.0", "jest": "23.6.0", "jest-pnp-resolver": "1.0.2", From ed86da9ed37f2f99fca0a7687e84569eea562d12 Mon Sep 17 00:00:00 2001 From: Mike Beaton Date: Mon, 11 Mar 2019 15:47:16 +0000 Subject: [PATCH 59/62] Convert JSON.stringify \n to os.EOL when writing tsconfig.json (#6610) --- packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js b/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js index fa4b5c8716e..cb1e10ef47e 100644 --- a/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js +++ b/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js @@ -18,7 +18,7 @@ const immer = require('react-dev-utils/immer').produce; const globby = require('react-dev-utils/globby').sync; function writeJson(fileName, object) { - fs.writeFileSync(fileName, JSON.stringify(object, null, 2) + os.EOL); + fs.writeFileSync(fileName, JSON.stringify(object, null, 2).replace(/\n/g, os.EOL) + os.EOL); } function verifyNoTypeScript() { From e4fdac2418dbd1b3d51c8f0fecb474caa001f649 Mon Sep 17 00:00:00 2001 From: ZHAO Jinxiang Date: Tue, 12 Mar 2019 00:05:21 +0800 Subject: [PATCH 60/62] Change class components to functional components in templates (#6451) * change class component to function component * Update packages/react-scripts/template/src/App.js Co-Authored-By: xiaoxiangmoe * Update packages/react-scripts/template-typescript/src/App.tsx Co-Authored-By: xiaoxiangmoe --- .../template-typescript/src/App.tsx | 42 +++++++++---------- packages/react-scripts/template/src/App.js | 42 +++++++++---------- 2 files changed, 40 insertions(+), 44 deletions(-) diff --git a/packages/react-scripts/template-typescript/src/App.tsx b/packages/react-scripts/template-typescript/src/App.tsx index ff5a4a660ee..fd339698e56 100644 --- a/packages/react-scripts/template-typescript/src/App.tsx +++ b/packages/react-scripts/template-typescript/src/App.tsx @@ -1,28 +1,26 @@ -import React, { Component } from 'react'; +import * as React from 'react'; import logo from './logo.svg'; import './App.css'; -class App extends Component { - render() { - return ( -
-
- logo -

- Edit src/App.tsx and save to reload. -

- - Learn React - -
-
- ); - } +const App: React.FC = () => { + return ( +
+
+ logo +

+ Edit src/App.tsx and save to reload. +

+ + Learn React + +
+
+ ); } export default App; diff --git a/packages/react-scripts/template/src/App.js b/packages/react-scripts/template/src/App.js index 7e261ca47e6..2b85f25b0fe 100644 --- a/packages/react-scripts/template/src/App.js +++ b/packages/react-scripts/template/src/App.js @@ -1,28 +1,26 @@ -import React, { Component } from 'react'; +import React from 'react'; import logo from './logo.svg'; import './App.css'; -class App extends Component { - render() { - return ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
- ); - } +const App = () => { + return ( +
+
+ logo +

+ Edit src/App.js and save to reload. +

+ + Learn React + +
+
+ ); } export default App; From 1a04b96795eb7cab166be6add36146504a216c1e Mon Sep 17 00:00:00 2001 From: Ian Schmitz Date: Mon, 11 Mar 2019 09:20:00 -0700 Subject: [PATCH 61/62] Type check JSON files (#6615) --- packages/react-scripts/config/webpack.config.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index f6c0e7a237a..9a496ad4535 100644 --- a/packages/react-scripts/config/webpack.config.js +++ b/packages/react-scripts/config/webpack.config.js @@ -623,7 +623,6 @@ module.exports = function(webpackEnv) { tsconfig: paths.appTsConfig, reportFiles: [ '**', - '!**/*.json', '!**/__tests__/**', '!**/?(*.)(spec|test).*', '!**/src/setupProxy.*', From 5b77280dad0ebedb71b89d904a8dbba52baee120 Mon Sep 17 00:00:00 2001 From: Jannis Hell Date: Mon, 11 Mar 2019 20:42:20 +0100 Subject: [PATCH 62/62] Make compiler variable const instead of let (#6621) compiler is not being reassigned, so we can use a const here --- packages/react-scripts/scripts/build.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js index 8cd1ad77ee5..1803e260af2 100644 --- a/packages/react-scripts/scripts/build.js +++ b/packages/react-scripts/scripts/build.js @@ -143,7 +143,7 @@ checkBrowsers(paths.appPath, isInteractive) function build(previousFileSizes) { console.log('Creating an optimized production build...'); - let compiler = webpack(config); + const compiler = webpack(config); return new Promise((resolve, reject) => { compiler.run((err, stats) => { let messages;