fix: replace fuse.js with leven to fix no similar matching name error (…

…#452)

* fix: replace fuse.js with leven to fix no similar matching name error

* fix: code coverage

* store prev leven call

package.json

@@ -105,7 +105,6 @@
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-react": "^7.33.2",
     "framer-motion": "^10.16.4",
-    "fuse.js": "^7.0.0",
     "gh-pages": "^4.0.0",
     "github-slugger": "^1.0.0",
     "globby": "^11.0.1",
@@ -115,6 +114,7 @@
     "husky": "^7.0.2",
     "is-ci-cli": "^2.2.0",
     "lcov-result-merger": "^3.1.0",
+    "leven":"4.0.0",
     "lint-staged": "^11.2.3",
     "lucide-react": "^0.316.0",
     "lunr": "^2.3.9",

react/player/BUILD

@@ -27,6 +27,6 @@ js_pipeline(
         ":node_modules/@player-ui/react-subscribe",
         "//:node_modules/react-error-boundary",
         "//:node_modules/tapable-ts",
-        "//:node_modules/fuse.js",
+        "//:node_modules/leven",
     ],
 )

react/player/src/asset/__tests__/index.test.tsx

@@ -30,17 +30,42 @@ test("it prioritizes local type and id", () => {
   expect(asset.getByText("foo")).not.toBeUndefined();
 });
 
-test("throws an error for an asset missing implementation or not registered", () => {
+test("throws an error for an asset missing implementation or not registered WITHOUT similar matching type", () => {
   const assetDef = {
     asset: {
       id: "bar-id",
-      type: "bar",
+      type: "test",
+    },
+  } as unknown as AssetType;
+
+  const registry: AssetRegistryType = new Registry([
+    [{ type: "bar", key: "bar-key" }, () => <div>bar</div>],
+    [{ type: "foo", key: "foo-key" }, () => <div>foo</div>],
+  ]);
+
+  expect(() =>
+    render(
+      <AssetContext.Provider value={{ registry }}>
+        <ReactAsset {...assetDef} />
+      </AssetContext.Provider>,
+    ),
+  )
+    .toThrowError(`No implementation found for id: bar-id type: test. Did you mean bar? \n 
+      Registered Asset matching functions are listed below: \n
+      [{"type":"foo","key":"foo-key"},{"type":"bar","key":"bar-key"}]`);
+});
+
+test("throws an error for an asset missing implementation or not registered WITH similar matching type", () => {
+  const assetDef = {
+    asset: {
+      id: "foo-id",
+      type: "foo1",
     },
   } as unknown as AssetType;
 
   const registry: AssetRegistryType = new Registry([
+    [{ type: "bar", key: "bar-key" }, () => <div>bar</div>],
     [{ type: "foo", key: "foo-key" }, () => <div>foo</div>],
-    [{ type: "bar1", key: "bar-key" }, () => <div>bar</div>],
   ]);
 
   expect(() =>
@@ -50,9 +75,9 @@ test("throws an error for an asset missing implementation or not registered", ()
       </AssetContext.Provider>,
     ),
   )
-    .toThrowError(`No implementation found for id: bar-id type: bar. Did you mean {"type":"bar1","key":"bar-key"}? \n 
+    .toThrowError(`No implementation found for id: foo-id type: foo1. Did you mean foo? \n 
       Registered Asset matching functions are listed below: \n
-      [{"type":"bar1","key":"bar-key"},{"type":"foo","key":"foo-key"}]`);
+      [{"type":"foo","key":"foo-key"},{"type":"bar","key":"bar-key"}]`);
 });
 
 test("throws an error for an asset missing type", () => {

react/player/src/asset/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
+import leven from "leven";
 import type { Asset as AssetType, AssetWrapper } from "@player-ui/player";
 import type { Registry } from "@player-ui/partial-match-registry";
-import Fuse from "fuse.js";
 
 export type AssetRegistryType = Registry<React.ComponentType<any>>;
 
@@ -66,13 +66,25 @@ export const ReactAsset = (
       matchList.push(asset.key);
     });
 
-    const fuse = new Fuse(matchList, { keys: ["type", "key"] });
-    const similarType = JSON.stringify(
-      fuse.search(unwrapped.type as string)[0].item,
+    const typeList = matchList.map(
+      (match) => JSON.parse(JSON.stringify(match)).type,
     );
 
+    const similarType = typeList.reduce((prev, curr) => {
+      const next = {
+        value: leven(unwrapped.type, curr),
+        type: curr,
+      };
+
+      if (prev !== undefined && prev.value < next.value) {
+        return prev;
+      }
+
+      return next;
+    }, undefined);
+
     throw Error(
-      `No implementation found for id: ${unwrapped.id} type: ${unwrapped.type}. Did you mean ${similarType}? \n 
+      `No implementation found for id: ${unwrapped.id} type: ${unwrapped.type}. Did you mean ${similarType.type}? \n 
       Registered Asset matching functions are listed below: \n
       ${JSON.stringify(matchList)}`,
     );

tsconfig.json

@@ -22,6 +22,7 @@
     "resolveJsonModule": true,
     "composite": true,
     "lib": ["DOM", "ES2020"],
-    "isolatedDeclarations": true
+    "isolatedDeclarations": true,
+    "noUncheckedIndexedAccess": true,
   }
 }