Boost: Exclude scripts of type module from concatenation

[dilirity]

Fixes HOG-153

Concatenate JS by default doesn't concatenate scripts that are of type="module" if they have been correctly enqueued using wp_enqueue_script_module. However, some plugins like AIOSEO add the type="module" part after the script has been output (by that time, it's been concatenated).

This PR fixes that by creating a script tag and checking its type before it's output.

Proposed changes:

• Exclude scripts that have type="module assigned to them after enqueue;
• Fix Concatenate JS not respecting script_loader_src filter, allowing scripts that shouldn't be shown on the page to be shown.

Other information:

• Have you written new tests for your changes, if applicable?
• Have you checked the E2E test CI results, and verified that your changes do not break them?
• Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

HOG-153

Does this pull request change what data or activity we track or use?

no

Testing instructions:

Test that script modules are excluded from concatenation

• Setup Boost (free);
• Setup AIOSEO. You'll know it's set up because there are two type="module" scripts on the page:
  • aioseo/js/src/vue/standalone/seo-preview/main.js
  • aioseo/js/src/vue/standalone/app/main.js
• Open the home page and make sure there are no errors in the console;
• Enable Concatenate JS and visit the home page again - there should be no errors in the console;
• Search the source of the page for type="module" - there should be 2. If you have WP_DEBUG enabled, you should see this:

Test that scripts are properly skipped when using filters

• You can do this test right after the above one;
• Add this script to your website. It causes the frontend.min.js script that comes from the google-analytics-for-wordpress plugin, to be skipped.

add_filter( 'script_loader_src', function ( $src, $handle ) {
	if ( 'monsterinsights-vue-frontend' === $handle ) {
		return false;
	}

	return $src;
}, 10, 2 );

• Open the page and make sure that there's no reference to frontend.min.js;
• Remove the PHP snippet and make sure the script is on the page.

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ✅ Add a "[Status]" label (In Progress, Needs Review, ...).
  
• ✅ Add a "[Type]" label (Bug, Enhancement, Janitorial, Task).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

Follow this PR Review Process:

1. Ensure all required checks appearing at the bottom of this PR are passing.
2. Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
3. You can use GitHub's Reviewers functionality to request a review.
4. When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

---

Boost plugin:

No scheduled milestone found for this plugin.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

[jp-launch-control]

Code Coverage Summary

Coverage changed in 1 file.

File	Coverage	Δ%	Δ Uncovered
projects/plugins/boost/app/lib/minify/class-concatenate-js.php	0/164 (0.00%)	0.00%	19 💔

Full summary · PHP report · JS report

_{Coverage check overridden by I don't care about code coverage for this PR Use this label to ignore the check for insufficient code coveage. .}

[LiamSarsfield]

I am still getting a console error when I have Concat JS enabled with All in One SEO
Though All in One SEO, also came with a few other plugins during my installation, including a google-analytics-for-wordpress which appears to have caused the error.

From looking at the script, it's actually of type text/javascript which I assume is plain wrong, though when disabling Concat JS, I do not get an error, so I can confirm Concat JS most likely causes it.

[dilirity]

@LiamSarsfield thanks for testing!

This was a wild problem to pinpoint. Some plugins hook onto wp_script_attributes to change the type of scripts to module (depends on the WP version). In this case, it was google-analytics-for-wordpress. Specifically :

if ( version_compare( $wp_version, '6.4', '>=' ) ) {
	add_filter( 'wp_script_attributes', array( $this, 'set_scripts_as_type_module' ), 99999 );
} else {
	// Use script_loader_tag if WordPress version is lower than 5.7.0.
	add_filter( 'script_loader_tag', array( $this, 'script_loader_tag' ), 99999, 3 );
}

Unfortunately, their GitHub repo is outdated 😞 so I can't link to up-to-date code...

Since Conatenate JS (and page optimize for that matter) don't use wp_get_script_tag which allows plugins to hook onto wp_script_attributes and change the type, my fix made concatenate "assume" that it's okay to just output it... And since Concatenate is outputting all scripts with text/javascript that broke the module...

I've added a fix to try and mimic what WP core does before outputting a script on the page - https://github.com/WordPress/wordpress-develop/blob/e0ee668d0dc17748be036e0583add30b02f0f2f9/src/wp-includes/class-wp-scripts.php#L411-L441

Unfortunately, it's not perfect, as we don't have access to some data WP has (for example, strategy that's used in the list of attributes can only be retrieved by a private method in WP_Scripts). It should be enough to cover most cases.

We also now properly skip scripts that have an empty URL thanks to this.

[LiamSarsfield]

LGTM! Console errors are gone now, I have some nitpicks but they're optional

[LiamSarsfield]

@dilirity Changes look good, but phan is complaining:

projects/plugins/boost/app/lib/minify/class-concatenate-js.php:370
Error: Plugin PhanPluginSimplifyExpressionBool (false === $processor->next_tag()) can probably be simplified to !($processor->next_tag())

FAQ on Phan issues: pdWQjU-Jb-p2
Error: Process completed with exit code 1.