Fix frontend HMR so the page doesn't break upon saving TS files and restructure frontend architecture (#3871)

* Clean up component setup/tear-down side effects

* Clean up more component setup/tear-down side effects

* Remove nonfunctional debouncer

* Clean up even more component setup/tear-down side effects

* Reuse backend state

* Fix HMR for IO Managers and for State Providers

* Rename IO Managers -> Managers and State Providers -> Stores

* Restructure and partially flatten managers/stores

* Code review fixes

* Review fixes

frontend/src/stores/portfolio.ts

@@ -0,0 +1,138 @@
+import { writable } from "svelte/store";
+import type { Writable } from "svelte/store";
+
+import type { OpenDocument } from "@graphite/../wasm/pkg/graphite_wasm";
+import type { Editor } from "@graphite/editor";
+import { downloadFile, downloadFileBlob, upload } from "@graphite/utility-functions/files";
+import { rasterizeSVG } from "@graphite/utility-functions/rasterization";
+
+type PortfolioStoreState = {
+	unsaved: boolean;
+	documents: OpenDocument[];
+	activeDocumentIndex: number;
+	dataPanelOpen: boolean;
+	propertiesPanelOpen: boolean;
+	layersPanelOpen: boolean;
+};
+const initialState: PortfolioStoreState = {
+	unsaved: false,
+	documents: [],
+	activeDocumentIndex: 0,
+	dataPanelOpen: false,
+	propertiesPanelOpen: true,
+	layersPanelOpen: true,
+};
+
+// Store state persisted across HMR to maintain reactive subscriptions in the component tree
+const store: Writable<PortfolioStoreState> = import.meta.hot?.data?.store || writable<PortfolioStoreState>(initialState);
+if (import.meta.hot) import.meta.hot.data.store = store;
+const { subscribe, update } = store;
+
+export function createPortfolioStore(editor: Editor) {
+	// Set up message subscriptions on creation
+	editor.subscriptions.subscribeFrontendMessage("UpdateOpenDocumentsList", (data) => {
+		update((state) => {
+			state.documents = data.openDocuments;
+			return state;
+		});
+	});
+	editor.subscriptions.subscribeFrontendMessage("UpdateActiveDocument", (data) => {
+		update((state) => {
+			// Assume we receive a correct document id
+			const activeId = state.documents.findIndex((doc) => doc.id === data.documentId);
+			state.activeDocumentIndex = activeId;
+			return state;
+		});
+	});
+	editor.subscriptions.subscribeFrontendMessage("TriggerFetchAndOpenDocument", async (data) => {
+		try {
+			const url = new URL(`demo-artwork/${data.filename}`, document.location.href);
+			const response = await fetch(url);
+			editor.handle.openFile(data.filename, await response.bytes());
+		} catch {
+			// Needs to be delayed until the end of the current call stack so the existing demo artwork dialog can be closed first, otherwise this dialog won't show
+			setTimeout(() => {
+				editor.handle.errorDialog("Failed to open document", "The file could not be reached over the internet. You may be offline, or it may be missing.");
+			}, 0);
+		}
+	});
+	editor.subscriptions.subscribeFrontendMessage("TriggerOpen", async () => {
+		const data = await upload(`image/*,.${editor.handle.fileExtension()}`, "data");
+		editor.handle.openFile(data.filename, data.content);
+	});
+	editor.subscriptions.subscribeFrontendMessage("TriggerImport", async () => {
+		// TODO: Use the same `accept` string as in the `TriggerOpen` handler once importing Graphite documents as nodes is supported
+		const data = await upload("image/*", "data");
+		editor.handle.importFile(data.filename, data.content);
+	});
+	editor.subscriptions.subscribeFrontendMessage("TriggerSaveDocument", (data) => {
+		downloadFile(data.name, data.content);
+	});
+	editor.subscriptions.subscribeFrontendMessage("TriggerSaveFile", (data) => {
+		downloadFile(data.name, data.content);
+	});
+	editor.subscriptions.subscribeFrontendMessage("TriggerExportImage", async (data) => {
+		const { svg, name, mime, size } = data;
+
+		// Fill the canvas with white if it'll be a JPEG (which does not support transparency and defaults to black)
+		const backgroundColor = mime.endsWith("jpeg") ? "white" : undefined;
+
+		// Rasterize the SVG to an image file
+		try {
+			const blob = await rasterizeSVG(svg, size[0], size[1], mime, backgroundColor);
+
+			// Have the browser download the file to the user's disk
+			downloadFileBlob(name, blob);
+		} catch {
+			// Fail silently if there's an error rasterizing the SVG, such as a zero-sized image
+		}
+	});
+	editor.subscriptions.subscribeFrontendMessage("UpdateDataPanelState", async (data) => {
+		update((state) => {
+			state.dataPanelOpen = data.open;
+			return state;
+		});
+	});
+	editor.subscriptions.subscribeFrontendMessage("UpdatePropertiesPanelState", async (data) => {
+		update((state) => {
+			state.propertiesPanelOpen = data.open;
+			return state;
+		});
+	});
+	editor.subscriptions.subscribeFrontendMessage("UpdateLayersPanelState", async (data) => {
+		update((state) => {
+			state.layersPanelOpen = data.open;
+			return state;
+		});
+	});
+
+	function destroy() {
+		editor.subscriptions.unsubscribeFrontendMessage("UpdateOpenDocumentsList");
+		editor.subscriptions.unsubscribeFrontendMessage("UpdateActiveDocument");
+		editor.subscriptions.unsubscribeFrontendMessage("TriggerFetchAndOpenDocument");
+		editor.subscriptions.unsubscribeFrontendMessage("TriggerOpen");
+		editor.subscriptions.unsubscribeFrontendMessage("TriggerImport");
+		editor.subscriptions.unsubscribeFrontendMessage("TriggerSaveDocument");
+		editor.subscriptions.unsubscribeFrontendMessage("TriggerSaveFile");
+		editor.subscriptions.unsubscribeFrontendMessage("TriggerExportImage");
+		editor.subscriptions.unsubscribeFrontendMessage("UpdateDataPanelState");
+		editor.subscriptions.unsubscribeFrontendMessage("UpdatePropertiesPanelState");
+		editor.subscriptions.unsubscribeFrontendMessage("UpdateLayersPanelState");
+	}
+
+	currentCleanup = destroy;
+	currentArgs = [editor];
+	return {
+		subscribe,
+		destroy,
+	};
+}
+export type PortfolioStore = ReturnType<typeof createPortfolioStore>;
+
+// Self-accepting HMR: tear down the old instance and re-create with the new module's code
+let currentCleanup: (() => void) | undefined;
+let currentArgs: [Editor] | undefined;
+import.meta.hot?.accept((newModule) => {
+	currentCleanup?.();
+	if (currentArgs) newModule?.createPortfolioStore(...currentArgs);
+});