refactor: replace lunr with fuse

2021-09-08 09:21:22 +05:30
parent 84457ddc86
commit dbae90a193
10 changed files with 192 additions and 144 deletions
--- a/components/app/Fuse.vue
+++ b/components/app/Fuse.vue
@@ -0,0 +1,38 @@
+<template>
+  <div key="outputHash">
+    <AppPowerSearchEntry
+      v-for="(shortcut, shortcutIndex) in searchResults"
+      :key="`shortcut-${shortcutIndex}`"
+      :ref="`item-${shortcutIndex}`"
+      :shortcut="shortcut.item"
+      @action="$emit('action', shortcut.item.action)"
+    />
+    <div
+      v-if="searchResults.length === 0"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+    >
+      <i class="opacity-75 pb-2 material-icons">manage_search</i>
+      <span class="text-center">
+        {{ $t("state.nothing_found") }} "{{ search }}"
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "@nuxtjs/composition-api"
+import Fuse from "fuse.js"
+
+const props = defineProps<{
+  input: Record<string, any>[]
+  search: string
+}>()
+
+const options = {
+  keys: ["keys", "label", "action", "tags"],
+}
+
+const fuse = new Fuse(props.input, options)
+
+const searchResults = computed(() => fuse.search(props.search))
+</script>
--- a/components/app/Header.vue
+++ b/components/app/Header.vue
@@ -83,7 +83,7 @@
    <AppAnnouncement v-if="!isOnLine" />
    <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
    <AppSupport :show="showSupport" @hide-modal="showSupport = false" />
-    <AppSearch :show="showSearch" @hide-modal="showSearch = false" />
+    <AppPowerSearch :show="showSearch" @hide-modal="showSearch = false" />
  </div>
 </template>

--- a/components/app/Lunr.vue
+++ b/components/app/Lunr.vue
@@ -1,59 +0,0 @@
-<template>
-  <div key="outputHash">
-    <AppSearchEntry
-      v-for="(shortcut, shortcutIndex) in searchResults"
-      :key="`shortcut-${shortcutIndex}`"
-      :ref="`item-${shortcutIndex}`"
-      :shortcut="shortcut"
-      @action="$emit('action', shortcut.action)"
-    />
-    <div
-      v-if="searchResults.length === 0"
-      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
-    >
-      <i class="opacity-75 pb-2 material-icons">manage_search</i>
-      <span class="text-center">
-        {{ $t("state.nothing_found") }} "{{ search }}"
-      </span>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from "@nuxtjs/composition-api"
-import lunr from "lunr"
-
-const props = defineProps<{
-  input: Record<string, any>[]
-  search: string
-}>()
-
-const transformedInput = computed(() =>
-  props.input.map((val, i) => {
-    return {
-      __id: i,
-      ...val,
-    }
-  })
-)
-
-const firstInput = computed(() =>
-  transformedInput.value.length > 0 ? transformedInput.value[0] : {}
-)
-
-const idx = computed(() => {
-  return lunr(function () {
-    this.ref("__id")
-
-    Object.keys(firstInput.value).forEach((key) => this.field(key), this)
-
-    transformedInput.value.forEach((doc) => {
-      this.add(doc)
-    }, this)
-  })
-})
-
-const searchResults = computed(() =>
-  idx.value.search(`${props.search}*`).map((result) => props.input[+result.ref])
-)
-</script>
--- a/components/app/PowerSearch.vue
+++ b/components/app/PowerSearch.vue
@@ -8,7 +8,7 @@
        type="text"
        autocomplete="off"
        name="command"
-        :placeholder="$t('app.type_a_command_search')"
+        :placeholder="$t('app.type_a_command_search').toString()"
        class="
          bg-transparent
          border-b border-dividerLight
@@ -17,10 +17,9 @@
          p-6
        "
      />
-      <AppLunr
+      <AppFuse
        v-if="search"
-        log
-        :input="lunr"
+        :input="fuse"
        :search="search"
        @action="runAction"
      />
@@ -39,7 +38,7 @@
          <h5 class="my-2 text-secondaryLight py-2 px-6">
            {{ $t(map.section) }}
          </h5>
-          <AppSearchEntry
+          <AppPowerSearchEntry
            v-for="(shortcut, shortcutIndex) in map.shortcuts"
            :key="`map-${mapIndex}-shortcut-${shortcutIndex}`"
            :shortcut="shortcut"
@@ -54,7 +53,7 @@
 <script setup lang="ts">
 import { ref } from "@nuxtjs/composition-api"
 import { HoppAction, invokeAction } from "~/helpers/actions"
