Refactored Svelte components

package.json

@@ -4,7 +4,7 @@
   "description": "Search over organization",
   "main": "dist/main.js",
   "scripts": {
-    "dev": "node esbuild.config.mjs",
+    "dev": "pnpm run build && node esbuild.config.mjs",
     "build": "tsc -noEmit -skipLibCheck && node esbuild.config.mjs production",
     "version": "node version-bump.mjs && git add manifest.json versions.json package.json",
     "lint": "eslint . --ext .ts --fix --ignore-path .gitignore",

src/CmpResultInFile.svelte

@@ -1,25 +0,0 @@
-<script lang="ts">
-import { createEventDispatcher } from "svelte"
-import type { ResultNote } from "./globals"
-import { highlighter, makeExcerpt, stringsToRegex } from "./utils"
-
-const dispatch = createEventDispatcher()
-export let offset: number
-export let note: ResultNote
-export let index = 0
-export let selected = false
-
-$: reg = stringsToRegex(note.foundWords)
-</script>
-
-<div
-  class="suggestion-item omnisearch-result"
-  data-item-id={index}
-  class:is-selected={selected}
-  on:mousemove={(e) => dispatch("hover")}
-  on:click={(e) => dispatch("click")}
->
-  <div class="omnisearch-result__body">
-    {@html makeExcerpt(note?.content ?? "", offset).replace(reg, highlighter)}
-  </div>
-</div>

src/components/InputSearch.svelte

@@ -10,7 +10,6 @@ let elInput: HTMLInputElement
 onMount(async () => {
   await tick()
   elInput.focus()
-  // elInput.value = $searchQuery
   elInput.select()
 })
 

src/components/ModalContainer.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+</script>
+
+<div class="modal-content" on:mousedown={(e) => e.preventDefault()}>
+  <slot />
+</div>

src/components/ModalInFile.svelte

@@ -3,22 +3,23 @@ let lastSearch = ""
 </script>
 
 <script lang="ts">
-import CmpInput from "./CmpInput.svelte"
-import CmpResultInFile from "./CmpResultInFile.svelte"
+import InputSearch from "./InputSearch.svelte"
+import ResultIemVault from "./ResultItemVault.svelte"
 import {
   eventBus,
   excerptAfter,
   type ResultNote,
   type SearchMatch,
-} from "./globals"
-import { loopIndex } from "./utils"
+} from "../globals"
+import { loopIndex } from "../utils"
 import { onDestroy, onMount, tick } from "svelte"
 import { MarkdownView } from "obsidian"
-import { getSuggestions } from "./search"
-import type { ModalInFile, ModalVault } from "./modal"
+import { getSuggestions } from "../search"
+import ModalContainer from "./ModalContainer.svelte"
+import type { OmnisearchInFileModal, OmnisearchVaultModal } from "src/modal";
 
-export let modal: ModalInFile
-export let parent: ModalVault | null = null
+export let modal: OmnisearchInFileModal
+export let parent: OmnisearchVaultModal | null = null
 export let singleFilePath = ""
 export let searchQuery: string
 
