WIP: Support Blueprints v2 in the browser

packages/php-wasm/compile/libopenssl/Dockerfile

@@ -22,12 +22,12 @@ RUN set -euxo pipefail && \
 RUN source /root/emsdk/emsdk_env.sh && \
     cd openssl-$OPENSSL_VERSION && \
     sed -i 's|^CROSS_COMPILE.*$|CROSS_COMPILE=|g' Makefile && \
-    export JSPI_FLAGS=$(if [ "$JSPI" = "1" ]; then echo "-sSUPPORT_LONGJMP=wasm -fwasm-exceptions"; else echo ""; fi) && \
+    export JSPI_FLAGS=$(if [ "$JSPI" = "1" ]; then echo "-sJSPI=1 -sSUPPORT_LONGJMP=wasm -fwasm-exceptions -sJSPI_IMPORTS=close,fd_close,wasm_close -sJSPI_EXPORTS=close,fd_close,wasm_close"; else echo ""; fi) && \
     EMCC_FLAGS=" -sSIDE_MODULE $JSPI_FLAGS" EMCC_SKIP="-lz" emmake make -j 12 build_generated libssl.a libcrypto.a;
 
 RUN source /root/emsdk/emsdk_env.sh && \
     cd openssl-$OPENSSL_VERSION && \
-    export JSPI_FLAGS=$(if [ "$JSPI" = "1" ]; then echo "-sSUPPORT_LONGJMP=wasm -fwasm-exceptions"; else echo ""; fi) && \
+    export JSPI_FLAGS=$(if [ "$JSPI" = "1" ]; then echo "-sJSPI=1 -sJSPI_IMPORTS=close -sJSPI_EXPORTS=close,fd_close,wasm_close -sSUPPORT_LONGJMP=wasm -fwasm-exceptions"; else echo ""; fi) && \
     cp -RL include/openssl /root/lib/include && \
     cp libcrypto.a libssl.a /root/lib/lib && \
     EMCC_FLAGS=" -sSIDE_MODULE $JSPI_FLAGS" EMCC_SKIP="-lz" emmake make install_sw || true;

packages/php-wasm/compile/libz/Dockerfile

@@ -11,6 +11,6 @@ RUN source /root/emsdk/emsdk_env.sh && \
     emconfigure ./configure --prefix=/root/lib && \
     # emmake make fails, but only after it builds the library files.
     # Let's just ignore the errors and proceed with the built libraries.
-    export JSPI_FLAGS=$(if [ "$JSPI" = "1" ]; then echo "-sSUPPORT_LONGJMP=wasm -fwasm-exceptions"; else echo ""; fi) && \
+    export JSPI_FLAGS=$(if [ "$JSPI" = "1" ]; then echo "-sJSPI=1 -sJSPI_IMPORTS=close,fd_close,wasm_close -sJSPI_EXPORTS=close,fd_close,wasm_close -sSUPPORT_LONGJMP=wasm -fwasm-exceptions"; else echo ""; fi) && \
     (EMCC_FLAGS=" -D__x86_64__ -sSIDE_MODULE $JSPI_FLAGS" emmake make || true) && \
     EMCC_FLAGS=" -D__x86_64__ -sSIDE_MODULE $JSPI_FLAGS" emmake make install

packages/php-wasm/compile/php/Dockerfile

@@ -2105,7 +2105,13 @@ RUN set -euxo pipefail; \
 	source /root/emsdk/emsdk_env.sh; \
 	if [ "$WITH_JSPI" = "yes" ]; then \
 		# Both imports and exports are required for inter-module communication with wrapped methods, e.g., wasm_recv.
