WordPress.org
Get WordPress

Make WordPress Core

Changeset 60931


Ignore:
Timestamp:
10/14/2025 05:45:17 AM (8 weeks 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.

Location:
trunk
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-includes/class-wp-dependency.php

    r60656 r60931  
    5151     *
    5252     * @since 2.6.0
    53      * @var bool|string
     53     * @var string|false|null
    5454     */
    5555    public $ver = false;

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

    r60930 r60931  
    4141     */
    4242    private $a11y_available = false;
     43
     44    /**
     45     * Holds a mapping of dependents (as IDs) for a given script ID.
     46     * Used to optimize recursive dependency tree checks.
     47     *
     48     * @since 6.9.0
     49     * @var array<string, string[]>
     50     */
     51    private $dependents_map = array();
    4352
    4453    /**
    … …  
    271280
    272281    /**
     282     * Gets the highest fetch priority for the provided script IDs.
     283     *
     284     * @since 6.9.0
     285     *
     286     * @param string[] $ids Script module IDs.
     287     * @return string Highest fetch priority for the provided script module IDs.
     288     */
     289    private function get_highest_fetchpriority( array $ids ): string {
     290        static $priorities   = array(
     291            'low',
     292            'auto',
     293            'high',
     294        );
     295        $high_priority_index = count( $priorities ) - 1;
     296
     297        $highest_priority_index = 0;
     298        foreach ( $ids as $id ) {
     299            if ( isset( $this->registered[ $id ] ) ) {
     300                $highest_priority_index = max(
     301                    $highest_priority_index,
     302                    array_search( $this->registered[ $id ]['fetchpriority'], $priorities, true )
     303                );
     304                if ( $high_priority_index === $highest_priority_index ) {
     305                    break;
     306                }
     307            }
     308        }
     309
     310        return $priorities[ $highest_priority_index ];
     311    }
     312
     313    /**
    273314     * Prints the enqueued script modules using script tags with type="module"
    274315     * attributes.
    … …  
    283324                'id'   => $id . '-js-module',
    284325            );
    285             if ( 'auto' !== $script_module['fetchpriority'] ) {
    286                 $args['fetchpriority'] = $script_module['fetchpriority'];
     326
     327            $dependents    = $this->get_recursive_dependents( $id );
     328            $fetchpriority = $this->get_highest_fetchpriority( array_merge( array( $id ), $dependents ) );
     329            if ( 'auto' !== $fetchpriority ) {
     330                $args['fetchpriority'] = $fetchpriority;
     331            }
     332            if ( $fetchpriority !== $script_module['fetchpriority'] ) {
     333                $args['data-wp-fetchpriority'] = $script_module['fetchpriority'];
    287334            }
    288335            wp_print_script_tag( $args );
    … …  
    291338
    292339    /**
    293      * Prints the the static dependencies of the enqueued script modules using
     340     * Prints the static dependencies of the enqueued script modules using
    294341     * link tags with rel="modulepreload" attributes.
    295342     *
    … …  
    302349            // Don't preload if it's marked for enqueue.
    303350            if ( ! in_array( $id, $this->queue, true ) ) {
    304                 echo sprintf(
    305                     '<link rel="modulepreload" href="%s" id="%s"%s>',
     351                $enqueued_dependents   = array_intersect( $this->get_recursive_dependents( $id ), $this->queue );
     352                $highest_fetchpriority = $this->get_highest_fetchpriority( $enqueued_dependents );
     353                printf(
     354                    '<link rel="modulepreload" href="%s" id="%s"',
    306355                    esc_url( $this->get_src( $id ) ),
    307                     esc_attr( $id . '-js-modulepreload' ),
    308                     'auto' !== $script_module['fetchpriority'] ? sprintf( ' fetchpriority="%s"', esc_attr( $script_module['fetchpriority'] ) ) : ''
     356                    esc_attr( $id . '-js-modulepreload' )
    309357                );
     358                if ( 'auto' !== $highest_fetchpriority ) {
     359                    printf( ' fetchpriority="%s"', esc_attr( $highest_fetchpriority ) );
     360                }
     361                if ( $highest_fetchpriority !== $script_module['fetchpriority'] && 'auto' !== $script_module['fetchpriority'] ) {
     362                    printf( ' data-wp-fetchpriority="%s"', esc_attr( $script_module['fetchpriority'] ) );
     363                }
     364                echo ">\n";
    310365            }
    311366        }
    … …  
    375430     * @return array[] List of dependencies, keyed by script module identifier.
    376431     */
    377     private function get_dependencies( array $ids, array $import_types = array( 'static', 'dynamic' ) ) {
     432    private function get_dependencies( array $ids, array $import_types = array( 'static', 'dynamic' ) ): array {
    378433        return array_reduce(
    379434            $ids,
    380435            function ( $dependency_script_modules, $id ) use ( $import_types ) {
    381436                $dependencies = array();
    382                 foreach ( $this->registered[ $id ]['dependencies'] as $dependency ) {
    383                     if (
    384                     in_array( $dependency['import'], $import_types, true ) &&
    385                     isset( $this->registered[ $dependency['id'] ] ) &&
    386                     ! isset( $dependency_script_modules[ $dependency['id'] ] )
    387                     ) {
    388                         $dependencies[ $dependency['id'] ] = $this->registered[ $dependency['id'] ];
     437                if ( isset( $this->registered[ $id ] ) ) {
     438                    foreach ( $this->registered[ $id ]['dependencies'] as $dependency ) {
     439                        if (
     440                            in_array( $dependency['import'], $import_types, true ) &&
     441                            isset( $this->registered[ $dependency['id'] ] ) &&
     442                            ! isset( $dependency_script_modules[ $dependency['id'] ] )
     443                        ) {
     444                            $dependencies[ $dependency['id'] ] = $this->registered[ $dependency['id'] ];
     445                        }
    389446                    }
    390447                }
    … …  
    393450            array()
    394451        );
     452    }
     453
     454    /**
     455     * Gets all dependents of a script module.
     456     *
     457     * This is not recursive.
     458     *
     459     * @since 6.9.0
     460     *
     461     * @see WP_Scripts::get_dependents()
     462     *
     463     * @param string $id The script ID.
     464     * @return string[] Script module IDs.
     465     */
     466    private function get_dependents( string $id ): array {
     467        // Check if dependents map for the handle in question is present. If so, use it.
     468        if ( isset( $this->dependents_map[ $id ] ) ) {
     469            return $this->dependents_map[ $id ];
     470        }
     471
     472        $dependents = array();
     473
     474        // Iterate over all registered scripts, finding dependents of the script passed to this method.
     475        foreach ( $this->registered as $registered_id => $args ) {
     476            if ( in_array( $id, wp_list_pluck( $args['dependencies'], 'id' ), true ) ) {
     477                $dependents[] = $registered_id;
     478            }
     479        }
     480
     481        // Add the module's dependents to the map to ease future lookups.
     482        $this->dependents_map[ $id ] = $dependents;
     483
     484        return $dependents;
     485    }
     486
     487    /**
     488     * Gets all recursive dependents of a script module.
     489     *
     490     * @since 6.9.0
     491     *
     492     * @see WP_Scripts::get_dependents()
     493     *
     494     * @param string $id The script ID.
     495     * @return string[] Script module IDs.
     496     */
     497    private function get_recursive_dependents( string $id ): array {
     498        $get = function ( string $id, array $checked = array() ) use ( &$get ): array {
     499
     500            // If by chance an unregistered script module is checked or there is a recursive dependency, return early.
     501            if ( ! isset( $this->registered[ $id ] ) || isset( $checked[ $id ] ) ) {
     502                return array();
     503            }
     504
     505            // Mark this script module as checked to guard against infinite recursion.
     506            $checked[ $id ] = true;
     507
     508            $dependents = array();
     509            foreach ( $this->get_dependents( $id ) as $dependent ) {
     510                $dependents = array_merge(
     511                    $dependents,
     512                    array( $dependent ),
     513                    $get( $dependent, $checked )
     514                );
     515            }
     516
     517            return $dependents;
     518        };
     519
     520        return array_unique( $get( $id ) );
    395521    }
    396522

  • trunk/src/wp-includes/class-wp-scripts.php

    r60722 r60931  
    128128     *
    129129     * @since 6.3.0
    130      * @var array
     130     * @var array<string, string[]>
    131131     */
    132132    private $dependents_map = array();
    … …  
    440440            $attr['data-wp-strategy'] = $intended_strategy;
    441441        }
    442         if ( isset( $obj->extra['fetchpriority'] ) && 'auto' !== $obj->extra['fetchpriority'] && $this->is_valid_fetchpriority( $obj->extra['fetchpriority'] ) ) {
    443             $attr['fetchpriority'] = $obj->extra['fetchpriority'];
    444         }
     442
     443        // Determine fetchpriority.
     444        $original_fetchpriority = isset( $obj->extra['fetchpriority'] ) ? $obj->extra['fetchpriority'] : null;
     445        if ( null === $original_fetchpriority || ! $this->is_valid_fetchpriority( $original_fetchpriority ) ) {
     446            $original_fetchpriority = 'auto';
     447        }
     448        $actual_fetchpriority = $this->get_highest_fetchpriority_with_dependents( $handle );
     449        if ( null === $actual_fetchpriority ) {
     450            // If null, it's likely this script was not explicitly enqueued, so in this case use the original priority.
     451            $actual_fetchpriority = $original_fetchpriority;
     452        }
     453        if ( is_string( $actual_fetchpriority ) && 'auto' !== $actual_fetchpriority ) {
     454            $attr['fetchpriority'] = $actual_fetchpriority;
     455        }
     456        if ( $original_fetchpriority !== $actual_fetchpriority ) {
     457            $attr['data-wp-fetchpriority'] = $original_fetchpriority;
     458        }
     459
    445460        $tag  = $translations . $ie_conditional_prefix . $before_script;
    446461        $tag .= wp_get_script_tag( $attr );
    … …  
    899914     * Gets all dependents of a script.
    900915     *
     916     * This is not recursive.
     917     *
    901918     * @since 6.3.0
    902919     *
    … …  
    10501067
    10511068        return $eligible_strategies;
     1069    }
     1070
     1071    /**
     1072     * Gets the highest fetch priority for a given script and all of its dependent scripts.
     1073     *
     1074     * @since 6.9.0
     1075     * @see self::filter_eligible_strategies()
     1076     * @see WP_Script_Modules::get_highest_fetchpriority_with_dependents()
     1077     *
     1078     * @param string              $handle  Script module ID.
     1079     * @param array<string, true> $checked Optional. An array of already checked script handles, used to avoid recursive loops.
     1080     * @return string|null Highest fetch priority for the script and its dependents.
     1081     */
     1082    private function get_highest_fetchpriority_with_dependents( string $handle, array $checked = array() ): ?string {
     1083        // If there is a recursive dependency, return early.
     1084        if ( isset( $checked[ $handle ] ) ) {
     1085            return null;
     1086        }
     1087
     1088        // Mark this handle as checked to guard against infinite recursion.
     1089        $checked[ $handle ] = true;
     1090
     1091        // Abort if the script is not enqueued or a dependency of an enqueued script.
     1092        if ( ! $this->query( $handle, 'enqueued' ) ) {
     1093            return null;
     1094        }
     1095
     1096        $fetchpriority = $this->get_data( $handle, 'fetchpriority' );
     1097        if ( ! $this->is_valid_fetchpriority( $fetchpriority ) ) {
     1098            $fetchpriority = 'auto';
     1099        }
     1100
     1101        static $priorities   = array(
     1102            'low',
     1103            'auto',
     1104            'high',
     1105        );
     1106        $high_priority_index = count( $priorities ) - 1;
     1107
     1108        $highest_priority_index = (int) array_search( $fetchpriority, $priorities, true );
     1109        if ( $highest_priority_index !== $high_priority_index ) {
     1110            foreach ( $this->get_dependents( $handle ) as $dependent_handle ) {
     1111                $dependent_priority = $this->get_highest_fetchpriority_with_dependents( $dependent_handle, $checked );
     1112                if ( is_string( $dependent_priority ) ) {
     1113                    $highest_priority_index = max(
     1114                        $highest_priority_index,
     1115                        (int) array_search( $dependent_priority, $priorities, true )
     1116                    );
     1117                    if ( $highest_priority_index === $high_priority_index ) {
     1118                        break;
     1119                    }
     1120                }
     1121            }
     1122        }
     1123
     1124        return $priorities[ $highest_priority_index ];
    10521125    }
    10531126

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

    r60704 r60931  
    182182        }
    183183
    184         // The Interactivity API is designed with server-side rendering as its primary goal, so all of its script modules should be loaded with low fetch priority since they should not be needed in the critical rendering path.
     184        /*
     185         * The Interactivity API is designed with server-side rendering as its primary goal, so all of its script modules
     186         * should be loaded with low fetchpriority since they should not be needed in the critical rendering path.
     187         * Also, the @wordpress/a11y script module is intended to be used as a dynamic import dependency, in which case
     188         * the fetchpriority is irrelevant. See <https://make.wordpress.org/core/2024/10/14/updates-to-script-modules-in-6-7/>.
     189         * However, in case it is added as a static import dependency, the fetchpriority is explicitly set to be 'low'
     190         * since the module should not be involved in the critical rendering path, and if it is, its fetchpriority will
     191         * be bumped to match the fetchpriority of the dependent script.
     192         */
    185193        $args = array();
    186         if ( str_starts_with( $script_module_id, '@wordpress/interactivity' ) || str_starts_with( $script_module_id, '@wordpress/block-library' ) ) {
     194        if (
     195            str_starts_with( $script_module_id, '@wordpress/interactivity' ) ||
     196            str_starts_with( $script_module_id, '@wordpress/block-library' ) ||
     197            '@wordpress/a11y' === $script_module_id
     198        ) {
    187199            $args['fetchpriority'] = 'low';
    188200        }

  • trunk/tests/phpunit/tests/dependencies/scripts.php

    r60729 r60931  
    12331233            )
    12341234        );
     1235        // Note: All of these scripts have fetchpriority=high because the leaf dependent script has that fetch priority.
    12351236        $output    = get_echo( 'wp_print_scripts' );
    1236         $expected  = "<script type='text/javascript' src='/main-script-d4.js' id='main-script-d4-js' defer='defer' data-wp-strategy='defer'></script>\n";
    1237         $expected .= "<script type='text/javascript' src='/dependent-script-d4-1.js' id='dependent-script-d4-1-js' defer='defer' data-wp-strategy='defer'></script>\n";
    1238         $expected .= "<script type='text/javascript' src='/dependent-script-d4-2.js' id='dependent-script-d4-2-js' defer='defer' data-wp-strategy='async' fetchpriority='low'></script>\n";
     1237        $expected  = "<script type='text/javascript' src='/main-script-d4.js'        id='main-script-d4-js'        defer='defer' data-wp-strategy='defer' fetchpriority='high' data-wp-fetchpriority='auto'></script>\n";
     1238        $expected .= "<script type='text/javascript' src='/dependent-script-d4-1.js' id='dependent-script-d4-1-js' defer='defer' data-wp-strategy='defer' fetchpriority='high' data-wp-fetchpriority='auto'></script>\n";
     1239        $expected .= "<script type='text/javascript' src='/dependent-script-d4-2.js' id='dependent-script-d4-2-js' defer='defer' data-wp-strategy='async' fetchpriority='high' data-wp-fetchpriority='low'></script>\n";
    12391240        $expected .= "<script type='text/javascript' src='/dependent-script-d4-3.js' id='dependent-script-d4-3-js' defer='defer' data-wp-strategy='defer' fetchpriority='high'></script>\n";
    12401241
    … …  
    13421343        wp_register_script( 'alias', false, array(), null, array( 'fetchpriority' => 'low' ) );
    13431344        $this->assertArrayNotHasKey( 'fetchpriority', wp_scripts()->registered['alias']->extra );
     1345    }
     1346
     1347    /**
     1348     * Data provider.
     1349     *
     1350     * @return array<string, array{enqueues: string[], expected: string}>
     1351     */
     1352    public function data_provider_to_test_fetchpriority_bumping(): array {
     1353        return array(
     1354            'enqueue_bajo' => array(
     1355                'enqueues' => array( 'bajo' ),
     1356                'expected' => '<script fetchpriority="low" id="bajo-js" src="/bajo.js" type="text/javascript"></script>',
     1357            ),
     1358            'enqueue_auto' => array(
     1359                'enqueues' => array( 'auto' ),
     1360                'expected' => '
     1361                    <script type="text/javascript" src="/bajo.js" id="bajo-js" data-wp-fetchpriority="low"></script>
     1362                    <script type="text/javascript" src="/auto.js" id="auto-js"></script>
     1363                ',
     1364            ),
     1365            'enqueue_alto' => array(
     1366                'enqueues' => array( 'alto' ),
     1367                'expected' => '
     1368                    <script type="text/javascript" src="/bajo.js" id="bajo-js" fetchpriority="high" data-wp-fetchpriority="low"></script>
     1369                    <script type="text/javascript" src="/auto.js" id="auto-js" fetchpriority="high" data-wp-fetchpriority="auto"></script>
     1370                    <script type="text/javascript" src="/alto.js" id="alto-js" fetchpriority="high"></script>
     1371                ',
     1372            ),
     1373        );
     1374    }
     1375
     1376    /**
     1377     * Tests a higher fetchpriority on a dependent script module causes the fetchpriority of a dependency script module to be bumped.
     1378     *
     1379     * @ticket 61734
     1380     *
     1381     * @covers WP_Scripts::get_dependents
     1382     * @covers WP_Scripts::get_highest_fetchpriority_with_dependents
     1383     * @covers WP_Scripts::do_item
     1384     *
     1385     * @dataProvider data_provider_to_test_fetchpriority_bumping
     1386     */
     1387    public function test_fetchpriority_bumping( array $enqueues, string $expected ) {
     1388        wp_register_script( 'bajo', '/bajo.js', array(), null, array( 'fetchpriority' => 'low' ) );
     1389        wp_register_script( 'auto', '/auto.js', array( 'bajo' ), null, array( 'fetchpriority' => 'auto' ) );
     1390        wp_register_script( 'alto', '/alto.js', array( 'auto' ), null, array( 'fetchpriority' => 'high' ) );
     1391
     1392        foreach ( $enqueues as $enqueue ) {
     1393            wp_enqueue_script( $enqueue );
     1394        }
     1395
     1396        $actual = get_echo( 'wp_print_scripts' );
     1397        $this->assertEqualHTML( $expected, $actual, '<body>', "Snapshot:\n$actual" );
     1398    }
     1399
     1400    /**
     1401     * Tests bumping fetchpriority with complex dependency graph.
     1402     *
     1403     * @ticket 61734
     1404     * @link https://github.com/WordPress/wordpress-develop/pull/9770#issuecomment-3280065818
     1405     *
     1406     * @covers WP_Scripts::get_dependents
     1407     * @covers WP_Scripts::get_highest_fetchpriority_with_dependents
     1408     * @covers WP_Scripts::do_item
     1409     */
     1410    public function test_fetchpriority_bumping_a_to_z() {
     1411        wp_register_script( 'a', '/a.js', array( 'b' ), null, array( 'fetchpriority' => 'low' ) );
     1412        wp_register_script( 'b', '/b.js', array( 'c' ), null, array( 'fetchpriority' => 'auto' ) );
     1413        wp_register_script( 'c', '/c.js', array( 'd', 'e' ), null, array( 'fetchpriority' => 'auto' ) );
     1414        wp_register_script( 'd', '/d.js', array( 'z' ), null, array( 'fetchpriority' => 'high' ) );
     1415        wp_register_script( 'e', '/e.js', array(), null, array( 'fetchpriority' => 'auto' ) );
     1416
     1417        wp_register_script( 'x', '/x.js', array( 'd', 'y' ), null, array( 'fetchpriority' => 'high' ) );
     1418        wp_register_script( 'y', '/y.js', array( 'z' ), null, array( 'fetchpriority' => 'auto' ) );
     1419        wp_register_script( 'z', '/z.js', array(), null, array( 'fetchpriority' => 'auto' ) );
     1420
     1421        wp_enqueue_script( 'a' );
     1422        wp_enqueue_script( 'x' );
     1423
     1424        $actual   = get_echo( 'wp_print_scripts' );
     1425        $expected = '
     1426            <script type="text/javascript" src="/z.js" id="z-js" fetchpriority="high" data-wp-fetchpriority="auto"></script>
     1427            <script type="text/javascript" src="/d.js" id="d-js" fetchpriority="high"></script>
     1428            <script type="text/javascript" src="/e.js" id="e-js"></script>
     1429            <script type="text/javascript" src="/c.js" id="c-js"></script>
     1430            <script type="text/javascript" src="/b.js" id="b-js"></script>
     1431            <script type="text/javascript" src="/a.js" id="a-js" fetchpriority="low"></script>
     1432            <script type="text/javascript" src="/y.js" id="y-js" fetchpriority="high" data-wp-fetchpriority="auto"></script>
     1433            <script type="text/javascript" src="/x.js" id="x-js" fetchpriority="high"></script>
     1434        ';
     1435        $this->assertEqualHTML( $expected, $actual, '<body>', "Snapshot:\n$actual" );
     1436    }
     1437
     1438    /**
     1439     * Tests that printing a script without enqueueing has the same output as when it is enqueued.
     1440     *
     1441     * @ticket 61734
     1442     *
     1443     * @covers WP_Scripts::do_item
     1444     * @covers WP_Scripts::do_items
     1445     * @covers ::wp_default_scripts
     1446     *
     1447     * @dataProvider data_provider_enqueue_or_not_to_enqueue
     1448     */
     1449    public function test_printing_default_script_comment_reply_enqueued_or_not_enqueued( bool $enqueue ) {
     1450        $wp_scripts = wp_scripts();
     1451        wp_default_scripts( $wp_scripts );
     1452
     1453        $this->assertArrayHasKey( 'comment-reply', $wp_scripts->registered );
     1454        $wp_scripts->registered['comment-reply']->ver = null;
     1455        $this->assertArrayHasKey( 'fetchpriority', $wp_scripts->registered['comment-reply']->extra );
     1456        $this->assertSame( 'low', $wp_scripts->registered['comment-reply']->extra['fetchpriority'] );
     1457        $this->assertArrayHasKey( 'strategy', $wp_scripts->registered['comment-reply']->extra );
     1458        $this->assertSame( 'async', $wp_scripts->registered['comment-reply']->extra['strategy'] );
     1459        if ( $enqueue ) {
     1460            wp_enqueue_script( 'comment-reply' );
     1461            $markup = get_echo( array( $wp_scripts, 'do_items' ), array( false ) );
     1462        } else {
     1463            $markup = get_echo( array( $wp_scripts, 'do_items' ), array( array( 'comment-reply' ) ) );
     1464        }
     1465
     1466        $this->assertEqualHTML(
     1467            sprintf(
     1468                '<script type="text/javascript" src="%s" id="comment-reply-js" async="async" data-wp-strategy="async" fetchpriority="low"></script>',
     1469                includes_url( 'js/comment-reply.js' )
     1470            ),
     1471            $markup
     1472        );
     1473    }
     1474
     1475    /**
     1476     * Data provider for test_default_scripts_comment_reply_not_enqueued.
     1477     *
     1478     * @return array[]
     1479     */
     1480    public static function data_provider_enqueue_or_not_to_enqueue(): array {
     1481        return array(
     1482            'not_enqueued' => array(
     1483                false,
     1484            ),
     1485            'enqueued'     => array(
     1486                true,
     1487            ),
     1488        );
    13441489    }
    13451490

  • trunk/tests/phpunit/tests/script-modules/wpScriptModules.php

    r60930 r60931  
    6868            $id             = preg_replace( '/-js-module$/', '', (string) $p->get_attribute( 'id' ) );
    6969            $fetchpriority  = $p->get_attribute( 'fetchpriority' );
    70             $modules[ $id ] = array(
    71                 'url'           => $p->get_attribute( 'src' ),
    72                 'fetchpriority' => is_string( $fetchpriority ) ? $fetchpriority : 'auto',
     70            $modules[ $id ] = array_merge(
     71                array(
     72                    'url'           => $p->get_attribute( 'src' ),
     73                    'fetchpriority' => is_string( $fetchpriority ) ? $fetchpriority : 'auto',
     74                ),
     75                ...array_map(
     76                    static function ( $attribute_name ) use ( $p ) {
     77                        return array( $attribute_name => $p->get_attribute( $attribute_name ) );
     78                    },
     79                    $p->get_attribute_names_with_prefix( 'data-' )
     80                )
    7381            );
    7482        }
    … …  
    113121            $id              = preg_replace( '/-js-modulepreload$/', '', $p->get_attribute( 'id' ) );
    114122            $fetchpriority   = $p->get_attribute( 'fetchpriority' );
    115             $preloads[ $id ] = array(
    116                 'url'           => $p->get_attribute( 'href' ),
    117                 'fetchpriority' => is_string( $fetchpriority ) ? $fetchpriority : 'auto',
     123            $preloads[ $id ] = array_merge(
     124                array(
     125                    'url'           => $p->get_attribute( 'href' ),
     126                    'fetchpriority' => is_string( $fetchpriority ) ? $fetchpriority : 'auto',
     127                ),
     128                ...array_map(
     129                    static function ( $attribute_name ) use ( $p ) {
     130                        return array( $attribute_name => $p->get_attribute( $attribute_name ) );
     131                    },
     132                    $p->get_attribute_names_with_prefix( 'data-' )
     133                )
    118134            );
    119135        }
    … …  
    272288                    'b-dep'        => array(
    273289                        'url'           => '/b-dep.js?ver=99.9.9',
    274                         'fetchpriority' => 'auto',
     290                        'fetchpriority' => 'low', // Propagates from 'b'.
    275291                    ),
    276292                    'c-dep'        => array(
    277                         'url'           => '/c-static.js?ver=99.9.9',
    278                         'fetchpriority' => 'low',
     293                        'url'                   => '/c-static.js?ver=99.9.9',
     294                        'fetchpriority'         => 'auto', // Not 'low' because the dependent script 'c' has a fetchpriority of 'auto'.
     295                        'data-wp-fetchpriority' => 'low',
    279296                    ),
    280297                    'c-static-dep' => array(
    281                         'url'           => '/c-static-dep.js?ver=99.9.9',
    282                         'fetchpriority' => 'high',
     298                        'url'                   => '/c-static-dep.js?ver=99.9.9',
     299                        'fetchpriority'         => 'auto', // Propagated from 'c'.
     300                        'data-wp-fetchpriority' => 'high',
    283301                    ),
    284302                    'd-static-dep' => array(
    … …  
    733751                ),
    734752            )
     753            // Note: The default fetchpriority=auto is upgraded to high because the dependent script module 'static-dep' has a high fetch priority.
    735754        );
    736755        $this->script_modules->register(
    … …  
    760779        $this->assertCount( 2, $preloaded_script_modules );
    761780        $this->assertStringStartsWith( '/static-dep.js', $preloaded_script_modules['static-dep']['url'] );
    762         $this->assertSame( 'high', $preloaded_script_modules['static-dep']['fetchpriority'] );
     781        $this->assertSame( 'auto', $preloaded_script_modules['static-dep']['fetchpriority'] ); // Not 'high'
    763782        $this->assertStringStartsWith( '/nested-static-dep.js', $preloaded_script_modules['nested-static-dep']['url'] );
    764         $this->assertSame( 'auto', $preloaded_script_modules['nested-static-dep']['fetchpriority'] );
     783        $this->assertSame( 'auto', $preloaded_script_modules['nested-static-dep']['fetchpriority'] ); // Auto because the enqueued script foo has the fetchpriority of auto.
    765784        $this->assertArrayNotHasKey( 'dynamic-dep', $preloaded_script_modules );
    766785        $this->assertArrayNotHasKey( 'nested-dynamic-dep', $preloaded_script_modules );
    … …  
    972991        $preloaded_script_modules = $this->get_preloaded_script_modules();
    973992        $this->assertSame( '/dep.js?ver=2.0', $preloaded_script_modules['dep']['url'] );
    974         $this->assertSame( 'high', $preloaded_script_modules['dep']['fetchpriority'] );
     993        $this->assertSame( 'auto', $preloaded_script_modules['dep']['fetchpriority'] ); // Because 'foo' has a priority of 'auto'.
    975994    }
    976995
    … …  
    13451364
    13461365    /**
     1366     * Data provider.
     1367     *
     1368     * @return array<string, array{enqueues: string[], expected: array}>
     1369     */
     1370    public function data_provider_to_test_fetchpriority_bumping(): array {
     1371        return array(
     1372            'enqueue_bajo' => array(
     1373                'enqueues' => array( 'bajo' ),
     1374                'expected' => array(
     1375                    'preload_links' => array(),
     1376                    'script_tags'   => array(
     1377                        'bajo' => array(
     1378                            'url'                   => '/bajo.js',
     1379                            'fetchpriority'         => 'high',
     1380                            'data-wp-fetchpriority' => 'low',
     1381                        ),
     1382                    ),
     1383                    'import_map'    => array(
     1384                        'dyno' => '/dyno.js',
     1385                    ),
     1386                ),
     1387            ),
     1388            'enqueue_auto' => array(
     1389                'enqueues' => array( 'auto' ),
     1390                'expected' => array(
     1391                    'preload_links' => array(
     1392                        'bajo' => array(
     1393                            'url'                   => '/bajo.js',
     1394                            'fetchpriority'         => 'auto',
     1395                            'data-wp-fetchpriority' => 'low',
     1396                        ),
     1397                    ),
     1398                    'script_tags'   => array(
     1399                        'auto' => array(
     1400                            'url'                   => '/auto.js',
     1401                            'fetchpriority'         => 'high',
     1402                            'data-wp-fetchpriority' => 'auto',
     1403                        ),
     1404                    ),
     1405                    'import_map'    => array(
     1406                        'bajo' => '/bajo.js',
     1407                        'dyno' => '/dyno.js',
     1408                    ),
     1409                ),
     1410            ),
     1411            'enqueue_alto' => array(
     1412                'enqueues' => array( 'alto' ),
     1413                'expected' => array(
     1414                    'preload_links' => array(
     1415                        'auto' => array(
     1416                            'url'           => '/auto.js',
     1417                            'fetchpriority' => 'high',
     1418                        ),
     1419                        'bajo' => array(
     1420                            'url'                   => '/bajo.js',
     1421                            'fetchpriority'         => 'high',
     1422                            'data-wp-fetchpriority' => 'low',
     1423                        ),
     1424                    ),
     1425                    'script_tags'   => array(
     1426                        'alto' => array(
     1427                            'url'           => '/alto.js',
     1428                            'fetchpriority' => 'high',
     1429                        ),
     1430                    ),
     1431                    'import_map'    => array(
     1432                        'auto' => '/auto.js',
     1433                        'bajo' => '/bajo.js',
     1434                        'dyno' => '/dyno.js',
     1435                    ),
     1436                ),
     1437            ),
     1438        );
     1439    }
     1440
     1441    /**
     1442     * Tests a higher fetchpriority on a dependent script module causes the fetchpriority of a dependency script module to be bumped.
     1443     *
     1444     * @ticket 61734
     1445     *
     1446     * @covers WP_Script_Modules::print_enqueued_script_modules
     1447     * @covers WP_Script_Modules::get_dependents
     1448     * @covers WP_Script_Modules::get_recursive_dependents
     1449     * @covers WP_Script_Modules::get_highest_fetchpriority
     1450     * @covers WP_Script_Modules::print_script_module_preloads
     1451     *
     1452     * @dataProvider data_provider_to_test_fetchpriority_bumping
     1453     */
     1454    public function test_fetchpriority_bumping( array $enqueues, array $expected ) {
     1455        $this->script_modules->register(
     1456            'dyno',
     1457            '/dyno.js',
     1458            array(),
     1459            null,
     1460            array( 'fetchpriority' => 'low' ) // This won't show up anywhere since it is a dynamic import dependency.
     1461        );
     1462
     1463        $this->script_modules->register(
     1464            'bajo',
     1465            '/bajo.js',
     1466            array(
     1467                array(
     1468                    'id'     => 'dyno',
     1469                    'import' => 'dynamic',
     1470                ),
     1471            ),
     1472            null,
     1473            array( 'fetchpriority' => 'low' )
     1474        );
     1475
     1476        $this->script_modules->register(
     1477            'auto',
     1478            '/auto.js',
     1479            array(
     1480                array(
     1481                    'id'     => 'bajo',
     1482                    'import' => 'static',
     1483                ),
     1484            ),
     1485            null,
     1486            array( 'fetchpriority' => 'auto' )
     1487        );
     1488        $this->script_modules->register(
     1489            'alto',
     1490            '/alto.js',
     1491            array( 'auto' ),
     1492            null,
     1493            array( 'fetchpriority' => 'high' )
     1494        );
     1495
     1496        foreach ( $enqueues as $enqueue ) {
     1497            $this->script_modules->enqueue( $enqueue );
     1498        }
     1499
     1500        $actual = array(
     1501            'preload_links' => $this->get_preloaded_script_modules(),
     1502            'script_tags'   => $this->get_enqueued_script_modules(),
     1503            'import_map'    => $this->get_import_map(),
     1504        );
     1505        $this->assertSame(
     1506            $expected,
     1507            $actual,
     1508            "Snapshot:\n" . var_export( $actual, true )
     1509        );
     1510    }
     1511
     1512    /**
     1513     * Tests bumping fetchpriority with complex dependency graph.
     1514     *
     1515     * @ticket 61734
     1516     * @link https://github.com/WordPress/wordpress-develop/pull/9770#issuecomment-3280065818
     1517     *
     1518     * @covers WP_Script_Modules::print_enqueued_script_modules
     1519     * @covers WP_Script_Modules::get_dependents
     1520     * @covers WP_Script_Modules::get_recursive_dependents
     1521     * @covers WP_Script_Modules::get_highest_fetchpriority
     1522     * @covers WP_Script_Modules::print_script_module_preloads
     1523     */
     1524    public function test_fetchpriority_bumping_a_to_z() {
     1525        wp_register_script_module( 'a', '/a.js', array( 'b' ), null, array( 'fetchpriority' => 'low' ) );
     1526        wp_register_script_module( 'b', '/b.js', array( 'c' ), null, array( 'fetchpriority' => 'auto' ) );
     1527        wp_register_script_module( 'c', '/c.js', array( 'd', 'e' ), null, array( 'fetchpriority' => 'auto' ) );
     1528        wp_register_script_module( 'd', '/d.js', array( 'z' ), null, array( 'fetchpriority' => 'high' ) );
     1529        wp_register_script_module( 'e', '/e.js', array(), null, array( 'fetchpriority' => 'auto' ) );
     1530
     1531        wp_register_script_module( 'x', '/x.js', array( 'd', 'y' ), null, array( 'fetchpriority' => 'high' ) );
     1532        wp_register_script_module( 'y', '/y.js', array( 'z' ), null, array( 'fetchpriority' => 'auto' ) );
     1533        wp_register_script_module( 'z', '/z.js', array(), null, array( 'fetchpriority' => 'auto' ) );
     1534
     1535        // The fetch priorities are derived from these enqueued dependents.
     1536        wp_enqueue_script_module( 'a' );
     1537        wp_enqueue_script_module( 'x' );
     1538
     1539        $actual   = get_echo( array( wp_script_modules(), 'print_script_module_preloads' ) );
     1540        $actual  .= get_echo( array( wp_script_modules(), 'print_enqueued_script_modules' ) );
     1541        $expected = '
     1542            <link rel="modulepreload" href="/b.js" id="b-js-modulepreload" fetchpriority="low">
     1543            <link rel="modulepreload" href="/c.js" id="c-js-modulepreload" fetchpriority="low">
     1544            <link rel="modulepreload" href="/d.js" id="d-js-modulepreload" fetchpriority="high">
     1545            <link rel="modulepreload" href="/e.js" id="e-js-modulepreload" fetchpriority="low">
     1546            <link rel="modulepreload" href="/z.js" id="z-js-modulepreload" fetchpriority="high">
     1547            <link rel="modulepreload" href="/y.js" id="y-js-modulepreload" fetchpriority="high">
     1548            <script type="module" src="/a.js" id="a-js-module" fetchpriority="low"></script>
     1549            <script type="module" src="/x.js" id="x-js-module" fetchpriority="high"></script>
     1550        ';
     1551        $this->assertEqualHTML( $expected, $actual, '<body>', "Snapshot:\n$actual" );
     1552    }
     1553
     1554    /**
     1555     * Tests bumping fetchpriority with complex dependency graph.
     1556     *
     1557     * @ticket 61734
     1558     * @link https://github.com/WordPress/wordpress-develop/pull/9770#issuecomment-3284266884
     1559     *
     1560     * @covers WP_Script_Modules::print_enqueued_script_modules
     1561     * @covers WP_Script_Modules::get_dependents
     1562     * @covers WP_Script_Modules::get_recursive_dependents
     1563     * @covers WP_Script_Modules::get_highest_fetchpriority
     1564     * @covers WP_Script_Modules::print_script_module_preloads
     1565     */
     1566    public function test_fetchpriority_propagation() {
     1567        // The high fetchpriority for this module will be disregarded because its enqueued dependent has a non-high priority.
     1568        wp_register_script_module( 'a', '/a.js', array( 'd', 'e' ), null, array( 'fetchpriority' => 'high' ) );
     1569        wp_register_script_module( 'b', '/b.js', array( 'e' ), null );
     1570        wp_register_script_module( 'c', '/c.js', array( 'e', 'f' ), null );
     1571        wp_register_script_module( 'd', '/d.js', array(), null );
     1572        // The low fetchpriority for this module will be disregarded because its enqueued dependent has a non-low priority.
     1573        wp_register_script_module( 'e', '/e.js', array(), null, array( 'fetchpriority' => 'low' ) );
     1574        wp_register_script_module( 'f', '/f.js', array(), null );
     1575
     1576        wp_register_script_module( 'x', '/x.js', array( 'a' ), null, array( 'fetchpriority' => 'low' ) );
     1577        wp_register_script_module( 'y', '/y.js', array( 'b' ), null, array( 'fetchpriority' => 'auto' ) );
     1578        wp_register_script_module( 'z', '/z.js', array( 'c' ), null, array( 'fetchpriority' => 'high' ) );
     1579
     1580        wp_enqueue_script_module( 'x' );
     1581        wp_enqueue_script_module( 'y' );
     1582        wp_enqueue_script_module( 'z' );
     1583
     1584        $actual   = get_echo( array( wp_script_modules(), 'print_script_module_preloads' ) );
     1585        $actual  .= get_echo( array( wp_script_modules(), 'print_enqueued_script_modules' ) );
     1586        $expected = '
     1587            <link rel="modulepreload" href="/a.js" id="a-js-modulepreload" fetchpriority="low" data-wp-fetchpriority="high">
     1588            <link rel="modulepreload" href="/d.js" id="d-js-modulepreload" fetchpriority="low">
     1589            <link rel="modulepreload" href="/e.js" id="e-js-modulepreload" fetchpriority="high" data-wp-fetchpriority="low">
     1590            <link rel="modulepreload" href="/b.js" id="b-js-modulepreload">
     1591            <link rel="modulepreload" href="/c.js" id="c-js-modulepreload" fetchpriority="high">
     1592            <link rel="modulepreload" href="/f.js" id="f-js-modulepreload" fetchpriority="high">
     1593            <script type="module" src="/x.js" id="x-js-module" fetchpriority="low"></script>
     1594            <script type="module" src="/y.js" id="y-js-module"></script>
     1595            <script type="module" src="/z.js" id="z-js-module" fetchpriority="high"></script>
     1596        ';
     1597        $this->assertEqualHTML( $expected, $actual, '<body>', "Snapshot:\n$actual" );
     1598    }
     1599
     1600    /**
     1601     * Tests that default script modules are printed as expected.
     1602     *
     1603     * @covers ::wp_default_script_modules
     1604     * @covers WP_Script_Modules::print_script_module_preloads
     1605     * @covers WP_Script_Modules::print_enqueued_script_modules
     1606     */
     1607    public function test_default_script_modules() {
     1608        wp_default_script_modules();
     1609        wp_enqueue_script_module( '@wordpress/a11y' );
     1610        wp_enqueue_script_module( '@wordpress/block-library/navigation/view' );
     1611
     1612        $actual  = get_echo( array( wp_script_modules(), 'print_script_module_preloads' ) );
     1613        $actual .= get_echo( array( wp_script_modules(), 'print_enqueued_script_modules' ) );
     1614
     1615        $actual = $this->normalize_markup_for_snapshot( $actual );
     1616
     1617        $expected = '
     1618            <link rel="modulepreload" href="/wp-includes/js/dist/script-modules/interactivity/debug.min.js" id="@wordpress/interactivity-js-modulepreload" fetchpriority="low">
     1619            <script type="module" src="/wp-includes/js/dist/script-modules/a11y/index.min.js" id="@wordpress/a11y-js-module" fetchpriority="low"></script>
     1620            <script type="module" src="/wp-includes/js/dist/script-modules/block-library/navigation/view.min.js" id="@wordpress/block-library/navigation/view-js-module" fetchpriority="low"></script>
     1621        ';
     1622        $this->assertEqualHTML( $expected, $actual, '<body>', "Snapshot:\n$actual" );
     1623    }
     1624
     1625    /**
     1626     * Tests that a dependent with high priority for default script modules with a low fetch priority are printed as expected.
     1627     *
     1628     * @covers ::wp_default_script_modules
     1629     * @covers WP_Script_Modules::print_script_module_preloads
     1630     * @covers WP_Script_Modules::print_enqueued_script_modules
     1631     */
     1632    public function test_dependent_of_default_script_modules() {
     1633        wp_default_script_modules();
     1634        wp_enqueue_script_module(
     1635            'super-important',
     1636            '/super-important-module.js',
     1637            array( '@wordpress/a11y', '@wordpress/block-library/navigation/view' ),
     1638            null,
     1639            array( 'fetchpriority' => 'high' )
     1640        );
     1641
     1642        $actual  = get_echo( array( wp_script_modules(), 'print_script_module_preloads' ) );
     1643        $actual .= get_echo( array( wp_script_modules(), 'print_enqueued_script_modules' ) );
     1644
     1645        $actual = $this->normalize_markup_for_snapshot( $actual );
     1646
     1647        $expected = '
     1648            <link rel="modulepreload" href="/wp-includes/js/dist/script-modules/a11y/index.min.js" id="@wordpress/a11y-js-modulepreload" fetchpriority="high" data-wp-fetchpriority="low">
     1649            <link rel="modulepreload" href="/wp-includes/js/dist/script-modules/block-library/navigation/view.min.js" id="@wordpress/block-library/navigation/view-js-modulepreload" fetchpriority="high" data-wp-fetchpriority="low">
     1650            <link rel="modulepreload" href="/wp-includes/js/dist/script-modules/interactivity/debug.min.js" id="@wordpress/interactivity-js-modulepreload" fetchpriority="high" data-wp-fetchpriority="low">
     1651            <script type="module" src="/super-important-module.js" id="super-important-js-module" fetchpriority="high"></script>
     1652        ';
     1653        $this->assertEqualHTML( $expected, $actual, '<body>', "Snapshot:\n$actual" );
     1654    }
     1655
     1656    /**
     1657     * Normalizes markup for snapshot.
     1658     *
     1659     * @param string $markup Markup.
     1660     * @return string Normalized markup.
     1661     */
     1662    private function normalize_markup_for_snapshot( string $markup ): string {
     1663        $processor = new WP_HTML_Tag_Processor( $markup );
     1664        $clean_url = static function ( string $url ): string {
     1665            $url = preg_replace( '#^https?://[^/]+#', '', $url );
     1666            return remove_query_arg( 'ver', $url );
     1667        };
     1668        while ( $processor->next_tag() ) {
     1669            if ( 'LINK' === $processor->get_tag() && is_string( $processor->get_attribute( 'href' ) ) ) {
     1670                $processor->set_attribute( 'href', $clean_url( $processor->get_attribute( 'href' ) ) );
     1671            } elseif ( 'SCRIPT' === $processor->get_tag() && is_string( $processor->get_attribute( 'src' ) ) ) {
     1672                $processor->set_attribute( 'src', $clean_url( $processor->get_attribute( 'src' ) ) );
     1673            }
     1674        }
     1675        return $processor->get_updated_html();
     1676    }
     1677
     1678    /**
    13471679     * Tests that directly manipulating the queue works as expected.
    13481680     *
Note: See TracChangeset for help on using the changeset viewer.