Renamed the param opfs-browser from Query API, to browser (#651)

## What is this PR doing? Changed the param 'opfs-browser' to 'browser' as discussed at: #636 Kept the old names working, for now. ## What problem does it solve? Renamed the opfs-browser parameter to simply browser, to make it easier for users to remember.
WordPress · Oct 10, 2023 · 3f9be37 · 3f9be37
1 parent 4d9d93f
commit 3f9be37
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 16 deletions.
diff --git a/packages/docs/site/docs/08-query-api/01-index.md b/packages/docs/site/docs/08-query-api/01-index.md
@@ -32,7 +32,7 @@ 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                                                                                                                                                                                                                                                                                   |
 | `login`        | `1`           | Logs the user in as an admin                                                                                                                                                                                                                                                                                                                                   |
 | `gutenberg-pr` |               | Loads the specified Gutenberg Pull Request                                                                                                                                                                                                                                                                                                                     |
-| `storage`      |               | Selects the storage for Playground: `temporary` gets erased on page refresh, `opfs-browser` is stored in the browser, and `opfs-host` is stored in the selected directory on a local computer. The last two protect the user from accidentally losing their work upon page refresh.                                                                            |
+| `storage`      |               | Selects the storage for Playground: `temporary` gets erased on page refresh, `browser` is stored in the browser, and `opfs-host` is stored in the selected directory on a device. The last two protect the user from accidentally losing their work upon page refresh.                                                                            |
 
 For example, the following code embeds a Playground with a preinstalled Gutenberg plugin, and opens the post editor:
 

diff --git a/packages/playground/remote/src/lib/worker-thread.ts b/packages/playground/remote/src/lib/worker-thread.ts
@@ -55,9 +55,9 @@ let virtualOpfsDir: FileSystemDirectoryHandle | undefined;
 let lastOpfsDir: FileSystemDirectoryHandle | undefined;
 let wordPressAvailableInOPFS = false;
 if (
-	startupOptions.storage === 'opfs-browser' &&
-	// @ts-ignore
-	typeof navigator?.storage?.getDirectory !== 'undefined'
+  (startupOptions.storage === 'opfs-browser' || startupOptions.storage === 'browser') &&
+  // @ts-ignore
+  typeof navigator?.storage?.getDirectory !== 'undefined'
 ) {
 	virtualOpfsRoot = await navigator.storage.getDirectory();
 	virtualOpfsDir = await virtualOpfsRoot.getDirectoryHandle('wordpress', {

diff --git a/packages/playground/website/src/components/playground-configuration-group/form.tsx b/packages/playground/website/src/components/playground-configuration-group/form.tsx
@@ -124,14 +124,14 @@ export function PlaygroundConfigurationForm({
 						<input
 							type="radio"
 							name="storage"
-							value="opfs-browser"
-							id="storage-opfs-browser"
+							value="browser"
+							id="storage-browser"
 							className={forms.radioInput}
 							onChange={handleStorageChange}
-							checked={storage === 'opfs-browser'}
+							checked={storage === 'browser'}
 						/>
 						<label
-							htmlFor="storage-opfs-browser"
+							htmlFor="storage-browser"
 							className={forms.radioLabel}
 						>
 							Persistent: stored in this browser

diff --git a/packages/playground/website/src/components/playground-configuration-group/index.tsx b/packages/playground/website/src/components/playground-configuration-group/index.tsx
@@ -144,7 +144,7 @@ export default function PlaygroundConfigurationGroup({
 			});
 			await playground.goTo('/');
 
-			// Read current querystring and replace storage=opfs-browser with storage=opfs-host.
+			// Read current querystring and replace storage=browser with storage=opfs-host.
 			const url = new URL(window.location.href);
 			url.searchParams.set('storage', 'opfs-host');
 			window.history.pushState({}, '', url.toString());
@@ -157,7 +157,7 @@ export default function PlaygroundConfigurationGroup({
 
 	async function handleSubmit(config: PlaygroundConfiguration) {
 		const playground = await playgroundRef.current!.promise;
-		if (config.resetSite && config.storage === 'opfs-browser') {
+		if (config.resetSite && (config.storage === 'opfs-browser' || config.storage === 'browser')) {
 			if (
 				!window.confirm(
 					'This will wipe out all stored data and start a new site. Do you want to proceed?'
@@ -176,14 +176,14 @@ export default function PlaygroundConfigurationGroup({
 				WP {runningWp || currentConfiguration.wp} {' - '}
 				{currentConfiguration.storage === 'opfs-host'
 					? `Local (${dirName})`
-					: currentConfiguration.storage === 'opfs-browser'
+					: currentConfiguration.storage === 'opfs-browser' || currentConfiguration.storage === 'browser'
 					? 'Persistent'
 					: '⚠️ Temporary'}
 			</Button>
 			{currentConfiguration.storage === 'opfs-host' ? (
 				<SyncLocalFilesButton />
 			) : null}
-			{currentConfiguration.storage === 'opfs-browser' ? (
+			{currentConfiguration.storage === 'opfs-browser' || currentConfiguration.storage === 'browser' ? (
 				<StartOverButton />
 			) : null}
 			{isResumeLastDirOpen ? (

diff --git a/...nd/website/src/components/playground-configuration-group/reload-with-new-configuration.ts b/...nd/website/src/components/playground-configuration-group/reload-with-new-configuration.ts
@@ -5,8 +5,8 @@ export async function reloadWithNewConfiguration(
 	playground: PlaygroundClient,
 	config: PlaygroundConfiguration
 ) {
-	if (config.resetSite && config.storage === 'opfs-browser') {
-		await playground?.resetVirtualOpfs();
+	if (config.resetSite && (config.storage === 'opfs-browser' || config.storage === 'browser')) {
+  		await playground?.resetVirtualOpfs();
 	}
 
 	const url = new URL(window.location.toString());

diff --git a/packages/playground/website/src/lib/hooks.ts b/packages/playground/website/src/lib/hooks.ts
@@ -5,7 +5,7 @@ import { buildVersion } from './config';
 
 interface UsePlaygroundOptions {
 	blueprint?: Blueprint;
-	storage?: 'opfs-host' | 'opfs-browser' | 'temporary';
+	storage?: 'opfs-host' | 'opfs-browser' | 'browser' | 'temporary';
 }
 export function usePlayground({ blueprint, storage }: UsePlaygroundOptions) {
 	const iframeRef = useRef<HTMLIFrameElement>(null);

diff --git a/packages/playground/website/src/types.ts b/packages/playground/website/src/types.ts
@@ -1,2 +1,2 @@
-export const StorageTypes = ['opfs-browser', 'temporary', 'opfs-host'] as const;
+export const StorageTypes = ['browser', 'temporary', 'opfs-host', 'opfs-browser'] as const;
 export type StorageType = (typeof StorageTypes)[number];