-		export ASYNCIFY_FLAGS=" -s ASYNCIFY=2 -sSUPPORT_LONGJMP=wasm -fwasm-exceptions -sJSPI_IMPORTS=js_open_process,js_fd_read,js_waitpid,js_process_status,js_create_input_device,wasm_setsockopt,wasm_shutdown,wasm_close,wasm_recv,__syscall_fcntl64,js_flock,js_release_file_locks,js_waitpid,fd_close -sJSPI_EXPORTS=php_wasm_init,fd_close,wasm_sleep,wasm_read,emscripten_sleep,wasm_sapi_handle_request,wasm_sapi_request_shutdown,wasm_poll_socket,wrap_select,__wrap_select,select,php_pollfd_for,fflush,wasm_popen,wasm_read,wasm_php_exec,run_cli,wasm_recv -s EXTRA_EXPORTED_RUNTIME_METHODS=ccall,PROXYFS,wasmExports,_malloc,setErrNo "; \
+		export JSPI_ADD_IMPORTS=""; \
+		export JSPI_ADD_EXPORTS=""; \
+		if [ "$EMSCRIPTEN_ENVIRONMENT" = "node" ]; then \
+			export JSPI_ADD_IMPORTS=",fd_close"; \
+			export JSPI_ADD_EXPORTS=",fd_close"; \
+		fi; \
+		export ASYNCIFY_FLAGS=" -s ASYNCIFY=2 -sSUPPORT_LONGJMP=wasm -fwasm-exceptions -sJSPI_IMPORTS=js_open_process,js_fd_read,js_waitpid,js_process_status,js_create_input_device,wasm_setsockopt,wasm_shutdown,wasm_close,wasm_recv,__syscall_fcntl64,js_flock,js_release_file_locks,js_waitpid$JSPI_ADD_IMPORTS -sJSPI_EXPORTS=php_wasm_init,wasm_sleep,wasm_read,emscripten_sleep,wasm_sapi_handle_request,wasm_sapi_request_shutdown,wasm_poll_socket,wrap_select,__wrap_select,select,php_pollfd_for,fflush,wasm_popen,wasm_read,wasm_php_exec,run_cli,wasm_recv$JSPI_ADD_EXPORTS -s EXTRA_EXPORTED_RUNTIME_METHODS=ccall,PROXYFS,wasmExports,_malloc,setErrNo "; \
 		echo '#define PLAYGROUND_JSPI 1' > /root/php_wasm_asyncify.h; \
 	else \
 		export ASYNCIFY_FLAGS=" -s ASYNCIFY=1 -s ASYNCIFY_IGNORE_INDIRECT=1 -s EXPORTED_RUNTIME_METHODS=ccall,PROXYFS,wasmExports,setErrNo $(cat /root/.emcc-php-asyncify-flags)  "; \

packages/php-wasm/universal/src/lib/sandboxed-spawn-handler-factory.ts

@@ -1,5 +1,6 @@
 import { createSpawnHandler } from '@php-wasm/util';
 import type { PHPProcessManager } from './php-process-manager';
