merge master

Author: kellyrmilligan

.travis.yml

@@ -1,9 +1,5 @@
 ---
-# Use Ubuntu Precise instead of new default Trusty which cause build fail
-# with pre installed yarn v0.17.8
-# https://github.com/facebookincubator/create-react-app/issues/3054
-# TODO: remove after Trusty environment is updated with a lastet version of yarn
-dist: precise
+dist: trusty
 language: node_js
 node_js:
   - 6
@@ -18,18 +14,13 @@ script:
  - 'if [ $TEST_SUITE = "simple" ]; then tasks/e2e-simple.sh; fi'
  - 'if [ $TEST_SUITE = "installs" ]; then tasks/e2e-installs.sh; fi'
  - 'if [ $TEST_SUITE = "kitchensink" ]; then tasks/e2e-kitchensink.sh; fi'
+ - 'if [ $TEST_SUITE = "old-node" ]; then tasks/e2e-old-node.sh; fi'
 env:
-  global:
-    - USE_YARN=no
   matrix:
     - TEST_SUITE=simple
     - TEST_SUITE=installs
     - TEST_SUITE=kitchensink
 matrix:
   include:
     - node_js: 0.10
-      env: TEST_SUITE=simple
-# There's a weird Yarn/Lerna bug related to prerelease versions.
-# TODO: reenable after we ship 1.0.
-#    - node_js: 6
-#      env: USE_YARN=yes TEST_SUITE=simple
+      env: TEST_SUITE=old-node

CONTRIBUTING.md

@@ -96,6 +96,21 @@ and then run `npm start` or `npm run build`.
 
 More detailed information are in the dedicated [README](/packages/react-scripts/fixtures/kitchensink/README.md).
 
