<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[59071] trunk: External Libraries: Test registered script versions match package.json.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/59071">59071</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/59071","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>peterwilsoncc</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2024-09-20 00:50:51 +0000 (Fri, 20 Sep 2024)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>External Libraries: Test registered script versions match package.json.
Expands tests to ensure the version number of packages updated via NPM matches the version number used for registering the script in the script loader.
This adds tests for (by their registered name in WordPress):
* backbone
* clipboard
* hoverIntent
* hoverintent-js
* imagesloaded
* jquery-color
* jquery-core
* jquery-form
* masonry
* react-jsx-runtime
* underscore
* wp-polyfill-dom-rect
* wp-polyfill-element-closest
* wp-polyfill-fetch
* wp-polyfill-formdata
* wp-polyfill-inert
* wp-polyfill-node-contains
* wp-polyfill-object-fit
* wp-polyfill-url
This expands on the earlier tests introduced for:
* lodash
* moment
* react
* react-dom
* regenerator-runtime
An additional test is added to ensure that the data provider for these tests is maintained as libraries are added via package.json.
`@wordpress/*` scripts are excluded from these tests as wp-scripts generates a version number automatically based on the file's contents.
Additionally, the version of element-closest listed in package.json is updated to use a fixed version rather than a range. This reflects the current practice of WordPress to define the specific version in core. For the avoidance of doubt, this does not affect the version shipped in WordPress.
Follow up to <a href="https://core.trac.wordpress.org/changeset/57185">[57185]</a>.
Props peterwilsoncc, jorbin.
Fixes <a href="https://core.trac.wordpress.org/ticket/61855">#61855</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkpackagelockjson">trunk/package-lock.json</a></li>
<li><a href="#trunkpackagejson">trunk/package.json</a></li>
<li><a href="#trunktestsphpunittestsdependenciesscriptsphp">trunk/tests/phpunit/tests/dependencies/scripts.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkpackagelockjson"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/package-lock.json</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/package-lock.json 2024-09-19 20:20:30 UTC (rev 59070)
+++ trunk/package-lock.json 2024-09-20 00:50:51 UTC (rev 59071)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -78,7 +78,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> "backbone": "1.6.0",
</span><span class="cx" style="display: block; padding: 0 10px"> "clipboard": "2.0.11",
</span><span class="cx" style="display: block; padding: 0 10px"> "core-js-url-browser": "3.6.4",
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- "element-closest": "^3.0.2",
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ "element-closest": "3.0.2",
</ins><span class="cx" style="display: block; padding: 0 10px"> "formdata-polyfill": "4.0.10",
</span><span class="cx" style="display: block; padding: 0 10px"> "hoverintent": "2.2.1",
</span><span class="cx" style="display: block; padding: 0 10px"> "imagesloaded": "5.0.0",
</span></span></pre></div>
<a id="trunkpackagejson"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/package.json</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/package.json 2024-09-19 20:20:30 UTC (rev 59070)
+++ trunk/package.json 2024-09-20 00:50:51 UTC (rev 59071)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -147,7 +147,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> "backbone": "1.6.0",
</span><span class="cx" style="display: block; padding: 0 10px"> "clipboard": "2.0.11",
</span><span class="cx" style="display: block; padding: 0 10px"> "core-js-url-browser": "3.6.4",
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- "element-closest": "^3.0.2",
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ "element-closest": "3.0.2",
</ins><span class="cx" style="display: block; padding: 0 10px"> "formdata-polyfill": "4.0.10",
</span><span class="cx" style="display: block; padding: 0 10px"> "hoverintent": "2.2.1",
</span><span class="cx" style="display: block; padding: 0 10px"> "imagesloaded": "5.0.0",
</span></span></pre></div>
<a id="trunktestsphpunittestsdependenciesscriptsphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/phpunit/tests/dependencies/scripts.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/phpunit/tests/dependencies/scripts.php 2024-09-19 20:20:30 UTC (rev 59070)
+++ trunk/tests/phpunit/tests/dependencies/scripts.php 2024-09-20 00:50:51 UTC (rev 59071)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3386,32 +3386,123 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Tests default scripts are registered with the correct versions.
+ *
+ * Ensures that vendor scripts registered in wp_default_scripts() and
+ * wp_default_packages_vendor() are registered with the correct version
+ * number from package.json.
+ *
+ * @ticket 61855
</ins><span class="cx" style="display: block; padding: 0 10px"> * @ticket 60048
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @covers ::wp_default_scripts
</ins><span class="cx" style="display: block; padding: 0 10px"> * @covers ::wp_default_packages_vendor
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * @dataProvider data_wp_default_packages_vendor
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @dataProvider data_vendor_script_versions_registered_manually
+ *
+ * @param string $script Script name as defined in package.json.
+ * @param string $handle Optional. Handle to check for. Defaults to the script name.
</ins><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- public function test_wp_default_packages_vendor( $script ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ public function test_vendor_script_versions_registered_manually( $script, $handle = null ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> global $wp_scripts;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ wp_default_packages_vendor( $wp_scripts );
+ wp_default_scripts( $wp_scripts );
+
</ins><span class="cx" style="display: block; padding: 0 10px"> $package_json = $this->_scripts_from_package_json();
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( ! $handle ) {
+ $handle = $script;
+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- wp_default_packages_vendor( $wp_scripts );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $script_query = $wp_scripts->query( $handle, 'registered' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $this->assertSame( $package_json[ $script ], $wp_scripts->query( $script, 'registered' )->ver );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $this->assertNotFalse( $script_query, "The script '{$handle}' should be registered." );
+ $this->assertArrayHasKey( $script, $package_json, "The dependency '{$script}' should be included in package.json." );
+ $this->assertSame( $package_json[ $script ], $wp_scripts->query( $handle, 'registered' )->ver, "The script '{$handle}' should be registered with version {$package_json[ $script ]}." );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- public function data_wp_default_packages_vendor() {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * Data provider for test_vendor_script_versions_registered_manually.
+ *
+ * @return array[]
+ */
+ public function data_vendor_script_versions_registered_manually() {
</ins><span class="cx" style="display: block; padding: 0 10px"> return array(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- array( 'script' => 'lodash' ),
- array( 'script' => 'moment' ),
- array( 'script' => 'react' ),
- array( 'script' => 'react-dom' ),
- array( 'script' => 'regenerator-runtime' ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'backbone' => array( 'backbone' ),
+ 'clipboard' => array( 'clipboard' ),
+ 'core-js-url-browser' => array( 'core-js-url-browser', 'wp-polyfill-url' ),
+ 'element-closest' => array( 'element-closest', 'wp-polyfill-element-closest' ),
+ 'formdata-polyfill' => array( 'formdata-polyfill', 'wp-polyfill-formdata' ),
+ 'imagesloaded' => array( 'imagesloaded' ),
+ 'jquery-color' => array( 'jquery-color' ),
+ 'jquery-core' => array( 'jquery', 'jquery-core' ),
+ 'jquery-form' => array( 'jquery-form' ),
+ 'jquery-hoverintent' => array( 'jquery-hoverintent', 'hoverIntent' ),
+ 'lodash' => array( 'lodash' ),
+ 'masonry' => array( 'masonry-layout', 'masonry' ),
+ 'moment' => array( 'moment' ),
+ 'objectFitPolyfill' => array( 'objectFitPolyfill', 'wp-polyfill-object-fit' ),
+ 'polyfill-library (dom rect)' => array( 'polyfill-library', 'wp-polyfill-dom-rect' ),
+ 'polyfill-library (node contains)' => array( 'polyfill-library', 'wp-polyfill-node-contains' ),
+ 'react (jsx-runtime)' => array( 'react', 'react-jsx-runtime' ),
+ 'react (React)' => array( 'react' ),
+ 'react-dom' => array( 'react-dom' ),
+ 'regenerator-runtime' => array( 'regenerator-runtime' ),
+ 'underscore' => array( 'underscore' ),
+ 'vanilla-js-hoverintent' => array( 'hoverintent', 'hoverintent-js' ),
+ 'whatwg-fetch' => array( 'whatwg-fetch', 'wp-polyfill-fetch' ),
+ 'wicg-inert' => array( 'wicg-inert', 'wp-polyfill-inert' ),
</ins><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Ensures that all the scripts in the package.json are included in the data provider.
+ *
+ * This is a test the tests to ensure the data provider includes all the scripts in package.json.
+ *
+ * @ticket 61855
+ */
+ public function test_vendor_script_data_provider_includes_all_packages() {
+ $package_json_dependencies = array_keys( $this->_scripts_from_package_json() );
+ $data_provider_dependencies = $this->data_vendor_script_versions_registered_manually();
+
+ /*
+ * Exclude `@wordpress/*` packages from the packages in package.json.
+ *
+ * The version numbers for these packages is generated by the build
+ * process based on a hash of the file contents.
+ */
+ $package_json_dependencies = array_filter(
+ $package_json_dependencies,
+ static function ( $dependency ) {
+ return 0 !== strpos( $dependency, '@wordpress/' );
+ }
+ );
+
+ // Get the script names from the data provider.
+ $data_provider_dependencies = array_map(
+ static function ( $dependency ) {
+ return $dependency[0];
+ },
+ $data_provider_dependencies
+ );
+
+ // Exclude packages that are not registered in WordPress.
+ $exclude = array( 'react-is', 'json2php' );
+ $package_json_dependencies = array_diff( $package_json_dependencies, $exclude );
+
+ /*
+ * Ensure the arrays are unique.
+ *
+ * This is for the react package as it is included in the data provider
+ * as both `react` and `react-jsx-runtime`.
+ */
+ $package_json_dependencies = array_unique( $package_json_dependencies );
+ $data_provider_dependencies = array_unique( $data_provider_dependencies );
+
+ $this->assertSameSets( $package_json_dependencies, $data_provider_dependencies );
+ }
+
+ /**
</ins><span class="cx" style="display: block; padding: 0 10px"> * Helper to return dependencies from package.json.
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> private function _scripts_from_package_json() {
</span></span></pre>
</div>
</div>
</body>
</html>