refactor: get rid of global app and plugin variables

src/calendar-view/CalendarView.vue

@@ -12,8 +12,12 @@ import CalendarMonthButton from "@/components/calendar/CalendarMonthButton.vue";
 import CalendarYearButton from "@/components/calendar/CalendarYearButton.vue";
 import CalendarQuarterButton from "@/components/calendar/CalendarQuarterButton.vue";
 import { ShelfSuggestModal } from "@/components/suggests/shelf-suggest";
-import { app$, plugin$ } from "@/stores/obsidian.store";
 import { useShelfProvider } from "@/composables/use-shelf";
+import { useApp } from "@/composables/use-app";
+import { usePlugin } from "@/composables/use-plugin";
+
+const app = useApp();
+const plugin = usePlugin();
 
 const refDateMoment = ref(today());
 const refDate = computed(() => refDateMoment.value.format("YYYY-MM-DD"));
@@ -43,7 +47,7 @@ const weeksClickable = computed(() => {
 });
 
 function selectShelf() {
-  new ShelfSuggestModal(app$.value, Object.keys(pluginSettings$.value.shelves), (shelf: string | null) => {
+  new ShelfSuggestModal(app, Object.keys(pluginSettings$.value.shelves), (shelf: string | null) => {
     selectedShelf.value = shelf;
   }).open();
 }
@@ -58,19 +62,21 @@ function goToday(event: MouseEvent) {
   } else if (calendarViewSettings$.value.todayMode === "navigate") {
     const journals: string[] = [];
     for (const journalSetttings of journalsList$.value) {
-      const journal = plugin$.value.getJournal(journalSetttings.name);
+      const journal = plugin.getJournal(journalSetttings.name);
       if (!journal) continue;
       const anchorDate = journal.resolveAnchorDate(refDate.value);
       if (!anchorDate) continue;
-      const index = plugin$.value.index.getJournalIndex(journal.name);
+      const index = plugin.index.getJournalIndex(journal.name);
       if (!index) continue;
       if (index.get(anchorDate)) journals.push(journal.name);
     }
-    openDate(refDate.value, journals, event).catch(console.error);
+    openDate(app, plugin, refDate.value, journals, event).catch(console.error);
   }
 }
 function pickDate() {
   new VueModal(
+    app,
+    plugin,
     "Pick a date",
     DatePickerModal,
     {
@@ -85,34 +91,44 @@ function pickDate() {
 
 function openDay(date: string, event: MouseEvent) {
   openDate(
+    app,
+    plugin,
     date,
     journals.day.value.map((journal) => journal.name),
     event,
   ).catch(console.error);
 }
 function openWeek(date: string, event: MouseEvent) {
   openDate(
+    app,
+    plugin,
     date,
     journals.week.value.map((journal) => journal.name),
     event,
   ).catch(console.error);
 }
 function openMonth(event: MouseEvent) {
   openDate(
+    app,
+    plugin,
     refDate.value,
     journals.month.value.map((journal) => journal.name),
     event,
   ).catch(console.error);
 }
 function openQuarter(event: MouseEvent) {
   openDate(
+    app,
+    plugin,
     refDate.value,
     journals.quarter.value.map((journal) => journal.name),
     event,
   ).catch(console.error);
 }
 function openYear(event: MouseEvent) {
   openDate(
+    app,
+    plugin,
     refDate.value,
     journals.year.value.map((journal) => journal.name),
     event,

src/calendar-view/calendar-view.ts

@@ -1,12 +1,20 @@
-import { ItemView } from "obsidian";
+import { ItemView, type WorkspaceLeaf } from "obsidian";
 import { createApp, type App as VueApp } from "vue";
-import { CALENDAR_VIEW_TYPE } from "../constants";
+import { APP_KEY, CALENDAR_VIEW_TYPE, PLUGIN_KEY } from "../constants";
 import CalendarViewComponent from "./CalendarView.vue";
+import type { JournalPlugin } from "@/types/plugin.types";
 
 export class CalendarView extends ItemView {
   navigation = false;
   #vueApp: VueApp | null = null;
 
+  constructor(
+    leaf: WorkspaceLeaf,
+    private plugin: JournalPlugin,
+  ) {
+    super(leaf);
+  }
+
   getViewType(): string {
     return CALENDAR_VIEW_TYPE;
   }
@@ -20,6 +28,8 @@ export class CalendarView extends ItemView {
 
   protected onOpen(): Promise<void> {
     this.#vueApp = createApp(CalendarViewComponent);
+    this.#vueApp.provide(APP_KEY, this.app);
+    this.#vueApp.provide(PLUGIN_KEY, this.plugin);
     this.#vueApp.mount(this.contentEl);
     return Promise.resolve();
   }

src/code-blocks/navigation/NavigationBlock.vue

@@ -2,10 +2,11 @@
 import { computed } from "vue";
 import { journals$ } from "@/stores/settings.store";
 import NavigationBlockRow from "./NavigationBlockRow.vue";
-import { plugin$ } from "@/stores/obsidian.store";
 import { openDate, openDateInJournal } from "@/journals/open-date";
 import { useShelfProvider } from "@/composables/use-shelf";
-import { NavBlockRow } from "@/types/settings.types";
+import type { NavBlockRow } from "@/types/settings.types";
+import { useApp } from "@/composables/use-app";
+import { usePlugin } from "@/composables/use-plugin";
 
 const props = defineProps<{
   refDate: string;
@@ -14,8 +15,11 @@ const props = defineProps<{
 
 defineEmits<(event: "move-up" | "move-down" | "edit" | "remove", index: number) => void>();
 
+const app = useApp();
+const plugin = usePlugin();
+
 const journalSettings = computed(() => journals$.value[props.journalName]);
-const journal = computed(() => plugin$.value.getJournal(props.journalName));
+const journal = computed(() => plugin.getJournal(props.journalName));
 const shelfName = computed(() => journalSettings.value?.shelves[0] ?? null);
 
 const { journals } = useShelfProvider(shelfName);
@@ -27,10 +31,10 @@ async function navigate(type: NavBlockRow["link"], date: string, journalName?: s
     if (metadata) await journal.value?.open(metadata);
   } else if (type === "journal") {
     if (!journalName) return;
-    await openDateInJournal(date, journalName);
+    await openDateInJournal(plugin, date, journalName);
   } else {
     const journalsToUse = journals[type].value.map((journal) => journal.name);
-    await openDate(date, journalsToUse);
+    await openDate(app, plugin, date, journalsToUse);
   }
 }
 </script>

src/code-blocks/navigation/NavigationBlockEditPreview.vue

@@ -3,7 +3,8 @@ import { computed } from "vue";
 import { journals$ } from "@/stores/settings.store";
 import NavigationBlockRow from "./NavigationBlockRow.vue";
 import ObsidianIconButton from "@/components/obsidian/ObsidianIconButton.vue";
-import { plugin$ } from "@/stores/obsidian.store";
+import { usePlugin } from "@/composables/use-plugin";
+import { useShelfProvider } from "@/composables/use-shelf";
 
 const props = defineProps<{
   refDate: string;
@@ -12,8 +13,12 @@ const props = defineProps<{
 
 defineEmits<(event: "move-up" | "move-down" | "edit" | "remove", index: number) => void>();
 
+const plugin = usePlugin();
+
 const journalSettings = computed(() => journals$.value[props.journalName]);
-const journal = computed(() => plugin$.value.getJournal(props.journalName));
+const journal = computed(() => plugin.getJournal(props.journalName));
+
+useShelfProvider(journalSettings.value?.shelves[0]);
 </script>
 
 <template>

src/code-blocks/navigation/NavigationCodeBlock.vue

@@ -3,14 +3,15 @@ import { usePathData } from "@/composables/use-path-data";
 import { pluginSettings$ } from "@/stores/settings.store";
 import { computed } from "vue";
 import NavigationBlock from "./NavigationBlock.vue";
-import { plugin$ } from "@/stores/obsidian.store";
 import type { JournalMetadata } from "@/types/journal.types";
 import ObsidianIconButton from "@/components/obsidian/ObsidianIconButton.vue";
+import { usePlugin } from "@/composables/use-plugin";
 
 const props = defineProps<{
   path: string;
 }>();
 
+const plugin = usePlugin();
 const noteData = usePathData(props.path);
 
 const journalSettings = computed(() => {
@@ -24,7 +25,7 @@ const shouldNavigateExisting = computed(() => {
 
 const journal = computed(() => {
   if (!noteData.value) return null;
-  return plugin$.value.getJournal(noteData.value.journal);
+  return plugin.getJournal(noteData.value.journal);
 });
 const nextMetadata = computed<JournalMetadata | null>(() => {
   if (!noteData.value || !journal.value) return null;

src/code-blocks/navigation/nav-processor.ts

@@ -1,24 +1,29 @@
-import { MarkdownRenderChild } from "obsidian";
+import { type App, MarkdownRenderChild } from "obsidian";
 import { createApp, type App as VueApp } from "vue";
 import NavigationCodeBlock from "./NavigationCodeBlock.vue";
+import type { JournalPlugin } from "@/types/plugin.types";
+import { APP_KEY, PLUGIN_KEY } from "@/constants";
 
 export class NavCodeBlockProcessor extends MarkdownRenderChild {
   private _vueApp: VueApp | undefined;
-  private mode: string | undefined;
 
   constructor(
+    app: App,
+    plugin: JournalPlugin,
     containerElement: HTMLElement,
     private source: string,
     private path: string,
   ) {
     super(containerElement);
-    this.init();
+    this.init(app, plugin);
   }
 
-  init(): void {
+  init(app: App, plugin: JournalPlugin): void {
     this._vueApp = createApp(NavigationCodeBlock, {
       path: this.path,
     });
+    this._vueApp.provide(APP_KEY, app);
+    this._vueApp.provide(PLUGIN_KEY, plugin);
     this._vueApp.mount(this.containerEl);
   }
 

src/code-blocks/timeline/timeline-processor.ts

@@ -1,21 +1,25 @@
-import { MarkdownRenderChild } from "obsidian";
+import { type App, MarkdownRenderChild } from "obsidian";
 import { createApp, type App as VueApp } from "vue";
 import TimelineCodeBlock from "./TimelineCodeBlock.vue";
+import type { JournalPlugin } from "@/types/plugin.types";
+import { APP_KEY, PLUGIN_KEY } from "@/constants";
 
 export class TimelineCodeBlockProcessor extends MarkdownRenderChild {
   private _vueApp: VueApp | undefined;
   private mode: string | undefined;
 
   constructor(
+    app: App,
+    plugin: JournalPlugin,
     containerElement: HTMLElement,
     private source: string,
     private path: string,
   ) {
     super(containerElement);
-    this.init();
+    this.init(app, plugin);
   }
 
-  init(): void {
+  init(app: App, plugin: JournalPlugin): void {
     const lines = this.source.split("\n");
     for (const line of lines) {
       const [key, value] = line.split(":");
@@ -27,6 +31,8 @@ export class TimelineCodeBlockProcessor extends MarkdownRenderChild {
       mode: this.mode,
       path: this.path,
     });
+    this._vueApp.provide(APP_KEY, app);
+    this._vueApp.provide(PLUGIN_KEY, plugin);
     this._vueApp.mount(this.containerEl);
   }
 

src/components/DatePicker.vue

@@ -5,6 +5,8 @@ import { VueModal } from "./modals/vue-modal";
 import ObsidianButton from "./obsidian/ObsidianButton.vue";
 import ObsidianIcon from "./obsidian/ObsidianIcon.vue";
 import DatePickerModal from "./modals/DatePicker.modal.vue";
+import { useApp } from "@/composables/use-app";
+import { usePlugin } from "@/composables/use-plugin";
 
 const props = withDefaults(
   defineProps<{
@@ -22,6 +24,9 @@ const props = withDefaults(
   },
 );
 
+const app = useApp();
+const plugin = usePlugin();
+
 const model = defineModel<string>();
 const momentDate = computed(() => {
   if (model.value) {
@@ -38,6 +43,8 @@ const formattedDate = computed(() => {
 
 function openPickerModal() {
   new VueModal(
+    app,
+    plugin,
     "Pick a date",
     DatePickerModal,
     {

src/components/FolderInput.vue

@@ -1,18 +1,20 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, ref } from "vue";
 import { FolderSuggest } from "./suggests/folder-suggest";
+import { useApp } from "@/composables/use-app";
 
 defineProps<{
   placeholder?: string;
   disabled?: boolean;
 }>();
 const model = defineModel<string>();
 const element = ref<HTMLInputElement>();
+const app = useApp();
 
 let suggest: FolderSuggest;
 onMounted(() => {
   if (element.value) {
-    suggest = new FolderSuggest(element.value);
+    suggest = new FolderSuggest(app, element.value);
   }
 });
 onBeforeUnmount(() => {

src/components/IconSelector.vue

@@ -3,6 +3,7 @@ import { onMounted, ref } from "vue";
 import { IconSuggest } from "./suggests/icon-suggest";
 import ObsidianIcon from "./obsidian/ObsidianIcon.vue";
 import ObsidianTextInput from "./obsidian/ObsidianTextInput.vue";
+import { useApp } from "@/composables/use-app";
 
 defineProps<{
   placeholder?: string;
@@ -14,9 +15,11 @@ defineEmits<{
 const model = defineModel<string>();
 const inputCmp = ref<InstanceType<typeof ObsidianTextInput>>();
 
+const app = useApp();
+
 onMounted(() => {
   if (inputCmp.value) {
-    new IconSuggest(inputCmp.value.$el);
+    new IconSuggest(app, inputCmp.value.$el);
   }
 });
 </script>

src/components/VariableReferenceHint.vue

@@ -2,14 +2,19 @@
 import { VueModal } from "./modals/vue-modal";
 import VariableReference from "./modals/VariableReference.modal.vue";
 import type { JournalSettings } from "../types/settings.types";
+import { useApp } from "@/composables/use-app";
+import { usePlugin } from "@/composables/use-plugin";
 
 const props = defineProps<{
   type: JournalSettings["write"]["type"];
   dateFormat: string;
 }>();
 
+const app = useApp();
+const plugin = usePlugin();
+
 function show() {
-  new VueModal("Variable reference", VariableReference, {
+  new VueModal(app, plugin, "Variable reference", VariableReference, {
     type: props.type,
     dateFormat: props.dateFormat,
   }).open();