chore: add spellcheck to the playground

empathyco · Jun 13, 2024 · 4b71dd8 · 4b71dd8
1 parent bcb6160
commit 4b71dd8
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 12 deletions.
diff --git a/packages/_vue3-migration-test/package.json b/packages/_vue3-migration-test/package.json
@@ -16,7 +16,7 @@
     "@vueuse/core": "~10.7.1",
     "vue": "^3.4.22",
     "vue-router": "^4.3.0",
-    "vuex": "^4.1.0"
+    "vuex": "4.0.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
@@ -28,7 +28,8 @@ import {
   TestBasePanel,
   TestBaseKeyboardNavigation,
   TestBaseEventsModal,
-  TestBaseIdModal
+  TestBaseIdModal,
+  TestSpellcheck
 } from './';
 
 const routes = [
@@ -176,6 +177,11 @@ const routes = [
     path: '/test-base-id-modal',
     name: 'TestBaseIdModal',
     component: TestBaseIdModal
+  },
+  {
+    path: '/test-spellcheck',
+    name: 'Spellcheck',
+    component: TestSpellcheck
   }
 ];
 

diff --git a/packages/_vue3-migration-test/src/x-modules/search/components/index.ts b/packages/_vue3-migration-test/src/x-modules/search/components/index.ts
@@ -1,3 +1,4 @@
 export { default as TestSortDropdown } from './test-sort-dropdown.vue';
 export { default as TestSortList } from './test-sort-list.vue';
 export { default as TestSortPickerList } from './test-sort-picker-list.vue';
+export { default as TestSpellcheck } from './test-spellcheck.vue';
diff --git a/packages/_vue3-migration-test/src/x-modules/search/components/test-spellcheck.vue b/packages/_vue3-migration-test/src/x-modules/search/components/test-spellcheck.vue
@@ -0,0 +1,20 @@
+<template>
+  <SearchInput />
+  <Spellcheck v-if="input">
+    <template #default="{ query }">
+      No results found for '{{ query }}'. We show you results for
+      <SpellcheckButton />
+    </template>
+  </Spellcheck>
+</template>
+
+<script setup>
+  import SpellcheckButton from '../../../../../x-components/src/x-modules/search/components/spellcheck-button.vue';
+  import Spellcheck from '../../../../../x-components/src/x-modules/search/components/spellcheck.vue';
+  import SearchInput from '../../../../../x-components/src/x-modules/search-box/components/search-input.vue';
+  import { useState } from '../../../../../x-components/src/composables/use-state';
+
+  const input = useState('search', ['query']).query;
+</script>
+
+<style scoped></style>
diff --git a/packages/_vue3-migration-test/src/x-modules/search/x-module.ts b/packages/_vue3-migration-test/src/x-modules/search/x-module.ts
@@ -7,11 +7,11 @@ import { SearchXModule } from '../../../../x-components/src/x-modules/search';
 export const searchXModule = {
   storeModule: {
     state: {
-      query: 'dress',
       results: getResultsStub(10),
       promoteds: getPromotedsStub(),
       banners: getBannersStub(),
-      status: 'success'
+      status: 'success',
+      spellcheckedQuery: 'spellcheckedQuery'
     }
   }
 } as PrivateXModuleOptions<SearchXModule>;
diff --git a/packages/x-components/src/plugins/__tests__/x-plugin-alias.spec.ts b/packages/x-components/src/plugins/__tests__/x-plugin-alias.spec.ts
@@ -51,7 +51,7 @@ describe('testing plugin alias', () => {
         querySuggestions: undefined,
         recommendations: undefined,
         relatedTags: undefined,
-        search: undefined
+        search: 'initial' // It is already registered by the `searchXModule` import itself
       },
       device: null,
       facets: {},
@@ -77,7 +77,7 @@ describe('testing plugin alias', () => {
       selectedFilters: [],
       selectedRelatedTags: [],
       semanticQueries: [],
-      spellcheckedQuery: null,
+      spellcheckedQuery: '', // It is already registered by the `searchXModule` import itself
       totalResults: 0,
       selectedSort: ''
     };

diff --git a/packages/x-components/src/x-modules/search/components/spellcheck-button.vue b/packages/x-components/src/x-modules/search/components/spellcheck-button.vue
@@ -15,7 +15,6 @@
   import { WireMetadata } from '../../../wiring/wiring.types';
   import { searchXModule } from '../x-module';
   import { use$x } from '../../../composables/use-$x';
-  import { useRegisterXModule } from '../../../composables/use-register-x-module';
   import { useState } from '../../../composables/use-state';
 
   /**
@@ -29,8 +28,6 @@
     name: 'SpellcheckButton',
     xModule: searchXModule.name,
     setup() {
-      useRegisterXModule(searchXModule);
-
       const $x = use$x();
 
       const el = ref<HTMLElement>();

diff --git a/packages/x-components/src/x-modules/search/components/spellcheck.vue b/packages/x-components/src/x-modules/search/components/spellcheck.vue
@@ -7,7 +7,6 @@
 <script lang="ts">
   import { defineComponent } from 'vue';
   import { searchXModule } from '../x-module';
-  import { useRegisterXModule } from '../../../composables/use-register-x-module';
   import { useState } from '../../../composables/use-state';
 
   /**
@@ -24,8 +23,6 @@
     name: 'Spellcheck',
     xModule: searchXModule.name,
     setup() {
-      useRegisterXModule(searchXModule);
-
       /**
        * The query and the spellcheckedQuery from the search state.
        *

diff --git a/packages/x-components/src/x-modules/search/x-module.ts b/packages/x-components/src/x-modules/search/x-module.ts
@@ -1,5 +1,6 @@
 // XModule
 import { XModule } from '../x-modules.types';
+import { XPlugin } from '../../plugins/x-plugin';
 import { searchEmitters } from './store/emitters';
 import { searchXStoreModule } from './store/module';
 import { SearchXStoreModule } from './store/types';
@@ -24,3 +25,5 @@ export const searchXModule: SearchXModule = {
   storeEmitters: searchEmitters,
   wiring: searchWiring
 };
+
+XPlugin.registerXModule(searchXModule);