feat: add snippet provider & use it

EMP-3378
empathyco · Feb 27, 2024 · bec789f · bec789f
1 parent c5c7997
commit bec789f
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 4 deletions.
diff --git a/packages/x-components/src/components/snippet-config-provider.vue b/packages/x-components/src/components/snippet-config-provider.vue
@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { defineComponent, provide, ref } from 'vue';
+  import { useNoElementRender } from '../composables';
+  import { baseSnippetConfig } from '../views/base-config';
+  import { SnippetConfig } from '../x-installer';
+
+  /**.
+   * SnippetConfig Provider component.
+   * This component provides a SnippetConfig object and a function that is responsible for mutating the SnippetConfig when we need to update its data from an injector component.
+   *
+   * @public
+   */
+  export default defineComponent({
+    name: 'SnippetConfigProvider',
+    setup(_, { slots }) {
+      const snippetConfig = ref(baseSnippetConfig);
+
+      /**
+       * Sets or updates the snippet config.
+       *
+       * @param config - A part or all the snippet config.
+       *
+       * @public
+       */
+      function setSnippetConfig(config: Partial<SnippetConfig>): void {
+        Object.assign(snippetConfig.value, config);
+      }
+
+      provide('snippetConfig', {
+        snippetConfig,
+        setSnippetConfig
+      });
+
+      return () => useNoElementRender(slots);
+    }
+  });
+</script>
diff --git a/packages/x-components/src/views/home/Home.vue b/packages/x-components/src/views/home/Home.vue
@@ -2,7 +2,9 @@
   <div class="x x-text-neutral-90">
     <Tagging :consent="false" />
     <SnippetConfigExtraParams :values="initialExtraParams" />
-    <PreselectedFilters />
+    <SnippetConfigProvider>
+      <PreselectedFilters />
+    </SnippetConfigProvider>
     <UrlHandler query="q" store="store" />
     <SnippetCallbacks />
     <ExperienceControls />
@@ -520,6 +522,7 @@
   import { QueryPreviewInfo } from '../../x-modules/queries-preview/store/types';
   import QueryPreviewButton from '../../x-modules/queries-preview/components/query-preview-button.vue';
   import DisplayEmitter from '../../components/display-emitter.vue';
+  import SnippetConfigProvider from '../../components/snippet-config-provider.vue';
   import Aside from './aside.vue';
   import PredictiveLayer from './predictive-layer.vue';
   import Result from './result.vue';
@@ -531,6 +534,7 @@
       infiniteScroll
     },
     components: {
+      SnippetConfigProvider,
       DisplayEmitter,
       QueryPreviewButton,
       DisplayResultProvider,

diff --git a/packages/x-components/src/x-modules/facets/components/preselected-filters.vue b/packages/x-components/src/x-modules/facets/components/preselected-filters.vue
@@ -1,9 +1,9 @@
 <script lang="ts">
-  import { defineComponent, PropType, onMounted, watch, computed, ComputedRef } from 'vue';
+  import { defineComponent, PropType, onMounted, watch, computed, ComputedRef, inject } from 'vue';
   import { createRawFilters } from '../../../utils/filters';
   import { isArrayEmpty } from '../../../utils/array';
   import { SnippetConfig } from '../../../x-installer/api/api.types';
-  import { use$x, useHybridInject, useNoElementRender } from '../../../composables/index';
+  import { use$x, useNoElementRender } from '../../../composables/index';
 
   /**
    * This component emits {@link FacetsXEvents.PreselectedFiltersProvided} when a preselected filter
@@ -35,7 +35,8 @@
        *
        * @internal
        */
-      const snippetConfig = useHybridInject<SnippetConfig>('snippetConfig');
+      // TODO: Solve this typing issues without using <any>
+      const { snippetConfig } = inject<Partial<SnippetConfig> | any>('snippetConfig');
 
       /**
        * Gets the provided preselected filters prioritizing the {@link SnippetConfig} over the