Restructure frontend TS files so managers/stores export destructors instead of returning them from their constructors (#3919)

* Replace parameter passing with getContext and extract destroy functions to module-level exports

* Resend layouts from Rust when editor is re-mounted on HMR

* Code review

frontend/src/stores/app-window.ts

@@ -4,6 +4,8 @@ import type { Writable } from "svelte/store";
 import type { AppWindowPlatform } from "@graphite/../wasm/pkg/graphite_wasm";
 import type { Editor } from "@graphite/editor";
 
+export type AppWindowStore = ReturnType<typeof createAppWindowStore>;
+
 type AppWindowStoreState = {
 	platform: AppWindowPlatform;
 	maximized: boolean;
@@ -19,37 +21,44 @@ const initialState: AppWindowStoreState = {
 	uiScale: 1,
 };
 
+let editorRef: Editor | undefined = undefined;
+
 // Store state persisted across HMR to maintain reactive subscriptions in the component tree
 const store: Writable<AppWindowStoreState> = import.meta.hot?.data?.store || writable<AppWindowStoreState>(initialState);
 if (import.meta.hot) import.meta.hot.data.store = store;
 const { subscribe, update } = store;
 
 export function createAppWindowStore(editor: Editor) {
-	// Set up message subscriptions on creation
+	editorRef = editor;
+
 	editor.subscriptions.subscribeFrontendMessage("UpdatePlatform", (data) => {
 		update((state) => {
 			state.platform = data.platform;
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateMaximized", (data) => {
 		update((state) => {
 			state.maximized = data.maximized;
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateFullscreen", (data) => {
 		update((state) => {
 			state.fullscreen = data.fullscreen;
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateViewportHolePunch", (data) => {
 		update((state) => {
 			state.viewportHolePunch = data.active;
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateUIScale", (data) => {
 		update((state) => {
 			state.uiScale = data.scale;
@@ -57,27 +66,16 @@ export function createAppWindowStore(editor: Editor) {
 		});
 	});
 
-	function destroy() {
-		editor.subscriptions.unsubscribeFrontendMessage("UpdatePlatform");
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateMaximized");
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateFullscreen");
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateViewportHolePunch");
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateUIScale");
-	}
-
-	currentCleanup = destroy;
-	currentArgs = [editor];
-	return {
-		subscribe,
-		destroy,
-	};
+	return { subscribe };
 }
-export type AppWindowStore = ReturnType<typeof createAppWindowStore>;
 
-// 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?.createAppWindowStore(...currentArgs);
-});
+export function destroyAppWindowStore() {
+	const editor = editorRef;
+	if (!editor) return;
+
+	editor.subscriptions.unsubscribeFrontendMessage("UpdatePlatform");
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateMaximized");
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateFullscreen");
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateViewportHolePunch");
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateUIScale");
+}

frontend/src/stores/dialog.ts

@@ -7,6 +7,8 @@ import type { Editor } from "@graphite/editor";
 import type { IconName } from "@graphite/icons";
 import { patchLayout } from "@graphite/utility-functions/widgets";
 
+export type DialogStore = ReturnType<typeof createDialogStore>;
+
 type DialogStoreState = {
 	visible: boolean;
 	title: string;
@@ -27,13 +29,16 @@ const initialState: DialogStoreState = {
 	panicDetails: "",
 };
 
+let editorRef: Editor | undefined = undefined;
+
 // Store state persisted across HMR to maintain reactive subscriptions in the component tree
 const store: Writable<DialogStoreState> = import.meta.hot?.data?.store || writable<DialogStoreState>(initialState);
 if (import.meta.hot) import.meta.hot.data.store = store;
 const { subscribe, update } = store;
 
 export function createDialogStore(editor: Editor) {
-	// Subscribe to process backend events
+	editorRef = editor;
+
 	editor.subscriptions.subscribeFrontendMessage("DisplayDialog", (data) => {
 		update((state) => {
 			state.visible = true;
@@ -71,6 +76,7 @@ export function createDialogStore(editor: Editor) {
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("DialogClose", () => {
 		update((state) => {
 			// Disallow dismissing the crash dialog since it should remain as the final notification
@@ -94,23 +100,20 @@ export function createDialogStore(editor: Editor) {
 		editor.handle.requestLicensesThirdPartyDialogWithLicenseText(licenseText);
 	});
 
-	function destroy() {
-		editor.subscriptions.unsubscribeFrontendMessage("DisplayDialog");
-		editor.subscriptions.unsubscribeFrontendMessage("DialogClose");
-		editor.subscriptions.unsubscribeFrontendMessage("TriggerDisplayThirdPartyLicensesDialog");
-		editor.subscriptions.unsubscribeLayoutUpdate("DialogButtons");
-		editor.subscriptions.unsubscribeLayoutUpdate("DialogColumn1");
-		editor.subscriptions.unsubscribeLayoutUpdate("DialogColumn2");
-	}
+	return { subscribe };
+}
 
-	currentCleanup = destroy;
-	currentArgs = [editor];
-	return {
-		subscribe,
-		destroy,
-	};
+export function destroyDialogStore() {
+	const editor = editorRef;
+	if (!editor) return;
+
+	editor.subscriptions.unsubscribeFrontendMessage("DisplayDialog");
+	editor.subscriptions.unsubscribeFrontendMessage("DialogClose");
+	editor.subscriptions.unsubscribeFrontendMessage("TriggerDisplayThirdPartyLicensesDialog");
+	editor.subscriptions.unsubscribeLayoutUpdate("DialogButtons");
+	editor.subscriptions.unsubscribeLayoutUpdate("DialogColumn1");
+	editor.subscriptions.unsubscribeLayoutUpdate("DialogColumn2");
 }
-export type DialogStore = ReturnType<typeof createDialogStore>;
 
 // Creates a crash dialog from JS once the editor has panicked.
 // Normal dialogs are created in the Rust backend, but for the crash dialog, the editor has panicked so it cannot respond to widget callbacks.
@@ -129,11 +132,3 @@ export function createCrashDialog(panicDetails: string) {
 		return state;
 	});
 }
-
-// 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?.createDialogStore(...currentArgs);
-});

frontend/src/stores/document.ts

@@ -6,6 +6,8 @@ import type { Layout } from "@graphite/../wasm/pkg/graphite_wasm";
 import type { Editor } from "@graphite/editor";
 import { patchLayout } from "@graphite/utility-functions/widgets";
 
+export type DocumentStore = ReturnType<typeof createDocumentStore>;
+
 type DocumentStoreState = {
 	toolOptionsLayout: Layout;
 	documentBarLayout: Layout;
@@ -25,12 +27,16 @@ const initialState: DocumentStoreState = {
 	fadeArtwork: 100,
 };
 
+let editorRef: Editor | undefined = undefined;
+
 // Store state persisted across HMR to maintain reactive subscriptions in the component tree
 const store: Writable<DocumentStoreState> = import.meta.hot?.data?.store || writable<DocumentStoreState>(initialState);
 if (import.meta.hot) import.meta.hot.data.store = store;
 const { subscribe, update } = store;
 
 export function createDocumentStore(editor: Editor) {
+	editorRef = editor;
+
 	// Update layouts
 	editor.subscriptions.subscribeFrontendMessage("UpdateGraphFadeArtwork", (data) => {
 		update((state) => {
@@ -87,29 +93,18 @@ export function createDocumentStore(editor: Editor) {
 		});
 	});
 
-	function destroy() {
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateGraphFadeArtwork");
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateGraphViewOverlay");
-		editor.subscriptions.unsubscribeLayoutUpdate("ToolOptions");
-		editor.subscriptions.unsubscribeLayoutUpdate("DocumentBar");
-		editor.subscriptions.unsubscribeLayoutUpdate("ToolShelf");
-		editor.subscriptions.unsubscribeLayoutUpdate("WorkingColors");
-		editor.subscriptions.unsubscribeLayoutUpdate("NodeGraphControlBar");
-	}
-
-	currentCleanup = destroy;
-	currentArgs = [editor];
-	return {
-		subscribe,
-		destroy,
-	};
+	return { subscribe };
 }
-export type DocumentStore = ReturnType<typeof createDocumentStore>;
 
-// 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?.createDocumentStore(...currentArgs);
-});
+export function destroyDocumentStore() {
+	const editor = editorRef;
+	if (!editor) return;
+
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateGraphFadeArtwork");
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateGraphViewOverlay");
+	editor.subscriptions.unsubscribeLayoutUpdate("ToolOptions");
+	editor.subscriptions.unsubscribeLayoutUpdate("DocumentBar");
+	editor.subscriptions.unsubscribeLayoutUpdate("ToolShelf");
+	editor.subscriptions.unsubscribeLayoutUpdate("WorkingColors");
+	editor.subscriptions.unsubscribeLayoutUpdate("NodeGraphControlBar");
+}

frontend/src/stores/fullscreen.ts

@@ -3,6 +3,8 @@ import type { Writable } from "svelte/store";
 
 import type { Editor } from "@graphite/editor";
 
+export type FullscreenStore = ReturnType<typeof createFullscreenStore>;
+
 type FullscreenStoreState = {
 	windowFullscreen: boolean;
 	keyboardLocked: boolean;
@@ -12,28 +14,29 @@ const initialState: FullscreenStoreState = {
 	keyboardLocked: false,
 };
 
+let editorRef: Editor | undefined = undefined;
+
 // Store state persisted across HMR to maintain reactive subscriptions in the component tree
 const store: Writable<FullscreenStoreState> = import.meta.hot?.data?.store || writable<FullscreenStoreState>(initialState);
 if (import.meta.hot) import.meta.hot.data.store = store;
 const { subscribe, update } = store;
 
 export function createFullscreenStore(editor: Editor) {
+	editorRef = editor;
+
 	editor.subscriptions.subscribeFrontendMessage("WindowFullscreen", () => {
 		toggleFullscreen();
 	});
 
-	function destroy() {
-		editor.subscriptions.unsubscribeFrontendMessage("WindowFullscreen");
-	}
+	return { subscribe };
+}
 
-	currentCleanup = destroy;
-	currentArgs = [editor];
-	return {
-		subscribe,
-		destroy,
-	};
+export function destroyFullscreenStore() {
+	const editor = editorRef;
+	if (!editor) return;
+
+	editor.subscriptions.unsubscribeFrontendMessage("WindowFullscreen");
 }
-export type FullscreenStore = ReturnType<typeof createFullscreenStore>;
 
 export function fullscreenModeChanged() {
 	update((state) => {
@@ -67,11 +70,3 @@ export async function toggleFullscreen() {
 	if (state.windowFullscreen) await exitFullscreen();
 	else await enterFullscreen();
 }
-
-// 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?.createFullscreenStore(...currentArgs);
-});

frontend/src/stores/node-graph.ts

@@ -5,6 +5,8 @@ import type { NodeGraphErrorDiagnostic, BoxSelection, FrontendClickTargets, Cont
 import type { Editor } from "@graphite/editor";
 import type { MessageBody } from "@graphite/subscription-router";
 
+export type NodeGraphStore = ReturnType<typeof createNodeGraphStore>;
+
 type NodeGraphStoreState = {
 	box: BoxSelection | undefined;
 	clickTargets: FrontendClickTargets | undefined;
@@ -51,12 +53,16 @@ const initialState: NodeGraphStoreState = {
 	reorderExportIndex: undefined,
 };
 
+let editorRef: Editor | undefined = undefined;
+
 // Store state persisted across HMR to maintain reactive subscriptions in the component tree
 const store: Writable<NodeGraphStoreState> = import.meta.hot?.data?.store || writable<NodeGraphStoreState>(initialState);
 if (import.meta.hot) import.meta.hot.data.store = store;
 const { subscribe, update } = store;
 
 export function createNodeGraphStore(editor: Editor) {
+	editorRef = editor;
+
 	// Set up message subscriptions on creation
 	editor.subscriptions.subscribeFrontendMessage("SendUIMetadata", (data) => {
 		update((state) => {
@@ -65,48 +71,56 @@ export function createNodeGraphStore(editor: Editor) {
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateBox", (data) => {
 		update((state) => {
 			state.box = data.box;
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateClickTargets", (data) => {
 		update((state) => {
 			state.clickTargets = data.clickTargets;
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateContextMenuInformation", (data) => {
 		update((state) => {
 			state.contextMenuInformation = data.contextMenuInformation;
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateImportReorderIndex", (data) => {
 		update((state) => {
 			state.reorderImportIndex = data.importIndex;
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateExportReorderIndex", (data) => {
 		update((state) => {
 			state.reorderExportIndex = data.exportIndex;
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateImportsExports", (data) => {
 		update((state) => {
 			state.updateImportsExports = data;
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateInSelectedNetwork", (data) => {
 		update((state) => {
 			state.inSelectedNetwork = data.inSelectedNetwork;
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateLayerWidths", (data) => {
 		update((state) => {
 			state.layerWidths = data.layerWidths;
@@ -115,6 +129,7 @@ export function createNodeGraphStore(editor: Editor) {
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateNodeGraphNodes", (data) => {
 		update((state) => {
 			state.nodes.clear();
@@ -124,18 +139,21 @@ export function createNodeGraphStore(editor: Editor) {
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateNodeGraphErrorDiagnostic", (data) => {
 		update((state) => {
 			state.error = data.error;
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateVisibleNodes", (data) => {
 		update((state) => {
 			state.visibleNodes = new Set<bigint>(data.nodes);
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateNodeGraphWires", (data) => {
 		update((state) => {
 			data.wires.forEach((wireUpdate) => {
@@ -154,30 +172,35 @@ export function createNodeGraphStore(editor: Editor) {
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("ClearAllNodeGraphWires", () => {
 		update((state) => {
 			state.wires.clear();
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateNodeGraphSelection", (data) => {
 		update((state) => {
 			state.selected = data.selected;
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateNodeGraphTransform", (data) => {
 		update((state) => {
 			state.transform = { scale: data.scale, x: data.translation[0], y: data.translation[1] };
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateNodeThumbnail", (data) => {
 		update((state) => {
 			state.thumbnails.set(data.id, data.value);
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("UpdateWirePathInProgress", (data) => {
 		update((state) => {
 			state.wirePathInProgress = data.wirePath;
@@ -185,35 +208,32 @@ export function createNodeGraphStore(editor: Editor) {
 		});
 	});
 
-	function destroy() {
-		editor.subscriptions.unsubscribeFrontendMessage("SendUIMetadata");
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateBox");
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateClickTargets");
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateContextMenuInformation");
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateImportReorderIndex");
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateExportReorderIndex");
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateImportsExports");
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateInSelectedNetwork");
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateLayerWidths");
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeGraphNodes");
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeGraphErrorDiagnostic");
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateVisibleNodes");
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeGraphWires");
-		editor.subscriptions.unsubscribeFrontendMessage("ClearAllNodeGraphWires");
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeGraphSelection");
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeGraphTransform");
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeThumbnail");
-		editor.subscriptions.unsubscribeFrontendMessage("UpdateWirePathInProgress");
-	}
+	return { subscribe };
+}
 
-	currentCleanup = destroy;
-	currentArgs = [editor];
-	return {
-		subscribe,
-		destroy,
-	};
+export function destroyNodeGraphStore() {
+	const editor = editorRef;
+	if (!editor) return;
+
+	editor.subscriptions.unsubscribeFrontendMessage("SendUIMetadata");
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateBox");
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateClickTargets");
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateContextMenuInformation");
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateImportReorderIndex");
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateExportReorderIndex");
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateImportsExports");
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateInSelectedNetwork");
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateLayerWidths");
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeGraphNodes");
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeGraphErrorDiagnostic");
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateVisibleNodes");
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeGraphWires");
+	editor.subscriptions.unsubscribeFrontendMessage("ClearAllNodeGraphWires");
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeGraphSelection");
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeGraphTransform");
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeThumbnail");
+	editor.subscriptions.unsubscribeFrontendMessage("UpdateWirePathInProgress");
 }
-export type NodeGraphStore = ReturnType<typeof createNodeGraphStore>;
 
 export function closeContextMenu() {
 	update((state) => {
@@ -221,11 +241,3 @@ export function closeContextMenu() {
 		return state;
 	});
 }
-
-// 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?.createNodeGraphStore(...currentArgs);
-});

frontend/src/stores/portfolio.ts

@@ -6,6 +6,8 @@ import type { Editor } from "@graphite/editor";
 import { downloadFile, downloadFileBlob, upload } from "@graphite/utility-functions/files";
 import { rasterizeSVG } from "@graphite/utility-functions/rasterization";
 
+export type PortfolioStore = ReturnType<typeof createPortfolioStore>;
+
 type PortfolioStoreState = {
 	unsaved: boolean;
 	documents: OpenDocument[];
@@ -23,19 +25,23 @@ const initialState: PortfolioStoreState = {
 	layersPanelOpen: true,
 };
 
+let editorRef: Editor | undefined = undefined;
+
 // 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
+	editorRef = editor;
+
 	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
@@ -44,6 +50,7 @@ export function createPortfolioStore(editor: Editor) {
 			return state;
 		});
 	});
+
 	editor.subscriptions.subscribeFrontendMessage("TriggerFetchAndOpenDocument", async (data) => {
 		try {
 			const url = new URL(`demo-artwork/${data.filename}`, document.location.href);
@@ -56,21 +63,26 @@ export function createPortfolioStore(editor: Editor) {
 			}, 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;
 
@@ -87,18 +99,21 @@ export function createPortfolioStore(editor: Editor) {
 			// 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;
@@ -106,33 +121,22 @@ export function createPortfolioStore(editor: Editor) {
 		});
 	});
 
-	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,
-	};
+	return { subscribe };
 }
-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);
-});
+export function destroyPortfolioStore() {
+	const editor = editorRef;
+	if (!editor) return;
+
+	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");
+}

frontend/src/stores/tooltip.ts

@@ -5,8 +5,12 @@ import type { ActionShortcut } from "@graphite/../wasm/pkg/graphite_wasm";
 import type { Editor } from "@graphite/editor";
 import { operatingSystem } from "@graphite/utility-functions/platform";
 
+export type TooltipStore = ReturnType<typeof createTooltipStore>;
+
 const SHOW_TOOLTIP_DELAY_MS = 500;
 
+let tooltipTimeout: ReturnType<typeof setTimeout> | undefined = undefined;
+
 type TooltipStoreState = {
 	visible: boolean;
 	element: Element | undefined;
@@ -24,80 +28,15 @@ const initialState: TooltipStoreState = {
 	fullscreenShortcut: undefined,
 };
 
+let editorRef: Editor | undefined = undefined;
+
 // Store state persisted across HMR to maintain reactive subscriptions in the component tree
 const store: Writable<TooltipStoreState> = import.meta.hot?.data?.store || writable<TooltipStoreState>(initialState);
 if (import.meta.hot) import.meta.hot.data.store = store;
 const { subscribe, update } = store;
 
 export function createTooltipStore(editor: Editor) {
-	let tooltipTimeout: ReturnType<typeof setTimeout> | undefined = undefined;
-
-	// Listen for mouse movements onto tooltip-bearing HTML elements to track the future target of a tooltip
-	const onMouseOver = (e: MouseEvent) => {
-		const element = (e.target instanceof Element && e.target.closest("[data-tooltip-label], [data-tooltip-description], [data-tooltip-shortcut]")) || undefined;
-
-		update((state) => {
-			state.visible = false;
-			state.element = element;
-			return state;
-		});
-	};
-
-	// Listen for mouse movements to schedule and position the tooltip, or hide it immediately upon further movement
-	const onMouseMove = (e: MouseEvent) => {
-		// Hide the tooltip now that the cursor has moved
-		update((state) => {
-			state.visible = false;
-			return state;
-		});
-
-		// Before we schedule a new future tooltip appearance, we clear the existing one
-		if (tooltipTimeout) clearTimeout(tooltipTimeout);
-
-		// Don't show tooltips while mouse buttons are pressed
-		if (e.buttons !== 0) return;
-
-		// Schedule the tooltip to appear at this cursor position after a delay
-		tooltipTimeout = setTimeout(() => {
-			update((state) => {
-				if (state.element) {
-					state.visible = true;
-					state.position = { x: e.clientX, y: e.clientY };
-				}
-				return state;
-			});
-		}, SHOW_TOOLTIP_DELAY_MS);
-	};
-
-	// Hide tooltip and cancel any pending timeout when the mouse leaves the application window
-	const onMouseLeave = () => {
-		if (tooltipTimeout) clearTimeout(tooltipTimeout);
-		closeTooltip();
-	};
-
-	// Stop showing a tooltip if the user clicks or presses a key, and require the user to first move out of the element before it can re-appear
-	function closeTooltip() {
-		update((state) => {
-			state.visible = false;
-			state.element = undefined;
-			return state;
-		});
-	}
-
-	function destroy() {
-		if (tooltipTimeout) clearTimeout(tooltipTimeout);
-
-		document.removeEventListener("mouseover", onMouseOver);
-		document.removeEventListener("mousemove", onMouseMove);
-		document.removeEventListener("mouseleave", onMouseLeave);
-		document.removeEventListener("mousedown", closeTooltip);
-		document.removeEventListener("keydown", closeTooltip);
-		document.removeEventListener("wheel", closeTooltip);
-
-		editor.subscriptions.unsubscribeFrontendMessage("SendShortcutShiftClick");
-		editor.subscriptions.unsubscribeFrontendMessage("SendShortcutAltClick");
-		editor.subscriptions.unsubscribeFrontendMessage("SendShortcutFullscreen");
-	}
+	editorRef = editor;
 
 	document.addEventListener("mouseover", onMouseOver);
 	document.addEventListener("mousemove", onMouseMove);
@@ -125,19 +64,75 @@ export function createTooltipStore(editor: Editor) {
 		});
 	});
 
-	currentCleanup = destroy;
-	currentArgs = [editor];
-	return {
-		subscribe,
-		destroy,
-	};
+	return { subscribe };
 }
-export type TooltipStore = ReturnType<typeof createTooltipStore>;
 
-// 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?.createTooltipStore(...currentArgs);
-});
+export function destroyTooltipStore() {
+	const editor = editorRef;
+	if (!editor) return;
+
+	if (tooltipTimeout) clearTimeout(tooltipTimeout);
+
+	document.removeEventListener("mouseover", onMouseOver);
+	document.removeEventListener("mousemove", onMouseMove);
+	document.removeEventListener("mouseleave", onMouseLeave);
+	document.removeEventListener("mousedown", closeTooltip);
+	document.removeEventListener("keydown", closeTooltip);
+	document.removeEventListener("wheel", closeTooltip);
+
+	editor.subscriptions.unsubscribeFrontendMessage("SendShortcutShiftClick");
+	editor.subscriptions.unsubscribeFrontendMessage("SendShortcutAltClick");
+	editor.subscriptions.unsubscribeFrontendMessage("SendShortcutFullscreen");
+}
+
+// Listen for mouse movements onto tooltip-bearing HTML elements to track the future target of a tooltip
+function onMouseOver(e: MouseEvent) {
+	const element = (e.target instanceof Element && e.target.closest("[data-tooltip-label], [data-tooltip-description], [data-tooltip-shortcut]")) || undefined;
+
+	update((state) => {
+		state.visible = false;
+		state.element = element;
+		return state;
+	});
+}
+
+// Listen for mouse movements to schedule and position the tooltip, or hide it immediately upon further movement
+function onMouseMove(e: MouseEvent) {
+	// Hide the tooltip now that the cursor has moved
+	update((state) => {
+		state.visible = false;
+		return state;
+	});
+
+	// Before we schedule a new future tooltip appearance, we clear the existing one
+	if (tooltipTimeout) clearTimeout(tooltipTimeout);
+
+	// Don't show tooltips while mouse buttons are pressed
+	if (e.buttons !== 0) return;
+
+	// Schedule the tooltip to appear at this cursor position after a delay
+	tooltipTimeout = setTimeout(() => {
+		update((state) => {
+			if (state.element) {
+				state.visible = true;
+				state.position = { x: e.clientX, y: e.clientY };
+			}
+			return state;
+		});
+	}, SHOW_TOOLTIP_DELAY_MS);
+}
+
+// Hide tooltip and cancel any pending timeout when the mouse leaves the application window
+function onMouseLeave() {
+	if (tooltipTimeout) clearTimeout(tooltipTimeout);
+	closeTooltip();
+}
+
+// Stop showing a tooltip if the user clicks or presses a key, and require the user to first move out of the element before it can re-appear
+function closeTooltip() {
+	update((state) => {
+		state.visible = false;
+		state.element = undefined;
+		return state;
+	});
+}