Upgrade to core-js@3. (#38660)

* Upgrade to core-js@3.

This entails not only updating the package, but also:
- Setting the core-js version in the babel config.
- Dropping @babel/polyfill and using core-js directly.
- Removing superfluous polyfills (e.g. URL).
- Removing superfluous runtime module replacements in evergreen.
- Modifying several entry points to use boot/polyfills rather than their
own code, including the server entry point.
- Minor lint fixes.

Remove polyfill-specific lib/url tests.

Don't use boot in standalone notifications.

Don't depend on boot from packages.

Update core-js to 3.6.2 to fix regex bugs.

Switch corejs option in preset-env to `3`.

Update core-js to 3.6.3.

* Explicitly include `globalThis` polyfill.

For some reason, it's not included in `stable` as it should be.

Also ensure that gridicons are transpiled.

* Switch back to core-js: 3.6  in config.

This helps avoid the globalThis workaround.

* Update corejs for dependencies too.

* Turn polyfills into a package.

* Changes after review.

* Remove gridicons transpilation whitelisting.

* Include calypso-polyfills in transpilation list.

* Add slash to package name in transpilation list.

apps/notifications/src/standalone/index.js

@@ -1,12 +1,21 @@
-import '@babel/polyfill';
+/**
+ * External dependencies
+ */
+import '@automattic/calypso-polyfills';
 import ReactDOM from 'react-dom';
 import React from 'react';
 
+/**
+ * Internal dependencies
+ */
 import Notifications, { refreshNotes } from '../panel/Notifications';
 import AuthWrapper from './auth-wrapper';
 import { receiveMessage, sendMessage } from './messaging';
 
-require( '../panel/boot/stylesheets/style.scss' );
+/**
+ * Style dependencies
+ */
+import '../panel/boot/stylesheets/style.scss';
 
 const localePattern = /[&?]locale=([\w_-]+)/;
 const match = localePattern.exec( document.location.search );
@@ -21,7 +30,7 @@ const customEnhancer = next => ( reducer, initialState ) =>
 const customMiddleware = {
 	APP_IS_READY: [ () => sendMessage( { action: 'iFrameReady' } ) ],
 	APP_RENDER_NOTES: [
-		( store, { latestType, newNoteCount } ) =>
+		( st, { latestType, newNoteCount } ) =>
 			newNoteCount > 0
 				? sendMessage( {
 						action: 'render',
@@ -31,35 +40,35 @@ const customMiddleware = {
 				: sendMessage( { action: 'renderAllSeen' } ),
 	],
 	CLOSE_PANEL: [ () => sendMessage( { action: 'togglePanel' } ) ],
-	OPEN_LINK: [ ( store, { href } ) => window.open( href, '_blank' ) ],
+	OPEN_LINK: [ ( st, { href } ) => window.open( href, '_blank' ) ],
 	OPEN_SITE: [
-		( store, { siteId, href } ) => {
+		( st, { siteId, href } ) => {
 			sendMessage( { action: 'openSite', siteId } );
 			window.open( href, '_blank' );
 		},
 	],
 	OPEN_POST: [
-		( store, { siteId, postId, href } ) => {
+		( st, { siteId, postId, href } ) => {
 			sendMessage( { action: 'openPost', siteId, postId } );
 			window.open( href, '_blank' );
 		},
 	],
 	OPEN_COMMENT: [
-		( store, { siteId, postId, commentId, href } ) => {
+		( st, { siteId, postId, commentId, href } ) => {
 			sendMessage( { action: 'openComment', siteId, postId, commentId } );
 			window.open( href, '_blank' );
 		},
 	],
 	SET_LAYOUT: [
-		( store, { layout } ) =>
+		( st, { layout } ) =>
 			sendMessage( {
 				action: 'widescreen',
 				widescreen: layout === 'widescreen',
 			} ),
 	],
 	VIEW_SETTINGS: [ () => window.open( 'https://wordpress.com/me/notifications' ) ],
 	EDIT_COMMENT: [
-		( store, { siteId, postId, commentId, href } ) => {
+		( st, { siteId, postId, commentId, href } ) => {
 			sendMessage( { action: 'editComment', siteId, postId, commentId } );
 			window.open( href, '_blank' );
 		},

babel.dependencies.config.js

@@ -7,7 +7,7 @@ const config = {
 			{
 				modules: false,
 				useBuiltIns: 'entry',
-				corejs: 2,
+				corejs: 3.6,
 				// Exclude transforms that make all code slower, see https://github.com/facebook/create-react-app/pull/5278
 				exclude: [ 'transform-typeof-symbol' ],
 			},

client/boot/polyfills.js

@@ -1,24 +1,13 @@
 /**
  * External dependencies
  */
-import '@babel/polyfill';
-import svg4everybody from 'svg4everybody';
-import '@webcomponents/url';
-import URLSearchParamsPolyfill from '@ungap/url-search-params';
-import 'isomorphic-fetch';
-import 'globalthis/auto';
+import '@automattic/calypso-polyfills';
 
 /**
  * Internal dependencies
  */
 import localStoragePolyfill from 'lib/local-storage-polyfill';
 
+// Only used in Calypso proper, so no need to turn into a package
+// and add to calypso-polyfills for now.
 localStoragePolyfill();
-
-const isBrowser = typeof window !== 'undefined';
-if ( isBrowser ) {
-	// Polyfill SVG external content support. Noop in the evergreen build.
-	svg4everybody();
-	// Polyfill URLSearchParams.
-	window.URLSearchParams = window.URLSearchParams || URLSearchParamsPolyfill;
-}

index.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 /* eslint-disable import/no-nodejs-modules */
 
-require( '@babel/polyfill' );
+require( '@automattic/calypso-polyfills' );
 
 /**
  * External dependencies.

package.json

@@ -34,6 +34,7 @@
 		]
 	},
 	"dependencies": {
+		"@automattic/calypso-polyfills": "file:./packages/calypso-polyfills",
 		"@automattic/color-studio": "2.2.0",
 		"@automattic/components": "file:./packages/components",
 		"@automattic/composite-checkout": "file:./packages/composite-checkout",
@@ -46,14 +47,11 @@
 		"@automattic/tree-select": "file:./packages/tree-select",
 		"@babel/cli": "7.7.5",
 		"@babel/core": "7.7.5",
-		"@babel/polyfill": "7.7.0",
 		"@babel/runtime": "7.7.6",
 		"@emotion/core": "10.0.22",
 		"@emotion/styled": "10.0.23",
 		"@github/webauthn-json": "0.4.1",
 		"@types/react-transition-group": "4.2.3",
-		"@ungap/url-search-params": "0.1.4",
-		"@webcomponents/url": "0.7.4",
 		"@wordpress/api-fetch": "3.8.0",
 		"@wordpress/base-styles": "1.1.0",
 		"@wordpress/block-editor": "3.4.0",
@@ -98,7 +96,6 @@
 		"component-file-picker": "0.2.1",
 		"cookie": "0.4.0",
 		"cookie-parser": "1.4.4",
-		"core-js": "2.6.10",
 		"cpf_cnpj": "0.2.0",
 		"create-react-class": "15.6.3",
 		"creditcards": "3.1.0",
@@ -129,7 +126,6 @@
 		"flux": "3.1.3",
 		"fuse.js": "3.4.6",
 		"get-video-id": "3.1.4",
-		"globalthis": "1.0.0",
 		"globby": "10.0.1",
 		"gridicons": "3.3.1",
 		"gzip-size": "5.1.1",
@@ -145,7 +141,6 @@
 		"imports-loader": "0.8.0",
 		"inherits": "2.0.4",
 		"is-my-json-valid": "2.20.0",
-		"isomorphic-fetch": "2.2.1",
 		"jquery": "1.12.3",
 		"keymaster": "1.6.2",
 		"lerna": "3.18.4",
@@ -199,7 +194,6 @@
 		"store": "2.0.12",
 		"striptags": "3.1.1",
 		"superagent": "3.8.3",
-		"svg4everybody": "2.1.9",
 		"textarea-caret": "3.1.0",
 		"tinymce": "4.9.6",
 		"to-title-case": "1.0.0",

packages/calypso-build/babel/default.js

@@ -16,7 +16,7 @@ module.exports = ( api, opts ) => ( {
 		[
 			require.resolve( '@babel/preset-env' ),
 			{
-				corejs: 2,
+				corejs: 3.6,
 				modules: modulesOption( opts ),
 				useBuiltIns: 'entry',
 				// Exclude transforms that make all code slower, see https://github.com/facebook/create-react-app/pull/5278

packages/calypso-polyfills/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+	rules: {
+		'import/no-extraneous-dependencies': [ 'error', { packageDir: __dirname } ],
+	},
+};

packages/calypso-polyfills/README.md

@@ -0,0 +1,30 @@
+# Calypso Polyfills
+
+This package includes several configurations for required polyfills for Calypso, targeting three different environments: node, evergreen (newer browsers) and fallback (older browsers).
+
+## Features
+
+`calypso-polyfills` ties into the Calypso build process, to ensure that only the required polyfills for each build target are needed. Through the use of Babel's `preset-env` and `browserslist` configurations, we strip out any polyfills that are supported for all browsers that are supported by that build target.
+
+See the root directory's `package.json` for the list of supported browsers for each build target.
+
+## Usage
+
+In Node.js, simply require the package:
+
+```js
+  require( '@automattic/calypso-polyfills' );
+```
+
+In a browser, a similar naked import will include the polyfills (defaulting to the `fallback` set):
+
+```js
+	import from '@automattic/calypso-polyfills';
+```
+
+If you want to explicitly include the `evergreen` or `fallback` polyfills, you can append to the import path:
+
+```js
+  import from '@automattic/calypso-polyfills/browser-evergreen';
+  import from '@automattic/calypso-polyfills/browser-fallback';
+```

packages/calypso-polyfills/browser-evergreen.js

@@ -0,0 +1,11 @@
+// Polyfills required for the "evergreen" build of Calypso.
+// Note that these polyfills will not necessarily be included in the build,
+// since Calypso makes use of @babel/preset-env and browserslist configs to
+// avoid including polyfills for features that are supported acroll all target
+// browsers.
+
+/**
+ * External dependencies
+ */
+import 'core-js/stable';
+import 'regenerator-runtime/runtime';