+import { logger } from '@php-wasm/logger';
 
 /**
  * An isomorphic proc_open() handler that implements typical shell in TypeScript
@@ -90,6 +91,7 @@ export function sandboxedSpawnHandlerFactory(
 				);
 				processApi.exit(await result.exitCode);
 			} catch (e) {
+				logger.error(e);
 				// An exception here means the PHP runtime has crashed.
 				processApi.exit(1);
 				throw e;

packages/playground/blueprints/src/lib/v2/run-blueprint-v2.ts

@@ -4,12 +4,12 @@ import {
 	type UniversalPHP,
 } from '@php-wasm/universal';
 import { phpVar } from '@php-wasm/util';
-import { getV2Runner } from './get-v2-runner';
 import {
 	type BlueprintV2Declaration,
 	type ParsedBlueprintV2Declaration,
 	parseBlueprintDeclaration,
 } from './blueprint-v2-declaration';
+import { getV2Runner } from './get-v2-runner';
 
 export type PHPExceptionDetails = {
 	exception: string;
@@ -206,18 +206,23 @@ function playground_progress_reporter() {
 	return new PlaygroundProgressReporter();
 }
 playground_add_filter('blueprint.progress_reporter', 'playground_progress_reporter');
+
 require( "/tmp/blueprints.phar" );
 `
 	);
-	const streamedResponse = (await (php as any).cli([
-		'/internal/shared/bin/php',
-		'/tmp/run-blueprints.php',
-		'exec',
-		blueprintReference,
-		...cliArgs,
-	])) as StreamedPHPResponse;
-
-	streamedResponse.finished.finally(unbindMessageListener);
-
-	return streamedResponse;
+	try {
+		const streamedResponse = (await (php as any).cli([
+			'/internal/shared/bin/php',
+			'/tmp/run-blueprints.php',
+			'exec',
+			blueprintReference,
+			...cliArgs,
+		])) as StreamedPHPResponse;
+
+		await streamedResponse.exitCode;
+
+		return streamedResponse;
+	} finally {
+		unbindMessageListener();
+	}
 }

packages/playground/client/src/index.ts

@@ -1,36 +1,36 @@
 export * from '@wp-playground/blueprints';
 
+export {
+	LatestSupportedPHPVersion,
+	setPhpIniEntries,
+	SupportedPHPVersions,
+	SupportedPHPVersionsList,
+} from '@php-wasm/universal';
 export type {
+	ErrnoError,
 	HTTPMethod,
-	PHPRunOptions,
-	PHPRequest,
-	PHPResponse,
-	UniversalPHP,
 	PHPOutput,
-	PHPResponseData,
-	ErrnoError,
+	PHPRequest,
 	PHPRequestHandler,
 	PHPRequestHandlerConfiguration,
 	PHPRequestHeaders,
-	SupportedPHPVersion,
+	PHPResponse,
+	PHPResponseData,
+	PHPRunOptions,
 	RmDirOptions,
 	RuntimeType,
-} from '@php-wasm/universal';
-export {
-	setPhpIniEntries,
-	SupportedPHPVersions,
-	SupportedPHPVersionsList,
-	LatestSupportedPHPVersion,
+	SupportedPHPVersion,
+	UniversalPHP,
 } from '@php-wasm/universal';
 export { phpVar, phpVars } from '@php-wasm/util';
-export type { PlaygroundClient, MountDescriptor };
+export type { MountDescriptor, PlaygroundClient };
 
+import { collectPhpLogs, logger } from '@php-wasm/logger';
+import { ProgressTracker } from '@php-wasm/progress';
+import { consumeAPI } from '@php-wasm/web';
 import type { Blueprint, OnStepCompleted } from '@wp-playground/blueprints';
 import { compileBlueprint, runBlueprintSteps } from '@wp-playground/blueprints';
-import { consumeAPI } from '@php-wasm/web';
-import { ProgressTracker } from '@php-wasm/progress';
 import type { MountDescriptor, PlaygroundClient } from '@wp-playground/remote';
-import { collectPhpLogs, logger } from '@php-wasm/logger';
 import { additionalRemoteOrigins } from './additional-remote-origins';
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import { remoteDevServerHost, remoteDevServerPort } from '../../build-config';
@@ -41,6 +41,10 @@ export interface StartPlaygroundOptions {
 	progressTracker?: ProgressTracker;
 	disableProgressBar?: boolean;
 	blueprint?: Blueprint;
+	/**
+	 * Prefer experimental Blueprints v2 PHP runner instead of TypeScript steps
+	 */
+	experimentalBlueprintsV2Runner?: boolean;
 	onBlueprintStepCompleted?: OnStepCompleted;
 	/**
 	 * Called when the playground client is connected, but before the blueprint
@@ -56,14 +60,6 @@ export interface StartPlaygroundOptions {
 	 * @private
 	 */
 	sapiName?: string;
