diff --git a/src/obsidian/custom-filter-modal.ts b/src/obsidian/custom-filter-modal.ts index 7e4a22a..89f135c 100644 --- a/src/obsidian/custom-filter-modal.ts +++ b/src/obsidian/custom-filter-modal.ts @@ -1,28 +1,33 @@ import { Modal } from "obsidian"; -import CustomFilterApp from "../svelte/custom-filter-app/index.svelte"; import VaultExplorerPlugin from "src/main"; +import { mount, unmount } from "svelte"; +import CustomFilterApp from "../svelte/custom-filter-app/index.svelte"; export default class CustomFilterModal extends Modal { - component: CustomFilterApp | null; + customFilterApp: ReturnType | null; plugin: VaultExplorerPlugin; constructor(plugin: VaultExplorerPlugin) { super(plugin.app); this.plugin = plugin; - this.component = null; + this.customFilterApp = null; } onOpen(): void { const { contentEl } = this; - this.component = new CustomFilterApp({ + this.customFilterApp = mount(CustomFilterApp, { target: contentEl }); } onClose(): void { const { contentEl } = this; - this.component?.$destroy(); + + if (this.customFilterApp) { + unmount(this.customFilterApp); + } + contentEl.empty(); } } diff --git a/src/obsidian/vault-explorer-settings-tab.ts b/src/obsidian/vault-explorer-settings-tab.ts index 146771a..55786b2 100644 --- a/src/obsidian/vault-explorer-settings-tab.ts +++ b/src/obsidian/vault-explorer-settings-tab.ts @@ -26,11 +26,12 @@ import { TExplorerView } from "src/types"; import ImageSourceApp from "../svelte/image-source-app/index.svelte"; import { clearSMICache } from "src/svelte/app/services/smi-cache"; +import { mount, unmount } from "svelte"; export default class VaultExplorerSettingsTab extends PluginSettingTab { plugin: VaultExplorerPlugin; - imageSourceApp: ImageSourceApp | null; + imageSourceApp: ReturnType | null; constructor(app: App, plugin: VaultExplorerPlugin) { super(app, plugin); @@ -230,7 +231,7 @@ export default class VaultExplorerSettingsTab extends PluginSettingTab { new Setting(containerEl).setName("Grid view").setHeading(); - this.imageSourceApp = new ImageSourceApp({ + this.imageSourceApp = mount(ImageSourceApp, { target: containerEl }); @@ -683,7 +684,9 @@ export default class VaultExplorerSettingsTab extends PluginSettingTab { } onClose() { - this.imageSourceApp?.$destroy(); + if (this.imageSourceApp) { + unmount(this.imageSourceApp); + } } private updateViewOrder( diff --git a/src/obsidian/vault-explorer-view.ts b/src/obsidian/vault-explorer-view.ts index 2aeeed1..5c7b082 100644 --- a/src/obsidian/vault-explorer-view.ts +++ b/src/obsidian/vault-explorer-view.ts @@ -1,18 +1,19 @@ import { ItemView, WorkspaceLeaf } from "obsidian"; import { VAULT_EXPLORER_VIEW } from "src/constants"; -import VaultExplorerApp from "../svelte/app/index.svelte"; -import VaultExplorerPlugin from "src/main"; import EventManager from "src/event/event-manager"; import { PluginEvent } from "src/event/types"; +import VaultExplorerPlugin from "src/main"; +import { mount, unmount } from "svelte"; +import VaultExplorerApp from "../svelte/app/index.svelte"; export default class VaultExplorerView extends ItemView { - component: VaultExplorerApp | null; + vaultExplorerApp: ReturnType | null; plugin: VaultExplorerPlugin; constructor(leaf: WorkspaceLeaf, plugin: VaultExplorerPlugin) { super(leaf); - this.component = null; + this.vaultExplorerApp = null; this.plugin = plugin; this.navigation = true; } @@ -43,12 +44,14 @@ export default class VaultExplorerView extends ItemView { const containerEl = this.containerEl.children[1]; - this.component = new VaultExplorerApp({ + this.vaultExplorerApp = mount(VaultExplorerApp, { target: containerEl }); } async onClose() { - this.component?.$destroy(); + if (this.vaultExplorerApp) { + unmount(this.vaultExplorerApp); + } } } diff --git a/src/svelte/app/services/time-string.ts b/src/svelte/app/services/time-string.ts index 767fd53..8630e43 100644 --- a/src/svelte/app/services/time-string.ts +++ b/src/svelte/app/services/time-string.ts @@ -1,8 +1,8 @@ import { moment } from "obsidian"; export const formatAsBearTimeString = (milliseconds: number) => { - const now = moment.default(); - const time = moment.default(milliseconds); + const now = (moment as any)(); + const time = (moment as any)(milliseconds); const diffInSeconds = now.diff(time, "seconds"); const diffInMinutes = now.diff(time, "minutes"); diff --git a/src/svelte/shared/components/tab.svelte b/src/svelte/shared/components/tab.svelte index d2de6c2..938cd78 100644 --- a/src/svelte/shared/components/tab.svelte +++ b/src/svelte/shared/components/tab.svelte @@ -104,4 +104,3 @@ background-color: var(--background-modifier-hover); } -`` diff --git a/src/svelte/shared/services/time-utils.ts b/src/svelte/shared/services/time-utils.ts index 315a6a5..421dfdd 100644 --- a/src/svelte/shared/services/time-utils.ts +++ b/src/svelte/shared/services/time-utils.ts @@ -7,7 +7,7 @@ const DATE_FORMATS = ["YYYY-MM-DDTHH:mm:ss", "YYYY-MM-DDTHH:mm", "YYYY-MM-DD"]; * @returns - The current time in milliseconds */ export const getStartOfTodayMillis = () => { - return moment.default().startOf("day").valueOf(); + return (moment as any)().startOf("day").valueOf(); }; /** @@ -16,7 +16,7 @@ export const getStartOfTodayMillis = () => { * @returns - The start of the day in milliseconds */ export const getStartOfDayMillis = (date: string) => { - return moment.default(date).startOf("day").valueOf(); + return (moment as any)(date).startOf("day").valueOf(); }; /** @@ -24,19 +24,19 @@ export const getStartOfDayMillis = (date: string) => { * @returns - The start of the week in milliseconds */ export const getStartOfThisWeekMillis = () => { - return moment.default().startOf("week").valueOf(); + return (moment as any)().startOf("week").valueOf(); }; export const getMomentDate = (date: string) => { - return moment.default(date, DATE_FORMATS, true); + return (moment as any)(date, DATE_FORMATS, true); }; export const getDateDaysAgo = (daysAgo: number) => { - return moment.default().subtract(daysAgo, "days").format("YYYY-MM-DD"); + return (moment as any)().subtract(daysAgo, "days").format("YYYY-MM-DD"); }; export const getDateDaysAhead = (daysAgo: number) => { - return moment.default().add(daysAgo, "days").format("YYYY-MM-DD"); + return (moment as any)().add(daysAgo, "days").format("YYYY-MM-DD"); }; /** @@ -45,7 +45,7 @@ export const getDateDaysAhead = (daysAgo: number) => { */ export const getStartOfLastWeekMillis = () => { //This is the Sunday the previous week - return moment.default().subtract(1, "weeks").startOf("week").valueOf(); + return (moment as any)().subtract(1, "weeks").startOf("week").valueOf(); }; /** @@ -54,7 +54,7 @@ export const getStartOfLastWeekMillis = () => { * @returns - The date in milliseconds */ export const getTimeMillis = (date: string) => { - const momentDate = moment.default(date, DATE_FORMATS, true); + const momentDate = (moment as any)()(date, DATE_FORMATS, true); if (!momentDate.isValid()) { throw new Error(`Date format not handled: ${date}`); @@ -68,7 +68,7 @@ export const getTimeMillis = (date: string) => { * @returns - True if the date is supported, false otherwise */ export const isDateSupported = (date: string) => { - const momentDate = moment.default(date, DATE_FORMATS, true); + const momentDate = (moment as any)()(date, DATE_FORMATS, true); return momentDate.isValid(); }; @@ -78,7 +78,7 @@ export const isDateSupported = (date: string) => { * @returns - The end of the day in milliseconds */ export const getEndOfDayMillis = (date: string) => { - const day = moment.default(date); + const day = (moment as any)()(date); day.set({ hour: 23, minute: 59,