From 774892a3c6f50e3c5fa166760f8531fb5dc42b70 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Wed, 16 Oct 2024 22:44:10 +0100 Subject: [PATCH 1/2] [Blueprints] Make landingPage handling runtime-specific and move it to PlaygroundViewport Goals: * Enable using ?url=/wp-admin/ on sites stored in OPFS * Don't rely on `goTo` at the Blueprints library level as that method is browser-specific. It sets iframe.src. It is not available in, say, Playground CLI or Studio. Those would have to implement their own ways of handling the landing page. ## Remaining work * Add E2E tests ## Testing instructions For temporary sites: * Go to http://localhost:5400/website-server/?url=/wp-admin/ * Confirm you're redirected to WP admin adn the `url` parameter is still present in the address bar For stored sites: * Create a local Playground site * Store it in OPFS * Add `?url=/wp-admin/` and visit it * Confirm you're redirected to WP Admin and the `url` parameter is removed from the address bar --- .../playground/blueprints/src/lib/compile.ts | 12 -------- .../ensure-playground-site-is-selected.tsx | 2 +- .../components/playground-viewport/index.tsx | 30 ++++++++++++++++++- .../website/src/lib/state/redux/store.ts | 11 +++++-- 4 files changed, 39 insertions(+), 16 deletions(-) diff --git a/packages/playground/blueprints/src/lib/compile.ts b/packages/playground/blueprints/src/lib/compile.ts index 30c31a9cbd..311789d360 100644 --- a/packages/playground/blueprints/src/lib/compile.ts +++ b/packages/playground/blueprints/src/lib/compile.ts @@ -305,18 +305,6 @@ export function compileBlueprint( } } } finally { - try { - await (playground as any).goTo( - blueprint.landingPage || '/' - ); - } catch (e) { - /* - * PHP exposes no goTo method. - * We can't use `goto` in playground here, - * because it may be a Comlink proxy object - * with no such method. - */ - } progress.finish(); } }, diff --git a/packages/playground/website/src/components/ensure-playground-site/ensure-playground-site-is-selected.tsx b/packages/playground/website/src/components/ensure-playground-site/ensure-playground-site-is-selected.tsx index 5824781ef7..c059688f37 100644 --- a/packages/playground/website/src/components/ensure-playground-site/ensure-playground-site-is-selected.tsx +++ b/packages/playground/website/src/components/ensure-playground-site/ensure-playground-site-is-selected.tsx @@ -78,7 +78,7 @@ export function EnsurePlaygroundSiteIsSelected({ return; } - dispatch(setActiveSite(requestedSiteSlug)); + dispatch(setActiveSite(requestedSiteSlug, { redirect: false })); return; } diff --git a/packages/playground/website/src/components/playground-viewport/index.tsx b/packages/playground/website/src/components/playground-viewport/index.tsx index 6863d2c3ef..0b1ea17fce 100644 --- a/packages/playground/website/src/components/playground-viewport/index.tsx +++ b/packages/playground/website/src/components/playground-viewport/index.tsx @@ -8,7 +8,10 @@ import { useAppDispatch, useAppSelector, } from '../../lib/state/redux/store'; -import { removeClientInfo } from '../../lib/state/redux/slice-clients'; +import { + removeClientInfo, + selectClientBySiteSlug, +} from '../../lib/state/redux/slice-clients'; import { bootSiteClient } from '../../lib/state/redux/boot-site-client'; import { SiteError } from '../../lib/state/redux/slice-ui'; import { Button, Spinner } from '@wordpress/components'; @@ -231,6 +234,31 @@ export const JustViewport = function JustViewport({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [siteSlug, iframeRef, runtimeConfigString]); + const client = useAppSelector((state) => + selectClientBySiteSlug(state, siteSlug) + ); + useEffect(() => { + if (!client) { + return; + } + const url = new URL(window.location.href); + const landingPage = url.searchParams.get('url') || '/'; + client.goTo(landingPage).catch((e) => { + /* + * PHP exposes no goTo method. + * We can't use `goto` in playground here, + * because it may be a Comlink proxy object + * with no such method. + */ + console.error(e); + }); + if (site.metadata.storage !== 'none') { + console.log({ client }, url.searchParams.get('url') || '/'); + url.searchParams.delete('url'); + redirectTo(url.toString()); + } + }, [!client]); + const error = useAppSelector(selectActiveSiteError); if (error) { diff --git a/packages/playground/website/src/lib/state/redux/store.ts b/packages/playground/website/src/lib/state/redux/store.ts index 9dcb3640c4..0d70f46f10 100644 --- a/packages/playground/website/src/lib/state/redux/store.ts +++ b/packages/playground/website/src/lib/state/redux/store.ts @@ -76,7 +76,14 @@ export const selectActiveSiteError = ( export const useActiveSite = () => useAppSelector(selectActiveSite); -export const setActiveSite = (slug: string | undefined) => { +export const setActiveSite = ( + slug: string | undefined, + { + redirect = true, + }: { + redirect?: boolean; + } = {} +) => { return ( dispatch: PlaygroundDispatch, getState: () => PlaygroundReduxState @@ -87,7 +94,7 @@ export const setActiveSite = (slug: string | undefined) => { return; } dispatch(__internal_uiSlice.actions.setActiveSite(slug)); - if (slug) { + if (slug && redirect) { const site = selectSiteBySlug(getState(), slug); redirectTo(PlaygroundRoute.site(site)); } From 0fbbcba601d3b294cc27e602f60b0a8daca7bf18 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Wed, 16 Oct 2024 22:54:01 +0100 Subject: [PATCH 2/2] Document deps for the useEffect call --- .../website/src/components/playground-viewport/index.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/playground/website/src/components/playground-viewport/index.tsx b/packages/playground/website/src/components/playground-viewport/index.tsx index 0b1ea17fce..68f33b22a6 100644 --- a/packages/playground/website/src/components/playground-viewport/index.tsx +++ b/packages/playground/website/src/components/playground-viewport/index.tsx @@ -242,7 +242,10 @@ export const JustViewport = function JustViewport({ return; } const url = new URL(window.location.href); - const landingPage = url.searchParams.get('url') || '/'; + const landingPage = + url.searchParams.get('url') || + site.metadata?.originalBlueprint?.landingPage || + '/'; client.goTo(landingPage).catch((e) => { /* * PHP exposes no goTo method. @@ -250,13 +253,13 @@ export const JustViewport = function JustViewport({ * because it may be a Comlink proxy object * with no such method. */ - console.error(e); }); if (site.metadata.storage !== 'none') { - console.log({ client }, url.searchParams.get('url') || '/'); url.searchParams.delete('url'); redirectTo(url.toString()); } + // Only ever re-run this effect once – when the client becomes available. + // eslint-disable-next-line react-hooks/exhaustive-deps }, [!client]); const error = useAppSelector(selectActiveSiteError);