Framework: Use babel-polyfill in place of runtime builtins #9643

aduth · 2018-09-05T21:39:04Z

Fixes #9640
Related: #9275
Alternative to: #9641

This pull request seeks to disable our use of the @babel/runtime useBuiltIns option, replaced instead by @babel/polyfill as a dependency of every script registered by Gutenberg. This could be further enhanced to conditionally load the script only for browsers where expected features are not supported, but at this time it is not evident how such a condition would be formed.

While this technically adds a new script to be loaded, there is a net decrease in bundle size, from 2011.96kb total to 1803.72kb (+89.6kb polyfill) (minified, pre-gzip), for an overall savings of 118.64kb. Full build comparison below:

Before

                         ./build/blocks/index.js    219 KiB      23  [emitted]         blocks
                      ./build/wordcount/index.js     10 KiB       0  [emitted]         wordcount
                            ./build/url/index.js    8.9 KiB       2  [emitted]         url
                     ./build/token-list/index.js     13 KiB       3  [emitted]         tokenList
                      ./build/shortcode/index.js   16.2 KiB       4  [emitted]         shortcode
                  ./build/redux-routine/index.js   18.6 KiB       5  [emitted]         reduxRoutine
                        ./build/plugins/index.js   13.3 KiB       6  [emitted]         plugins
                            ./build/nux/index.js   16.6 KiB       7  [emitted]         nux
                       ./build/keycodes/index.js   3.64 KiB       8  [emitted]         keycodes
               ./build/is-shallow-equal/index.js   1.15 KiB       9  [emitted]         isShallowEqual
                           ./build/i18n/index.js   27.7 KiB      10  [emitted]         i18n
                  ./build/html-entities/index.js  986 bytes      11  [emitted]         htmlEntities
                          ./build/hooks/index.js   19.3 KiB      12  [emitted]         hooks
                        ./build/element/index.js   34.3 KiB      13  [emitted]         element
                         ./build/editor/index.js    371 KiB      14  [emitted]  [big]  editor
                      ./build/dom-ready/index.js  778 bytes      15  [emitted]         domReady
                            ./build/dom/index.js   15.4 KiB      16  [emitted]         dom
                     ./build/deprecated/index.js   10.9 KiB      17  [emitted]         deprecated
                           ./build/date/index.js    196 KiB      18  [emitted]         date
                           ./build/data/index.js   52.1 KiB      19  [emitted]         data
                      ./build/core-data/index.js   57.8 KiB      20  [emitted]         coreData
                        ./build/compose/index.js     18 KiB      21  [emitted]         compose
./build/block-serialization-spec-parser/index.js   9.48 KiB      22  [emitted]         blockSerializationSpecParser
                       ./build/viewport/index.js   13.3 KiB       1  [emitted]         viewport
                           ./build/blob/index.js  909 bytes      24  [emitted]         blob
                          ./build/autop/index.js   24.7 KiB      25  [emitted]         autop
                      ./build/api-fetch/index.js   35.2 KiB      26  [emitted]         apiFetch
                           ./build/a11y/index.js   5.32 KiB      27  [emitted]         a11y
                  ./build/block-library/index.js    217 KiB      28  [emitted]         blockLibrary
                      ./build/edit-post/index.js   87.4 KiB      29  [emitted]         editPost
                     ./build/components/index.js    494 KiB      30  [emitted]  [big]  components

After

                         ./build/blocks/index.js    191 KiB      23  [emitted]         blocks
                      ./build/wordcount/index.js   2.53 KiB       0  [emitted]         wordcount
                            ./build/url/index.js    8.9 KiB       2  [emitted]         url
                     ./build/token-list/index.js   2.39 KiB       3  [emitted]         tokenList
                      ./build/shortcode/index.js   8.89 KiB       4  [emitted]         shortcode
                  ./build/redux-routine/index.js   18.6 KiB       5  [emitted]         reduxRoutine
                        ./build/plugins/index.js   11.7 KiB       6  [emitted]         plugins
                            ./build/nux/index.js   16.6 KiB       7  [emitted]         nux
                       ./build/keycodes/index.js   3.64 KiB       8  [emitted]         keycodes
               ./build/is-shallow-equal/index.js   1.15 KiB       9  [emitted]         isShallowEqual
                           ./build/i18n/index.js   24.6 KiB      10  [emitted]         i18n
                  ./build/html-entities/index.js  986 bytes      11  [emitted]         htmlEntities
                          ./build/hooks/index.js   10.2 KiB      12  [emitted]         hooks
                        ./build/element/index.js   24.3 KiB      13  [emitted]         element
                         ./build/editor/index.js    354 KiB      14  [emitted]  [big]  editor
                      ./build/dom-ready/index.js  778 bytes      15  [emitted]         domReady
                            ./build/dom/index.js   11.4 KiB      16  [emitted]         dom
                     ./build/deprecated/index.js   7.02 KiB      17  [emitted]         deprecated
                           ./build/date/index.js    191 KiB      18  [emitted]         date
                           ./build/data/index.js   43.3 KiB      19  [emitted]         data
                      ./build/core-data/index.js   48.9 KiB      20  [emitted]         coreData
                        ./build/compose/index.js   8.28 KiB      21  [emitted]         compose
