wp-now: Update Playground and PHP WASM dependencies

package.json

@@ -33,13 +33,14 @@
 		"@codemirror/state": "6.4.1",
 		"@codemirror/theme-one-dark": "6.1.2",
 		"@codemirror/view": "6.28.1",
-		"@php-wasm/node": "0.6.16",
-		"@php-wasm/progress": "0.6.16",
-		"@php-wasm/universal": "0.6.16",
-		"@php-wasm/web": "0.6.16",
+		"@php-wasm/node": "1.0.2",
+		"@php-wasm/progress": "1.0.2",
+		"@php-wasm/universal": "1.0.2",
+		"@php-wasm/util": "1.0.2",
+		"@php-wasm/web": "1.0.2",
 		"@uiw/react-codemirror": "4.22.2",
 		"@webcontainer/env": "1.1.1",
-		"@wp-playground/blueprints": "0.6.16",
+		"@wp-playground/blueprints": "1.0.2",
 		"classnames": "^2.3.2",
 		"comlink": "^4.4.1",
 		"compressible": "2.0.18",

packages/wordpress-playground-block/src/components/playground-preview/download-zipped-package.ts

@@ -6,7 +6,7 @@ import {
 
 export default async function downloadZippedPackage(
 	client: PlaygroundClient,
-	codeEditorMode
+	codeEditorMode: string
 ) {
 	const docroot = await client.documentRoot;
 

packages/wp-now/src/execute-php.ts

@@ -1,5 +1,6 @@
+import { useHostFilesystem } from '@php-wasm/node';
 import startWPNow from './wp-now';
-import { WPNowOptions } from './config';
+import { WPNowMode, WPNowOptions } from './config';
 import { disableOutput } from './output';
 import * as path from 'path';
 import fs from 'fs-extra';
@@ -23,14 +24,13 @@ export async function executePHP(
 		);
 	}
 	disableOutput();
-	const { phpInstances, options: wpNowOptions } = await startWPNow({
+	const { php, options: wpNowOptions } = await startWPNow({
 		...options,
-		numberOfPhpInstances: 2,
+		mode: WPNowMode.INDEX,
 	});
-	const [, php] = phpInstances;
 
 	try {
-		php.useHostFilesystem();
+		useHostFilesystem(php);
 		if (!path.isAbsolute(phpArgs[1])) {
 			const maybePhpFile = path.join(
 				wpNowOptions.projectPath,

packages/wp-now/src/execute-wp-cli.ts

@@ -1,43 +1,121 @@
-import startWPNow from './wp-now';
 import { downloadWPCLI } from './download';
-import { disableOutput } from './output';
+import { rootCertificates } from 'tls';
 import getWpCliPath from './get-wp-cli-path';
 import getWpNowConfig from './config';
 import { DEFAULT_PHP_VERSION, DEFAULT_WORDPRESS_VERSION } from './constants';
-import { dirname } from 'path';
+import { phpVar } from '@php-wasm/util';
+import { createNodeFsMountHandler, loadNodeRuntime } from '@php-wasm/node';
+import {
+	PHP,
+	MountHandler,
+	writeFiles,
+	setPhpIniEntries,
+} from '@php-wasm/universal';
+import { readFileSync } from 'fs';
+
+const isWindows = process.platform === 'win32';
 
 /**
  * This is an unstable API. Multiple wp-cli commands may not work due to a current limitation on php-wasm and pthreads.
- * @param args The arguments to pass to wp-cli.
  */
-export async function executeWPCli(args: string[]) {
+export async function executeWPCli(
+	projectPath: string,
+	args: string[],
+	{ phpVersion }: { phpVersion?: string } = {}
+): Promise<{ stdout: string; stderr: string; exitCode: number }> {
 	await downloadWPCLI();
-	disableOutput();
 	const options = await getWpNowConfig({
-		php: DEFAULT_PHP_VERSION,
+		php: phpVersion || DEFAULT_PHP_VERSION,
 		wp: DEFAULT_WORDPRESS_VERSION,
-		path: process.env.WP_NOW_PROJECT_PATH || process.cwd(),
+		path: projectPath,
 	});
-	const { phpInstances, options: wpNowOptions } = await startWPNow({
-		...options,
-		numberOfPhpInstances: 2,
+
+	const id = await loadNodeRuntime(options.phpVersion);
+	const php = new PHP(id);
+	php.mkdir(options.documentRoot);
+	await php.mount(
+		options.documentRoot,
+		createNodeFsMountHandler(projectPath) as unknown as MountHandler
+	);
+
+	//Set the SAPI name to cli before running the script
+	await php.setSapiName('cli');
+
+	php.mkdir('/tmp');
+
+	const wpCliPath = '/tmp/wp-cli.phar';
+	const stderrPath = '/tmp/stderr';
+	const runCliPath = '/tmp/run-cli.php';
+	const createFiles = {
+		[wpCliPath]: readFileSync(getWpCliPath()),
+		[stderrPath]: '',
+		[runCliPath]: `<?php
+			// Set up the environment to emulate a shell script
+			// call.
+
+			// Set SHELL_PIPE to 0 to ensure WP-CLI formats
+			// the output as ASCII tables.
+			// @see https://github.com/wp-cli/wp-cli/issues/1102
+			putenv( 'SHELL_PIPE=0' );
+
+			// When running PHP on Playground, the value of constant PHP_OS is set to Linux.
+			// This implies that platform-specific logic won't work as expected. To solve this,
+			// we use an environment variable to ensure WP-CLI runs the Windows-specific logic.
+			putenv( 'WP_CLI_TEST_IS_WINDOWS=${isWindows ? 1 : 0}' );
+
+			// Set the argv global.
+			$GLOBALS['argv'] = array_merge([
+				"${wpCliPath}",
+				"--path=${options.documentRoot}"
+			], ${phpVar(args)});
+
+			// Provide stdin, stdout, stderr streams outside of
+			// the CLI SAPI.
+			define('STDIN', fopen('php://stdin', 'rb'));
+			define('STDOUT', fopen('php://stdout', 'wb'));
+			define('STDERR', fopen('${stderrPath}', 'wb'));
+
+			// Force disabling WordPress debugging mode to avoid parsing issues of WP-CLI command result
+			define('WP_DEBUG', false);
+			// Filter out errors below ERROR level to avoid parsing issues of WP-CLI command result
+			error_reporting(E_ERROR);
+
+			// WP-CLI uses this argument for checking updates. Seems it's not defined by Playground
+			// when running a script, so we explicitly set it.
+			// Reference: https://github.com/wp-cli/wp-cli/blob/main/php/WP_CLI/Runner.php#L1889
+			$_SERVER['argv'][0] = '${wpCliPath}';
+
+			require( '${wpCliPath}' );`,
+		['/internal/shared/ca-bundle.crt']: rootCertificates.join('\n'),
+	};
+
+	await writeFiles(php, '/', createFiles);
+
+	await setPhpIniEntries(php, {
+		'openssl.cafile': '/internal/shared/ca-bundle.crt',
 	});
-	const [, php] = phpInstances;
 
 	try {
-		const vfsWpCliPath = '/wp-cli/wp-cli.phar';
-		php.mount(dirname(getWpCliPath()), dirname(vfsWpCliPath));
-		await php.cli([
-			'php',
-			vfsWpCliPath,
-			`--path=${wpNowOptions.documentRoot}`,
-			...args,
-		]);
-	} catch (resultOrError) {
-		const success =
-			resultOrError.name === 'ExitStatus' && resultOrError.status === 0;
-		if (!success) {
-			throw resultOrError;
-		}
+		php.chdir(options.documentRoot);
+		const result = await php.run({
+			scriptPath: runCliPath,
+		});
+		const stderr = php
+			.readFileAsText(stderrPath)
+			.replace('PHP.run() output was: #!/usr/bin/env php', '')
+			.trim();
+		return {
+			stdout: result.text.replace('#!/usr/bin/env php', '').trim(),
+			stderr,
+			exitCode: result.exitCode,
+		};
+	} catch (error) {
+		const stderr = php
+			.readFileAsText(stderrPath)
+			.replace('PHP.run() output was: #!/usr/bin/env php', '')
+			.trim();
+		return { stdout: '', stderr: stderr, exitCode: 1 };
+	} finally {
+		php.exit();
 	}
 }

packages/wp-now/src/start-server.ts

@@ -1,11 +1,10 @@
 import fs from 'fs';
 import { WPNowOptions } from './config';
-import { HTTPMethod } from '@php-wasm/universal';
+import { HTTPMethod, PHP } from '@php-wasm/universal';
 import express from 'express';
 import compression from 'compression';
 import compressible from 'compressible';
 import { portFinder } from './port-finder';
-import { NodePHP } from '@php-wasm/node';
 import { isWebContainer } from '@webcontainer/env';
 import startWPNow from './wp-now';
 import { output } from './output';
@@ -24,7 +23,7 @@ const requestBodyToBytes = async (req): Promise<Uint8Array> =>
 
 export interface WPNowServer {
 	url: string;
-	php: NodePHP;
+	php: PHP;
 	options: WPNowOptions;
 	stopServer: () => Promise<void>;
 }
@@ -44,7 +43,7 @@ export async function startServer(
 		);
 	}
 	const app = express();
-	app.use(compression({ filter: shouldCompress }));
+	app.use(compression({ filter: shouldCompress, threshold: 0 }));
 	app.use(addTrailingSlash('/wp-admin'));
 	const port = await portFinder.getOpenPort();
 	const { php, options: wpNowOptions } = await startWPNow(options);
@@ -77,7 +76,7 @@ export async function startServer(
 				data.headers['origin'] = options.absoluteUrl;
 			}
 
-			const resp = await php.request(data);
+			const resp = await php.requestHandler.request(data);
 			res.statusCode = resp.httpStatusCode;
 			Object.keys(resp.headers).forEach((key) => {
 				res.setHeader(key, resp.headers[key]);

packages/wp-now/src/tests/mode-examples/theme-with-assets/page.html

@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Test Page that should be compressed</title>
+	</head>
+</html>

packages/wp-now/src/tests/wp-now.spec.ts

@@ -707,7 +707,7 @@ describe('Test starting different modes', () => {
 		 * Test that startServer compresses the text files correctly.
 		 */
 		test.each([
-			['html', ''],
+			['html', '/wp-content/themes/theme-with-assets/page.html'],
 			['css', '/wp-content/themes/theme-with-assets/style.css'],
 			[
 				'javascript',
@@ -753,7 +753,7 @@ describe('Test starting different modes', () => {
 				`${php.documentRoot}/print-constants.php`,
 				`<?php echo WP_DEBUG_LOG;`
 			);
-			const result = await php.request({
+			const result = await php.requestHandler.request({
 				method: 'GET',
 				url: '/print-constants.php',
 			});
@@ -774,7 +774,7 @@ describe('Test starting different modes', () => {
 				`${php.documentRoot}/print-constants.php`,
 				`<?php echo WP_SITEURL;`
 			);
-			const result = await php.request({
+			const result = await php.requestHandler.request({
 				method: 'GET',
 				url: '/print-constants.php',
 			});
@@ -819,22 +819,6 @@ describe('Test starting different modes', () => {
  * Test wp-cli command.
  */
 describe('wp-cli command', () => {
-	let consoleSpy;
-	let output = '';
-
-	beforeEach(() => {
-		function onStdout(outputLine: string) {
-			output += outputLine;
-		}
-		consoleSpy = vi.spyOn(console, 'log');
-		consoleSpy.mockImplementation(onStdout);
-	});
-
-	afterEach(() => {
-		output = '';
-		consoleSpy.mockRestore();
-	});
-
 	beforeAll(async () => {
 		await downloadWithTimer('wp-cli', downloadWPCLI);
 	});
@@ -848,7 +832,7 @@ describe('wp-cli command', () => {
 	 * We don't need the WordPress context for this test.
 	 */
 	test('wp-cli displays the version', async () => {
-		await executeWPCli(['cli', 'version']);
-		expect(output).toMatch(/WP-CLI (\d\.?)+/i);
+		const { stdout } = await executeWPCli('.', ['--version']);
+		expect(stdout).toMatch(/WP-CLI (\d\.?)+/i);
 	});
 });