-	/**
-	 * Called before the blueprint steps are run,
-	 * allows the caller to delay the Blueprint execution
-	 * once the Playground is booted.
-	 *
-	 * @returns
-	 */
-	onBeforeBlueprint?: () => Promise<void>;
 	mounts?: Array<MountDescriptor>;
 	shouldInstallWordPress?: boolean;
 	/**
@@ -108,12 +104,12 @@ export async function startPlaygroundWeb({
 	onBlueprintStepCompleted,
 	onClientConnected = () => {},
 	sapiName,
-	onBeforeBlueprint,
 	mounts,
 	scope,
 	corsProxy,
 	shouldInstallWordPress,
 	sqliteDriverVersion,
+	experimentalBlueprintsV2Runner,
 }: StartPlaygroundOptions): Promise<PlaygroundClient> {
 	assertLikelyCompatibleRemoteOrigin(remoteUrl);
 	allowStorageAccessByUserActivation(iframe);
@@ -128,17 +124,25 @@ export async function startPlaygroundWeb({
 		blueprint = {};
 	}
 
-	const compiled = await compileBlueprint(blueprint, {
-		progress: progressTracker.stage(0.5),
-		onStepCompleted: onBlueprintStepCompleted,
-		corsProxy,
-	});
-
 	await new Promise((resolve) => {
 		iframe.src = remoteUrl;
 		iframe.addEventListener('load', resolve, false);
 	});
 
+	const compiled = experimentalBlueprintsV2Runner
+		? await compileBlueprint(
+				{},
+				{
+					progress: progressTracker.stage(0.5),
+					corsProxy,
+				}
+		  )
+		: await compileBlueprint(blueprint, {
+				progress: progressTracker.stage(0.5),
+				onStepCompleted: onBlueprintStepCompleted,
+				corsProxy,
+		  });
+
 	// Connect the Comlink API client to the remote worker,
 	// boot the playground, and run the blueprint steps.
 	const playground = consumeAPI<PlaygroundClient>(
@@ -149,6 +153,29 @@ export async function startPlaygroundWeb({
 	progressTracker.pipe(playground);
 	const downloadPHPandWP = progressTracker.stage();
 	await playground.onDownloadProgress(downloadPHPandWP.loadingListener);
+
+	// Subscribe early to blueprint messages when v2 runner is enabled
+	if (experimentalBlueprintsV2Runner && blueprint) {
+		await playground.onBlueprintMessage(async (message: any) => {
+			if (message?.type === 'blueprint.progress') {
+				await playground.setProgress({
+					caption: (message.caption || 'Working').trim(),
+					progress: message.progress,
+					isIndefinite: false,
+					visible: true,
+				});
+			}
+			if (message?.type === 'blueprint.error') {
+				await playground.setProgress({
+					caption: 'Error',
+					isIndefinite: false,
+					visible: true,
+					progress: 100,
+				});
+			}
+		});
+	}
+
 	await playground.boot({
 		mounts,
 		sapiName,
@@ -160,18 +187,28 @@ export async function startPlaygroundWeb({
 		withNetworking: compiled.features.networking,
 		corsProxyUrl: corsProxy,
 		sqliteDriverVersion,
+		experimentalBlueprintsV2Runner,
+		blueprint: blueprint as any,
 	});
 	await playground.isReady();
 	downloadPHPandWP.finish();
 
 	collectPhpLogs(logger, playground);
 	onClientConnected(playground);
 
-	if (onBeforeBlueprint) {
-		await onBeforeBlueprint();
+	if (experimentalBlueprintsV2Runner) {
+		// @TODO: Source the landing page URL from the v2 Blueprint
+		// @TODO: Maybe reconcile this code path with v1 Blueprints? Right now it's
+		//        handled in `compileBlueprint`. Perhaps we could somehow move it to a
+		//        PHP plugin and also support it in Node.js? Or at least handle initial
+		//        redirection for both v1 and v2 Blueprints in the same place in web browsers?
+		await playground.goTo('/');
+	} else if (blueprint) {
+		// Blueprints v1 runner.
+		// @TODO: Should we run this in remote instead?
+		await runBlueprintSteps(compiled, playground);
 	}
 
-	await runBlueprintSteps(compiled, playground);
 	/**
 	 * Pre-fetch WordPress update checks to speed up the initial wp-admin load.
 	 *

packages/playground/remote/src/lib/boot-playground-remote.ts

@@ -113,6 +113,9 @@ export async function bootPlaygroundRemote() {
 		async removeEventListener(event, listener) {
 			return await phpWorkerApi.removeEventListener(event, listener);
 		},
+		async onBlueprintMessage(listener) {
+			return await (phpWorkerApi as any).onBlueprintMessage(listener);
+		},
 		async setProgress(options: ProgressBarOptions) {
 			if (!bar) {
 				throw new Error('Progress bar not available');

packages/playground/remote/src/lib/playground-client.ts

@@ -61,6 +61,13 @@ export interface WebClientMixin extends ProgressReceiver {
 	/** @inheritDoc @php-wasm/universal!UniversalPHP.onMessage */
 	onMessage(listener: MessageListener): Promise<() => Promise<void>>;
 
+	/**
+	 * Subscribes to Blueprint v2 progress/error/completion messages.
+	 */
+	onBlueprintMessage(
+		listener: (message: any) => void | Promise<void>
+	): Promise<() => Promise<void>>;
+
 	mountOpfs(
 		options: MountDescriptor,
 		onProgress?: SyncProgressCallback