Build Calypso for multiple targets: fallback and evergreen. (#30768)

Thi PR reworks the build infrastructure to support two
separate builds, and to serve the correct one to each
user, based on user agent string.

Squashed commits:

Unify browserslist usage based on package.json.

This commit:
- Uses the browserslist definition to configure Terser ES6 and
  browser-specific settings.
- Prepares package.json for multiple browserslists, to enable
  builds for multiple targets.
- Defines the BROWSERSLIST_ENV environment variable in the NPM
  scripts, which is used by all browserslist-aware
  tools to pick the right configuration.

Hardcode IE8 support to false

Add documentation for chooseTerserEcmaVersion function.

Make Calypso generate two builds: evergreen and fallback.

We currently have a single, fallback build, which includes support
for every supported browser. This results in a large amount of
polyfills and syntactic transformations which bloat the bundle and
increase browser download and execution times.

This PR aims to generate a separate evergreen build in production,
and serve that build instead to evergreen browsers, by doing
user agent detection. Other browsers will still work, since they
have the fallback bundle, but known modern browsers will get the
benefit of a smaller bundle.

Remove assignment from noModule property.

Write fallback build files to public/fallback.

Fix dev builds and make them use 'evergreen' settings.

Rename isEvergreen prop to addEvergreenCheck

Only run AssetsWriter for client builds.

Ensure non-client builds use defaults instead of evergreen.

Remove unreleased Safari versions from browserslist.

Make fallback and evergreen builds happen in parallel.

Fix arrow functions being used as constructors

Ensure that BROWSERSLIST_ENV is always defined in WebPack

Remove NODE_ARGS from build-client-both

Ensure that `analyze-bundles` correctly uses the evergreen build.

Ensure that icfy-analyze.js uses the evergreen build.

Fix build cache paths after changes to the build process.

.gitignore

@@ -31,21 +31,37 @@ lerna-debug.log
 
 /build
 
-/public/*.js
-/public/*.js.map
 /public/*.css
 /public/*.css.map
-/public/vendors~*
-/public/sections/*
-/public/sections-rtl/*
-/public/images/*.gif
-/public/images/*.jpg
-/public/images/*.png
-/public/images/*.svg
+
+/public/fallback/*.js
+/public/fallback/*.js.map
+/public/fallback/*.css
+/public/fallback/*.css.map
+/public/fallback/vendors~*
+/public/fallback/sections/*
+/public/fallback/sections-rtl/*
+/public/fallback/images/*.gif
+/public/fallback/images/*.jpg
+/public/fallback/images/*.png
+/public/fallback/images/*.svg
+
+/public/evergreen/*.js
+/public/evergreen/*.js.map
+/public/evergreen/*.css
+/public/evergreen/*.css.map
+/public/evergreen/vendors~*
+/public/evergreen/sections/*
+/public/evergreen/sections-rtl/*
+/public/evergreen/images/*.gif
+/public/evergreen/images/*.jpg
+/public/evergreen/images/*.png
+/public/evergreen/images/*.svg
+
 /server/devdocs/search-index.js
 /server/devdocs/components-usage-stats.json
 /server/devdocs/proptypes-index.json
-/server/bundler/assets.json
+/server/bundler/assets*.json
 
 *.rdb
 *.db

bin/icfy-analyze.js

@@ -11,7 +11,7 @@ function analyzeBundle() {
 	console.log( 'Analyze: reading stats.json file' );
 	const stats = readStatsFromFile( 'stats.json' );
 	console.log( 'Analyze: analyzing' );
-	const chart = getViewerData( stats, './public' );
+	const chart = getViewerData( stats, './public/evergreen' );
 	console.log( 'Analyze: writing chart.json file' );
 	writeFileSync( 'chart.json', JSON.stringify( chart, null, 2 ) );
 	console.log( 'Analyze: analyzing the style.css file' );

client/components/tinymce/plugins/contact-form/plugin.jsx

@@ -26,7 +26,7 @@ import {
 import { serialize, deserialize } from './shortcode-utils';
 import { renderWithReduxStore } from 'lib/react-helpers';
 
-const wpcomContactForm = editor => {
+function wpcomContactForm( editor ) {
 	let node;
 	const store = editor.getParam( 'redux_store' );
 
@@ -100,14 +100,15 @@ const wpcomContactForm = editor => {
 		onPostRender() {
 			this.innerHtml(
 				renderToStaticMarkup(
+					// eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
 					<button type="button" role="presentation">
 						<GridiconMention />
 					</button>
 				)
 			);
 		},
 	} );
-};
+}
 
 export default () => {
 	tinymce.PluginManager.add( 'wpcom/contactform', wpcomContactForm );

client/components/tinymce/plugins/embed/plugin.js

@@ -19,7 +19,7 @@ import { renderWithReduxStore } from 'lib/react-helpers';
  *
  * @param {object} editor An instance of TinyMCE
  */
-const embed = editor => {
+function embed( editor ) {
 	let embedDialogContainer;
 
 	/**
@@ -64,7 +64,7 @@ const embed = editor => {
 		embedDialogContainer.parentNode.removeChild( embedDialogContainer );
 		embedDialogContainer = null;
 	} );
-};
+}
 
 export default () => {
 	tinymce.PluginManager.add( 'embed', embed );

client/components/tinymce/plugins/insert-menu/plugin.jsx

@@ -13,7 +13,7 @@ import GridiconAddOutline from 'gridicons/dist/add-outline';
  */
 import { menuItems, GridiconButton } from './menu-items';
 
-const initialize = editor => {
+function initialize( editor ) {
 	menuItems.forEach( item =>
 		editor.addMenuItem( item.name, {
 			classes: 'wpcom-insert-menu__menu-item',
@@ -37,7 +37,7 @@ const initialize = editor => {
 			);
 		},
 	} );
-};
+}
 
 export default () => {
 	tinymce.PluginManager.add( 'wpcom/insertmenu', initialize );

client/components/tinymce/plugins/simple-payments/plugin.jsx

@@ -15,7 +15,7 @@ import SimplePaymentsDialog from './dialog';
 import { serialize, deserialize } from './shortcode-utils';
 import { renderWithReduxStore } from 'lib/react-helpers';
 
-const simplePayments = editor => {
+function simplePayments( editor ) {
 	let node;
 	const store = editor.getParam( 'redux_store' );
 
@@ -57,7 +57,7 @@ const simplePayments = editor => {
 
 		renderModal();
 	} );
-};
+}
 
 export default () => {
 	tinymce.PluginManager.add( 'wpcom/simplepayments', simplePayments );

client/document/index.jsx

@@ -62,6 +62,7 @@ class Document extends React.Component {
 			feedbackURL,
 			inlineScriptNonce,
 			isSupportSession,
+			addEvergreenCheck,
 		} = this.props;
 
 		const csskey = isRTL ? 'css.rtl' : 'css.ltr';
@@ -176,13 +177,37 @@ class Document extends React.Component {
 						} }
 					/>
 
+					{ // Use <script nomodule> to redirect browsers with no ES module
+					// support to the fallback build. ES module support is a convenient
+					// test to determine that a browser is modern enough to handle
+					// the evergreen bundle.
+					addEvergreenCheck && (
+						<script
+							nonce={ inlineScriptNonce }
+							noModule
+							dangerouslySetInnerHTML={ {
+								__html: `
+							(function() {
+								var url = window.location.href;
+
+								if ( url.indexOf( 'forceFallback=1' ) === -1 ) {
+									url += ( url.indexOf( '?' ) !== -1 ? '&' : '?' );
+									url += 'forceFallback=1';
+									window.location.href = url;
+								}
+							})();
+							`,
+							} }
+						/>
+					) }
+
 					{ i18nLocaleScript && <script src={ i18nLocaleScript } /> }
 					{ /*
 					 * inline manifest in production, but reference by url for development.
 					 * this lets us have the performance benefit in prod, without breaking HMR in dev
 					 * since the manifest needs to be updated on each save
 					 */ }
-					{ env === 'development' && <script src="/calypso/manifest.js" /> }
+					{ env === 'development' && <script src="/calypso/evergreen/manifest.js" /> }
 					{ env !== 'development' && (
 						<script
 							nonce={ inlineScriptNonce }