-import { spotlight as mappings, lunr } from "~/helpers/shortcuts"
+import { spotlight as mappings, fuse } from "~/helpers/shortcuts"

 defineProps<{
  show: boolean
--- a/components/app/PowerSearchEntry.vue
+++ b/components/app/PowerSearchEntry.vue
--- a/components/app/Shortcuts.vue
+++ b/components/app/Shortcuts.vue
@@ -19,11 +19,12 @@
          <ButtonSecondary svg="x" class="rounded" @click.native="close()" />
        </div>
      </div>
-      <!-- <div class="bg-primary border-b border-dividerLight">
+      <div class="bg-primary border-b border-dividerLight">
        <div class="flex flex-col my-4 mx-6">
          <input
            v-model="filterText"
-            type="search" autocomplete="off"
+            type="search"
+            autocomplete="off"
            class="
              bg-primaryLight
              border border-dividerLight
@@ -35,10 +36,43 @@
              focus-visible:border-divider
            "
            :placeholder="$t('action.search')"
+            v-focus
          />
        </div>
-      </div> -->
+      </div>
+      <div v-if="filterText">
+        <div
+          v-for="(map, mapIndex) in searchResults"
+          :key="`map-${mapIndex}`"
+          class="space-y-4 py-4 px-6"
+        >
+          <h1 class="font-semibold text-secondaryDark">
+            {{ $t(map.item.section) }}
+          </h1>
+          <AppShortcutsEntry
+            v-for="(shortcut, index) in map.item.shortcuts"
+            :key="`shortcut-${index}`"
+            :shortcut="shortcut"
+          />
+        </div>
+        <div
+          v-if="searchResults.length === 0"
+          class="
+            flex flex-col
+            text-secondaryLight
+            p-4
+            items-center
+            justify-center
+          "
+        >
+          <i class="opacity-75 pb-2 material-icons">manage_search</i>
+          <span class="text-center">
+            {{ $t("state.nothing_found") }} "{{ filterText }}"
+          </span>
+        </div>
+      </div>
      <div
+        v-else
        class="
          divide-y divide-dividerLight
          flex flex-col flex-1
@@ -54,53 +88,44 @@
          <h1 class="font-semibold text-secondaryDark">
            {{ $t(map.section) }}
          </h1>
-          <div
+          <AppShortcutsEntry
            v-for="(shortcut, shortcutIndex) in map.shortcuts"
            :key="`map-${mapIndex}-shortcut-${shortcutIndex}`"
-            class="flex items-center"
-          >
-            <span class="flex flex-1 mr-4">
-              {{ $t(shortcut.label) }}
-            </span>
-            <span
-              v-for="(key, keyIndex) in shortcut.keys"
-              :key="`map-${mapIndex}-shortcut-${shortcutIndex}-key-${keyIndex}`"
-              class="shortcut-key"
-            >
-              {{ key }}
-            </span>
-          </div>
+            :shortcut="shortcut"
+          />
        </div>
      </div>
    </template>
  </AppSlideOver>
 </template>

-<script>
-import { defineComponent } from "@nuxtjs/composition-api"
-import shortcuts from "~/helpers/shortcuts"
+<script setup lang="ts">
+import { computed, ref } from "@nuxtjs/composition-api"
+import Fuse from "fuse.js"
+import mappings from "~/helpers/shortcuts"

-export default defineComponent({
-  props: {
-    show: Boolean,
-  },
-  data() {
-    return {
-      // filterText: "",
-      mappings: shortcuts,
-    }
-  },
-  watch: {
-    $route() {
-      this.$emit("close")
-    },
-  },
-  methods: {
-    close() {
-      this.$emit("close")
-    },
-  },
-})
+defineProps<{
+  show: boolean
+}>()
+
+const options = {
+  keys: ["shortcuts.label"],
+}
+
+const fuse = new Fuse(mappings, options)
+
+const filterText = ref("")
+
+const searchResults = computed(() => fuse.search(filterText.value))
+
+const emit = defineEmits<{
+  (e: "close"): void
+}>()
+
+const close = () => {
+  filterText.value = ""
+  emit("close")
+}
 </script>

 <style lang="scss" scoped>
--- a/components/app/ShortcutsEntry.vue
+++ b/components/app/ShortcutsEntry.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="flex items-center">
+    <span class="flex flex-1 mr-4">
+      {{ $t(shortcut.label) }}
+    </span>
+    <span
+      v-for="(key, index) in shortcut.keys"
+      :key="`key-${index}`"
+      class="shortcut-key"
+    >
+      {{ key }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  shortcut: Object
+}>()
+</script>
+
+<style lang="scss" scoped>
+.shortcut-key {
+  @apply bg-dividerLight;
+  @apply rounded;
+  @apply ml-2;
+  @apply py-1;
+  @apply px-2;
+  @apply inline-flex;
+}
+</style>
--- a/helpers/shortcuts.js
+++ b/helpers/shortcuts.js
@@ -193,75 +193,100 @@ export const spotlight = [
  },
 ]

