Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Babel 7 #16297

Merged
merged 15 commits into from Aug 9, 2019

Conversation

@lunaruan
Copy link
Contributor

commented Aug 5, 2019

For #12548

Upgraded from Babel 6 to Babel 7.

The only significant change seems to be the way @babel/plugin-transform-classes handles classes differently from babel-plugin-transform-es2015-classes. In regular mode, the former injects a _createClass function that increases the bundle size, and in the latter it removes the safeguard checks. However, this is okay because we don't all classes in new features, and we want to deprecate class usage in the future in the react repo.

Differences between classes in Babel 6 (left) and Babel 7 (right)
image
image

Example diffs (6 on the left and 7 on the right):
ReactDOM-prod.js (facebook-www)
ReactDOM-dev.js (facebook-www)
react-dom.development.js (UMD)
react-dom.production.js (UMD)
react-dom.development.js (CommonJS)
react-dom.production.js (CommonJS)
react-dom-server.node.production.min.js (CommonJS)
react-dom-server.browser.production.min.js (UMD)

Luna Ruan
@sizebot

This comment has been minimized.

Copy link

commented Aug 5, 2019

React: size: -0.4%, gzip: -0.2%

ReactDOM: size: -0.7%, gzip: -0.7%

Details of bundled changes.

Comparing: d77c623...348fae3

react

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react.development.js -0.4% -0.1% 114.55 KB 114.08 KB 29.07 KB 29.05 KB UMD_DEV
react.production.min.js -0.4% -0.2% 12.84 KB 12.79 KB 5.08 KB 5.07 KB UMD_PROD
react.profiling.min.js -0.5% -0.1% 15.03 KB 14.96 KB 5.63 KB 5.62 KB UMD_PROFILING
react.development.js -0.3% +0.1% 72.29 KB 72.05 KB 18.94 KB 18.95 KB NODE_DEV
react.production.min.js -0.3% 🔺+0.7% 6.68 KB 6.66 KB 2.75 KB 2.77 KB NODE_PROD
React-dev.js -0.1% +0.3% 70.14 KB 70.04 KB 17.98 KB 18.03 KB FB_WWW_DEV
React-prod.js -0.4% -0.3% 17.39 KB 17.32 KB 4.54 KB 4.53 KB FB_WWW_PROD
React-profiling.js -0.4% -0.3% 17.39 KB 17.32 KB 4.54 KB 4.53 KB FB_WWW_PROFILING

