Migrated ModalVault syntax to svelte 5

.prettierrc.js

@@ -7,7 +7,6 @@ module.exports = {
   singleQuote: true,
   arrowParens: 'avoid',
   bracketSameLine: true,
-  svelteStrictMode: true,
   svelteBracketNewLine: false,
   svelteAllowShorthand: true,
   svelteIndentScriptAndStyle: true,

src/components/ModalVault.svelte

@@ -30,44 +30,55 @@
   import type OmnisearchPlugin from '../main'
   import LazyLoader from './lazy-loader/LazyLoader.svelte'
 
-  export let modal: OmnisearchVaultModal
+  let {
-  export let previousQuery: string | undefined
+    modal,
-  export let plugin: OmnisearchPlugin
+    previousQuery,
+    plugin,
+  }: {
+    modal: OmnisearchVaultModal
+    previousQuery?: string | undefined
+    plugin: OmnisearchPlugin
+  } = $props()
 
-  let selectedIndex = 0
+  let selectedIndex = $state(0)
   let historySearchIndex = 0
-  let searchQuery: string | undefined
+  let searchQuery = $state(previousQuery ?? '')
-  let resultNotes: ResultNote[] = []
+  let resultNotes: ResultNote[] = $state([])
   let query: Query
-  let indexingStepDesc = ''
+  let indexingStepDesc = $state('')
-  let searching = true
+  let searching = $state(true)
   let refInput: InputSearch | undefined
-  let openInNewPaneKey: string
+  let openInNewPaneKey: string = $state('')
-  let openInCurrentPaneKey: string
+  let openInCurrentPaneKey: string = $state('')
-  let createInNewPaneKey: string
+  let createInNewPaneKey: string = $state('')
-  let createInCurrentPaneKey: string
+  let createInCurrentPaneKey: string = $state('')
   let openInNewLeafKey: string = getCtrlKeyLabel() + getAltKeyLabel() + ' ↵'
 
-  $: selectedNote = resultNotes[selectedIndex]
+  const selectedNote = $derived(resultNotes[selectedIndex])
-  $: searchQuery = searchQuery ?? previousQuery
+
-  $: if (plugin.settings.openInNewPane) {
+  $effect(() => {
-    openInNewPaneKey = '↵'
+    if (plugin.settings.openInNewPane) {
-    openInCurrentPaneKey = getCtrlKeyLabel() + ' ↵'
+      openInNewPaneKey = '↵'
-    createInNewPaneKey = 'Shift ↵'
+      openInCurrentPaneKey = getCtrlKeyLabel() + ' ↵'
-    createInCurrentPaneKey = getCtrlKeyLabel() + ' Shift ↵'
+      createInNewPaneKey = 'Shift ↵'
-  } else {
+      createInCurrentPaneKey = getCtrlKeyLabel() + ' Shift ↵'
-    openInNewPaneKey = getCtrlKeyLabel() + ' ↵'
+    } else {
-    openInCurrentPaneKey = '↵'
+      openInNewPaneKey = getCtrlKeyLabel() + ' ↵'
-    createInNewPaneKey = getCtrlKeyLabel() + ' Shift ↵'
+      openInCurrentPaneKey = '↵'
-    createInCurrentPaneKey = 'Shift ↵'
+      createInNewPaneKey = getCtrlKeyLabel() + ' Shift ↵'
-  }
+      createInCurrentPaneKey = 'Shift ↵'
-  $: if (searchQuery) {
+    }
-    updateResultsDebounced()
+  })
-  } else {
+
-    searching = false
+  $effect(() => {
-    resultNotes = []
+    if (searchQuery) {
-  }
+      updateResultsDebounced()
-  $: {
+    } else {
+      searching = false
+      resultNotes = []
+    }
+  })
+  $effect(() => {
     switch ($indexingStep) {
       case IndexingStepType.LoadingCache:
         indexingStepDesc = 'Loading cache...'
@@ -87,7 +98,7 @@
         indexingStepDesc = ''
         break
     }
-  }
+  })
 
   onMount(async () => {
     eventBus.enable('vault')
@@ -305,17 +316,17 @@
 </script>
 
 <InputSearch
-  bind:this="{refInput}"
+  bind:this={refInput}
-  plugin="{plugin}"
+  {plugin}
-  initialValue="{searchQuery}"
+  initialValue={searchQuery}
-  on:input="{e => (searchQuery = e.detail)}"
+  on:input={e => (searchQuery = e.detail)}
   placeholder="Omnisearch - Vault">
   <div class="omnisearch-input-container__buttons">
     {#if plugin.settings.showCreateButton}
-      <button on:click="{onClickCreateNote}">Create note</button>
+      <button on:click={onClickCreateNote}>Create note</button>
     {/if}
     {#if Platform.isMobile}
-      <button on:click="{switchToInFileModal}">In-File search</button>
+      <button on:click={switchToInFileModal}>In-File search</button>
     {/if}
   </div>
 </InputSearch>
@@ -329,19 +340,19 @@
 <ModalContainer>
   {#each resultNotes as result, i}
     <LazyLoader
-      height="{100}"
+      height={100}
-      offset="{500}"
+      offset={500}
-      keep="{true}"
+      keep={true}
-      fadeOption="{{ delay: 0, duration: 0 }}">
+      fadeOption={{ delay: 0, duration: 0 }}>
       <ResultItemVault
-        plugin="{plugin}"
+        {plugin}
-        selected="{i === selectedIndex}"
+        selected={i === selectedIndex}
-        note="{result}"
+        note={result}
-        on:mousemove="{_ => (selectedIndex = i)}"
+        on:mousemove={_ => (selectedIndex = i)}
-        on:click="{onClick}"
+        on:click={onClick}
-        on:auxclick="{evt => {
+        on:auxclick={evt => {
           if (evt.button == 1) openNoteInNewPane()
-        }}" />
+        }} />
     </LazyLoader>
   {/each}
   <div style="text-align: center;">

src/components/modals.ts

@@ -4,6 +4,7 @@ import ModalVault from './ModalVault.svelte'
 import ModalInFile from './ModalInFile.svelte'
 import { Action, eventBus, EventNames, isInputComposition } from '../globals'
 import type OmnisearchPlugin from '../main'
+import { mount, unmount } from 'svelte'
 
 abstract class OmnisearchModal extends Modal {
   protected constructor(plugin: OmnisearchPlugin) {
@@ -170,7 +171,7 @@ export class OmnisearchVaultModal extends OmnisearchModal {
         : null
 
       // Instantiate and display the Svelte component
-      const cmp = new ModalVault({
+      const cmp = mount(ModalVault, {
         target: this.modalEl,
         props: {
           plugin,
@@ -178,10 +179,11 @@ export class OmnisearchVaultModal extends OmnisearchModal {
           previousQuery: query || selectedText || previous || '',
         },
       })
+
       this.onClose = () => {
         // Since the component is manually created,
         // we also need to manually destroy it
-        cmp.$destroy()
+        unmount(cmp)
       }
     })
   }