-export const lunr = [
+export const fuse = [
  {
    keys: ["?"],
    label: "shortcut.general.help_menu",
    action: "modals.support.toggle",
    icon: "life-buoy",
-    tags: "help support menu discord twitter documentation troubleshooting chat community feedback report bug issue ticket",
+    tags: [
+      "help",
+      "support",
+      "menu",
+      "discord",
+      "twitter",
+      "documentation",
+      "troubleshooting",
+      "chat",
+      "community",
+      "feedback",
+      "report",
+      "bug",
+      "issue",
+      "ticket",
+    ],
  },
  {
    keys: [getPlatformSpecialKey(), "K"],
    label: "shortcut.general.show_all",
    action: "flyouts.keybinds.toggle",
    icon: "zap",
-    tags: "keyboard shortcuts",
+    tags: ["keyboard", "shortcuts"],
  },
  {
    keys: [getPlatformSpecialKey(), "←"],
    label: "shortcut.navigation.back",
    action: "navigation.jump.back",
    icon: "arrow-right",
-    tags: "back jump page navigation go",
+    tags: ["back", "jump", "page", "navigation", "go"],
  },
  {
    keys: [getPlatformSpecialKey(), "→"],
    label: "shortcut.navigation.forward",
    action: "navigation.jump.forward",
    icon: "arrow-right",
-    tags: "forward jump next forward page navigation go",
+    tags: ["forward", "jump", "next", "forward", "page", "navigation", "go"],
  },
  {
    keys: [getPlatformAlternateKey(), "R"],
    label: "shortcut.navigation.rest",
    action: "navigation.jump.rest",
    icon: "arrow-right",
-    tags: "rest jump page navigation go",
+    tags: ["rest", "jump", "page", "navigation", "go"],
  },
  {
    keys: [getPlatformAlternateKey(), "Q"],
    label: "shortcut.navigation.graphql",
    action: "navigation.jump.graphql",
    icon: "arrow-right",
-    tags: "graphql jump page navigation go",
+    tags: ["graphql", "jump", "page", "navigation", "go"],
  },
  {
    keys: [getPlatformAlternateKey(), "W"],
    label: "shortcut.navigation.realtime",
    action: "navigation.jump.realtime",
    icon: "arrow-right",
-    tags: "realtime jump page navigation websocket socket mqtt sse go",
+    tags: [
+      "realtime",
+      "jump",
+      "page",
+      "navigation",
+      "websocket",
+      "socket",
+      "mqtt",
+      "sse",
+      "go",
+    ],
  },
  {
    keys: [getPlatformAlternateKey(), "D"],
    label: "shortcut.navigation.documentation",
    action: "navigation.jump.documentation",
    icon: "arrow-right",
-    tags: "documentation jump page navigation go",
+    tags: ["documentation", "jump", "page", "navigation", "go"],
  },
  {
    keys: [getPlatformAlternateKey(), "S"],
    label: "shortcut.navigation.settings",
    action: "navigation.jump.settings",
    icon: "arrow-right",
-    tags: "settings jump page navigation account theme go",
+    tags: ["settings", "jump", "page", "navigation", "account", "theme", "go"],
  },
  {
    keys: [getPlatformSpecialKey(), "M"],
    label: "shortcut.miscellaneous.invite",
    action: "modals.share.toggle",
    icon: "gift",
-    tags: "invite share app friends people social",
+    tags: ["invite", "share", "app", "friends", "people", "social"],
  },
 ]
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,11 +21,11 @@
        "core-js": "^3.17.2",
        "esprima": "^4.0.1",
        "firebase": "^9.0.1",
+        "fuse.js": "^6.4.6",
        "graphql": "^15.5.0",
        "graphql-language-service-interface": "^2.8.4",
        "json-loader": "^0.5.7",
        "lodash": "^4.17.21",
-        "lunr": "^2.3.9",
        "mustache": "^4.2.0",
        "node-interval-tree": "^1.3.3",
        "nuxt": "^2.15.8",
@@ -62,7 +62,6 @@
        "@testing-library/jest-dom": "^5.14.1",
        "@types/cookie": "^0.4.1",
        "@types/lodash": "^4.14.172",
-        "@types/lunr": "^2.3.4",
        "@types/splitpanes": "^2.2.1",
        "@vue/runtime-dom": "^3.2.9",
        "@vue/test-utils": "^1.2.2",
@@ -8130,12 +8129,6 @@
      "resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.1.tgz",
      "integrity": "sha512-5tXH6Bx/kNGd3MgffdmP4dy2Z+G4eaXw0SE81Tq3BNadtnMR5/ySMzX4SLEzHJzSmPNn4HIdpQsBvXMUykr58w=="
    },
