Use webpack config JS package in Jetpack

projects/plugins/jetpack/babel.config.js

@@ -1,65 +1,46 @@
-/**
- * A babel preset wrapper to set @babel/plugin-transform-runtime's absoluteRuntime to true.
- *
- * @param {string|Function} preset - The preset being wrapped.
- * @returns {Function} The wrapped preset-function.
- */
-function presetOverrideBabelPluginTransformRuntimeAbsoluteRuntime( preset ) {
-	if ( 'string' === typeof preset ) {
-		preset = require( preset );
-	}
-	return ( api, opts ) => {
-		const ret = preset( api, opts );
-		// Override the configuration for @babel/plugin-transform-runtime to set absoluteRuntime true.
-		// This prevents it from blowing up when other workspace projects are symlinked.
-		ret.plugins.forEach( p => {
-			if ( Array.isArray( p ) && /[\\/]@babel[\\/]plugin-transform-runtime[\\/]/.test( p[ 0 ] ) ) {
-				p[ 1 ].absoluteRuntime = true;
-			}
-		} );
-		return ret;
-	};
-}
-
 const config = {
-	presets: [
-		presetOverrideBabelPluginTransformRuntimeAbsoluteRuntime(
-			'@automattic/calypso-build/babel/default'
-		),
-	],
+	presets: [ '@automattic/jetpack-webpack-config/babel/preset' ],
 	plugins: [ '@babel/plugin-proposal-nullish-coalescing-operator' ],
 	overrides: [
 		{
 			test: './extensions/',
-			presets: [ require.resolve( '@automattic/calypso-build/babel/wordpress-element' ) ],
+			presets: [],
+			plugins: [
+				[
+					require.resolve( '@wordpress/babel-plugin-import-jsx-pragma' ),
+					{
+						scopeVariable: 'createElement',
+						scopeVariableFrag: 'Fragment',
+						source: '@wordpress/element',
+						isDefault: false,
+					},
+				],
+				[
+					require.resolve( '@babel/plugin-transform-react-jsx' ),
+					{
+						pragma: 'createElement',
+						pragmaFrag: 'Fragment',
+					},
+				],
+			],
 		},
 		{
 			// Transpile ES Modules syntax (`import`) in config files (but not elsewhere)
 			test: [ './gulpfile.babel.js', './tools/webpack.config.js', './tools/builder/' ],
 			presets: [
 				[
-					presetOverrideBabelPluginTransformRuntimeAbsoluteRuntime(
-						'@automattic/calypso-build/babel/default'
-					),
-					{ modules: 'commonjs' },
+					'@automattic/jetpack-webpack-config/babel/preset',
+					{ presetEnv: { modules: 'commonjs' } },
 				],
 			],
 		},
 		{
 			test: './modules/search/instant-search',
-			presets: [
-				presetOverrideBabelPluginTransformRuntimeAbsoluteRuntime(
-					'./modules/search/instant-search/babel.config.js'
-				),
-			],
+			presets: [ './modules/search/instant-search/babel.config.js' ],
 		},
 		{
 			test: './modules/search/customberg',
-			presets: [
-				presetOverrideBabelPluginTransformRuntimeAbsoluteRuntime(
-					'./modules/search/customberg/babel.config.js'
-				),
-			],
+			presets: [ './modules/search/customberg/babel.config.js' ],
 		},
 	],
 	env: {

projects/plugins/jetpack/changelog/add-webpack-config-js-package

@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Update webpack build config.

projects/plugins/jetpack/jest.config.js

@@ -4,17 +4,23 @@
 const path = require( 'path' );
 
 module.exports = {
-	preset: '@automattic/calypso-build',
 	testEnvironment: 'jsdom',
+	testMatch: [ '<rootDir>/**/test/*.[jt]s?(x)', '!**/.eslintrc.*' ],
 	roots: [ '<rootDir>/extensions/', '<rootDir>/modules/search/instant-search' ],
 	transform: {
 		'\\.[jt]sx?$': path.join( __dirname, 'tests', 'jest-extensions-babel-transform' ),
-		'\\.(gif|jpg|jpeg|png|svg|scss|sass|css)$': require.resolve(
-			'@automattic/calypso-build/jest/transform/asset'
+		'\\.(gif|jpg|jpeg|png|svg|scss|sass|css)$': path.join(
+			__dirname,
+			'tests/jest-extensions-asset-stub'
 		),
 	},
 	coverageDirectory: 'coverage/extensions',
 	setupFiles: [ '<rootDir>/tests/jest-globals.js' ],
+	setupFilesAfterEnv: [
+		path.join( __dirname, 'tests/jest-enzyme-init.js' ),
+		require.resolve( 'jest-enzyme' ),
+	],
+	snapshotSerializers: [ 'enzyme-to-json/serializer' ],
 	testPathIgnorePatterns: [ 'node_modules', 'extensions/shared/test/block-fixtures.js' ],
 	moduleNameMapper: {
 		'tiny-lru/lib/tiny-lru.esm$':

projects/plugins/jetpack/modules/search/instant-search/babel.config.js

@@ -1,28 +1,16 @@
-const calypsoBuildPreset = require( '@automattic/calypso-build/babel/default' );
-const browserTargets = require( '@wordpress/browserslist-config' );
-
-// Drop IE 11 from Babel bundle; IE 11 support added separately via PHP.
-const targets = [ ...browserTargets.filter( target => ! target.includes( 'ie' ) ), 'not ie > 0' ];
-
-module.exports = ( api, opts ) => {
-	const defaultConfig = calypsoBuildPreset( api, opts );
+module.exports = () => {
 	return {
 		presets: [
 			[
-				require.resolve( '@babel/preset-env' ),
+				'@automattic/jetpack-webpack-config/babel/preset',
 				{
-					corejs: '3.8.3',
-					ignoreBrowserslistConfig: true,
-					modules: false,
-					targets,
-					useBuiltIns: 'usage',
-					// Exclude transforms that make all code slower, see https://github.com/facebook/create-react-app/pull/5278
-					exclude: [ 'transform-typeof-symbol' ],
+					presetEnv: {
+						corejs: '3.8.3',
+						modules: false,
+						useBuiltIns: 'usage',
+					},
 				},
 			],
-			require.resolve( '@babel/preset-react' ),
-			require.resolve( '@babel/preset-typescript' ),
 		],
-		plugins: defaultConfig.plugins,
 	};
 };

projects/plugins/jetpack/package.json

@@ -59,7 +59,6 @@
 		"extends @wordpress/browserslist-config"
 	],
 	"dependencies": {
-		"@automattic/calypso-build": "9.0.0",
 		"@automattic/calypso-color-schemes": "2.1.1",
 		"@automattic/components": "1.0.0-alpha.3",
 		"@automattic/format-currency": "1.0.0-alpha.0",
@@ -71,7 +70,6 @@
 		"@automattic/request-external-access": "1.0.0",
 		"@automattic/social-previews": "1.1.1",
 		"@automattic/viewport": "1.0.0",
-		"@babel/runtime": "7.15.3",
 		"@wordpress/annotations": "2.2.5",
 		"@wordpress/base-styles": "4.0.2",
 		"@wordpress/block-editor": "7.0.4",
@@ -151,20 +149,24 @@
 		"webpack-cli": "4.8.0"
 	},
 	"devDependencies": {
+		"@automattic/jetpack-webpack-config": "workspace:^0.1.0-alpha",
 		"@automattic/color-studio": "2.5.0",
 		"@babel/core": "7.15.0",
 		"@babel/plugin-proposal-nullish-coalescing-operator": "7.14.5",
+		"@babel/plugin-transform-react-jsx": "7.14.9",
 		"@babel/plugin-transform-runtime": "7.15.0",
 		"@babel/preset-env": "7.15.0",
 		"@babel/preset-react": "7.14.5",
 		"@babel/preset-typescript": "7.15.0",
 		"@babel/register": "7.15.3",
+		"@babel/runtime": "7.15.3",
 		"@size-limit/preset-app": "4.10.2",
 		"@testing-library/jest-dom": "5.14.1",
 		"@testing-library/preact": "2.0.1",
 		"@testing-library/react": "11.2.7",
 		"@testing-library/react-hooks": "4.0.1",
 		"@testing-library/user-event": "12.8.3",
+		"@wordpress/babel-plugin-import-jsx-pragma": "3.1.0",
 		"@wordpress/components": "19.0.0",
 		"@wordpress/core-data": "4.0.4",
 		"@wordpress/dependency-extraction-webpack-plugin": "3.2.1",
@@ -176,10 +178,12 @@
 		"concurrently": "6.0.2",
 		"css-loader": "6.2.0",
 		"enzyme": "3.11.0",
+		"enzyme-to-json": "3.6.2",
 		"eslint": "7.32.0",
 		"fs-extra": "10.0.0",
 		"glob": "7.1.6",
 		"jest": "27.3.1",
+		"jest-enzyme": "7.1.2",
 		"jest-environment-jsdom": "27.3.1",
 		"jetpack-js-test-runner": "workspace:*",
 		"lodash": "4.17.21",
@@ -189,6 +193,8 @@
 		"node-polyfill-webpack-plugin": "1.1.4",
 		"node-wp-i18n": "1.2.4",
 		"nyc": "15.1.0",
+		"postcss": "8.3.11",
+		"postcss-loader": "6.2.0",
 		"prettier": "npm:wp-prettier@2.0.5",
 		"react-click-outside": "3.0.1",
 		"react-test-renderer": "17.0.2",

projects/plugins/jetpack/tests/jest-enzyme-init.js

@@ -0,0 +1,7 @@
+/**
+ * External dependencies
+ */
+import Enzyme from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+
+Enzyme.configure( { adapter: new Adapter() } );

projects/plugins/jetpack/tests/jest-extensions-asset-stub.js

@@ -0,0 +1,7 @@
+const path = require( 'path' );
+
+module.exports = {
+	process( src, filename ) {
+		return 'module.exports = ' + JSON.stringify( path.basename( filename ) ) + ';';
+	},
+};

projects/plugins/jetpack/tests/jest-extensions-babel-transform.js

@@ -5,8 +5,28 @@ const babelJest = require( 'babel-jest' );
 
 module.exports = babelJest.default.createTransformer( {
 	presets: [
-		[ require.resolve( '@automattic/calypso-build/babel/default' ), { modules: 'commonjs' } ],
-		require.resolve( '@automattic/calypso-build/babel/wordpress-element' ),
+		[
+			require.resolve( '@automattic/jetpack-webpack-config/babel/preset' ),
+			{ modules: 'commonjs' },
+		],
+	],
+	plugins: [
+		[
+			require.resolve( '@wordpress/babel-plugin-import-jsx-pragma' ),
+			{
+				scopeVariable: 'createElement',
+				scopeVariableFrag: 'Fragment',
+				source: '@wordpress/element',
+				isDefault: false,
+			},
+		],
+		[
+			require.resolve( '@babel/plugin-transform-react-jsx' ),
+			{
+				pragma: 'createElement',
+				pragmaFrag: 'Fragment',
+			},
+		],
 	],
 	babelrc: false,
 	configFile: false,