react-dom

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-dom.profiling.min.js -0.1% 0.0% 114.87 KB 114.76 KB 36.25 KB 36.26 KB NODE_PROFILING
react-dom-server.browser.development.js -0.5% -0.3% 138.51 KB 137.78 KB 36.43 KB 36.32 KB UMD_DEV
ReactDOM-dev.js -0.3% -0.3% 934.88 KB 931.74 KB 206.6 KB 206.06 KB FB_WWW_DEV
react-dom-server.browser.production.min.js -0.7% -0.7% 19.39 KB 19.26 KB 7.27 KB 7.22 KB UMD_PROD
react-dom-test-utils.development.js -0.1% +0.1% 58.12 KB 58.05 KB 15.96 KB 15.97 KB UMD_DEV
react-dom-unstable-fizz.browser.development.js +0.2% +0.4% 3.78 KB 3.78 KB 1.52 KB 1.53 KB UMD_DEV
react-dom-test-utils.production.min.js -0.3% -0.5% 11.32 KB 11.28 KB 4.18 KB 4.16 KB UMD_PROD
ReactDOMUnstableNativeDependencies-dev.js -0.1% -0.2% 59.03 KB 58.95 KB 14.92 KB 14.88 KB FB_WWW_DEV
react-dom-unstable-fizz.browser.production.min.js -0.6% -0.6% 1.21 KB 1.2 KB 705 B 701 B UMD_PROD
ReactDOMFizzServer-dev.js +0.1% +0.1% 3.83 KB 3.83 KB 1.48 KB 1.48 KB FB_WWW_DEV
ReactDOMUnstableNativeDependencies-prod.js -0.5% -0.1% 26.22 KB 26.1 KB 5.28 KB 5.27 KB FB_WWW_PROD
react-dom-test-utils.development.js -0.1% +0.1% 56.39 KB 56.33 KB 15.62 KB 15.64 KB NODE_DEV
react-dom-unstable-fizz.browser.development.js +0.2% +0.3% 3.61 KB 3.61 KB 1.48 KB 1.48 KB NODE_DEV
react-dom-test-utils.production.min.js -0.3% -0.4% 11.1 KB 11.06 KB 4.13 KB 4.11 KB NODE_PROD
react-dom-unstable-fizz.browser.production.min.js -0.7% -0.5% 1.05 KB 1.04 KB 636 B 633 B NODE_PROD
react-dom.development.js -0.3% -0.2% 910.83 KB 907.65 KB 206.46 KB 206.11 KB UMD_DEV
react-dom.production.min.js -0.1% 0.0% 111.25 KB 111.15 KB 35.84 KB 35.85 KB UMD_PROD
ReactTestUtils-dev.js +0.2% +0.6% 53.65 KB 53.78 KB 14.29 KB 14.38 KB FB_WWW_DEV
react-dom.profiling.min.js -0.1% -0.1% 114.66 KB 114.55 KB 36.89 KB 36.85 KB UMD_PROFILING
react-dom.development.js -0.4% -0.2% 905.13 KB 901.95 KB 204.88 KB 204.51 KB NODE_DEV
react-dom-server.node.development.js -1.2% -1.2% 136.57 KB 134.93 KB 36.04 KB 35.61 KB NODE_DEV
react-dom.production.min.js -0.1% 0.0% 111.22 KB 111.12 KB 35.29 KB 35.3 KB NODE_PROD
react-dom-server.node.production.min.js -2.8% -2.7% 20.17 KB 19.6 KB 7.57 KB 7.37 KB NODE_PROD
ReactDOM-prod.js -0.1% -0.1% 372.9 KB 372.67 KB 68.47 KB 68.39 KB FB_WWW_PROD
ReactDOM-profiling.js -0.1% -0.2% 377.42 KB 377.15 KB 69.48 KB 69.36 KB FB_WWW_PROFILING
react-dom-server.browser.development.js -0.5% -0.3% 134.64 KB 133.92 KB 35.5 KB 35.38 KB NODE_DEV
react-dom-server.browser.production.min.js -0.7% -0.7% 19.32 KB 19.19 KB 7.27 KB 7.21 KB NODE_PROD
react-dom-unstable-native-dependencies.development.js -0.1% -0.0% 60.76 KB 60.71 KB 15.85 KB 15.85 KB UMD_DEV
react-dom-unstable-native-dependencies.production.min.js 🔺+0.1% -0.2% 10.74 KB 10.75 KB 3.68 KB 3.68 KB UMD_PROD
ReactDOMServer-dev.js +0.6% -0.0% 137.06 KB 137.93 KB 34.93 KB 34.92 KB FB_WWW_DEV
ReactDOMServer-prod.js -0.2% -0.4% 46.68 KB 46.58 KB 10.83 KB 10.78 KB FB_WWW_PROD
react-dom-unstable-native-dependencies.development.js -0.1% -0.0% 60.43 KB 60.39 KB 15.72 KB 15.72 KB NODE_DEV
react-dom-unstable-fizz.node.development.js +0.5% +0.7% 3.85 KB 3.87 KB 1.5 KB 1.51 KB NODE_DEV
react-dom-unstable-native-dependencies.production.min.js 🔺+0.1% -0.1% 10.48 KB 10.49 KB 3.58 KB 3.58 KB NODE_PROD