+## Tips for contributors using Windows
+
+The scripts in tasks folder and other scripts in `package.json` will not work in Windows out of the box. However, using [Bash on  windows](https://msdn.microsoft.com/en-us/commandline/wsl/about) makes it easier to use those scripts without any workarounds. The steps to do so are detailed below: 
+
+### Install Bash on Ubuntu on Windows
+
+A good step by step guide can be found [here](https://www.howtogeek.com/249966/how-to-install-and-use-the-linux-bash-shell-on-windows-10/)
+
+### Install Node.js and npm
+Even if you have node and npm installed on your windows, it would not be accessible from the bash shell. You would have to install it again. Installing via [`nvm`](https://github.com/creationix/nvm#install-script) is recommended.
+
+### Line endings
+
+By default git would use `CRLF` line endings which would cause the scripts to fail. You can change it for this repo only by setting `autocrlf` to false by running `git config core.autocrlf false`. You can also enable it for all your repos by using the `--global` flag if you wish to do so.
+
 ## Cutting a Release
 
 1. Tag all merged pull requests that go into the release with the relevant milestone. Each merged PR should also be labeled with one of the [labels](https://github.com/facebookincubator/create-react-app/labels) named `tag: ...` to indicate what kind of change it is.

README.md

@@ -3,12 +3,13 @@
   "scripts": {
     "build": "node packages/react-scripts/scripts/build.js",
     "changelog": "lerna-changelog",
-    "create-react-app": "tasks/cra.sh",
+    "create-react-app": "node tasks/cra.js",
     "e2e": "tasks/e2e-simple.sh",
     "e2e:docker": "tasks/local-test.sh",
     "postinstall": "node bootstrap.js && cd packages/react-error-overlay/ && npm run build:prod",
     "publish": "tasks/release.sh",
     "start": "node packages/react-scripts/scripts/start.js",
+    "screencast": "svg-term --cast hItN7sl5yfCPTHxvFg5glhhfp --out screencast.svg --window",
     "test": "node packages/react-scripts/scripts/test.js --env=jsdom",
     "format": "prettier --trailing-comma es5 --single-quote --write 'packages/*/*.js' 'packages/*/!(node_modules)/**/*.js'",
     "precommit": "lint-staged"
@@ -19,7 +20,8 @@
     "lerna": "^2.0.0",
     "lerna-changelog": "^0.6.0",
     "lint-staged": "^3.3.1",
-    "prettier": "1.6.1"
+    "prettier": "1.6.1",
+    "svg-term-cli": "^2.0.3"
   },
   "lint-staged": {
     "*.js": [

package.json

@@ -16,6 +16,12 @@ If you want to use this Babel preset in a project not built with Create React Ap
 
 First, [install Babel](https://babeljs.io/docs/setup/).
 
+Then install babel-preset-react-app.
+
+```sh
+npm install babel-preset-react-app --save-dev
+```
+
 Then create a file named `.babelrc` with following contents in the root folder of your project:
 
   ```js

packages/babel-preset-react-app/README.md

@@ -47,6 +47,7 @@ const tmp = require('tmp');
 const unpack = require('tar-pack').unpack;
 const url = require('url');
 const hyperquest = require('hyperquest');
+const envinfo = require('envinfo');
 
 const packageJson = require('./package.json');
 
@@ -60,6 +61,7 @@ const program = new commander.Command(packageJson.name)
     projectName = name;
   })
   .option('--verbose', 'print additional logs')
+  .option('--info', 'print environment debug info')
   .option(
     '--scripts-version <alternative-package>',
     'use a non-standard version of react-scripts'
@@ -83,6 +85,11 @@ const program = new commander.Command(packageJson.name)
         'https://mysite.com/my-react-scripts-0.8.2.tgz'
       )}`
     );
+    console.log(
+      `      - a .tar.gz archive: ${chalk.green(
+        'https://mysite.com/my-react-scripts-0.8.2.tar.gz'
+      )}`
+    );
     console.log(
       `    It is not needed unless you specifically want to use a fork.`
     );
@@ -100,6 +107,14 @@ const program = new commander.Command(packageJson.name)
   .parse(process.argv);
 
 if (typeof projectName === 'undefined') {
+  if (program.info) {
+    envinfo.print({
+      packages: ['react', 'react-dom', 'react-scripts'],
+      noNativeIDE: true,
+      duplicates: true,
+    });
+    process.exit(0);
+  }
   console.error('Please specify the project directory:');
   console.log(
     `  ${chalk.cyan(program.name())} ${chalk.green('<project-directory>')}`
@@ -268,7 +283,7 @@ function run(
   template,
   useYarn
 ) {
-  const packageToInstall = getInstallPackage(version);
+  const packageToInstall = getInstallPackage(version, originalDirectory);
   const allDependencies = ['react', 'react-dom', packageToInstall];
 
   console.log('Installing packages. This might take a couple of minutes.');
@@ -365,11 +380,16 @@ function run(
     });
 }
 
-function getInstallPackage(version) {
+function getInstallPackage(version, originalDirectory) {
   let packageToInstall = 'react-scripts';
   const validSemver = semver.valid(version);
   if (validSemver) {
     packageToInstall += `@${validSemver}`;
+  } else if (version && version.match(/^file:/)) {
+    packageToInstall = `file:${path.resolve(
+      originalDirectory,
+      version.match(/^file:(.*)?$/)[1]
+    )}`;
   } else if (version) {
     // for tar.gz or alternative paths
     packageToInstall = version;
@@ -417,7 +437,7 @@ function extractStream(stream, dest) {
 
 // Extract package name from tarball url or path.
 function getPackageName(installPackage) {
-  if (installPackage.indexOf('.tgz') > -1) {
+  if (installPackage.match(/^.+\.(tgz|tar\.gz)$/)) {
     return getTemporaryDirectory()
       .then(obj => {
         let stream;
@@ -440,7 +460,7 @@ function getPackageName(installPackage) {
           `Could not extract the package name from the archive: ${err.message}`
         );
         const assumedProjectName = installPackage.match(
-          /^.+\/(.+?)(?:-\d+.+)?\.tgz$/
+          /^.+\/(.+?)(?:-\d+.+)?\.(tgz|tar\.gz)$/
         )[1];
         console.log(
           `Based on the filename, assuming it is "${chalk.cyan(
@@ -459,6 +479,13 @@ function getPackageName(installPackage) {
     return Promise.resolve(
       installPackage.charAt(0) + installPackage.substr(1).split('@')[0]
     );
+  } else if (installPackage.match(/^file:/)) {
+    const installPackagePath = installPackage.match(/^file:(.*)?$/)[1];
+    const installPackageJson = require(path.join(
+      installPackagePath,
+      'package.json'
+    ));
+    return Promise.resolve(installPackageJson.name);
   }
   return Promise.resolve(installPackage);
 }
@@ -595,6 +622,12 @@ function isSafeToCreateProjectIn(root, name) {
     '.hg',
     '.hgignore',
     '.hgcheck',
+    '.npmignore',
+    'mkdocs.yml',
+    'docs',
+    '.travis.yml',
+    '.gitlab-ci.yml',
+    '.gitattributes',
   ];
   console.log();
 
@@ -620,6 +653,21 @@ function isSafeToCreateProjectIn(root, name) {
   return false;
 }
 
+function getProxy() {
+  if (process.env.https_proxy) {
+    return process.env.https_proxy;
+  } else {
+    try {
+      // Trying to read https-proxy from .npmrc
+      let httpsProxy = execSync('npm config get https-proxy')
+        .toString()
+        .trim();
+      return httpsProxy !== 'null' ? httpsProxy : undefined;
+    } catch (e) {
+      return;
+    }
+  }
+}
 function checkThatNpmCanReadCwd() {
   const cwd = process.cwd();
   let childOutput = null;
@@ -690,10 +738,11 @@ function checkIfOnline(useYarn) {
 
   return new Promise(resolve => {
     dns.lookup('registry.yarnpkg.com', err => {
-      if (err != null && process.env.https_proxy) {
+      let proxy;
+      if (err != null && (proxy = getProxy())) {
         // If a proxy is defined, we likely can't resolve external hostnames.
         // Try to resolve the proxy name as an indication of a connection.
-        dns.lookup(url.parse(process.env.https_proxy).hostname, proxyErr => {
+        dns.lookup(url.parse(proxy).hostname, proxyErr => {
           resolve(proxyErr == null);
         });
       } else {

packages/create-react-app/createReactApp.js

@@ -24,6 +24,7 @@
     "chalk": "^1.1.1",
     "commander": "^2.9.0",
     "cross-spawn": "^4.0.0",
+    "envinfo": "^3.8.0",
     "fs-extra": "^1.0.0",
     "hyperquest": "^2.1.2",
     "semver": "^5.0.3",

packages/create-react-app/package.json

@@ -116,7 +116,7 @@ module.exports = {
     'new-parens': 'warn',
     'no-array-constructor': 'warn',
     'no-caller': 'warn',
-    'no-cond-assign': ['warn', 'always'],
+    'no-cond-assign': ['warn', 'except-parens'],
     'no-const-assign': 'warn',
     'no-control-regex': 'warn',
     'no-delete-var': 'warn',

packages/eslint-config-react-app/index.js

@@ -25,21 +25,29 @@ function printFileSizesAfterBuild(
 ) {
   var root = previousSizeMap.root;
   var sizes = previousSizeMap.sizes;
-  var assets = webpackStats
-    .toJson()
-    .assets.filter(asset => /\.(js|css)$/.test(asset.name))
-    .map(asset => {
-      var fileContents = fs.readFileSync(path.join(root, asset.name));
-      var size = gzipSize(fileContents);
-      var previousSize = sizes[removeFileNameHash(root, asset.name)];
-      var difference = getDifferenceLabel(size, previousSize);
-      return {
-        folder: path.join(path.basename(buildFolder), path.dirname(asset.name)),
-        name: path.basename(asset.name),
-        size: size,
-        sizeLabel: filesize(size) + (difference ? ' (' + difference + ')' : ''),
-      };
-    });
+  var assets = (webpackStats.stats || [webpackStats])
+    .map(stats =>
+      stats
+        .toJson()
+        .assets.filter(asset => /\.(js|css)$/.test(asset.name))
+        .map(asset => {
+          var fileContents = fs.readFileSync(path.join(root, asset.name));
+          var size = gzipSize(fileContents);
+          var previousSize = sizes[removeFileNameHash(root, asset.name)];
+          var difference = getDifferenceLabel(size, previousSize);
+          return {
+            folder: path.join(
+              path.basename(buildFolder),
+              path.dirname(asset.name)
+            ),
+            name: path.basename(asset.name),
+            size: size,
+            sizeLabel:
+              filesize(size) + (difference ? ' (' + difference + ')' : ''),
+          };
+        })
+    )
+    .reduce((single, all) => all.concat(single), []);
   assets.sort((a, b) => b.size - a.size);
   var longestSizeLabelLength = Math.max.apply(
     null,

packages/react-dev-utils/FileSizeReporter.js

@@ -317,15 +317,19 @@ function prepareProxy(proxy, appPublicFolder) {
         // For single page apps, we generally want to fallback to /index.html.
         // However we also want to respect `proxy` for API calls.
         // So if `proxy` is specified as a string, we need to decide which fallback to use.
-        // We use a heuristic: if request `accept`s text/html, we pick /index.html.
+        // We use a heuristic: We want to proxy all the requests that are not meant
+        // for static assets and as all the requests for static assets will be using
+        // `GET` method, we can proxy all non-`GET` requests.
+        // For `GET` requests, if request `accept`s text/html, we pick /index.html.
         // Modern browsers include text/html into `accept` header when navigating.
         // However API calls like `fetch()` won’t generally accept text/html.
         // If this heuristic doesn’t work well for you, use a custom `proxy` object.
         context: function(pathname, req) {
           return (
-            mayProxy(pathname) &&
-            req.headers.accept &&
-            req.headers.accept.indexOf('text/html') === -1
+            req.method !== 'GET' ||
+            (mayProxy(pathname) &&
+              req.headers.accept &&
+              req.headers.accept.indexOf('text/html') === -1)
           );
         },
         onProxyReq: proxyReq => {

packages/react-dev-utils/WebpackDevServerUtils.js

@@ -9,7 +9,7 @@
 
 function clearConsole() {
   process.stdout.write(
-    process.platform === 'win32' ? '\x1Bc' : '\x1B[2J\x1B[3J\x1B[H'
+    process.platform === 'win32' ? '\x1B[2J\x1B[0f' : '\x1B[2J\x1B[3J\x1B[H'
   );
 }
 

packages/react-dev-utils/clearConsole.js

@@ -12,7 +12,9 @@ const launchEditorEndpoint = require('./launchEditorEndpoint');
 module.exports = function createLaunchEditorMiddleware(servedPathPathname) {
   return function launchEditorMiddleware(req, res, next) {
     if (req.url.startsWith(`${servedPathPathname}${launchEditorEndpoint}`)) {
-      launchEditor(req.query.fileName, req.query.lineNumber);
+      const lineNumber = parseInt(req.query.lineNumber, 10) || 1;
+      const colNumber = parseInt(req.query.colNumber, 10) || 1;
+      launchEditor(req.query.fileName, lineNumber, colNumber);
       res.end();
     } else {
       next();

packages/react-dev-utils/errorOverlayMiddleware.js

@@ -58,7 +58,9 @@ function getProcessCommand(processId, processDirectory) {
 
 function getDirectoryOfProcessById(processId) {
   return execSync(
-    'lsof -p ' + processId + ' | awk \'$4=="cwd" {print $9}\'',
+    'lsof -p ' +
+      processId +
+      ' | awk \'$4=="cwd" {for (i=9; i<=NF; i++) printf "%s ", $i}\'',
     execOptions
   ).trim();
 }

packages/react-dev-utils/getProcessForPort.js

@@ -8,12 +8,13 @@
 'use strict';
 
 const path = require('path');
+const escape = require('escape-string-regexp');
 
 module.exports = function ignoredFiles(appSrc) {
   return new RegExp(
-    `^(?!${path
-      .normalize(appSrc + '/')
-      .replace(/[\\]+/g, '/')}).+/node_modules/`,
+    `^(?!${escape(
+      path.normalize(appSrc + '/').replace(/[\\]+/g, '/')
+    )}).+/node_modules/`,
     'g'
   );
 };