Merge pull request #4184 from Codeinwp/fix/customizer-js-chunk-transl…

…ations

Fix missing translations for Customizer

assets/apps/components/config/custom-plugins.js

@@ -0,0 +1,84 @@
+const path = require('path');
+
+/**
+ * This plugin appends the non-entrypoint JS chunk file names to the asset files generated by the DependencyExtractionWebpackPlugin.
+ *
+ * This mostly used to load translation files for the non-entrypoint JS chunks.
+ */
+class ChunksNameAssetAppendPlugin {
+	apply(compiler) {
+		compiler.hooks.compilation.tap(
+			'EntrypointChunksPlugin',
+			(compilation) => {
+				compilation.hooks.processAssets.tapAsync(
+					{
+						name: 'EntrypointChunksPlugin',
+						stage: compiler.webpack.Compilation
+							.PROCESS_ASSETS_STAGE_ANALYSE,
+					},
+					(assets, callback) => {
+						// Get entrypoint names
+						const entrypoints = Array.from(
+							compilation.entrypoints.keys()
+						);
+
+						// Collecting non-entrypoint JS chunk file names
+						const jsChunkFiles = Object.keys(assets).filter(
+							(file) =>
+								file.endsWith('.js') &&
+								!entrypoints.includes(
+									path.basename(file, '.js')
+								)
+						);
+
+						if (jsChunkFiles.length === 0) {
+							callback();
+							return;
+						}
+
+						// Manually constructing the array string for PHP
+						const jsChunkFilesArrayString =
+							'array(' +
+							jsChunkFiles.map((file) => `'${file}'`).join(', ') +
+							')';
+
+						// Process each asset
+						for (const assetName in assets) {
+							if (assetName.endsWith('.asset.php')) {
+								// Modify asset content
+								const assetContent = assets[assetName].source();
+								const modifiedContent = assetContent.replace(
+									'<?php return array(',
+									`<?php return array('chunks' => ${jsChunkFilesArrayString},`
+								);
+
+								/* eslint-disable no-console */
+								console.log(
+									'\n\x1b[35m%s\x1b[0m \x1b[0m%s\x1b[0m \x1b[36m%s\x1b[0m \x1b[33m%s\x1b[0m\n',
+									'[Neve Webpack Plugin][ChunksNameAssetAppendPlugin]',
+									assetName,
+									'has been changed to include the following file chunks name as array:',
+									jsChunkFilesArrayString
+								);
+
+								// Updating the asset in the compilation
+								compilation.updateAsset(
+									assetName,
+									new compiler.webpack.sources.RawSource(
+										modifiedContent
+									)
+								);
+							}
+						}
+
+						callback();
+					}
+				);
+			}
+		);
+	}
+}
+
+module.exports = {
+	ChunksNameAssetAppendPlugin,
+};

assets/apps/components/config/webpack.config.js

@@ -1,5 +1,6 @@
 const DependencyExtractionWebpackPlugin = require('@wordpress/dependency-extraction-webpack-plugin');
 const config = require('@wordpress/scripts/config/webpack.config');
+const customPlugins = require('./custom-plugins');
 
 const plugins = [
 	...config.plugins.filter(
@@ -19,6 +20,7 @@ const plugins = [
 			}
 		},
 	}),
+	new customPlugins.ChunksNameAssetAppendPlugin(),
 ];
 
 module.exports = (env) => {

inc/core/admin.php

@@ -188,6 +188,20 @@ public function register_react_components() {
 			]
 		);
 		wp_set_script_translations( 'neve-components', 'neve' );
+
+		if ( isset( $deps['chunks'] ) ) {
+			foreach ( $deps['chunks'] as $chunk_file ) {
+
+				$chunk_handle = 'neve-components-chunk-' . $chunk_file;
+				wp_register_script( $chunk_handle, trailingslashit( NEVE_ASSETS_URL ) . 'apps/components/build/' . $chunk_file, [], $deps['version'], true );
+				wp_enqueue_script( $chunk_handle );
+
+				if ( function_exists( 'wp_set_script_translations' ) ) {
+					wp_set_script_translations( $chunk_handle, 'neve' );
+				}
+			}
+		}
+
 		wp_register_style( 'neve-components', trailingslashit( NEVE_ASSETS_URL ) . 'apps/components/build/style-components.css', [ 'wp-components' ], $deps['version'] );
 		wp_add_inline_style( 'neve-components', Dynamic_Css::get_root_css() );
 	}

inc/customizer/loader.php

@@ -166,6 +166,19 @@ public function enqueue_customizer_controls() {
 		wp_style_add_data( 'react-controls', 'rtl', 'replace' );
 		wp_enqueue_style( 'react-controls' );
 
+		if ( isset( $dependencies['chunks'] ) ) {
+			foreach ( $dependencies['chunks'] as $chunk_file ) {
+
+				$chunk_handle = 'neve-customizer-chunk-' . $chunk_file;
+				wp_register_script( $chunk_handle, $bundle_path . $chunk_file, [], $dependencies['version'], true );
+				wp_enqueue_script( $chunk_handle );
+
+				if ( function_exists( 'wp_set_script_translations' ) ) {
+					wp_set_script_translations( $chunk_handle, 'neve' );
+				}
+			}
+		}
+
 		$fonts  = neve_get_google_fonts();
 		$chunks = array_chunk( $fonts, absint( count( $fonts ) / 5 ) );