react-art

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-art.development.js -0.4% -0.2% 648.08 KB 645.61 KB 141.42 KB 141.09 KB UMD_DEV
react-art.production.min.js -0.4% -0.5% 102.17 KB 101.76 KB 31.26 KB 31.11 KB UMD_PROD
react-art.development.js -0.4% -0.3% 578.95 KB 576.49 KB 124 KB 123.68 KB NODE_DEV
react-art.production.min.js -0.6% -0.9% 67.21 KB 66.78 KB 20.56 KB 20.38 KB NODE_PROD
ReactART-dev.js -0.3% -0.3% 593.5 KB 591.48 KB 123.61 KB 123.3 KB FB_WWW_DEV
ReactART-prod.js -0.5% -0.5% 221.69 KB 220.56 KB 37.79 KB 37.58 KB FB_WWW_PROD

react-native-renderer

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
ReactNativeRenderer-prod.js -0.7% -0.7% 272.32 KB 270.53 KB 46.71 KB 46.36 KB RN_OSS_PROD
ReactNativeRenderer-profiling.js -0.7% -0.7% 280.74 KB 278.91 KB 48.21 KB 47.86 KB RN_OSS_PROFILING
ReactFabric-prod.js -1.0% -1.2% 265.41 KB 262.71 KB 45.67 KB 45.11 KB RN_OSS_PROD
ReactFabric-profiling.js -1.0% -1.2% 274.07 KB 271.34 KB 47.11 KB 46.55 KB RN_OSS_PROFILING
ReactFabric-dev.js -0.6% -0.5% 738.28 KB 733.85 KB 156 KB 155.19 KB RN_FB_DEV
ReactFabric-prod.js -1.0% -1.2% 265.41 KB 262.71 KB 45.69 KB 45.12 KB RN_FB_PROD
ReactNativeRenderer-dev.js -0.4% -0.3% 727.43 KB 724.22 KB 153.88 KB 153.46 KB RN_OSS_DEV
ReactFabric-profiling.js -1.0% -1.2% 274.07 KB 271.34 KB 47.13 KB 46.56 KB RN_FB_PROFILING
ReactNativeRenderer-dev.js -0.4% -0.3% 727.53 KB 724.38 KB 153.94 KB 153.55 KB RN_FB_DEV
ReactNativeRenderer-prod.js -0.7% -0.7% 272.31 KB 270.52 KB 46.72 KB 46.37 KB RN_FB_PROD
ReactNativeRenderer-profiling.js -0.7% -0.7% 280.73 KB 278.9 KB 48.22 KB 47.87 KB RN_FB_PROFILING
ReactFabric-dev.js -0.6% -0.5% 738.17 KB 733.68 KB 155.95 KB 155.11 KB RN_OSS_DEV

react-test-renderer

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
ReactTestRenderer-dev.js -0.3% -0.3% 604.4 KB 602.59 KB 126.08 KB 125.76 KB FB_WWW_DEV
react-test-renderer-shallow.development.js -1.3% -0.4% 39.51 KB 39.01 KB 9.95 KB 9.91 KB UMD_DEV
react-test-renderer-shallow.production.min.js -2.2% -0.8% 11.66 KB 11.41 KB 3.56 KB 3.53 KB UMD_PROD
react-test-renderer-shallow.development.js -1.4% -0.4% 33.64 KB 33.18 KB 8.53 KB 8.5 KB NODE_DEV
react-test-renderer-shallow.production.min.js -2.1% -1.6% 11.81 KB 11.56 KB 3.69 KB 3.63 KB NODE_PROD
react-test-renderer.development.js -0.4% -0.2% 591.85 KB 589.65 KB 126.59 KB 126.38 KB UMD_DEV
react-test-renderer.production.min.js -0.3% 0.0% 68.89 KB 68.7 KB 21.17 KB 21.17 KB UMD_PROD
ReactShallowRenderer-dev.js +2.4% +0.3% 33.63 KB 34.43 KB 8.38 KB 8.41 KB FB_WWW_DEV
react-test-renderer.development.js -0.4% -0.2% 587.39 KB 585.19 KB 125.49 KB 125.28 KB NODE_DEV
react-test-renderer.production.min.js -0.3% -0.2% 68.59 KB 68.4 KB 20.92 KB 20.89 KB NODE_PROD

