feat: search

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

components/app/Lunr.vue

@@ -1,14 +1,14 @@
 <template>
   <div key="outputHash">
     <AppSearchEntry
-      v-for="(shortcut, shortcutIndex) in theOutput"
+      v-for="(shortcut, shortcutIndex) in searchResults"
       :key="`shortcut-${shortcutIndex}`"
       :ref="`item-${shortcutIndex}`"
       :shortcut="shortcut"
       @action="$emit('action', shortcut.action)"
     />
     <div
-      v-if="theOutput.length === 0"
+      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>
@@ -19,209 +19,41 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { computed } from "@nuxtjs/composition-api"
 import lunr from "lunr"
 
-export default {
+const props = defineProps<{
-  props: {
+  input: Record<string, any>[]
-    input: {
+  search: string
-      type: Array,
+}>()
-      required: true,
-    },
-    search: {
-      type: String,
-      default: "",
-    },
-    limit: {
-      type: Number,
-      default: 1000,
-    },
-    stopWords: {
-      type: Boolean,
-      default: false,
-    },
-    log: {
-      type: Boolean,
-      default: false,
-    },
-    fields: {
-      type: Object,
-      default() {
-        if (typeof this.input[0] === "object") {
-          return this.input[0]
-        }
-        return {}
-      },
-    },
-    perpendKey: {
-      type: String,
-      default: "",
-    },
-  },
-  data() {
-    return {
-      outputHash: "",
-      theOutput: [],
-      cache: {},
-      currentItem: -1,
-    }
-  },
-  computed: {
-    hashInput() {
-      return this.hashThis(JSON.stringify(this.input))
-    },
-    idx() {
-      if (!this.input[0]) return {}
-      const loaded = this.cache[this.hashInput]
-      return loaded ? lunr.Index.load(loaded) : this.makeIndex(this.hashInput)
-    },
-  },
-  watch: {
-    search: {
-      handler(search = "") {
-        if (
-          (!search.trim() || search === "undefined") &&
-          Array.isArray(this.input)
-        ) {
-          this.$emit("results-length", this.input.length)
-          this.$emit("results", this.input.slice(0, this.limit))
-          this.theOutput = this.input.slice(0, this.limit)
-          return
-        }
-        const update = (output) => {
-          if (output.then) {
-            const that = this
-            return output.then((newOutput) => {
-              const hash = that.hashThis(JSON.stringify(newOutput))
-              if (that.outputHash === hash) return
-              that.outputHash = hash
-              that.$emit("results-length", newOutput.length)
-              that.$emit("results", newOutput.slice(0, that.limit))
-              that.theOutput = newOutput.slice(0, that.limit)
-            })
-          }
-          const hash = this.hashThis(JSON.stringify(output))
-          if (this.outputHash === hash) return
-          this.outputHash = hash
-          try {
-            this.$emit("results-length", output.length)
-            this.$emit("results", output.slice(0, this.limit))
-            this.theOutput = output.slice(0, this.limit)
-          } catch (e) {
-            console.warn(e, "???", output)
-          }
-        }
-        if (this.output.then) {
-          return this.output(search).then(async (output) => {
-            update(await output)
-          })
-        }
-        update(this.output(search))
-      },
-      immediate: true,
-    },
-  },
-  mounted() {
-    document.addEventListener("keydown", this.nextItem)
-  },
-  destroyed() {
-    document.removeEventListener("keydown", this.nextItem)
-  },
-  methods: {
-    async output(search) {
-      const that = this
-      if ((await this.idx) && (await this.idx.search)) {
-        return this.idx
-          .search(`${search}*`)
-          .map(({ ref }) => that.input[+ref], that)
-      }
-      if (this.idx.then)
-        return this.idx.then((index) =>
-          index.search(`${search}*`).map(({ ref }) => that.input[+ref], that)
-        )
-      // no index
-      return this.input
-    },
-    makeIndex(hashInput) {
-      const that = this
-      if (this.input[0] && this.search) {
-        const first = this.fields
-        // if (this.log) console.log("feilds from ", first)
 
-        const stopWords = this.stopWords
+const transformedInput = computed(() =>
-        const documents = this.input.map((val, i) => {
+  props.input.map((val, i) => {
-          const doc = {}
+    return {
-          const seen = []
+      __id: i,
-          function replacer(key, value) {
+      ...val,
-            if (key[0] === "_") {
-              return
-            } else if (typeof value === "object" && value !== null) {
-              if (seen.includes(key)) return
-              else seen.push(key)
     }
-            return value
-          }
-          Object.keys(val).forEach((key) => {
-            doc[key] = JSON.stringify(val[key], replacer)
   })
-          return { __id: i, ...val }
+)
-        })
+
-        const idx = lunr(function () {
+const firstInput = computed(() =>
+  transformedInput.value.length > 0 ? transformedInput.value[0] : {}
+)
+
+const idx = computed(() => {
+  return lunr(function () {
     this.ref("__id")
-          if (!stopWords) {
+
-            this.pipeline.remove(lunr.stopWordFilter)
+    Object.keys(firstInput.value).forEach((key) => this.field(key), this)
-            this.pipeline.remove(lunr.stemmer)
+
-          }
+    transformedInput.value.forEach((doc) => {
-          Object.keys(first).forEach(function (key) {
-            if (key[0] !== "_") {
-              this.field(key)
-            }
-          }, this)
-          documents.forEach(function (doc) {
       this.add(doc)
     }, this)
-          // if (that.log) console.log(this)
   })
-        that.cache[hashInput] = idx.toJSON()
+})
-        return idx
+
-      } else {
+const searchResults = computed(() =>
-        return {}
+  idx.value.search(`${props.search}*`).map((result) => props.input[+result.ref])
-      }
+)
-    },
-    hashThis(message, n = 8) {
-      if (+n === 0) return message
-      let hash = 0
-      if (message.length === 0) return this.hashThis(this.hex32(hash), n - 1)
-      for (let i = 0; i < message.length; i++) {
-        const char = message.charCodeAt(i)
-        hash = (hash << 5) - hash + char
-        hash = hash & hash // Convert to 32bit integer
-      }
-      return this.hashThis(this.hex32(hash), n - 1)
-    },
-    hex32(val) {
-      val &= 0xffffffff
-      const hex = val.toString(16).toUpperCase()
-      return `00000000${hex}`.slice(-8)
-    },
-    nextItem(e) {
-      if (e.keyCode === 38 && this.currentItem > 0) {
-        e.preventDefault()
-        this.currentItem--
-        this.$nextTick().then(() => {
-          this.$refs[`item-${this.currentItem}`][0].$el.focus()
-        })
-      } else if (
-        e.keyCode === 40 &&
-        this.currentItem < this.theOutput.length - 1
-      ) {
-        e.preventDefault()
-        this.currentItem++
-        this.$nextTick().then(() => {
-          this.$refs[`item-${this.currentItem}`][0].$el.focus()
-        })
-      }
-    },
-  },
-}
 </script>

components/app/Search.vue

@@ -51,31 +51,28 @@
   </SmartModal>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
+import { ref } from "@nuxtjs/composition-api"
 import { HoppAction, invokeAction } from "~/helpers/actions"
-import { spotlight, lunr } from "~/helpers/shortcuts"
+import { spotlight as mappings, lunr } from "~/helpers/shortcuts"
 
-export default defineComponent({
+defineProps<{
-  props: {
+  show: boolean
-    show: Boolean,
+}>()
-  },
+
-  data() {
+const emit = defineEmits<{
-    return {
+  (e: "hide-modal"): void
-      search: "",
+}>()
-      mappings: spotlight,
+
-      lunr,
+const search = ref("")
-    }
+
-  },
+const hideModal = () => {
-  methods: {
+  search.value = ""
-    hideModal() {
+  emit("hide-modal")
-      this.search = ""
+}
-      this.$emit("hide-modal")
+
-    },
+const runAction = (command: HoppAction) => {
-    runAction(command: HoppAction) {
   invokeAction(command)
-      this.hideModal()
+  hideModal()
-    },
+}
-  },
-})
 </script>

package-lock.json

@@ -61,6 +61,7 @@
         "@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.6",
         "@vue/test-utils": "^1.2.2",
@@ -8127,6 +8128,12 @@
       "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",
@@ -42038,6 +42045,12 @@
       "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",

package.json

@@ -77,6 +77,7 @@
     "@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.6",
     "@vue/test-utils": "^1.2.2",