Lazy load uFuzzy only for fuzzy search (#148)

* Lazy load uFuzzy only for fuzzy search * Add changelog --------- Co-authored-by: Simon Heimler <[email protected]>
Fannon · Oct 27, 2024 · 3deadbc · 3deadbc
1 parent eb95eeb
commit 3deadbc
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 31 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -8,6 +8,7 @@
     "fuzzysort",
     "Heimler",
     "idxs",
+    "iife",
     "jsyaml",
     "leeoniya",
     "malus",
@@ -33,4 +34,4 @@
     "source.fixAll.eslint": "explicit"
   },
   "eslint.experimental.useFlatConfig": true
-}
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,9 +2,11 @@
 
 ## [unreleased]
 
-- **IMPROVED**: Performance of CSS initial load
+- **IMPROVED**: Performance of initial load
   - Cleaned up and simplified CSS
   - Lazy load CSS necessary for bookmark tagging and options view
+  - Lazy load uFuzzy library only when fuzzy search is used
+- **CHANGED**: Initial load now only looks for bookmarks matching the current URL, not starting with it
 
 ## [v1.10.3]
 

diff --git a/popup/index.html b/popup/index.html
@@ -5,7 +5,6 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet" href="./css/style.css" type="text/css" />
-    <!-- <link rel="stylesheet" href="./lib/tagify.min.css" type="text/css" /> -->
     <link rel="icon" type="image/png" href="../images/logo-32.png" />
   </head>
   <body>
@@ -61,7 +60,6 @@
       <ul id="error-list"></ul>
     </div>
     <script async src="./js/initSearch.js" type="module"></script>
-    <script async src="./lib/uFuzzy.iife.min.js"></script>
     <script async src="./lib/mark.es6.min.js"></script>
   </body>
 </html>
diff --git a/popup/js/initSearch.js b/popup/js/initSearch.js
@@ -47,10 +47,6 @@ export async function initExtension() {
 
   updateSearchApproachToggle()
 
-  if (ext.opts.debug) {
-    performance.mark('init-dom')
-  }
-
   const { bookmarks, tabs, history } = await getSearchData()
   ext.model.tabs = tabs
   ext.model.bookmarks = bookmarks

diff --git a/popup/js/search/defaultEntries.js b/popup/js/search/defaultEntries.js
@@ -37,26 +37,18 @@ export async function addDefaultEntries() {
       }
     })
   } else {
-    // All other modes: Find bookmark / history that matches current page URL
+    // All other modes: Find bookmarks / history that matches current page URL
     let currentUrl = window.location.href
     const [tab] = await getBrowserTabs({ active: true, currentWindow: true })
-
-    // If we find no open tab, we're most likely not having a browser API. Return nothing.
     if (!tab) {
       return []
     }
 
-    currentUrl = tab.url
-    // Remove trailing slash from URL, so the startsWith search works better
-    currentUrl = currentUrl.replace(/\/$/, '')
-
-    // Find if current URL has corresponding bookmark(s)
-    const foundBookmarks = ext.model.bookmarks.filter((el) => el.originalUrl.startsWith(currentUrl))
-    results.push(...foundBookmarks)
+    // Remove trailing slash or hash from URL, so the comparison works better
+    currentUrl = tab.url.replace(/[/#]$/, '')
 
-    // Find if we have browser history that has the same URL
-    let foundHistory = ext.model.history.filter((el) => currentUrl === el.originalUrl)
-    results.push(...foundHistory)
+    results.push(...ext.model.bookmarks.filter((el) => el.originalUrl === currentUrl))
+    results.push(...ext.model.history.filter((el) => el.originalUrl === currentUrl))
   }
 
   ext.model.result = results

diff --git a/popup/js/search/fuzzySearch.js b/popup/js/search/fuzzySearch.js
@@ -2,30 +2,31 @@
 // FUZZY SEARCH SUPPORT                 //
 //////////////////////////////////////////
 
-import { printError } from '../helper/utils.js'
+import { loadScript, printError } from '../helper/utils.js'
 
-/**
- * Memoize some state, to avoid re-creating haystack and fuzzy search instances
- */
+/** Memoize some state, to avoid re-creating haystack and fuzzy search instances */
 let state = {}
 
 /**
  * Resets state for fuzzy search. Necessary when search data changes or search string is reset.
  * If searchMode is given, will only reset that particular state.
- * Otherwise state will be reset entirely.
  */
 export function resetFuzzySearchState(searchMode) {
   if (searchMode) {
     state[searchMode] = undefined
   }
 }
 
-/**
- * Uses uFuzzy to do a fuzzy search
- *
- * @see https://github.com/leeoniya/uFuzzy
- */
 export async function fuzzySearch(searchMode, searchTerm) {
+  // Lazy load the uFuzzy library if not there already
+  if (!window['uFuzzy']) {
+    try {
+      await loadScript('./lib/uFuzzy.iife.min.js')
+    } catch (err) {
+      printError(err, 'Could not load uFuzzy')
+    }
+  }
+
   if (searchMode === 'history') {
     return [...fuzzySearchWithScoring(searchTerm, 'tabs'), ...fuzzySearchWithScoring(searchTerm, 'history')]
   } else if (searchMode === 'bookmarks' || searchMode === 'tabs') {