eslint-plugin-react-hooks

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
ESLintPluginReactHooks-dev.js -1.0% -0.0% 81.31 KB 80.5 KB 17.84 KB 17.83 KB FB_WWW_DEV
eslint-plugin-react-hooks.development.js -1.2% 0.0% 75.86 KB 74.96 KB 17.31 KB 17.31 KB NODE_DEV
eslint-plugin-react-hooks.production.min.js -0.5% -0.4% 20.04 KB 19.95 KB 6.94 KB 6.91 KB NODE_PROD

react-events

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-events-hover.development.js -0.1% -0.2% 6.77 KB 6.76 KB 1.7 KB 1.7 KB UMD_DEV
react-events-scroll.development.js -0.6% +0.1% 5.94 KB 5.9 KB 1.59 KB 1.59 KB UMD_DEV
ReactEventsContextMenu-dev.js -0.2% -0.2% 2.48 KB 2.48 KB 937 B 935 B FB_WWW_DEV
ReactEventsInput-dev.js +0.2% +0.3% 4.43 KB 4.44 KB 1.38 KB 1.39 KB FB_WWW_DEV
ReactEventsSwipe-dev.js -0.3% -1.0% 6.59 KB 6.57 KB 1.73 KB 1.71 KB FB_WWW_DEV
react-events-drag.development.js -0.3% -0.6% 5.94 KB 5.92 KB 1.67 KB 1.66 KB UMD_DEV
react-events-keyboard.development.js -0.2% -0.4% 4.33 KB 4.32 KB 1.64 KB 1.64 KB UMD_DEV
ReactEventsFocus-dev.js -0.0% +0.4% 10.02 KB 10.01 KB 2.12 KB 2.13 KB FB_WWW_DEV
ReactEventsPress-dev.js -0.8% -1.2% 21.22 KB 21.04 KB 4.97 KB 4.91 KB FB_WWW_DEV
ReactEventsPress-prod.js -3.6% -1.2% 16.35 KB 15.76 KB 3.55 KB 3.51 KB FB_WWW_PROD
react-events-drag.development.js -0.3% -0.4% 7.7 KB 7.68 KB 2.34 KB 2.33 KB NODE_DEV
react-events-keyboard.development.js -0.2% -0.4% 4.15 KB 4.14 KB 1.59 KB 1.59 KB NODE_DEV
react-events-context-menu.development.js -0.2% 0.0% 2.69 KB 2.69 KB 1002 B 1002 B UMD_DEV
react-events-input.development.js +0.1% +0.1% 4.54 KB 4.54 KB 1.43 KB 1.44 KB UMD_DEV
react-events-swipe.development.js -0.4% -1.0% 6.59 KB 6.57 KB 1.75 KB 1.73 KB UMD_DEV
ReactEventsDrag-dev.js -0.3% -1.0% 5.79 KB 5.77 KB 1.58 KB 1.56 KB FB_WWW_DEV
react-events-input.production.min.js 0.0% -0.1% 1.82 KB 1.82 KB 973 B 972 B UMD_PROD
ReactEventsKeyboard-dev.js -0.2% -0.4% 4.22 KB 4.22 KB 1.58 KB 1.58 KB FB_WWW_DEV
react-events-context-menu.development.js -0.2% -0.2% 2.5 KB 2.5 KB 958 B 956 B NODE_DEV
react-events-input.development.js +0.1% +0.1% 4.35 KB 4.36 KB 1.39 KB 1.39 KB NODE_DEV
react-events-swipe.development.js -0.4% -1.1% 6.41 KB 6.38 KB 1.71 KB 1.69 KB NODE_DEV
react-events-input.production.min.js 0.0% -0.1% 1.65 KB 1.65 KB 907 B 906 B NODE_PROD
react-events-hover.development.js -0.1% -0.2% 6.59 KB 6.58 KB 1.66 KB 1.66 KB NODE_DEV
react-events-scroll.development.js -0.6% -0.3% 5.75 KB 5.72 KB 1.54 KB 1.54 KB NODE_DEV
react-events-hover.production.min.js 0.0% -0.1% 2.86 KB 2.86 KB 1.15 KB 1.15 KB NODE_PROD
react-events-focus.development.js -0.1% +0.5% 10.16 KB 10.16 KB 2.12 KB 2.13 KB UMD_DEV
react-events-press.development.js -0.9% -1.6% 20.72 KB 20.53 KB 4.88 KB 4.81 KB UMD_DEV
react-events-focus.production.min.js 0.0% -0.1% 3.94 KB 3.94 KB 1.32 KB 1.32 KB UMD_PROD
ReactEventsHover-dev.js -0.1% -0.2% 6.66 KB 6.65 KB 1.68 KB 1.68 KB FB_WWW_DEV
react-events-press.production.min.js -0.4% -0.3% 6.9 KB 6.87 KB 2.62 KB 2.61 KB UMD_PROD
ReactEventsScroll-dev.js -0.3% -0.1% 5.86 KB 5.84 KB 1.56 KB 1.56 KB FB_WWW_DEV
ReactEventsHover-prod.js -0.1% -0.1% 5.8 KB 5.8 KB 1.49 KB 1.49 KB FB_WWW_PROD
ReactEventsScroll-prod.js -0.1% -0.1% 4.48 KB 4.48 KB 1.33 KB 1.33 KB FB_WWW_PROD
react-events-focus.development.js -0.1% +0.1% 9.98 KB 9.97 KB 2.07 KB 2.08 KB NODE_DEV
react-events-press.development.js -0.9% -1.6% 20.53 KB 20.34 KB 4.83 KB 4.75 KB NODE_DEV
react-events-press.production.min.js -0.4% -0.3% 6.72 KB 6.69 KB 2.56 KB 2.55 KB NODE_PROD

