Changeset 60931 for trunk/src/wp-includes/class-wp-script-modules.php

Timestamp:

10/14/2025 05:45:17 AM (3 months ago)

Author:

westonruter

Message:

Script Loader: Propagate fetchpriority from dependents to dependencies.

This introduces a "fetchpriority bumping" mechanism for both classic scripts (WP_Scripts) and script modules (WP_Script_Modules). When a script with a higher fetchpriority is enqueued, any of its dependencies will have their fetchpriority elevated to match that of the highest-priority dependent. This ensures that all assets in a critical dependency chain are loaded with the appropriate priority, preventing a high-priority script from being blocked by a low-priority dependency. This is similar to logic used in script loading strategies to ensure that a blocking dependent causes delayed (async/defer) dependencies to also become blocking. See #12009.

When a script's fetchpriority is escalated, its original, registered priority is added to the tag via a data-wp-fetchpriority attribute. This matches the addition of the data-wp-strategy parameter added when the resulting loading strategy does not match the original.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/9770.

Follow-up to [60704].

Props westonruter, jonsurrell.
Fixes #61734.

File:

• trunk/src/wp-includes/class-wp-script-modules.php (modified) (7 diffs)

trunk/src/wp-includes/class-wp-script-modules.php

@@ -41 +41 @@
      */
     private $a11y_available = false;
+
+    /**
+     * Holds a mapping of dependents (as IDs) for a given script ID.
+     * Used to optimize recursive dependency tree checks.
+     *
+     * @since 6.9.0
+     * @var array<string, string[]>
+     */
+    private $dependents_map = array();
 
     /**
@@ -271 +280 @@
 
     /**
+     * Gets the highest fetch priority for the provided script IDs.
+     *
+     * @since 6.9.0
+     *
+     * @param string[] $ids Script module IDs.
+     * @return string Highest fetch priority for the provided script module IDs.
+     */
+    private function get_highest_fetchpriority( array $ids ): string {
+        static $priorities   = array(
+            'low',
+            'auto',
+            'high',
+        );
+        $high_priority_index = count( $priorities ) - 1;
+
+        $highest_priority_index = 0;
+        foreach ( $ids as $id ) {
+            if ( isset( $this->registered[ $id ] ) ) {
+                $highest_priority_index = max(
+                    $highest_priority_index,
+                    array_search( $this->registered[ $id ]['fetchpriority'], $priorities, true )
+                );
+                if ( $high_priority_index === $highest_priority_index ) {
+                    break;
+                }
+            }
+        }
+
+        return $priorities[ $highest_priority_index ];
+    }
+
+    /**
      * Prints the enqueued script modules using script tags with type="module"
      * attributes.
@@ -283 +324 @@
                 'id'   => $id . '-js-module',
             );
-            if ( 'auto' !== $script_module['fetchpriority'] ) {
-                $args['fetchpriority'] = $script_module['fetchpriority'];
+
+            $dependents    = $this->get_recursive_dependents( $id );
+            $fetchpriority = $this->get_highest_fetchpriority( array_merge( array( $id ), $dependents ) );
+            if ( 'auto' !== $fetchpriority ) {
+                $args['fetchpriority'] = $fetchpriority;
+            }
+            if ( $fetchpriority !== $script_module['fetchpriority'] ) {
+                $args['data-wp-fetchpriority'] = $script_module['fetchpriority'];
             }
             wp_print_script_tag( $args );
@@ -291 +338 @@
 
     /**
-     * Prints the the static dependencies of the enqueued script modules using
+     * Prints the static dependencies of the enqueued script modules using
      * link tags with rel="modulepreload" attributes.
      *
@@ -302 +349 @@
             // Don't preload if it's marked for enqueue.
             if ( ! in_array( $id, $this->queue, true ) ) {
-                echo sprintf(
-                    '<link rel="modulepreload" href="%s" id="%s"%s>',
+                $enqueued_dependents   = array_intersect( $this->get_recursive_dependents( $id ), $this->queue );
+                $highest_fetchpriority = $this->get_highest_fetchpriority( $enqueued_dependents );
+                printf(
+                    '<link rel="modulepreload" href="%s" id="%s"',
                     esc_url( $this->get_src( $id ) ),
-                    esc_attr( $id . '-js-modulepreload' ),
-                    'auto' !== $script_module['fetchpriority'] ? sprintf( ' fetchpriority="%s"', esc_attr( $script_module['fetchpriority'] ) ) : ''
+                    esc_attr( $id . '-js-modulepreload' )
                 );
+                if ( 'auto' !== $highest_fetchpriority ) {
+                    printf( ' fetchpriority="%s"', esc_attr( $highest_fetchpriority ) );
+                }
+                if ( $highest_fetchpriority !== $script_module['fetchpriority'] && 'auto' !== $script_module['fetchpriority'] ) {
+                    printf( ' data-wp-fetchpriority="%s"', esc_attr( $script_module['fetchpriority'] ) );
+                }
+                echo ">\n";
             }
         }
@@ -375 +430 @@
      * @return array[] List of dependencies, keyed by script module identifier.
      */
