[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,71 @@
+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 requestedSiteSlug = query.get('site-slug');
+	const storage = query.get('storage')! as SiteStorageType;
+
+	useEffect(() => {
+		async function ensureSiteIsSelected() {
+			if (activeSite && activeSite.slug === requestedSiteSlug) {
+				if (activeSite.storage !== 'opfs') {
+					alert(
+						'Site slugs only work with browser storage. The site slug will be ignored.'
+					);
+				}
+				return;
+			}
+
+			console.log({ requestedSiteSlug });
+			if (requestedSiteSlug !== 'create') {
+				const siteInfo = await getSiteInfoBySlug(requestedSiteSlug!);
+				console.log({ siteInfo });
+				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();
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [urlString, requestedSiteSlug, 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

@@ -2,33 +2,24 @@ import css from './style.module.css';
 
 import { SiteView } from '../site-view/site-view';
 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 { 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);
+export function Layout() {
+	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,
@@ -51,10 +42,7 @@ export function Layout({
 				unmountOnExit
 			>
 				<div className={css.sidebar}>
-					<SiteManager
-						onSiteChange={setSiteSlug}
-						siteViewRef={siteViewRef}
-					/>
+					<SiteManager />
 				</div>
 			</CSSTransition>
 			<div className={css.siteView}>
@@ -65,13 +53,9 @@ export function Layout({
 					/>
 				)}
 				<SiteView
-					siteViewRef={siteViewRef}
 					blueprint={blueprint}
 					currentConfiguration={currentConfiguration}
 					storage={storage}
-					playground={playground}
-					url={url}
-					iframeRef={iframeRef}
 					className={css.siteViewContent}
 					hideToolbar={path?.startsWith('/manager')}
 				/>