Merge pull request #34 from smori1983/database-mixin

Extract database codes into database-mixin.js
smori1983 · Oct 2, 2023 · f9310f7 · f9310f7
2 parents e3b23bb + 3fbc374
commit f9310f7
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 87 deletions.
diff --git a/src/components/Form.vue b/src/components/Form.vue
@@ -31,19 +31,15 @@
 </template>
 
 <script>
-import data from '@dynamic/vuepress-plugin-flexsearch/data';
-import Database from './database';
-import excerpt from './excerpt';
-import ngram from '../tokenizer/ngram';
+import databaseMixin from './database-mixin';
 
-/* global FLEX_SEARCH_MAX_SUGGESTIONS */
-/* global FLEX_SEARCH_EXCERPT_AROUND_LENGTH */
-/* global FLEX_SEARCH_EXCERPT_HEAD_TEXT */
-/* global FLEX_SEARCH_EXCERPT_TAIL_TEXT */
-/* global FLEX_SEARCH_NGRAM_SIZE */
 export default {
   name: 'PluginFlexSearchForm',
 
+  mixins: [
+    databaseMixin,
+  ],
+
   props: {
     queryParam: {
       type: String,
@@ -53,27 +49,22 @@ export default {
 
   data () {
     return {
-      database: new Database(),
-
       query: '',
       searchResult: [],
     };
   },
 
   mounted() {
-    for (const locale in data) {
-      // Consider the case locale defined but no pages created.
-      this.database.add(locale, data[locale] || {});
-    }
+    this.databaseInit();
 
     this.query = this.$router.currentRoute.query[this.queryParam] || '';
-    this.updateSearchResult();
+    this.searchResult = this.databaseSearch(this.query);
   },
 
   watch: {
     $route (to, from) {
       this.query = to.query[this.queryParam] || '';
-      this.updateSearchResult();
+      this.searchResult = this.databaseSearch(this.query);
     },
   },
 
@@ -90,36 +81,6 @@ export default {
         });
       }
     },
-    updateSearchResult () {
-      this.searchResult = this.search();
-    },
-    search () {
-      const query = this.query.trim();
-
-      if (query.length === 0) {
-        return [];
-      }
-
-      const localePath = this.$localePath;
-      const queryForSearch = ngram.createForSearch(query, FLEX_SEARCH_NGRAM_SIZE);
-      const max = this.$site.themeConfig.searchMaxSuggestions || FLEX_SEARCH_MAX_SUGGESTIONS;
-
-      const matchedKeys = this.database.search(localePath, queryForSearch, max);
-
-      return matchedKeys.map((key) => {
-        const page = data[localePath][key];
-
-        return {
-          title: page.title,
-          path: page.path,
-          excerpt: excerpt.create(page.dataForExcerpt, query, {
-            aroundLength: FLEX_SEARCH_EXCERPT_AROUND_LENGTH,
-            headText: FLEX_SEARCH_EXCERPT_HEAD_TEXT,
-            tailText: FLEX_SEARCH_EXCERPT_TAIL_TEXT,
-          }),
-        };
-      });
-    },
   }
 };
 </script>

diff --git a/src/components/SearchBoxFlexSearch.vue b/src/components/SearchBoxFlexSearch.vue
@@ -48,25 +48,19 @@
 </template>
 
 <script>
-import data from '@dynamic/vuepress-plugin-flexsearch/data'
-import Database from './database';
-import excerpt from './excerpt'
-import ngram from '../tokenizer/ngram'
+import databaseMixin from './database-mixin';
 
 /* global FLEX_SEARCH_HOTKEYS */