-    private function get_dependencies( array $ids, array $import_types = array( 'static', 'dynamic' ) ) {
+    private function get_dependencies( array $ids, array $import_types = array( 'static', 'dynamic' ) ): array {
         return array_reduce(
             $ids,
             function ( $dependency_script_modules, $id ) use ( $import_types ) {
                 $dependencies = array();
-                foreach ( $this->registered[ $id ]['dependencies'] as $dependency ) {
-                    if (
-                    in_array( $dependency['import'], $import_types, true ) &&
-                    isset( $this->registered[ $dependency['id'] ] ) &&
-                    ! isset( $dependency_script_modules[ $dependency['id'] ] )
-                    ) {
-                        $dependencies[ $dependency['id'] ] = $this->registered[ $dependency['id'] ];
+                if ( isset( $this->registered[ $id ] ) ) {
+                    foreach ( $this->registered[ $id ]['dependencies'] as $dependency ) {
+                        if (
+                            in_array( $dependency['import'], $import_types, true ) &&
+                            isset( $this->registered[ $dependency['id'] ] ) &&
+                            ! isset( $dependency_script_modules[ $dependency['id'] ] )
+                        ) {
+                            $dependencies[ $dependency['id'] ] = $this->registered[ $dependency['id'] ];
+                        }
                     }
                 }
@@ -393 +450 @@
             array()
         );
+    }
+
+    /**
+     * Gets all dependents of a script module.
+     *
+     * This is not recursive.
+     *
+     * @since 6.9.0
+     *
+     * @see WP_Scripts::get_dependents()
+     *
+     * @param string $id The script ID.
+     * @return string[] Script module IDs.
+     */
+    private function get_dependents( string $id ): array {
+        // Check if dependents map for the handle in question is present. If so, use it.
+        if ( isset( $this->dependents_map[ $id ] ) ) {
+            return $this->dependents_map[ $id ];
+        }
+
+        $dependents = array();
+
+        // Iterate over all registered scripts, finding dependents of the script passed to this method.
+        foreach ( $this->registered as $registered_id => $args ) {
+            if ( in_array( $id, wp_list_pluck( $args['dependencies'], 'id' ), true ) ) {
+                $dependents[] = $registered_id;
+            }
+        }
+
+        // Add the module's dependents to the map to ease future lookups.
+        $this->dependents_map[ $id ] = $dependents;
+
+        return $dependents;
+    }
+
+    /**
+     * Gets all recursive dependents of a script module.
+     *
+     * @since 6.9.0
+     *
+     * @see WP_Scripts::get_dependents()
+     *
+     * @param string $id The script ID.
+     * @return string[] Script module IDs.
+     */
+    private function get_recursive_dependents( string $id ): array {
+        $get = function ( string $id, array $checked = array() ) use ( &$get ): array {
+
+            // If by chance an unregistered script module is checked or there is a recursive dependency, return early.
+            if ( ! isset( $this->registered[ $id ] ) || isset( $checked[ $id ] ) ) {
+                return array();
+            }
+
+            // Mark this script module as checked to guard against infinite recursion.
+            $checked[ $id ] = true;
+
+            $dependents = array();
+            foreach ( $this->get_dependents( $id ) as $dependent ) {
+                $dependents = array_merge(
+                    $dependents,
+                    array( $dependent ),
+                    $get( $dependent, $checked )
+                );
+            }
+
+            return $dependents;
+        };
+
+        return array_unique( $get( $id ) );
     }