chore: upgrade to fuse@6 (#79)

Co-authored-by: Amila Welihinda <amilaw@amazon.com>
metonym · Jan 14, 2021 · 1c32b40 · 1c32b40
1 parent c74367d
commit 1c32b40
Show file tree

Hide file tree

Showing 6 changed files with 1,140 additions and 1,117 deletions.
diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
     "prepack": "tsc"
   },
   "dependencies": {
-    "fuse.js": "^3.4.5",
+    "fuse.js": "^6.4.6",
     "set-value": "^3.0.1",
     "strind": "^0.3.0"
   },

diff --git a/src/FuzzyHighlighter.tsx b/src/FuzzyHighlighter.tsx
@@ -1,4 +1,4 @@
-import Fuse, { FuseResultWithMatches } from 'fuse.js';
+import Fuse from 'fuse.js';
 import * as React from 'react';
 import { FinalResults, formatResults } from './formatResults';
 
@@ -11,7 +11,7 @@ class FuzzyHighlighter<T, O> extends React.Component<
     cache: {},
     info: { timing: 0 }
   };
-  private fuse!: Fuse<T, Options<T>>;
+  private fuse!: Fuse<T>;
 
   public componentDidMount() {
     const { data, options } = this.props;
@@ -60,7 +60,7 @@ class FuzzyHighlighter<T, O> extends React.Component<
     const start = window.performance.now();
     const search: unknown = this.fuse.search(query);
     const end = window.performance.now();
-    const results = search as ReadonlyArray<Fuse.FuseResultWithMatches<T>>;
+    const results = search as Fuse.FuseResult<T>[];
     const timing = parseFloat((end - start).toFixed(3));
 
     this.setState({
@@ -72,25 +72,25 @@ class FuzzyHighlighter<T, O> extends React.Component<
 }
 
 type Data<T> = ReadonlyArray<T>;
-type Options<T> = Fuse.FuseOptions<T>;
+type Options<T> = Fuse.IFuseOptions<T>;
 
 interface IFuzzyHighlighterProps<T, O> {
   query: string;
   data: Data<T>;
   options?: Options<T>;
   children?: (params: {
-    results: ReadonlyArray<FuseResultWithMatches<T>>;
+    results: ReadonlyArray<Fuse.FuseResult<T>>;
     formattedResults: FinalResults<T>;
     timing: number;
   }) => React.ReactNode;
 }
 
-export type Result<T> = FuseResultWithMatches<T>;
+export type Result<T> = Fuse.FuseResult<T>;
 export type Results<T> = ReadonlyArray<Result<T>>;
 
 interface IFuzzyHighlighterState<T> {
   results: Results<T>;
-  cache: { [query: string]: ReadonlyArray<FuseResultWithMatches<T>> };
+  cache: { [query: string]: ReadonlyArray<Fuse.FuseResult<T>> };
   info: { timing: number };
 }
 

diff --git a/src/formatResults.ts b/src/formatResults.ts
@@ -7,8 +7,9 @@ function formatResults<T>(results: Results<T>): FinalResults<T> {
 
   results.forEach((result, index) => {
     finalResults.push({ ...result, formatted: { ...result.item } });
-    result.matches.forEach(({ indices, key, value }: IFuzzyResult) => {
-      const output = strind(value, indices, ({ chars: text, matches }) => ({
+    result.matches?.forEach(({ indices, key, value }) => {
+      if (!value || !key) return;
+      const output = strind(value, [...indices], ({ chars: text, matches }) => ({
         text,
         isHighlighted: matches
       }));
@@ -42,8 +43,7 @@ interface IFinalResult<T> extends Result<T> {
 export type FinalResults<T> = IFinalResult<T>[];
 
 interface IFuzzyResult {
-  arrayIndex: number;
-  indices: [number, number][];
+  indices: ReadonlyArray<[number, number]>;
   key: string;
   value: string;
 }

diff --git a/src/tests/FuzzyHighlighter.spec.tsx b/src/tests/FuzzyHighlighter.spec.tsx
@@ -1,5 +1,5 @@
 import { mount } from "enzyme";
-import { FuseOptions } from "fuse.js";
+import Fuse from "fuse.js";
 import * as React from "react";
 import FuzzyHighlighter from "../FuzzyHighlighter";
 
@@ -38,7 +38,7 @@ describe("FuzzyHighlighter", () => {
 
   test("search has cache", () => {
     const wrapper = mount<FuzzyHighlighter<{ title: string }, undefined>>(
-      <FuzzyHighlighter<{ title: string }, FuseOptions<{ title: string }>>
+      <FuzzyHighlighter<{ title: string }, Fuse.IFuseOptions<{ title: string }>>
         query=""
         data={[
           { title: "Old Man's War" },
@@ -51,7 +51,6 @@ describe("FuzzyHighlighter", () => {
           threshold: 0.6,
           location: 0,
           distance: 100,
-          maxPatternLength: 32,
           minMatchCharLength: 1,
           keys: ["title"],
         }}
@@ -69,12 +68,12 @@ describe("FuzzyHighlighter", () => {
           item: { title: "Old Man's War" },
           matches: [
             {
-              arrayIndex: 0,
               indices: [[0, 2]],
               key: "title",
               value: "Old Man's War",
             },
           ],
+          refIndex: 0
         },
       ],
     });
@@ -88,7 +87,7 @@ describe("FuzzyHighlighter", () => {
     search = jest.spyOn(FuzzyHighlighter.prototype, "search");
 
     const wrapper = mount<FuzzyHighlighter<{ title: string }, undefined>>(
-      <FuzzyHighlighter<{ title: string }, FuseOptions<{ title: string }>>
+      <FuzzyHighlighter<{ title: string }, Fuse.IFuseOptions<{ title: string }>>
         query=""
         data={[
           { title: "Old Man's War" },
@@ -101,7 +100,6 @@ describe("FuzzyHighlighter", () => {
           threshold: 0.6,
           location: 0,
           distance: 100,
-          maxPatternLength: 32,
           minMatchCharLength: 1,
           keys: ["title"],
         }}
@@ -124,8 +122,9 @@ describe("FuzzyHighlighter", () => {
       {
         item: { title: "Artist" },
         matches: [
-          { indices: [[0, 5]], value: "Artist", key: "title", arrayIndex: 0 },
+          { indices: [[0, 5]], value: "Artist", key: "title"  },
         ],
+        refIndex: 1
       },
     ]);
     expect(Object.keys(wrapper.state().cache).length).toEqual(2);

diff --git a/src/tests/formatResults.spec.ts b/src/tests/formatResults.spec.ts
@@ -12,12 +12,12 @@ describe("format results", () => {
               lastName: "Scalzi",
             },
           },
+          refIndex: 0,
           matches: [
             {
               indices: [[0, 3]],
               value: "John",
               key: "author.firstName",
-              arrayIndex: 0,
             },
           ],
         },
@@ -26,12 +26,12 @@ describe("format results", () => {
             title: "Monster 1959",
             author: { firstName: "David", lastName: "Maine" },
           },
+          refIndex: 0,
           matches: [
             {
               indices: [[1, 2]],
               value: "Monster 1959",
               key: "title",
-              arrayIndex: 0,
             },
           ],
         },
@@ -40,6 +40,7 @@ describe("format results", () => {
             title: "Colony",
             author: { firstName: "Rob", lastName: "Grant" },
           },
+          refIndex: 0,
           matches: [
             {
               indices: [
@@ -48,7 +49,6 @@ describe("format results", () => {
               ],
               value: "Colony",
               key: "title",
-              arrayIndex: 0,
             },
           ],
         },
@@ -62,6 +62,7 @@ describe("format results", () => {
           },
           title: "Old Man's War",
         },
+        refIndex: 0,
         item: {
           author: {
             firstName: [{ isHighlighted: true, text: "John" }],
@@ -71,7 +72,6 @@ describe("format results", () => {
         },
         matches: [
           {
-            arrayIndex: 0,
             indices: [[0, 3]],
             key: "author.firstName",
             value: "John",
@@ -87,13 +87,13 @@ describe("format results", () => {
             { isHighlighted: false, text: "ster 1959" },
           ],
         },
+        refIndex: 0,
         item: {
           author: { firstName: "David", lastName: "Maine" },
           title: "Monster 1959",
         },
         matches: [
           {
-            arrayIndex: 0,
             indices: [[1, 2]],
             key: "title",
             value: "Monster 1959",
@@ -111,13 +111,13 @@ describe("format results", () => {
             { isHighlighted: false, text: "y" },
           ],
         },
+        refIndex: 0,
         item: {
           author: { firstName: "Rob", lastName: "Grant" },
           title: "Colony",
         },
         matches: [
           {
-            arrayIndex: 0,
             indices: [
               [1, 1],
               [3, 4],