Blueprints sidebar section for single-click Playground presets

package.json

@@ -60,6 +60,7 @@
 		"@types/ini": "4.1.0",
 		"@types/react-transition-group": "4.4.11",
 		"@types/wicg-file-system-access": "2023.10.5",
+		"@wordpress/dataviews": "4.4.0",
 		"ajv": "8.12.0",
 		"axios": "1.6.1",
 		"classnames": "^2.3.2",
@@ -72,11 +73,13 @@
 		"octokit-plugin-create-pull-request": "5.1.1",
 		"react": "^18.2.25",
 		"react-dom": "^18.2.25",
+		"react-hook-form": "7.53.0",
 		"react-modal": "^3.16.1",
 		"react-redux": "8.1.3",
 		"react-transition-group": "4.4.5",
 		"unzipper": "0.10.11",
 		"vite-plugin-api": "1.0.4",
+		"wouter": "3.3.5",
 		"xterm": "5.3.0",
 		"xterm-addon-fit": "0.8.0",
 		"yargs": "17.7.2"

packages/docs/site/docs/developers/06-apis/query-api/01-index.md

@@ -35,10 +35,9 @@ You can go ahead and try it out. The Playground will automatically install the t
 | `lazy`                 |                       | Defer loading the Playground assets until someone clicks on the "Run" button. Does not accept any values. If `lazy` is added as a URL parameter, loading will be deferred.                                                                                                                                                                                                       |
 | `login`                | `yes`                 | Log the user in as an admin. Accepts `yes` or `no`.                                                                                                                                                                                                                                                                                                                              |
 | `multisite`            | `no`                  | Enables the WordPress multisite mode. Accepts `yes` or `no`.                                                                                                                                                                                                                                                                                                                     |
-| `storage`              | `none`                | Selects the storage for Playground: `none` gets erased on page refresh, `browser` is stored in the browser, and `device` is stored in the selected directory on a device. The last two protect the user from accidentally losing their work upon page refresh.                                                                                                                   |
 | `import-site`          |                       | Imports site files and database from a ZIP file specified by a URL.                                                                                                                                                                                                                                                                                                              |
 | `import-wxr`           |                       | Imports site content from a WXR file specified by a URL. It uses the WordPress Importer plugin, so the default admin user must be logged in.                                                                                                                                                                                                                                     |
-| `site-slug`            |                       | Selects which site to load from browser storage. This must be used in combination with `storage=browser`.                                                                                                                                                                                                                                                                        |
+| `site-slug`            |                       | Selects which site to load from browser storage.                                                                                                                                                                                                                                                                                                                                 |
 | `language`             | `en_US`               | Sets the locale for the WordPress instance. This must be used in combination with `networking=yes` otherwise WordPress won't be able to download translations.                                                                                                                                                                                                                   |
 
 For example, the following code embeds a Playground with a preinstalled Gutenberg plugin and opens the post editor:

packages/docs/site/docs/developers/24-limitations/01-index.md

