Replace Lunr with MiniSearch (shoelace-style#2204)

* make keys horizontal

* replace lunr with minisearch

Author: claviska

cspell.json

@@ -130,6 +130,7 @@
     "menuitemradio",
     "metaframeworks",
     "middlewares",
+    "minisearch",
     "minlength",
     "minmax",
     "monospace",

package-lock.json

@@ -56,14 +56,14 @@
     "globby": "^13.2.2",
     "husky": "^8.0.3",
     "lint-staged": "^14.0.1",
-    "lunr": "^2.3.9",
     "markdown-it": "^14.1.0",
     "markdown-it-attrs": "^4.3.0",
     "markdown-it-container": "^3.0.0",
     "markdown-it-ins": "^3.0.1",
     "markdown-it-kbd": "^2.2.2",
     "markdown-it-mark": "^3.0.1",
     "marked": "^11.1.0",
+    "minisearch": "^7.2.0",
     "node-html-parser": "^6.1.13",
     "npm-check-updates": "^17.1.11",
     "ora": "^8.1.1",
@@ -90,4 +90,4 @@
       "prettier --write"
     ]
   }
-}
+}

package.json

@@ -43,7 +43,7 @@
     </div>
 
     {# Footer #}
-    <footer class="wa-cluster wa-justify-content-center wa-gap-xl">
+    <footer class="wa-gap-xl">
       <small>
         <kbd aria-label="Up"><wa-icon name="arrow-up" family="micro"></wa-icon></kbd>
         <kbd aria-label="Down"><wa-icon name="arrow-down" family="micro"></wa-icon></kbd>

packages/webawesome/docs/_includes/search.njk

@@ -1,7 +1,7 @@
 /* eslint-disable no-invalid-this */
 import { readFileSync } from 'fs';
 import { mkdir, writeFile } from 'fs/promises';
-import lunr from 'lunr';
+import MiniSearch from 'minisearch';
 import { parse } from 'node-html-parser';
 import * as path from 'path';
 import { dirname, join } from 'path';
@@ -21,7 +21,7 @@ function normalizeDisplayUrl(url) {
 }
 
 /**
- * Eleventy plugin to build a Lunr search index.
+ * Eleventy plugin to build a MiniSearch search index.
  */
 export function searchPlugin(options = {}) {
   options = {
@@ -105,23 +105,21 @@ export function searchPlugin(options = {}) {
       const map = [];
 
       getCachedPages();
-      const searchIndex = lunr(function () {
-        let index = 0;
-
-        this.ref('id');
-        this.field('t', { boost: 20 });
-        this.field('h', { boost: 10 });
-        this.field('c');
-
-        for (const [_inputPath, page] of pagesToIndex) {
-          this.add({ id: index, t: page.title, h: page.headings, c: page.content });
-          map[index] = { title: page.title, description: page.description, url: page.url };
-          index++;
-        }
+
+      const searchIndex = new MiniSearch({
+        fields: ['t', 'h', 'c'],
+        storeFields: [],
       });
 
+      let index = 0;
+      for (const [_inputPath, page] of pagesToIndex) {
+        searchIndex.add({ id: index, t: page.title, h: page.headings, c: page.content });
+        map[index] = { title: page.title, description: page.description, url: page.url };
+        index++;
+      }
+
       await mkdir(dirname(outputFilename), { recursive: true });
-      await writeFile(outputFilename, JSON.stringify({ searchIndex, map }), 'utf-8');
+      await writeFile(outputFilename, JSON.stringify({ searchIndex: searchIndex.toJSON(), map }), 'utf-8');
       await writeFile(cachedPages, JSON.stringify({ pages: [...pagesToIndex.entries()] }, null, 2));
     });
   };

packages/webawesome/docs/_plugins/search.js

@@ -1,13 +1,15 @@
 // Search data
 const version = document.documentElement.getAttribute('data-version') || '';
 const res = await Promise.all([
-  import('https://cdn.jsdelivr.net/npm/lunr/+esm'),
+  import('https://cdn.jsdelivr.net/npm/minisearch@7/+esm'),
   fetch(`/search.json?v=${version}`),
   import('/assets/scripts/track.js').catch(() => null),
 ]);
-const lunr = res[0].default;
+const MiniSearch = res[0].default;
 const searchData = await res[1].json();
-const searchIndex = lunr.Index.load(searchData.searchIndex);
+const searchIndex = MiniSearch.loadJSON(JSON.stringify(searchData.searchIndex), {
+  fields: ['t', 'h', 'c'],
+});
 const map = searchData.map;
 const searchDebounce = 200;
 const queryTrackDelay = 1000;
@@ -318,33 +320,33 @@ async function updateResults(query = '') {
     let matches = [];
 
     if (hasQuery) {
-      // Track seen refs to avoid duplicates
-      const seenRefs = new Set();
-
-      // Start with a standard search to get the best "exact match" result
-      searchIndex.search(`${trimmedQuery}`).forEach(match => {
-        matches.push(match);
-        seenRefs.add(match.ref);
-      });
-
-      // Add wildcard matches if not already included
-      searchIndex.search(`${trimmedQuery}*`).forEach(match => {
-        if (!seenRefs.has(match.ref)) {
-          matches.push(match);
-          seenRefs.add(match.ref);
-        }
+      matches = searchIndex.search(trimmedQuery, {
+        prefix: true,
+        fuzzy: 0.2,
+        boost: { t: 20, h: 10 },
       });
 
-      // Add fuzzy search matches last
-      const fuzzyTokens = trimmedQuery
-        .split(' ')
-        .map(term => `${term}~1`)
-        .join(' ');
-      searchIndex.search(fuzzyTokens).forEach(match => {
-        if (!seenRefs.has(match.ref)) {
-          matches.push(match);
-          seenRefs.add(match.ref);
-        }
+      // Re-rank results to prioritize title matches. Searches don't account for where in a title a match occurs, so
+      // "change" can rank "pagination" above "changelog". This applies a bonus to results whose title contains the
+      // query as a word boundary match.
+      const queryLower = trimmedQuery.toLowerCase();
+      matches.sort((a, b) => {
+        const titleA = (map[a.id]?.title ?? '').toLowerCase();
+        const titleB = (map[b.id]?.title ?? '').toLowerCase();
+
+        const rankTitle = title => {
+          if (title === queryLower) return 3;
+          if (title.startsWith(queryLower)) return 2;
+          // Match query at a word boundary (e.g. "change" matches "price change")
+          if (new RegExp(`\\b${queryLower.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}`).test(title)) return 1;
+          return 0;
+        };
+
+        const rankDiff = rankTitle(titleB) - rankTitle(titleA);
+        if (rankDiff !== 0) return rankDiff;
+
+        // Preserve MiniSearch's original score ordering within the same rank
+        return b.score - a.score;
       });
     }
 
@@ -355,7 +357,7 @@ async function updateResults(query = '') {
     input.setAttribute('aria-activedescendant', '');
     results.innerHTML = '';
     matches.forEach((match, index) => {
-      const page = map[match.ref];
+      const page = map[match.id];
       if (!page || !page.url) return;
 
       const li = document.createElement('li');
@@ -367,7 +369,7 @@ async function updateResults(query = '') {
 
       li.classList.add('site-search-result');
       li.setAttribute('role', 'option');
-      li.setAttribute('id', `search-result-item-${match.ref}`);
+      li.setAttribute('id', `search-result-item-${match.id}`);
       li.setAttribute('data-selected', index === 0 ? 'true' : 'false');
       if (page.url === '/') icon = 'home';
       else if (page.url === '/docs') icon = 'rocket-launch';

packages/webawesome/docs/assets/scripts/search.js

@@ -224,6 +224,8 @@
 
 /* Footer */
 #site-search footer {
+  flex-direction: row;
+  justify-content: center;
   color: var(--wa-color-text-quiet);
   border-top: var(--wa-panel-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
   border-bottom-left-radius: var(--wa-border-radius-l);

packages/webawesome/docs/assets/styles/search.css

@@ -408,7 +408,7 @@ layout: page
           <wa-button appearance="filled" pill href="https://github.com/open-wc/custom-elements-manifest">Custom Elements Manifest</wa-button>
           <wa-button appearance="filled" pill href="https://floating-ui.com/">Floating UI</wa-button>
           <wa-button appearance="filled" pill href="https://animate.style/">animate.css</wa-button>
-          <wa-button appearance="filled" pill href="https://lunrjs.com/">Lunr</wa-button>
+          <wa-button appearance="filled" pill href="https://lucaong.github.io/minisearch/">MiniSearch</wa-button>
         </div>
       </div>
     </div>