Major frontend code cleanup (#452)

Many large changes, including:
- TypeScript enums are now string unions throughout
- Strong type-checking throughout the TS and Vue codebase
- Vue component props now all specify `as PropType<...>`
- Usage of annotated return types on all functions
- Sorting of JS import statements
- Explicit usage of Vue bind attribute function call arguments (`@click="foo"` is now `@click=(e) => foo(e)`)
- Much improved code quality related to the color picker
- Consistent camelCase Vue bind and v-model attributes
- Consistent Vue HTML attribute strings with single quotes
- Bug fix and clarity improvement with incorrect hint class parameters
- Empty Vue component objects like `props: {}` and `components: {}` removed

frontend/src/state/wasm-loader.ts

@@ -7,7 +7,7 @@ export type WasmInstance = typeof import("@/../wasm/pkg");
 export type RustEditorInstance = InstanceType<WasmInstance["JsEditorHandle"]>;
 
 let wasmImport: WasmInstance | null = null;
-export async function initWasm() {
+export async function initWasm(): Promise<void> {
 	if (wasmImport !== null) return;
 
 	// Separating in two lines satisfies typescript when used below
@@ -32,7 +32,7 @@ function panicProxy<T extends object>(module: T): T {
 			// Special handling to wrap the return of a constructor in the proxy
 			const isClass = isFunction && /^\s*class\s+/.test(targetValue.toString());
 			if (isClass) {
-				return function (...args: unknown[]) {
+				return function (...args: unknown[]): unknown {
 					// eslint-disable-next-line new-cap
 					const result = new targetValue(...args);
 					return panicProxy(result);
@@ -40,7 +40,7 @@ function panicProxy<T extends object>(module: T): T {
 			}
 
 			// Replace the original function with a wrapper function that runs the original in a try-catch block
-			return function (...args: unknown[]) {
+			return function (...args: unknown[]): unknown {
 				let result;
 				try {
 					// @ts-expect-error TypeScript does not know what `this` is, since it should be able to be anything
@@ -57,16 +57,17 @@ function panicProxy<T extends object>(module: T): T {
 	return new Proxy<T>(module, proxyHandler);
 }
 
-function getWasmInstance() {
+function getWasmInstance(): WasmInstance {
 	if (wasmImport) return wasmImport;
 	throw new Error("Editor WASM backend was not initialized at application startup");
 }
 
-export function createEditorState() {
+type CreateEditorStateType = { dispatcher: ReturnType<typeof createJsDispatcher>; rawWasm: WasmInstance; instance: RustEditorInstance };
+export function createEditorState(): CreateEditorStateType {
 	const dispatcher = createJsDispatcher();
 	const rawWasm = getWasmInstance();
 
-	const rustCallback = (messageType: JsMessageType, data: Record<string, unknown>) => {
+	const rustCallback = (messageType: JsMessageType, data: Record<string, unknown>): void => {
 		dispatcher.handleJsMessage(messageType, data, rawWasm, instance);
 	};