fix: mount views with svelte api (#134)

Author: chhoumann

src/ui/PodcastView/index.ts

@@ -3,13 +3,14 @@ import type { WorkspaceLeaf } from "obsidian";
 import type { IPodNotes } from "../../types/IPodNotes";
 import { VIEW_TYPE } from "../../constants";
 import PodcastView from "./PodcastView.svelte";
+import { mount, unmount } from "svelte";
 
 export class MainView extends ItemView {
 	constructor(leaf: WorkspaceLeaf, private plugin: IPodNotes) {
 		super(leaf);
 	}
 
-	private podcastView: PodcastView | null = null;
+	private podcastView: Record<string, unknown> | null = null;
 
 	override getViewType(): string {
 		return VIEW_TYPE;
@@ -24,13 +25,16 @@ export class MainView extends ItemView {
 	}
 
 	protected override async onOpen(): Promise<void> {
-		this.podcastView = new PodcastView({
+		this.podcastView = mount(PodcastView, {
 			target: this.contentEl,
 		});
 	}
 
 	protected override async onClose(): Promise<void> {
-		this.podcastView?.$destroy();
+		if (this.podcastView) {
+			await unmount(this.podcastView);
+			this.podcastView = null;
+		}
 
 		this.contentEl.empty();
 	}

src/ui/settings/PodNotesSettingsTab.ts

@@ -9,6 +9,7 @@ import {
 import type PodNotes from "../../main";
 import PodcastQueryGrid from "./PodcastQueryGrid.svelte";
 import PlaylistManager from "./PlaylistManager.svelte";
+import { mount, unmount } from "svelte";
 import {
 	DownloadPathTemplateEngine,
 	FilePathTemplateEngine,
@@ -23,8 +24,8 @@ import { clearFeedCache } from "src/services/FeedCacheService";
 export class PodNotesSettingsTab extends PluginSettingTab {
 	plugin: PodNotes;
 
-	private podcastQueryGrid!: PodcastQueryGrid;
-	private playlistManager!: PlaylistManager;
+	private podcastQueryGrid: Record<string, unknown> | null = null;
+	private playlistManager: Record<string, unknown> | null = null;
 
 	private settingsTab: PodNotesSettingsTab;
 
@@ -51,7 +52,7 @@ export class PodNotesSettingsTab extends PluginSettingTab {
 			.setDesc("Search for podcasts by name or custom feed URL.");
 
 		const queryGridContainer = settingsContainer.createDiv();
-		this.podcastQueryGrid = new PodcastQueryGrid({
+		this.podcastQueryGrid = mount(PodcastQueryGrid, {
 			target: queryGridContainer,
 		});
 
@@ -61,7 +62,7 @@ export class PodNotesSettingsTab extends PluginSettingTab {
 			.setDesc("Add playlists to gather podcast episodes.");
 
 		const playlistManagerContainer = settingsContainer.createDiv();
-		this.playlistManager = new PlaylistManager({
+		this.playlistManager = mount(PlaylistManager, {
 			target: playlistManagerContainer,
 		});
 
@@ -76,8 +77,15 @@ export class PodNotesSettingsTab extends PluginSettingTab {
 	}
 
 	override hide(): void {
-		this.podcastQueryGrid?.$destroy();
-		this.playlistManager?.$destroy();
+		if (this.podcastQueryGrid) {
+			void unmount(this.podcastQueryGrid);
+			this.podcastQueryGrid = null;
+		}
+
+		if (this.playlistManager) {
+			void unmount(this.playlistManager);
+			this.playlistManager = null;
+		}
 	}
 
 	private addDefaultPlaybackRateSetting(container: HTMLElement): void {