Merge branch 'master' of github.com:facebookincubator/create-react-app into add-stylelint

Author: karlhorky

CHANGELOG-0.x.md

@@ -65,13 +65,15 @@ my-app/
   public/
     favicon.ico
     index.html
+    manifest.json
   src/
     App.css
     App.js
     App.test.js
     index.css
     index.js
     logo.svg
+    registerServiceWorker.js
 ```
 
 No configuration or complicated folder structures, just the files you need to build your app.<br>
@@ -100,7 +102,9 @@ Builds the app for production to the `build` folder.<br>
 It correctly bundles React in production mode and optimizes the build for the best performance.
 
 The build is minified and the filenames include the hashes.<br>
-Your app is ready to be deployed!
+By default, it also [includes a service worker](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app) so that your app loads from local cache on future visits.
+
+Your app is ready to be deployed.
 
 ## User Guide
 
@@ -116,6 +120,7 @@ The [User Guide](https://github.com/facebookincubator/create-react-app/blob/mast
 - [Changing the Page `<title>`](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#changing-the-page-title)
 - [Installing a Dependency](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#installing-a-dependency)
 - [Importing a Component](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#importing-a-component)
+- [Code Splitting](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting)
 - [Adding a Stylesheet](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet)
 - [Post-Processing CSS](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#post-processing-css)
 - [Adding a CSS Preprocessor (Sass, Less etc.)](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc)
@@ -132,7 +137,6 @@ The [User Guide](https://github.com/facebookincubator/create-react-app/blob/mast
 - [Generating Dynamic `<meta>` Tags on the Server](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server)
 - [Pre-Rendering into Static HTML Files](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#pre-rendering-into-static-html-files)
 - [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests)
-- [Developing Components in Isolation](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#developing-components-in-isolation)
 - [Making a Progressive Web App](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app)
 - [Deployment](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment)
 - [Advanced Configuration](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#advanced-configuration)
@@ -162,6 +166,7 @@ Please refer to the [User Guide](https://github.com/facebookincubator/create-rea
 * Import CSS and image files directly from JavaScript.
 * Autoprefixed CSS, so you don’t need `-webkit` or other prefixes.
 * A `build` script to bundle JS, CSS, and images for production, with sourcemaps.
+* An offline-first [service worker](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers) and a [web app manifest](https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/), meeting all the [Progressive Web App](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app) criteria.
 
 **The feature set is intentionally limited**. It doesn’t support advanced features such as server rendering or CSS modules. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything.
 
@@ -241,7 +246,6 @@ Notable alternatives also include:
 * [aik](https://github.com/d4rkr00t/aik)
 * [react-app](https://github.com/kriasoft/react-app)
 * [dev-toolkit](https://github.com/stoikerty/dev-toolkit)
-* [tarec](https://github.com/geowarin/tarec)
 * [sku](https://github.com/seek-oss/sku)
 
 You can also use module bundlers like [webpack](http://webpack.github.io) and [Browserify](http://browserify.org/) directly.<br>

CHANGELOG.md

@@ -160,7 +160,34 @@ function createApp(name, verbose, version, template) {
   const originalDirectory = process.cwd();
   process.chdir(root);
 
-  run(root, appName, version, verbose, originalDirectory, template);
+  if (!semver.satisfies(process.version, '>=6.0.0')) {
+    console.log(
+      chalk.yellow(
+        `You are using Node ${process.version} so the project will be boostrapped with an old unsupported version of tools.\n\n` +
+          `Please update to Node 6 or higher for a better, fully supported experience.\n`
+      )
+    );
+    // Fall back to latest supported react-scripts on Node 4
+    version = 'react-scripts@0.9.x';
+  }
+
+  const useYarn = shouldUseYarn();
+  if (!useYarn) {
+    const npmInfo = checkNpmVersion();
+    if (!npmInfo.hasMinNpm) {
+      if (npmInfo.npmVersion) {
+        console.log(
+          chalk.yellow(
+            `You are using npm ${npmInfo.npmVersion} so the project will be boostrapped with an old unsupported version of tools.\n\n` +
+              `Please update to npm 3 or higher for a better, fully supported experience.\n`
+          )
+        );
+      }
+      // Fall back to latest supported react-scripts for npm 3
+      version = 'react-scripts@0.9.x';
+    }
+  }
+  run(root, appName, version, verbose, originalDirectory, template, useYarn);
 }
 
 function shouldUseYarn() {
@@ -190,7 +217,6 @@ function install(useYarn, dependencies, verbose, isOnline) {
         console.log();
       }
     } else {
-      checkNpmVersion();
       command = 'npm';
       args = ['install', '--save', '--save-exact'].concat(dependencies);
     }
@@ -212,13 +238,19 @@ function install(useYarn, dependencies, verbose, isOnline) {
   });
 }
 
-function run(root, appName, version, verbose, originalDirectory, template) {
+function run(
+  root,
+  appName,
+  version,
+  verbose,
+  originalDirectory,
+  template,
+  useYarn
+) {
   const packageToInstall = getInstallPackage(version);
   const allDependencies = ['react', 'react-dom', packageToInstall];
 
   console.log('Installing packages. This might take a couple minutes.');
-
-  const useYarn = shouldUseYarn();
   getPackageName(packageToInstall)
     .then(packageName => checkIfOnline(useYarn).then(isOnline => ({
       isOnline: isOnline,
@@ -253,6 +285,15 @@ function run(root, appName, version, verbose, originalDirectory, template) {
       );
       const init = require(scriptsPath);
       init(root, appName, verbose, originalDirectory, template);
+
+      if (version === 'react-scripts@0.9.x') {
+        console.log(
+          chalk.yellow(
+            `\nNote: the project was boostrapped with an old unsupported version of tools.\n` +
+              `Please update to Node >=6 and npm >=3 to get supported tools in new projects.\n`
+          )
+        );
+      }
     })
     .catch(reason => {
       console.log();
@@ -399,22 +440,17 @@ function getPackageName(installPackage) {
 
 function checkNpmVersion() {
   let hasMinNpm = false;
+  let npmVersion = null;
   try {
-    const npmVersion = execSync('npm --version').toString();
+    npmVersion = execSync('npm --version').toString().trim();
     hasMinNpm = semver.gte(npmVersion, '3.0.0');
   } catch (err) {
-    return;
-  }
-
-  if (!hasMinNpm) {
-    console.error(
-      chalk.red(
-        'Create React App requires npm 3 or higher. \n' +
-          'Please update your version of npm.'
-      )
-    );
-    process.exit(1);
+    // ignore
   }
+  return {
+    hasMinNpm: hasMinNpm,
+    npmVersion: npmVersion,
+  };
 }
 
 function checkNodeVersion(packageName) {

README.md

@@ -44,13 +44,13 @@ var currentNodeVersion = process.versions.node;
 var semver = currentNodeVersion.split('.');
 var major = semver[0];
 
-if (major < 6) {
+if (major < 4) {
   console.error(
     chalk.red(
       'You are running Node ' +
         currentNodeVersion +
         '.\n' +
-        'Create React App requires Node 6 or higher. \n' +
+        'Create React App requires Node 4 or higher. \n' +
         'Please update your version of Node.'
     )
   );

packages/create-react-app/createReactApp.js

@@ -1,14 +1,14 @@
 {
   "name": "create-react-app",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "keywords": [
     "react"
   ],
   "description": "Create React apps with no build configuration.",
   "repository": "facebookincubator/create-react-app",
   "license": "BSD-3-Clause",
   "engines": {
-    "node": ">=6"
+    "node": ">=4"
   },
   "bugs": {
     "url": "https://github.com/facebookincubator/create-react-app/issues"

packages/create-react-app/index.js

@@ -195,7 +195,14 @@ module.exports = {
         ignoreRestSiblings: true,
       },
     ],
-    'no-use-before-define': ['warn', 'nofunc'],
+    'no-use-before-define': [
+      'warn',
+      {
+        functions: false,
+        classes: false,
+        variables: false,
+      },
+    ],
     'no-useless-computed-key': 'warn',
     'no-useless-concat': 'warn',
     'no-useless-constructor': 'warn',
@@ -210,7 +217,6 @@ module.exports = {
     ],
     'no-with': 'warn',
     'no-whitespace-before-property': 'warn',
-    'operator-assignment': ['warn', 'always'],
     radix: 'warn',
     'require-yield': 'warn',
     'rest-spread-spacing': ['warn', 'never'],
@@ -225,12 +231,12 @@ module.exports = {
       // {
       //   object: 'require',
       //   property: 'ensure',
-      //   message: 'Please use import() instead. More info: https://webpack.js.org/guides/code-splitting-import/#dynamic-import',
+      //   message: 'Please use import() instead. More info: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting',
       // },
       {
         object: 'System',
         property: 'import',
-        message: 'Please use import() instead. More info: https://webpack.js.org/guides/code-splitting-import/#dynamic-import',
+        message: 'Please use import() instead. More info: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting',
       },
     ],
 
@@ -283,7 +289,8 @@ module.exports = {
 
     // https://github.com/gajus/eslint-plugin-flowtype
     'flowtype/define-flow-type': 'warn',
-    'flowtype/require-valid-file-annotation': 'warn',
+    // TODO: Reenable once https://github.com/gajus/eslint-plugin-flowtype/issues/165 is fixed
+    //'flowtype/require-valid-file-annotation': 'warn',
     'flowtype/use-flow-type': 'warn',
   },
 };

packages/create-react-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-react-app",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "description": "ESLint configuration used by Create React App",
   "repository": "facebookincubator/create-react-app",
   "license": "BSD-3-Clause",

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

@@ -34,7 +34,7 @@ var publicUrl = '/my-custom-url';
 module.exports = {
   output: {
     // ...
-    publicPath: publicUrl + '/' 
+    publicPath: publicUrl + '/'
   },
   // ...
   plugins: [
@@ -68,10 +68,14 @@ var ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 
 module.exports = {
   // ...
-  plugins: [
-    new ModuleScopePlugin(paths.appSrc),
+  resolve: {
     // ...
-  ],
+    plugins: [
+      new ModuleScopePlugin(paths.appSrc),
+      // ...
+    ],
+    // ...
+  },
   // ...
 }
 ```
