From 9fdddb7f75b70f634401599985c01c6172f39303 Mon Sep 17 00:00:00 2001
From: Simon Cambier <simon.cambier@protonmail.com>
Date: Sat, 23 Apr 2022 22:44:54 +0200
Subject: [PATCH] Refactored Svelte components

---
 package.json                                  |  2 +-
 src/CmpResultInFile.svelte                    | 25 ---------------
 .../InputSearch.svelte}                       |  1 -
 src/components/ModalContainer.svelte          |  6 ++++
 .../ModalInFile.svelte}                       | 29 +++++++++--------
 .../ModalVault.svelte}                        | 32 ++++++++++---------
 src/components/ResultItemContainer.svelte     | 17 ++++++++++
 .../ResultItemInFile.svelte}                  | 19 ++++-------
 src/components/ResultItemVault.svelte         | 19 +++++++++++
 src/main.ts                                   |  6 ++--
 src/modal.ts                                  | 16 +++++-----
 11 files changed, 92 insertions(+), 80 deletions(-)
 delete mode 100644 src/CmpResultInFile.svelte
 rename src/{CmpInput.svelte => components/InputSearch.svelte} (94%)
 create mode 100644 src/components/ModalContainer.svelte
 rename src/{CmpModalInFile.svelte => components/ModalInFile.svelte} (83%)
 rename src/{CmpModalVault.svelte => components/ModalVault.svelte} (79%)
 create mode 100644 src/components/ResultItemContainer.svelte
 rename src/{CmpResultNote.svelte => components/ResultItemInFile.svelte} (57%)
 create mode 100644 src/components/ResultItemVault.svelte

diff --git a/package.json b/package.json
index 7ee9b01..85d2780 100644
--- a/package.json
+++ b/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",
diff --git a/src/CmpResultInFile.svelte b/src/CmpResultInFile.svelte
deleted file mode 100644
index ac4afe9..0000000
--- a/src/CmpResultInFile.svelte
+++ /dev/null
@@ -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>
diff --git a/src/CmpInput.svelte b/src/components/InputSearch.svelte
similarity index 94%
rename from src/CmpInput.svelte
rename to src/components/InputSearch.svelte
index 35c0f97..48bea22 100644
--- a/src/CmpInput.svelte
+++ b/src/components/InputSearch.svelte
@@ -10,7 +10,6 @@ let elInput: HTMLInputElement
 onMount(async () => {
   await tick()
   elInput.focus()
-  // elInput.value = $searchQuery
   elInput.select()
 })
 
diff --git a/src/components/ModalContainer.svelte b/src/components/ModalContainer.svelte
new file mode 100644
index 0000000..f772107
--- /dev/null
+++ b/src/components/ModalContainer.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+</script>
+
+<div class="modal-content" on:mousedown={(e) => e.preventDefault()}>
+  <slot />
+</div>
diff --git a/src/CmpModalInFile.svelte b/src/components/ModalInFile.svelte
similarity index 83%
rename from src/CmpModalInFile.svelte
rename to src/components/ModalInFile.svelte
index 3197667..f2e1166 100644
--- a/src/CmpModalInFile.svelte
+++ b/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>
diff --git a/src/CmpModalVault.svelte b/src/components/ModalVault.svelte
similarity index 79%
rename from src/CmpModalVault.svelte
rename to src/components/ModalVault.svelte
index 8301392..51eb230 100644
--- a/src/CmpModalVault.svelte
+++ b/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>
diff --git a/src/components/ResultItemContainer.svelte b/src/components/ResultItemContainer.svelte
new file mode 100644
index 0000000..c65c61d
--- /dev/null
+++ b/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>
diff --git a/src/CmpResultNote.svelte b/src/components/ResultItemInFile.svelte
similarity index 57%
rename from src/CmpResultNote.svelte
rename to src/components/ResultItemInFile.svelte
index 08ddba4..5430c13 100644
--- a/src/CmpResultNote.svelte
+++ b/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>
diff --git a/src/components/ResultItemVault.svelte b/src/components/ResultItemVault.svelte
new file mode 100644
index 0000000..2ea252d
--- /dev/null
+++ b/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>
diff --git a/src/main.ts b/src/main.ts
index ca41bbe..f67458e 100644
--- a/src/main.ts
+++ b/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
         }
diff --git a/src/modal.ts b/src/modal.ts
index ed5e95b..5a12841 100644
--- a/src/modal.ts
+++ b/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,