From abd13329b4d4eeaeab85ce36e8edf45dd7e37781 Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Tue, 20 Feb 2024 16:44:25 +0100
Subject: [PATCH 01/24] feat: WIP refactor component

EMP-3378
---
 .../facets/components/preselected-filters.vue | 74 ++++++++++---------
 1 file changed, 39 insertions(+), 35 deletions(-)

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
index 5c935c51fa..e6f1477550 100644
--- 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 { Component, Inject, Prop } from 'vue-property-decorator';
-  import Vue from 'vue';
+  import { defineComponent, inject, PropType, onMounted } from 'vue';
   import { createRawFilters } from '../../../utils/filters';
   import { isArrayEmpty } from '../../../utils/array';
   import { SnippetConfig } from '../../../x-installer/api/api.types';
+  import { use$x } from '../../../composables/index';
 
   /**
    * This component emits {@link FacetsXEvents.PreselectedFiltersProvided} when a preselected filter
@@ -11,41 +11,45 @@
    *
    * @public
    */
-  @Component
-  export default class PreselectedFilters extends Vue {
-    /**
-     * Injects {@link SnippetConfig} provided by an ancestor as snippetConfig.
-     *
-     * @internal
-     */
-    @Inject()
-    public snippetConfig?: SnippetConfig;
-
-    /**
-     * A list of filters to preselect.
-     *
-     * @remarks Emits the {@link FacetsXEvents.PreselectedFiltersProvided} when the
-     * component is created.
-     *
-     * @public
-     */
-    @Prop({ default: () => [] })
-    public filters!: string[];
-
-    /**
-     * Emits the provided preselected filters prioritizing the {@link SnippetConfig} over the
-     * filters prop.
-     */
-    created(): void {
-      const preselectedFilters = this.snippetConfig?.filters ?? this.filters;
-      if (!isArrayEmpty(preselectedFilters)) {
-        this.$x.emit('PreselectedFiltersProvided', createRawFilters(preselectedFilters));
+  export default defineComponent({
+    name: 'PreselectedFilters',
+    props: {
+      /**
+       * A list of filters to preselect.
+       *
+       * @remarks Emits the {@link FacetsXEvents.PreselectedFiltersProvided} when the
+       * component is created.
+       *
+       * @public
+       */
+      filters: {
+        type: Array as PropType<string[]>,
+        default: () => []
       }
-    }
+    },
+    setup(props) {
+      const $x = use$x();
+      /**
+       * Injects {@link SnippetConfig} provided by an ancestor as snippetConfig.
+       *
+       * @internal
+       */
+      const snippetConfig = inject<SnippetConfig | undefined>('snippetConfig');
+      /**
+       * Emits the provided preselected filters prioritizing the {@link SnippetConfig} over the filters prop.
+       */
+      onMounted(() => {
+        const preselectedFilters = snippetConfig?.filters ?? props.filters;
+        if (!isArrayEmpty(preselectedFilters)) {
+          $x.emit('PreselectedFiltersProvided', createRawFilters(preselectedFilters));
+        }
+      });
 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    render(): void {}
-  }
+      return {
+        props
+      };
+    }
+  });
 </script>
 
 <docs lang="mdx">

From 8e7bb4547f80ba450cacfa7d8ee3a935ff09c4cd Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Tue, 20 Feb 2024 16:45:05 +0100
Subject: [PATCH 02/24] test: WIP type mounted Component

EMP-3378
---
 .../facets/components/__tests__/preselected-filters.spec.ts    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/x-components/src/x-modules/facets/components/__tests__/preselected-filters.spec.ts b/packages/x-components/src/x-modules/facets/components/__tests__/preselected-filters.spec.ts
index 0909e8a206..4ae152d5f2 100644
--- a/packages/x-components/src/x-modules/facets/components/__tests__/preselected-filters.spec.ts
+++ b/packages/x-components/src/x-modules/facets/components/__tests__/preselected-filters.spec.ts
@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import Vue, { ComponentOptions } from 'vue';
 import { createRawFilters } from '../../../../utils/filters';
 import { baseSnippetConfig } from '../../../../views/base-config';
 import PreselectedFilters from '../preselected-filters.vue';
@@ -8,7 +9,7 @@ function renderPreselectedFilters({
   snippetFilters
 }: RenderPreselectedFiltersOptions = {}): RenderPreselectedFiltersAPI {
   const emit = jest.fn();
-  mount(PreselectedFilters, {
+  mount(PreselectedFilters as ComponentOptions<Vue>, {
     provide: {
       snippetConfig: { ...baseSnippetConfig, filters: snippetFilters }
     },

From ff2d75bb8d4acb187bb3cb599cf148db6547417d Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Tue, 20 Feb 2024 17:04:57 +0100
Subject: [PATCH 03/24] feat: useNoElementRender composable in component

EMP-3378
---
 .../x-modules/facets/components/preselected-filters.vue  | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

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
index e6f1477550..693ed13695 100644
--- a/packages/x-components/src/x-modules/facets/components/preselected-filters.vue
+++ b/packages/x-components/src/x-modules/facets/components/preselected-filters.vue
@@ -3,7 +3,7 @@
   import { createRawFilters } from '../../../utils/filters';
   import { isArrayEmpty } from '../../../utils/array';
   import { SnippetConfig } from '../../../x-installer/api/api.types';
-  import { use$x } from '../../../composables/index';
+  import { use$x, useNoElementRender } from '../../../composables/index';
 
   /**
    * This component emits {@link FacetsXEvents.PreselectedFiltersProvided} when a preselected filter
@@ -27,7 +27,7 @@
         default: () => []
       }
     },
-    setup(props) {
+    setup(props, { slots }) {
       const $x = use$x();
       /**
        * Injects {@link SnippetConfig} provided by an ancestor as snippetConfig.
@@ -45,9 +45,8 @@
         }
       });
 
-      return {
-        props
-      };
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      return () => useNoElementRender(slots);
     }
   });
 </script>

From 91f5246d69c6f77b59c447ce246ad255ddd5cac8 Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Wed, 21 Feb 2024 12:43:17 +0100
Subject: [PATCH 04/24] chore: rm unused

EMP-3378
---
 .../facets/components/preselbackup.vue        | 126 ------------------
 1 file changed, 126 deletions(-)
 delete mode 100644 packages/x-components/src/x-modules/facets/components/preselbackup.vue

diff --git a/packages/x-components/src/x-modules/facets/components/preselbackup.vue b/packages/x-components/src/x-modules/facets/components/preselbackup.vue
deleted file mode 100644
index 90faa54dba..0000000000
--- a/packages/x-components/src/x-modules/facets/components/preselbackup.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<script lang="ts">
-  import { Component, Inject, Prop, Watch } from 'vue-property-decorator';
-  import Vue from 'vue';
-  import { createRawFilters } from '../../../utils/filters';
-  import { isArrayEmpty } from '../../../utils/array';
-  import { SnippetConfig } from '../../../x-installer/api/api.types';
-
-  /**
-   * This component emits {@link FacetsXEvents.PreselectedFiltersProvided} when a preselected filter
-   * is set in the snippet config or by using the prop of the component.
-   *
-   * @public
-   */
-  @Component
-  export default class PreselectedFilters extends Vue {
-    /**
-     * Injects {@link SnippetConfig} provided by an ancestor as snippetConfig.
-     *
-     * @internal
-     */
-    @Inject('snippetConfig')
-    public snippetConfig?: SnippetConfig;
-
-    /**
-     * A list of filters to preselect.
-     *
-     * @remarks Emits the {@link FacetsXEvents.PreselectedFiltersProvided} when the
-     * component is created.
-     *
-     * @public
-     */
-    @Prop({ default: () => [] })
-    public filters!: string[];
-
-    /**
-     * Gets the provided preselected filters prioritizing the {@link SnippetConfig} over the
-     * filters prop.
-     *
-     * @returns An array of filter's ids.
-     */
-    protected get preselectedFilters(): string[] {
-      return this.snippetConfig?.filters ?? this.filters;
-    }
-
-    /**
-     * Emits the {@link FacetsXEvents.PreselectedFiltersProvided} to save
-     * the provided filters in the state.
-     */
-    @Watch('preselectedFilters')
-    protected emitPreselectedFilters(): void {
-      if (!isArrayEmpty(this.preselectedFilters)) {
-        this.$x.emit('PreselectedFiltersProvided', createRawFilters(this.preselectedFilters));
-      }
-    }
-
-    /**
-     * Emits the {@link FacetsXEvents.PreselectedFiltersProvided} when the
-     * component is created.
-     */
-    created(): void {
-      this.emitPreselectedFilters();
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    render(): void {}
-  }
-</script>
-
-<docs lang="mdx">
-## Events
-
-A list of events that the component will emit:
-
-[`PreselectedFiltersProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts).
-
-## See it in action
-
-_See how the event is triggered when the component is rendered._
-
-```vue
-<template>
-  <PreselectedFilters />
-</template>
-
-<script>
-  import { PreselectedFilters } from '@empathyco/x-components';
-  export default {
-    name: 'PreselectedFiltersDemo',
-    components: {
-      PreselectedFilters
-    },
-    provide: {
-      snippetConfig: {
-        filters: ['{!tag=brand_facet}brand_facet:"Lego"', '{!tag=age_facet}age_facet:"toddler"']
-      }
-    }
-  };
-</script>
-```
-
-### Play with props
-
-In this example, the preselected filters have been configured to use a list of configured filters by
-prop:
-
-```vue
-<template>
-  <PreselectedFilters :filters="filters" />
-</template>
-
-<script>
-  import { PreselectedFilters } from '@empathyco/x-components';
-  export default {
-    name: 'PreselectedFiltersDemo',
-    components: {
-      PreselectedFilters
-    },
-    computed: {
-      filters() {
-        return ['{!tag=brand_facet}brand_facet:"Lego"', '{!tag=age_facet}age_facet:"toddler"'];
-      }
-    }
-  };
-</script>
-```
-</docs>

From 1facf0fa6f7156c0aaec2274ee5b7997f106b5a1 Mon Sep 17 00:00:00 2001
From: anna condal <acondalv@gmail.com>
Date: Mon, 26 Feb 2024 08:30:59 +0100
Subject: [PATCH 05/24] Update
 packages/x-components/src/x-modules/facets/components/preselected-filters.vue

Co-authored-by: Guillermo Cacheda <cachedacodes@gmail.com>
---
 .../src/x-modules/facets/components/preselected-filters.vue   | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

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
index 0d08a0dc62..1d02d09aa0 100644
--- a/packages/x-components/src/x-modules/facets/components/preselected-filters.vue
+++ b/packages/x-components/src/x-modules/facets/components/preselected-filters.vue
@@ -61,9 +61,7 @@
        * Emits the {@link FacetsXEvents.PreselectedFiltersProvided} when the
        * computed prop changes.
        */
-      watch(preselectedFilters, () => {
-        emitPreselectedFilters();
-      });
+      watch(preselectedFilters, emitPreselectedFilters);
 
       /**
        * Emits the {@link FacetsXEvents.PreselectedFiltersProvided} when the

From c882abeff8f9c1dc2243404525e5d105181202d0 Mon Sep 17 00:00:00 2001
From: anna condal <acondalv@gmail.com>
Date: Mon, 26 Feb 2024 08:43:56 +0100
Subject: [PATCH 06/24] Update
 packages/x-components/src/x-modules/facets/components/preselected-filters.vue

Co-authored-by: Guillermo Cacheda <cachedacodes@gmail.com>
---
 .../src/x-modules/facets/components/preselected-filters.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
index 1d02d09aa0..b30468156f 100644
--- a/packages/x-components/src/x-modules/facets/components/preselected-filters.vue
+++ b/packages/x-components/src/x-modules/facets/components/preselected-filters.vue
@@ -44,7 +44,7 @@
        * @returns An array of filter's ids.
        */
       const preselectedFilters: ComputedRef<string[]> = computed(() => {
-        return snippetConfig?.filters ?? props.filters;
+        return snippetConfig?.value?.filters ?? props.filters;
       });
 
       /**

From b905727a283585d8f478bb6d95773a44a8ebdfdf Mon Sep 17 00:00:00 2001
From: anna condal <acondalv@gmail.com>
Date: Mon, 26 Feb 2024 08:44:07 +0100
Subject: [PATCH 07/24] Update
 packages/x-components/src/x-modules/facets/components/preselected-filters.vue

Co-authored-by: Guillermo Cacheda <cachedacodes@gmail.com>
---
 .../src/x-modules/facets/components/preselected-filters.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
index b30468156f..1bff3f5447 100644
--- a/packages/x-components/src/x-modules/facets/components/preselected-filters.vue
+++ b/packages/x-components/src/x-modules/facets/components/preselected-filters.vue
@@ -35,7 +35,7 @@
        *
        * @internal
        */
-      const snippetConfig = inject<SnippetConfig | undefined>('snippetConfig');
+      const snippetConfig = useHybridInject<SnippetConfig>('snippetConfig');
 
       /**
        * Gets the provided preselected filters prioritizing the {@link SnippetConfig} over the

From 0cd0688bf2263fc6e051326f88f48c89db21ff3c Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Mon, 26 Feb 2024 10:00:48 +0100
Subject: [PATCH 08/24] feat: use XBus Composable

EMP-3378
---
 .../facets/components/preselected-filters.vue          | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

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
index 1bff3f5447..5a4568543c 100644
--- 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,10 @@
 <script lang="ts">
-  import { defineComponent, inject, PropType, onMounted, watch, computed, ComputedRef } from 'vue';
+  import { defineComponent, PropType, onMounted, watch, computed, ComputedRef } from 'vue';
   import { createRawFilters } from '../../../utils/filters';
   import { isArrayEmpty } from '../../../utils/array';
   import { SnippetConfig } from '../../../x-installer/api/api.types';
-  import { use$x, useNoElementRender } from '../../../composables/index';
+  import { useHybridInject, useNoElementRender } from '../../../composables/index';
+  import { useXBus } from '../../../composables/use-x-bus';
 
   /**
    * This component emits {@link FacetsXEvents.PreselectedFiltersProvided} when a preselected filter
@@ -28,7 +29,8 @@
       }
     },
     setup(props, { slots }) {
-      const $x = use$x();
+      // eslint-disable-next-line @typescript-eslint/unbound-method
+      const { emit } = useXBus();
 
       /**
        * Injects {@link SnippetConfig} provided by an ancestor as snippetConfig.
@@ -53,7 +55,7 @@
        */
       const emitPreselectedFilters = (): void => {
         if (!isArrayEmpty(preselectedFilters.value)) {
-          $x.emit('PreselectedFiltersProvided', createRawFilters(preselectedFilters.value));
+          emit('PreselectedFiltersProvided', createRawFilters(preselectedFilters.value));
         }
       };
 

From c5c7997ded8dbedffefe265ad1b9e33ee1c5dfe4 Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Mon, 26 Feb 2024 10:16:12 +0100
Subject: [PATCH 09/24] feat: rollback useXBus as it does not inject the
 current location

EMP-3378
---
 .../x-modules/facets/components/preselected-filters.vue   | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

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
index 5a4568543c..49399965af 100644
--- a/packages/x-components/src/x-modules/facets/components/preselected-filters.vue
+++ b/packages/x-components/src/x-modules/facets/components/preselected-filters.vue
@@ -3,8 +3,7 @@
   import { createRawFilters } from '../../../utils/filters';
   import { isArrayEmpty } from '../../../utils/array';
   import { SnippetConfig } from '../../../x-installer/api/api.types';
-  import { useHybridInject, useNoElementRender } from '../../../composables/index';
-  import { useXBus } from '../../../composables/use-x-bus';
+  import { use$x, useHybridInject, useNoElementRender } from '../../../composables/index';
 
   /**
    * This component emits {@link FacetsXEvents.PreselectedFiltersProvided} when a preselected filter
@@ -29,8 +28,7 @@
       }
     },
     setup(props, { slots }) {
-      // eslint-disable-next-line @typescript-eslint/unbound-method
-      const { emit } = useXBus();
+      const $x = use$x();
 
       /**
        * Injects {@link SnippetConfig} provided by an ancestor as snippetConfig.
@@ -55,7 +53,7 @@
        */
       const emitPreselectedFilters = (): void => {
         if (!isArrayEmpty(preselectedFilters.value)) {
-          emit('PreselectedFiltersProvided', createRawFilters(preselectedFilters.value));
+          $x.emit('PreselectedFiltersProvided', createRawFilters(preselectedFilters.value));
         }
       };
 

From c239e8daf7c8cd67a672afffff2e15ba5d57cc81 Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Thu, 29 Feb 2024 14:51:50 +0100
Subject: [PATCH 10/24] feat: make x-bus-composable return 'none' location by
 default

EMP-3378
---
 packages/x-components/src/composables/use-x-bus.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/x-components/src/composables/use-x-bus.ts b/packages/x-components/src/composables/use-x-bus.ts
index 9d171e9b6f..fa5a4c384e 100644
--- a/packages/x-components/src/composables/use-x-bus.ts
+++ b/packages/x-components/src/composables/use-x-bus.ts
@@ -14,7 +14,7 @@ import { PropsWithType } from '../utils/index';
  * @returns An object with the `on` and `emit` functions.
  */
 export function useXBus(): UseXBusAPI {
-  const location = inject<FeatureLocation>('location');
+  const location = inject<FeatureLocation>('location', 'none');
 
   const currentComponent: PrivateExtendedVueComponent | undefined | null =
     getCurrentInstance()?.proxy;

From 274277ce3a59cf8cdc77ea129c7cd3ade9dc0da9 Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Thu, 29 Feb 2024 17:15:42 +0100
Subject: [PATCH 11/24] feat: use x-bus-composable in preselected filters

EMP-3378
---
 .../facets/components/preselected-filters.vue          | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

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
index 49399965af..e4c2f2f413 100644
--- a/packages/x-components/src/x-modules/facets/components/preselected-filters.vue
+++ b/packages/x-components/src/x-modules/facets/components/preselected-filters.vue
@@ -3,7 +3,8 @@
   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 { useHybridInject, useNoElementRender } from '../../../composables/index';
+  import { useXBus } from '../../../composables/use-x-bus';
 
   /**
    * This component emits {@link FacetsXEvents.PreselectedFiltersProvided} when a preselected filter
@@ -28,7 +29,8 @@
       }
     },
     setup(props, { slots }) {
-      const $x = use$x();
+      // eslint-disable-next-line @typescript-eslint/unbound-method
+      const { emit } = useXBus();
 
       /**
        * Injects {@link SnippetConfig} provided by an ancestor as snippetConfig.
@@ -44,7 +46,7 @@
        * @returns An array of filter's ids.
        */
       const preselectedFilters: ComputedRef<string[]> = computed(() => {
-        return snippetConfig?.value?.filters ?? props.filters;
+        return snippetConfig.value?.filters ?? props.filters;
       });
 
       /**
@@ -53,7 +55,7 @@
        */
       const emitPreselectedFilters = (): void => {
         if (!isArrayEmpty(preselectedFilters.value)) {
-          $x.emit('PreselectedFiltersProvided', createRawFilters(preselectedFilters.value));
+          emit('PreselectedFiltersProvided', createRawFilters(preselectedFilters.value));
         }
       };
 

From 896ddf37ca2648dd29cc9663f7045bc70d0070a4 Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Fri, 1 Mar 2024 08:56:07 +0100
Subject: [PATCH 12/24] chore: WIP

EMP-3546
---
 .../facets/components/preselected-filters.vue | 25 ++++++++++++-------
 1 file changed, 16 insertions(+), 9 deletions(-)

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
index e4c2f2f413..9a497501cf 100644
--- 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,11 @@
+<template>
+  <div></div>
+</template>
 <script lang="ts">
-  import { defineComponent, PropType, onMounted, watch, computed, ComputedRef } from 'vue';
+  import { defineComponent, PropType, onMounted, watch, computed, ref, inject } from 'vue';
   import { createRawFilters } from '../../../utils/filters';
   import { isArrayEmpty } from '../../../utils/array';
   import { SnippetConfig } from '../../../x-installer/api/api.types';
-  import { useHybridInject, useNoElementRender } from '../../../composables/index';
   import { useXBus } from '../../../composables/use-x-bus';
 
   /**
@@ -28,7 +30,7 @@
         default: () => []
       }
     },
-    setup(props, { slots }) {
+    setup() {
       // eslint-disable-next-line @typescript-eslint/unbound-method
       const { emit } = useXBus();
 
@@ -37,7 +39,7 @@
        *
        * @internal
        */
-      const snippetConfig = useHybridInject<SnippetConfig>('snippetConfig');
+      const snippetConfig = inject<SnippetConfig>('snippetConfig');
 
       /**
        * Gets the provided preselected filters prioritizing the {@link SnippetConfig} over the
@@ -45,9 +47,11 @@
        *
        * @returns An array of filter's ids.
        */
-      const preselectedFilters: ComputedRef<string[]> = computed(() => {
-        return snippetConfig.value?.filters ?? props.filters;
-      });
+      const preselectedFilters = ref(
+        computed(() => {
+          return snippetConfig?.filters;
+        })
+      );
 
       /**
        * Emits the {@link FacetsXEvents.PreselectedFiltersProvided} to save
@@ -63,7 +67,7 @@
        * Emits the {@link FacetsXEvents.PreselectedFiltersProvided} when the
        * computed prop changes.
        */
-      watch(preselectedFilters, emitPreselectedFilters);
+      watch(() => snippetConfig?.filters, emitPreselectedFilters);
 
       /**
        * Emits the {@link FacetsXEvents.PreselectedFiltersProvided} when the
@@ -73,7 +77,10 @@
         emitPreselectedFilters();
       });
 
-      return () => useNoElementRender(slots);
+      return {
+        snippetConfig,
+        preselectedFilters
+      };
     }
   });
 </script>

From 619b397c1e6eed0bbba480e8f91fcf9b137204ab Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Mon, 4 Mar 2024 09:56:38 +0100
Subject: [PATCH 13/24] feat: set the injected snippet as a ref to get it sync
 when it changes

EMP-3378
---
 .../facets/components/preselected-filters.vue | 32 +++++++++++++------
 1 file changed, 22 insertions(+), 10 deletions(-)

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
index 9a497501cf..3e7797f23d 100644
--- a/packages/x-components/src/x-modules/facets/components/preselected-filters.vue
+++ b/packages/x-components/src/x-modules/facets/components/preselected-filters.vue
@@ -2,11 +2,22 @@
   <div></div>
 </template>
 <script lang="ts">
-  import { defineComponent, PropType, onMounted, watch, computed, ref, inject } from 'vue';
+  import {
+    defineComponent,
+    PropType,
+    onMounted,
+    watch,
+    computed,
+    ref,
+    inject,
+    ComputedRef
+  } from 'vue';
   import { createRawFilters } from '../../../utils/filters';
   import { isArrayEmpty } from '../../../utils/array';
   import { SnippetConfig } from '../../../x-installer/api/api.types';
   import { useXBus } from '../../../composables/use-x-bus';
+  //import { useHybridInject } from '../../../composables';
+  import { baseSnippetConfig } from '../../../views/base-config';
 
   /**
    * This component emits {@link FacetsXEvents.PreselectedFiltersProvided} when a preselected filter
@@ -30,16 +41,19 @@
         default: () => []
       }
     },
-    setup() {
+    setup(props) {
       // eslint-disable-next-line @typescript-eslint/unbound-method
       const { emit } = useXBus();
 
       /**
-       * Injects {@link SnippetConfig} provided by an ancestor as snippetConfig.
+       * Injects {@link SnippetConfig} provided by an ancestor as snippetConfig
+       * and sets is as a ref to get synced when it changes.
        *
        * @internal
        */
-      const snippetConfig = inject<SnippetConfig>('snippetConfig');
+      // TODO: check a way to make it work with Hybrid inject
+      // const snippetConfig = ref(useHybridInject<SnippetConfig>('snippetConfig', baseSnippetConfig));
+      const snippetConfig = ref(inject<SnippetConfig>('snippetConfig', baseSnippetConfig));
 
       /**
        * Gets the provided preselected filters prioritizing the {@link SnippetConfig} over the
@@ -47,11 +61,9 @@
        *
        * @returns An array of filter's ids.
        */
-      const preselectedFilters = ref(
-        computed(() => {
-          return snippetConfig?.filters;
-        })
-      );
+      const preselectedFilters: ComputedRef<string[]> = computed(() => {
+        return snippetConfig.value.filters ?? props.filters;
+      });
 
       /**
        * Emits the {@link FacetsXEvents.PreselectedFiltersProvided} to save
@@ -67,7 +79,7 @@
        * Emits the {@link FacetsXEvents.PreselectedFiltersProvided} when the
        * computed prop changes.
        */
-      watch(() => snippetConfig?.filters, emitPreselectedFilters);
+      watch(preselectedFilters, emitPreselectedFilters);
 
       /**
        * Emits the {@link FacetsXEvents.PreselectedFiltersProvided} when the

From a5ea863a26d7a75c9f9892381bfbd3d21021c2f9 Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Mon, 4 Mar 2024 11:43:30 +0100
Subject: [PATCH 14/24] test: spy bus emit f() & add emit event metadata

EMP-3378
---
 .../__tests__/preselected-filters.spec.ts     | 65 ++++++++++++++-----
 1 file changed, 48 insertions(+), 17 deletions(-)

diff --git a/packages/x-components/src/x-modules/facets/components/__tests__/preselected-filters.spec.ts b/packages/x-components/src/x-modules/facets/components/__tests__/preselected-filters.spec.ts
index 26dcd7a8dd..64b221c6b9 100644
--- a/packages/x-components/src/x-modules/facets/components/__tests__/preselected-filters.spec.ts
+++ b/packages/x-components/src/x-modules/facets/components/__tests__/preselected-filters.spec.ts
@@ -5,12 +5,13 @@ import { Dictionary } from '@empathyco/x-utils';
 import { createRawFilters } from '../../../../utils/filters';
 import { baseSnippetConfig } from '../../../../views/base-config';
 import PreselectedFilters from '../preselected-filters.vue';
+import { bus } from '../../../../plugins/index';
 
 function renderPreselectedFilters({
   filters,
   snippetFilters
 }: RenderPreselectedFiltersOptions = {}): RenderPreselectedFiltersAPI {
-  const emit = jest.fn();
+  const emit = jest.spyOn(bus, 'emit');
   const localVue = createLocalVue();
   const snippetConfig = Vue.observable({ ...baseSnippetConfig, filters: snippetFilters });
   localVue.use(Vuex);
@@ -24,12 +25,18 @@ function renderPreselectedFilters({
     },
     localVue,
     mocks: {
-      $x: {
+      emit: {
         emit
       }
     }
   });
 
+  const eventMetadata = {
+    moduleName: null,
+    location: 'none',
+    replaceable: true
+  };
+
   function setSnippetConfig(newValue: Dictionary<unknown>): Promise<void> {
     Object.assign(snippetConfig, newValue);
     return localVue.nextTick();
@@ -38,7 +45,8 @@ function renderPreselectedFilters({
   return {
     wrapper,
     emit,
-    setSnippetConfig
+    setSnippetConfig,
+    eventMetadata
   };
 }
 
@@ -49,7 +57,6 @@ describe('testing Preselected filters component', () => {
 
   it('does not emit the event when neither filters nor snippet config filters are provided', () => {
     const { emit } = renderPreselectedFilters();
-
     expect(emit).not.toHaveBeenCalled();
   });
 
@@ -58,25 +65,30 @@ describe('testing Preselected filters component', () => {
       '{!tag=brand_facet}brand_facet:"Lego"',
       '{!tag=age_facet}age_facet:"toddler"'
     ];
-    const { emit } = renderPreselectedFilters({
+    const { emit, eventMetadata } = renderPreselectedFilters({
       snippetFilters
     });
 
     expect(emit).toHaveBeenCalledTimes(1);
     expect(emit).toHaveBeenCalledWith(
       'PreselectedFiltersProvided',
-      createRawFilters(snippetFilters)
+      createRawFilters(snippetFilters),
+      eventMetadata
     );
   });
 
   it('emits the event when filters are provided by the prop', () => {
     const filters = ['{!tag=brand_facet}brand_facet:"Lego"', '{!tag=age_facet}age_facet:"toddler"'];
-    const { emit } = renderPreselectedFilters({
+    const { emit, eventMetadata } = renderPreselectedFilters({
       filters
     });
 
     expect(emit).toHaveBeenCalledTimes(1);
-    expect(emit).toHaveBeenCalledWith('PreselectedFiltersProvided', createRawFilters(filters));
+    expect(emit).toHaveBeenCalledWith(
+      'PreselectedFiltersProvided',
+      createRawFilters(filters),
+      eventMetadata
+    );
   });
 
   it('emits the event using the snippet config filters as payload when both are provided', () => {
@@ -85,7 +97,7 @@ describe('testing Preselected filters component', () => {
       '{!tag=brand_facet}brand_facet:"Nintendo"',
       '{!tag=age_facet}age_facet:"kids"'
     ];
-    const { emit } = renderPreselectedFilters({
+    const { emit, eventMetadata } = renderPreselectedFilters({
       filters,
       snippetFilters
     });
@@ -93,7 +105,8 @@ describe('testing Preselected filters component', () => {
     expect(emit).toHaveBeenCalledTimes(1);
     expect(emit).toHaveBeenCalledWith(
       'PreselectedFiltersProvided',
-      createRawFilters(snippetFilters)
+      createRawFilters(snippetFilters),
+      eventMetadata
     );
   });
 
@@ -101,32 +114,44 @@ describe('testing Preselected filters component', () => {
     const filters = ['{!tag=brand_facet}brand_facet:"Lego"'];
     const newFilters = ['{!tag=brand_facet}brand_facet:"Playmobil"'];
 
-    const { emit, wrapper } = renderPreselectedFilters({
+    const { emit, eventMetadata, wrapper } = renderPreselectedFilters({
       filters
     });
 
     expect(wrapper.props()).toEqual({ filters: filters });
     expect(emit).toHaveBeenCalledTimes(1);
-    expect(emit).toHaveBeenCalledWith('PreselectedFiltersProvided', createRawFilters(filters));
+    expect(emit).toHaveBeenCalledWith(
+      'PreselectedFiltersProvided',
+      createRawFilters(filters),
+      eventMetadata
+    );
 
     await wrapper.setProps({ filters: newFilters });
 
     expect(wrapper.props()).toEqual({ filters: newFilters });
     expect(emit).toHaveBeenCalledTimes(2);
-    expect(emit).toHaveBeenCalledWith('PreselectedFiltersProvided', createRawFilters(newFilters));
+    expect(emit).toHaveBeenCalledWith(
+      'PreselectedFiltersProvided',
+      createRawFilters(newFilters),
+      eventMetadata
+    );
   });
 
   it('emits the event when the snippetConfig filters change', async () => {
     const filters = ['{!tag=brand_facet}brand_facet:"Chorizo"'];
     const newFilters = ['{!tag=brand_facet}brand_facet:"Chistorra"'];
 
-    const { emit, wrapper, setSnippetConfig } = renderPreselectedFilters({
+    const { emit, eventMetadata, wrapper, setSnippetConfig } = renderPreselectedFilters({
       filters
     });
 
     expect(wrapper.props()).toEqual({ filters: filters });
     expect(emit).toHaveBeenCalledTimes(1);
-    expect(emit).toHaveBeenCalledWith('PreselectedFiltersProvided', createRawFilters(filters));
+    expect(emit).toHaveBeenCalledWith(
+      'PreselectedFiltersProvided',
+      createRawFilters(filters),
+      eventMetadata
+    );
 
     await setSnippetConfig({ filters: newFilters });
 
@@ -138,7 +163,11 @@ describe('testing Preselected filters component', () => {
 
     // The event is called again with the newFilters provided
     expect(emit).toHaveBeenCalledTimes(2);
-    expect(emit).toHaveBeenCalledWith('PreselectedFiltersProvided', createRawFilters(newFilters));
+    expect(emit).toHaveBeenCalledWith(
+      'PreselectedFiltersProvided',
+      createRawFilters(newFilters),
+      eventMetadata
+    );
   });
 });
 
@@ -157,9 +186,11 @@ interface RenderPreselectedFiltersOptions {
  */
 interface RenderPreselectedFiltersAPI {
   /** Mock of the {@link XBus.emit} function. */
-  emit: jest.Mock;
+  emit: jest.SpyInstance;
   /** The wrapper of the container element.*/
   wrapper: Wrapper<Vue>;
   /** Helper method to change the snippet config. */
   setSnippetConfig: (newSnippetConfig: Dictionary<unknown>) => void | Promise<void>;
+  /** Metadata object returned by the {@link XBus.emit} function. */
+  eventMetadata: Dictionary<unknown>;
 }

From 078f700479914d9693dbff00e4bed0117c1e1d1c Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Mon, 4 Mar 2024 16:24:20 +0100
Subject: [PATCH 15/24] feat: use hybrid inject

EMP-3378
---
 .../facets/components/preselected-filters.vue | 19 ++++---------------
 1 file changed, 4 insertions(+), 15 deletions(-)

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
index 3e7797f23d..d11f87cc0d 100644
--- a/packages/x-components/src/x-modules/facets/components/preselected-filters.vue
+++ b/packages/x-components/src/x-modules/facets/components/preselected-filters.vue
@@ -2,21 +2,12 @@
   <div></div>
 </template>
 <script lang="ts">
-  import {
-    defineComponent,
-    PropType,
-    onMounted,
-    watch,
-    computed,
-    ref,
-    inject,
-    ComputedRef
-  } from 'vue';
+  import { defineComponent, PropType, onMounted, watch, computed, ref, ComputedRef } from 'vue';
   import { createRawFilters } from '../../../utils/filters';
   import { isArrayEmpty } from '../../../utils/array';
   import { SnippetConfig } from '../../../x-installer/api/api.types';
   import { useXBus } from '../../../composables/use-x-bus';
-  //import { useHybridInject } from '../../../composables';
+  import { useHybridInject } from '../../../composables';
   import { baseSnippetConfig } from '../../../views/base-config';
 
   /**
@@ -51,9 +42,7 @@
        *
        * @internal
        */
-      // TODO: check a way to make it work with Hybrid inject
-      // const snippetConfig = ref(useHybridInject<SnippetConfig>('snippetConfig', baseSnippetConfig));
-      const snippetConfig = ref(inject<SnippetConfig>('snippetConfig', baseSnippetConfig));
+      const snippetConfig = ref(useHybridInject<SnippetConfig>('snippetConfig', baseSnippetConfig));
 
       /**
        * Gets the provided preselected filters prioritizing the {@link SnippetConfig} over the
@@ -62,7 +51,7 @@
        * @returns An array of filter's ids.
        */
       const preselectedFilters: ComputedRef<string[]> = computed(() => {
-        return snippetConfig.value.filters ?? props.filters;
+        return snippetConfig.value?.filters ?? props.filters;
       });
 
       /**

From d26820121047326e42e9e5e067b7a1d88091f3c0 Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Mon, 4 Mar 2024 16:27:11 +0100
Subject: [PATCH 16/24] chore: rm template & use no elem renderer

EMP-3378
---
 .../facets/components/preselected-filters.vue        | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

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
index d11f87cc0d..13f42e300f 100644
--- 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,13 +1,10 @@
-<template>
-  <div></div>
-</template>
 <script lang="ts">
   import { defineComponent, PropType, onMounted, watch, computed, ref, ComputedRef } from 'vue';
   import { createRawFilters } from '../../../utils/filters';
   import { isArrayEmpty } from '../../../utils/array';
   import { SnippetConfig } from '../../../x-installer/api/api.types';
   import { useXBus } from '../../../composables/use-x-bus';
-  import { useHybridInject } from '../../../composables';
+  import { useHybridInject, useNoElementRender } from '../../../composables';
   import { baseSnippetConfig } from '../../../views/base-config';
 
   /**
@@ -32,7 +29,7 @@
         default: () => []
       }
     },
-    setup(props) {
+    setup(props, { slots }) {
       // eslint-disable-next-line @typescript-eslint/unbound-method
       const { emit } = useXBus();
 
@@ -78,10 +75,7 @@
         emitPreselectedFilters();
       });
 
-      return {
-        snippetConfig,
-        preselectedFilters
-      };
+      return () => useNoElementRender(slots);
     }
   });
 </script>

From 1532f214d51d6ef8fcc468756abf7a490b329e31 Mon Sep 17 00:00:00 2001
From: anna condal <acondalv@gmail.com>
Date: Tue, 5 Mar 2024 10:54:35 +0100
Subject: [PATCH 17/24] Update
 packages/x-components/src/x-modules/facets/components/preselected-filters.vue

Co-authored-by: Guillermo Cacheda <cachedacodes@gmail.com>
---
 .../src/x-modules/facets/components/preselected-filters.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
index 13f42e300f..a7152a2c75 100644
--- a/packages/x-components/src/x-modules/facets/components/preselected-filters.vue
+++ b/packages/x-components/src/x-modules/facets/components/preselected-filters.vue
@@ -39,7 +39,7 @@
        *
        * @internal
        */
-      const snippetConfig = ref(useHybridInject<SnippetConfig>('snippetConfig', baseSnippetConfig));
+      const snippetConfig = ref(useHybridInject<SnippetConfig>('snippetConfig'));
 
       /**
        * Gets the provided preselected filters prioritizing the {@link SnippetConfig} over the

From 42ec2037a9c65eec0c5c4d1069ceca09aa7a073d Mon Sep 17 00:00:00 2001
From: anna condal <acondalv@gmail.com>
Date: Tue, 5 Mar 2024 10:54:44 +0100
Subject: [PATCH 18/24] Update
 packages/x-components/src/x-modules/facets/components/__tests__/preselected-filters.spec.ts

Co-authored-by: Guillermo Cacheda <cachedacodes@gmail.com>
---
 .../facets/components/__tests__/preselected-filters.spec.ts     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/x-components/src/x-modules/facets/components/__tests__/preselected-filters.spec.ts b/packages/x-components/src/x-modules/facets/components/__tests__/preselected-filters.spec.ts
index 64b221c6b9..a52028a4cd 100644
--- a/packages/x-components/src/x-modules/facets/components/__tests__/preselected-filters.spec.ts
+++ b/packages/x-components/src/x-modules/facets/components/__tests__/preselected-filters.spec.ts
@@ -73,7 +73,7 @@ describe('testing Preselected filters component', () => {
     expect(emit).toHaveBeenCalledWith(
       'PreselectedFiltersProvided',
       createRawFilters(snippetFilters),
-      eventMetadata
+      expect.any(Object)
     );
   });
 

From 2e54d17180a899093d1e23e1fb18228611edf008 Mon Sep 17 00:00:00 2001
From: anna condal <acondalv@gmail.com>
Date: Tue, 5 Mar 2024 10:55:23 +0100
Subject: [PATCH 19/24] Update
 packages/x-components/src/x-modules/facets/components/preselected-filters.vue

Co-authored-by: Guillermo Cacheda <cachedacodes@gmail.com>
---
 .../src/x-modules/facets/components/preselected-filters.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
index a7152a2c75..3f92961c58 100644
--- a/packages/x-components/src/x-modules/facets/components/preselected-filters.vue
+++ b/packages/x-components/src/x-modules/facets/components/preselected-filters.vue
@@ -47,7 +47,7 @@
        *
        * @returns An array of filter's ids.
        */
-      const preselectedFilters: ComputedRef<string[]> = computed(() => {
+      const preselectedFilters = computed<string[]>(() => {
         return snippetConfig.value?.filters ?? props.filters;
       });
 

From 0c98c955fc2f460c2a8c9d0429c24a4d6151afaa Mon Sep 17 00:00:00 2001
From: anna condal <acondalv@gmail.com>
Date: Tue, 5 Mar 2024 10:56:35 +0100
Subject: [PATCH 20/24] Update
 packages/x-components/src/x-modules/facets/components/preselected-filters.vue

Co-authored-by: Guillermo Cacheda <cachedacodes@gmail.com>
---
 .../facets/components/preselected-filters.vue          | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

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
index 3f92961c58..e6bda34b28 100644
--- a/packages/x-components/src/x-modules/facets/components/preselected-filters.vue
+++ b/packages/x-components/src/x-modules/facets/components/preselected-filters.vue
@@ -65,15 +65,7 @@
        * Emits the {@link FacetsXEvents.PreselectedFiltersProvided} when the
        * computed prop changes.
        */
-      watch(preselectedFilters, emitPreselectedFilters);
-
-      /**
-       * Emits the {@link FacetsXEvents.PreselectedFiltersProvided} when the
-       * component is mounted.
-       */
-      onMounted(() => {
-        emitPreselectedFilters();
-      });
+      watch(preselectedFilters, emitPreselectedFilters, { immediate: true });
 
       return () => useNoElementRender(slots);
     }

From b1c518f04e726027f92491d7cb15f74619e1abed Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Tue, 5 Mar 2024 11:05:37 +0100
Subject: [PATCH 21/24] chore: rm unused imports

EMP-3378
---
 .../src/x-modules/facets/components/preselected-filters.vue    | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

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
index e6bda34b28..e129359845 100644
--- 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,11 +1,10 @@
 <script lang="ts">
-  import { defineComponent, PropType, onMounted, watch, computed, ref, ComputedRef } from 'vue';
+  import { defineComponent, PropType, watch, computed, ref } from 'vue';
   import { createRawFilters } from '../../../utils/filters';
   import { isArrayEmpty } from '../../../utils/array';
   import { SnippetConfig } from '../../../x-installer/api/api.types';
   import { useXBus } from '../../../composables/use-x-bus';
   import { useHybridInject, useNoElementRender } from '../../../composables';
-  import { baseSnippetConfig } from '../../../views/base-config';
 
   /**
    * This component emits {@link FacetsXEvents.PreselectedFiltersProvided} when a preselected filter

From 7ee475bdabb9f3aea01242b07c6815f71436b08e Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Tue, 5 Mar 2024 11:06:19 +0100
Subject: [PATCH 22/24] tests: replace eventMetadata object by any object

EMP-3378
---
 .../__tests__/preselected-filters.spec.ts     | 33 +++++++------------
 1 file changed, 12 insertions(+), 21 deletions(-)

diff --git a/packages/x-components/src/x-modules/facets/components/__tests__/preselected-filters.spec.ts b/packages/x-components/src/x-modules/facets/components/__tests__/preselected-filters.spec.ts
index a52028a4cd..50ea5e8915 100644
--- a/packages/x-components/src/x-modules/facets/components/__tests__/preselected-filters.spec.ts
+++ b/packages/x-components/src/x-modules/facets/components/__tests__/preselected-filters.spec.ts
@@ -31,12 +31,6 @@ function renderPreselectedFilters({
     }
   });
 
-  const eventMetadata = {
-    moduleName: null,
-    location: 'none',
-    replaceable: true
-  };
-
   function setSnippetConfig(newValue: Dictionary<unknown>): Promise<void> {
     Object.assign(snippetConfig, newValue);
     return localVue.nextTick();
@@ -45,8 +39,7 @@ function renderPreselectedFilters({
   return {
     wrapper,
     emit,
-    setSnippetConfig,
-    eventMetadata
+    setSnippetConfig
   };
 }
 
@@ -65,7 +58,7 @@ describe('testing Preselected filters component', () => {
       '{!tag=brand_facet}brand_facet:"Lego"',
       '{!tag=age_facet}age_facet:"toddler"'
     ];
-    const { emit, eventMetadata } = renderPreselectedFilters({
+    const { emit } = renderPreselectedFilters({
       snippetFilters
     });
 
@@ -79,7 +72,7 @@ describe('testing Preselected filters component', () => {
 
   it('emits the event when filters are provided by the prop', () => {
     const filters = ['{!tag=brand_facet}brand_facet:"Lego"', '{!tag=age_facet}age_facet:"toddler"'];
-    const { emit, eventMetadata } = renderPreselectedFilters({
+    const { emit } = renderPreselectedFilters({
       filters
     });
 
@@ -87,7 +80,7 @@ describe('testing Preselected filters component', () => {
     expect(emit).toHaveBeenCalledWith(
       'PreselectedFiltersProvided',
       createRawFilters(filters),
-      eventMetadata
+      expect.any(Object)
     );
   });
 
@@ -97,7 +90,7 @@ describe('testing Preselected filters component', () => {
       '{!tag=brand_facet}brand_facet:"Nintendo"',
       '{!tag=age_facet}age_facet:"kids"'
     ];
-    const { emit, eventMetadata } = renderPreselectedFilters({
+    const { emit } = renderPreselectedFilters({
       filters,
       snippetFilters
     });
@@ -106,7 +99,7 @@ describe('testing Preselected filters component', () => {
     expect(emit).toHaveBeenCalledWith(
       'PreselectedFiltersProvided',
       createRawFilters(snippetFilters),
-      eventMetadata
+      expect.any(Object)
     );
   });
 
@@ -114,7 +107,7 @@ describe('testing Preselected filters component', () => {
     const filters = ['{!tag=brand_facet}brand_facet:"Lego"'];
     const newFilters = ['{!tag=brand_facet}brand_facet:"Playmobil"'];
 
-    const { emit, eventMetadata, wrapper } = renderPreselectedFilters({
+    const { emit, wrapper } = renderPreselectedFilters({
       filters
     });
 
@@ -123,7 +116,7 @@ describe('testing Preselected filters component', () => {
     expect(emit).toHaveBeenCalledWith(
       'PreselectedFiltersProvided',
       createRawFilters(filters),
-      eventMetadata
+      expect.any(Object)
     );
 
     await wrapper.setProps({ filters: newFilters });
@@ -133,7 +126,7 @@ describe('testing Preselected filters component', () => {
     expect(emit).toHaveBeenCalledWith(
       'PreselectedFiltersProvided',
       createRawFilters(newFilters),
-      eventMetadata
+      expect.any(Object)
     );
   });
 
@@ -141,7 +134,7 @@ describe('testing Preselected filters component', () => {
     const filters = ['{!tag=brand_facet}brand_facet:"Chorizo"'];
     const newFilters = ['{!tag=brand_facet}brand_facet:"Chistorra"'];
 
-    const { emit, eventMetadata, wrapper, setSnippetConfig } = renderPreselectedFilters({
+    const { emit, wrapper, setSnippetConfig } = renderPreselectedFilters({
       filters
     });
 
@@ -150,7 +143,7 @@ describe('testing Preselected filters component', () => {
     expect(emit).toHaveBeenCalledWith(
       'PreselectedFiltersProvided',
       createRawFilters(filters),
-      eventMetadata
+      expect.any(Object)
     );
 
     await setSnippetConfig({ filters: newFilters });
@@ -166,7 +159,7 @@ describe('testing Preselected filters component', () => {
     expect(emit).toHaveBeenCalledWith(
       'PreselectedFiltersProvided',
       createRawFilters(newFilters),
-      eventMetadata
+      expect.any(Object)
     );
   });
 });
@@ -191,6 +184,4 @@ interface RenderPreselectedFiltersAPI {
   wrapper: Wrapper<Vue>;
   /** Helper method to change the snippet config. */
   setSnippetConfig: (newSnippetConfig: Dictionary<unknown>) => void | Promise<void>;
-  /** Metadata object returned by the {@link XBus.emit} function. */
-  eventMetadata: Dictionary<unknown>;
 }

From 58b9b84e9eb3e2bf1677f8fb236ff9cea0b9c749 Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Wed, 6 Mar 2024 16:44:42 +0100
Subject: [PATCH 23/24] feat: use render() option instead of returning
 useNoElementRendered()

EMP-3378
---
 .../x-modules/facets/components/preselected-filters.vue    | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

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
index e129359845..8e578eefae 100644
--- a/packages/x-components/src/x-modules/facets/components/preselected-filters.vue
+++ b/packages/x-components/src/x-modules/facets/components/preselected-filters.vue
@@ -28,7 +28,7 @@
         default: () => []
       }
     },
-    setup(props, { slots }) {
+    setup(props) {
       // eslint-disable-next-line @typescript-eslint/unbound-method
       const { emit } = useXBus();
 
@@ -65,8 +65,9 @@
        * computed prop changes.
        */
       watch(preselectedFilters, emitPreselectedFilters, { immediate: true });
-
-      return () => useNoElementRender(slots);
+    },
+    render() {
+      return useNoElementRender(this.$slots);
     }
   });
 </script>

From 1b3350984626da6339c6b4b0e591cadce6117817 Mon Sep 17 00:00:00 2001
From: Guillermo <cachedacodes@gmail.com>
Date: Wed, 13 Mar 2024 09:20:28 +0100
Subject: [PATCH 24/24] don't destructure composable and add internal fields to
 doc

---
 .../x-modules/facets/components/preselected-filters.vue   | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

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
index 8e578eefae..d4b92ca77d 100644
--- a/packages/x-components/src/x-modules/facets/components/preselected-filters.vue
+++ b/packages/x-components/src/x-modules/facets/components/preselected-filters.vue
@@ -29,8 +29,7 @@
       }
     },
     setup(props) {
-      // eslint-disable-next-line @typescript-eslint/unbound-method
-      const { emit } = useXBus();
+      const xBus = useXBus();
 
       /**
        * Injects {@link SnippetConfig} provided by an ancestor as snippetConfig
@@ -45,6 +44,7 @@
        * filters prop.
        *
        * @returns An array of filter's ids.
+       * @internal
        */
       const preselectedFilters = computed<string[]>(() => {
         return snippetConfig.value?.filters ?? props.filters;
@@ -53,10 +53,12 @@
       /**
        * Emits the {@link FacetsXEvents.PreselectedFiltersProvided} to save
        * the provided filters in the state.
+       *
+       * @internal
        */
       const emitPreselectedFilters = (): void => {
         if (!isArrayEmpty(preselectedFilters.value)) {
-          emit('PreselectedFiltersProvided', createRawFilters(preselectedFilters.value));
+          xBus.emit('PreselectedFiltersProvided', createRawFilters(preselectedFilters.value));
         }
       };