Connection: Load connection JS bundle via connection PHP package (#38877

) * Mark connection js package being external to extract it as a dependency * Bundle connection js package inside php connection package * Register connect bundle as a script handle for dependents to use * Add changelog * Fix E2E tests * Fix more e2e tests * Fix jetpack-admin css dependency because it does not use Assets::register_script * Update webpack.config.js Co-authored-by: Brad Jorsch <[email protected]> --------- Co-authored-by: Brad Jorsch <[email protected]>
Automattic · Oct 25, 2024 · b789594 · b789594
1 parent b2109dd
commit b789594
Show file tree

Hide file tree

Showing 16 changed files with 145 additions and 40 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/...packages/webpack-config/changelog/update-load-connection-js-bundle-via-connection-package b/...packages/webpack-config/changelog/update-load-connection-js-bundle-via-connection-package
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Updated connection js to load its bundle via connection package
diff --git a/projects/js-packages/webpack-config/src/webpack.js b/projects/js-packages/webpack-config/src/webpack.js
@@ -110,6 +110,10 @@ const defaultRequestMap = {
 		external: 'JetpackScriptDataModule',
 		handle: 'jetpack-script-data',
 	},
+	'@automattic/jetpack-connection': {
+		external: 'JetpackConnection',
+		handle: 'jetpack-connection',
+	},
 };
 
 const DependencyExtractionPlugin = ( { requestMap, ...options } = {} ) => {

diff --git a/...cts/packages/connection/changelog/update-load-connection-js-bundle-via-connection-package b/...cts/packages/connection/changelog/update-load-connection-js-bundle-via-connection-package
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Updated connection js to load its bundle via connection package
diff --git a/projects/packages/connection/package.json b/projects/packages/connection/package.json
@@ -25,6 +25,7 @@
 		"watch": "pnpm run build && pnpm webpack watch"
 	},
 	"dependencies": {
+		"@automattic/jetpack-connection": "workspace:*",
 		"@automattic/jetpack-idc": "workspace:*",
 		"@wordpress/data": "10.5.0",
 		"@wordpress/element": "6.5.0"

diff --git a/projects/packages/connection/src/class-connection-assets.php b/projects/packages/connection/src/class-connection-assets.php
@@ -0,0 +1,41 @@
+<?php
+/**
+ * Connection_Assets.
+ *
+ * @package automattic/jetpack-connection
+ */
+
+namespace Automattic\Jetpack\Connection;
+
+use Automattic\Jetpack\Assets;
+
+/**
+ * Connection_Assets class.
+ */
+class Connection_Assets {
+
+	/**
+	 * Initialize the class.
+	 */
+	public static function configure() {
+		add_action( 'wp_loaded', array( __CLASS__, 'register_assets' ) );
+
+		add_filter( 'jetpack_admin_js_script_data', array( Initial_State::class, 'set_connection_script_data' ), 10, 1 );
+	}
+
+	/**
+	 * Register assets.
+	 */
+	public static function register_assets() {
+
+		Assets::register_script(
+			'jetpack-connection',
+			'../dist/jetpack-connection.js',
+			__FILE__,
+			array(
+				'in_footer'  => true,
+				'textdomain' => 'jetpack-connection',
+			)
+		);
+	}
+}
diff --git a/projects/packages/connection/src/class-manager.php b/projects/packages/connection/src/class-manager.php
@@ -156,7 +156,7 @@ public static function configure() {
 		// Initial Partner management.
 		Partner::init();
 
-		add_filter( 'jetpack_admin_js_script_data', array( Initial_State::class, 'set_connection_script_data' ), 10, 1 );
+		Connection_Assets::configure();
 	}
 
 	/**

diff --git a/projects/packages/connection/src/js/jetpack-connection.js b/projects/packages/connection/src/js/jetpack-connection.js
@@ -0,0 +1 @@
+export * from '@automattic/jetpack-connection';
diff --git a/projects/packages/connection/webpack.config.js b/projects/packages/connection/webpack.config.js
@@ -16,8 +16,57 @@ for ( const file of glob.sync( './src/sso/*.css' ) ) {
 	ssoEntries[ name ].push( path.resolve( file ) );
 }
 
+/**
+ * @type {import('webpack').Configuration[]} Webpack configuration.
+ */
+const sharedConfig = {
+	mode: jetpackWebpackConfig.mode,
+	devtool: jetpackWebpackConfig.devtool,
+	output: {
+		...jetpackWebpackConfig.output,
+		path: path.resolve( './dist' ),
+	},
+	optimization: {
+		...jetpackWebpackConfig.optimization,
+	},
+	resolve: {
+		...jetpackWebpackConfig.resolve,
+	},
+	node: false,
+	module: {
+		strictExportPresence: true,
+		rules: [
+			// Transpile JavaScript, including node_modules.
+			jetpackWebpackConfig.TranspileRule(),
+
+			// Transpile @automattic/jetpack-* in node_modules too.
+			jetpackWebpackConfig.TranspileRule( {
+				includeNodeModules: [ '@automattic/jetpack-' ],
+			} ),
+
+			// Handle CSS.
+			jetpackWebpackConfig.CssRule( {
+				extensions: [ 'css', 'sass', 'scss' ],
+				extraLoaders: [ 'sass-loader' ],
+			} ),
+			// Handle images.
+			jetpackWebpackConfig.FileRule(),
+		],
+	},
+	externals: {
+		...jetpackWebpackConfig.externals,
+		jetpackConfig: JSON.stringify( {
+			consumer_slug: 'connection_package',
+		} ),
+	},
+};
+
+/**
+ * @type {import('webpack').Configuration[]} Webpack configuration.
+ */
 module.exports = [
 	{
+		...sharedConfig,
 		entry: {
 			'tracks-ajax': './src/js/tracks-ajax.js',
 			'tracks-callables': {
@@ -30,47 +79,33 @@ module.exports = [
 			'identity-crisis': './src/identity-crisis/_inc/admin.jsx',
 			...ssoEntries,
 		},
-		mode: jetpackWebpackConfig.mode,
-		devtool: jetpackWebpackConfig.devtool,
-		output: {
-			...jetpackWebpackConfig.output,
-			path: path.resolve( './dist' ),
-		},
-		optimization: {
-			...jetpackWebpackConfig.optimization,
-		},
-		resolve: {
-			...jetpackWebpackConfig.resolve,
-		},
-		node: false,
 		plugins: [
 			...jetpackWebpackConfig.StandardPlugins( {
 				MiniCssExtractPlugin: { filename: '[name].css' },
 			} ),
 		],
-		module: {
-			strictExportPresence: true,
-			rules: [
-				// Transpile JavaScript, including node_modules.
-				jetpackWebpackConfig.TranspileRule(),
-
-				// Transpile @automattic/jetpack-* in node_modules too.
-				jetpackWebpackConfig.TranspileRule( {
-					includeNodeModules: [ '@automattic/jetpack-' ],
-				} ),
-
-				// Handle CSS.
-				jetpackWebpackConfig.CssRule( {
-					extensions: [ 'css', 'sass', 'scss' ],
-					extraLoaders: [ 'sass-loader' ],
-				} ),
-			],
+	},
+	{
+		...sharedConfig,
+		entry: {
+			'jetpack-connection': {
+				import: './src/js/jetpack-connection.js',
+				library: {
+					name: 'JetpackConnection',
+					type: 'umd',
+				},
+			},
 		},
-		externals: {
-			...jetpackWebpackConfig.externals,
-			jetpackConfig: JSON.stringify( {
-				consumer_slug: 'identity_crisis',
+		plugins: [
+			...jetpackWebpackConfig.StandardPlugins( {
+				MiniCssExtractPlugin: { filename: '[name].css' },
+				DependencyExtractionPlugin: {
+					requestMap: {
+						// We don't want to externalize this package, we rather want to bundle it.
+						'@automattic/jetpack-connection': {},
+					},
+				},
 			} ),
-		},
+		],
 	},
 ];
diff --git a/projects/plugins/jetpack/_inc/lib/admin-pages/class.jetpack-admin-page.php b/projects/plugins/jetpack/_inc/lib/admin-pages/class.jetpack-admin-page.php
@@ -175,7 +175,7 @@ public function admin_scripts() {
 	public function admin_styles() {
 		$min = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
 
-		wp_enqueue_style( 'jetpack-admin', plugins_url( "css/jetpack-admin{$min}.css", JETPACK__PLUGIN_FILE ), array( 'genericons' ), JETPACK__VERSION . '-20121016' );
+		wp_enqueue_style( 'jetpack-admin', plugins_url( "css/jetpack-admin{$min}.css", JETPACK__PLUGIN_FILE ), array( 'genericons', 'jetpack-connection' ), JETPACK__VERSION . '-20121016' );
 		wp_style_add_data( 'jetpack-admin', 'rtl', 'replace' );
 		wp_style_add_data( 'jetpack-admin', 'suffix', $min );
 	}

diff --git a/projects/plugins/jetpack/changelog/update-load-connection-js-bundle-via-connection-package b/projects/plugins/jetpack/changelog/update-load-connection-js-bundle-via-connection-package
@@ -0,0 +1,4 @@
+Significance: minor
+Type: other
+
+Updated connection js to load its bundle via connection package
diff --git a/projects/plugins/jetpack/tests/e2e/package.json b/projects/plugins/jetpack/tests/e2e/package.json
@@ -13,7 +13,7 @@
 	"license": "GPL-2.0-or-later",
 	"author": "Automattic",
 	"scripts": {
-		"build": "pnpm jetpack build packages/forms packages/connection packages/blaze plugins/jetpack -v --no-pnpm-install --production",
+		"build": "pnpm jetpack build packages/forms packages/assets packages/connection packages/blaze plugins/jetpack -v --no-pnpm-install --production",
 		"clean": "rm -rf output",
 		"config:decrypt": "pnpm test-decrypt-default-config && pnpm test-decrypt-config",
 		"distclean": "rm -rf node_modules",

diff --git a/projects/plugins/search/changelog/update-load-connection-js-bundle-via-connection-package b/projects/plugins/search/changelog/update-load-connection-js-bundle-via-connection-package
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Updated connection js to load its bundle via connection package
diff --git a/projects/plugins/search/tests/e2e/package.json b/projects/plugins/search/tests/e2e/package.json
@@ -10,7 +10,7 @@
 	"license": "GPL-2.0-or-later",
 	"author": "Automattic",
 	"scripts": {
-		"build": "pnpm jetpack build packages/search plugins/jetpack -v --no-pnpm-install --production",
+		"build": "pnpm jetpack build packages/assets packages/search packages/connection plugins/jetpack -v --no-pnpm-install --production",
 		"clean": "rm -rf output",
 		"config:decrypt": "openssl enc -md sha1 -aes-256-cbc -d -pass env:CONFIG_KEY -in ./node_modules/jetpack-e2e-commons/config/encrypted.enc -out ./config/local.cjs",
 		"distclean": "rm -rf node_modules",

diff --git a/projects/plugins/social/changelog/update-load-connection-js-bundle-via-connection-package b/projects/plugins/social/changelog/update-load-connection-js-bundle-via-connection-package
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Updated connection js to load its bundle via connection package
diff --git a/projects/plugins/social/tests/e2e/package.json b/projects/plugins/social/tests/e2e/package.json
@@ -14,7 +14,7 @@
 	"license": "GPL-2.0-or-later",
 	"author": "Automattic",
 	"scripts": {
-		"build": "pnpm jetpack build packages/assets plugins/social plugins/jetpack -v --no-pnpm-install --production",
+		"build": "pnpm jetpack build packages/assets packages/connection plugins/social plugins/jetpack -v --no-pnpm-install --production",
 		"clean": "rm -rf output",
 		"config:decrypt": "openssl enc -md sha1 -aes-256-cbc -d -pass env:CONFIG_KEY -in ./node_modules/jetpack-e2e-commons/config/encrypted.enc -out ./config/local.cjs",
 		"distclean": "rm -rf node_modules",
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export * from '@automattic/jetpack-connection';