Website query API: Continue plugin installs on error

packages/playground/blueprints/src/index.ts

@@ -8,6 +8,11 @@ export type {
 	CompiledBlueprint,
 	CompileBlueprintOptions,
 	OnStepCompleted,
+	OnStepsCompleted,
+	OnRunningSteps,
+	PromiseMap,
+	PromiseExecutor,
+	CompletedStatus,
 } from './lib/compile';
 export type {
 	CachedResource,

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

@@ -48,15 +48,36 @@ export interface CompiledBlueprint {
 
 export type OnStepCompleted = (output: any, step: StepDefinition) => any;
 
+export type CompletedStatus = Map<StepDefinition, boolean>;
+export type OnStepsCompleted = (completedStatus: CompletedStatus) => void;
+export type OnRunningSteps = (progressMap: PromiseMap) => void;
+
+export type PromiseMap = Map<StepDefinition, Promise<void>>;
+export type PromiseExecutor = {
+	resolve: (result: any) => void;
+	reject: (error: any) => 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 */
 	onStepCompleted?: OnStepCompleted;
+	onRunningSteps?: OnRunningSteps;
+	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.
  *
@@ -71,6 +92,14 @@ export function compileBlueprint(
 		progress = new ProgressTracker(),
 		semaphore = new Semaphore({ concurrency: 3 }),
 		onStepCompleted = () => {},
+		onRunningSteps = (progressMap: PromiseMap) => {
+			for (const promise of progressMap.values()) {
+				promise.catch((error) => {
+					throw error;
+				});
+			}
+		},
+		onStepsCompleted,
 	}: CompileBlueprintOptions = {}
 ): CompiledBlueprint {
 	blueprint = {
@@ -116,33 +145,77 @@ export function compileBlueprint(
 			),
 		},
 		run: async (playground: UniversalPHP) => {
+			const progressMap = new Map<StepDefinition, Promise<void>>();
+			const progressPromises = new Map<StepDefinition, PromiseExecutor>();
+			for (const { step } of compiled) {
+				progressMap.set(
+					step,
+					new Promise((resolve, reject) => {
+						progressPromises.set(step, { resolve, reject });
+					})
+				);
+			}
+			onRunningSteps(progressMap);
+
 			try {
 				// Start resolving resources early
-				for (const { resources } of compiled) {
+				for (const { resources, step } of compiled) {
+					const stepPromise = progressPromises.get(
+						step
+					) as PromiseExecutor;
 					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
+					) as PromiseExecutor;
+					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(progressMap.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([...progressMap.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,
+	OnRunningSteps,
 	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;
+	onRunningBlueprintSteps?: OnRunningSteps;
 }
 
 /**
@@ -62,6 +66,7 @@ export async function startPlaygroundWeb({
 	progressTracker = new ProgressTracker(),
 	disableProgressBar,
 	onBlueprintStepCompleted,
+	onRunningBlueprintSteps,
 }: 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,
+		onRunningSteps: onRunningBlueprintSteps,
 	});
 	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 { PromiseMap } from '@wp-playground/blueprints';
 import { buildVersion } from './config';
 
 interface UsePlaygroundOptions {
@@ -36,10 +37,23 @@ export function usePlayground({ blueprint, storage }: UsePlaygroundOptions) {
 			remoteUrl.searchParams.set('storage', storage);
 		}
 
+		const onRunningBlueprintSteps = (progressMap: PromiseMap) => {
+			for (const [step, promise] of progressMap.entries()) {
+				promise.catch((error: any) => {
+					if (step.step === 'installPlugin') {
+						alert(`Failed to install: ${step.pluginZipFile}`);
+					} else {
+						throw error;
+					}
+				});
+			}
+		};
+
 		startPlaygroundWeb({
 			iframe,
 			remoteUrl: remoteUrl.toString(),
 			blueprint,
+			onRunningBlueprintSteps,
 		}).then(async (playground) => {
 			playground.onNavigation((url) => setUrl(url));
 			setPlayground(() => playground);