IDE-like PHP Playground

.eslintrc.json

@@ -29,6 +29,7 @@
 				"no-inner-declarations": 0,
 				"no-use-before-define": "off",
 				"react/prop-types": 0,
+				"react-hooks/exhaustive-deps": 0,
 				"no-console": 1,
 				"no-empty": 0,
 				"no-async-promise-executor": 0,

package.json

@@ -66,6 +66,19 @@
 	},
 	"private": true,
 	"dependencies": {
+		"@codemirror/autocomplete": "6.19.0",
+		"@codemirror/commands": "6.8.1",
+		"@codemirror/lang-css": "6.3.1",
+		"@codemirror/lang-html": "6.4.10",
+		"@codemirror/lang-javascript": "6.2.4",
+		"@codemirror/lang-json": "6.0.2",
+		"@codemirror/lang-markdown": "6.3.4",
+		"@codemirror/lang-php": "6.0.2",
+		"@codemirror/language": "6.11.3",
+		"@codemirror/search": "6.5.11",
+		"@codemirror/state": "6.5.2",
+		"@codemirror/view": "6.38.3",
+		"@playwright/experimental-ct-react": "1.55.1",
 		"@preact/signals-react": "1.3.6",
 		"@reduxjs/toolkit": "2.6.1",
 		"@types/xml2js": "0.4.14",
@@ -87,6 +100,7 @@
 		"react-dom": "18.3.1",
 		"react-hook-form": "7.53.0",
 		"react-redux": "8.1.3",
+		"react-resizable-panels": "3.0.6",
 		"react-transition-group": "4.4.5",
 		"sha.js": "2.4.11",
 		"tmp-promise": "3.0.3",
@@ -130,7 +144,7 @@
 		"@vitejs/plugin-react": "4.2.0",
 		"@wordpress/block-editor": "13.4.0",
 		"@wordpress/blocks": "13.4.0",
-		"@wordpress/components": "28.4.0",
+		"@wordpress/components": "30.4.0",
 		"@wordpress/core-data": "7.4.0",
 		"@wordpress/data": "10.4.0",
 		"@wordpress/element": "6.4.0",

packages/php-wasm/universal/src/lib/api.ts

@@ -374,7 +374,13 @@ function streamToPort(stream: ReadableStream<Uint8Array>): MessagePort {
 			}
 		} catch (e: any) {
 			try {
-				port1.postMessage({ t: 'error', m: e?.message || String(e) });
+				const serialized = serializeForPort(e);
+				port1.postMessage({
+					t: 'error',
+					e: serialized,
+					// Legacy field for backwards compatibility
+					m: (e as any)?.message || JSON.stringify(e),
+				});
 			} catch {
 				// Ignore error
 			}
@@ -407,10 +413,43 @@ function portToStream(port: MessagePort): ReadableStream<Uint8Array> {
 						controller.close();
 						cleanup();
 						break;
-					case 'error':
-						controller.error(new Error(data.m || 'Stream error'));
+					case 'error': {
+						if (data.e) {
+							let errorValue: unknown;
+							try {
+								errorValue = deserializeForPort(
+									data.e,
+									'MessagePort bridged stream error'
+								);
+							} catch (deserializationError: any) {
+								// Fallback: if deserialization fails, surface a generic error
+								errorValue = new Error(
+									deserializationError?.message ||
+										'Stream error'
+								);
+							}
+							controller.error(errorValue as any);
+							cleanup();
+							break;
+						}
+						// Legacy fallback using stringified message
+						let error = '';
+						try {
+							error = JSON.parse(data.m);
+						} catch {
+							// Ignore error
+						}
+						if (!error) {
+							error = data.m;
+						}
+						if (typeof error === 'string') {
+							controller.error(new Error(error));
+						} else {
+							controller.error(error);
+						}
 						cleanup();
 						break;
+					}
 				}
 			};
 			const cleanup = () => {
@@ -473,9 +512,12 @@ function promiseToPort(promise: Promise<any>): MessagePort {
 		})
 		.catch((err) => {
 			try {
+				const serialized = serializeForPort(err);
 				port1.postMessage({
 					t: 'reject',
-					m: (err as any)?.message || String(err),
+					e: serialized,
+					// Legacy field for backwards compatibility
+					m: (err as any)?.message || JSON.stringify(err),
 				});
 			} catch {
 				// Ignore error
@@ -505,7 +547,35 @@ function portToPromise(port: MessagePort): Promise<any> {
 				resolve(data.v);
 			} else if (data.t === 'reject') {
 				cleanup();
-				reject(new Error(data.m || ''));
+				if (data.e) {
+					try {
+						const errorValue = deserializeForPort(
+							data.e,
+							'MessagePort bridged promise rejected'
+						);
+						reject(errorValue as any);
+					} catch (deserializationError: any) {
+						reject(
+							new Error(
+								deserializationError?.message ||
+									'Promise rejected'
+							)
+						);
+					}
+					return;
+				}
+				// Legacy fallback using stringified message
+				let error = '';
+				try {
+					error = JSON.parse(data.m);
+				} catch {
+					// Ignore error
+				}
+				if (typeof error === 'string') {
+					reject(new Error(error));
+				} else {
+					reject(error);
+				}
 			}
 		};
 		const cleanup = () => {
@@ -599,6 +669,42 @@ const throwTransferHandlerCustom: Comlink.TransferHandler<
 
 Comlink.transferHandlers.set('throw', throwTransferHandlerCustom);
 
+// Utilities to serialize/deserialize thrown values over MessagePorts
+function serializeForPort(value: unknown): SerializedError {
+	let serialized: SerializedError;
+	if (value instanceof Error) {
+		serialized = {
+			isError: true,
+			value: ErrorSerializer.serializeError(value),
+		};
+		// Preserve the original error class name
+		(serialized.value as any)['originalErrorClassName'] = (
+			value as Error
+		).constructor.name;
+	} else {
+		serialized = { isError: false, value };
+	}
+	return serialized;
+}
+
+function deserializeForPort(
+	serialized: SerializedError,
+	additionalMessage: string
+): unknown {
+	if (serialized.isError) {
+		const error = ErrorSerializer.deserializeError(serialized.value);
+		// Chain host call stack at the bottom of the error chain
+		const additionalCallStack = new Error(additionalMessage);
+		let deepestError: any = error as any;
+		while (deepestError.cause) {
+			deepestError = deepestError.cause;
+		}
+		deepestError.cause = additionalCallStack;
+		return error;
+	}
+	return serialized.value;
+}
+
 function proxyClone(object: any): any {
 	return new Proxy(object, {
 		get(target, prop) {

packages/php-wasm/universal/src/lib/fs-helpers.ts

@@ -231,8 +231,11 @@ export class FSHelpers {
 	 * @param target
 	 * @param link
 	 */
-	static symlink(FS: Emscripten.RootFS, target: string, link: string): any {
-		return FS.symlink(target, link);
+	static symlink(FS: Emscripten.RootFS, target: string, link: string): true {
+		// Will throw an error if the symlink cannot be created or
+		// return a FS Node if the symlink is created.
+		FS.symlink(target, link);
+		return true;
 	}
 
 	/**

packages/php-wasm/universal/src/lib/php-worker.ts

@@ -58,6 +58,7 @@ export class PHPWorker implements LimitedPHPApi, AsyncDisposable {
 	absoluteUrl = '';
 	/** @inheritDoc @php-wasm/universal!RequestHandler.documentRoot  */
 	documentRoot = '';
+	private chroot: string | null = null;
 
 	#eventListeners: Map<string, Set<PHPWorkerEventListener>> = new Map();
 
@@ -177,9 +178,7 @@ export class PHPWorker implements LimitedPHPApi, AsyncDisposable {
 
 	/** @inheritDoc @php-wasm/universal!/PHP.run */
 	async run(request: PHPRunOptions): Promise<PHPResponse> {
-		const { php, reap } = await _private
-			.get(this)!
-			.requestHandler!.processManager.acquirePHPInstance();
+		const { php, reap } = await this.acquirePHPInstance();
 		try {
 			return await php.run(request);
 		} finally {
@@ -192,21 +191,48 @@ export class PHPWorker implements LimitedPHPApi, AsyncDisposable {
 		argv: string[],
 		options?: { env?: Record<string, string> }
 	): Promise<StreamedPHPResponse> {
-		const { php, reap } = await _private
-			.get(this)!
-			.requestHandler!.processManager.acquirePHPInstance();
+		const { php, reap } = await this.acquirePHPInstance();
+		let response: StreamedPHPResponse;
 		try {
-			return await php.cli(argv, options);
-		} finally {
+			response = await php.cli(argv, options);
+		} catch (error) {
 			reap();
+			throw error;
 		}
+		/**
+		 * Register the reap() callback to run asynchronously once
+		 * the response is finished.
+		 *
+		 * We don't await for response.finished here. It is a
+		 * `StreamedPHPResponse` instance and the caller may want
+		 * to start processing the streamed data immediately.
+		 */
+		response.finished.finally(reap);
+		return response;
 	}
 
 	/** @inheritDoc @php-wasm/universal!/PHP.chdir */
 	chdir(path: string): void {
+		// Remember the new chroot for all PHP instances yet to be acquired.
+		this.chroot = path;
 		return _private.get(this)!.php!.chdir(path);
 	}
 
+	/** @inheritDoc @php-wasm/universal!/PHP.chdir */
+	cwd(): string {
+		return _private.get(this)!.php!.cwd();
+	}
+
+	private async acquirePHPInstance() {
+		const { php, reap } = await _private
+			.get(this)!
+			.requestHandler!.processManager.acquirePHPInstance();
+		if (this.chroot !== null) {
+			php.chdir(this.chroot);
+		}
+		return { php, reap };
+	}
+
 	/** @inheritDoc @php-wasm/universal!/PHP.setSapiName */
 	setSapiName(newName: string): void {
 		_private.get(this)!.php!.setSapiName(newName);
@@ -237,6 +263,11 @@ export class PHPWorker implements LimitedPHPApi, AsyncDisposable {
 		return _private.get(this)!.php!.writeFile(path, data);
 	}
 
+	/** @inheritDoc @php-wasm/universal!/PHP.symlink */
+	symlink(target: string, path: string): void {
+		_private.get(this)!.php!.symlink(target, path);
+	}
+
 	/** @inheritDoc @php-wasm/universal!/PHP.unlink */
 	unlink(path: string): void {
 		return _private.get(this)!.php!.unlink(path);