svelte typing finally works

Author: mProjectsCode

jsEngine/api/PromptAPI.ts

@@ -1,9 +1,9 @@
 import type { API } from 'jsEngine/api/API';
 import { ButtonStyleType } from 'jsEngine/utils/Util';
 import { SvelteModal } from 'jsEngine/api/prompts/SvelteModal';
-import { mount } from 'svelte';
-import ButtonModalComponent from 'jsEngine/api/prompts/ButtonModalComponent.svelte';
+import { ButtonModalComponent } from 'jsEngine/api/prompts/ButtonModalComponent';
 import { Suggester } from 'jsEngine/api/prompts/Suggester';
+import { customMount } from 'jsEngine/utils/SvelteUtils';
 
 export interface ModalPromptOptions {
 	/**
@@ -73,13 +73,9 @@ export class PromptAPI {
 					this.apiInstance.app,
 					options,
 					(modal, targetEl) => {
-						return mount(ButtonModalComponent, {
-							target: targetEl,
-							props: {
-								options,
-								// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any
-								modal: modal as any,
-							},
+						return customMount<ButtonModalComponent<T>>(ButtonModalComponent, targetEl, {
+							options,
+							modal,
 						});
 					},
 					// we cast to narrow the type, so that it is inferred correctly

jsEngine/api/prompts/ButtonModalComponent.d.ts

@@ -0,0 +1,9 @@
+import type { Component } from 'svelte';
+import type { SvelteModal } from 'jsEngine/api/prompts/SvelteModal';
+
+export type ButtonModalComponent<T> = Component<{
+	options: ButtonPromptOptions<T>;
+	modal: SvelteModal<ButtonModalComponent<T>, T>;
+}>;
+
+export declare const ButtonModalComponent: ButtonModalComponent<T>;

jsEngine/engine/ExecutionStatsModal.ts

@@ -2,13 +2,15 @@ import { type App, Modal } from 'obsidian';
 import type JsEnginePlugin from 'jsEngine/main';
 import ExecutionStatsComponent from 'jsEngine/engine/ExecutionStatsComponent.svelte';
 import { type JsExecution } from 'jsEngine/engine/JsExecution';
+import { unmount } from 'svelte';
+import { customMount, type MountedComponent } from 'jsEngine/utils/SvelteUtils';
 
 /**
  * @internal
  */
 export class ExecutionStatsModal extends Modal {
 	private readonly plugin: JsEnginePlugin;
-	private component: ExecutionStatsComponent | undefined;
+	private component: MountedComponent<ExecutionStatsComponent> | undefined;
 	private execution: JsExecution | undefined;
 
 	constructor(app: App, plugin: JsEnginePlugin) {
@@ -23,7 +25,7 @@ export class ExecutionStatsModal extends Modal {
 	public onOpen(): void {
 		this.contentEl.empty();
 		if (this.component) {
-			this.component.$destroy();
+			unmount(this.component);
 		}
 
 		if (!this.contentEl.hasClass('js-engine-execution-stats-modal')) {
@@ -35,18 +37,15 @@ export class ExecutionStatsModal extends Modal {
 			return;
 		}
 
-		this.component = new ExecutionStatsComponent({
-			target: this.contentEl,
-			props: {
-				execution: this.execution,
-			},
+		this.component = customMount(ExecutionStatsComponent, this.contentEl, {
+			execution: this.execution,
 		});
 	}
 
 	public onClose(): void {
 		this.contentEl.empty();
 		if (this.component) {
-			this.component.$destroy();
+			unmount(this.component);
 		}
 	}
 }

jsEngine/messages/MessageDisplay.ts

@@ -1,13 +1,15 @@
 import { type App, Modal } from 'obsidian';
 import type JsEnginePlugin from 'jsEngine/main';
 import MessageDisplayComponent from 'jsEngine/messages/MessageDisplayComponent.svelte';
+import { unmount } from 'svelte';
+import { customMount, type MountedComponent } from 'jsEngine/utils/SvelteUtils';
 
 export class MessageDisplay extends Modal {
 	/**
 	 * Reference the JS Engine plugin.
 	 */
 	private readonly plugin: JsEnginePlugin;
-	private component: MessageDisplayComponent | undefined;
+	private component: MountedComponent<MessageDisplayComponent> | undefined;
 
 	constructor(app: App, plugin: JsEnginePlugin) {
 		super(app);
@@ -17,21 +19,18 @@ export class MessageDisplay extends Modal {
 	public onOpen(): void {
 		this.contentEl.empty();
 		if (this.component) {
-			this.component.$destroy();
+			unmount(this.component);
 		}
 
-		this.component = new MessageDisplayComponent({
-			target: this.contentEl,
-			props: {
-				messageManager: this.plugin.messageManager,
-			},
+		this.component = customMount<MessageDisplayComponent>(MessageDisplayComponent, this.contentEl, {
+			messageManager: this.plugin.messageManager,
 		});
 	}
 
 	public onClose(): void {
 		this.contentEl.empty();
 		if (this.component) {
-			this.component.$destroy();
+			unmount(this.component);
 		}
 	}
 }

jsEngine/utils/SvelteUtils.ts

@@ -0,0 +1,19 @@
+/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument */
+
+import { mount, type Component, type ComponentProps, type SvelteComponent } from 'svelte';
+
+export function customMount<Comp extends Component<any, any> | SvelteComponent>(
+	component: Component<any, any> | SvelteComponent,
+	target: HTMLElement,
+	props: ComponentProps<Comp>,
+): ComponentExports<Comp> {
+	return mount(component as any, { target, props });
+}
+
+export type AnyRecord = Record<string, any>;
+export type UnknownRecord = Record<string, unknown>;
+
+export type ComponentExports<Comp extends Component<any, any> | SvelteComponent> =
+	Comp extends SvelteComponent<any, infer Exports> ? (Exports extends any ? AnyRecord : Exports) : AnyRecord;
+
+export type MountedComponent<Comp extends Component<any, any> | SvelteComponent> = ComponentExports<Comp>;