-/* global FLEX_SEARCH_MAX_SUGGESTIONS */
-/* global FLEX_SEARCH_EXCERPT_AROUND_LENGTH */
-/* global FLEX_SEARCH_EXCERPT_HEAD_TEXT */
-/* global FLEX_SEARCH_EXCERPT_TAIL_TEXT */
-/* global FLEX_SEARCH_NGRAM_SIZE */
 /* global FLEX_SEARCH_UI_ALIGN_RIGHT_FACTOR */
 export default {
   name: 'SearchBoxFlexSearchBase',
 
+  mixins: [
+    databaseMixin,
+  ],
+
   data () {
     return {
-      database: new Database(),
-
       query: '',
       focused: false,
       focusIndex: 0,
@@ -96,31 +90,7 @@ export default {
      * @return {{title: string, path: string, excerpt: string}[]}
      */
     suggestions () {
-      const query = this.query.trim();
-
-      if (query.length === 0) {
-        return [];
-      }
-
-      const localePath = this.$localePath;
-      const queryForSearch = ngram.createForSearch(query, FLEX_SEARCH_NGRAM_SIZE);
-      const max = this.$site.themeConfig.searchMaxSuggestions || FLEX_SEARCH_MAX_SUGGESTIONS;
-
-      const matchedKeys = this.database.search(localePath, queryForSearch, max);
-
-      return matchedKeys.map((key) => {
-        const page = data[localePath][key];
-
-        return {
-          title: page.title,
-          path: page.path,
-          excerpt: excerpt.create(page.dataForExcerpt, query, {
-            aroundLength: FLEX_SEARCH_EXCERPT_AROUND_LENGTH,
-            headText: FLEX_SEARCH_EXCERPT_HEAD_TEXT,
-            tailText: FLEX_SEARCH_EXCERPT_TAIL_TEXT,
-          }),
-        };
-      });
+      return this.databaseSearch(this.query);
     },
 
     // make suggestions align right when there are not enough items
@@ -136,10 +106,7 @@ export default {
     window.addEventListener('resize', this.resizeSuggestionsBox);
     document.addEventListener('keydown', this.onHotkey);
 
-    for (const locale in data) {
-      // Consider the case locale defined but no pages created.
-      this.database.add(locale, data[locale] || {});
-    }
+    this.databaseInit();
   },
 
   beforeDestroy () {

diff --git a/src/components/database-mixin.js b/src/components/database-mixin.js
@@ -0,0 +1,59 @@
+import data from '@dynamic/vuepress-plugin-flexsearch/data';
+
+import Database from './database';
+import excerpt from './excerpt';
+import ngram from '../tokenizer/ngram';
+
+/* global FLEX_SEARCH_MAX_SUGGESTIONS */
+/* global FLEX_SEARCH_EXCERPT_AROUND_LENGTH */
+/* global FLEX_SEARCH_EXCERPT_HEAD_TEXT */
+/* global FLEX_SEARCH_EXCERPT_TAIL_TEXT */
+/* global FLEX_SEARCH_NGRAM_SIZE */
+export default {
+  data () {
+    return {
+      database: new Database(),
+    };
+  },
+
+  methods: {
+    databaseInit() {
+      for (const locale in data) {
+        // Consider the case locale defined but no pages created.
+        this.database.add(locale, data[locale] || {});
+      }
+    },
+
+    /**
+     * @param {string} queryRow
+     * @return {{title: string, path: string, excerpt: string}[]}
+     */
+    databaseSearch(queryRow) {
+      const query = queryRow.trim();
+
+      if (query.length === 0) {
+        return [];
+      }
+
+      const localePath = this.$localePath;
+      const queryForSearch = ngram.createForSearch(query, FLEX_SEARCH_NGRAM_SIZE);
+      const limit = this.$site.themeConfig.searchMaxSuggestions || FLEX_SEARCH_MAX_SUGGESTIONS;
+
+      const matchedKeys = this.database.search(localePath, queryForSearch, limit);
+
+      return matchedKeys.map((key) => {
+        const page = data[localePath][key];
+
+        return {
+          title: page.title,
+          path: page.path,
+          excerpt: excerpt.create(page.dataForExcerpt, query, {
+            aroundLength: FLEX_SEARCH_EXCERPT_AROUND_LENGTH,
+            headText: FLEX_SEARCH_EXCERPT_HEAD_TEXT,
+            tailText: FLEX_SEARCH_EXCERPT_TAIL_TEXT,
+          }),
+        };
+      });
+    },
+  },
+};