[UX] Stored Playgrounds (no more data loss), multiple Playgrounds, UI WebApp Redesign

package.json

@@ -77,6 +77,7 @@
 		"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/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/src/components/browser-chrome/index.tsx

@@ -55,7 +55,7 @@ export default function BrowserChrome({
 	 * TODO: Remove this once the site manager supports all storage options.
 	 */
 	const query = new URLSearchParams(window.location.search);
-	const showSiteManager = query.get('storage') === 'browser';
+	const showSiteManager = query.get('storage') === 'opfs';
 
 	return (
 		<div

packages/playground/website/src/components/ensure-playground-site/ensure-playground-site-is-selected.tsx

@@ -0,0 +1,63 @@
+import { useEffect } from 'react';
+import { resolveBlueprint } from '../../lib/resolve-blueprint';
+import { useCurrentUrl, useSearchParams } from '../../lib/router-hooks';
+import {
+	addSite,
+	setActiveSite,
+	useAppDispatch,
+	useAppSelector,
+} from '../../lib/redux-store';
+import {
+	createNewSiteInfo,
+	getSiteInfoBySlug,
+	SiteStorageType,
+} from '../../lib/site-storage';
+
+/**
+ * Ensures the redux store always has an activeSite value.
+ * It uses the URL as the source of truth and assumes the
+ * `site-slug` and `storage` query args are always set.
+ */
+export function EnsurePlaygroundSiteIsSelected({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	const activeSite = useAppSelector((state) => state.activeSite);
+	const dispatch = useAppDispatch();
+	const [query] = useSearchParams();
+	const urlString = useCurrentUrl();
+	const siteSlug = query.get('site-slug');
+	const storage = query.get('storage')! as SiteStorageType;
+
+	useEffect(() => {
+		async function ensureSiteIsSelected() {
+			if (activeSite) {
+				return;
+			}
+
+			if (siteSlug !== 'create') {
+				const siteInfo = await getSiteInfoBySlug(siteSlug!);
+				dispatch(setActiveSite(siteInfo!));
+				return;
+			}
+
+			const url = new URL(urlString);
+			const blueprint = await resolveBlueprint(url);
+			const newSiteInfo = createNewSiteInfo({
+				originalBlueprint: blueprint,
+				storage: storage,
+			});
+			await dispatch(addSite(newSiteInfo));
+			dispatch(setActiveSite(newSiteInfo!));
+		}
+
+		ensureSiteIsSelected();
+	}, [urlString, activeSite, siteSlug, dispatch]);
+
+	if (!activeSite) {
+		return null;
+	}
+
+	return children;
+}

packages/playground/website/src/components/ensure-playground-site/ensure-playground-site-slug.tsx

@@ -0,0 +1,78 @@
+import { useEffect } from 'react';
+import { useLocation } from 'wouter';
+import { urlContainsSiteConfiguration } from '../../lib/resolve-blueprint';
+import { listSites, SiteStorageTypes } from '../../lib/site-storage';
+import { useCurrentUrl, useSearchParams } from '../../lib/router-hooks';
+
+// @ts-ignore
+const opfsSupported = typeof navigator?.storage?.getDirectory !== 'undefined';
+
+// Treats the URL as the source of truth. Ensures we're always at a URL
+// that contains a site slug.
+export function EnsurePlaygroundSiteSlug({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	const [query, setQuery] = useSearchParams();
+	const siteSlug = query.get('site-slug');
+	const [, setLocation] = useLocation();
+	const urlString = useCurrentUrl();
+
+	// Ensure the site slug is always present in the URL.
+	useEffect(() => {
+		/*
+		 * @TODO: Change the entire mental model of the `storage` parameter.
+		 *        For example, `storage=none` + an existing site slug makes
+		 *        no sense. We don't load where to load the site from, e.g.
+		 *        should it come from OPFS? Local directory? Network? We could
+		 * 		  separate the "load from" and "save" to operations, but they
+		 *        make more sense as user interactions than URL parameters.
+		 *        Perhaps we only need a single `load-site-from` URL parameter?
+		 */
+		// Ensure the optional storage query arg points to a valid storage type.
+		const storage = query.get('storage');
+		if (
+			storage &&
+			(!opfsSupported || !SiteStorageTypes.includes(storage as any))
+		) {
+			setQuery({ storage: 'none' });
+			return;
+		}
+
+		async function ensureSiteSlug() {
+			// @TODO: Restrict `create` as a system slug that cannot be assigned to a user
+			//        site.
+			if (siteSlug) {
+				if (!storage) {
+					setQuery({ storage: opfsSupported ? 'opfs' : 'none' });
+				}
+				return;
+			}
+
+			if (urlContainsSiteConfiguration(new URL(urlString))) {
+				if (!storage || storage === 'none') {
+					setQuery({ 'site-slug': 'create', storage: 'none' });
+				} else {
+					setQuery({ 'site-slug': 'create' });
+				}
+			} else {
+				// @TODO: Sort sites by most recently used
+				const sites = await listSites();
+				if (sites.length > 0) {
+					setQuery({ 'site-slug': sites[0].slug });
+				} else {
+					setQuery({ 'site-slug': 'create' });
+				}
+			}
+		}
+		ensureSiteSlug();
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [siteSlug, setLocation]);
+
+	if (!siteSlug || (siteSlug !== 'create' && !query.get('storage'))) {
+		return null;
+	}
+
+	return children;
+}

packages/playground/website/src/components/ensure-playground-site/index.tsx

@@ -0,0 +1,16 @@
+import { EnsurePlaygroundSiteIsSelected } from './ensure-playground-site-is-selected';
+import { EnsurePlaygroundSiteSlug } from './ensure-playground-site-slug';
+
+export function EnsurePlaygroundSite({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	return (
+		<EnsurePlaygroundSiteSlug>
+			<EnsurePlaygroundSiteIsSelected>
+				{children}
+			</EnsurePlaygroundSiteIsSelected>
+		</EnsurePlaygroundSiteSlug>
+	);
+}

packages/playground/website/src/components/layout/index.tsx

@@ -5,31 +5,34 @@ import { SiteManager } from '../site-manager';
 import { useRef } from '@wordpress/element';
 import { CSSTransition } from 'react-transition-group';
 import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
-import { Blueprint, PlaygroundClient } from '@wp-playground/client';
-import { StorageType } from '../../types';
+import { PlaygroundClient } from '@wp-playground/client';
+import { useAppSelector } from '../../lib/redux-store';
 import { PlaygroundConfiguration } from '../playground-configuration-group/form';
 
 export function Layout({
 	playground,
 	url,
 	iframeRef,
-	blueprint,
-	storage,
-	currentConfiguration,
-	siteSlug,
-	setSiteSlug,
 }: {
 	playground: PlaygroundClient;
 	url: string;
 	iframeRef: React.RefObject<HTMLIFrameElement>;
-	blueprint: Blueprint;
-	storage: StorageType;
-	currentConfiguration: PlaygroundConfiguration;
-	siteSlug: string | undefined;
-	setSiteSlug: (siteSlug?: string) => void;
 }) {
 	const siteViewRef = useRef<HTMLDivElement>(null);
 
+	const activeSite = useAppSelector((state) => state.activeSite!);
+	const blueprint = activeSite.originalBlueprint || {};
+	const storage = activeSite.storage;
+	// @TODO: Use SiteMetadata directly
+	const currentConfiguration: PlaygroundConfiguration = {
+		storage: storage ?? 'none',
+		wp: activeSite.wpVersion,
+		php: activeSite.phpVersion,
+		withExtensions: activeSite.phpExtensionBundle === 'kitchen-sink',
+		withNetworking: blueprint?.features?.networking || false,
+		resetSite: false,
+	};
+
 	const {
 		goTo,
 		location: { path },
@@ -51,10 +54,7 @@ export function Layout({
 				unmountOnExit
 			>
 				<div className={css.sidebar}>
-					<SiteManager
-						onSiteChange={setSiteSlug}
-						siteViewRef={siteViewRef}
-					/>
+					<SiteManager siteViewRef={siteViewRef} />
 				</div>
 			</CSSTransition>
 			<div className={css.siteView}>

packages/playground/website/src/components/playground-configuration-group/form.tsx

@@ -5,19 +5,19 @@ import {
 	SupportedPHPVersion,
 	SupportedPHPVersionsList,
 } from '@php-wasm/universal';
-import { StorageType } from '../../types';
 import { OPFSButton } from './opfs-button';
 import Button from '../button';
 import { OfflineNotice } from '../offline-notice';
 import { PlaygroundReduxState } from '../../lib/redux-store';
 import { useSelector } from 'react-redux';
+import { SiteStorageType } from '../../lib/site-storage';
 
 export interface PlaygroundConfiguration {
 	wp: string;
 	php: SupportedPHPVersion;
 	withExtensions: boolean;
 	withNetworking: boolean;
-	storage: StorageType;
+	storage: SiteStorageType;
 	resetSite: boolean;
 }
 
@@ -46,7 +46,9 @@ export function PlaygroundConfigurationForm({
 	const offline = useSelector((state: PlaygroundReduxState) => state.offline);
 
 	const [php, setPhp] = useState(initialData.php);
-	const [storage, setStorage] = useState<StorageType>(initialData.storage);
+	const [storage, setStorage] = useState<SiteStorageType>(
+		initialData.storage
+	);
 	const [withExtensions, setWithExtensions] = useState<boolean>(
 		initialData.withExtensions
 	);
@@ -57,7 +59,7 @@ export function PlaygroundConfigurationForm({
 	const handleStorageChange = async (
 		event: React.ChangeEvent<HTMLInputElement>
 	) => {
-		setStorage(event.target.value as any as StorageType);
+		setStorage(event.target.value as any as SiteStorageType);
 	};
 
 	const [resetSite, setResetSite] = useState(initialData.resetSite);
@@ -137,7 +139,7 @@ export function PlaygroundConfigurationForm({
 							id="storage-browser"
 							className={forms.radioInput}
 							onChange={handleStorageChange}
-							checked={storage === 'browser'}
+							checked={storage === 'opfs'}
 						/>
 						<label
 							htmlFor="storage-browser"
@@ -146,7 +148,7 @@ export function PlaygroundConfigurationForm({
 							Browser: stored in this browser.
 						</label>
 					</li>
-					{storage === 'browser' ? (
+					{storage === 'opfs' ? (
 						<li
 							style={{ marginLeft: 40 }}
 							className={resetSite ? css.danger : ''}
@@ -188,7 +190,7 @@ export function PlaygroundConfigurationForm({
 									: `${forms.radioInput} ${forms.notAvailable}`
 							}
 							onChange={handleStorageChange}
-							checked={storage === 'device'}
+							checked={storage === 'local-fs'}
 							disabled={!liveDirectoryAvailable}
 						/>
 						<label htmlFor="device" className={forms.radioLabel}>
@@ -207,7 +209,7 @@ export function PlaygroundConfigurationForm({
 							)}
 						</label>
 					</li>
-					{storage === 'device' ? (
+					{storage === 'local-fs' ? (
 						<li>
 							<div>
 								<p>
@@ -252,7 +254,7 @@ export function PlaygroundConfigurationForm({
 					) : null}
 				</ul>
 			</div>
-			{storage !== 'device' ? (
+			{storage !== 'local-fs' ? (
 				<>
 					<div
 						className={`${forms.formGroup} ${forms.formGroupLinear}`}