Fixes for 2.0-beta.2

- properly unload UI and eventlisteners when plugin gets unloaded
- Fix styling when theme background color is white
- fix for Month metadata not refreshing when switching months

Author: liamcain

index.d.ts

@@ -1,5 +1,5 @@
 import type { Locale, Moment } from "moment";
-import type { App, TFile } from "obsidian";
+import type { Plugin, TFile } from "obsidian";
 import type { IGranularity } from "obsidian-daily-notes-interface";
 import { SvelteComponentTyped } from "svelte";
 
@@ -78,7 +78,7 @@ export interface IDayMetadata
     IEvaluatedMetadata {}
 
 export class Calendar extends SvelteComponentTyped<{
-  app: App;
+  plugin: Plugin;
   showWeekNums: boolean;
   localeData?: Locale;
   eventHandlers: CallableFunction[];

src/components/Calendar.svelte

@@ -1,7 +1,7 @@
 <svelte:options immutable />
 
 <script lang="ts">
-  import { App, debounce } from "obsidian";
+  import { Plugin, debounce } from "obsidian";
   import type { Locale, Moment } from "moment";
   import { setContext } from "svelte";
   import { writable } from "svelte/store";
@@ -22,7 +22,7 @@
   export let eventHandlers: CallableFunction[];
 
   // External sources (All optional)
-  export let app: App;
+  export let plugin: Plugin;
   export let sources: ICalendarSource[] = [];
   export let getSourceSettings: (sourceId: string) => ISourceSettings;
   export let selectedId: string;
@@ -31,7 +31,7 @@
   export let today: Moment = window.moment();
   export let displayedMonth: Moment = today;
 
-  setContext(IS_MOBILE, (window.app as any).isMobile);
+  setContext(IS_MOBILE, (plugin.app as any).isMobile);
 
   let displayedMonthStore = writable<Moment>(displayedMonth);
   setContext(DISPLAYED_MONTH, displayedMonthStore);
@@ -47,7 +47,7 @@
   $: month = getMonth($displayedMonthStore, localeData);
   $: daysOfWeek = getDaysOfWeek(today, localeData);
 
-  const fileCache = new PeriodicNotesCache(app, sources);
+  const fileCache = new PeriodicNotesCache(plugin, sources);
 
   function openPopover() {
     showPopover = true;

src/components/Month.svelte

@@ -44,14 +44,16 @@
   const dispatch = createEventDispatcher();
 
   let file: TFile | null;
-  fileCache.store.subscribe(() => {
+  function getMetadata() {
     file = fileCache.getFile($displayedMonth, "month");
     metadata = fileCache.getEvaluatedMetadata(
       "month",
       $displayedMonth,
       getSourceSettings
     );
-  });
+  }
+  fileCache.store.subscribe(getMetadata);
+  displayedMonth.subscribe(getMetadata);
 
   function handleHover(event: PointerEvent, meta: IDayMetadata) {
     if (!appHasMonthlyNotesPluginLoaded()) {

src/components/popover/Box.svelte

@@ -61,7 +61,7 @@
     background-color: var(--background-primary);
     border-radius: 4px;
     box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.25);
-    color: white;
+    color: var(--text-normal);
     display: flex;
     flex-direction: column;
     padding: 24px;

src/fileStore.ts

@@ -1,6 +1,5 @@
-import { App, TAbstractFile, TFile } from "obsidian";
 import type { Moment } from "moment";
-import { get, Writable, writable } from "svelte/store";
+import { App, Plugin, TAbstractFile, TFile } from "obsidian";
 import {
   getAllDailyNotes,
   getAllMonthlyNotes,
@@ -10,6 +9,7 @@ import {
   getDateUID,
   IGranularity,
 } from "obsidian-daily-notes-interface";
+import { get, Writable, writable } from "svelte/store";
 
 import type { ICalendarSource, IDayMetadata, ISourceSettings } from "./types";
 
@@ -46,24 +46,28 @@ export default class PeriodicNotesCache {
   public store: Writable<Record<PeriodicNoteID, TFile>>;
   private sources: ICalendarSource[];
 
-  constructor(app: App, sources: ICalendarSource[]) {
-    this.app = app;
+  constructor(plugin: Plugin, sources: ICalendarSource[]) {
+    this.app = plugin.app;
     this.sources = sources;
     this.store = writable<Record<PeriodicNoteID, TFile>>({});
 
-    // TODO register this to plugin
-    app.workspace.onLayoutReady(() => {
-      app.vault.on("create", this.onFileCreated.bind(this));
-      app.vault.on("delete", this.onFileDeleted.bind(this));
-      app.vault.on("rename", this.onFileRenamed.bind(this));
-      app.vault.on("modify", this.onFileModified.bind(this));
+    plugin.app.workspace.onLayoutReady(() => {
+      const { vault } = this.app;
+      plugin.registerEvent(vault.on("create", this.onFileCreated, this));
+      plugin.registerEvent(vault.on("delete", this.onFileDeleted, this));
+      plugin.registerEvent(vault.on("rename", this.onFileRenamed, this));
+      plugin.registerEvent(vault.on("modify", this.onFileModified, this));
       this.initialize();
     });
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const workspace = app.workspace as any;
-    workspace.on("periodic-notes:settings-updated", this.initialize, this);
-    workspace.on("calendar:metadata-updated", this.initialize, this);
+    const workspace = this.app.workspace as any;
+    plugin.registerEvent(
+      workspace.on("periodic-notes:settings-updated", this.initialize, this)
+    );
+    plugin.registerEvent(
+      workspace.on("calendar:metadata-updated", this.initialize, this)
+    );
   }
 
   public onFileCreated(file: TAbstractFile): void {