@@ -93,7 +94,7 @@ function moveIndex(dir: 1 | -1): void {
 
 function scrollIntoView(): void {
   tick().then(() => {
-    const elem = document.querySelector(`[data-item-id="${selectedIndex}"]`)
+    const elem = document.querySelector(`[data-result-id="${selectedIndex}"]`)
     elem?.scrollIntoView({ behavior: "auto", block: "nearest" })
   })
 }
@@ -123,18 +124,18 @@ async function openSelection(): Promise<void> {
 </script>
 
 <div class="modal-title">Omnisearch - File</div>
-<CmpInput value={searchQuery} on:input={(e) => (searchQuery = e.detail)} />
+<InputSearch value={searchQuery} on:input={(e) => (searchQuery = e.detail)} />
 
-<div class="modal-content">
+<ModalContainer>
   <div class="prompt-results">
     {#if groupedOffsets.length && note}
       {#each groupedOffsets as offset, i}
-        <CmpResultInFile
+        <ResultIemVault
           {offset}
           {note}
           index={i}
           selected={i === selectedIndex}
-          on:hover={(e) => (selectedIndex = i)}
+          on:mousemove={(e) => (selectedIndex = i)}
           on:click={openSelection}
         />
       {/each}
@@ -142,7 +143,7 @@ async function openSelection(): Promise<void> {
       <center> We found 0 result for your search here. </center>
     {/if}
   </div>
-</div>
+</ModalContainer>
 <div class="prompt-instructions">
   <div class="prompt-instruction">
     <span class="prompt-instruction-command">↑↓</span><span>to navigate</span>

src/components/ModalVault.svelte

@@ -5,15 +5,16 @@ let lastSearch = ""
 <script lang="ts">
 import { TFile } from "obsidian"
 import { onMount, tick } from "svelte"
-import CmpInput from "./CmpInput.svelte"
-import CmpResultNote from "./CmpResultNote.svelte"
-import { eventBus, type ResultNote } from "./globals"
-import { ModalInFile, type ModalVault } from "./modal"
-import { createNote, openNote } from "./notes"
-import { getSuggestions } from "./search"
-import { loopIndex } from "./utils"
+import InputSearch from "./InputSearch.svelte"
+import ModalContainer from "./ModalContainer.svelte"
+import ResultIemInFile from "./ResultItemInFile.svelte"
+import { eventBus, type ResultNote } from "../globals"
+import { createNote, openNote } from "../notes"
+import { getSuggestions } from "../search"
+import { loopIndex } from "../utils"
+import { OmnisearchInFileModal, type OmnisearchVaultModal } from "src/modal"
 
-export let modal: ModalVault
+export let modal: OmnisearchVaultModal
 let selectedIndex = 0
 let searchQuery: string
 let resultNotes: ResultNote[] = []
@@ -67,7 +68,7 @@ function onInputAltEnter(): void {
     const file = app.vault.getAbstractFileByPath(selectedNote.path)
     if (file && file instanceof TFile) {
       // modal.close()
-      new ModalInFile(app, file, searchQuery, modal).open()
+      new OmnisearchInFileModal(app, file, searchQuery, modal).open()
     }
   }
 }
@@ -81,7 +82,7 @@ function scrollIntoView(): void {
   tick().then(() => {
     if (selectedNote) {
       const elem = document.querySelector(
-        `[data-note-id="${selectedNote.path}"]`
+        `[data-result-id="${selectedNote.path}"]`
       )
       elem?.scrollIntoView({ behavior: "auto", block: "nearest" })
     }
@@ -90,15 +91,15 @@ function scrollIntoView(): void {
 </script>
 
 <div class="modal-title">Omnisearch - Vault</div>
-<CmpInput value={lastSearch} on:input={(e) => (searchQuery = e.detail)} />
+<InputSearch value={lastSearch} on:input={(e) => (searchQuery = e.detail)} />
 
-<div class="modal-content">
+<ModalContainer>
   <div class="prompt-results">
     {#each resultNotes as result, i}
-      <CmpResultNote
+      <ResultIemInFile
         selected={i === selectedIndex}
         note={result}
-        on:hover={(e) => (selectedIndex = i)}
+        on:mousemove={(e) => (selectedIndex = i)}
         on:click={onClick}
       />
     {/each}
@@ -106,7 +107,8 @@ function scrollIntoView(): void {
       <center> We found 0 result for your search here. </center>
     {/if}
   </div>
-</div>
+</ModalContainer>
+
 <div class="prompt-instructions">
   <div class="prompt-instruction">
     <span class="prompt-instruction-command">↑↓</span><span>to navigate</span>

src/components/ResultItemContainer.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+import { createEventDispatcher } from "svelte"
+
+export let id: string
+export let selected = false
+</script>
+
+<div
+  data-result-id={id}
+  class="suggestion-item omnisearch-result"
+  class:is-selected={selected}
+  on:mousemove
+  on:click
+  on:auxclick
+>
+  <slot />
+</div>

src/components/ResultItemInFile.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
-import { createEventDispatcher } from "svelte"
-import type { ResultNote } from "./globals"
-import { getMatches } from "./search"
-import { highlighter, makeExcerpt, stringsToRegex } from "./utils"
+import type { ResultNote } from "../globals"
+import { getMatches } from "../search"
+import { highlighter, makeExcerpt, stringsToRegex } from "../utils"
+import ResultItemContainer from "./ResultItemContainer.svelte"
 
-const dispatch = createEventDispatcher()
 export let selected = false
 export let note: ResultNote
 
@@ -13,13 +12,7 @@ $: matches = getMatches(note.content, reg)
 $: cleanedContent = makeExcerpt(note.content, note.matches[0]?.offset ?? -1)
 </script>
 
-<div
-  data-note-id={note.path}
-  class="suggestion-item omnisearch-result"
-  class:is-selected={selected}
-  on:mousemove={(e) => dispatch("hover")}
-  on:click={(e) => dispatch("click")}
->
+<ResultItemContainer id={note.path} {selected} on:mousemove on:click>
   <span class="omnisearch-result__title">
     {@html note.basename.replace(reg, highlighter)}
   </span>
@@ -30,4 +23,4 @@ $: cleanedContent = makeExcerpt(note.content, note.matches[0]?.offset ?? -1)
   <div class="omnisearch-result__body">
     {@html cleanedContent.replace(reg, highlighter)}
   </div>
-</div>
+</ResultItemContainer>

src/components/ResultItemVault.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+import type { ResultNote } from "../globals"
+import { highlighter, makeExcerpt, stringsToRegex } from "../utils"
+import ResultIemContainer from "./ResultItemContainer.svelte"
+
+export let offset: number
+export let note: ResultNote
+export let index = 0
+export let selected = false
+
+$: reg = stringsToRegex(note.foundWords)
+$: cleanedContent = makeExcerpt(note?.content ?? "", offset)
+</script>
+
+<ResultIemContainer id={index.toString()} {selected} on:mousemove on:click>
+  <div class="omnisearch-result__body">
+    {@html cleanedContent.replace(reg, highlighter)}
+  </div>
+</ResultIemContainer>

src/main.ts

@@ -5,7 +5,7 @@ import {
   removeFromIndex,
   removeFromIndexByPath,
 } from './search'
-import { ModalInFile, ModalVault } from './modal'
+import { OmnisearchInFileModal, OmnisearchVaultModal } from './modal'
 
 export default class OmnisearchPlugin extends Plugin {
   async onload(): Promise<void> {
@@ -14,7 +14,7 @@ export default class OmnisearchPlugin extends Plugin {
       id: 'show-modal',
       name: 'Vault search',
       callback: () => {
-        new ModalVault(app).open()
+        new OmnisearchVaultModal(app).open()
       },
     })
 
@@ -25,7 +25,7 @@ export default class OmnisearchPlugin extends Plugin {
         const view = app.workspace.getActiveViewOfType(MarkdownView)
         if (view) {
           if (!checking) {
-            new ModalInFile(app, view.file).open()
+            new OmnisearchInFileModal(app, view.file).open()
           }
           return true
         }

src/modal.ts

@@ -1,9 +1,9 @@
 import { App, Modal, TFile } from 'obsidian'
-import CmpModalVault from './CmpModalVault.svelte'
-import CmpModalInFile from './CmpModalInFile.svelte'
+import ModalVault from './components/ModalVault.svelte'
+import ModalInFile from './components/ModalInFile.svelte'
 import { eventBus } from './globals'
 
-abstract class ModalOmnisearch extends Modal {
+abstract class OmnisearchModal extends Modal {
   constructor(app: App) {
     super(app)
 
@@ -50,10 +50,10 @@ abstract class ModalOmnisearch extends Modal {
   }
 }
 
-export class ModalVault extends ModalOmnisearch {
+export class OmnisearchVaultModal extends OmnisearchModal {
   constructor(app: App) {
     super(app)
-    const cmp = new CmpModalVault({
+    const cmp = new ModalVault({
       target: this.modalEl,
       props: {
         modal: this,
@@ -68,16 +68,16 @@ export class ModalVault extends ModalOmnisearch {
   }
 }
 
-export class ModalInFile extends ModalOmnisearch {
+export class OmnisearchInFileModal extends OmnisearchModal {
   constructor(
     app: App,
     file: TFile,
     searchQuery: string = '',
-    parent?: ModalOmnisearch,
+    parent?: OmnisearchModal,
   ) {
     super(app)
 
-    const cmp = new CmpModalInFile({
+    const cmp = new ModalInFile({
       target: this.modalEl,
       props: {
         modal: this,