Backfill remote asset listing when needed (#1531)

## Motivation for the change, related issues

In order to reintroduce the request routing improvements in #1490, we
need to be sure that existing browser storage can backfill the
wordpress-remote-asset-paths file when needed. That is the purpose of
this PR.

## Implementation details

During boot, we check whether the
`/wordpress/wordpress-remote-asset-paths` exists. If it does not exist,
we check a static file path that should be common across WP versions,
`wp-admin/css/common.css`. If the common static file also does not
exist, we guess we are dealing with a minified WP build cached in
browser storage without a remote asset listing file, and we download it
based on detected WordPress version (as long as the detected version is
a supported WP version).

## Testing Instructions (or ideally a Blueprint)

So far, I have tested this manually with steps like the following:
1. Install the Chrome extension [OPFS
Explorer](https://chromewebstore.google.com/detail/opfs-explorer/acndjpgkpaclldomagafnognkcgjignd?hl=en)
2. Switch Playground to browser storage and note the current WP release
_X_ in the query string
3. Open dev tools
4. Use OPFS explorer to confirm
`/wordpress/wordpress-remote-asset-paths` exists and then delete the
file
5. Switch to the dev tools Network tab
6. Reload the page
7. Filter the requests and confirm there was a request for the current
WP release _X_ like `/wp-<X>/wordpress-remote-asset-paths`
8. Clear the Network request log
9. Use OPFS explorer to confirm
`/wordpress/wordpress-remote-asset-paths` exists again. Then delete the
file.
10. Manually adjust the query string to point to request a different WP
release.
11. Reload the page
12. Return to the dev tools Network tab, filter the requests, and
confirm there was a request for the current WP release _X_ like
`/wp-<X>/wordpress-remote-asset-paths`. Regardless of the WP version in
the query string, we should continue requesting the paths listing for
version _X_ because that is what is in browser storage.
13. Review the console log and confirm there is a warning like "Loaded
WordPress version (X) differs from requested version (Y)" and confirm
that _Y_ matches the version requested via the query string.
14. Use OPFS explorer to confirm
`/wordpress/wordpress-remote-asset-paths` exists again.

packages/playground/remote/src/lib/worker-thread.ts

@@ -1,6 +1,7 @@
 import { SyncProgressCallback, exposeAPI } from '@php-wasm/web';
 import { EmscriptenDownloadMonitor } from '@php-wasm/progress';
 import { setURLScope } from '@php-wasm/scopes';
+import { joinPaths } from '@php-wasm/util';
 import { wordPressSiteUrl } from './config';
 import {
  getWordPressModuleDetails,
@@ -38,8 +39,8 @@ import { PHPWorker } from '@php-wasm/universal';
 import {
  bootWordPress,
  getLoadedWordPressVersion,
- isSupportedWordPressVersion,
 } from '@wp-playground/wordpress';
+import { wpVersionToStaticAssetsDirectory } from '@wp-playground/wordpress-builds';
 import { logger } from '@php-wasm/logger';
 
 const scope = Math.random().toFixed(16);
@@ -133,11 +134,9 @@ export class PlaygroundWorkerEndpoint extends PHPWorker {
  return {
  majorVersion:
  this.loadedWordPressVersion || this.requestedWordPressVersion,
- staticAssetsDirectory:
- this.loadedWordPressVersion &&
- isSupportedWordPressVersion(this.loadedWordPressVersion)
- ? `wp-${this.loadedWordPressVersion}`
- : undefined,
+ staticAssetsDirectory: this.loadedWordPressVersion
+ ? wpVersionToStaticAssetsDirectory(this.loadedWordPressVersion)
+ : undefined,
  };
  }
 
@@ -275,6 +274,33 @@ try {
  );
  }
 
+ const wpStaticAssetsDir = wpVersionToStaticAssetsDirectory(
+ apiEndpoint.loadedWordPressVersion
+ );
+ const remoteAssetListPath = joinPaths(
+ requestHandler.documentRoot,
+ 'wordpress-remote-asset-paths'
+ );
+ if (
+ wpStaticAssetsDir !== undefined &&
+ !primaryPhp.fileExists(remoteAssetListPath)
+ ) {
+ // The loaded WP release has a remote static assets dir
+ // but no remote asset listing, so we need to backfill the listing.
+ const listUrl = new URL(
+ joinPaths(wpStaticAssetsDir, 'wordpress-remote-asset-paths'),
+ wordPressSiteUrl
+ );
+ try {
+ const remoteAssetPaths = await fetch(listUrl).then((res) =>
+ res.text()
+ );
+ primaryPhp.writeFile(remoteAssetListPath, remoteAssetPaths);
+ } catch (e) {
+ logger.warn(`Failed to fetch remote asset paths from ${listUrl}`);
+ }
+ }
+
  setApiReady();
 } catch (e) {
  setAPIError(e as Error);

packages/playground/wordpress-builds/src/index.ts

@@ -10,3 +10,11 @@ export const SupportedWordPressVersionsList = Object.keys(
 ) as any as string[];
 export const LatestSupportedWordPressVersion =
  SupportedWordPressVersionsList.filter((v) => v.match(/^\d/))[0] as string;
+
+export function wpVersionToStaticAssetsDirectory(
+ wpVersion: string
+): string | undefined {
+ return wpVersion in SupportedWordPressVersions
+ ? `wp-${wpVersion}`
+ : undefined;
+}