@@ -16,7 +16,7 @@ Playground [disables network connections](../../blueprints/03-data-format.md#fea
 
 ### Temporary by design
 
-As Playground [streams rather than serves](../../main/about/index.md#streamed-not-served) WordPress, all database changes and uploads will be gone when you refresh the page. To avoid losing your work, either [export your work](../../main/quick-start-guide.md#save-your-site) before or enable storage in the browser/device via the [Query API](/developers/apis/query-api#available-options) or the UI.
+As Playground [streams rather than serves](../../main/about/index.md#streamed-not-served) WordPress, all database changes and uploads will be gone when you refresh the page. To avoid losing your work, either [export your work](../../main/quick-start-guide.md#save-your-site) before or enable storage in the browser/device via the "Save" button in the UI.
 
 ## When developing with Playground
 

packages/docs/site/docs/main/web-instance.md

@@ -25,7 +25,6 @@ From the Playground website there are also available some toolbars to customize
 
 The options available from the "Customize Playground" window correpond to the following [Query API options](/developers/apis/query-api#available-options):
 
--   `storage`
 -   `php`
 -   `php-extension-bundle`
 -   `networking`

packages/php-wasm/web/src/lib/directory-handle-mount.ts

@@ -188,15 +188,44 @@ export async function copyMemfsToOpfs(
 	}
 	await mirrorMemfsDirectoryinOpfs(memfsRoot, opfsRoot);
 
+	// @TODO: Understand why Safari is failing when writing many files concurrently
+	// with createSyncAccessHandle.
+	// Safari doesn't support createWritable as of 2024-09-18,
+	// and we are getting errors in Safari while using createSyncAccessHandle() in parallel.
+	// But in testing, Safari's createSyncAccessHandle() only begins to when
+	// writing ~125 files concurrently. So for now, we are limiting Safari to 100 concurrent writes
+	// to hopefully give us a safe margin.
+	// @ts-ignore -- Safari doesn't support createWritable as of 2024-09-18.
+	const maxConcurrentWrites = FileSystemFileHandle.prototype.createWritable
+		? Infinity
+		: 100;
+
 	// Now let's create all the required files in OPFS. This is quite slow
 	// so we report progress.
 	let i = 0;
-	const filesCreated = filesToCreate.map(([opfsDir, memfsPath, entryName]) =>
-		overwriteOpfsFile(opfsDir, entryName, FS, memfsPath).then(() => {
+	const outstandingWrites = new Set<Promise<void>>();
+	for (const [opfsDir, memfsPath, entryName] of filesToCreate) {
+		const promiseToCreateFile = overwriteOpfsFile(
+			opfsDir,
+			entryName,
+			FS,
+			memfsPath
+		).then(() => {
+			outstandingWrites.delete(promiseToCreateFile);
 			onProgress?.({ files: ++i, total: filesToCreate.length });
-		})
-	);
-	await Promise.all(filesCreated);
+		});
+
+		outstandingWrites.add(promiseToCreateFile);
+
+		if (outstandingWrites.size >= maxConcurrentWrites) {
+			// We should be under max concurrency when any write completes.
+			await Promise.race(outstandingWrites);
+		}
+	}
+
+	if (outstandingWrites.size > 0) {
+		await Promise.all(outstandingWrites);
+	}
 }
 
 function isMemfsDir(FS: Emscripten.RootFS, path: string) {

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

@@ -85,6 +85,9 @@ export function compileBlueprint(
 		onStepCompleted = () => {},
 	}: CompileBlueprintOptions = {}
 ): CompiledBlueprint {
+	// Deep clone the blueprint to avoid mutating the input
+	blueprint = structuredClone(blueprint);
+
 	blueprint = {
 		...blueprint,
 		steps: (blueprint.steps || [])
@@ -158,7 +161,10 @@ export function compileBlueprint(
 	// Default to the "kitchen sink" PHP extensions bundle if no
 	// other bundles are specified.
 	if (blueprint.phpExtensionBundles.length === 0) {
-		blueprint.phpExtensionBundles.push('kitchen-sink');
+		blueprint.phpExtensionBundles = [
+			...blueprint.phpExtensionBundles,
+			'kitchen-sink',
+		];
 	}
 
 	/**

packages/playground/client/src/index.ts

@@ -66,7 +66,6 @@ export interface StartPlaygroundOptions {
 	 * @returns
 	 */
 	onBeforeBlueprint?: () => Promise<void>;
-	siteSlug?: string;
 	mounts?: Array<MountDescriptor>;
 	shouldInstallWordPress?: boolean;
 }

packages/playground/remote/service-worker.ts

@@ -86,12 +86,47 @@ self.addEventListener('fetch', (event) => {
 		return;
 	}
 
+	let requestPromise = Promise.resolve(event.request);
+	if (url.pathname.startsWith('/proxy/')) {
+		const segments = url.pathname.split('/');
+		const command = segments[2];
+		switch (command) {
+			case 'load-cached-when-offline': {
+				const proxiedUrl =
+					url.pathname.substring(
+						'/proxy/'.length + command.length + 1
+					) +
+					(url?.search ? '?' + url.search : '') +
+					(url?.hash ? '#' + url.hash : '');
+				requestPromise = requestPromise.then((request) => {
+					return cloneRequest(request, {
+						url: proxiedUrl,
+					});
+				});
+				const isOffline = !navigator.onLine;
+				event.respondWith(
+					Promise.all([cachePromise, requestPromise]).then(
+						([cache, request]) =>
+							// Always save the response to cache, but only load
+							// it from the cache when we're offline.
+							cache.cachedFetch(request, {
+								loadFromCache: isOffline,
+							})
+					)
+				);
+				return;
+			}
+		}
+	}
+
 	/**
 	 * Respond with cached assets if available.
 	 * If the asset is not cached, fetch it from the network and cache it.
 	 */
 	event.respondWith(
-		cachePromise.then((cache) => cache.cachedFetch(event.request))
+		Promise.all([cachePromise, requestPromise]).then(([cache, request]) =>
+			cache.cachedFetch(request)
+		)
 	);
 });
 

packages/playground/remote/src/lib/offline-mode-cache.ts

@@ -32,12 +32,22 @@ export class OfflineModeCache {
 		return Promise.all(oldKeys.map((key) => caches.delete(key)));
 	}
 
-	async cachedFetch(request: Request): Promise<Response> {
+	async cachedFetch(
+		request: Request,
+		{
+			loadFromCache = true,
+		}: {
+			loadFromCache?: boolean;
+		} = {}
+	): Promise<Response> {
 		if (!this.shouldCacheUrl(new URL(request.url))) {
 			return await fetch(request);
 		}
 
-		let response = await this.cache.match(request, { ignoreSearch: true });
+		let response = undefined;
+		if (loadFromCache) {
+			response = await this.cache.match(request, { ignoreSearch: true });
+		}
 		if (!response) {
 			response = await fetch(request);
 			if (response.ok) {

packages/playground/storage/src/lib/browser-fs.ts

@@ -16,7 +16,7 @@ export async function opfsPathToDirectoryHandle(
 	const parts = opfsPath.split('/').filter((p) => p.length > 0);
 	let handle = await navigator.storage.getDirectory();
 	for (const part of parts) {
-		handle = await handle.getDirectoryHandle(part);
+		handle = await handle.getDirectoryHandle(part, { create: true });
 	}
 	return handle;
 }

packages/playground/website/cypress/e2e/remote-assets.cy.ts

@@ -2,7 +2,7 @@ describe('Remote Assets', () => {
 	const testedStorageOptions = [
 		'none',
 		// TODO: Re-enable this option once the tests are more stable
-		//'browser'
+		//'opfs'
 	];
 
 	testedStorageOptions.forEach((storage) => {
@@ -15,7 +15,7 @@ describe('Remote Assets', () => {
 			cy.visit(`/?storage=${storage}#${blueprint}`);
 			runAssertions();
 
-			if (storage === 'browser') {
+			if (storage === 'opfs') {
 				// Reload and re-assert to test when loading from browser storage
 				cy.reload();
 				runAssertions();

packages/playground/website/index.html

@@ -43,7 +43,7 @@
 		</script>
 	</head>
 	<body>
-		<div id="root">
+		<main id="root">
 			<script>
 				const query = new URLSearchParams(window.location.search);
 				const shouldLazyLoadPlayground =
@@ -68,7 +68,7 @@
 					root.appendChild(initiator);
 				}
 			</script>
-		</div>
+		</main>
 		<script type="module">
 			if (!shouldLazyLoadPlayground) {
 				import('./src/main');

packages/playground/website/src/components/browser-chrome/index.tsx

@@ -1,104 +1,68 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import css from './style.module.css';
 import AddressBar from '../address-bar';
-import { close } from '@wordpress/icons';
 import classNames from 'classnames';
 import { OpenSiteManagerButton } from '../open-site-manager-button';
+import {
+	useAppSelector,
+	getActiveClientInfo,
+	useActiveSite,
+} from '../../lib/state/redux/store';
+import { SyncLocalFilesButton } from '../sync-local-files-button';
 
 interface BrowserChromeProps {
 	children?: React.ReactNode;
-	toolbarButtons?: Array<React.ReactElement | false | null>;
-	url?: string;
-	showAddressBar?: boolean;
-	onUrlChange?: (url: string) => void;
 	hideToolbar?: boolean;
 	className?: string;
 }
 
 export default function BrowserChrome({
 	children,
-	url,
-	onUrlChange,
-	showAddressBar = true,
-	toolbarButtons,
 	hideToolbar,
 	className,
 }: BrowserChromeProps) {
+	const clientInfo = useAppSelector(getActiveClientInfo);
+	const activeSite = useActiveSite();
+	const showAddressBar = !!clientInfo;
+	const url = clientInfo?.url;
 	const addressBarClass = classNames(css.addressBarSlot, {
 		[css.isHidden]: !showAddressBar,
 	});
 	const wrapperClass = classNames(css.wrapper, css.hasFullSizeWindow);
 
-	const [noticeHidden, setNoticeHidden] = useState(
-		document.cookie.includes('hideExperimentalNotice=true')
-	);
-
-	const hideNotice = () => {
-		document.cookie = 'hideExperimentalNotice=true';
-		setNoticeHidden(true);
-	};
-	useEffect(() => {
-		const hideNoticeTimeout = setTimeout(hideNotice, 20000);
-		return () => {
-			clearTimeout(hideNoticeTimeout);
-		};
-	}, []);
-
-	const experimentalNoticeClass = classNames(css.experimentalNotice, {
-		[css.isHidden]: noticeHidden,
-	});
-
-	/**
-	 * Temporary feature flag to enable the site manager
-	 * while using browser storage.
-	 *
-	 * TODO: Remove this once the site manager supports all storage options.
-	 */
-	const query = new URLSearchParams(window.location.search);
-	const showSiteManager = query.get('storage') === 'browser';
-
 	return (
 		<div
 			className={`${wrapperClass} ${className}`}
 			data-cy="simulated-browser"
 		>
 			<div className={`${css.window} browser-chrome-window`}>
 				<header
-					className={`${css.toolbar} ${
-						showSiteManager ? css.hasSiteManager : ''
-					} ${hideToolbar ? css.toolbarHidden : ''}`}
+					className={`
+						${css.toolbar}
+						${hideToolbar ? css.toolbarHidden : ''}
+					`}
 					aria-label="Playground toolbar"
 				>
 					<div className={css.windowControls}>
-						{showSiteManager && <OpenSiteManagerButton />}
-						{!showSiteManager && (
-							<>
-								<div
-									className={`${css.windowControl} ${css.isNeutral}`}
-								></div>
-								<div
-									className={`${css.windowControl} ${css.isNeutral}`}
-								></div>
-								<div
-									className={`${css.windowControl} ${css.isNeutral}`}
-								></div>
-							</>
-						)}
+						<OpenSiteManagerButton />
 					</div>
 
 					<div className={addressBarClass}>
-						<AddressBar url={url} onUpdate={onUrlChange} />
+						<AddressBar
+							url={url}
+							onUpdate={(newUrl) =>
+								clientInfo?.client.goTo(newUrl)
+							}
+						/>
 					</div>
 
-					<div className={css.toolbarButtons}>{toolbarButtons}</div>
+					<div className={css.toolbarButtons}>
+						{activeSite?.metadata?.storage === 'local-fs' ? (
+							<SyncLocalFilesButton />
+						) : null}
+					</div>
 				</header>
 				<div className={css.content}>{children}</div>
-				<div className={experimentalNoticeClass} onClick={hideNotice}>
-					{close}
-					This is a cool fun experimental WordPress running in your
-					browser :) All your changes are private and gone after a
-					page refresh.
-				</div>
 			</div>
 		</div>
 	);