Website query API: Continue plugin installs on error

packages/playground/blueprints/src/index.ts

@@ -7,6 +7,8 @@ export type {
 	CompiledBlueprint,
 	CompileBlueprintOptions,
 	OnStepCompleted,
+	OnStepsCompleted,
+	OnStepProgress,
 } from './lib/compile';
 export type {
 	CachedResource,

packages/playground/blueprints/src/lib/compile.ts

@@ -48,17 +48,35 @@ export interface CompiledBlueprint {
 	run: (playground: UniversalPHP) => Promise<void>;
 }
 
+export type OnStepProgress = (
+	promise: Promise<void>,
+	step: StepDefinition
+) => void;
 export type OnStepCompleted = (output: any, step: StepDefinition) => any;
+export type OnStepsCompleted = (
+	completedStatus: Map<StepDefinition, boolean>
+) => void;
 
 export interface CompileBlueprintOptions {
 	/** Optional progress tracker to monitor progress */
 	progress?: ProgressTracker;
 	/** Optional semaphore to control access to a shared resource */
 	semaphore?: Semaphore;
 	/** Optional callback with step output */
+	onStepProgress?: OnStepProgress;
 	onStepCompleted?: OnStepCompleted;
+	onStepsCompleted?: OnStepsCompleted;
 }
 
+/**
+ * Convert a Promise into a boolean indicating if it resolved or rejeted.
+ */
+const didResolve = <P extends Promise<any>>(promise: P): Promise<boolean> =>
+	promise.then(
+		() => true,
+		() => false
+	);
+
 /**
  * Compiles Blueprint into a form that can be executed.
  *
@@ -73,6 +91,8 @@ export function compileBlueprint(
 		progress = new ProgressTracker(),
 		semaphore = new Semaphore({ concurrency: 3 }),
 		onStepCompleted = () => {},
+		onStepProgress = () => {},
+		onStepsCompleted,
 	}: CompileBlueprintOptions = {}
 ): CompiledBlueprint {
 	blueprint = {
@@ -171,33 +191,81 @@ export function compileBlueprint(
 			networking: blueprint.features?.networking ?? false,
 		},
 		run: async (playground: UniversalPHP) => {
+			const progressStatus = new Map<StepDefinition, Promise<void>>();
+			const progressPromises = new Map<
+				StepDefinition,
+				{
+					resolve: (result: any) => void;
+					reject: (error: any) => void;
+				}
+			>();
+			for (const { step } of compiled) {
+				const promise = new Promise<void>((resolve, reject) => {
+					progressPromises.set(step, { resolve, reject });
+				});
+				progressStatus.set(step, promise);
+				onStepProgress(promise, step);
+			}
+
 			try {
 				// Start resolving resources early
-				for (const { resources } of compiled) {
+				for (const { resources, step } of compiled) {
+					const stepPromise = progressPromises.get(step);
 					for (const resource of resources) {
 						resource.setPlayground(playground);
 						if (resource.isAsync) {
-							resource.resolve();
+							resource.resolve().catch(function (error) {
+								stepPromise?.reject(error);
+							});
 						}
 					}
 				}
 
+				/**
+				 * When a compiled step's `run` method is called, it
+				 * uses `resolveArguments` to await dependent resources.
+				 */
 				for (const { run, step } of compiled) {
-					const result = await run(playground);
-					onStepCompleted(result, step);
+					const stepPromise = progressPromises.get(step);
+					try {
+						const result = await run(playground);
+						stepPromise?.resolve(result);
+						onStepCompleted(result, step);
+					} catch (error) {
+						stepPromise?.reject(error);
+					}
 				}
 			} finally {
-				try {
-					await (playground as any).goTo(
-						blueprint.landingPage || '/'
+				const completedStatus = new Map();
+				for (const { step } of compiled) {
+					completedStatus.set(
+						step,
+						await didResolve(
+							progressStatus.get(step) as Promise<any>
+						)
 					);
-				} catch (e) {
-					/*
-					 * NodePHP exposes no goTo method.
-					 * We can't use `goto` in playground here,
-					 * because it may be a Comlink proxy object
-					 * with no such method.
-					 */
+				}
+
+				// Either someone made a choice to boot or all steps succeeded.
+				const shouldBoot = onStepsCompleted
+					? await onStepsCompleted(completedStatus)
+					: await didResolve(
+							Promise.all([...progressStatus.values()])
+					  );
+
+				if (shouldBoot) {
+					try {
+						await (playground as any)?.goTo(
+							blueprint.landingPage || '/'
+						);
+					} catch (e) {
+						/*
+						 * NodePHP exposes no goTo method.
+						 * We can't use `goto` in playground here,
+						 * because it may be a Comlink proxy object
+						 * with no such method.
+						 */
+					}
 				}
 				progress.finish();
 			}

packages/playground/client/src/index.ts

@@ -34,6 +34,8 @@ import {
 	Blueprint,
 	compileBlueprint,
 	OnStepCompleted,
+	OnStepsCompleted,
+	OnStepProgress,
 	runBlueprintSteps,
 } from '@wp-playground/blueprints';
 import { consumeAPI } from '@php-wasm/web';
@@ -46,6 +48,8 @@ export interface StartPlaygroundOptions {
 	disableProgressBar?: boolean;
 	blueprint?: Blueprint;
 	onBlueprintStepCompleted?: OnStepCompleted;
+	onBlueprintStepsCompleted?: OnStepsCompleted;
+	onBlueprintStepProgress?: OnStepProgress;
 }
 
 /**
@@ -62,6 +66,7 @@ export async function startPlaygroundWeb({
 	progressTracker = new ProgressTracker(),
 	disableProgressBar,
 	onBlueprintStepCompleted,
+	onBlueprintStepProgress,
 }: StartPlaygroundOptions): Promise<PlaygroundClient> {
 	assertValidRemote(remoteUrl);
 	allowStorageAccessByUserActivation(iframe);
@@ -76,6 +81,7 @@ export async function startPlaygroundWeb({
 	const compiled = compileBlueprint(blueprint, {
 		progress: progressTracker.stage(0.5),
 		onStepCompleted: onBlueprintStepCompleted,
+		onStepProgress: onBlueprintStepProgress,
 	});
 	const playground = await doStartPlaygroundWeb(
 		iframe,

packages/playground/website/src/lib/hooks.ts

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { Blueprint, startPlaygroundWeb } from '@wp-playground/client';
 import type { PlaygroundClient } from '@wp-playground/client';
+import type { Step } from '@wp-playground/blueprints';
 import { getRemoteUrl } from './config';
 
 interface UsePlaygroundOptions {
@@ -40,10 +41,24 @@ export function usePlayground({ blueprint, storage }: UsePlaygroundOptions) {
 			remoteUrl.searchParams.set('storage', storage);
 		}
 
+		const onBlueprintStepProgress = (
+			promise: Promise<void>,
+			step: Step
+		) => {
+			promise.catch((error: any) => {
+				if (step.step === 'installPlugin') {
+					alert(`Failed to install: ${step.pluginZipFile}`);
+				} else {
+					throw error;
+				}
+			});
+		};
+
 		startPlaygroundWeb({
 			iframe,
 			remoteUrl: remoteUrl.toString(),
 			blueprint,
+			onBlueprintStepProgress,
 		}).then(async (playground) => {
 			playground.onNavigation((url) => setUrl(url));
 			setPlayground(() => playground);

packages/playground/wordpress/build/build.js

@@ -175,7 +175,9 @@ versions = Object.keys(versions)
 // Write the updated JSON back to the file
 await fs.writeFile(versionsPath, JSON.stringify(versions, null, 2));
 
-const latestStableVersion = Object.keys(versions).filter((v) => v.match(/^\d/))[0];
+const latestStableVersion = Object.keys(versions).filter((v) =>
+	v.match(/^\d/)
+)[0];
 
 // Refresh get-wordpress-module.ts
 const getWordPressModulePath = `${outputJsDir}/get-wordpress-module.ts`;
@@ -186,7 +188,9 @@ const getWordPressModuleContent = `
  * This file must statically exists in the project because of the way
  * vite resolves imports.
  */
-export function getWordPressModule(wpVersion: string = ${JSON.stringify(latestStableVersion)}) {
+export function getWordPressModule(wpVersion: string = ${JSON.stringify(
+	latestStableVersion
+)}) {
 	switch (wpVersion) {
 		${Object.keys(versions)
 			.map(