Merge branch 'trunk' of https://github.com/WordPress/performance into update/od-detect-loader

Author: westonruter

.github/workflows/php-test-plugins.yml

@@ -47,6 +47,8 @@ jobs:
             wp: '6.6'
           - php: '8.3'
             wp: 'trunk'
+          - php: '8.4'
+            wp: 'trunk'
           - php: '8.2'
             phpunit: '9.6'
             wp: 'latest'

.wp-env.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "https://schemas.wp.org/trunk/wp-env.json",
   "core": null,
   "plugins": [
     "./plugins/optimization-detective",

README.md

@@ -14,13 +14,14 @@ The feature plugins which are currently featured by this plugin are:
 Plugin                          | Slug                      | Experimental | Links
 --------------------------------|---------------------------|--------------|-------------
 [Embed Optimizer][5]            | `embed-optimizer`         | No           | [Source][13], [Issues][21], [PRs][29]
+[Enhanced Responsive Images][6] | `auto-sizes`              | No           | [Source][14], [Issues][22], [PRs][30]
 [Image Placeholders][1]         | `dominant-color-images`   | No           | [Source][9],  [Issues][17], [PRs][25]
 [Image Prioritizer][7]          | `image-prioritizer`       | No           | [Source][15], [Issues][23], [PRs][31]
 [Modern Image Formats][2]       | `webp-uploads`            | No           | [Source][10], [Issues][18], [PRs][26]
 [Optimization Detective][33]    | `optimization-detective`  | No           | [Source][34], [Issues][35], [PRs][36]
 [Performant Translations][3]    | `performant-translations` | No           | [Source][11], [Issues][19], [PRs][27]
 [Speculative Loading][4]        | `speculation-rules`       | No           | [Source][12], [Issues][20], [PRs][28]
-[Enhanced Responsive Images][6] | `auto-sizes`              | Yes          | [Source][14], [Issues][22], [PRs][30]
+[View Transitions][37]          | `view-transitions`        | Yes          | [Source][38], [Issues][39], [PRs][40]
 [Web Worker Offloading][8]      | `web-worker-offloading`   | Yes          | [Source][16], [Issues][24], [PRs][32]
 
 [1]: https://wordpress.org/plugins/dominant-color-images/
@@ -32,6 +33,7 @@ Plugin                          | Slug                      | Experimental | Lin
 [7]: https://wordpress.org/plugins/image-prioritizer/
 [8]: https://wordpress.org/plugins/web-worker-offloading/
 [33]: https://wordpress.org/plugins/optimization-detective/
+[37]: https://wordpress.org/plugins/view-transitions/
 
 [9]: https://github.com/WordPress/performance/tree/trunk/plugins/dominant-color-images
 [10]: https://github.com/WordPress/performance/tree/trunk/plugins/webp-uploads
@@ -42,6 +44,7 @@ Plugin                          | Slug                      | Experimental | Lin
 [15]: https://github.com/WordPress/performance/tree/trunk/plugins/image-prioritizer
 [16]: https://github.com/WordPress/performance/tree/trunk/plugins/web-worker-offloading
 [34]: https://github.com/WordPress/performance/tree/trunk/plugins/optimization-detective
+[38]: https://github.com/WordPress/performance/tree/trunk/plugins/view-transitions
 
 [17]: https://github.com/WordPress/performance/issues?q=is%3Aopen+label%3A%22%5BPlugin%5D+Image+Placeholders%22
 [18]: https://github.com/WordPress/performance/issues?q=is%3Aopen+label%3A%22%5BPlugin%5D+Modern+Image+Formats%22
@@ -52,6 +55,7 @@ Plugin                          | Slug                      | Experimental | Lin
 [23]: https://github.com/WordPress/performance/issues?q=is%3Aopen+label%3A%22%5BPlugin%5D+Image+Prioritizer%22
 [24]: https://github.com/WordPress/performance/issues?q=is%3Aopen%20label%3A%22%5BPlugin%5D%20Web%20Worker%20Offloading%22
 [35]: https://github.com/WordPress/performance/issues?q=is%3Aopen%20label%3A%22%5BPlugin%5D%20Optimization%20Detective%22
+[39]: https://github.com/WordPress/performance/issues?q=is%3Aopen%20label%3A%22%5BPlugin%5D%20View%20Transitions%22
 
 [25]: https://github.com/WordPress/performance/pulls?q=is%3Apr+is%3Aopen+label%3A%22%5BPlugin%5D+Image+Placeholders%22
 [26]: https://github.com/WordPress/performance/pulls?q=is%3Apr+is%3Aopen+label%3A%22%5BPlugin%5D+Modern+Image+Formats%22
@@ -62,5 +66,6 @@ Plugin                          | Slug                      | Experimental | Lin
 [31]: https://github.com/WordPress/performance/pulls?q=is%3Apr+is%3Aopen+label%3A%22%5BPlugin%5D+Image+Prioritizer%22
 [32]: https://github.com/WordPress/performance/pulls?q=is%3Apr+is%3Aopen+label%3A%22%5BPlugin%5D+Web%20Worker%20Offloading%22
 [36]: https://github.com/WordPress/performance/pulls?q=is%3Apr+is%3Aopen+label%3A%22%5BPlugin%5D+Optimization%20Detective%22
+[40]: https://github.com/WordPress/performance/pulls?q=is%3Apr+is%3Aopen+label%3A%22%5BPlugin%5D+View%20Transitions%22
 
 Note that the plugin names sometimes diverge from the plugin slugs due to scope changes. For example, a plugin's purpose may change as some of its features are merged into WordPress core.

bin/plugin/commands/changelog.js

@@ -23,8 +23,8 @@ const PRIMARY_TYPE_LABELS = {
 const PRIMARY_TYPE_ORDER = Object.values( PRIMARY_TYPE_LABELS );
 const SKIP_CHANGELOG_LABEL = 'skip changelog';
 
-/** @typedef {import('@octokit/rest')} GitHub */
-/** @typedef {import('@octokit/rest').IssuesListForRepoResponseItem} IssuesListForRepoResponseItem */
+/** @typedef {import('@octokit/rest').Octokit} GitHub */
+/** @typedef {import('@octokit/rest').RestEndpointMethodTypes['issues']['listForRepo']['response']['data'][0]} IssuesListForRepoResponseItem */
 
 /**
  * @typedef WPChangelogCommandOptions
@@ -115,7 +115,7 @@ async function fetchAllPullRequests( octokit, settings ) {
  */
 function getIssueType( issue ) {
 	const typeLabels = issue.labels
-		.map( ( { name } ) => name )
+		.map( ( label ) => ( typeof label === 'string' ? label : label.name ) )
 		.filter( ( label ) => label.startsWith( TYPE_PREFIX ) );
 
 	if ( ! typeLabels.length ) {
@@ -141,7 +141,10 @@ function formatChangelog( milestone, pullRequests ) {
 	let changelog = '';
 
 	// Group PRs by type.
-	const typeGroups = groupBy( pullRequests, getIssueType );
+	const typeGroups =
+		/** @type {Object<string, IssuesListForRepoResponseItem[]>} */ (
+			groupBy( pullRequests, getIssueType )
+		);
 	if ( typeGroups[ MISSING_TYPE ] ) {
 		const prURLs = typeGroups[ MISSING_TYPE ].map(
 			( { html_url } ) => html_url // eslint-disable-line camelcase
@@ -161,7 +164,7 @@ function formatChangelog( milestone, pullRequests ) {
 			return aIndex - bIndex;
 		}
 		if ( aIndex === -1 && bIndex === -1 ) {
-			return a - b;
+			return a.localeCompare( b );
 		}
 		return aIndex > -1 ? -1 : 1;
 	} );
@@ -219,9 +222,11 @@ async function getChangelog( settings ) {
 
 	const nonSkippedPullRequests = pullRequests.filter(
 		( pullRequest ) =>
-			! pullRequest.labels.find(
-				( { name } ) => name === SKIP_CHANGELOG_LABEL
-			)
+			! pullRequest.labels
+				.map( ( label ) =>
+					typeof label === 'string' ? label : label.name
+				)
+				.find( ( name ) => name === SKIP_CHANGELOG_LABEL )
 	);
 	if ( ! nonSkippedPullRequests.length ) {
 		throw new Error(

bin/plugin/config.js

@@ -11,7 +11,6 @@
 const config = {
 	githubRepositoryOwner: 'WordPress',
 	githubRepositoryName: 'performance',
-	textDomain: 'performance-lab',
 };
 
 module.exports = config;

bin/plugin/lib/logger.js

@@ -6,9 +6,8 @@ const { styleText } = require( 'node:util' );
 /**
  * Create a function that applies a style to text using `node:util.styleText`.
  *
- * @param {string} style Style to apply to the text
- *
- * @return {Function} Function that applies the style to the text
+ * @param {Parameters<typeof import('node:util').styleText>[0]} style - Style to apply to the text.
+ * @return {function(string):string} Function that applies the style to the text.
  */
 const createStyledText = ( style ) => ( text ) => styleText( style, text );
 

bin/plugin/lib/milestone.js

@@ -1,6 +1,6 @@
-/** @typedef {import('@octokit/rest')} GitHub */
-/** @typedef {import('@octokit/rest').IssuesListForRepoResponseItem} IssuesListForRepoResponseItem */
-/** @typedef {import('@octokit/rest').IssuesListMilestonesForRepoResponseItem} OktokitIssuesListMilestonesForRepoResponseItem */
+/** @typedef {import('@octokit/rest').Octokit} GitHub */
+/** @typedef {import('@octokit/rest').RestEndpointMethodTypes['issues']['listForRepo']['response']} IssuesListForRepoResponseItem */
+/** @typedef {import('@octokit/rest').RestEndpointMethodTypes['issues']['listMilestones']['response']} IssuesListMilestonesForRepoResponseItem */
 
 /**
  * @typedef {"open"|"closed"|"all"} IssueState
@@ -14,7 +14,7 @@
  * @param {string} repo    Repository name.
  * @param {string} title   Milestone title.
  *
- * @return {Promise<OktokitIssuesListMilestonesForRepoResponseItem|void>} Promise resolving to milestone, if exists.
+ * @return {Promise<import('@octokit/rest').RestEndpointMethodTypes['issues']['listMilestones']['response']['data'][0]|void>} Promise resolving to milestone, if exists.
  */
 async function getMilestoneByTitle( octokit, owner, repo, title ) {
 	const options = octokit.issues.listMilestones.endpoint.merge( {
@@ -23,9 +23,6 @@ async function getMilestoneByTitle( octokit, owner, repo, title ) {
 		state: 'all',
 	} );
 
-	/**
-	 * @type {AsyncIterableIterator<import('@octokit/rest').Response<import('@octokit/rest').IssuesListMilestonesForRepoResponse>>}
-	 */
 	const responses = octokit.paginate.iterator( options );
 
 	for await ( const response of responses ) {
@@ -48,9 +45,7 @@ async function getMilestoneByTitle( octokit, owner, repo, title ) {
  * @param {IssueState} [state]       Optional issue state.
  * @param {string}     [closedSince] Optional timestamp.
  *
- * @return {Promise<IssuesListForRepoResponseItem[]>} Promise resolving to pull
- *                                                    requests for the given
- *                                                    milestone.
+ * @return {Promise<import('@octokit/rest').RestEndpointMethodTypes['issues']['listForRepo']['response']['data']>} Promise resolving to pull requests for the given milestone.
  */
 async function getIssuesByMilestone(
 	octokit,
@@ -70,14 +65,8 @@ async function getIssuesByMilestone(
 		} ),
 	} );
 
-	/**
-	 * @type {AsyncIterableIterator<import('@octokit/rest').Response<import('@octokit/rest').IssuesListForRepoResponse>>}
-	 */
 	const responses = octokit.paginate.iterator( options );
 
-	/**
-	 * @type {import('@octokit/rest').IssuesListForRepoResponse}
-	 */
 	const pulls = [];
 
 	for await ( const response of responses ) {
@@ -91,15 +80,7 @@ async function getIssuesByMilestone(
 		return pulls.filter(
 			( pull ) =>
 				pull.closed_at &&
-				closedSinceTimestamp <
-					new Date(
-						// The ugly `as unknown as string` cast is required because of
-						// https://github.com/octokit/plugin-rest-endpoint-methods.js/issues/64
-						// Fixed in Octokit v18.1.1, see https://github.com/WordPress/gutenberg/pull/29043
-						/** @type {string} */ (
-							/** @type {unknown} */ ( pull.closed_at )
-						)
-					)
+				closedSinceTimestamp < new Date( pull.closed_at )
 		);
 	}
 

bin/test-php-watch.sh

@@ -1,13 +1,29 @@
 #!/bin/bash
-if ! which inotifywait >/dev/null 2>&1; then
-  echo "Error: the inotifywait command is not available. Make sure you have inotify-tools installed."
-  exit 1
+
+# Check for the fswatch command
+if ! command -v fswatch >/dev/null 2>&1; then
+	echo "Error: The fswatch command is not available."
+	echo "On macOS, you can install it with Homebrew: brew install fswatch"
+	exit 1
 fi
 
+cd "$(git rev-parse --show-toplevel)"
+
 while true; do
 	echo "Waiting for a change in the plugins directory..."
-	output=$(inotifywait -e modify,create,delete -r ./plugins  --include '.*(\.php$|/tests/.*)' 2> /dev/null)
-	plugin_slug=$(echo "$output" | awk -F/ '{print $3}')
+
+	file=$(fswatch -1 -r \
+		--event Created \
+		--event Updated \
+		--event Removed \
+		--include '\.php$' \
+		--include '/tests/' \
+		./plugins 2>/dev/null | head -n 1)
+
+	# Make the file path relative.
+	file="${file#"$PWD/"}"
+
+	plugin_slug=$(echo "$file" | awk -F/ '{print $2}')
 	sleep 1 # Give the user a chance to copy text from terminal before IDE auto-saves.
 	clear
 	echo "Running phpunit tests for $(tput bold)$plugin_slug$(tput sgr0):"

composer.json

@@ -20,6 +20,23 @@
     "ext-gd": "Required to use Modern Image Format's Dominant_Color_Image_Editor_GD class",
     "ext-zlib": "Required for compression of URL Metric data submitted to the REST API for storage in Optimization Detective"
   },
+  "repositories":[
+    {
+      "type":"composer",
+      "url":"https://wpackagist.org",
+      "only": [
+        "wpackagist-plugin/*",
+        "wpackagist-theme/*"
+      ]
+    }
+  ],
+  "extra": {
+    "installer-paths": {
+      "vendor/{$vendor}/{$name}/": [
+        "wpackagist-plugin/plugin-check"
+      ]
+    }
+  },
   "require-dev": {
     "phpcompatibility/php-compatibility": "^9.3",
     "phpstan/extension-installer": "^1.3",
@@ -33,12 +50,14 @@
     "wp-phpunit/wp-phpunit": "^6.5",
     "yoast/phpunit-polyfills": "^4.0",
     "phpstan/php-8-stubs": "^0.4.0",
-    "phpstan/phpstan-strict-rules": "^1.6"
+    "phpstan/phpstan-strict-rules": "^1.6",
+    "wpackagist-plugin/plugin-check": "^1.6"
   },
   "config": {
     "allow-plugins": {
       "dealerdirect/phpcodesniffer-composer-installer": true,
-      "phpstan/extension-installer": true
+      "phpstan/extension-installer": true,
+      "composer/installers": true
     },
     "platform": {
       "php": "7.2"