Use the new i18n-loader-webpack-plugin (#21936)

* webpack-config: Use `@automattic/i18n-loader-webpack-plugin` Provide the new plugin as part of the standard set of plugins. * jetpack: Use `@automattic/i18n-loader-webpack-plugin` Configure the new plugin and remove the hack Instant Search was using to work around the problem the plugin was created to fix.
Automattic · Dec 15, 2021 · 30d163d · 30d163d
1 parent a2aef5e
commit 30d163d
Show file tree

Hide file tree

Showing 27 changed files with 72 additions and 46 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/projects/js-packages/webpack-config/README.md b/projects/js-packages/webpack-config/README.md
@@ -175,6 +175,12 @@ This provides an instance of [duplicate-package-checker-webpack-plugin](https://
 
 This provides an instance of [@wordpress/dependency-extraction-webpack-plugin](https://www.npmjs.com/package/@wordpress/dependency-extraction-webpack-plugin). The `options` are passed to the plugin.
 
+##### `I18nLoaderPlugin( options )`
+
+This provides an instance of [@automattic/i18n-loader-webpack-plugin](https://www.npmjs.com/package/@automattic/i18n-loader-webpack-plugin). The `options` are passed to the plugin.
+
+Note that if the plugin actually does anything in your build, you'll need to specify at least the `domain` option for it.
+
 ##### `I18nCheckPlugin( options )`
 
 This provides an instance of [@wordpress/i18n-check-webpack-plugin](https://www.npmjs.com/package/@wordpress/i18n-check-webpack-plugin). The `options` are passed to the plugin.

diff --git a/projects/js-packages/webpack-config/changelog/add-use-i18n-loader-webpack-plugin b/projects/js-packages/webpack-config/changelog/add-use-i18n-loader-webpack-plugin
@@ -0,0 +1,4 @@
+Significance: major
+Type: added
+
+Add `@automattic/i18n-loader-webpack-plugin`. This may break some builds.
diff --git a/projects/js-packages/webpack-config/package.json b/projects/js-packages/webpack-config/package.json
@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-webpack-config",
-	"version": "0.5.1-alpha",
+	"version": "0.6.0-alpha",
 	"description": "Library of pieces for webpack config in Jetpack projects.",
 	"homepage": "https://jetpack.com",
 	"bugs": {
@@ -20,6 +20,7 @@
 		"@automattic/babel-plugin-preserve-i18n": "1.0.0",
 		"@automattic/babel-plugin-replace-textdomain": "workspace:^0.1.0",
 		"@automattic/i18n-check-webpack-plugin": "workspace:^0.1.1-alpha",
+		"@automattic/i18n-loader-webpack-plugin": "workspace:^0.1.0-alpha",
 		"@automattic/webpack-rtl-plugin": "5.1.0",
 		"@babel/compat-data": "7.16.4",
 		"@babel/helper-compilation-targets": "7.16.3",

diff --git a/projects/js-packages/webpack-config/src/webpack.js b/projects/js-packages/webpack-config/src/webpack.js
@@ -7,6 +7,7 @@ const DuplicatePackageCheckerWebpackPlugin = require( 'duplicate-package-checker
 const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
 const MiniCSSWithRTLPlugin = require( './webpack/mini-css-with-rtl' );
 const WebpackRTLPlugin = require( '@automattic/webpack-rtl-plugin' );
+const I18nLoaderWebpackPlugin = require( '@automattic/i18n-loader-webpack-plugin' );
 const I18nCheckWebpackPlugin = require( '@automattic/i18n-check-webpack-plugin' );
 
 const MyCssMinimizerPlugin = options => new CssMinimizerPlugin( options );
@@ -66,6 +67,8 @@ const DuplicatePackageCheckerPlugin = options => [
 
 const DependencyExtractionPlugin = options => [ new DependencyExtractionWebpackPlugin( options ) ];
 
+const I18nLoaderPlugin = options => [ new I18nLoaderWebpackPlugin( options ) ];
+
 const i18nFilterFunction = file => {
 	if ( ! /\.(?:jsx?|tsx?|cjs|mjs|svelte)$/.test( file ) ) {
 		return false;
@@ -101,6 +104,7 @@ const StandardPlugins = ( options = {} ) => {
 		...( options.DependencyExtractionPlugin === false
 			? []
 			: DependencyExtractionPlugin( options.DependencyExtractionPlugin ) ),
+		...( options.I18nLoaderPlugin === false ? [] : I18nLoaderPlugin( options.I18nLoaderPlugin ) ),
 		...( options.I18nCheckPlugin === false ? [] : I18nCheckPlugin( options.I18nCheckPlugin ) ),
 	];
 };
@@ -135,6 +139,7 @@ module.exports = {
 	WebpackRtlPlugin: MyWebpackRtlPlugin,
 	DependencyExtractionPlugin,
 	DuplicatePackageCheckerPlugin,
+	I18nLoaderPlugin,
 	// Module rules and loaders.
 	TranspileRule,
 	CssRule,

diff --git a/projects/packages/connection-ui/changelog/add-use-i18n-loader-webpack-plugin b/projects/packages/connection-ui/changelog/add-use-i18n-loader-webpack-plugin
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated package dependencies.
diff --git a/projects/packages/connection-ui/package.json b/projects/packages/connection-ui/package.json
@@ -22,7 +22,7 @@
 		"@wordpress/data": "6.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-webpack-config": "workspace:^0.5.1-alpha",
+		"@automattic/jetpack-webpack-config": "workspace:^0.6.0-alpha",
 		"@babel/core": "7.16.0",
 		"@babel/preset-env": "7.16.4",
 		"@babel/register": "7.16.0",

diff --git a/projects/packages/identity-crisis/changelog/add-use-i18n-loader-webpack-plugin b/projects/packages/identity-crisis/changelog/add-use-i18n-loader-webpack-plugin
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated package dependencies.
diff --git a/projects/packages/identity-crisis/package.json b/projects/packages/identity-crisis/package.json
@@ -19,7 +19,7 @@
 		"@wordpress/data": "6.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-webpack-config": "workspace:^0.5.1-alpha",
+		"@automattic/jetpack-webpack-config": "workspace:^0.6.0-alpha",
 		"@babel/core": "7.16.0",
 		"@babel/preset-env": "7.16.4",
 		"@babel/register": "7.16.0",

diff --git a/projects/packages/jitm/changelog/add-use-i18n-loader-webpack-plugin b/projects/packages/jitm/changelog/add-use-i18n-loader-webpack-plugin
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated package dependencies.
diff --git a/projects/packages/jitm/package.json b/projects/packages/jitm/package.json
@@ -24,7 +24,7 @@
 	},
 	"browserslist": "extends @wordpress/browserslist-config",
 	"devDependencies": {
-		"@automattic/jetpack-webpack-config": "workspace:^0.5.1-alpha",
+		"@automattic/jetpack-webpack-config": "workspace:^0.6.0-alpha",
 		"@wordpress/browserslist-config": "4.1.0",
 		"sass": "1.43.3",
 		"sass-loader": "12.2.0",

diff --git a/projects/packages/lazy-images/changelog/add-use-i18n-loader-webpack-plugin b/projects/packages/lazy-images/changelog/add-use-i18n-loader-webpack-plugin
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated package dependencies.
diff --git a/projects/packages/lazy-images/package.json b/projects/packages/lazy-images/package.json
@@ -25,7 +25,7 @@
 		"validate": "pnpm exec validate-es dist/"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-webpack-config": "workspace:^0.5.1-alpha",
+		"@automattic/jetpack-webpack-config": "workspace:^0.6.0-alpha",
 		"copy-webpack-plugin": "9.0.1",
 		"intersection-observer": "0.12.0",
 		"webpack": "5.64.1"

diff --git a/projects/packages/my-jetpack/changelog/add-use-i18n-loader-webpack-plugin b/projects/packages/my-jetpack/changelog/add-use-i18n-loader-webpack-plugin
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated package dependencies.
diff --git a/projects/packages/my-jetpack/package.json b/projects/packages/my-jetpack/package.json
@@ -32,7 +32,7 @@
 	],
 	"devDependencies": {
 		"@automattic/jetpack-base-styles": "workspace:^0.1.2",
-		"@automattic/jetpack-webpack-config": "workspace:^0.5.1-alpha",
+		"@automattic/jetpack-webpack-config": "workspace:^0.6.0-alpha",
 		"@babel/core": "7.16.0",
 		"@babel/preset-env": "7.16.4",
 		"@babel/register": "7.16.0",

diff --git a/projects/packages/search/changelog/add-use-i18n-loader-webpack-plugin b/projects/packages/search/changelog/add-use-i18n-loader-webpack-plugin
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated package dependencies.
diff --git a/projects/packages/search/package.json b/projects/packages/search/package.json
@@ -65,7 +65,7 @@
 		"tiny-lru": "7.0.6"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-webpack-config": "workspace:^0.5.1-alpha",
+		"@automattic/jetpack-webpack-config": "workspace:^0.6.0-alpha",
 		"@babel/core": "7.16.0",
 		"@babel/plugin-proposal-nullish-coalescing-operator": "7.16.0",
 		"@babel/preset-env": "7.16.4",

diff --git a/projects/plugins/backup/changelog/add-use-i18n-loader-webpack-plugin b/projects/plugins/backup/changelog/add-use-i18n-loader-webpack-plugin
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated package dependencies.
diff --git a/projects/plugins/backup/package.json b/projects/plugins/backup/package.json
@@ -41,7 +41,7 @@
 	},
 	"devDependencies": {
 		"@automattic/jetpack-base-styles": "workspace:^0.1.2",
-		"@automattic/jetpack-webpack-config": "workspace:^0.5.1-alpha",
+		"@automattic/jetpack-webpack-config": "workspace:^0.6.0-alpha",
 		"@babel/core": "7.16.0",
 		"@babel/preset-env": "7.16.4",
 		"@babel/register": "7.16.0",

diff --git a/projects/plugins/jetpack/changelog/add-use-i18n-loader-webpack-plugin b/projects/plugins/jetpack/changelog/add-use-i18n-loader-webpack-plugin
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Use `@automattic/i18n-loader-webpack-plugin` to remove the hack for Instant Search's lazy-loaded bundle.
diff --git a/projects/plugins/jetpack/modules/search/class-jetpack-instant-search.php b/projects/plugins/jetpack/modules/search/class-jetpack-instant-search.php
@@ -130,35 +130,6 @@ public function load_assets_with_parameters( $path_prefix, $plugin_base_path ) {
 		Assets::enqueue_script( 'jetpack-instant-search' );
 		$this->load_and_initialize_tracks();
 		$this->inject_javascript_options();
-
-		// It only inlines the translations for the script, but does not actually load the script.
-		$this->inject_translation_for_script(
-			plugins_url(
-				$path_prefix . '_inc/build/instant-search/jp-search.chunk-main-payload.js',
-				$plugin_base_path
-			)
-		);
-	}
-
-	/**
-	 * Add inline translations for script `$payload_url` before loading `$before_handle` script.
-	 *
-	 * @param string $payload_url - The payload url for which we load the translations.
-	 * @param string $before_handle - Inline the translations before this handle.
-	 */
-	protected function inject_translation_for_script( $payload_url, $before_handle = 'jetpack-instant-search' ) {
-		// Set a random name for the script.
-		$handle = 'jetpack-instant-search-' . wp_unique_id();
-		// Then register it, which is required for the next steps.
-		// phpcs:ignore WordPress.WP.EnqueuedResourceParameters.NoExplicitVersion
-		wp_register_script( $handle, $payload_url, array(), false, false );
-		// Set translation domain to `jetpack`, and we need to explicitly set the `path` to load translations files for WPCOM.
-		// Otherwise WPCOM would try to load from `WP_LANG_DIR . '/mu-plugins'` and fails.
-		wp_set_script_translations( $handle, 'jetpack', WP_LANG_DIR . '/plugins' );
-		// Inline the translations before `$before_handle` handle.
-		wp_add_inline_script( $before_handle, wp_scripts()->print_translations( $handle, false ), 'before' );
-		// Deregister the script as we don't really enqueue it from PHP side.
-		wp_deregister_script( $handle );
 	}
 
 	/**

diff --git a/projects/plugins/jetpack/package.json b/projects/plugins/jetpack/package.json
@@ -150,7 +150,7 @@
 	"devDependencies": {
 		"@automattic/color-studio": "2.5.0",
 		"@automattic/jetpack-base-styles": "workspace:^0.1.2",
-		"@automattic/jetpack-webpack-config": "workspace:^0.5.1-alpha",
+		"@automattic/jetpack-webpack-config": "workspace:^0.6.0-alpha",
 		"@automattic/remove-asset-webpack-plugin": "workspace:^0.1.1",
 		"@babel/core": "7.16.0",
 		"@babel/plugin-proposal-nullish-coalescing-operator": "7.16.0",

diff --git a/projects/plugins/jetpack/tools/webpack.config.extensions.js b/projects/plugins/jetpack/tools/webpack.config.extensions.js
@@ -200,6 +200,7 @@ module.exports = [
 		plugins: [
 			...jetpackWebpackConfig.StandardPlugins( {
 				DependencyExtractionPlugin: false,
+				I18nLoaderPlugin: false,
 				I18nCheckPlugin: false,
 			} ),
 			new webpack.NormalModuleReplacementPlugin(

diff --git a/projects/plugins/jetpack/tools/webpack.config.js b/projects/plugins/jetpack/tools/webpack.config.js
@@ -173,6 +173,7 @@ module.exports = [
 		plugins: [
 			...jetpackWebpackConfig.StandardPlugins( {
 				DependencyExtractionPlugin: false,
+				I18nLoaderPlugin: false,
 				I18nCheckPlugin: false,
 			} ),
 			new StaticSiteGeneratorPlugin( {

diff --git a/projects/plugins/jetpack/tools/webpack.config.search-configure.js b/projects/plugins/jetpack/tools/webpack.config.search-configure.js
@@ -32,6 +32,7 @@ module.exports = {
 	plugins: [
 		...jetpackWebpackConfig.StandardPlugins( {
 			DependencyExtractionPlugin: { injectPolyfill: true },
+			I18nLoaderPlugin: { textdomain: 'jetpack' },
 		} ),
 		definePaletteColorsAsStaticVariables(),
 	],

diff --git a/projects/plugins/jetpack/tools/webpack.config.search.js b/projects/plugins/jetpack/tools/webpack.config.search.js
@@ -65,6 +65,7 @@ module.exports = {
 				requestToExternal,
 				requestToHandle: defaultRequestToHandle,
 			},
+			I18nLoaderPlugin: { textdomain: 'jetpack' },
 		} ),
 		// Replace 'debug' module with a dummy implementation in production
 		...( jetpackWebpackConfig.isDevelopment

diff --git a/projects/plugins/jetpack/tools/webpack.config.widget-visibility.js b/projects/plugins/jetpack/tools/webpack.config.widget-visibility.js
@@ -40,6 +40,7 @@ module.exports = {
 	plugins: [
 		...jetpackWebpackConfig.StandardPlugins( {
 			DependencyExtractionPlugin: { injectPolyfill: true },
+			I18nLoaderPlugin: { textdomain: 'jetpack' },
 		} ),
 		definePaletteColorsAsStaticVariables(),
 	],