./build/block-serialization-spec-parser/index.js   9.48 KiB      22  [emitted]         blockSerializationSpecParser
                       ./build/viewport/index.js   2.77 KiB       1  [emitted]         viewport
                           ./build/blob/index.js  909 bytes      24  [emitted]         blob
                          ./build/autop/index.js   11.8 KiB      25  [emitted]         autop
                      ./build/api-fetch/index.js   28.9 KiB      26  [emitted]         apiFetch
                           ./build/a11y/index.js    1.8 KiB      27  [emitted]         a11y
                  ./build/block-library/index.js    202 KiB      28  [emitted]         blockLibrary
                      ./build/edit-post/index.js   77.9 KiB      29  [emitted]         editPost
                     ./build/components/index.js    478 KiB      30  [emitted]  [big]  components

Testing instructions:

Repeat Steps to Reproduce from #9640, verifying both in Internet Explorer and in your preferred browser that there are no issues loading or using the editor.

youknowriad · 2018-09-05T21:51:07Z

packages/babel-preset-default/index.js

This is a breaking change for this package, should we update the changelog accordingly?

We can do some cleanup to the get-babel-config.js file and remove the override of useBuiltIns: false,

youknowriad · 2018-09-05T21:53:51Z

Nice work, I can't test and approve at the moment. It will be the first thing I'll do in the morning unless someone beats me to it.

gziolo · 2018-09-06T07:38:45Z

5 unit tests failed, investigating.

gziolo · 2018-09-06T07:42:10Z

This is very similar but simpler approach taken to what I was trying to do in #9275. I really like where it is going. Let's close #9275 and #9641 and focus to get this one in 💯

youknowriad · 2018-09-06T09:26:36Z

I included a small CSS tweak to fix the block toolbars in 43cde18 (display flex elements in IE need flex-shrink: 0) if they are inside other flex elements :)

I didn't do a separate PR because people won't be able to test otherwise.

…iled files

youknowriad · 2018-09-06T10:42:21Z

Hey hey looks like the tests pass now 🎉

gziolo · 2018-09-06T10:37:28Z

lib/client-assets.php

