feat: build a Vue3 test search component

packages/_vue3-migration-test/src/App.vue

@@ -12,7 +12,16 @@
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  import { provide } from 'vue';
+  import { baseSnippetConfig } from '../../x-components/src/views/base-config';
+
+  /**
+   * TODO: remove when x-instaler is migrated and used in this Playground.
+   * X-instaler's `createApp` fn should provide the snippet config.
+   */
+  provide('snippetConfig', baseSnippetConfig);
+</script>
 
 <style lang="scss" scoped>
   #app {

packages/_vue3-migration-test/src/components/index.ts

@@ -15,3 +15,4 @@ export { default as TestBaseKeyboardNavigation } from './test-base-keyboard-navi
 export { default as TestBaseEventsModal } from './modals/test-base-events-modal.vue';
 export { default as TestBaseIdModal } from './modals/test-base-id-modal.vue';
 export { default as TestExtraParams } from './extra-params/test-extra-params.vue';
+export { default as TestSearch } from './test-search.vue';

packages/_vue3-migration-test/src/components/test-search.vue

@@ -0,0 +1,59 @@
+<template>
+  <SnippetConfigExtraParams />
+  <SearchInput />
+  <ClearSearchInput />
+  <SearchButton />
+  <!--  No Results Message  -->
+  <div
+    v-if="_$x.noResults && !_$x.fromNoResultsWithFilters"
+    class="x-p-28 x-flex x-flex-col x-gap-8 x-items-center x-bg-lead-25 x-my-8"
+    data-test="no-results-message"
+  >
+    <p>
+      There are no results for
+      <span class="x-font-bold">{{ _$x.query.search }}</span>
+    </p>
+  </div>
+  <ResultsList>
+    <BaseVariableColumnGrid
+      style="--x-size-min-width-grid-item: 150px"
+      class="x-gap-12"
+      :columns="4"
+    >
+      <template #result="{ item: result }">
+        <BaseResultImage
+          :result="result"
+          class="x-result__picture x-picture-zoom"
+          :loadAnimation="CrossFade"
+        >
+          <template #placeholder>
+            <div style="padding-top: 100%; background-color: lightgray"></div>
+          </template>
+          <template #fallback>
+            <div style="padding-top: 100%; background-color: lightsalmon"></div>
+          </template>
+        </BaseResultImage>
+        <BaseResultLink :result="result">
+          <h1 class="x-text1 x-text1-lg">{{ result.name }}</h1>
+        </BaseResultLink>
+      </template>
+    </BaseVariableColumnGrid>
+  </ResultsList>
+</template>
+
+<script setup lang="ts">
+  import SnippetConfigExtraParams from '../../../x-components/src/x-modules/extra-params/components/snippet-config-extra-params.vue';
+  import SearchInput from '../../../x-components/src/x-modules/search-box/components/search-input.vue';
+  import ResultsList from '../../../x-components/src/x-modules/search/components/results-list.vue';
+  import BaseResultImage from '../../../x-components/src/components/result/base-result-image.vue';
+  import BaseResultLink from '../../../x-components/src/components/result/base-result-link.vue';
+  import BaseVariableColumnGrid from '../../../x-components/src/components/base-variable-column-grid.vue';
+  import ClearSearchInput from '../../../x-components/src/x-modules/search-box/components/clear-search-input.vue';
+  import SearchButton from '../../../x-components/src/x-modules/search-box/components/search-button.vue';
+  import CrossFade from '../../../x-components/src/components/animations/cross-fade.vue';
+  import { use$x } from '../../../x-components/src/composables/use-$x';
+  // TODO `$x` name cannot be used while XPlugin defines its own `this.$x` in the mixin
+  const _$x = use$x();
+</script>
+
+<style></style>

packages/_vue3-migration-test/src/main.ts

@@ -1,15 +1,6 @@
-import { QuerySuggestionsRequest, XComponentsAdapter } from '@empathyco/x-types';
 import { Component, configureCompat, createApp } from 'vue';
 import { createStore } from 'vuex';
-import { getRelatedTagsStub } from '../../x-components/src/__stubs__/related-tags-stubs.factory';
-import { getQuerySuggestionsStub } from '../../x-components/src/__stubs__/query-suggestions-stubs.factory';
-import {
-  createResultStub,
-  getBannersStub,
-  getNextQueriesStub,
-  getPromotedsStub,
-  getResultsStub
-} from '../../x-components/src/__stubs__/index';
+import { platformAdapter } from '../../x-adapter-platform/src/platform.adapter';
 import { XInstaller } from '../../x-components/src/x-installer/x-installer/x-installer';
 import App from './App.vue';
 import router from './router';
