jetpack-mu-wpcom: Improve Verbum build

* Avoid copying php files into `src/build/`, as it causes Composer to complain about multiple files providing the classes. * Run `dynamic-loader.js` through webpack for minification. * Use the jetpack-assets package to register the scripts using the data in the `.assets.php` files.
Automattic · Jan 29, 2024 · 2083030 · 2083030
1 parent 203a12f
commit 2083030
Show file tree

Hide file tree

Showing 15 changed files with 256 additions and 100 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/projects/packages/jetpack-mu-wpcom/changelog/fix-verbum-build b/projects/packages/jetpack-mu-wpcom/changelog/fix-verbum-build
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Verbum: Avoid copying PHP files into `src/build/verbum-comments/`.
diff --git a/projects/packages/jetpack-mu-wpcom/changelog/fix-verbum-build#2 b/projects/packages/jetpack-mu-wpcom/changelog/fix-verbum-build#2
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Verbum: Minify dynamic-loader script.
diff --git a/projects/packages/jetpack-mu-wpcom/changelog/fix-verbum-build#3 b/projects/packages/jetpack-mu-wpcom/changelog/fix-verbum-build#3
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Verbum: Use jetpack-assets package to register scripts using `.asset.php` file data.
diff --git a/projects/packages/jetpack-mu-wpcom/composer.json b/projects/packages/jetpack-mu-wpcom/composer.json
@@ -4,7 +4,8 @@
 	"type": "jetpack-library",
 	"license": "GPL-2.0-or-later",
 	"require": {
-		"php": ">=7.0"
+		"php": ">=7.0",
+		"automattic/jetpack-assets": "@dev"
 	},
 	"require-dev": {
 		"yoast/phpunit-polyfills": "1.1.0",

diff --git a/projects/packages/jetpack-mu-wpcom/package.json b/projects/packages/jetpack-mu-wpcom/package.json
@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-mu-wpcom",
-	"version": "5.11.0",
+	"version": "5.11.1-alpha",
 	"description": "Enhances your site with features powered by WordPress.com",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/packages/jetpack-mu-wpcom/#readme",
 	"bugs": {
@@ -36,7 +36,6 @@
 		"@types/react": "^18.2.28",
 		"@types/react-dom": "18.2.0",
 		"babel-plugin-transform-rename-properties": "0.1.0",
-		"copy-webpack-plugin": "11.0.0",
 		"sass": "1.64.1",
 		"sass-loader": "12.4.0",
 		"typescript": "^5.0.4",

diff --git a/projects/packages/jetpack-mu-wpcom/src/class-jetpack-mu-wpcom.php b/projects/packages/jetpack-mu-wpcom/src/class-jetpack-mu-wpcom.php
@@ -13,7 +13,7 @@
  * Jetpack_Mu_Wpcom main class.
  */
 class Jetpack_Mu_Wpcom {
-	const PACKAGE_VERSION = '5.11.0';
+	const PACKAGE_VERSION = '5.11.1-alpha';
 	const PKG_DIR         = __DIR__ . '/../';
 	const BASE_DIR        = __DIR__ . '/';
 	const BASE_FILE       = __FILE__;
@@ -262,7 +262,7 @@ public static function load_verbum_comments() {
 			if ( self::should_disable_comment_experience( $blog_id ) ) {
 				return false;
 			}
-			require_once __DIR__ . '/build/verbum-comments/class-verbum-comments.php';
+			require_once __DIR__ . '/features/verbum-comments/class-verbum-comments.php';
 			new \Automattic\Jetpack\Verbum_Comments();
 		}
 	}

diff --git a/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/class-verbum-comments.php b/projects/packages/jetpack-mu-wpcom/src/features/verbum-comments/class-verbum-comments.php
@@ -108,29 +108,25 @@ public function enqueue_assets() {
 			return;
 		}
 
-		$version_js       = filemtime( __DIR__ . '/verbum-comments.js' );
-		$version_css      = filemtime( __DIR__ . '/verbum-comments.css' );
 		$connect_url      = site_url( '/public.api/connect/?action=request' );
 		$primary_redirect = get_primary_redirect();
 
 		if ( strpos( $primary_redirect, '.wordpress.com' ) === false ) {
 			$connect_url = add_query_arg( 'domain', $primary_redirect, $connect_url );
 		}
 
-		// Enqueue styles
-		wp_enqueue_style( 'verbum', plugins_url( '/verbum-comments.css', __FILE__ ), array(), $version_css );
-
-		// Enqueue scripts
-		wp_register_script(
+		// Enqueue styles and scripts
+		Assets::register_script(
 			'verbum',
-			plugins_url( 'verbum-comments.js', __FILE__ ),
-			array(),
-			$version_js,
+			'../../build/verbum-comments/verbum-comments.js',
+			__FILE__,
 			array(
 				'strategy'  => 'defer',
 				'in_footer' => true,
 			)
 		);
+
+		wp_enqueue_style( 'verbum' );
 		\WP_Enqueue_Dynamic_Script::enqueue_script( 'verbum' );
 
 		// Enqueue settings separately since the main script is dynamic.
@@ -139,7 +135,7 @@ public function enqueue_assets() {
 			'verbum-settings',
 			false,
 			array(),
-			$version_js,
+			null, // phpcs:ignore WordPress.WP.EnqueuedResourceParameters.MissingVersion -- No script, so no version needed.
 			array(
 				'strategy'  => 'defer',
 				'in_footer' => true,
@@ -250,14 +246,14 @@ public function enqueue_assets() {
 
 		wp_enqueue_script( 'verbum-settings' );
 
-		wp_enqueue_script(
+		Assets::register_script(
 			'verbum-dynamic-loader',
-			plugins_url( 'assets/dynamic-loader.js', __FILE__ ),
-			array(),
-			$version_js,
+			'../../build/verbum-comments/assets/dynamic-loader.js',
+			__FILE__,
 			array(
 				'strategy'  => 'defer',
 				'in_footer' => true,
+				'enqueue'   => true,
 			)
 		);
 	}

diff --git a/projects/packages/jetpack-mu-wpcom/verbum.webpack.config.js b/projects/packages/jetpack-mu-wpcom/verbum.webpack.config.js
@@ -2,7 +2,6 @@
 const path = require( 'path' );
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const jetpackConfig = require( '@automattic/jetpack-webpack-config/webpack' );
-const CopyPlugin = require( 'copy-webpack-plugin' );
 const webpack = require( 'webpack' );
 
 const babelOpts = {
@@ -18,82 +17,111 @@ const babelOpts = {
 	presets: [ [ '@automattic/jetpack-webpack-config/babel/preset' ] ],
 };
 
-module.exports = {
-	entry: {
-		'verbum-comments': './src/features/verbum-comments/src/index.tsx',
-	},
-	mode: jetpackConfig.mode,
-	devtool: jetpackConfig.devtool,
-	output: {
-		...jetpackConfig.output,
-		filename: '[name]/[name].js',
-		path: path.resolve( __dirname, 'src/build' ),
-		environment: {
-			module: true,
-			dynamicImport: true,
+module.exports = [
+	{
+		entry: {
+			'verbum-comments': './src/features/verbum-comments/src/index.tsx',
 		},
-	},
-	optimization: {
-		...jetpackConfig.optimization,
-	},
-	resolve: {
-		...jetpackConfig.resolve,
-	},
-	node: false,
-	plugins: [
-		...jetpackConfig.StandardPlugins( {
-			DependencyExtractionPlugin: { injectPolyfill: false },
-			MiniCssExtractPlugin: { filename: '[name]/[name].css' },
-		} ),
-		new webpack.ProvidePlugin( {
-			h: [ 'preact', 'h' ],
-			Fragment: [ 'preact', 'Fragment' ],
-		} ),
-		new CopyPlugin( {
-			patterns: [
-				{
-					from: './src/features/verbum-comments/class-verbum-comments.php',
-					to: './verbum-comments',
-				},
-				{
-					from: './src/features/verbum-comments/assets',
-					to: './verbum-comments/assets',
-				},
-			],
-		} ),
-	],
-	module: {
-		strictExportPresence: true,
-		rules: [
-			// Transpile JavaScript.
-			jetpackConfig.TranspileRule( {
-				exclude: /node_modules\//,
-				babelOpts,
+		mode: jetpackConfig.mode,
+		devtool: jetpackConfig.devtool,
+		output: {
+			...jetpackConfig.output,
+			filename: '[name]/[name].js',
+			path: path.resolve( __dirname, 'src/build' ),
+			environment: {
+				module: true,
+				dynamicImport: true,
+			},
+		},
+		optimization: {
+			...jetpackConfig.optimization,
+		},
+		resolve: {
+			...jetpackConfig.resolve,
+		},
+		node: false,
+		plugins: [
+			...jetpackConfig.StandardPlugins( {
+				DependencyExtractionPlugin: { injectPolyfill: false },
+				MiniCssExtractPlugin: { filename: '[name]/[name].css' },
 			} ),
-
-			// Transpile @automattic/jetpack-* in node_modules too.
-			jetpackConfig.TranspileRule( {
-				includeNodeModules: [ '@automattic/jetpack-' ],
+			new webpack.ProvidePlugin( {
+				h: [ 'preact', 'h' ],
+				Fragment: [ 'preact', 'Fragment' ],
 			} ),
+		],
+		module: {
+			strictExportPresence: true,
+			rules: [
+				// Transpile JavaScript.
+				jetpackConfig.TranspileRule( {
+					exclude: /node_modules\//,
+					babelOpts,
+				} ),
 
-			// preact has some `__` internal methods, which confuse i18n-check-webpack-plugin. Hack around that.
-			jetpackConfig.TranspileRule( {
-				includeNodeModules: [ 'preact' ],
-				babelOpts: {
-					configFile: false,
-					plugins: [ [ 'babel-plugin-transform-rename-properties', { rename: { __: '__ǃ' } } ] ],
-					presets: [],
-				},
-			} ),
+				// Transpile @automattic/jetpack-* in node_modules too.
+				jetpackConfig.TranspileRule( {
+					includeNodeModules: [ '@automattic/jetpack-' ],
+				} ),
 
-			// Handle CSS.
-			jetpackConfig.CssRule( {
-				extensions: [ 'css', 'scss' ],
-				extraLoaders: [ 'sass-loader' ],
-			} ),
+				// preact has some `__` internal methods, which confuse i18n-check-webpack-plugin. Hack around that.
+				jetpackConfig.TranspileRule( {
+					includeNodeModules: [ 'preact' ],
+					babelOpts: {
+						configFile: false,
+						plugins: [ [ 'babel-plugin-transform-rename-properties', { rename: { __: '__ǃ' } } ] ],
+						presets: [],
+					},
+				} ),
+
+				// Handle CSS.
+				jetpackConfig.CssRule( {
+					extensions: [ 'css', 'scss' ],
+					extraLoaders: [ 'sass-loader' ],
+				} ),
 
-			// Handle images.
-			jetpackConfig.FileRule(),
+				// Handle images.
+				jetpackConfig.FileRule(),
+			],
+		},
+	},
+	{
+		entry: {
+			'verbum-comments/assets/dynamic-loader':
+				'./src/features/verbum-comments/assets/dynamic-loader.js',
+		},
+		mode: jetpackConfig.mode,
+		devtool: jetpackConfig.devtool,
+		output: {
+			...jetpackConfig.output,
+			path: path.resolve( __dirname, 'src/build' ),
+		},
+		optimization: {
+			...jetpackConfig.optimization,
+		},
+		resolve: {
+			...jetpackConfig.resolve,
+		},
+		node: false,
+		plugins: [
+			...jetpackConfig.StandardPlugins( {
+				DependencyExtractionPlugin: { injectPolyfill: false },
+			} ),
 		],
+		module: {
+			strictExportPresence: true,
+			rules: [
+				// Transpile JavaScript.
+				jetpackConfig.TranspileRule( {
+					exclude: /node_modules\//,
+					babelOpts,
+				} ),
+
+				// Transpile @automattic/jetpack-* in node_modules too.
+				jetpackConfig.TranspileRule( {
+					includeNodeModules: [ '@automattic/jetpack-' ],
+				} ),
+			],
+		},
 	},
-};
+];
diff --git a/projects/packages/jetpack-mu-wpcom/webpack.config.js b/projects/packages/jetpack-mu-wpcom/webpack.config.js
@@ -5,7 +5,7 @@ const jetpackConfig = require( '@automattic/jetpack-webpack-config/webpack' );
 const verbumConfig = require( './verbum.webpack.config.js' );
 
 module.exports = [
-	verbumConfig,
+	...verbumConfig,
 	{
 		entry: {
 			'error-reporting': './src/features/error-reporting/index.js',

diff --git a/projects/plugins/mu-wpcom-plugin/changelog/fix-verbum-build b/projects/plugins/mu-wpcom-plugin/changelog/fix-verbum-build
@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Updated composer.lock.
+
+
diff --git a/projects/plugins/mu-wpcom-plugin/composer.json b/projects/plugins/mu-wpcom-plugin/composer.json
@@ -46,6 +46,6 @@
 		]
 	},
 	"config": {
-		"autoloader-suffix": "d9d132a783958a00a2c7cccff60ca42d_jetpack_mu_wpcom_pluginⓥ2_0_17"
+		"autoloader-suffix": "d9d132a783958a00a2c7cccff60ca42d_jetpack_mu_wpcom_pluginⓥ2_0_18_alpha"
 	}
 }