Update Babel to v7 (kriasoft#1413)

arnigudj · Oct 2, 2017 · 08d44d0 · 08d44d0
1 parent b7ea8fc
commit 08d44d0
Show file tree

Hide file tree

Showing 10 changed files with 1,152 additions and 726 deletions.
diff --git a/.babelrc.js b/.babelrc.js
@@ -0,0 +1,27 @@
+/**
+ * React Starter Kit (https://www.reactstarterkit.com/)
+ *
+ * Copyright © 2014-present Kriasoft, LLC. All rights reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.txt file in the root directory of this source tree.
+ */
+
+// Babel configuration
+// https://babeljs.io/docs/usage/api/
+module.exports = {
+  presets: [
+    [
+      'env',
+      {
+        targets: {
+          node: 'current',
+        },
+      },
+    ],
+    'stage-2',
+    'flow',
+    'react',
+  ],
+  ignore: ['/node_modules', '/build'],
+};
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -54,9 +54,7 @@ module.exports = {
     // Allow js files to use jsx syntax, too
     'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx'] }],
 
-    // Automatically convert pure class to function by
-    // babel-plugin-transform-react-pure-class-to-function
-    // https://github.com/kriasoft/react-starter-kit/pull/961
+    // Hot module replacement does not work with stateless functional components
     'react/prefer-stateless-function': 'off',
 
     // ESLint plugin for prettier formatting

diff --git a/.gitattributes b/.gitattributes
@@ -10,11 +10,16 @@
 *.html  text eol=lf
 *.css   text eol=lf
 *.less  text eol=lf
+*.styl  text eol=lf
 *.scss  text eol=lf
+*.sass  text eol=lf
 *.sss   text eol=lf
 *.js    text eol=lf
+*.jsx   text eol=lf
 *.json  text eol=lf
 *.md    text eol=lf
+*.mjs   text eol=lf
 *.sh    text eol=lf
+*.svg   text eol=lf
 *.txt   text eol=lf
 *.xml   text eol=lf