@@ -132,7 +136,7 @@ console.log('Just cleared the screen!');
 
 #### `eslintFormatter(results: Object): string`
 
-This is our custom ESLint formatter that integrates well with Create React App console output.  
+This is our custom ESLint formatter that integrates well with Create React App console output.<br>
 You can use the default one instead if you prefer so.
 
 ```js
@@ -232,6 +236,14 @@ var getProcessForPort = require('react-dev-utils/getProcessForPort');
 getProcessForPort(3000);
 ```
 
+#### `launchEditor(fileName: string, lineNumber: number): void`
+
+On macOS, tries to find a known running editor process and opens the file in it. It can also be explicitly configured by `REACT_EDITOR`, `VISUAL`, or `EDITOR` environment variables. For example, you can put `REACT_EDITOR=atom` in your `.env.local` file, and Create React App will respect that.
+
+#### `noopServiceWorkerMiddleware(): ExpressMiddleware`
+
+Returns Express middleware that serves a `/service-worker.js` that resets any previously set service worker configuration. Useful for development.
+
 #### `openBrowser(url: string): boolean`
 
 Attempts to open the browser with a given URL.<br>
@@ -248,7 +260,38 @@ if (openBrowser('http://localhost:3000')) {
 }
 ```
 
-#### `webpackHotDevClient.js`
+#### `printHostingInstructions(appPackage: Object, publicUrl: string, publicPath: string, buildFolder: string, useYarn: boolean): void`
+
+Prints hosting instructions after the project is built.
+
+Pass your parsed `package.json` object as `appPackage`, your the URL where you plan to host the app as `publicUrl`, `output.publicPath` from your Webpack configuration as `publicPath`, the `buildFolder` name, and whether to `useYarn` in instructions.
+
+```js
+const appPackage = require(paths.appPackageJson);
+const publicUrl = paths.publicUrl;
+const publicPath = config.output.publicPath;
+printHostingInstructions(appPackage, publicUrl, publicPath, 'build', true);
+```
+
+#### `WebpackDevServerUtils`
+
+##### `choosePort(host: string, defaultPort: number): Promise<number | null>`
+
+Returns a Promise resolving to either `defaultPort` or next available port if the user confirms it is okay to do. If the port is taken and the user has refused to use another port, or if the terminal is not interactive and can’t present user with the choice, resolves to `null`.
+
+##### `createCompiler(webpack: Function, config: Object, appName: string, urls: Object, useYarn: boolean): WebpackCompiler`
+
+Creates a Webpack compiler instance for WebpackDevServer with built-in helpful messages. Takes the `require('webpack')` entry point as the first argument. To provide the `urls` argument, use `prepareUrls()` described below.
+
+##### `prepareProxy(proxySetting: string, appPublicFolder: string): Object`
+
+Creates a WebpackDevServer `proxy` configuration object from the `proxy` setting in `package.json`.
+
+##### `prepareUrls(protocol: string, host: string, port: number): Object`
+
+Returns an object with local and remote URLs for the development server. Pass this object to `createCompiler()` described above.
+
+#### `webpackHotDevClient`
 
 This is an alternative client for [WebpackDevServer](https://github.com/webpack/webpack-dev-server) that shows a syntax error overlay.