-    "node_modules/@types/lunr": {
-      "version": "2.3.4",
-      "resolved": "https://registry.npmjs.org/@types/lunr/-/lunr-2.3.4.tgz",
-      "integrity": "sha512-j4x4XJwZvorEUbA519VdQ5b9AOU9TSvfi8tvxMAfP8XzNLtFex7A8vFQwqOx3WACbV0KMXbACV3cZl4/gynQ7g==",
-      "dev": true
-    },
    "node_modules/@types/mdast": {
      "version": "3.0.7",
      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.7.tgz",
@@ -17443,6 +17436,14 @@
      "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
      "dev": true
    },
+    "node_modules/fuse.js": {
+      "version": "6.4.6",
+      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-6.4.6.tgz",
+      "integrity": "sha512-/gYxR/0VpXmWSfZOIPS3rWwU8SHgsRTwWuXhyb2O6s7aRuVtHtxCkR33bNYu3wyLyNx/Wpv0vU7FZy8Vj53VNw==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
    "node_modules/gaze": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.3.tgz",
@@ -23240,11 +23241,6 @@
        "yallist": "^3.0.2"
      }
    },
-    "node_modules/lunr": {
-      "version": "2.3.9",
-      "resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.9.tgz",
-      "integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow=="
-    },
    "node_modules/magic-string": {
      "version": "0.25.7",
      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
@@ -42085,12 +42081,6 @@
      "resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.1.tgz",
      "integrity": "sha512-5tXH6Bx/kNGd3MgffdmP4dy2Z+G4eaXw0SE81Tq3BNadtnMR5/ySMzX4SLEzHJzSmPNn4HIdpQsBvXMUykr58w=="
    },
-    "@types/lunr": {
-      "version": "2.3.4",
-      "resolved": "https://registry.npmjs.org/@types/lunr/-/lunr-2.3.4.tgz",
-      "integrity": "sha512-j4x4XJwZvorEUbA519VdQ5b9AOU9TSvfi8tvxMAfP8XzNLtFex7A8vFQwqOx3WACbV0KMXbACV3cZl4/gynQ7g==",
-      "dev": true
-    },
    "@types/mdast": {
      "version": "3.0.7",
      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.7.tgz",
@@ -49459,6 +49449,11 @@
      "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
      "dev": true
    },
+    "fuse.js": {
+      "version": "6.4.6",
+      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-6.4.6.tgz",
+      "integrity": "sha512-/gYxR/0VpXmWSfZOIPS3rWwU8SHgsRTwWuXhyb2O6s7aRuVtHtxCkR33bNYu3wyLyNx/Wpv0vU7FZy8Vj53VNw=="
+    },
    "gaze": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.3.tgz",
@@ -53815,11 +53810,6 @@
        "yallist": "^3.0.2"
      }
    },
-    "lunr": {
-      "version": "2.3.9",
-      "resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.9.tgz",
-      "integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow=="
-    },
    "magic-string": {
      "version": "0.25.7",
      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
--- a/package.json
+++ b/package.json
@@ -37,11 +37,11 @@
    "core-js": "^3.17.2",
    "esprima": "^4.0.1",
    "firebase": "^9.0.1",
+    "fuse.js": "^6.4.6",
    "graphql": "^15.5.0",
    "graphql-language-service-interface": "^2.8.4",
    "json-loader": "^0.5.7",
    "lodash": "^4.17.21",
-    "lunr": "^2.3.9",
    "mustache": "^4.2.0",
    "node-interval-tree": "^1.3.3",
    "nuxt": "^2.15.8",
@@ -78,7 +78,6 @@
    "@testing-library/jest-dom": "^5.14.1",
    "@types/cookie": "^0.4.1",
    "@types/lodash": "^4.14.172",
-    "@types/lunr": "^2.3.4",
    "@types/splitpanes": "^2.2.1",
    "@vue/runtime-dom": "^3.2.9",
    "@vue/test-utils": "^1.2.2",