Use babel-preset-react-app preset as the default preset. (#526)

* Use babel-preset-react-app preset as the default preset.

* Fix lint issues.

dist/client/preview/reducer.js

@@ -15,7 +15,7 @@ var _actions = require('./actions');
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function reducer() {
-  var state = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
+  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var action = arguments[1];
 
   switch (action.type) {

dist/server/config/babel.js

@@ -9,34 +9,14 @@
  * of patent rights can be found in the PATENTS file in the same directory.
  */
 
+var findCacheDir = require('find-cache-dir');
+
 module.exports = {
   // Don't try to find .babelrc because we want to force this configuration.
   babelrc: false,
   // This is a feature of `babel-loader` for webpack (not Babel itself).
-  // It enables caching results in OS temporary directory for faster rebuilds.
-  cacheDirectory: true,
-  presets: [
-  // let, const, destructuring, classes, modules
-  require.resolve('babel-preset-es2015'),
-  // exponentiation
-  require.resolve('babel-preset-es2016'),
-  // JSX, Flow
-  require.resolve('babel-preset-react')],
-  plugins: [
-  // function x(a, b, c,) { }
-  require.resolve('babel-plugin-syntax-trailing-function-commas'),
-  // await fetch()
-  require.resolve('babel-plugin-syntax-async-functions'),
-  // class { handleClick = () => { } }
-  require.resolve('babel-plugin-transform-class-properties'),
-  // { ...todo, completed: true }
-  require.resolve('babel-plugin-transform-object-rest-spread'),
-  // function* () { yield 42; yield 43; }
-  require.resolve('babel-plugin-transform-regenerator'),
-  // Polyfills the runtime needed for async/await and generators
-  [require.resolve('babel-plugin-transform-runtime'), {
-    helpers: false,
-    polyfill: false,
-    regenerator: true
-  }]]
+  // It enables a cache directory for faster-rebuilds
+  // `find-cache-dir` will create the cache directory under the node_modules directory.
+  cacheDirectory: findCacheDir({ name: 'react-storybook' }),
+  presets: [require.resolve('babel-preset-react-app')]
 };

dist/server/config/babel.prod.js

@@ -12,30 +12,5 @@
 module.exports = {
   // Don't try to find .babelrc because we want to force this configuration.
   babelrc: false,
-  presets: [
-  // let, const, destructuring, classes, modules
-  require.resolve('babel-preset-es2015'),
-  // exponentiation
-  require.resolve('babel-preset-es2016'),
-  // JSX, Flow
-  require.resolve('babel-preset-react')],
-  plugins: [
-  // function x(a, b, c,) { }
-  require.resolve('babel-plugin-syntax-trailing-function-commas'),
-  // await fetch()
-  require.resolve('babel-plugin-syntax-async-functions'),
-  // class { handleClick = () => { } }
-  require.resolve('babel-plugin-transform-class-properties'),
-  // { ...todo, completed: true }
-  require.resolve('babel-plugin-transform-object-rest-spread'),
-  // function* () { yield 42; yield 43; }
-  require.resolve('babel-plugin-transform-regenerator'),
-  // Polyfills the runtime needed for async/await and generators
-  [require.resolve('babel-plugin-transform-runtime'), {
-    helpers: false,
-    polyfill: false,
-    regenerator: true
-  }],
-  // Optimization: hoist JSX that never changes out of render()
-  require.resolve('babel-plugin-transform-react-constant-elements')]
+  presets: [require.resolve('babel-preset-react-app')]
 };

dist/server/config/utils.js

@@ -37,7 +37,7 @@ var excludePaths = exports.excludePaths = [_path2.default.resolve('./node_module
 
 // Load environment variables starts with STORYBOOK_ to the client side.
 function loadEnv() {
-  var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
   var defaultNodeEnv = options.production ? 'production' : 'development';
   var env = {

dist/server/index.js

@@ -39,6 +39,8 @@ var _track_usage = require('./track_usage');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+process.env.NODE_ENV = process.env.NODE_ENV || 'development';
+
 var logger = console;
 
 _commander2.default.version(_package2.default.version).option('-p, --port [number]', 'Port to run Storybook (Required)', parseInt).option('-h, --host [string]', 'Host to run Storybook').option('-s, --static-dir <dir-names>', 'Directory where to load static files from').option('-c, --config-dir [dir-name]', 'Directory where to load Storybook configurations from').option('-d, --db-path [db-file]', 'File where to store addon database JSON file').option('--enable-db', 'Enable the (experimental) addon database service on dev-server').option('--dont-track', 'Do not send anonymous usage stats.').parse(process.argv);

package.json

@@ -33,23 +33,15 @@
     "autoprefixer": "^6.3.7",
     "babel-core": "^6.11.4",
     "babel-loader": "^6.2.4",
-    "babel-plugin-syntax-async-functions": "^6.8.0",
-    "babel-plugin-syntax-trailing-function-commas": "^6.8.0",
-    "babel-plugin-transform-class-properties": "^6.11.5",
-    "babel-plugin-transform-object-rest-spread": "^6.8.0",
-    "babel-plugin-transform-react-constant-elements": "^6.9.1",
-    "babel-plugin-transform-regenerator": "^6.11.4",
-    "babel-plugin-transform-runtime": "^6.12.0",
-    "babel-preset-es2015": "^6.9.0",
-    "babel-preset-es2016": "^6.11.3",
-    "babel-preset-react": "^6.11.1",
+    "babel-preset-react-app": "^0.2.1",
     "babel-runtime": "^6.9.2",
     "case-sensitive-paths-webpack-plugin": "^1.1.2",
     "commander": "^2.9.0",
     "configstore": "^2.0.0",
     "css-loader": "0.25.0",
     "express": "^4.13.3",
     "file-loader": "^0.9.0",
+    "find-cache-dir": "^0.1.1",
     "json-loader": "^0.5.4",
     "json-stringify-safe": "^5.0.1",
     "json5": "^0.5.0",

src/server/config/babel.js

@@ -7,36 +7,16 @@
  * of patent rights can be found in the PATENTS file in the same directory.
  */
 
+const findCacheDir = require('find-cache-dir');
+
 module.exports = {
   // Don't try to find .babelrc because we want to force this configuration.
   babelrc: false,
   // This is a feature of `babel-loader` for webpack (not Babel itself).
-  // It enables caching results in OS temporary directory for faster rebuilds.
-  cacheDirectory: true,
+  // It enables a cache directory for faster-rebuilds
+  // `find-cache-dir` will create the cache directory under the node_modules directory.
+  cacheDirectory: findCacheDir({ name: 'react-storybook' }),
   presets: [
-    // let, const, destructuring, classes, modules
-    require.resolve('babel-preset-es2015'),
-    // exponentiation
-    require.resolve('babel-preset-es2016'),
-    // JSX, Flow
-    require.resolve('babel-preset-react'),
-  ],
-  plugins: [
-    // function x(a, b, c,) { }
-    require.resolve('babel-plugin-syntax-trailing-function-commas'),
-    // await fetch()
-    require.resolve('babel-plugin-syntax-async-functions'),
-    // class { handleClick = () => { } }
-    require.resolve('babel-plugin-transform-class-properties'),
-    // { ...todo, completed: true }
-    require.resolve('babel-plugin-transform-object-rest-spread'),
-    // function* () { yield 42; yield 43; }
-    require.resolve('babel-plugin-transform-regenerator'),
-    // Polyfills the runtime needed for async/await and generators
-    [require.resolve('babel-plugin-transform-runtime'), {
-      helpers: false,
-      polyfill: false,
-      regenerator: true,
-    }],
+    require.resolve('babel-preset-react-app'),
   ],
 };

src/server/config/babel.prod.js

@@ -11,31 +11,6 @@ module.exports = {
   // Don't try to find .babelrc because we want to force this configuration.
   babelrc: false,
   presets: [
-    // let, const, destructuring, classes, modules
-    require.resolve('babel-preset-es2015'),
-    // exponentiation
-    require.resolve('babel-preset-es2016'),
-    // JSX, Flow
-    require.resolve('babel-preset-react'),
-  ],
-  plugins: [
-    // function x(a, b, c,) { }
-    require.resolve('babel-plugin-syntax-trailing-function-commas'),
-    // await fetch()
-    require.resolve('babel-plugin-syntax-async-functions'),
-    // class { handleClick = () => { } }
-    require.resolve('babel-plugin-transform-class-properties'),
-    // { ...todo, completed: true }
-    require.resolve('babel-plugin-transform-object-rest-spread'),
-    // function* () { yield 42; yield 43; }
-    require.resolve('babel-plugin-transform-regenerator'),
-    // Polyfills the runtime needed for async/await and generators
-    [require.resolve('babel-plugin-transform-runtime'), {
-      helpers: false,
-      polyfill: false,
-      regenerator: true,
-    }],
-    // Optimization: hoist JSX that never changes out of render()
-    require.resolve('babel-plugin-transform-react-constant-elements'),
+    require.resolve('babel-preset-react-app'),
   ],
 };

src/server/index.js

@@ -11,6 +11,8 @@ import packageJson from '../../package.json';
 import { parseList, getEnvConfig } from './utils';
 import { track, dontTrack } from './track_usage';
 
+process.env.NODE_ENV = process.env.NODE_ENV || 'development';
+
 const logger = console;
 
 program