Vue initialization and FloatingMenu codebase refactoring and cleanup (#649)

* Clean up Vue initialization-related code

* Rename folder: dispatcher -> interop

* Rename folder: state -> providers

* Comments and clarification

* Rename JS dispatcher to subscription router

* Assorted cleanup and renaming

* Rename: js-messages.ts -> messages.ts

* Comments

* Remove unused Vue component injects

* Clean up coming soon and add warning about freezing the app

* Further cleanup

* Dangerous changes

* Simplify App.vue code

* Move more disparate init code from components into managers

* Rename folder: providers -> state-providers

* Other

* Move Document panel options bar separator to backend

* Add destructors to managers to fix HMR

* Comments and code style

* Rename variable: font -> font_file_url

* Fix async font loading; refactor janky floating menu openness and min-width measurement; fix Vetur errors

* Fix misaligned canvas in viewport until panning on page (re)load

* Add Vue bidirectional props documentation

* More folder renaming for better terminology; add some documentation

frontend/src/wasm-communication/editor.ts

@@ -0,0 +1,50 @@
+import { panicProxy } from "@/utility-functions/panic-proxy";
+import { JsMessageType } from "@/wasm-communication/messages";
+import { createSubscriptionRouter, SubscriptionRouter } from "@/wasm-communication/subscription-router";
+
+export type WasmRawInstance = typeof import("@/../wasm/pkg");
+export type WasmEditorInstance = InstanceType<WasmRawInstance["JsEditorHandle"]>;
+export type Editor = Readonly<ReturnType<typeof createEditor>>;
+
+// `wasmImport` starts uninitialized because its initialization needs to occur asynchronously, and thus needs to occur by manually calling and awaiting `initWasm()`
+let wasmImport: WasmRawInstance | null = null;
+
+// Should be called asynchronously before `createEditor()`
+export async function initWasm(): Promise<void> {
+	// Skip if the WASM module is already initialized
+	if (wasmImport !== null) return;
+
+	// Import the WASM module JS bindings and wrap them in the panic proxy
+	wasmImport = await import("@/../wasm/pkg").then(panicProxy);
+
+	// Provide a random starter seed which must occur after initializing the WASM module, since WASM can't generate its own random numbers
+	const randomSeed = BigInt(Math.floor(Math.random() * Number.MAX_SAFE_INTEGER));
+	wasmImport?.set_random_seed(randomSeed);
+}
+
+// Should be called after running `initWasm()` and its promise resolving
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function createEditor() {
+	// Functions from `api.rs` defined directly on the WASM module, not the editor instance (generated by wasm-bindgen)
+	const raw: WasmRawInstance = getWasmInstance();
+
+	// Functions from `api.rs` that are part of the editor instance (generated by wasm-bindgen)
+	const instance: WasmEditorInstance = new raw.JsEditorHandle(invokeJsMessageSubscription);
+	function invokeJsMessageSubscription(messageType: JsMessageType, data: Record<string, unknown>): void {
+		subscriptions.handleJsMessage(messageType, data, raw, instance);
+	}
+
+	// Allows subscribing to messages in JS that are sent from the WASM backend
+	const subscriptions: SubscriptionRouter = createSubscriptionRouter();
+
+	return {
+		raw,
+		instance,
+		subscriptions,
+	};
+}
+
+export function getWasmInstance(): WasmRawInstance {
+	if (wasmImport) return wasmImport;
+	throw new Error("Editor WASM backend was not initialized at application startup");
+}