Build: move dependency transpilation config to calypso-build

Alternative to #33492 which still uses the special Babel config for transpiling dependencies,
but moves it to the `calypso-build` package.

This PR, unlike #33492, doesn't attempt to transpile both app and `node_modules` code with the
same Babel config. It keeps the separation and shouldn't cause any changes in output -- just
moves code to a different location.

Also, this approach is in line with what Create React App does.

After merging this, `calypso-build` should start transpiling dependencies out of the box, without
any configuration. Jetpack can just upgrade to the new version and be done.

packages/calypso-build/CHANGELOG.md

@@ -6,6 +6,7 @@
 - Upgrade to [sass-loader@8](https://github.com/webpack-contrib/sass-loader/releases/tag/v8.0.0)
 - Add basic TypeScript config, `tsconfig.json` (for projects to extend).
 - Replace `copy-styles` with a generic `copy-assets` script to handle both styles and images.
+- Add support for transpiling selected NPM dependencies from ESnext to the target's ES version.
 
 # 5.0.1
 

babel.dependencies.config.js → packages/calypso-build/babel/dependencies.js

@@ -1,4 +1,4 @@
-const config = {
+module.exports = () => ( {
 	// see https://github.com/webpack/webpack/issues/4039#issuecomment-419284940
 	sourceType: 'unambiguous',
 	presets: [
@@ -25,6 +25,4 @@ const config = {
 			},
 		],
 	],
-};
-
-module.exports = config;
+} );

packages/calypso-build/webpack.config.js

@@ -20,7 +20,7 @@ const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extrac
 /**
  * Internal dependencies
  */
-const { cssNameFromFilename } = require( './webpack/util' );
+const { cssNameFromFilename, shouldTranspileDependency } = require( './webpack/util' );
 // const { workerCount } = require( './webpack.common' ); // todo: shard...
 
 /**
@@ -112,6 +112,12 @@ function getWebpackConfig(
 					presets,
 					workerCount,
 				} ),
+				TranspileConfig.loader( {
+					cacheDirectory: true,
+					include: shouldTranspileDependency,
+					presets: [ path.join( __dirname, 'babel', 'dependencies' ) ],
+					workerCount,
+				} ),
 				SassConfig.loader( { postCssConfig: { path: postCssConfigPath } } ),
 				FileConfig.loader(),
 			],

packages/calypso-build/webpack/util.js

@@ -67,4 +67,52 @@ function IncrementalProgressPlugin() {
 	return new webpack.ProgressPlugin( createProgressHandler() );
 }
 
-module.exports = { cssNameFromFilename, IncrementalProgressPlugin };
+const nodeModulesToTranspile = [
+	// general form is <package-name>/.
+	// The trailing slash makes sure we're not matching these as prefixes
+	// In some cases we do want prefix style matching (lodash. for lodash.assign)
+	'@automattic/calypso-polyfills/',
+	'@github/webauthn-json/',
+	'acorn-jsx/',
+	'chalk/',
+	'd3-array/',
+	'd3-scale/',
+	'debug/',
+	'escape-string-regexp/',
+	'filesize/',
+	'prismjs/',
+	'react-spring/',
+	'regenerate-unicode-properties/',
+	'regexpu-core/',
+	'striptags/',
+	'unicode-match-property-ecmascript/',
+	'unicode-match-property-value-ecmascript/',
+];
+
+/**
+ * Check to see if we should transpile certain files in node_modules
+ *
+ * @param {string} filepath the path of the file to check
+ * @returns {boolean} True if we should transpile it, false if not
+ *
+ * We had a thought to try to find the package.json and use the engines property
+ * to determine what we should transpile, but not all libraries set engines properly
+ * (see d3-array@2.0.0). Instead, we transpile libraries we know to have dropped Node 4 support
+ * are likely to remain so going forward.
+ */
+function shouldTranspileDependency( filepath ) {
+	// find the last index of node_modules and check from there
+	// we want <working>/node_modules/a-package/node_modules/foo/index.js to only match foo, not a-package
+	const marker = '/node_modules/';
+	const lastIndex = filepath.lastIndexOf( marker );
+	if ( lastIndex === -1 ) {
+		// we're not in node_modules
+		return false;
+	}
+
+	const checkFrom = lastIndex + marker.length;
+
+	return nodeModulesToTranspile.some( modulePart => filepath.startsWith( modulePart, checkFrom ) );
+}
+
+module.exports = { cssNameFromFilename, IncrementalProgressPlugin, shouldTranspileDependency };

webpack.config.js

@@ -25,6 +25,7 @@ const TranspileConfig = require( '@automattic/calypso-build/webpack/transpile' )
 const {
 	cssNameFromFilename,
 	IncrementalProgressPlugin,
+	shouldTranspileDependency,
 } = require( '@automattic/calypso-build/webpack/util' );
 const ExtensiveLodashReplacementPlugin = require( '@automattic/webpack-extensive-lodash-replacement-plugin' );
 
@@ -60,56 +61,6 @@ if ( ! process.env.BROWSERSLIST_ENV ) {
 	process.env.BROWSERSLIST_ENV = browserslistEnv;
 }
 
-const nodeModulesToTranspile = [
-	// general form is <package-name>/.
-	// The trailing slash makes sure we're not matching these as prefixes
-	// In some cases we do want prefix style matching (lodash. for lodash.assign)
-	'@automattic/calypso-polyfills/',
-	'@github/webauthn-json/',
-	'acorn-jsx/',
-	'chalk/',
-	'd3-array/',
-	'd3-scale/',
-	'debug/',
-	'escape-string-regexp/',
-	'filesize/',
-	'prismjs/',
-	'react-spring/',
-	'regenerate-unicode-properties/',
-	'regexpu-core/',
-	'striptags/',
-	'unicode-match-property-ecmascript/',
-	'unicode-match-property-value-ecmascript/',
-];
-/**
- * Check to see if we should transpile certain files in node_modules
- *
- * @param {string} filepath the path of the file to check
- * @returns {boolean} True if we should transpile it, false if not
- *
- * We had a thought to try to find the package.json and use the engines property
- * to determine what we should transpile, but not all libraries set engines properly
- * (see d3-array@2.0.0). Instead, we transpile libraries we know to have dropped Node 4 support
- * are likely to remain so going forward.
- */
-function shouldTranspileDependency( filepath ) {
-	// find the last index of node_modules and check from there
-	// we want <working>/node_modules/a-package/node_modules/foo/index.js to only match foo, not a-package
-	const marker = '/node_modules/';
-	const lastIndex = filepath.lastIndexOf( marker );
-	if ( lastIndex === -1 ) {
-		// we're not in node_modules
-		return false;
-	}
-
-	const checkFrom = lastIndex + marker.length;
-
-	return _.some(
-		nodeModulesToTranspile,
-		modulePart => filepath.substring( checkFrom, checkFrom + modulePart.length ) === modulePart
-	);
-}
-
 let outputFilename = '[name].[chunkhash].min.js'; // prefer the chunkhash, which depends on the chunk, not the entire build
 let outputChunkFilename = '[name].[chunkhash].min.js'; // ditto
 
@@ -194,7 +145,7 @@ const webpackConfig = {
 			} ),
 			TranspileConfig.loader( {
 				workerCount,
-				configFile: path.resolve( __dirname, 'babel.dependencies.config.js' ),
+				presets: [ require.resolve( '@automattic/calypso-build/babel/dependencies' ) ],
 				cacheDirectory: path.join( __dirname, 'build', '.babel-client-cache', extraPath ),
 				cacheIdentifier,
 				include: shouldTranspileDependency,