Remove DOMParser from Blueprints: installPlugin and installTheme

.editorconfig

@@ -5,6 +5,8 @@ root = true
 charset = utf-8
 insert_final_newline = true
 trim_trailing_whitespace = true
+indent_style = tab
+indent_size = 4
 
 [*.md]
 max_line_length = off

README.md

@@ -1,4 +1,4 @@
-# WordPress Playground and  PHP WASM (WebAssembly)
+# WordPress Playground and PHP WASM (WebAssembly)
 
 [Project Page](https://developer.wordpress.org/playground/) | [Live demo](https://playground.wordpress.net/) | [Documentation and API Reference](https://wordpress.github.io/wordpress-playground/)
 

packages/docs/site/docs/13-contributing/05-publishing.md

@@ -36,7 +36,7 @@ npm run release
 Internet connections drop, APIs stop responding, and GitHub rules are nasty. Stuff happens. If the publishing process fails, you may need to bump the version again and force a publish. To do so, execute the following command:
 
 ```bash
-npm run release --force-publish
+npm run release -- --force-publish
 ```
 
 ## GitHub documentation

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

@@ -486,7 +486,7 @@ export abstract class BasePHP implements IsomorphicLocalPHP {
 	/** @inheritDoc */
 	@rethrowFileSystemError('Could not move "{path}"')
 	mv(fromPath: string, toPath: string) {
-		this[__private__dont__use].FS.mv(fromPath, toPath);
+		this[__private__dont__use].FS.rename(fromPath, toPath);
 	}
 
 	/** @inheritDoc */

packages/playground/blueprints/src/lib/steps/activate-plugin.ts

@@ -19,8 +19,8 @@ export const activatePlugin: StepHandler<ActivatePluginStep> = async (
 ) => {
 	progress?.tracker.setCaption(`Activating ${pluginPath}`);
 	const requiredFiles = [
-		`${playground.documentRoot}/wp-load.php`,
-		`${playground.documentRoot}/wp-admin/includes/plugin.php`,
+		`${await playground.documentRoot}/wp-load.php`,
+		`${await playground.documentRoot}/wp-admin/includes/plugin.php`,
 	];
 	const requiredFilesExist = requiredFiles.every((file) =>
 		playground.fileExists(file)

packages/playground/blueprints/src/lib/steps/install-plugin.spec.ts

@@ -0,0 +1,57 @@
+import { NodePHP } from '@php-wasm/node';
+import { compileBlueprint, runBlueprintSteps } from '../compile';
+
+const phpVersion = '8.0';
+describe('Blueprint step installPlugin', () => {
+	let php: NodePHP;
+	beforeEach(async () => {
+		php = await NodePHP.load(phpVersion, {
+			requestHandler: {
+				documentRoot: '/',
+				isStaticFilePath: (path) => !path.endsWith('.php'),
+			},
+		});
+	});
+
+	it('should install a plugin', async () => {
+		// Create test plugin
+
+		php.mkdir('/tmp/test-plugin');
+		php.writeFile(
+			'/tmp/test-plugin/index.php',
+			`/**\n * Plugin Name: Test Plugin`
+		);
+
+		const zipFileName = 'test-plugin-0.0.1.zip';
+
+		await php.run({
+			code: `<?php $zip = new ZipArchive(); $zip->open("${zipFileName}", ZIPARCHIVE::CREATE); $zip->addFile("/tmp/test-plugin/index.php"); $zip->close();`,
+		});
+
+		php.rmdir('/tmp/test-plugin');
+
+		// Note the package name is different from plugin folder name
+		expect(php.fileExists(zipFileName)).toBe(true);
+
+		await runBlueprintSteps(
+			compileBlueprint({
+				steps: [
+					{
+						step: 'installPlugin',
+						pluginZipFile: {
+							resource: 'vfs',
+							path: zipFileName,
+						},
+					},
+				],
+			}),
+			php
+		);
+
+		php.unlink(zipFileName);
+
+		expect(
+			php.fileExists(`${php.documentRoot}/wp-content/test-plugin`)
+		).toBe(true);
+	}, 30000);
+});

packages/playground/blueprints/src/lib/steps/install-plugin.ts

@@ -1,6 +1,9 @@
 import { UniversalPHP } from '@php-wasm/universal';
 import { StepHandler } from '.';
-import { asDOM, zipNameToHumanName } from './common';
+import { zipNameToHumanName } from './common';
+import { writeFile } from './client-methods';
+import { activatePlugin } from './activate-plugin';
+import { unzip } from './import-export';
 
 /**
  * @inheritDoc installPlugin
@@ -58,110 +61,134 @@ export const installPlugin: StepHandler<InstallPluginStep<File>> = async (
 	{ pluginZipFile, options = {} },
 	progress?
 ) => {
-	progress?.tracker.setCaption(
-		`Installing the ${zipNameToHumanName(pluginZipFile?.name)} plugin`
-	);
+	const zipFileName = pluginZipFile.name.split('/').pop() || 'plugin.zip';
+	const zipNiceName = zipNameToHumanName(zipFileName);
+
+	progress?.tracker.setCaption(`Installing the ${zipNiceName} plugin`);
 	try {
-		const activate = 'activate' in options ? options.activate : true;
+		// Extract to temporary folder so we can find plugin folder name
+
+		const tmpFolder = '/tmp/plugin';
+		const tmpZipPath = `/tmp/${zipFileName}`;
 
-		// Upload it to WordPress
-		const pluginForm = await playground.request({
-			url: '/wp-admin/plugin-install.php?tab=upload',
+		if (await playground.isDir(tmpFolder)) {
+			await playground.unlink(tmpFolder);
+		}
+
+		await writeFile(playground, {
+			path: tmpZipPath,
+			data: pluginZipFile,
 		});
-		const pluginFormPage = asDOM(pluginForm);
-		const pluginFormData = new FormData(
-			pluginFormPage.querySelector('.wp-upload-form')! as HTMLFormElement
-		) as any;
-		// eslint-disable-next-line @typescript-eslint/no-unused-vars
-		const { pluginzip, ...postData } = Object.fromEntries(
-			pluginFormData.entries()
-		);
 
-		const pluginInstalledResponse = await playground.request({
-			url: '/wp-admin/update.php?action=upload-plugin',
-			method: 'POST',
-			formData: postData,
-			files: { pluginzip: pluginZipFile },
+		await unzip(playground, {
+			zipPath: tmpZipPath,
+			extractToPath: tmpFolder,
 		});
 
-		// Activate if needed
-		if (activate) {
-			const pluginInstalledPage = asDOM(pluginInstalledResponse);
-			const activateButtonHref = pluginInstalledPage
-				.querySelector('#wpbody-content .button.button-primary')!
-				.attributes.getNamedItem('href')!.value;
-			const activatePluginUrl = new URL(
-				activateButtonHref,
-				await playground.pathToInternalUrl('/wp-admin/')
-			).toString();
-			await playground.request({
-				url: activatePluginUrl,
-			});
+		await playground.unlink(tmpZipPath);
+
+		// Find extracted plugin folder name
+
+		const files = await playground.listFiles(tmpFolder);
+
+		let pluginFolderName;
+		let tmpPluginPath = '';
+
+		for (const file of files) {
+			tmpPluginPath = `${tmpFolder}/${file}`;
+			if (await playground.isDir(tmpPluginPath)) {
+				pluginFolderName = file;
+				break;
+			}
 		}
 
-		/**
-		 * Pair the site editor's nested iframe to the Service Worker.
-		 *
-		 * Without the patch below, the site editor initiates network requests that
-		 * aren't routed through the service worker. That's a known browser issue:
-		 *
-		 * * https://bugs.chromium.org/p/chromium/issues/detail?id=880768
-		 * * https://bugzilla.mozilla.org/show_bug.cgi?id=1293277
-		 * * https://github.com/w3c/ServiceWorker/issues/765
-		 *
-		 * The problem with iframes using srcDoc and src="about:blank" as they
-		 * fail to inherit the root site's service worker.
-		 *
-		 * Gutenberg loads the site editor using <iframe srcDoc="<!doctype html">
-		 * to force the standards mode and not the quirks mode:
-		 *
-		 * https://github.com/WordPress/gutenberg/pull/38855
-		 *
-		 * This commit patches the site editor to achieve the same result via
-		 * <iframe src="/doctype.html"> and a doctype.html file containing just
-		 * `<!doctype html>`. This allows the iframe to inherit the service worker
-		 * and correctly load all the css, js, fonts, images, and other assets.
-		 *
-		 * Ideally this issue would be fixed directly in Gutenberg and the patch
-		 * below would be removed.
-		 *
-		 * See https://github.com/WordPress/wordpress-playground/issues/42 for more details
-		 */
-		if (
-			(await playground.isDir(
-				'/wordpress/wp-content/plugins/gutenberg'
-			)) &&
-			!(await playground.fileExists('/wordpress/.gutenberg-patched'))
-		) {
-			await playground.writeFile('/wordpress/.gutenberg-patched', '1');
-			await updateFile(
-				playground,
-				`/wordpress/wp-content/plugins/gutenberg/build/block-editor/index.js`,
-				(contents) =>
-					contents.replace(
-						/srcDoc:("[^"]+"|[^,]+)/g,
-						'src:"/wp-includes/empty.html"'
-					)
-			);
-			await updateFile(
+		if (!pluginFolderName) {
+			throw new Error('Extracted plugin folder not found');
+		}
+
+		// Move it to site plugins
+		const rootPath = await playground.documentRoot;
+		const pluginPath = `${rootPath}/wp-content/plugins/${pluginFolderName}`;
+
+		await playground.mv(tmpPluginPath, pluginPath);
+
+		const activate = 'activate' in options ? options.activate : true;
+
+		if (activate) {
+			await activatePlugin(
 				playground,
-				`/wordpress/wp-content/plugins/gutenberg/build/block-editor/index.min.js`,
-				(contents) =>
-					contents.replace(
-						/srcDoc:("[^"]+"|[^,]+)/g,
-						'src:"/wp-includes/empty.html"'
-					)
+				{
+					pluginPath,
+				},
+				progress
 			);
 		}
+
+		await maybeApplyGutenbergPatch(playground);
 	} catch (error) {
 		console.error(
-			`Proceeding without the ${pluginZipFile.name} theme. Could not install it in wp-admin. ` +
+			`Proceeding without the ${zipNiceName} plugin. Could not install it in wp-admin. ` +
 				`The original error was: ${error}`
 		);
 		console.error(error);
 	}
 };
 
+async function maybeApplyGutenbergPatch(playground: UniversalPHP) {
+	/**
+	 * Pair the site editor's nested iframe to the Service Worker.
+	 *
+	 * Without the patch below, the site editor initiates network requests that
+	 * aren't routed through the service worker. That's a known browser issue:
+	 *
+	 * * https://bugs.chromium.org/p/chromium/issues/detail?id=880768
+	 * * https://bugzilla.mozilla.org/show_bug.cgi?id=1293277
+	 * * https://github.com/w3c/ServiceWorker/issues/765
+	 *
+	 * The problem with iframes using srcDoc and src="about:blank" as they
+	 * fail to inherit the root site's service worker.
+	 *
+	 * Gutenberg loads the site editor using <iframe srcDoc="<!doctype html">
+	 * to force the standards mode and not the quirks mode:
+	 *
+	 * https://github.com/WordPress/gutenberg/pull/38855
+	 *
+	 * This commit patches the site editor to achieve the same result via
+	 * <iframe src="/doctype.html"> and a doctype.html file containing just
+	 * `<!doctype html>`. This allows the iframe to inherit the service worker
+	 * and correctly load all the css, js, fonts, images, and other assets.
+	 *
+	 * Ideally this issue would be fixed directly in Gutenberg and the patch
+	 * below would be removed.
+	 *
+	 * See https://github.com/WordPress/wordpress-playground/issues/42 for more details
+	 */
+	if (
+		(await playground.isDir('/wordpress/wp-content/plugins/gutenberg')) &&
+		!(await playground.fileExists('/wordpress/.gutenberg-patched'))
+	) {
+		await playground.writeFile('/wordpress/.gutenberg-patched', '1');
+		await updateFile(
+			playground,
+			`/wordpress/wp-content/plugins/gutenberg/build/block-editor/index.js`,
+			(contents) =>
+				contents.replace(
+					/srcDoc:("[^"]+"|[^,]+)/g,
+					'src:"/wp-includes/empty.html"'
+				)
+		);
+		await updateFile(
+			playground,
+			`/wordpress/wp-content/plugins/gutenberg/build/block-editor/index.min.js`,
+			(contents) =>
+				contents.replace(
+					/srcDoc:("[^"]+"|[^,]+)/g,
+					'src:"/wp-includes/empty.html"'
+				)
+		);
+	}
+}
+
 async function updateFile(
 	playground: UniversalPHP,
 	path: string,

packages/wp-now/README.md

@@ -75,7 +75,7 @@ Of these, `wp-now php` currently supports the `--path=<path>`, `--php=<version>`
 
 If you are migrating from Laravel Valet, you should be aware of the differences it has with `wp-now`:
 
--   `wp-now` does not require you to install WordPress separately, create a database, connect WordPress to that database or create a user account. All of these steps are handled by the `wp now start` command and are running under the hood;
+-   `wp-now` does not require you to install WordPress separately, create a database, connect WordPress to that database or create a user account. All of these steps are handled by the `wp-now start` command and are running under the hood;
 -   `wp-now` works across all platforms (Mac, Linux, Windows);
 -   `wp-now` does not support custom domains or SSL (yet!);
 -   `wp-now` works with WordPress themes and plugins even if you don't have WordPress installed;

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

@@ -1,5 +1,5 @@
 import startWPNow, { inferMode } from '../wp-now';
 import getWpNowConfig, { CliOptions, WPNowMode, WPNowOptions } from '../config';
 import fs from 'fs-extra';
 import path from 'path';
 import {
@@ -19,6 +19,14 @@
 
 const exampleDir = __dirname + '/mode-examples';
 
+async function downloadWithTimer(name, fn) {
+	console.log(`Downloading ${name}...`);
+	console.time(name);
+	await fn();
+	console.log(`${name} downloaded.`);
+	console.timeEnd(name);
+}
+
 // Options
 test('getWpNowConfig with default options', async () => {
 	const rawOptions: CliOptions = {
@@ -176,16 +184,10 @@
 	 */
 	beforeAll(async () => {
 		fs.rmSync(getWpNowTmpPath(), { recursive: true, force: true });
-		console.log('Downloading WordPress...');
-		console.time('wordpress');
-		await downloadWordPress();
-		console.log('WordPress downloaded.');
-		console.timeEnd('wordpress');
-		console.log('Downloading SQLite...');
-		console.time('sqlite');
-		await downloadSqliteIntegrationPlugin();
-		console.log('SQLite downloaded.');
-		console.timeEnd('sqlite');
+		await Promise.all([
+			downloadWithTimer('wordpresss', downloadWordPress),
+			downloadWithTimer('sqlite', downloadSqliteIntegrationPlugin),
+		]);
 	});
 
 	/**

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

@@ -88,9 +88,11 @@ export default async function startWPNow(
 		});
 		return { php, phpInstances, options };
 	}
-	await downloadWordPress(options.wordPressVersion);
-	await downloadSqliteIntegrationPlugin();
-	await downloadMuPlugins();
+	await Promise.all([
+		downloadWordPress(options.wordPressVersion),
+		downloadSqliteIntegrationPlugin(),
+		downloadMuPlugins(),
+	]);
 	const isFirstTimeProject = !fs.existsSync(options.wpContentPath);
 	await applyToInstances(phpInstances, async (_php) => {
 		switch (options.mode) {