[Website] Report Blueprint v2 progress (#2674)

## Motivation for the change, related issues Captures the Blueprint v2 execution progress events and communicates the progress to the user. There is a few follow-up items in the code that I'm not addressing in this PR – they are related to Blueprints v2-specific code on playground.wordpress.net so it's fine if they're imperfect. Supersedes #2663 A part of #2586

Author: adamziel

packages/playground/client/src/blueprints-v2-handler.ts

@@ -18,7 +18,8 @@ export class BlueprintsV2Handler {
 sapiName,
 scope,
 } = this.options;
-const downloadProgress = progressTracker!.stage();
+const downloadProgress = progressTracker!.stage(0.25);
+const executionProgress = progressTracker!.stage(0.75);
 
 // Connect the Comlink API client to the remote worker,
 // boot the playground, and run the blueprint steps.
@@ -31,6 +32,56 @@ export class BlueprintsV2Handler {
 
 // Connect the Comlink API client to the remote worker download monitor
 await playground.onDownloadProgress(downloadProgress.loadingListener);
+await playground.addEventListener(
+'blueprint.message',
+({ message }: any) => {
+switch (message.type) {
+case 'blueprint.target_resolved': {
+// @TODO: Evaluate consistenty with the CLI worker
+// if (!this.blueprintTargetResolved) {
+//	this.blueprintTargetResolved = true;
+//	for (const php of this
+//	.phpInstancesThatNeedMountsAfterTargetResolved) {
+//	// console.log('mounting resources for php', php);
+//	this.phpInstancesThatNeedMountsAfterTargetResolved.delete(
+//	php
+//	);
+//	await mountResources(php, args.mount || []);
+//	}
+// }
+break;
+}
+case 'blueprint.progress': {
+executionProgress.set(message.progress);
+executionProgress.setCaption(message.caption);
+break;
+}
+case 'blueprint.error': {
+// @TODO: Error reporting.
+const red = '\x1b[31m';
+const bold = '\x1b[1m';
+const reset = '\x1b[0m';
+if (message.details) {
+logger.error(
+`${red}${bold}Fatal error:${reset} Uncaught ${message.details.exception}: ${message.details.message}\n` +
+` at ${message.details.file}:${message.details.line}\n` +
+(message.details.trace
+? message.details.trace + '\n'
+: '')
+);
+} else {
+logger.error(
+`${red}${bold}Error:${reset} ${message.message}\n`
+);
+}
+
+// TODO: Should we report the error like that?
+throw new Error(message.message);
+break;
+}
+}
+}
+);
 
 await playground.boot({
 mounts,
@@ -48,12 +99,16 @@ export class BlueprintsV2Handler {
 collectPhpLogs(logger, playground);
 onClientConnected?.(playground);
 
+// @TODO: Get the landing page from the Blueprint.
+playground.goTo('/');
+
 /**
  * Pre-fetch WordPress update checks to speed up the initial wp-admin load.
  *
  * @see https://github.com/WordPress/wordpress-playground/pull/2295
  */
-// @TODO
+// @TODO get the enabled features somehow – probably using the same
+// resolveRuntimeConfiguration() logic as the redux site-slice.ts
 // if (compiled.features.networking) {
 //	await playground.prefetchUpdateChecks();
 // }

packages/playground/remote/src/lib/playground-worker-endpoint-blueprints-v2.ts

@@ -59,9 +59,10 @@ class PlaygroundWorkerEndpointV2 extends PlaygroundWorkerEndpoint {
 cliArgs: ['--site-url=' + siteUrl],
 blueprint: blueprint as BlueprintV2Declaration,
 onMessage: async (message: any) => {
-for (const listener of this.blueprintMessageListeners) {
-await listener(message);
-}
+this.dispatchEvent({
+type: 'blueprint.message',
+message,
+});
 },
 });
 await streamed.finished;