From ef35c3bea5d530c8478410500d4dee8cd8431a19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Somhairle=20MacLe=C3=B2id?= <smacleod@cloudflare.com>
Date: Fri, 6 Oct 2023 00:11:17 +0100
Subject: [PATCH] [playground] Use in-memory state (#4048)

* Use in-memory state

* Update hash before preview returns
---
 .../src/QuickEditor/QuickEditor.tsx           |  5 ++--
 .../src/QuickEditor/TopBar.tsx                | 17 ++++++++-----
 .../src/QuickEditor/useDraftWorker.ts         | 24 ++++++++++++-------
 3 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/packages/workers-playground/src/QuickEditor/QuickEditor.tsx b/packages/workers-playground/src/QuickEditor/QuickEditor.tsx
index 35e7008a93e1..2f1d39f1b124 100644
--- a/packages/workers-playground/src/QuickEditor/QuickEditor.tsx
+++ b/packages/workers-playground/src/QuickEditor/QuickEditor.tsx
@@ -48,11 +48,12 @@ export default function QuickEditor() {
 	useEffect(() => {
 		observeDarkMode(() => setDarkMode(isDarkMode()));
 	}, []);
-	const workerHash = window.location.hash.slice(1);
 
 	const [previewUrl, setPreviewUrl] = React.useState(`/`);
 
-	const [initialWorkerContentHash, setInitialHash] = React.useState(workerHash);
+	const [initialWorkerContentHash, setInitialHash] = React.useState(
+		window.location.hash.slice(1)
+	);
 
 	function updateWorkerHash(hash: string) {
 		history.replaceState(null, "", hash);
diff --git a/packages/workers-playground/src/QuickEditor/TopBar.tsx b/packages/workers-playground/src/QuickEditor/TopBar.tsx
index 0c4018cc8ea7..f64c483c1dfa 100644
--- a/packages/workers-playground/src/QuickEditor/TopBar.tsx
+++ b/packages/workers-playground/src/QuickEditor/TopBar.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { A, Div, Form, Span, Strong } from "@cloudflare/elements";
 import { createComponent } from "@cloudflare/style-container";
 import { Button } from "@cloudflare/component-button";
@@ -6,6 +6,7 @@ import { Icon } from "@cloudflare/component-icon";
 import { BAR_HEIGHT } from "./constants";
 import { WorkersLogo } from "./WorkersLogo";
 import { Input } from "@cloudflare/component-input";
+import { ServiceContext } from "./QuickEditor";
 
 const Wrapper = createComponent(({ theme }) => ({
 	display: "flex",
@@ -19,6 +20,7 @@ const Wrapper = createComponent(({ theme }) => ({
 }));
 
 export function TopBar() {
+	const { previewHash } = useContext(ServiceContext);
 	const [isEditing, setIsEditing] = useState(false);
 
 	const [hasCopied, setHasCopied] = useState(false);
@@ -29,8 +31,6 @@ export function TopBar() {
 		return searchParams.get("name") || "workers-playground";
 	});
 
-	const workerHash = location.hash.slice(1);
-
 	function setValue(v: string) {
 		const sanitised = v.replace(/[^a-z0-9-]+/g, "-");
 		_setValue(sanitised);
@@ -119,6 +119,7 @@ export function TopBar() {
 				<Button
 					type="primary"
 					inverted={true}
+					disabled={!Boolean(previewHash?.serialised)}
 					onClick={() => {
 						void navigator.clipboard.writeText(location.href);
 						setHasCopied(!hasCopied);
@@ -131,10 +132,14 @@ export function TopBar() {
 
 			<A
 				target="_blank"
-				href={`https://dash.cloudflare.com/workers-and-pages/deploy/playground/${value}#${workerHash}`}
-				style={workerHash ? undefined : { pointerEvents: "none" }}
+				href={`https://dash.cloudflare.com/workers-and-pages/deploy/playground/${value}#${previewHash?.serialised}`}
+				style={previewHash?.serialised ? undefined : { pointerEvents: "none" }}
 			>
-				<Button type="primary" disabled={!Boolean(workerHash)} tabIndex={-1}>
+				<Button
+					type="primary"
+					disabled={!Boolean(previewHash?.serialised)}
+					tabIndex={-1}
+				>
 					Deploy
 				</Button>
 			</A>
diff --git a/packages/workers-playground/src/QuickEditor/useDraftWorker.ts b/packages/workers-playground/src/QuickEditor/useDraftWorker.ts
index c1a74ca1a512..ca44e78825dd 100644
--- a/packages/workers-playground/src/QuickEditor/useDraftWorker.ts
+++ b/packages/workers-playground/src/QuickEditor/useDraftWorker.ts
@@ -90,7 +90,7 @@ export function serialiseWorker(service: PartialWorker): FormData {
 export type PreviewHash = {
 	previewUrl: string;
 	devtoolsUrl: string;
-	playgroundUrl: string;
+	serialised: string;
 };
 
 async function compressWorker(worker: FormData) {
@@ -102,8 +102,14 @@ async function compressWorker(worker: FormData) {
 	);
 }
 
-async function updatePreviewHash(content: Worker): Promise<PreviewHash> {
+async function updatePreviewHash(
+	content: Worker,
+	updateWorkerHash: (hash: string) => void
+): Promise<PreviewHash> {
 	const worker = serialiseWorker(content);
+	const serialised = await compressWorker(worker);
+	const playgroundUrl = `/playground#${serialised}`;
+	updateWorkerHash(playgroundUrl);
 
 	const res = await fetch("/playground/api/worker", {
 		method: "POST",
@@ -117,13 +123,13 @@ async function updatePreviewHash(content: Worker): Promise<PreviewHash> {
 	}
 
 	return {
-		playgroundUrl: `/playground#${await compressWorker(worker)}`,
 		previewUrl: `https://${v4()}.${
 			import.meta.env.VITE_PLAYGROUND_PREVIEW
 		}/.update-preview-token?token=${encodeURIComponent(deploy.preview)}`,
 		devtoolsUrl: `wss://${import.meta.env.VITE_PLAYGROUND_ROOT}${
 			deploy.inspector
 		}`,
+		serialised: serialised,
 	};
 }
 
@@ -165,11 +171,13 @@ export function useDraftWorker(
 			}
 			try {
 				setIsPreviewUpdating(true);
-				const hash = await updatePreviewHash({
-					...worker,
-					...(wk ?? draftWorker),
-				});
-				updateWorkerHash(hash.playgroundUrl);
+				const hash = await updatePreviewHash(
+					{
+						...worker,
+						...(wk ?? draftWorker),
+					},
+					updateWorkerHash
+				);
 				setPreviewHash(hash);
 				setDevtoolsUrl(hash.devtoolsUrl);
 			} catch (e: unknown) {