react-reconciler

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-reconciler.development.js -0.3% -0.1% 577.06 KB 575.19 KB 122.57 KB 122.43 KB NODE_DEV
react-reconciler.production.min.js -0.1% -0.0% 68.52 KB 68.46 KB 20.37 KB 20.37 KB NODE_PROD
react-reconciler-reflection.development.js +0.2% +0.5% 19.09 KB 19.13 KB 6.22 KB 6.26 KB NODE_DEV
react-reconciler-persistent.development.js -0.3% -0.1% 574.07 KB 572.28 KB 121.28 KB 121.16 KB NODE_DEV
react-reconciler-persistent.production.min.js -0.1% -0.0% 68.53 KB 68.47 KB 20.38 KB 20.37 KB NODE_PROD

create-subscription

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
create-subscription.development.js -10.3% -8.6% 8 KB 7.17 KB 2.77 KB 2.53 KB NODE_DEV
create-subscription.production.min.js -20.6% -17.8% 2.53 KB 2.01 KB 1.19 KB 1004 B NODE_PROD

Generated by 🚫 dangerJS

@lunaruan lunaruan marked this pull request as ready for review Aug 7, 2019

@lunaruan lunaruan changed the title [Draft] Babel 7 Babel 7 Aug 7, 2019

@lunaruan lunaruan requested review from acdlite, gaearon and bvaughn Aug 7, 2019

Luna Ruan
"babel-plugin-check-es2015-constants": "^6.5.0",
"babel-plugin-external-helpers": "^6.22.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-jest": "^24.8.0",

This comment has been minimized.

Copy link
@SimenB

