From 8a27ba994d377c1bab7fc56d50b7c98f0737ca16 Mon Sep 17 00:00:00 2001 From: Elies Lou Date: Wed, 28 Mar 2018 13:54:26 +0200 Subject: [PATCH 1/4] Migration babel7 + usage of the development property on the react-preset --- .babelrc | 8 +++---- internal/webpack/configFactory.js | 36 ++++++++++++++++++++----------- package.json | 18 +++++++++------- 3 files changed, 37 insertions(+), 25 deletions(-) diff --git a/.babelrc b/.babelrc index 5f70eebb..626dbb77 100644 --- a/.babelrc +++ b/.babelrc @@ -7,11 +7,11 @@ // is supported for each context. { "presets": [ - ["env", { "targets": { "node": true } }], - "stage-3", - "react" + ["@babel/preset-env", { "targets": { "node": true } }], + "@babel/preset-stage-3", + "@babel/preset-react" ], "plugins": [ - "syntax-dynamic-import" + "@babel/syntax-dynamic-import" ] } diff --git a/internal/webpack/configFactory.js b/internal/webpack/configFactory.js index 42b96e23..1df6ec21 100644 --- a/internal/webpack/configFactory.js +++ b/internal/webpack/configFactory.js @@ -373,44 +373,54 @@ export default function webpackConfigFactory(buildOptions) { presets: [ // JSX - 'react', + // We use the development mode to add the react-dev babel plugins + // This decorates our components with __self prop to JSX elements, + // which React will use to generate some runtime warnings + // And give us the path to our components in the + // react dev tools. + ifDev(['@babel/preset-react', { development: true }]), + // We turn off development mode in production builds + ifProd(['@babel/preset-react', { development: false }]), // Stage 3 javascript syntax. // "Candidate: complete spec and initial browser implementations." // Add anything lower than stage 3 at your own risk. :) - 'stage-3', + '@babel/preset-stage-3', // For our client bundles we transpile all the latest ratified // ES201X code into ES5, safe for browsers. We exclude module // transilation as webpack takes care of this for us, doing // tree shaking in the process. - ifClient(['env', { es2015: { modules: false } }]), + ifClient([ + '@babel/preset-env', + { es2015: { modules: false } }, + ]), // For a node bundle we use the specific target against // babel-preset-env so that only the unsupported features of // our target node version gets transpiled. - ifNode(['env', { targets: { node: true } }]), + ifNode([ + '@babel/preset-env', + { + targets: { node: true }, + useBuiltIns: 'usage', + }, + ]), ].filter(x => x != null), plugins: [ // Required to support react hot loader. ifDevClient('react-hot-loader/babel'), - // This decorates our components with __self prop to JSX elements, - // which React will use to generate some runtime warnings. - ifDev('transform-react-jsx-self'), - // Adding this will give us the path to our components in the - // react dev tools. - ifDev('transform-react-jsx-source'), // Replaces the React.createElement function with one that is // more optimized for production. // NOTE: Symbol needs to be polyfilled. Ensure this feature // is enabled in the polyfill.io configuration. - ifProd('transform-react-inline-elements'), + ifProd('@babel/transform-react-inline-elements'), // Hoists element creation to the top level for subtrees that // are fully static, which reduces call to React.createElement // and the resulting allocations. More importantly, it tells // React that the subtree hasn’t changed so React can completely // skip it when reconciling. - ifProd('transform-react-constant-elements'), + ifProd('@babel/transform-react-constant-elements'), // Add syntax dynamic import for direct webpack `import()` support - 'syntax-dynamic-import', + '@babel/syntax-dynamic-import', ].filter(x => x != null), }, buildOptions, diff --git a/package.json b/package.json index 2e1fd654..f4891345 100644 --- a/package.json +++ b/package.json @@ -85,16 +85,18 @@ }, "devDependencies": { "assets-webpack-plugin": "3.5.1", - "babel-cli": "6.26.0", - "babel-core": "6.26.0", + "@babel/cli": "^7.0.0-beta.42", + "@babel/core": "^7.0.0-beta.42", + "@babel/node": "^7.0.0-beta.42", + "@babel/preset-env": "^7.0.0-beta.42", + "@babel/preset-react": "^7.0.0-beta.42", + "@babel/preset-stage-3": "^7.0.0-beta.42", + "@babel/plugin-syntax-dynamic-import": "^7.0.0-beta.42", + "@babel/plugin-transform-react-constant-elements": "^7.0.0-beta.42", + "@babel/plugin-transform-react-inline-elements": "^7.0.0-beta.42", "babel-eslint": "8.2.2", "babel-jest": "22.4.1", - "babel-loader": "7.1.4", - "babel-plugin-syntax-dynamic-import": "6.18.0", - "babel-plugin-transform-react-constant-elements": "6.23.0", - "babel-plugin-transform-react-inline-elements": "6.22.0", - "babel-plugin-transform-react-jsx-self": "6.22.0", - "babel-plugin-transform-react-jsx-source": "6.22.0", + "babel-loader": "8.0.0-beta.0", "babel-preset-env": "1.6.1", "babel-preset-react": "6.24.1", "babel-preset-stage-3": "6.24.1", From df898fc876add8236b67f76c485799daede9029b Mon Sep 17 00:00:00 2001 From: Elies Lou Date: Wed, 28 Mar 2018 14:07:53 +0200 Subject: [PATCH 2/4] Fix missing names --- .babelrc | 2 +- internal/webpack/configFactory.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/.babelrc b/.babelrc index 626dbb77..8397ea55 100644 --- a/.babelrc +++ b/.babelrc @@ -12,6 +12,6 @@ "@babel/preset-react" ], "plugins": [ - "@babel/syntax-dynamic-import" + "@babel/plugin-syntax-dynamic-import" ] } diff --git a/internal/webpack/configFactory.js b/internal/webpack/configFactory.js index 1df6ec21..34805d03 100644 --- a/internal/webpack/configFactory.js +++ b/internal/webpack/configFactory.js @@ -412,15 +412,15 @@ export default function webpackConfigFactory(buildOptions) { // more optimized for production. // NOTE: Symbol needs to be polyfilled. Ensure this feature // is enabled in the polyfill.io configuration. - ifProd('@babel/transform-react-inline-elements'), + ifProd('@babel/plugin-transform-react-inline-elements'), // Hoists element creation to the top level for subtrees that // are fully static, which reduces call to React.createElement // and the resulting allocations. More importantly, it tells // React that the subtree hasn’t changed so React can completely // skip it when reconciling. - ifProd('@babel/transform-react-constant-elements'), + ifProd('@babel/plugin-transform-react-constant-elements'), // Add syntax dynamic import for direct webpack `import()` support - '@babel/syntax-dynamic-import', + '@babel/plugin-syntax-dynamic-import', ].filter(x => x != null), }, buildOptions, From dfdbf017b53407289056a351d078ad9c651dedcd Mon Sep 17 00:00:00 2001 From: Elies Lou Date: Wed, 28 Mar 2018 14:10:11 +0200 Subject: [PATCH 3/4] Remove old babel packages --- package.json | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/package.json b/package.json index f4891345..d3a761b8 100644 --- a/package.json +++ b/package.json @@ -95,11 +95,8 @@ "@babel/plugin-transform-react-constant-elements": "^7.0.0-beta.42", "@babel/plugin-transform-react-inline-elements": "^7.0.0-beta.42", "babel-eslint": "8.2.2", - "babel-jest": "22.4.1", + "babel-jest": "22.4.3", "babel-loader": "8.0.0-beta.0", - "babel-preset-env": "1.6.1", - "babel-preset-react": "6.24.1", - "babel-preset-stage-3": "6.24.1", "babel-template": "6.26.0", "chokidar": "2.0.2", "css-loader": "0.28.10", From 3944fc4ef38d0a8d8b801806a4062f3a785e8a2f Mon Sep 17 00:00:00 2001 From: Elies Lou Date: Wed, 28 Mar 2018 14:18:50 +0200 Subject: [PATCH 4/4] Added babel-core bridge so jest run succesfully --- package.json | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index d3a761b8..2a350e3b 100644 --- a/package.json +++ b/package.json @@ -87,13 +87,14 @@ "assets-webpack-plugin": "3.5.1", "@babel/cli": "^7.0.0-beta.42", "@babel/core": "^7.0.0-beta.42", + "@babel/plugin-syntax-dynamic-import": "^7.0.0-beta.42", + "@babel/plugin-transform-react-constant-elements": "^7.0.0-beta.42", + "@babel/plugin-transform-react-inline-elements": "^7.0.0-beta.42", "@babel/node": "^7.0.0-beta.42", "@babel/preset-env": "^7.0.0-beta.42", "@babel/preset-react": "^7.0.0-beta.42", "@babel/preset-stage-3": "^7.0.0-beta.42", - "@babel/plugin-syntax-dynamic-import": "^7.0.0-beta.42", - "@babel/plugin-transform-react-constant-elements": "^7.0.0-beta.42", - "@babel/plugin-transform-react-inline-elements": "^7.0.0-beta.42", + "babel-core": "7.0.0-bridge.0", "babel-eslint": "8.2.2", "babel-jest": "22.4.3", "babel-loader": "8.0.0-beta.0", @@ -118,7 +119,7 @@ "husky": "0.14.3", "istanbul-api": "1.3.1", "istanbul-reports": "1.3.0", - "jest": "22.4.2", + "jest": "22.4.3", "lint-staged": "7.0.0", "md5": "2.2.1", "modernizr-loader": "1.0.1",