Merge pull request #61 from alleyinteractive/feature/core-script-load…

…ing-strategy-update

Use wp_enqueue_script() for async and defer load methods

CHANGELOG.md

@@ -1,6 +1,10 @@
 # Change Log
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 1.3.7
+
+* Adds support for async and defer using the 'strategy' argument added for wp_enqueue_script in WordPress 6.3.
+
 ## 1.3.6
 
 * Adds support for running the plugin on a Windows hosting environment (#57)

asset-manager.php

@@ -10,7 +10,7 @@
 Plugin URI: https://github.com/alleyinteractive/wp-asset-manager
 Description: Add more robust functionality to enqueuing static assets
 Author: Alley Interactive
-Version: 1.3.6
+Version: 1.3.7
 License: GPLv2 or later
 Author URI: https://www.alleyinteractive.com/
 */

php/class-asset-manager-scripts.php

@@ -252,8 +252,14 @@ public function post_validate_asset( $script ) {
 	 * @param array $script Script to add.
 	 */
 	public function add_to_async( $script ) {
+		// For version of WordPress 6.3+ async and defer can use the core strategy for loading.
+		if ( version_compare( $GLOBALS['wp_version'], '6.3', '<' ) ) {
+			$load_methods_to_async = [ 'async', 'defer', 'async-defer' ];
+		} else {
+			$load_methods_to_async = [ 'async-defer' ];
+		}
 		if (
-			( 'defer' === $script['load_method'] || 'async' === $script['load_method'] || 'async-defer' === $script['load_method'] ) &&
+			in_array( $script['load_method'], $load_methods_to_async, true ) &&
 			! in_array( $script['handle'], $this->async_scripts, true )
 		) {
 			$this->async_scripts[] = $script['handle'];

php/class-asset-manager.php

@@ -299,13 +299,34 @@ public function add_asset( $args ) {
 			// Enqueue asset if applicable.
 			if ( in_array( $args['load_method'], $this->wp_enqueue_methods, true ) && empty( $args['loaded'] ) ) {
 				if ( function_exists( $wp_enqueue_function ) ) {
+
+					// If this is for a style, just pass the media argument.
+					if ( 'style' === $args['type'] ) {
+						$enqueue_options = $args['media'];
+					} else {
+						// If this is for a script, pass the in_footer argument when on a version prior to 6.3.
+						if ( version_compare( $GLOBALS['wp_version'], '6.3', '<' ) ) {
+							$enqueue_options = $args['in_footer'];
+						} else {
+							// We are on a version of WordPress 6.3+ so the last argument is an array.
+							$enqueue_options = [
+								'in_footer' => $args['in_footer'],
+							];
+							// If the load method is async or defer, set the strategy.
+							if ( in_array( $args['load_method'], [ 'async', 'defer' ], true ) ) {
+								$enqueue_options['strategy'] = $args['load_method'];
+							}
+						}
+					}
+
 					$wp_enqueue_function(
 						$args['handle'],
 						$args['src'],
 						$args['deps'],
 						$args['version'],
-						'style' === $args['type'] ? $args['media'] : $args['in_footer']
+						$enqueue_options
 					);
+
 					$args['loaded'] = true;
 				} else {
 					echo wp_kses_post( $this->format_error( $this->generate_asset_error( 'invalid_enqueue_function', false, $wp_enqueue_function ) ) );

tests/test-scripts.php

@@ -11,12 +11,12 @@ function test_add_attributes() {
 		$async_asset  = [
 			'handle'      => 'async-asset',
 			'src'         => get_stylesheet_directory_uri() . '/static/js/async-test.js',
-			'load_method' => 'async',
+			'load_method' => 'async-defer',
 		];
 		$original_tag = '<script type="text/javascript" src="http://example.com/wp-content/themes/twentytwelve/static/js/async-test.js"></script>';
 		am_enqueue_script( $async_asset );
 		\Asset_Manager_Scripts::instance()->add_to_async( $async_asset );
-		$expected_async_tag = '<script type="text/javascript" async src="http://example.com/wp-content/themes/twentytwelve/static/js/async-test.js"></script>';
+		$expected_async_tag = '<script type="text/javascript" async defer src="http://example.com/wp-content/themes/twentytwelve/static/js/async-test.js"></script>';
 		$actual_async_tag   = \Asset_Manager_Scripts::instance()->add_attributes( $original_tag, 'async-asset' );
 		$this->assertEquals( $expected_async_tag, $actual_async_tag, 'add_to_async should add the approprate attribute (async or defer) to a script' );
 	}
@@ -152,7 +152,7 @@ function test_add_to_async() {
 			$this->test_script_two,
 			[
 				'handle'      => 'async-script-test',
-				'load_method' => 'defer',
+				'load_method' => 'async-defer',
 			]
 		);
 		\Asset_Manager_Scripts::instance()->add_to_async( $async_script );
@@ -162,4 +162,20 @@ function test_add_to_async() {
 		\Asset_Manager_Scripts::instance()->add_to_async( $async_script );
 		$this->assertContains( 'async-script-test', \Asset_Manager_Scripts::instance()->async_scripts, 'A script should not be added to the $async_scripts property twice' );
 	}
+
+	/**
+	 * Test defer attribute handling.
+	 * @group assets
+	 */
+	public function test_defer_attribute() {
+
+		// Enqueue the script with the defer attribute.
+		am_enqueue_script( $this->test_script['handle'], $this->test_script['src'], [], 'global', 'defer' );
+
+		// Get the script tag output.
+		$script_output = get_echo( 'wp_print_scripts', [ $this->test_script['handle'] ] );
+
+		// Check if the script tag has the defer attribute.
+		$this->assertStringContainsString( 'defer"', $script_output );
+	}
 }