Merge pull request #1643 from ShyamGadde/add/unminified-js-to-prod-bu…

…ilds Add unminified source JS files to builds
WordPress · Nov 13, 2024 · df29967 · df29967
2 parents 58c9407 + 7af4b07
commit df29967
Show file tree

Hide file tree

Showing 12 changed files with 165 additions and 10 deletions.
diff --git a/.gitignore b/.gitignore
@@ -24,6 +24,7 @@ nbproject/
 
 build
 .wp-env.override.json
+*.min.js
 *.asset.php
 
 ############

diff --git a/plugins/embed-optimizer/hooks.php b/plugins/embed-optimizer/hooks.php
@@ -121,7 +121,7 @@ function embed_optimizer_filter_extension_module_urls( $extension_module_urls ):
 	if ( ! is_array( $extension_module_urls ) ) {
 		$extension_module_urls = array();
 	}
-	$extension_module_urls[] = add_query_arg( 'ver', EMBED_OPTIMIZER_VERSION, plugin_dir_url( __FILE__ ) . 'detect.js' );
+	$extension_module_urls[] = add_query_arg( 'ver', EMBED_OPTIMIZER_VERSION, plugin_dir_url( __FILE__ ) . sprintf( 'detect%s.js', wp_scripts_get_suffix() ) );
 	return $extension_module_urls;
 }
 
