Replace the Vue frontend with Svelte

frontend/src/wasm-communication/editor.ts

@@ -1,5 +1,3 @@
-import { invoke } from "@tauri-apps/api";
-
 import type WasmBindgenPackage from "@/../wasm/pkg";
 import { panicProxy } from "@/utility-functions/panic-proxy";
 import { type JsMessageType } from "@/wasm-communication/messages";
@@ -40,10 +38,12 @@ export async function fetchImage(path: BigUint64Array, mime: string, documentId:
 	editorInstance?.setImageBlobURL(documentId, path, blobURL, image.naturalWidth, image.naturalHeight);
 }
 
-// export async function dispatchTauri(message: string): Promise<string> {
+const tauri = "__TAURI_METADATA__" in window && import("@tauri-apps/api");
 export async function dispatchTauri(message: unknown): Promise<void> {
+	if (!tauri) return;
+
 	try {
-		const response = await invoke("handle_message", { message });
+		const response = await (await tauri).invoke("handle_message", { message });
 		editorInstance?.tauriResponse(response);
 	} catch {
 		// eslint-disable-next-line no-console
@@ -64,11 +64,12 @@ export async function initWasm(): Promise<void> {
 	const randomSeedFloat = Math.floor(Math.random() * Number.MAX_SAFE_INTEGER);
 	const randomSeed = BigInt(randomSeedFloat);
 	wasmImport?.setRandomSeed(randomSeed);
-	try {
-		await invoke("set_random_seed", { seed: randomSeedFloat });
-	} catch {
-		// Ignore errors
-	}
+	// TODO: Tauri: reenable this
+	// try {
+	// 	await invoke("set_random_seed", { seed: randomSeedFloat });
+	// } catch {
+	// 	// Ignore errors
+	// }
 }
 
 // Should be called after running `initWasm()` and its promise resolving

frontend/src/wasm-communication/messages.ts

@@ -5,7 +5,7 @@ import { Transform, Type, plainToClass } from "class-transformer";
 import { type IconName, type IconSize } from "@/utility-functions/icons";
 import { type WasmEditorInstance, type WasmRawInstance } from "@/wasm-communication/editor";
 
-import type MenuList from "@/components/floating-menus/MenuList.vue";
+import type MenuList from "@/components/floating-menus/MenuList.svelte";
 
 export class JsMessage {
 	// The marker provides a way to check if an object is a sub-class constructor for a jsMessage.
@@ -496,7 +496,7 @@ const mouseCursorIconCSSNames = {
 	Rotate: "custom-rotate",
 } as const;
 export type MouseCursor = keyof typeof mouseCursorIconCSSNames;
-export type MouseCursorIcon = (typeof mouseCursorIconCSSNames)[MouseCursor];
+export type MouseCursorIcon = typeof mouseCursorIconCSSNames[MouseCursor];
 
 export class UpdateMouseCursor extends JsMessage {
 	@Transform(({ value }: { value: MouseCursor }) => mouseCursorIconCSSNames[value] || "alias")
@@ -810,7 +810,7 @@ export class TriggerViewportResize extends JsMessage {}
 // WIDGET PROPS
 
 export abstract class WidgetProps {
-	kind!: string;
+	kind!: WidgetPropsNames;
 }
 
 export class CheckboxInput extends WidgetProps {
@@ -860,7 +860,7 @@ export type MenuListEntry = MenuEntryCommon & {
 	disabled?: boolean;
 	tooltip?: string;
 	font?: URL;
-	ref?: InstanceType<typeof MenuList>;
+	ref?: MenuList;
 };
 
 export class DropdownInput extends WidgetProps {
@@ -993,7 +993,7 @@ export class OptionalInput extends WidgetProps {
 }
 
 export class PopoverButton extends WidgetProps {
-	icon!: string | undefined;
+	icon!: IconName | undefined;
 
 	disabled!: boolean;
 
@@ -1065,7 +1065,7 @@ export class ParameterExposeButton extends WidgetProps {
 export class TextButton extends WidgetProps {
 	label!: string;
 
-	icon!: string | undefined;
+	icon!: IconName | undefined;
 
 	emphasized!: boolean;
 
@@ -1096,7 +1096,7 @@ export type TextButtonWidget = {
 };
 
 export class BreadcrumbTrailButtons extends WidgetProps {
-	labels!: string;
+	labels!: string[];
 
 	disabled!: boolean;
 
@@ -1149,6 +1149,7 @@ export class PivotAssist extends WidgetProps {
 // WIDGET
 
 const widgetSubTypes = [
+	{ value: BreadcrumbTrailButtons, name: "BreadcrumbTrailButtons"},
 	{ value: CheckboxInput, name: "CheckboxInput" },
 	{ value: ColorInput, name: "ColorInput" },
 	{ value: DropdownInput, name: "DropdownInput" },
@@ -1158,18 +1159,27 @@ const widgetSubTypes = [
 	{ value: LayerReferenceInput, name: "LayerReferenceInput" },
 	{ value: NumberInput, name: "NumberInput" },
 	{ value: OptionalInput, name: "OptionalInput" },
+	{ value: ParameterExposeButton, name: "ParameterExposeButton" },
+	{ value: PivotAssist, name: "PivotAssist" },
 	{ value: PopoverButton, name: "PopoverButton" },
 	{ value: RadioInput, name: "RadioInput" },
 	{ value: Separator, name: "Separator" },
 	{ value: SwatchPairInput, name: "SwatchPairInput" },
 	{ value: TextAreaInput, name: "TextAreaInput" },
 	{ value: TextButton, name: "TextButton" },
-	{ value: ParameterExposeButton, name: "ParameterExposeButton" },
 	{ value: TextInput, name: "TextInput" },
 	{ value: TextLabel, name: "TextLabel" },
-	{ value: PivotAssist, name: "PivotAssist" },
-];
-export type WidgetPropsSet = InstanceType<(typeof widgetSubTypes)[number]["value"]>;
+] as const;
+
+type WidgetSubTypes = typeof widgetSubTypes[number];
+type WidgetKindMap = { [T in WidgetSubTypes as T["name"]]: InstanceType<T["value"]> };
+export type WidgetPropsNames = keyof WidgetKindMap;
+export type WidgetPropsSet = WidgetKindMap[WidgetPropsNames];
+
+export function narrowWidgetProps<K extends WidgetPropsNames>(props: WidgetPropsSet, kind: K) {
+	if (props.kind === kind) return props as WidgetKindMap[K]
+	else return undefined;
+}
 
 export class Widget {
 	constructor(props: WidgetPropsSet, widgetId: bigint) {
@@ -1177,7 +1187,7 @@ export class Widget {
 		this.widgetId = widgetId;
 	}
 
-	@Type(() => WidgetProps, { discriminator: { property: "kind", subTypes: widgetSubTypes }, keepDiscriminatorProperty: true })
+	@Type(() => WidgetProps, { discriminator: { property: "kind", subTypes: [...widgetSubTypes] }, keepDiscriminatorProperty: true })
 	props!: WidgetPropsSet;
 
 	widgetId!: bigint;
@@ -1226,7 +1236,7 @@ export function defaultWidgetLayout(): WidgetLayout {
 }
 
 // Updates a widget layout based on a list of updates, returning the new layout
-export function patchWidgetLayout(layout: WidgetLayout, updates: WidgetDiffUpdate): void {
+export function patchWidgetLayout(/* mut */ layout: WidgetLayout, updates: WidgetDiffUpdate): void {
 	layout.layoutTarget = updates.layoutTarget;
 
 	updates.diff.forEach((update) => {