diff --git a/jest.config.js b/jest.config.js
@@ -1,3 +1,14 @@
+/**
+ * React Starter Kit (https://www.reactstarterkit.com/)
+ *
+ * Copyright © 2014-present Kriasoft, LLC. All rights reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.txt file in the root directory of this source tree.
+ */
+
+// Jest configuration
+// https://facebook.github.io/jest/docs/en/configuration.html
 module.exports = {
   // Modules can be explicitly auto-mocked using jest.mock(moduleName).
   // https://facebook.github.io/jest/docs/en/configuration.html#automock-boolean
@@ -51,9 +62,7 @@ module.exports = {
   // A map from regular expressions to module names that allow to stub out resources,
   // like images or styles with a single module.
   moduleNameMapper: {
-    '\\.(css|less|scss|sss)$': 'identity-obj-proxy',
-    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
-      'GlobalImageStub',
+    '\\.(css|less|styl|scss|sass|sss)$': 'identity-obj-proxy',
   },
 
   // modulePathIgnorePatterns: // [array<string>]
@@ -81,9 +90,9 @@ module.exports = {
   // timers: // [string]
 
   transform: {
-    '\\.jsx?$': 'babel-jest',
-    '\\.(jpe?g|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
-      '<rootDir>/jest/fileTransformer.js',
+    '\\.(js|jsx)$': '<rootDir>/node_modules/babel-jest',
+    '^(?!.*\\.(js|jsx|json|css|less|styl|scss|sass|sss)$)':
+      '<rootDir>/tools/lib/fileTransformer.js',
   },
 
   // transformIgnorePatterns: // [array<string>]

diff --git a/jest/fileTransformer.js b/jest/fileTransformer.js
diff --git a/package.json b/package.json
@@ -8,12 +8,12 @@
   },
   "browserslist": [">1%", "last 4 versions", "Firefox ESR", "not ie < 9"],
   "dependencies": {
-    "babel-polyfill": "^6.23.0",
+    "babel-polyfill": "^7.0.0-beta.2",
     "bluebird": "^3.5.0",
     "body-parser": "^1.17.2",
     "classnames": "^2.2.5",
     "cookie-parser": "^1.4.3",
-    "core-js": "^2.4.1",
+    "core-js": "^2.5.1",
     "express": "^4.15.3",
     "express-graphql": "^0.6.6",
     "express-jwt": "^5.3.0",
@@ -40,15 +40,18 @@
   "devDependencies": {
     "assets-webpack-plugin": "^3.5.1",
     "autoprefixer": "^7.1.4",
-    "babel-cli": "^6.24.1",
-    "babel-core": "^6.25.0",
-    "babel-eslint": "^7.2.3",
-    "babel-jest": "^20.0.3",
-    "babel-loader": "^7.1.1",
-    "babel-preset-env": "^1.5.2",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-react-optimize": "^1.0.1",
-    "babel-preset-stage-2": "^6.24.1",
+    "babel-core": "^7.0.0-beta.2",
+    "babel-eslint": "^8.0.1",
+    "babel-jest": "^21.2.0",
+    "babel-loader": "^7.1.2",
+    "babel-node": "7.0.0-beta.2",
+    "babel-plugin-transform-react-constant-elements": "^6.23.0",
+    "babel-plugin-transform-react-inline-elements": "^6.22.0",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.9",
+    "babel-preset-env": "^2.0.0-beta.2",
+    "babel-preset-flow": "^6.23.0",
+    "babel-preset-react": "^7.0.0-beta.2",
+    "babel-preset-stage-2": "^7.0.0-beta.2",
     "browser-sync": "^2.18.13",
     "chokidar": "^1.7.0",
     "css-loader": "^0.28.7",
@@ -70,8 +73,7 @@
     "glob": "^7.1.2",
     "husky": "^0.14.3",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^20.0.4",
-    "jest-codemods": "^0.12.0",
+    "jest": "^21.2.1",
     "jscodeshift": "^0.3.32",
     "lint-staged": "^4.2.3",
     "markdown-it": "^8.4.0",
@@ -94,7 +96,7 @@
     "postcss-pseudoelements": "^5.0.0",
     "postcss-selector-matches": "^3.0.1",
     "postcss-selector-not": "^3.0.1",
-    "prettier": "^1.7.2",
+    "prettier": "^1.7.3",
     "raw-loader": "^0.5.1",
     "react-deep-force-update": "^2.0.1",
     "react-error-overlay": "^1.0.9",
@@ -113,50 +115,29 @@
     "webpack-hot-middleware": "^2.19.1",
     "webpack-node-externals": "^1.6.0"
   },
-  "babel": {
-    "presets": [
-      [
-        "env",
-        {
-          "targets": {
-            "node": "current"
-          }
-        }
-      ],
-      "stage-2",
-      "react"
-    ],
-    "ignore": [
-      "/node_modules/",
-      "/build/chunks/",
-      "/build/public/",
-      "/build/updates/",
-      "/build/server.js"
-    ]
-  },
   "lint-staged": {
     "*.{js,jsx}": ["eslint --fix", "git add"],
     "*.{json,graphql}": ["prettier --write", "git add"],
-    "*.{css,less,scss,sss}": ["stylelint --fix", "git add"]
+    "*.{css,less,styl,scss,sass,sss}": ["stylelint --fix", "git add"]
   },
   "scripts": {
     "precommit": "lint-staged",
     "lint-js": "eslint --ignore-path .gitignore --ignore-pattern \"!**/.*\" .",
-    "lint-css": "stylelint \"src/**/*.{css,less,scss,sss}\"",
+    "lint-css": "stylelint \"src/**/*.{css,less,styl,scss,sass,sss}\"",
     "lint": "yarn run lint-js && yarn run lint-css",
-    "fix-js": "yarn run lint-js -- --fix",
-    "fix-css": "yarn run lint-css -- --fix",
+    "fix-js": "yarn run lint-js --fix",
+    "fix-css": "yarn run lint-css --fix",
     "fix": "yarn run fix-js && yarn run fix-css",
     "check": "flow check",
     "test": "jest",
-    "test-watch": "yarn run test -- --watch --notify",
-    "test-cover": "yarn run test -- --coverage",
+    "test-watch": "yarn run test --watch --notify",
+    "test-cover": "yarn run test --coverage",
     "coverage": "yarn run test-cover && opn coverage/lcov-report/index.html",
     "clean": "babel-node tools/run clean",
     "copy": "babel-node tools/run copy",
     "bundle": "babel-node tools/run bundle",
     "build": "babel-node tools/run build",
-    "build-stats": "yarn run build -- --release --analyse",
+    "build-stats": "yarn run build --release --analyse",
     "deploy": "babel-node tools/run deploy",
     "render": "babel-node tools/run render",
     "serve": "babel-node tools/run runServer",

diff --git a/tools/README.md b/tools/README.md
@@ -35,13 +35,13 @@ Flag        | Description
 For example:
 
 ```sh
-$ yarn run build -- --release --verbose   # Build the app in production mode
+$ yarn run build --release --verbose      # Build the app in production mode
 ```
 
 or
 
 ```sh
-$ yarn start -- --release                 # Launch dev server in production mode
+$ yarn start --release                    # Launch dev server in production mode
 ```
 
 ## Misc

diff --git a/tools/lib/fileTransformer.js b/tools/lib/fileTransformer.js
@@ -0,0 +1,18 @@
+/**
+ * React Starter Kit (https://www.reactstarterkit.com/)
+ *
+ * Copyright © 2014-present Kriasoft, LLC. All rights reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.txt file in the root directory of this source tree.
+ */
+
+const path = require('path');
+
+// This is a custom Jest transformer turning file imports into filenames.
+// http://facebook.github.io/jest/docs/tutorial-webpack.html
+module.exports = {
+  process(src, filename) {
+    return `module.exports = ${JSON.stringify(path.basename(filename))};`;
+  },
+};
diff --git a/tools/webpack.config.js b/tools/webpack.config.js
@@ -20,13 +20,18 @@ const isVerbose = process.argv.includes('--verbose');
 const isAnalyze =
   process.argv.includes('--analyze') || process.argv.includes('--analyse');
 
-const reScript = /\.m?jsx?$/;
-const reStyle = /\.(css|less|scss|sss)$/;
-const reImage = /\.(bmp|gif|jpe?g|png|svg)$/;
+const reScript = /\.(js|jsx|mjs)$/;
+const reStyle = /\.(css|less|styl|scss|sass|sss)$/;
+const reImage = /\.(bmp|gif|jpg|jpeg|png|svg)$/;
 const staticAssetName = isDebug
   ? '[path][name].[ext]?[hash:8]'
   : '[hash:8].[ext]';
 
+// CSS Nano options http://cssnano.co/
+const minimizeCssOptions = {
+  discardComments: { removeAll: true },
+};
+
 //
 // Common configuration chunk to be used for both
 // client-side (client.js) and server-side (server.js) bundles
@@ -77,7 +82,7 @@ const config = {
               {
                 targets: {
                   browsers: pkg.browserslist,
-                  uglify: true,
+                  forceAllTransforms: true,
                 },
                 modules: false,
                 useBuiltIns: false,
@@ -87,20 +92,23 @@ const config = {
             // Experimental ECMAScript proposals
             // https://babeljs.io/docs/plugins/#presets-stage-x-experimental-presets-
             'stage-2',
-            // JSX, Flow
+            // Flow
+            // https://github.com/babel/babel/tree/master/packages/babel-preset-flow
+            'flow',
+            // JSX
             // https://github.com/babel/babel/tree/master/packages/babel-preset-react
-            'react',
-            // Optimize React code for the production build
-            // https://github.com/thejameskyle/babel-react-optimize
-            ...(isDebug ? [] : ['react-optimize']),
+            ['react', { development: isDebug }],
           ],
           plugins: [
-            // Adds component stack to warning messages
-            // https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx-source
-            ...(isDebug ? ['transform-react-jsx-source'] : []),
-            // Adds __self attribute to JSX which React will use for some warnings
-            // https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx-self
-            ...(isDebug ? ['transform-react-jsx-self'] : []),
+            // Treat React JSX elements as value types and hoist them to the highest scope
+            // https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-constant-elements
+            ...(isDebug ? ['transform-react-constant-elements'] : []),
+            // Replaces the React.createElement function with one that is more optimized for production
+            // https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-inline-elements
+            ...(isDebug ? ['transform-react-inline-elements'] : []),
+            // Remove unnecessary React propTypes from the production build
+            // https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types
+            ...(isDebug ? ['transform-react-remove-prop-types'] : []),
           ],
         },
       },
@@ -121,8 +129,7 @@ const config = {
             loader: 'css-loader',
             options: {
               sourceMap: isDebug,
-              minimize: !isDebug,
-              discardComments: { removeAll: true },
+              minimize: isDebug ? false : minimizeCssOptions,
             },
           },
 
@@ -139,9 +146,8 @@ const config = {
               localIdentName: isDebug
                 ? '[name]-[local]-[hash:base64:5]'
                 : '[hash:base64:5]',
-              // CSS Nano http://cssnano.co/options/
-              minimize: !isDebug,
-              discardComments: { removeAll: true },
+              // CSS Nano http://cssnano.co/
+              minimize: isDebug ? false : minimizeCssOptions,
             },
           },
 
@@ -167,7 +173,7 @@ const config = {
           // https://github.com/webpack-contrib/sass-loader
           // Install dependencies before uncommenting: yarn add --dev sass-loader node-sass
           // {
-          //   test: /\.scss$/,
+          //   test: /\.(scss|sass)$/,
           //   loader: 'sass-loader',
           // },
         ],