@@ -326,7 +326,7 @@ function embed_optimizer_lazy_load_scripts(): void {
  * @since 0.2.0
  */
 function embed_optimizer_get_lazy_load_script(): string {
-	$script = file_get_contents( __DIR__ . '/lazy-load.js' ); // phpcs:ignore WordPress.WP.AlternativeFunctions.file_get_contents_file_get_contents -- It's a local filesystem path not a remote request.
+	$script = file_get_contents( __DIR__ . sprintf( '/lazy-load%s.js', wp_scripts_get_suffix() ) ); // phpcs:ignore WordPress.WP.AlternativeFunctions.file_get_contents_file_get_contents -- It's a local filesystem path not a remote request.
 
 	if ( false === $script ) {
 		return '';

diff --git a/plugins/embed-optimizer/load.php b/plugins/embed-optimizer/load.php
@@ -76,6 +76,24 @@ static function ( string $version ): void {
 			return;
 		}
 
+		if (
+			( is_admin() || ( defined( 'WP_CLI' ) && WP_CLI ) ) &&
+			! file_exists( __DIR__ . '/detect.min.js' )
+		) {
+			// phpcs:ignore WordPress.PHP.DevelopmentFunctions.error_log_trigger_error
+			trigger_error(
+				esc_html(
+					sprintf(
+						/* translators: 1: File path. 2: CLI command. */
+						'[Embed Optimizer] ' . __( 'Unable to load %1$s. Please make sure you have run %2$s.', 'embed-optimizer' ),
+						'detect.min.js',
+						'`npm install && npm run build:plugin:embed-optimizer`'
+					)
+				),
+				E_USER_ERROR
+			);
+		}
+
 		define( 'EMBED_OPTIMIZER_VERSION', $version );
 
 		// Load in the Embed Optimizer plugin hooks.

diff --git a/plugins/embed-optimizer/readme.txt b/plugins/embed-optimizer/readme.txt
@@ -67,6 +67,12 @@ The [plugin source code](https://github.com/WordPress/performance/tree/trunk/plu
 
 == Changelog ==
 
+= n.e.x.t =
+
+**Enhancements**
+
+* Serve unminified scripts when `SCRIPT_DEBUG` is enabled. ([1643](https://github.com/WordPress/performance/pull/1643))
+
 = 0.3.0 =
 
 **Enhancements**

diff --git a/plugins/image-prioritizer/hooks.php b/plugins/image-prioritizer/hooks.php
@@ -22,7 +22,7 @@
  * @since 0.2.0
  */
 function image_prioritizer_get_lazy_load_script(): string {
-	$script = file_get_contents( __DIR__ . '/lazy-load.js' ); // phpcs:ignore WordPress.WP.AlternativeFunctions.file_get_contents_file_get_contents -- It's a local filesystem path not a remote request.
+	$script = file_get_contents( __DIR__ . sprintf( '/lazy-load%s.js', wp_scripts_get_suffix() ) ); // phpcs:ignore WordPress.WP.AlternativeFunctions.file_get_contents_file_get_contents -- It's a local filesystem path not a remote request.
 
 	if ( false === $script ) {
 		return '';

diff --git a/plugins/image-prioritizer/load.php b/plugins/image-prioritizer/load.php
@@ -77,6 +77,24 @@ static function ( string $version ): void {
 			return;
 		}
 
+		if (
+			( is_admin() || ( defined( 'WP_CLI' ) && WP_CLI ) ) &&
+			! file_exists( __DIR__ . '/lazy-load.min.js' )
+		) {
+			// phpcs:ignore WordPress.PHP.DevelopmentFunctions.error_log_trigger_error
+			trigger_error(
+				esc_html(
+					sprintf(
+						/* translators: 1: File path. 2: CLI command. */
+						'[Image Prioritizer] ' . __( 'Unable to load %1$s. Please make sure you have run %2$s.', 'image-prioritizer' ),
+						'lazy-load.min.js',
+						'`npm install && npm run build:plugin:image-prioritizer`'
+					)
+				),
+				E_USER_ERROR
+			);
+		}
+
 		define( 'IMAGE_PRIORITIZER_VERSION', $version );
 
 		require_once __DIR__ . '/helper.php';

diff --git a/plugins/image-prioritizer/readme.txt b/plugins/image-prioritizer/readme.txt
@@ -62,6 +62,12 @@ The [plugin source code](https://github.com/WordPress/performance/tree/trunk/plu
 
 == Changelog ==
 
+= n.e.x.t =
+
+**Enhancements**
+
+* Serve unminified scripts when `SCRIPT_DEBUG` is enabled. ([1643](https://github.com/WordPress/performance/pull/1643))
+
 = 0.2.0 =
 
 **Enhancements**

diff --git a/plugins/optimization-detective/detection.php b/plugins/optimization-detective/detection.php
@@ -61,7 +61,7 @@ static function ( OD_URL_Metric_Group $group ): array {
 	return wp_get_inline_script_tag(
 		sprintf(
 			'import detect from %s; detect( %s );',
-			wp_json_encode( add_query_arg( 'ver', OPTIMIZATION_DETECTIVE_VERSION, plugin_dir_url( __FILE__ ) . 'detect.js' ) ),
+			wp_json_encode( add_query_arg( 'ver', OPTIMIZATION_DETECTIVE_VERSION, plugin_dir_url( __FILE__ ) . sprintf( 'detect%s.js', wp_scripts_get_suffix() ) ) ),
 			wp_json_encode( $detect_args )
 		),
 		array( 'type' => 'module' )

diff --git a/plugins/optimization-detective/readme.txt b/plugins/optimization-detective/readme.txt
@@ -253,6 +253,12 @@ The [plugin source code](https://github.com/WordPress/performance/tree/trunk/plu
 
 == Changelog ==
 
+= n.e.x.t =
+
+**Enhancements**
+
+* Serve unminified scripts when `SCRIPT_DEBUG` is enabled. ([1643](https://github.com/WordPress/performance/pull/1643))
+
 = 0.7.0 =
 
 **Enhancements**

diff --git a/plugins/web-worker-offloading/hooks.php b/plugins/web-worker-offloading/hooks.php
@@ -21,7 +21,13 @@
 function plwwo_register_default_scripts( WP_Scripts $scripts ): void {
 	// The source code for partytown.js is built from <https://github.com/BuilderIO/partytown/blob/b292a14047a0c12ca05ba97df1833935d42fdb66/src/lib/main/snippet.ts>.
 	// See webpack config in the WordPress/performance repo: <https://github.com/WordPress/performance/blob/282a068f3eb2575d37aeb9034e894e7140fcddca/webpack.config.js#L84-L130>.
-	$partytown_js = file_get_contents( __DIR__ . '/build/partytown.js' ); // phpcs:ignore WordPress.WP.AlternativeFunctions.file_get_contents_file_get_contents -- It's a local filesystem path not a remote request.
+	if ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) {
+		$partytown_js_path = '/build/debug/partytown.js';
+	} else {
+		$partytown_js_path = '/build/partytown.js';
+	}
+
+	$partytown_js = file_get_contents( __DIR__ . $partytown_js_path ); // phpcs:ignore WordPress.WP.AlternativeFunctions.file_get_contents_file_get_contents -- It's a local filesystem path not a remote request.
 	if ( false === $partytown_js ) {
 		return;
 	}

diff --git a/plugins/web-worker-offloading/readme.txt b/plugins/web-worker-offloading/readme.txt
@@ -94,6 +94,12 @@ The [plugin source code](https://github.com/WordPress/performance/tree/trunk/plu
 
 == Changelog ==
 
+= n.e.x.t =
+
+**Enhancements**
+
+* Serve unminified scripts when `SCRIPT_DEBUG` is enabled. ([1643](https://github.com/WordPress/performance/pull/1643))
+
 = 0.1.1 =
 
 **Enhancements**

diff --git a/webpack.config.js b/webpack.config.js
@@ -34,7 +34,82 @@ const sharedConfig = {
 };
 
 // Store plugins that require build process.
-const pluginsWithBuild = [ 'optimization-detective', 'web-worker-offloading' ];
+const pluginsWithBuild = [
+	'embed-optimizer',
+	'image-prioritizer',
+	'optimization-detective',
+	'web-worker-offloading',
+];
+
+/**
+ * Webpack Config: Embed Optimizer
+ *
+ * @param {*} env Webpack environment
+ * @return {Object} Webpack configuration
+ */
+const embedOptimizer = ( env ) => {
+	if ( env.plugin && env.plugin !== 'embed-optimizer' ) {
+		return defaultBuildConfig;
+	}
+
+	const pluginDir = path.resolve( __dirname, 'plugins/embed-optimizer' );
+
+	return {
+		...sharedConfig,
+		name: 'embed-optimizer',
+		plugins: [
+			new CopyWebpackPlugin( {
+				patterns: [
+					{
+						from: `${ pluginDir }/detect.js`,
+						to: `${ pluginDir }/detect.min.js`,
+					},
+					{
+						from: `${ pluginDir }/lazy-load.js`,
+						to: `${ pluginDir }/lazy-load.min.js`,
+					},
+				],
+			} ),
+			new WebpackBar( {
+				name: 'Building Embed Optimizer Assets',
+				color: '#2196f3',
+			} ),
+		],
+	};
+};
+
+/**
+ * Webpack Config: Image Prioritizer
+ *
+ * @param {*} env Webpack environment
+ * @return {Object} Webpack configuration
+ */
+const imagePrioritizer = ( env ) => {
+	if ( env.plugin && env.plugin !== 'image-prioritizer' ) {
+		return defaultBuildConfig;
+	}
+
+	const pluginDir = path.resolve( __dirname, 'plugins/image-prioritizer' );
+
+	return {
+		...sharedConfig,
+		name: 'image-prioritizer',
+		plugins: [
+			new CopyWebpackPlugin( {
+				patterns: [
+					{
+						from: `${ pluginDir }/lazy-load.js`,
+						to: `${ pluginDir }/lazy-load.min.js`,
+					},
+				],
+			} ),
+			new WebpackBar( {
+				name: 'Building Image Prioritizer Assets',
+				color: '#2196f3',
+			} ),
+		],
+	};
+};
 
 /**
  * Webpack Config: Optimization Detective
@@ -50,7 +125,7 @@ const optimizationDetective = ( env ) => {
 	const source = path.resolve( __dirname, 'node_modules/web-vitals' );
 	const destination = path.resolve(
 		__dirname,
-		'plugins/optimization-detective/build'
+		'plugins/optimization-detective'
 	);
 
 	return {
@@ -61,16 +136,21 @@ const optimizationDetective = ( env ) => {
 				patterns: [
 					{
 						from: `${ source }/dist/web-vitals.js`,
-						to: `${ destination }/web-vitals.js`,
+						to: `${ destination }/build/web-vitals.js`,
+						info: { minimized: true },
 					},
 					{
 						from: `${ source }/package.json`,
-						to: `${ destination }/web-vitals.asset.php`,
+						to: `${ destination }/build/web-vitals.asset.php`,
 						transform: {
 							transformer: assetDataTransformer,
 							cache: false,
 						},
 					},
+					{
+						from: `${ destination }/detect.js`,
+						to: `${ destination }/detect.min.js`,
+					},
 				],
 			} ),
 			new WebpackBar( {
@@ -110,6 +190,7 @@ const webWorkerOffloading = ( env ) => {
 					{
 						from: `${ source }/lib/`,
 						to: `${ destination }`,
+						info: { minimized: true },
 					},
 					{
 						from: `${ source }/package.json`,
@@ -164,6 +245,7 @@ const buildPlugin = ( env ) => {
 					{
 						from,
 						to,
+						info: { minimized: true },
 						globOptions: {
 							dot: true,
 							ignore: [
@@ -203,4 +285,10 @@ const buildPlugin = ( env ) => {
 	};
 };
 
-module.exports = [ optimizationDetective, webWorkerOffloading, buildPlugin ];
+module.exports = [
+	embedOptimizer,
+	imagePrioritizer,
+	optimizationDetective,
+	webWorkerOffloading,
+	buildPlugin,
+];