@@ -45,45 +36,7 @@ if (VUE_COMPAT_MODE === 2) {
   });
 }
 
-const adapter = {
-  relatedTags: () =>
-    new Promise(resolve => {
-      resolve({ relatedTags: getRelatedTagsStub(10) });
-    }),
-  querySuggestions: (request: QuerySuggestionsRequest) =>
-    new Promise(resolve => {
-      resolve({ suggestions: getQuerySuggestionsStub(request.query, 5) });
-    }),
-  nextQueries: () =>
-    new Promise(resolve => {
-      resolve({
-        nextQueries: [
-          ...getNextQueriesStub(),
-          {
-            facets: [],
-            isCurated: false,
-            modelName: 'NextQuery',
-            query: 'next_query_preview',
-            results: getResultsStub(10),
-            totalResults: 10
-          }
-        ]
-      });
-    }),
-  search: () =>
-    new Promise(resolve => {
-      resolve({
-        results: getResultsStub(10),
-        totalResults: 50,
-        promoteds: getPromotedsStub(),
-        banners: getBannersStub()
-      });
-    }),
-  identifierResults: () =>
-    new Promise(resolve =>
-      resolve({ results: ['123A', '123B', '123C', '123D'].map(id => createResultStub(id)) })
-    )
-} as unknown as XComponentsAdapter;
+const adapter = platformAdapter;
 
 const store = createStore({});
 
@@ -96,6 +49,7 @@ window.initX = {
   instance: 'empathy',
   lang: 'en'
 };
+
 new XInstaller({
   adapter,
   store,

packages/_vue3-migration-test/src/router.ts

@@ -40,10 +40,16 @@ import {
   TestPopularSearches,
   TestNextQueries,
   TestIdentifierResults,
-  TestExtraParams
+  TestExtraParams,
+  TestSearch
 } from './';
 
 const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: TestSearch
+  },
   {
     path: '/animate-width',
     name: 'AnimateWidth',

packages/_vue3-migration-test/src/x-modules/search/x-module.ts

@@ -1,19 +1,15 @@
-import { getResultsStub } from '../../../../x-components/src/__stubs__/results-stubs.factory';
-import { getBannersStub } from '../../../../x-components/src/__stubs__/banners-stubs.factory';
-import { getPromotedsStub } from '../../../../x-components/src/__stubs__/promoteds-stubs.factory';
 import { PrivateXModuleOptions } from '../../../../x-components/src/plugins';
 import { SearchXModule } from '../../../../x-components/src/x-modules/search';
-import { getPartialResultsStub } from '../../../../x-components/src/__stubs__/partials-results-stubs.factory';
 
 export const searchXModule = {
   storeModule: {
     state: {
-      results: getResultsStub(10),
-      promoteds: getPromotedsStub(),
-      banners: getBannersStub(),
-      status: 'success',
-      spellcheckedQuery: 'spellcheckedQuery',
-      partialResults: getPartialResultsStub()
+      results: [],
+      promoteds: [],
+      banners: [],
+      status: 'initial',
+      spellcheckedQuery: '',
+      partialResults: []
     }
   }
 } as PrivateXModuleOptions<SearchXModule>;

packages/x-components/src/x-modules/search/store/emitters.ts

@@ -16,8 +16,24 @@ export const searchEmitters = createStoreEmitters(searchXStoreModule, {
   },
   PageChanged: state => state.page,
   ResultsChanged: state => state.results,
-  SearchRequestChanged: (_, getters) => getters.request,
-  SearchRequestUpdated: (_, getters) => getters.request,
+  SearchRequestChanged: state => {
+    return {
+      query: state.query,
+      sort: state.sort,
+      page: state.page,
+      filters: state.selectedFilters,
+      extraParams: state.params
+    };
+  },
+  SearchRequestUpdated: state => {
+    return {
+      query: state.query,
+      sort: state.sort,
+      page: state.page,
+      filters: state.selectedFilters,
+      extraParams: state.params
+    };
+  },
   SearchResponseChanged: {
     selector: (state, getters) => {
       return {