add SnippetConfigExtraParams to playground

empathyco · Jun 20, 2024 · 16cf345 · 16cf345
1 parent 6e15429
commit 16cf345
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 22 deletions.
diff --git a/packages/_vue3-migration-test/src/components/extra-params/test-extraparams.vue b/packages/_vue3-migration-test/src/components/extra-params/test-extraparams.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+  import SnippetConfigExtraParams from '../../../../x-components/src/x-modules/extra-params/components/snippet-config-extra-params.vue';
+  const snippetConfig = window.InterfaceX?.getSnippetConfig();
+</script>
+
+<template>
+  <SnippetConfigExtraParams />
+  {{ snippetConfig }}
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/packages/_vue3-migration-test/src/components/index.ts b/packages/_vue3-migration-test/src/components/index.ts
@@ -14,3 +14,4 @@ export { default as TestBasePanel } from './panels/test-base-panel.vue';
 export { default as TestBaseKeyboardNavigation } from './test-base-keyboard-navigation.vue';
 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-extraparams.vue';
diff --git a/packages/_vue3-migration-test/src/main.ts b/packages/_vue3-migration-test/src/main.ts
@@ -1,7 +1,6 @@
 import { QuerySuggestionsRequest, XComponentsAdapter } from '@empathyco/x-types';
 import { Component, configureCompat, createApp } from 'vue';
 import { createStore } from 'vuex';
-import { xPlugin } from '../../x-components/src/plugins/x-plugin';
 import { getRelatedTagsStub } from '../../x-components/src/__stubs__/related-tags-stubs.factory';
 import { getQuerySuggestionsStub } from '../../x-components/src/__stubs__/query-suggestions-stubs.factory';
 import {
@@ -10,6 +9,7 @@ import {
   getPromotedsStub,
   getResultsStub
 } from '../../x-components/src/__stubs__/index';
+import { XInstaller } from '../../x-components/src/x-installer/x-installer/x-installer';
 import App from './App.vue';
 import router from './router';
 import {
@@ -84,18 +84,23 @@ const store = createStore({});
 createApp(App as Component)
   .use(router)
   .use(store)
-  .use(xPlugin, {
-    adapter,
-    store,
-    __PRIVATE__xModules: {
-      facets: facetsXModule,
-      nextQueries: nextQueriesXModule,
-      scroll: scrollXModule,
-      search: searchXModule,
-      queriesPreview: queriesPreviewXModule,
-      semanticQueries: semanticQueriesXModule,
-      recommendations: recommendationsXModule,
-      identifierResults: identifierResultsXModule
-    }
-  })
   .mount('#app');
+
+window.initX = {
+  instance: 'empathy',
+  lang: 'en'
+};
+new XInstaller({
+  adapter,
+  store,
+  __PRIVATE__xModules: {
+    facets: facetsXModule,
+    nextQueries: nextQueriesXModule,
+    scroll: scrollXModule,
+    search: searchXModule,
+    queriesPreview: queriesPreviewXModule,
+    semanticQueries: semanticQueriesXModule,
+    recommendations: recommendationsXModule,
+    identifierResults: identifierResultsXModule
+  }
+}).init();
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
@@ -38,7 +38,8 @@ import {
   TestSemanticQueries,
   TestRecommendations,
   TestNextQueries,
-  TestIdentifierResults
+  TestIdentifierResults,
+  TestExtraParams
 } from './';
 
 const routes = [
@@ -236,6 +237,11 @@ const routes = [
     path: '/identifier-results',
     name: 'IdentifierResults',
     component: TestIdentifierResults
+  },
+  {
+    path: '/snippet-config-extraparams',
+    name: 'SnippetConfigExtraparams',
+    component: TestExtraParams
   }
 ];
 

diff --git a/packages/x-components/src/x-modules/extra-params/components/extra-params.vue b/packages/x-components/src/x-modules/extra-params/components/extra-params.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Dictionary } from '@empathyco/x-utils';
-  import { defineComponent, watch } from 'vue';
+  import { defineComponent, PropType, watch } from 'vue';
   import { extraParamsXModule } from '../x-module';
   import { use$x } from '../../../composables/use-$x';
   import { useState } from '../../../composables/use-state';
@@ -17,7 +17,7 @@
     xModule: extraParamsXModule.name,
     props: {
       values: {
-        type: Object as () => Dictionary<unknown>,
+        type: Object as PropType<Dictionary<unknown>>,
         required: true
       }
     },

diff --git a/packages/x-components/src/x-modules/extra-params/components/snippet-config-extra-params.vue b/packages/x-components/src/x-modules/extra-params/components/snippet-config-extra-params.vue
@@ -4,7 +4,7 @@
 
 <script lang="ts">
   import { forEach, Dictionary } from '@empathyco/x-utils';
-  import { defineComponent, inject, ref, watch } from 'vue';
+  import { defineComponent, inject, PropType, ref, watch } from 'vue';
   import { SnippetConfig } from '../../../x-installer/api/api.types';
   import { extraParamsXModule } from '../x-module';
   import ExtraParams from './extra-params.vue';
@@ -17,11 +17,10 @@
     },
     props: {
       values: {
-        type: Object as () => Dictionary<unknown>,
-        required: true
+        type: Object as PropType<Dictionary<unknown>>
       },
       excludedExtraParams: {
-        type: Array as () => Array<keyof SnippetConfig>,
+        type: Array as PropType<Array<keyof SnippetConfig>>,
         default: (): Array<keyof SnippetConfig> => [
           'callbacks',
           'productId',