merge latest cra

README.md

@@ -1,65 +1,7 @@
-# ☢ custom-react-scripts ☢
-Latest version of original react-scripts: **0.8.4**
+# react-scripts
 
-### ⚠️ Disclaimer:
-> This is **not** a fork of ```create-react-app```. It's just a fork of ```react-scripts``` with simple babel/webpack modifications that can toggle extra features.
+This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app).<br>
+Please refer to its documentation:
 
-The reason for this fork's existence is explained better in [this Medium article](https://medium.com/@kitze/configure-create-react-app-without-ejecting-d8450e96196a).
-
-### 💡Features:
-* Decorators
-* babel-preset-stage-0
-* LESS
-* SASS
-* CSS modules
-
-**the features are optional and can be turned on/off individually*
-
-### ❔How to use it
-```create-react-app my-app --scripts-version custom-react-scripts```
-
-Modify the ```.env``` file in the root of the generated project, and add any of the configuration options below 👇 to enable that feature.
-
-The generated project comes with SASS, LESS, and CSS modules support by default, but you can remove them at any time by removing the options from the ```.env``` file.
-
-### 📝 Configuration options
-
-#### Styling
-- ```REACT_APP_SASS=true``` - enable SASS support
-- ```REACT_APP_LESS=true``` - enable LESS support
-- ```REACT_APP_STYLUS=true``` - enable Stylus support
-- ```REACT_APP_CSS_MODULES``` - enable CSS modules
-
-#### Babel
-- ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset
-- ```REACT_APP_DECORATORS=true``` - enable decorators support
-
-> ⚠️ Please note that the Babel features are highly experimental (especially stage-0) and still not a part of the ES specification.
-> Use them at your own risk of breaking backwards compatibility if they don't make the final version of the spec.
-
-#### Others
-- ```PORT=3015``` - change default port (supported in CRA by default)
-- ```OPEN_BROWSER=false``` - don't open browser after running webpack server
-
-### 🤔 Why?
-The ```create-react-app``` app doesn't allow user configuration and modifications for few reasons:
-
-* Some of the babel presets and plugins that people might use are experimental.  If they're used in a project and then they don't make it in the ES spec, they will break backwards compatibility.
-* It's hard to maintain code for all of these custom configurations that people want to use.
-
-But people still want to use some of these features, and they're either ejecting their CRA app, or just don't use ```create-react-app``` because they're *just* missing **X** feature.
-
-So instead of [searching npm](https://www.npmjs.com/search?q=react-scripts) for a ```react-scripts``` fork with the **X** feature you need, this fork provides support for all of these extra features with simply adding a line in the ```.env``` config.
-
-### How does it work?
-The CRA team recently [added support](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env) for an ```.env``` file in the root of the generated CRA project.
-
-From the original readme:
-> To define permanent environment vairables, create a file called .env in the root of your project:
-> REACT_APP_SECRET_CODE=abcdef
-
-I just added support for extra environment variables that actually turn on certain plugins, babel plugins, presets, and loaders in the webpack and babel configs of ```react-scripts```.
-
-### Future plans
-
-I will put all of my efforts into supporting this fork to be always on par with features with the newest ```create-react-app``` and ```react-scripts``` versions.
+* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) – How to create a new app.
+* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App.

bin/react-scripts.js

@@ -1,22 +1,53 @@
 #!/usr/bin/env node
-var spawn = require('cross-spawn');
-var script = process.argv[2];
-var args = process.argv.slice(3);
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+'use strict';
+
+const spawn = require('react-dev-utils/crossSpawn');
+const script = process.argv[2];
+const args = process.argv.slice(3);
 
 switch (script) {
-case 'build':
-case 'eject':
-case 'start':
-case 'test':
-  var result = spawn.sync(
-    'node',
-    [require.resolve('../scripts/' + script)].concat(args),
-    {stdio: 'inherit'}
-  );
-  process.exit(result.status);
-  break;
-default:
-  console.log('Unknown script "' + script + '".');
-  console.log('Perhaps you need to update react-scripts?');
-  break;
+  case 'build':
+  case 'eject':
+  case 'start':
+  case 'test': {
+    const result = spawn.sync(
+      'node',
+      [require.resolve('../scripts/' + script)].concat(args),
+      { stdio: 'inherit' }
+    );
+    if (result.signal) {
+      if (result.signal === 'SIGKILL') {
+        console.log(
+          'The build failed because the process exited too early. ' +
+            'This probably means the system ran out of memory or someone called ' +
+            '`kill -9` on the process.'
+        );
+      } else if (result.signal === 'SIGTERM') {
+        console.log(
+          'The build failed because the process exited too early. ' +
+            'Someone might have called `kill` or `killall`, or the system could ' +
+            'be shutting down.'
+        );
+      }
+      process.exit(1);
+    }
+    process.exit(result.status);
+    break;
+  }
+  default:
+    console.log('Unknown script "' + script + '".');
+    console.log('Perhaps you need to update react-scripts?');
+    console.log(
+      'See: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases'
+    );
+    break;
 }

config/env.js

