Babel Preset Default: Add polyfill for WordPress built from core-js (#…

…31279)

* Babel Preset Default: Add polyfill for WordPress built from core-js

* Address feedback from code review

.eslintrc.js

@@ -28,6 +28,7 @@ const developmentFiles = [
 	'**/benchmark/**/*.js',
 	'**/@(__mocks__|__tests__|test)/**/*.js',
 	'**/@(storybook|stories)/**/*.js',
+	'packages/babel-preset-default/bin/**/*.js',
 ];
 
 // All files from packages that have types provided with TypeScript.

package.json

@@ -156,6 +156,7 @@
 		"commander": "4.1.0",
 		"concurrently": "3.5.0",
 		"copy-webpack-plugin": "5.1.2",
+		"core-js-builder": "3.11.0",
 		"cross-env": "3.2.4",
 		"css-loader": "5.1.3",
 		"cssnano": "4.1.10",
@@ -205,6 +206,7 @@
 		"style-loader": "2.0.0",
 		"terser-webpack-plugin": "3.0.3",
 		"typescript": "4.1.3",
+		"uglify-js": "3.13.7",
 		"uuid": "8.3.0",
 		"wd": "1.12.1",
 		"webpack": "4.46.0",

packages/babel-preset-default/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### New Feature
+
+-   New `build/polyfill.js` (minified version – `build/polyfill.min.js`) file is available that polyfills ECMAScript features missing in the [browsers supported](https://make.wordpress.org/core/handbook/best-practices/browser-support/) by the WordPress project. It's a drop-in replacement for the deprecated `@babel/polyfill` package ([#31279](https://github.com/WordPress/gutenberg/pull/31279)).
+
 ## 6.1.0 (2021-05-20)
 
 ### Bug Fixes

packages/babel-preset-default/README.md

@@ -39,4 +39,14 @@ For example, if you'd like to use a new language feature proposal which has not
 }
 ```
 
+### Polyfill
+
+There is a complementary `build/polyfill.js` (minified version – `build/polyfill.min.js`) file available that polyfills ECMAScript features missing in the [browsers supported](https://make.wordpress.org/core/handbook/best-practices/browser-support/) by the WordPress project ([#31279](https://github.com/WordPress/gutenberg/pull/31279)). It's a drop-in replacement for the deprecated `@babel/polyfill` package, and it's also based on [`core-js`](https://github.com/zloirock/core-js) project.
+
+This needs to be included before all your compiled Babel code. You can either prepend it to your compiled code or include it in a `<script>` before it.
+
+#### TC39 Proposals
+
+If you need to use a proposal that is not Stage 4, this polyfill will not automatically import those for you. You will have to import those from another polyfill like [`core-js`](https://github.com/zloirock/core-js) individually.
+
 <br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>

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

@@ -0,0 +1,33 @@
+#!/usr/bin/env node
+
+/**
+ * External dependencies
+ */
+const builder = require( 'core-js-builder' );
+const { minify } = require( 'uglify-js' );
+const { writeFile } = require( 'fs' ).promises;
+
+builder( {
+	modules: [ 'es', 'web' ],
+	// core-js is extremely conservative in which polyfills to include.
+	// Knowing about tiny browser implementation bugs that anyone rarely cares about,
+	// we prevent some features from having the full polyfill included.
+	// @see https://github.com/WordPress/gutenberg/pull/31279
+	exclude: [ 'es.promise' ],
+	targets: require( '@wordpress/browserslist-config' ),
+	filename: './build/polyfill.js',
+} )
+	.then( async ( code ) => {
+		const output = minify( code, {
+			output: {
+				comments: ( node, comment ) =>
+					comment.value.indexOf( 'License' ) >= 0,
+			},
+		} );
+		await writeFile( './build/polyfill.min.js', output.code );
+	} )
+	.catch( ( error ) => {
+		// eslint-disable-next-line no-console
+		console.log( error );
+		process.exit( 1 );
+	} );

packages/babel-preset-default/package.json

@@ -24,6 +24,7 @@
 		"node": ">=12"
 	},
 	"files": [
+		"build",
 		"index.js"
 	],
 	"main": "index.js",
@@ -39,9 +40,12 @@
 		"@wordpress/element": "file:../element",
 		"@wordpress/warning": "file:../warning",
 		"browserslist": "^4.16.6",
-		"core-js": "^3.6.4"
+		"core-js": "^3.12.1"
 	},
 	"publishConfig": {
 		"access": "public"
+	},
+	"scripts": {
+		"build": "./bin/index.js"
 	}
 }

packages/react-native-editor/package.json

@@ -49,7 +49,7 @@
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/react-native-aztec": "file:../react-native-aztec",
 		"@wordpress/react-native-bridge": "file:../react-native-bridge",
-		"core-js": "^3.8.3",
+		"core-js": "^3.12.1",
 		"fast-average-color": "^4.3.0",
 		"jed": "^1.1.1",
 		"jsc-android": "^241213.1.0",