SimenB Aug 7, 2019

Contributor

you can remove babel-jest entirely, it's not used

This comment has been minimized.

Copy link
@lunaruan

lunaruan Aug 9, 2019

Author Contributor

Will do. Thanks!

'use strict';

module.exports = {
presets: ['@babel/preset-react', '@babel/preset-flow'],

This comment has been minimized.

Copy link
@acdlite

acdlite Aug 7, 2019

Member

Can we remove these presets and use the plugins directly? That way unexpected stuff can't sneak in.

describe('ReactFreshBabelPlugin', () => {
beforeEach(() => {

This comment has been minimized.

Copy link
@acdlite

acdlite Aug 7, 2019

Member

The reason Fresh throws an error if you're not in development environment is because the production build of React does not support hot reloading. React uses a process.env.NODE_ENV check (that's what __DEV__ compiles to), not BABEL_ENV. Technically, BABEL_ENV and NODE_ENV could be different, even though they're usually the same.

We should use __DEV__/NODE_ENV since that's what determines the version of React DOM.

if (__DEV__) {
  // The tests
} else {
  it('throw error if environment is not development', ...);
}
Luna Ruan added 3 commits Aug 8, 2019
plugins: [
'@babel/plugin-syntax-jsx',
'@babel/plugin-transform-react-jsx',
'@babel/plugin-transform-react-display-name',

This comment has been minimized.

Copy link
@acdlite

acdlite Aug 8, 2019

Member

Let's remove this one. Don't need it.

@acdlite
acdlite approved these changes Aug 8, 2019
Copy link
Member

left a comment

🎉🎉🎉🎉🎉🎉🎉🎉🎉

Ping me before you merge so we can make sure the commit gets attributed properly

Luna Ruan added 2 commits Aug 9, 2019
@bvaughn

This comment has been minimized.

Copy link
Contributor

commented Aug 9, 2019

Nice work @lunaruan !

@lunaruan lunaruan merged commit b12a982 into facebook:master Aug 9, 2019

12 checks passed

ci/circleci: build Your tests passed on CircleCI!
Details
ci/circleci: flow Your tests passed on CircleCI!
Details
ci/circleci: lint Your tests passed on CircleCI!
Details
ci/circleci: lint_build Your tests passed on CircleCI!
Details
ci/circleci: process_artifacts Your tests passed on CircleCI!
Details
ci/circleci: setup Your tests passed on CircleCI!
Details
ci/circleci: test_build Your tests passed on CircleCI!
Details
ci/circleci: test_build_prod Your tests passed on CircleCI!
Details
ci/circleci: test_dom_fixtures Your tests passed on CircleCI!
Details
ci/circleci: test_source Your tests passed on CircleCI!
Details
ci/circleci: test_source_persistent Your tests passed on CircleCI!
Details
ci/circleci: test_source_prod Your tests passed on CircleCI!
Details

@lunaruan lunaruan deleted the lunaruan:upgrade_babel branch Aug 9, 2019

// fail due to obsolete snapshots
process.env.NODE_ENV === 'development'
? '<rootDir>/packages/react-refresh/src/__tests__/ReactFreshBabelPluginProd-test.js'
: '<rootDir>/packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js',

This comment has been minimized.

Copy link
@gaearon

gaearon Aug 9, 2019

Member

This is kinda hacky. Can we figure out another way without making exceptions at this level?

@@ -134,12 +134,26 @@ const bundles = [
entry: 'react-dom/server.browser',
global: 'ReactDOMServer',
externals: ['react'],
babel: opts =>
Object.assign({}, opts, {
// Include JSX

This comment has been minimized.

Copy link
@gaearon

gaearon Aug 9, 2019

Member

The comment doesn't match the intention.

@TrySound

This comment has been minimized.

Copy link
Contributor

commented Aug 9, 2019

I would merge this first #15037

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
8 participants
You can’t perform that action at this time.