+	);
+	wp_add_inline_script(
+		'wp-polyfill-fetch',
+		'wp.deprecated( "wp-polyfill-fetch script handle", { plugin: "Gutenberg", version: "4.0" } );'


Does it mean that wp-polyfill-ecmascript contains also polyfill for fetch?

I can see some code for Promise in https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.0.0/polyfill.js, but can't see anything related to fetch.

Since it relies on core-js I don't think it's included https://github.com/zloirock/core-js#missing-polyfills

Yeah, occurred to me as well the polyfill is only going to provide language features (the specification). Since fetch is a browser standard, it needs to remain polyfilled. I'll add back.

gziolo · 2018-09-06T10:41:01Z

packages/babel-preset-default/index.js

-				useBuiltIns: 'usage',
 			} ],
 			isTestEnv && [ '@babel/preset-env', {
 				useBuiltIns: 'usage',


I had to revert the change which removes:
useBuiltIns: 'usage',
from test environment because some tests were failing. Those which use Array.values method which isn't supported by Node.

@youknowriad suggested using babel-polyfill instead to have the setup closer to the browser but I found out that it can cause memory issues with Jest. See jestjs/jest#2755 and the line in the changelog:

Breaking Change: Replaced auto-loading of babel-polyfill with only regenerator-runtime, fixes a major memory leak.

gziolo · 2018-09-06T10:41:58Z

packages/babel-preset-default/test/index.js


 		const output = transform( input, {
 			configFile: false,
+			envName: 'production',


With this change, we test again production configuration rather than test env ... It is more helpful now :)

gziolo · 2018-09-06T10:43:42Z

We still need to test it against IE11, @jorgefilipecosta or @tofumatt can you help to ensure it works consistently?

tofumatt

This isn't working for me in IE11, it seems there is no fetch polypill. When the editor goes to autosave it gets stuck on "Autosaving…" with this error:

TypeError: Object doesn't support property or method 'fetch'

Not part of ECMAScript standard, so not provided through Babel polyfill

youknowriad

LGTM 👍 Tested in IE and chrome. Works great.

tofumatt · 2018-09-06T12:35:34Z

I didn't re-test in IE but if @youknowriad says it works in IE11 that's good enough for me; dismissing my review 😄

aduth added [Type] Bug An existing feature does not function as intended Browser Issues Issues or PRs that are related to browser specific problems labels Sep 5, 2018

aduth added this to the 3.8 milestone Sep 5, 2018

aduth requested a review from gziolo September 5, 2018 21:39

aduth mentioned this pull request Sep 5, 2018

Framework: Use @babel/runtime universally #9641

Closed

youknowriad reviewed Sep 5, 2018

View reviewed changes

gziolo mentioned this pull request Sep 6, 2018

Build tools: Use Webpack splitChunks feature to extract duplicated babel runtime #9275

Closed

6 tasks

gziolo added the [Priority] High Used to indicate top priority items that need quick attention label Sep 6, 2018

aduth and others added 6 commits September 6, 2018 12:29

Framework: Use babel-polyfill in place of runtime builtins

91593e2

Packages: Babel Preset Default: Note breaking change to omit useBuiltIns

f64e7b4

Fix unit test failure due to the removal of polyfills from the transp…

d77cf58

…iled files

Remove polyfills from all our babel configs

aceb6be

Further improve Babel preset to work properly with test env

3a3395b

Fix Babel preset configuration for tests

06a2231

gziolo force-pushed the fix/ecmascript-polyfill branch from 43cde18 to 06a2231 Compare September 6, 2018 10:30

gziolo reviewed Sep 6, 2018

View reviewed changes

tofumatt requested changes Sep 6, 2018

View reviewed changes

youknowriad and others added 2 commits September 6, 2018 13:11

Fix the block toolbar styling issues in IE

e0f3853

Framework: Restore window fetch polyfill

260e7e1

Not part of ECMAScript standard, so not provided through Babel polyfill

youknowriad approved these changes Sep 6, 2018

View reviewed changes

tofumatt approved these changes Sep 6, 2018

View reviewed changes

Framework: Alphabetize script dependencies

871ce31

aduth merged commit 400cba8 into master Sep 6, 2018

aduth deleted the fix/ecmascript-polyfill branch September 6, 2018 13:20

aduth mentioned this pull request Sep 6, 2018

Packages: Change how required built-ins are polyfilled with Babel 7 #9171

Merged

6 tasks

atimmer mentioned this pull request Sep 10, 2018

Include babel-polyfill in a Gutenberg 3.8 compatible way Yoast/wordpress-seo#10953

Closed

IreneStr mentioned this pull request Sep 12, 2018

Use correct babel-polyfill based on Gutenberg's presence Yoast/wordpress-seo#10969

Merged

1 task

iandunn mentioned this pull request Sep 18, 2018

Gutenberg Not Working: White Page Admin Area (solved 3 separate issues: theme conflict, file blocked at host level, Apache config blocking anything with "data" in the name) #9979

Closed

gziolo mentioned this pull request Feb 15, 2019

Published NPM package silently depend on the 'regeneratorRuntime' global #13890

Closed

gziolo mentioned this pull request Oct 30, 2020

Restore core-js and useBuiltIns = usage #26576

Closed

Framework: Use babel-polyfill in place of runtime builtins #9643

Framework: Use babel-polyfill in place of runtime builtins #9643

Uh oh!

Conversation

aduth commented Sep 5, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

youknowriad commented Sep 5, 2018

Uh oh!

gziolo commented Sep 6, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gziolo commented Sep 6, 2018

Uh oh!

youknowriad commented Sep 6, 2018

Uh oh!

youknowriad commented Sep 6, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gziolo commented Sep 6, 2018

Uh oh!

tofumatt left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

youknowriad left a comment

Choose a reason for hiding this comment

Uh oh!

tofumatt commented Sep 6, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

aduth commented Sep 5, 2018 •

edited

Loading

gziolo commented Sep 6, 2018 •

edited

Loading

tofumatt left a comment •

edited

Loading