Rework wasm initialization and reduce global state (#379)

* wasm: do the async initialization only once

This allows the rest of the app to access wasm synchronously.

This allows removing of a global.

* provide the wasm via vue provide/inject.

There's still code directly accessing the wasm. That will be changed later.

* MenuBarInput: use injected wasm instead of the global instance

* Let the App handle event listeners

* move stateful modules into state/

* state/fullscreen: create per instance

* App: load the initial document list on mount.
This got lost a few commits ago. Now it's back.

* state/dialog: create per instance

* util/input: remove dependency on global dialog instance

* state/documents: create per instance

* reponse-handler: move into EditorWasm

* comingSoon: move into dialog

* wasm: allow instantiating multiple editors

* input handlers: do not look at canvases outside the mounted App

* input: listen on the container instead of the window when possible

* - removed proxy from wasm-loader
- integrated with js-dispatcher
- state functions to classes
- integrated some upstream changes

* fix errors caused by merge

* Getting closer:
- added global state to track all instances
- fix fullscreen close trigger
- wasm-loader is statefull
- panic across instanes

* - fix outline while using editor
- removed circular import rule
- added editorInstance to js message constructor

* - changed input handler to a class
- still need a better way of handeling it in App.vue

* - fixed single instance of inputManager to weakmap

* - fix no-explicit-any in a few places
- removed global state from input.ts

* simplified two long lines

* removed global state

* removed $data from App

* add mut self to functions in api.rs

* Update Workspace.vue

remove outdated import

* fixed missing import

* Changes throughout code review; note this causes some bugs to be fixed in a later commit

* PR review round 1

* - fix coming soon bugs
- changed folder structure

* moved declaration to .d.ts

* - changed from classes to functions
- moved decs back to app.vue

* removed need to export js function to rust

* changed folder structure

* fixed indentation breaking multiline strings

* Fix eslint rule to whitelist @/../

* Simplify strip-indents implementation

* replace type assertions with better annotations or proper runtime checks

* Small tweaks and code rearranging improvements after second code review pass

* maybe fix mouse events

* Add back preventDefault for mouse scroll

* code review round 2

* Comment improvements

* -removed runtime checks
- fixed layers not showing

* - extened proxy to cover classes
- stopped multiple panics from logging
- Stop wasm-bindgen from mut ref counting our struct

* cleaned up messageConstructors exports

* Fix input and fullscreen regressions

Co-authored-by: Max Fisher <maxmfishernj@gmail.com>
Co-authored-by: mfish33 <32677537+mfish33@users.noreply.github.com>
Co-authored-by: Keavon Chambers <keavon@keavon.com>

frontend/src/App.vue

@@ -71,6 +71,7 @@ body,
 	background: var(--color-2-mildblack);
 	user-select: none;
 	overscroll-behavior: none;
+	outline: none;
 }
 
 html,
@@ -220,23 +221,52 @@ img {
 <script lang="ts">
 import { defineComponent } from "vue";
 
-// State providers
-import dialog from "@/utilities/dialog";
-import documents from "@/utilities/documents";
-import fullscreen from "@/utilities/fullscreen";
+import { DialogState, createDialogState } from "@/state/dialog";
+import { createDocumentsState, DocumentsState } from "@/state/documents";
+import { createFullscreenState, FullscreenState } from "@/state/fullscreen";
 
 import MainWindow from "@/components/window/MainWindow.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
+import { createEditorState, EditorState } from "@/state/wasm-loader";
+import { createInputManager, InputManager } from "@/lifetime/input";
+import { initErrorHandling } from "@/lifetime/errors";
+
+// Vue injects don't play well with TypeScript, and all injects will show up as `any`. As a workaround, we can define these types.
+declare module "@vue/runtime-core" {
+	interface ComponentCustomProperties {
+		dialog: DialogState;
+		documents: DocumentsState;
+		fullscreen: FullscreenState;
+		editor: EditorState;
+		// This must be set to optional because there is a time in the lifecycle of the component where inputManager is undefined.
+		// That's because we initialize inputManager in `mounted()` rather than `data()` since the div hasn't been created yet.
+		inputManger?: InputManager;
+	}
+}
 
 export default defineComponent({
-	provide: {
-		dialog,
-		documents,
-		fullscreen,
+	provide() {
+		return {
+			editor: this.editor,
+			dialog: this.dialog,
+			documents: this.documents,
+			fullscreen: this.fullscreen,
+		};
 	},
 	data() {
+		const editor = createEditorState();
+		const dialog = createDialogState(editor);
+		const documents = createDocumentsState(editor, dialog);
+		const fullscreen = createFullscreenState();
+		initErrorHandling(editor, dialog);
+
 		return {
+			editor,
+			dialog,
+			documents,
+			fullscreen,
 			showUnsupportedModal: !("BigInt64Array" in window),
+			inputManager: undefined as undefined | InputManager,
 		};
 	},
 	methods: {
@@ -244,6 +274,16 @@ export default defineComponent({
 			this.showUnsupportedModal = false;
 		},
 	},
+	mounted() {
+		this.inputManager = createInputManager(this.editor, this.$el.parentElement, this.dialog, this.documents, this.fullscreen);
+	},
+	beforeUnmount() {
+		const { inputManager } = this;
+		if (inputManager) inputManager.removeListeners();
+
+		const { editor } = this;
+		editor.instance.free();
+	},
 	components: { MainWindow, LayoutRow },
 });
 </script>