change the score function to prevent drag (#325)

* change the score function to prevent drag

* pass fuse variable to useInternalMatches

* change minMatchCharLength to 1. to match single character

* remove command-score

package.json

@@ -58,8 +58,8 @@
   },
   "dependencies": {
     "@radix-ui/react-portal": "^1.0.1",
-    "command-score": "^0.1.2",
     "fast-equals": "^2.0.3",
+    "fuse.js": "^6.6.2",
     "react-virtual": "^2.8.2",
     "tiny-invariant": "^1.2.0"
   },
@@ -77,4 +77,4 @@
     "type": "git",
     "url": "https://github.com/timc1/kbar.git"
   }
-}
+}

src/useMatches.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import type { ActionImpl } from "./action/ActionImpl";
 import { useKBar } from "./useKBar";
 import { Priority, useThrottledValue } from "./utils";
-import commandScore from "command-score";
+import Fuse from "fuse.js";
 
 export const NO_GROUP = {
   name: "none",
@@ -74,7 +74,29 @@ export function useMatches() {
     return getDeepResults(rootResults);
   }, [getDeepResults, rootResults, emptySearch]);
 
-  const matches = useInternalMatches(filtered, search);
+  const fuseOptions = {
+    keys: [{
+      name: "name",
+      weight: 0.5
+    },
+    {
+      name: "keywords",
+      getFn: (item) => item.keywords.split(","), // make keyword an array. so fuse can look through words individually
+      weight: 0.5
+    },
+      "subtitle"],
+    includeScore: true,
+    includeMatches: true,
+    threshold: 0.2,
+    minMatchCharLength: 1,
+    tokenize: (str) => {
+      // Example: Preserve hyphens and special characters as separate tokens
+      return str.split(/[\s\-,.!()]+/).filter(Boolean);
+    },
+  };
+  const fuse = new Fuse(filtered, fuseOptions);
+
+  const matches = useInternalMatches(filtered, search, fuse);
 
   const results = React.useMemo(() => {
     /**
@@ -168,7 +190,7 @@ type Match = {
   score: number;
 };
 
-function useInternalMatches(filtered: ActionImpl[], search: string) {
+function useInternalMatches(filtered: ActionImpl[], search: string, fuse: Fuse<ActionImpl>) {
   const value = React.useMemo(
     () => ({
       filtered,
@@ -186,17 +208,13 @@ function useInternalMatches(filtered: ActionImpl[], search: string) {
     }
 
     let matches: Match[] = [];
-
-    for (let i = 0; i < throttledFiltered.length; i++) {
-      const action = throttledFiltered[i];
-      const score = commandScore(
-        [action.name, action.keywords, action.subtitle].join(" "),
-        throttledSearch
-      );
-      if (score > 0) {
-        matches.push({ score, action });
-      }
-    }
+    // Use Fuse's `search` method to perform the search efficiently
+    const searchResults = fuse.search(throttledSearch);
+    // Format the search results to match the existing structure
+    matches = searchResults.map(({ item: action, score }) => ({
+      score: 1 / (score + 1), // Convert the Fuse score to the format used in the original code
+      action,
+    }));
 
     return matches;
   }, [throttledFiltered, throttledSearch]) as Match[];