@@ -8,32 +8,93 @@
  * of patent rights can be found in the PATENTS file in the same directory.
  */
 // @remove-on-eject-end
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const paths = require('./paths');
+
+// Make sure that including paths.js after env.js will read .env variables.
+delete require.cache[require.resolve('./paths')];
+
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+  throw new Error(
+    'The NODE_ENV environment variable is required but was not specified.'
+  );
+}
+
+// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
+var dotenvFiles = [
+  `${paths.dotenv}.${NODE_ENV}.local`,
+  `${paths.dotenv}.${NODE_ENV}`,
+  // Don't include `.env.local` for `test` environment
+  // since normally you expect tests to produce the same
+  // results for everyone
+  NODE_ENV !== 'test' && `${paths.dotenv}.local`,
+  paths.dotenv,
+].filter(Boolean);
+
+// Load environment variables from .env* files. Suppress warnings using silent
+// if this file is missing. dotenv will never modify any environment variables
+// that have already been set.
+// https://github.com/motdotla/dotenv
+dotenvFiles.forEach(dotenvFile => {
+  if (fs.existsSync(dotenvFile)) {
+    require('dotenv').config({
+      path: dotenvFile,
+    });
+  }
+});
+
+// We support resolving modules according to `NODE_PATH`.
+// This lets you use absolute paths in imports inside large monorepos:
+// https://github.com/facebookincubator/create-react-app/issues/253.
+// It works similar to `NODE_PATH` in Node itself:
+// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
+// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
+// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
+// https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
+// We also resolve them to make sure all tools using them work consistently.
+const appDirectory = fs.realpathSync(process.cwd());
+process.env.NODE_PATH = (process.env.NODE_PATH || '')
+  .split(path.delimiter)
+  .filter(folder => folder && !path.isAbsolute(folder))
+  .map(folder => path.resolve(appDirectory, folder))
+  .join(path.delimiter);
 
 // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
 // injected into the application via DefinePlugin in Webpack configuration.
-
-var REACT_APP = /^REACT_APP_/i;
+const REACT_APP = /^REACT_APP_/i;
 
 function getClientEnvironment(publicUrl) {
-  var processEnv = Object
-    .keys(process.env)
+  const raw = Object.keys(process.env)
     .filter(key => REACT_APP.test(key))
-    .reduce((env, key) => {
-      env[key] = JSON.stringify(process.env[key]);
+    .reduce(
+      (env, key) => {
+        env[key] = process.env[key];
+        return env;
+      },
+      {
+        // Useful for determining whether we’re running in production mode.
+        // Most importantly, it switches React into the correct mode.
+        NODE_ENV: process.env.NODE_ENV || 'development',
+        // Useful for resolving the correct path to static assets in `public`.
+        // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
+        // This should only be used as an escape hatch. Normally you would put
+        // images into the `src` and `import` them in code to get their paths.
+        PUBLIC_URL: publicUrl,
+      }
+    );
+  // Stringify all values so we can feed into Webpack DefinePlugin
+  const stringified = {
+    'process.env': Object.keys(raw).reduce((env, key) => {
+      env[key] = JSON.stringify(raw[key]);
       return env;
-    }, {
-      // Useful for determining whether we’re running in production mode.
-      // Most importantly, it switches React into the correct mode.
-      'NODE_ENV': JSON.stringify(
-        process.env.NODE_ENV || 'development'
-      ),
-      // Useful for resolving the correct path to static assets in `public`.
-      // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
-      // This should only be used as an escape hatch. Normally you would put
-      // images into the `src` and `import` them in code to get their paths.
-      'PUBLIC_URL': JSON.stringify(publicUrl)
-    });
-  return {'process.env': processEnv};
+    }, {}),
+  };
+
+  return { raw, stringified };
 }
 
 module.exports = getClientEnvironment;

config/jest/babelTransform.js

@@ -1,17 +1,16 @@
+// @remove-file-on-eject
 /**
  * Copyright (c) 2014-present, Facebook, Inc. All rights reserved.
  *
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree. An additional grant
  * of patent rights can be found in the PATENTS file in the same directory.
  */
+'use strict';
 
 const babelJest = require('babel-jest');
-const getCustomConfig = require('../get-custom-config');
-const customConfig = getCustomConfig(false);
 
 module.exports = babelJest.createTransformer({
-  presets: [require.resolve('babel-preset-react-app')].concat(customConfig.presets),
-  plugins: [].concat(customConfig.babelPlugins),
-  babelrc: false
-});
+  presets: [require.resolve('babel-preset-react-app')],
+  babelrc: false,
+});

config/jest/cssTransform.js

@@ -7,6 +7,7 @@
  * of patent rights can be found in the PATENTS file in the same directory.
  */
 // @remove-on-eject-end
+'use strict';
 
 // This is a custom Jest transformer turning style imports into empty objects.
 // http://facebook.github.io/jest/docs/tutorial-webpack.html
@@ -15,7 +16,7 @@ module.exports = {
   process() {
     return 'module.exports = {};';
   },
-  getCacheKey(fileData, filename) {
+  getCacheKey() {
     // The output is always the same.
     return 'cssTransform';
   },

config/jest/fileTransform.js

@@ -7,6 +7,7 @@
  * of patent rights can be found in the PATENTS file in the same directory.
  */
 // @remove-on-eject-end
+'use strict';
 
 const path = require('path');
 
@@ -15,6 +16,6 @@ const path = require('path');
 
 module.exports = {
   process(src, filename) {
-    return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
+    return `module.exports = ${JSON.stringify(path.basename(filename))};`;
   },
 };