From 989dcd46132e38d7e7691e71cb57c5e52416bcd2 Mon Sep 17 00:00:00 2001
From: "Jose A. Cabaneros" <joseacabaneros@gmail.com>
Date: Thu, 1 Aug 2024 17:28:38 +0200
Subject: [PATCH 1/7] fix(attrs): remove $attrs binding when is no needed

---
 packages/x-components/src/components/display-emitter.vue       | 3 +--
 .../x-components/src/components/modals/base-events-modal.vue   | 1 -
 packages/x-components/src/components/modals/base-id-modal.vue  | 1 -
 packages/x-components/src/components/modals/main-modal.vue     | 1 -
 .../x-components/src/components/result/base-result-rating.vue  | 1 +
 packages/x-components/src/views/home/Home.vue                  | 3 +++
 .../x-modules/history-queries/components/history-queries.vue   | 2 --
 .../src/x-modules/next-queries/components/next-queries.vue     | 2 --
 .../x-modules/popular-searches/components/popular-searches.vue | 2 --
 .../query-suggestions/components/query-suggestions.vue         | 2 --
 10 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/packages/x-components/src/components/display-emitter.vue b/packages/x-components/src/components/display-emitter.vue
index 720c9a0506..59a9d1e667 100644
--- a/packages/x-components/src/components/display-emitter.vue
+++ b/packages/x-components/src/components/display-emitter.vue
@@ -2,7 +2,6 @@
   import {
     defineComponent,
     getCurrentInstance,
-    h,
     onMounted,
     onUnmounted,
     PropType,
@@ -30,7 +29,7 @@
       let unwatchDisplay: WatchStopHandle | undefined;
 
       onMounted(() => {
-        const element = getCurrentInstance()?.proxy.$el as HTMLElement | undefined;
+        const element = getCurrentInstance()?.proxy?.$el as HTMLElement | undefined;
         if (element) {
           unwatchDisplay = useEmitDisplayEvent({
             element,
diff --git a/packages/x-components/src/components/modals/base-events-modal.vue b/packages/x-components/src/components/modals/base-events-modal.vue
index 4d4a7fe449..db99852842 100644
--- a/packages/x-components/src/components/modals/base-events-modal.vue
+++ b/packages/x-components/src/components/modals/base-events-modal.vue
@@ -1,6 +1,5 @@
 <template>
   <BaseModal
-    v-bind="$attrs"
     ref="baseModalEl"
     @click:overlay="emitBodyClickEvent"
     @focusin:body="emitBodyClickEvent"
diff --git a/packages/x-components/src/components/modals/base-id-modal.vue b/packages/x-components/src/components/modals/base-id-modal.vue
index 4525b49d41..e52d10d1e1 100644
--- a/packages/x-components/src/components/modals/base-id-modal.vue
+++ b/packages/x-components/src/components/modals/base-id-modal.vue
@@ -1,6 +1,5 @@
 <template>
   <BaseModal
-    v-bind="$attrs"
     :ref="el"
     @click:overlay="emitClickOutOfModal"
     @focusin:body="emitClickOutOfModal"
diff --git a/packages/x-components/src/components/modals/main-modal.vue b/packages/x-components/src/components/modals/main-modal.vue
index 9af67045cb..ec920a3fa2 100644
--- a/packages/x-components/src/components/modals/main-modal.vue
+++ b/packages/x-components/src/components/modals/main-modal.vue
@@ -7,7 +7,6 @@
     :bodyClickEvent="outOfModalClickEvent"
     :animation="animation"
     :focusOnOpen="focusOnOpen"
-    v-bind="$attrs"
   >
     <slot />
   </BaseEventsModal>
diff --git a/packages/x-components/src/components/result/base-result-rating.vue b/packages/x-components/src/components/result/base-result-rating.vue
index 42c5fbb5b0..4564878708 100644
--- a/packages/x-components/src/components/result/base-result-rating.vue
+++ b/packages/x-components/src/components/result/base-result-rating.vue
@@ -46,6 +46,7 @@
     components: {
       BaseRating
     },
+    inheritAttrs: false,
     props: {
       /**
        * The {@link @empathyco/x-types#Result} to render its rating.
diff --git a/packages/x-components/src/views/home/Home.vue b/packages/x-components/src/views/home/Home.vue
index bc57bfeb61..6d7e1703d5 100644
--- a/packages/x-components/src/views/home/Home.vue
+++ b/packages/x-components/src/views/home/Home.vue
@@ -131,6 +131,7 @@
               </template>
             </Spellcheck>
 
+            <!-- Related Tags -->
             <SlidingPanel v-if="x.relatedTags.length">
               <template #sliding-panel-left-button>
                 <ChevronLeft />
@@ -246,6 +247,7 @@
             </div>
 
             <template v-if="!x.query.searchBox">
+              <!-- Brand Recommendations -->
               <h1 class="x-mb-16 x-title1">Brand Recommendations</h1>
               <LocationProvider location="no_results">
                 <QueryPreviewList
@@ -369,6 +371,7 @@
               </ResultsList>
             </LocationProvider>
 
+            <!-- Semantic Queries -->
             <SemanticQueries #default="{ queries, findSemanticQuery }">
               <section class="x-mt-28">
                 <h1 v-if="isAnyQueryLoadedInPreview(queries)" class="x-title1">
diff --git a/packages/x-components/src/x-modules/history-queries/components/history-queries.vue b/packages/x-components/src/x-modules/history-queries/components/history-queries.vue
index 1243fc01f6..69f260b6d8 100644
--- a/packages/x-components/src/x-modules/history-queries/components/history-queries.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/history-queries.vue
@@ -1,6 +1,5 @@
 <template>
   <BaseSuggestions
-    v-bind="$attrs"
     :suggestions="historyQueriesWithResults"
     class="x-history-queries"
     data-test="history-queries"
@@ -67,7 +66,6 @@
       BaseSuggestions,
       HistoryQuery
     },
-    inheritAttrs: false,
     setup() {
       /**
        * The filtered list of history queries.
diff --git a/packages/x-components/src/x-modules/next-queries/components/next-queries.vue b/packages/x-components/src/x-modules/next-queries/components/next-queries.vue
index a092cd1a18..170630b3f3 100644
--- a/packages/x-components/src/x-modules/next-queries/components/next-queries.vue
+++ b/packages/x-components/src/x-modules/next-queries/components/next-queries.vue
@@ -1,6 +1,5 @@
 <template>
   <BaseSuggestions
-    v-bind="$attrs"
     :suggestions="renderedNextQueries"
     data-test="next-queries"
     class="x-next-queries"
@@ -58,7 +57,6 @@
       NextQuery,
       BaseSuggestions
     },
-    inheritAttrs: false,
     props: {
       /**
        * Flag to indicate if the curated next queries should be displayed different.
diff --git a/packages/x-components/src/x-modules/popular-searches/components/popular-searches.vue b/packages/x-components/src/x-modules/popular-searches/components/popular-searches.vue
index c76a139d4a..0be12b7c85 100644
--- a/packages/x-components/src/x-modules/popular-searches/components/popular-searches.vue
+++ b/packages/x-components/src/x-modules/popular-searches/components/popular-searches.vue
@@ -1,6 +1,5 @@
 <template>
   <BaseSuggestions
-    v-bind="$attrs"
     :suggestions="popularSearches"
     class="x-popular-searches"
     data-test="popular-searches"
@@ -53,7 +52,6 @@
       PopularSearch,
       BaseSuggestions
     },
-    inheritAttrs: false,
     setup() {
       /**
        * The list of popular searches.
diff --git a/packages/x-components/src/x-modules/query-suggestions/components/query-suggestions.vue b/packages/x-components/src/x-modules/query-suggestions/components/query-suggestions.vue
index e7c83f2079..5933572d20 100644
--- a/packages/x-components/src/x-modules/query-suggestions/components/query-suggestions.vue
+++ b/packages/x-components/src/x-modules/query-suggestions/components/query-suggestions.vue
@@ -1,6 +1,5 @@
 <template>
   <BaseSuggestions
-    v-bind="$attrs"
     :suggestions="suggestions"
     class="x-query-suggestions"
     data-test="query-suggestions"
@@ -49,7 +48,6 @@
     name: 'QuerySuggestions',
     xModule: querySuggestionsXModule.name,
     components: { BaseSuggestions, QuerySuggestion },
-    inheritAttrs: false,
     setup() {
       /** The module's list of suggestions. */
       const { querySuggestions } = useGetter('querySuggestions', ['querySuggestions']);

From 9661cc1e286f7d987e93b0e3a11f9a135f5ec326 Mon Sep 17 00:00:00 2001
From: "Jose A. Cabaneros" <joseacabaneros@gmail.com>
Date: Thu, 1 Aug 2024 18:13:53 +0200
Subject: [PATCH 2/7] refactor(no-element): replacing NoElement component in
 templates in favour of render functions

---
 .../x-components/src/components/highlight.vue | 155 ++++++++----------
 .../components/modals/base-id-modal-close.vue |  54 +++---
 .../components/modals/base-id-modal-open.vue  |  52 +++---
 .../result/result-variant-selector.vue        | 141 +++++++---------
 .../components/query-preview.vue              | 145 +++++++---------
 .../components/recommendations.vue            | 111 ++++++-------
 .../components/semantic-queries.vue           |  93 ++++++-----
 7 files changed, 331 insertions(+), 420 deletions(-)

diff --git a/packages/x-components/src/components/highlight.vue b/packages/x-components/src/components/highlight.vue
index bcf0965523..f6df1c2a64 100644
--- a/packages/x-components/src/components/highlight.vue
+++ b/packages/x-components/src/components/highlight.vue
@@ -1,36 +1,30 @@
 <template>
-  <NoElement>
-    <slot v-bind="{ text, hasMatch, ...matchParts }">
-      <span class="x-highlight" :class="dynamicCSSClasses">
-        <span
-          v-if="matchParts.start"
-          v-text="matchParts.start"
-          class="x-highlight__text"
-          data-test="highlight-start"
-        />
-        <span
-          v-if="hasMatch"
-          v-text="matchParts.match"
-          class="x-highlight__text x-highlight-text-match"
-          :class="matchingPartClass"
-          data-test="matching-part"
-        />
-        <span
-          v-if="matchParts.end"
-          v-text="matchParts.end"
-          class="x-highlight__text"
-          data-test="highlight-end"
-        />
-      </span>
-    </slot>
-  </NoElement>
+  <span class="x-highlight" :class="dynamicCSSClasses">
+    <span
+      v-if="matchParts.start"
+      v-text="matchParts.start"
+      class="x-highlight__text"
+      data-test="highlight-start"
+    />
+    <span
+      v-if="hasMatch"
+      v-text="matchParts.match"
+      class="x-highlight__text x-highlight-text-match"
+      :class="matchingPartClass"
+      data-test="matching-part"
+    />
+    <span
+      v-if="matchParts.end"
+      v-text="matchParts.end"
+      class="x-highlight__text"
+      data-test="highlight-end"
+    />
+  </span>
 </template>
 
 <script lang="ts">
   import { computed, defineComponent } from 'vue';
-  import { normalizeString } from '../utils/normalize';
-  import { VueCSSClasses } from '../utils/types';
-  import { NoElement } from './no-element';
+  import { normalizeString } from '../utils';
 
   /**
    * Highlights the given part of the text. The component is smart enough to do matches
@@ -40,58 +34,59 @@
    */
   export default defineComponent({
     name: 'Highlight',
-    components: { NoElement },
     props: {
-      /**
-       * The text to highlight some part of it.
-       *
-       * @public
-       */
+      /** The text to highlight some part of it. */
       text: {
         type: String,
         default: ''
       },
-      /**
-       * The part of the text to be highlighted.
-       *
-       * @public
-       */
+      /** The part of the text to be highlighted. */
       highlight: {
         type: String,
         default: ''
       },
-      /**
-       * CSS Class to add when the `text` string contains the `highlight` string.
-       */
+      /** CSS Class to add when the `text` string contains the `highlight` string. */
       matchClass: {
         type: String,
         default: ''
       },
-      /**
-       * CSS Class to add when the given `text` doesn't contain the `highlight` string.
-       */
+      /** CSS Class to add when the given `text` doesn't contain the `highlight` string. */
       noMatchClass: {
         type: String,
         default: ''
       },
-      /**
-       * CSS Class to add to the matching text.
-       */
+      /** CSS Class to add to the matching text. */
       matchingPartClass: {
         type: String,
         default: ''
       }
     },
-    setup: function (props) {
+    setup(props, { slots }) {
+      /**
+       * Splits the label in three parts based on two indexes.
+       *
+       * @param label - The string that will be divided in three parts.
+       * @param start - The first index that the label will be divided by.
+       * @param end - The second index that the label will be divided by.
+       *
+       * @returns The three parts of the divided label.
+       */
+      function splitAt(label: string, start: number, end: number) {
+        return {
+          start: label.substring(0, start),
+          match: label.substring(start, end),
+          end: label.substring(end)
+        };
+      }
+
       /**
        * Splits the text to highlight into 3 parts: a starting part, the matching part
        * and the ending part. If there is no match between the text and the highlight, the `start`
        * property will contain the whole text.
        *
        * @returns An object containing the different parts of the text.
-       * @internal
        */
-      const matchParts = computed((): HighlightMatch => {
+      const matchParts = computed(() => {
         const matcherIndex = normalizeString(props.text).indexOf(normalizeString(props.highlight));
         return matcherIndex !== -1 && props.highlight
           ? splitAt(props.text.trim(), matcherIndex, matcherIndex + props.highlight.trim().length)
@@ -103,11 +98,8 @@
        * matching part.
        *
        * @returns True if there is a match between the text and the highlight strings.
-       * @internal
        */
-      const hasMatch = computed((): boolean => {
-        return !!matchParts.value.match;
-      });
+      const hasMatch = computed(() => !!matchParts.value.match);
 
       /**
        * CSS classes to add depending on the component state.
@@ -117,11 +109,10 @@
        * `[matchClass]`: When there is a match between the text and
        * the part to highlight.
        * `[noMatchClass]`: when there is no match between the text to highlight.
-       * @returns The {@link VueCSSClasses} classes.
-       * @internal
+       * @returns The CSS classes.
        */
-      const dynamicCSSClasses = computed((): VueCSSClasses => {
-        const classes: VueCSSClasses = {
+      const dynamicCSSClasses = computed(() => {
+        const classes = {
           'x-highlight--has-match': hasMatch.value,
           'x-highlight-text': hasMatch.value,
           [props.matchClass]: hasMatch.value
@@ -133,45 +124,29 @@
       });
 
       /**
-       * Splits the label in three parts based on two indexes.
+       * Render function to execute the `default` slot, binding `slotsProps` and getting only the
+       * first `vNode` to avoid Fragments and Text root nodes.
        *
-       * @param label - The string that will be divided in three parts.
-       * @param start - The first index that the label will be divided by.
-       * @param end - The second index that the label will be divided by.
+       * @remarks `slotProps` must be values without Vue reactivity and located inside the
+       * render-function to update the binding data properly.
        *
-       * @returns The three parts of the divided label.
-       * @internal
+       * @returns The root `vNode` of the `default` slot.
        */
-      function splitAt(label: string, start: number, end: number): HighlightMatch {
-        return {
-          start: label.substring(0, start),
-          match: label.substring(start, end),
-          end: label.substring(end)
+      function renderDefaultSlot() {
+        const slotProps = {
+          text: props.text,
+          hasMatch: hasMatch.value,
+          ...matchParts.value
         };
+        return slots.default?.(slotProps)[0];
       }
 
-      return { hasMatch, matchParts, dynamicCSSClasses };
+      /* Hack to render through a render-function, the `default` slot or, in its absence,
+       the component itself. It is the alternative for the NoElement antipattern. */
+      const componentProps = { hasMatch, matchParts, dynamicCSSClasses };
+      return (slots.default ? renderDefaultSlot : componentProps) as typeof componentProps;
     }
   });
-
-  /**
-   * Contains the different parts of a string match.
-   */
-  interface HighlightMatch {
-    /**
-     * When the match does not happen from the beginning of the string, the initial unmatched
-     * part.
-     */
-    start: string;
-    /**
-     * The part of the text that is matching.
-     */
-    match: string;
-    /**
-     * When the match does not extend until the end, the remaining unmatched string.
-     */
-    end: string;
-  }
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/components/modals/base-id-modal-close.vue b/packages/x-components/src/components/modals/base-id-modal-close.vue
index 7b06609c19..b6b1bf5ab4 100644
--- a/packages/x-components/src/components/modals/base-id-modal-close.vue
+++ b/packages/x-components/src/components/modals/base-id-modal-close.vue
@@ -1,27 +1,17 @@
 <template>
-  <NoElement>
-    <!--
-      @slot closing-element. It's the element that will trigger the modal closing. It's a
-      button by default.
-        @binding {Function} closeModal - The function to close the modal.
-    -->
-    <slot :closeModal="emitCloseModalEvent" name="closing-element">
-      <button
-        @click="emitCloseModalEvent"
-        class="x-events-modal-id-close-button x-button"
-        data-test="close-modal-id"
-      >
-        <!-- @slot (Required) Button content with a text, an icon or both -->
-        <slot />
-      </button>
-    </slot>
-  </NoElement>
+  <button
+    @click="closeModal"
+    class="x-events-modal-id-close-button x-button"
+    data-test="close-modal-id"
+  >
+    <!-- @slot (Required) Button content with a text, an icon or both -->
+    <slot />
+  </button>
 </template>
 
 <script lang="ts">
   import { defineComponent } from 'vue';
-  import { NoElement } from '../no-element';
-  import { use$x } from '../../composables/use-$x';
+  import { use$x } from '../../composables';
 
   /**
    * Component that allows to close a modal by emitting
@@ -32,36 +22,32 @@
    * @public
    */
   export default defineComponent({
-    components: {
-      NoElement
-    },
+    name: 'BaseIdModalClose',
     props: {
-      /**
-       * The modalId of the modal that will be closed.
-       *
-       * @public
-       */
+      /** The modalId of the modal that will be closed. */
       modalId: {
         type: String,
         required: true
       }
     },
-    setup(props) {
+    setup(props, { slots }) {
       const $x = use$x();
 
       /**
        * Emits the {@link XEventsTypes.UserClickedCloseModal} event with the modalId as payload.
        *
        * @param event - The event triggering the function.
-       * @public
        */
-      const emitCloseModalEvent = ({ target }: Event): void => {
+      function closeModal({ target }: Event) {
         $x.emit('UserClickedCloseModal', props.modalId, { target: target as HTMLElement });
-      };
+      }
 
-      return {
-        emitCloseModalEvent
-      };
+      /* Hack to render through a render-function, the `closingElement` slot or, in its absence,
+       the component itself. It is the alternative for the NoElement antipattern. */
+      const innerProps = { closeModal };
+      return (
+        slots.closingElement ? () => slots.closingElement?.(innerProps)[0] : innerProps
+      ) as typeof innerProps;
     }
   });
 </script>
diff --git a/packages/x-components/src/components/modals/base-id-modal-open.vue b/packages/x-components/src/components/modals/base-id-modal-open.vue
index 0c4e201c57..dd4ae29d0c 100644
--- a/packages/x-components/src/components/modals/base-id-modal-open.vue
+++ b/packages/x-components/src/components/modals/base-id-modal-open.vue
@@ -1,27 +1,17 @@
 <template>
-  <NoElement>
-    <!--
-      @slot opening-element. It's the element that will trigger the modal opening. It's a
-      button by default.
-        @binding {Function} openModal - The function to open the modal.
-    -->
-    <slot :openModal="emitOpenModalEvent" name="opening-element">
-      <button
-        @click="emitOpenModalEvent"
-        class="x-events-modal-id-open-button x-button"
-        data-test="open-modal-id"
-      >
-        <!-- @slot (Required) Button content with a text, an icon or both -->
-        <slot />
-      </button>
-    </slot>
-  </NoElement>
+  <button
+    @click="openModal"
+    class="x-events-modal-id-open-button x-button"
+    data-test="open-modal-id"
+  >
+    <!-- @slot (Required) Button content with a text, an icon or both -->
+    <slot />
+  </button>
 </template>
 
 <script lang="ts">
   import { defineComponent } from 'vue';
-  import { NoElement } from '../no-element';
-  import { use$x } from '../../composables/index';
+  import { use$x } from '../../composables';
 
   /**
    * Component that allows to open a modal by emitting {@link XEventsTypes.UserClickedOpenModal}
@@ -31,34 +21,32 @@
    * @public
    */
   export default defineComponent({
-    components: { NoElement },
+    name: 'BaseIdModalOpen',
     props: {
-      /**
-       * The modalId of the modal that will be opened.
-       *
-       * @public
-       */
+      /** The modalId of the modal that will be opened. */
       modalId: {
         type: String,
         required: true
       }
     },
-    setup(props) {
+    setup(props, { slots }) {
       const $x = use$x();
 
       /**
        * Emits the {@link XEventsTypes.UserClickedOpenModal} event with the modalId as payload.
        *
        * @param event - The event triggering the function.
-       * @public
        */
-      const emitOpenModalEvent = ({ target }: Event): void => {
+      function openModal({ target }: Event) {
         $x.emit('UserClickedOpenModal', props.modalId, { target: target as HTMLElement });
-      };
+      }
 
-      return {
-        emitOpenModalEvent
-      };
+      /* Hack to render through a render-function, the `openingElement` slot or, in its absence,
+       the component itself. It is the alternative for the NoElement antipattern. */
+      const innerProps = { openModal };
+      return (
+        slots.openingElement ? () => slots.openingElement?.(innerProps)[0] : innerProps
+      ) as typeof innerProps;
     }
   });
 </script>
diff --git a/packages/x-components/src/components/result/result-variant-selector.vue b/packages/x-components/src/components/result/result-variant-selector.vue
index 445bb66174..ee86652233 100644
--- a/packages/x-components/src/components/result/result-variant-selector.vue
+++ b/packages/x-components/src/components/result/result-variant-selector.vue
@@ -1,57 +1,42 @@
 <template>
-  <NoElement v-if="result && variants">
-    <!--
-      @slot Variants list
-        @binding {ResultVariant[]} variants - Array containing the available variants
-        @binding {ResultVariant | undefined} selectedVariant - The selected variant
-        @binding {(variant: ResultVariant) => void} selectVariant - Callback to select a variant
-    -->
-    <slot :variants="variants" :selectedVariant="selectedVariant" :selectVariant="selectVariant">
-      <ul class="x-result-variant-selector__list" data-test="variants-list">
-        <li
-          v-for="(variant, index) in variants"
-          :key="index"
-          class="x-result-variant-selector__item"
-          :class="{ 'x-result-variant-selector__item--is-selected': variantIsSelected(variant) }"
-          data-test="variant-item"
-        >
+  <ul v-if="result && variants" class="x-result-variant-selector__list" data-test="variants-list">
+    <li
+      v-for="(variant, index) in variants"
+      :key="index"
+      class="x-result-variant-selector__item"
+      :class="{ 'x-result-variant-selector__item--is-selected': variantIsSelected(variant) }"
+      data-test="variant-item"
+    >
+      <!--
+        @slot Variant item
+        @binding {ResultVariant} variant - The variant item
+        @binding {boolean} isSelected - Indicates if the variant is selected
+        @binding {() => void} selectVariant - Callback to select the variant
+      -->
+      <slot
+        name="variant"
+        :variant="variant"
+        :isSelected="variantIsSelected(variant)"
+        :selectVariant="() => selectVariant(variant)"
+      >
+        <button @click="selectVariant(variant)" data-test="variant-button" class="x-button">
           <!--
-            @slot Variant item
-              @binding {ResultVariant} variant - The variant item
-              @binding {boolean} isSelected - Indicates if the variant is selected
-              @binding {() => void} selectVariant - Callback to select the variant
+            @slot Variant content
+            @binding {ResultVariant} variant - The variant item
+            @binding {boolean} isSelected - Indicates if the variant is selected
           -->
-          <slot
-            name="variant"
-            :variant="variant"
-            :isSelected="variantIsSelected(variant)"
-            :selectVariant="() => selectVariant(variant)"
-          >
-            <button @click="selectVariant(variant)" data-test="variant-button" class="x-button">
-              <!--
-                @slot Variant content
-                  @binding {ResultVariant} variant - The variant item
-                  @binding {boolean} isSelected - Indicates if the variant is selected
-              -->
-              <slot
-                name="variant-content"
-                :variant="variant"
-                :isSelected="variantIsSelected(variant)"
-              >
-                {{ variant }}
-              </slot>
-            </button>
+          <slot name="variant-content" :variant="variant" :isSelected="variantIsSelected(variant)">
+            {{ variant }}
           </slot>
-        </li>
-      </ul>
-    </slot>
-  </NoElement>
+        </button>
+      </slot>
+    </li>
+  </ul>
 </template>
 
 <script lang="ts">
   import { computed, defineComponent, inject, Ref } from 'vue';
   import { Result, ResultVariant } from '@empathyco/x-types';
-  import { NoElement } from '../no-element';
   import {
     RESULT_WITH_VARIANTS_KEY,
     SELECTED_VARIANTS_KEY,
@@ -66,19 +51,14 @@
    */
   export default defineComponent({
     name: 'ResultVariantSelector',
-    components: { NoElement },
     props: {
-      /**
-       * The nest level of the variants to be rendered.
-       *
-       * @public
-       */
+      /** The nest level of the variants to be rendered. */
       level: {
         type: Number,
         default: 0
       }
     },
-    setup(props) {
+    setup(props, { slots }) {
       /**
        * Callback to be called when a variant is selected.
        *
@@ -89,25 +69,16 @@
         SELECT_RESULT_VARIANT_KEY as string
       );
 
-      /**
-       * The original result, used to retrieve the available variants for the level.
-       *
-       * @public
-       */
+      /** The original result, used to retrieve the available variants for the level. */
       const result = inject<Ref<Result>>(RESULT_WITH_VARIANTS_KEY as string);
 
-      /**
-       * Array containing the selected variants.
-       *
-       * @public
-       */
+      /** Array containing the selected variants. */
       const selectedVariants = inject<Ref<ResultVariant[]>>(SELECTED_VARIANTS_KEY as string);
 
       /**
        * It retrieves the available variants from the result.
        *
        * @returns - The variants of the result for the current level.
-       * @internal
        */
       const variants = computed<ResultVariant[] | undefined>(() => {
         if (props.level === 0) {
@@ -120,19 +91,17 @@
        * Gets the selected variant of the current level.
        *
        * @returns - The selected variant.
-       * @internal
        */
-      const selectedVariant = computed<ResultVariant | undefined>(() => {
-        return variants.value?.find(variant => variant === selectedVariants!.value[props.level]);
-      });
+      const selectedVariant = computed<ResultVariant | undefined>(() =>
+        variants.value?.find(variant => variant === selectedVariants!.value[props.level])
+      );
 
       /**
        * Calls the provided method to select a variant.
        *
        * @param variant - Variant to select.
-       * @internal
        */
-      const selectVariant = (variant: ResultVariant): void => {
+      const selectVariant = (variant: ResultVariant) => {
         selectResultVariant!(variant, props.level);
       };
 
@@ -141,19 +110,35 @@
        *
        * @param variant - Variant to check.
        * @returns True if the variant is selected, false if not.
-       * @internal
        */
-      const variantIsSelected = (variant: ResultVariant): boolean => {
+      const variantIsSelected = (variant: ResultVariant) => {
         return selectedVariant.value === variant;
       };
 
-      return {
-        result,
-        selectedVariant,
-        selectVariant,
-        variantIsSelected,
-        variants
-      };
+      /**
+       * Render function to execute the `default` slot, binding `slotsProps` and getting only the
+       * first `vNode` to avoid Fragments and Text root nodes.
+       * If there are no result or variants, nothing is rendered.
+       *
+       * @remarks `slotProps` must be values without Vue reactivity and located inside the
+       * render-function to update the binding data properly.
+       *
+       * @returns The root `vNode` of the `default` slot or empty string if there are
+       * no result or variants.
+       */
+      function renderDefaultSlot() {
+        const slotProps = {
+          variants: variants.value,
+          selectedVariant: selectedVariant.value,
+          selectVariant
+        };
+        return result && variants.value ? slots.default?.(slotProps)[0] : '';
+      }
+
+      /* Hack to render through a render-function, the `default` slot or, in its absence,
+       the component itself. It is the alternative for the NoElement antipattern. */
+      const componentProps = { result, variants, variantIsSelected, selectVariant };
+      return (slots.default ? renderDefaultSlot : componentProps) as typeof componentProps;
     }
   });
 </script>
diff --git a/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue b/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
index b32734f395..ae6b9fd198 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
+++ b/packages/x-components/src/x-modules/queries-preview/components/query-preview.vue
@@ -1,37 +1,20 @@
 <template>
-  <NoElement v-if="queryPreviewResults && queryPreviewResults.totalResults > 0">
-    <!--
-      @slot Query Preview default slot.
-          @binding {QueryPreviewInfo} queryPreviewInfo - The information about the request of the
-          query preview
-          @binding {Result[]} results - The results preview of the query preview
-          @binding {number} totalResults - The total results of the search request
-    -->
-    <slot
-      :queryPreviewInfo="queryPreviewInfo"
-      :results="queryPreviewResults.results"
-      :totalResults="queryPreviewResults.totalResults"
-      :displayTagging="queryPreviewResults.displayTagging"
-      :queryTagging="queryPreviewResults.queryTagging"
+  <ul v-if="hasResults" data-test="query-preview" class="x-query-preview">
+    <li
+      v-for="result in queryPreviewResults?.results"
+      :key="result.id"
+      class="x-query-preview__item"
+      data-test="query-preview-item"
     >
-      <ul data-test="query-preview" class="x-query-preview">
-        <li
-          v-for="result in queryPreviewResults.results"
-          :key="result.id"
-          class="x-query-preview__item"
-          data-test="query-preview-item"
-        >
-          <!--
-          @slot Query Preview result slot.
-              @binding {Result} result - A Query Preview result
-          -->
-          <slot name="result" :result="result">
-            <span data-test="result-name">{{ result.name }}</span>
-          </slot>
-        </li>
-      </ul>
-    </slot>
-  </NoElement>
+      <!--
+        @slot Query Preview result slot.
+        @binding {Result} result - A Query Preview result
+      -->
+      <slot name="result" :result="result">
+        <span data-test="result-name">{{ result.name }}</span>
+      </slot>
+    </li>
+  </ul>
 </template>
 
 <script lang="ts">
@@ -46,21 +29,17 @@
     Ref,
     watch
   } from 'vue';
-  import { SearchRequest, Result, Filter } from '@empathyco/x-types';
+  import { SearchRequest, Filter } from '@empathyco/x-types';
   import { deepEqual, Dictionary } from '@empathyco/x-utils';
-  import { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts';
-  import { NoElement } from '../../../components/no-element';
-  import { QueryFeature, FeatureLocation } from '../../../types/origin';
+  import { LIST_ITEMS_KEY } from '../../../components';
+  import { QueryFeature, FeatureLocation } from '../../../types';
   import { QueryPreviewInfo, QueryPreviewItem } from '../store/types';
   import { QueriesPreviewConfig } from '../config.types';
   import { queriesPreviewXModule } from '../x-module';
-  import { createOrigin } from '../../../utils/origin';
-  import { debounce } from '../../../utils/debounce';
-  import { DebouncedFunction } from '../../../utils';
+  import { DebouncedFunction, debounceFunction, createOrigin } from '../../../utils';
   import { createRawFilter } from '../../../__stubs__/filters-stubs.factory';
   import { getHashFromQueryPreviewInfo } from '../utils/get-hash-from-query-preview';
-  import { useState } from '../../../composables/use-state';
-  import { useXBus } from '../../../composables/use-x-bus';
+  import { useXBus, useState } from '../../../composables';
 
   /**
    * Retrieves a preview of the results of a query and exposes them in the default slot,
@@ -69,34 +48,20 @@
    *
    * @public
    */
-
   export default defineComponent({
     name: 'QueryPreview',
     xModule: queriesPreviewXModule.name,
-    components: { NoElement },
     props: {
-      /**
-       * The information about the request of the query preview.
-       *
-       * @public
-       */
+      /** The information about the request of the query preview. */
       queryPreviewInfo: {
         type: Object as PropType<QueryPreviewInfo>,
         required: true
       },
-      /**
-       * The origin property for the request.
-       *
-       * @public
-       */
+      /** The origin property for the request. */
       queryFeature: {
         type: String as PropType<QueryFeature>
       },
-      /**
-       * Number of query preview results to be rendered.
-       *
-       * @public
-       */
+      /** Number of query preview results to be rendered. */
       maxItemsToRender: {
         type: Number
       },
@@ -112,8 +77,6 @@
       /**
        * Controls whether the QueryPreview should be removed from the state
        * when the component is destroyed.
-       *
-       * @public
        */
       persistInCache: {
         type: Boolean,
@@ -121,7 +84,7 @@
       }
     },
     emits: ['load', 'error'],
-    setup(props, { emit }) {
+    setup(props, { emit, slots }) {
       const xBus = useXBus();
 
       const queriesPreviewState = useState('queriesPreview', [
@@ -153,18 +116,15 @@
        * Query Preview key converted into a unique id.
        *
        * @returns The query hash.
-       * @internal
        */
-      const queryPreviewHash = computed((): string => {
-        return getHashFromQueryPreviewInfo(props.queryPreviewInfo);
-      });
+      const queryPreviewHash = computed(() => getHashFromQueryPreviewInfo(props.queryPreviewInfo));
 
       /**
        * Gets from the state the results preview of the query preview.
        *
        * @returns The results preview of the actual query preview.
        */
-      const queryPreviewResults = computed((): Partial<QueryPreviewItem> | undefined => {
+      const queryPreviewResults = computed(() => {
         const resultsPreview = previewResults.value[queryPreviewHash.value];
         return resultsPreview?.results
           ? {
@@ -182,12 +142,9 @@
        * `BaseGrid` or any component that injects the list.
        *
        * @returns A list of results.
-       * @public
        */
-      const results = computed((): Result[] | undefined => {
-        return queryPreviewResults.value?.results;
-      });
-      provide<Ref<Result[] | undefined>>(LIST_ITEMS_KEY as string, results);
+      const results = computed(() => queryPreviewResults.value?.results);
+      provide(LIST_ITEMS_KEY as string, results);
 
       /**
        * It injects the provided {@link FeatureLocation} of the selected query in the search request.
@@ -204,9 +161,8 @@
        * The computed request object to be used to retrieve the query preview results.
        *
        * @returns The search request object.
-       * @internal
        */
-      const queryPreviewRequest = computed((): SearchRequest => {
+      const queryPreviewRequest = computed<SearchRequest>(() => {
         const origin = createOrigin({
           feature: props.queryFeature,
           location: location
@@ -238,13 +194,12 @@
        * for cacheable queries.
        *
        * @returns The search request object.
-       * @internal
        */
-      const emitQueryPreviewRequestUpdated = computed((): DebouncedFunction<[SearchRequest]> => {
-        return debounce(request => {
+      const emitQueryPreviewRequestUpdated = computed<DebouncedFunction<[SearchRequest]>>(() =>
+        debounceFunction(request => {
           xBus.emit('QueryPreviewRequestUpdated', request, { priority: 0, replaceable: false });
-        }, props.debounceTimeMs);
-      });
+        }, props.debounceTimeMs)
+      );
 
       /**
        * Initialises watcher to emit debounced requests, and first value for the requests.
@@ -275,8 +230,6 @@
        * via the `debounce.cancel()` method.
        * If the prop 'persistInCache' is set to false, it also removes the QueryPreview
        * from the state when the component is destroyed.
-       *
-       * @internal
        */
       onBeforeUnmount(() => {
         emitQueryPreviewRequestUpdated.value.cancel();
@@ -311,7 +264,6 @@
        * Emits an event when the query results are loaded or fail to load.
        *
        * @param status - The status of the query preview request.
-       * @internal
        */
       watch(queryPreviewResultsStatus, () => {
         if (queryPreviewResultsStatus.value === 'success') {
@@ -321,9 +273,34 @@
         }
       });
 
-      return {
-        queryPreviewResults
-      };
+      const hasResults = computed(() => (queryPreviewResults.value?.totalResults ?? 0) > 0);
+
+      /**
+       * Render function to execute the `default` slot, binding `slotsProps` and getting only the
+       * first `vNode` to avoid Fragments and Text root nodes.
+       * If there are no results, nothing is rendered.
+       *
+       * @remarks `slotProps` must be values without Vue reactivity and located inside the
+       * render-function to update the binding data properly.
+       *
+       * @returns The root `vNode` of the `default` slot or empty string if there are no results.
+       */
+      function renderDefaultSlot() {
+        const slotProps = {
+          queryPreviewInfo: props.queryPreviewInfo,
+          results: queryPreviewResults.value?.results,
+          totalResults: queryPreviewResults.value?.totalResults,
+          displayTagging: queryPreviewResults.value?.displayTagging,
+          queryTagging: queryPreviewResults.value?.queryTagging
+        };
+
+        return hasResults.value ? slots.default?.(slotProps)[0] : '';
+      }
+
+      /* Hack to render through a render-function, the `default` slot or, in its absence,
+       the component itself. It is the alternative for the NoElement antipattern. */
+      const componentProps = { hasResults, queryPreviewResults };
+      return (slots.default ? renderDefaultSlot : componentProps) as typeof componentProps;
     }
   });
 </script>
diff --git a/packages/x-components/src/x-modules/recommendations/components/recommendations.vue b/packages/x-components/src/x-modules/recommendations/components/recommendations.vue
index fc45d950e1..4104077b2c 100644
--- a/packages/x-components/src/x-modules/recommendations/components/recommendations.vue
+++ b/packages/x-components/src/x-modules/recommendations/components/recommendations.vue
@@ -1,38 +1,34 @@
 <template>
-  <NoElement v-if="recommendations.length">
-    <!--
-      @slot Customized Recommendations layout.
-          @binding {Result[]} recommendations - Recommendations to render.
-          @binding {Vue} animation - Animation to animate the elements.
-    -->
-    <slot name="layout" v-bind="{ animation, recommendations }">
-      <component :is="animation" tag="ul" data-test="recommendations" class="x-recommendations">
-        <li
-          v-for="recommendation in recommendations"
-          :key="recommendation.id"
-          class="x-recommendations__item"
-          data-test="recommendation-item"
-        >
-          <!--
-            @slot (Required) Recommendation content.
-            @binding {recommendation} recommendation - Recommendation data.
-          -->
-          <slot :recommendation="recommendation" />
-        </li>
-      </component>
-    </slot>
-  </NoElement>
+  <component
+    :is="animation"
+    v-if="recommendations.length"
+    tag="ul"
+    data-test="recommendations"
+    class="x-recommendations"
+  >
+    <li
+      v-for="recommendation in recommendations"
+      :key="recommendation.id"
+      class="x-recommendations__item"
+      data-test="recommendation-item"
+    >
+      <!--
+        @slot (Required) Recommendation content.
+        @binding {recommendation} recommendation - Recommendation data.
+      -->
+      <slot :recommendation="recommendation" />
+    </li>
+  </component>
 </template>
 
 <script lang="ts">
   import { Result } from '@empathyco/x-types';
   import { computed, defineComponent, provide, ComputedRef } from 'vue';
-  import { NoElement } from '../../../components/no-element';
-  import { PropsWithType } from '../../../utils/types';
-  import { XEventsTypes } from '../../../wiring/events.types';
+  import { useState } from '../../../composables';
+  import { PropsWithType } from '../../../utils';
+  import { XEventsTypes } from '../../../wiring';
   import { recommendationsXModule } from '../x-module';
-  import { AnimationProp } from '../../../types/animation-prop';
-  import { useState } from '../../../composables/use-state';
+  import { AnimationProp } from '../../../types';
 
   /**
    * It renders a list of recommendations from the
@@ -47,41 +43,22 @@
   export default defineComponent({
     name: 'Recommendations',
     xModule: recommendationsXModule.name,
-    components: {
-      NoElement
-    },
     props: {
-      /**
-       * Animation component that will be used to animate the recommendations.
-       *
-       * @public
-       */
+      /** Animation component that will be used to animate the recommendations. */
       animation: {
         type: AnimationProp,
         default: 'ul'
       },
-      /**
-       * Number of recommendations to be rendered.
-       *
-       * @public
-       */
+      /** Number of recommendations to be rendered. */
       maxItemsToRender: Number
     },
-    setup(props) {
-      /**
-       * The module's list of recommendations.
-       *
-       * @public
-       */
+    setup(props, { slots }) {
+      /** The module's list of recommendations. */
       const storedRecommendations: ComputedRef<Result[]> = useState('recommendations', [
         'recommendations'
       ]).recommendations;
 
-      /**
-       * The additional events to be emitted by the mandatory {@link BaseResultLink} component.
-       *
-       * @public
-       */
+      /** The additional events to be emitted by the mandatory {@link BaseResultLink} component. */
       provide<PropsWithType<XEventsTypes, Result>[]>('resultClickExtraEvents', [
         'UserClickedARecommendation'
       ]);
@@ -90,16 +67,34 @@
        * Slices the recommendations from the state.
        *
        * @returns - The list of recommendations slice by the number of items to render.
-       *
-       * @internal
        */
-      const recommendations = computed(() =>
+      const recommendations = computed<Result[]>(() =>
         storedRecommendations.value.slice(0, props.maxItemsToRender)
       );
 
-      return {
-        recommendations
-      };
+      /**
+       * Render function to execute the `layout` slot, binding `slotsProps` and getting only the
+       * first `vNode` to avoid Fragments and Text root nodes.
+       * If there are no recommendations, nothing is rendered.
+       *
+       * @remarks `slotProps` must be values without Vue reactivity and located inside the
+       * render-function to update the binding data properly.
+       *
+       * @returns The root `vNode` of the `layout` slot or empty string if there are
+       * no recommendations.
+       */
+      function renderLayoutSlot() {
+        const slotProps = {
+          animation: props.animation,
+          recommendations: recommendations.value
+        };
+        return recommendations.value.length ? slots.layout?.(slotProps)[0] : '';
+      }
+
+      /* Hack to render through a render-function, the `layout` slot or, in its absence,
+       the component itself. It is the alternative for the NoElement antipattern. */
+      const componentProps = { recommendations };
+      return (slots.layout ? renderLayoutSlot : componentProps) as typeof componentProps;
     }
   });
 </script>
diff --git a/packages/x-components/src/x-modules/semantic-queries/components/semantic-queries.vue b/packages/x-components/src/x-modules/semantic-queries/components/semantic-queries.vue
index b2f345b75b..8032eefcd9 100644
--- a/packages/x-components/src/x-modules/semantic-queries/components/semantic-queries.vue
+++ b/packages/x-components/src/x-modules/semantic-queries/components/semantic-queries.vue
@@ -1,52 +1,34 @@
 <template>
-  <NoElement v-if="suggestions.length">
-    <!-- eslint-disable max-len -->
+  <BaseSuggestions
+    v-if="suggestions.length"
+    class="x-semantic-queries"
+    :suggestions="suggestions"
+    #default="baseSuggestionsScope"
+  >
     <!--
       @slot Semantic Query content
-        @binding {string[]} queries - SemanticQueries mapped to strings
-        @binding {SemanticQuery[]} suggestions - The SemanticQueries
-        @binding {(query: string) => SemanticQuery} findSemanticQuery - Method to find a semantic query given a query
+      @binding {{suggestion: object - Suggestion data, index: number - Suggestion index}} v-bind
+        BaseSuggestion bindings
     -->
-    <!-- eslint-enable max-len -->
-    <slot name="default" v-bind="{ queries, suggestions, findSemanticQuery }">
-      <BaseSuggestions
-        v-bind="$attrs"
-        class="x-semantic-queries"
-        :suggestions="suggestions"
-        #default="baseSuggestionsScope"
-      >
-        <!-- eslint-disable max-len -->
+    <slot name="suggestion" v-bind="baseSuggestionsScope">
+      <SemanticQuery :suggestion="baseSuggestionsScope.suggestion" #default="baseSuggestionScope">
         <!--
           @slot Semantic Query content
-              @binding {{suggestion: object - Suggestion data, index: number - Suggestion index}} v-bind BaseSuggestion bindings
+          @binding {{suggestion: object - Suggestion data, query: string - The query that the
+            suggestion belongs to}} v-bind SemanticQuery bindings
         -->
-        <!-- eslint-enable max-len -->
-        <slot name="suggestion" v-bind="baseSuggestionsScope">
-          <SemanticQuery
-            :suggestion="baseSuggestionsScope.suggestion"
-            #default="baseSuggestionScope"
-          >
-            <!-- eslint-disable max-len -->
-            <!--
-              @slot Semantic Query content
-                  @binding {{suggestion: object - Suggestion data, query: string - The query that the suggestion belongs to}} v-bind SemanticQuery bindings
-            -->
-            <!-- eslint-enable max-len -->
-            <slot name="suggestion-content" v-bind="baseSuggestionScope" />
-          </SemanticQuery>
-        </slot>
-      </BaseSuggestions>
+        <slot name="suggestion-content" v-bind="baseSuggestionScope" />
+      </SemanticQuery>
     </slot>
-  </NoElement>
+  </BaseSuggestions>
 </template>
 
 <script lang="ts">
   import { computed, ComputedRef, defineComponent } from 'vue';
-  import { SemanticQuery as SemanticQueryModel } from '@empathyco/x-types';
+  import { Suggestion } from '@empathyco/x-types';
   import { semanticQueriesXModule } from '../x-module';
-  import { NoElement } from '../../../components/no-element';
   import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';
-  import { useState } from '../../../composables/use-state';
+  import { useState } from '../../../composables';
   import SemanticQuery from './semantic-query.vue';
 
   /**
@@ -57,11 +39,10 @@
   export default defineComponent({
     name: 'SemanticQueries',
     xModule: semanticQueriesXModule.name,
-    components: { BaseSuggestions, NoElement, SemanticQuery },
-    inheritAttrs: false,
-    setup() {
+    components: { BaseSuggestions, SemanticQuery },
+    setup(_, { slots }) {
       /** The semantic queries from the state. */
-      const suggestions: ComputedRef<SemanticQueryModel[]> = useState('semanticQueries', [
+      const suggestions: ComputedRef<Suggestion[]> = useState('semanticQueries', [
         'semanticQueries'
       ]).semanticQueries;
 
@@ -72,15 +53,39 @@
       const queries = computed(() => suggestions.value.map(suggestion => suggestion.query));
 
       /**
-       * Finds a {@link @empathyco/x-types#SemanticQuery} given a query.
+       * Finds a {@link @empathyco/x-types#Suggestion} given a query.
        *
        * @param query - The query to search.
-       * @returns The {@link @empathyco/x-types#SemanticQuery} or undefined if not found.
+       * @returns The {@link @empathyco/x-types#Suggestion} or undefined if not found.
        */
-      const findSemanticQuery = (query: string) =>
-        suggestions.value.find(suggestion => suggestion.query === query);
+      function findSemanticQuery(query: string) {
+        return suggestions.value.find(suggestion => suggestion.query === query);
+      }
 
-      return { suggestions, queries, findSemanticQuery };
+      /**
+       * Render function to execute the `default` slot, binding `slotsProps` and getting only the
+       * first `vNode` to avoid Fragments and Text root nodes.
+       * If there are no suggestions, nothing is rendered.
+       *
+       * @remarks `slotProps` must be values without Vue reactivity and located inside the
+       * render-function to update the binding data properly.
+       *
+       * @returns The root `vNode` of the `default` slot or empty string if there are
+       * no suggestions.
+       */
+      function renderDefaultSlot() {
+        const slotProps = {
+          suggestions: suggestions.value,
+          queries: queries.value,
+          findSemanticQuery
+        };
+        return suggestions.value.length ? slots.default?.(slotProps)[0] : '';
+      }
+
+      /* Hack to render through a render-function, the `default` slot or, in its absence,
+       the component itself. It is the alternative for the NoElement antipattern. */
+      const componentProps = { suggestions };
+      return (slots.default ? renderDefaultSlot : componentProps) as typeof componentProps;
     }
   });
 </script>

From 11e53584ac1518d8678587437628d34e95cd06bc Mon Sep 17 00:00:00 2001
From: "Jose A. Cabaneros" <joseacabaneros@gmail.com>
Date: Thu, 1 Aug 2024 18:30:20 +0200
Subject: [PATCH 3/7] refactor(no-element): get rid of useNoElementRender
 composable and NoElement component in favour of NoAnimation component

---
 .../components/__tests__/no-element.spec.ts   | 19 -----
 .../src/components/animations/index.ts        |  1 +
 .../components/animations/no-animation.vue    | 15 ++++
 .../src/components/base-dropdown.vue          | 10 +--
 packages/x-components/src/components/index.ts |  1 -
 .../src/components/location-provider.vue      |  3 +-
 .../src/components/modals/base-modal.vue      | 16 ++--
 .../x-components/src/components/no-element.ts | 15 ----
 .../panels/base-header-toggle-panel.vue       | 23 +++---
 .../panels/base-id-toggle-panel.vue           | 20 ++---
 .../src/components/panels/base-tabs-panel.vue |  4 +-
 .../components/result/base-result-image.vue   | 29 ++-----
 .../__tests__/use-no-element-render.spec.ts   | 79 -------------------
 .../x-components/src/composables/index.ts     |  1 -
 .../src/composables/use-no-element-render.ts  | 17 ----
 .../empathize/components/empathize.vue        |  8 +-
 .../facets/components/preselected-filters.vue |  3 +-
 .../scroll/components/scroll-to-top.vue       | 10 +--
 18 files changed, 57 insertions(+), 217 deletions(-)
 delete mode 100644 packages/x-components/src/components/__tests__/no-element.spec.ts
 create mode 100644 packages/x-components/src/components/animations/no-animation.vue
 delete mode 100644 packages/x-components/src/components/no-element.ts
 delete mode 100644 packages/x-components/src/composables/__tests__/use-no-element-render.spec.ts
 delete mode 100644 packages/x-components/src/composables/use-no-element-render.ts

diff --git a/packages/x-components/src/components/__tests__/no-element.spec.ts b/packages/x-components/src/components/__tests__/no-element.spec.ts
deleted file mode 100644
index e9febd19d5..0000000000
--- a/packages/x-components/src/components/__tests__/no-element.spec.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { getDataTestSelector } from '../../__tests__/utils';
-import { NoElement } from '../no-element';
-
-describe('testing no component', () => {
-  it('renders the first node passed in the default slot and bind the css classes', () => {
-    const wrapper = mount({
-      template: `
-          <NoElement class="test">
-            <div data-test="node">test</div>
-          </NoElement>`,
-      components: {
-        NoElement
-      }
-    });
-    expect(wrapper.find(getDataTestSelector('node')).element).toBeDefined();
-    expect(wrapper.find(getDataTestSelector('node')).classes()).toEqual(['test']);
-  });
-});
diff --git a/packages/x-components/src/components/animations/index.ts b/packages/x-components/src/components/animations/index.ts
index 26240a7f04..2c4fb0a84c 100644
--- a/packages/x-components/src/components/animations/index.ts
+++ b/packages/x-components/src/components/animations/index.ts
@@ -4,6 +4,7 @@ export { default as CollapseWidth } from './collapse-width.vue';
 export { default as CrossFade } from './cross-fade.vue';
 export { default as Fade } from './fade.vue';
 export { default as FadeAndSlide } from './fade-and-slide.vue';
+export { default as NoAnimation } from './no-animation.vue';
 export { default as StaggeredFadeAndSlide } from './staggered-fade-and-slide.vue';
 export { default as StaggeringTransitionGroup } from './staggering-transition-group.vue';
 export { createDirectionalAnimationFactory } from './create-directional-animation-factory';
diff --git a/packages/x-components/src/components/animations/no-animation.vue b/packages/x-components/src/components/animations/no-animation.vue
new file mode 100644
index 0000000000..4feb2f6477
--- /dev/null
+++ b/packages/x-components/src/components/animations/no-animation.vue
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { defineComponent, h, Comment } from 'vue';
+
+  /**
+   * Component to be used as `default` for animation props together with dynamic components
+   * `<component :is="animation">` in the template.
+   */
+  export default defineComponent({
+    name: 'NoAnimation',
+    setup(_, { slots }) {
+      return () =>
+        slots.default?.()[0] ?? h(Comment, 'NoAnimation component - Without default slot');
+    }
+  });
+</script>
diff --git a/packages/x-components/src/components/base-dropdown.vue b/packages/x-components/src/components/base-dropdown.vue
index b40341033d..4bacbb459c 100644
--- a/packages/x-components/src/components/base-dropdown.vue
+++ b/packages/x-components/src/components/base-dropdown.vue
@@ -80,11 +80,8 @@
   import { Identifiable } from '@empathyco/x-types';
   import { computed, defineComponent, nextTick, onBeforeUnmount, PropType, ref, watch } from 'vue';
   import { AnimationProp } from '../types';
-  import { getTargetElement } from '../utils/html';
-  import { normalizeString } from '../utils/normalize';
-  import { isInRange } from '../utils/number';
-  import { debounce as debounceFunction } from '../utils/debounce';
-  import { NoElement } from './no-element';
+  import { debounceFunction, normalizeString, getTargetElement, isInRange } from '../utils';
+  import { NoAnimation } from './animations';
 
   type DropdownItem = string | number | Identifiable;
   let dropdownCount = 0;
@@ -95,7 +92,6 @@
    */
   export default defineComponent({
     name: 'BaseDropdown',
-    components: { NoElement },
     props: {
       /** List of items to display.*/
       items: {
@@ -117,7 +113,7 @@
        */
       animation: {
         type: AnimationProp,
-        default: () => NoElement
+        default: () => NoAnimation
       },
       /** Time to wait without receiving any keystroke before resetting the items search query. */
       searchTimeoutMs: {
diff --git a/packages/x-components/src/components/index.ts b/packages/x-components/src/components/index.ts
index 911e226bae..3f751fbb89 100644
--- a/packages/x-components/src/components/index.ts
+++ b/packages/x-components/src/components/index.ts
@@ -24,7 +24,6 @@ export { default as GlobalXBus } from './global-x-bus.vue';
 export { default as Highlight } from './highlight.vue';
 export { default as ItemsList } from './items-list.vue';
 export { default as LocationProvider } from './location-provider.vue';
-export { NoElement } from './no-element';
 export { default as SlidingPanel } from './sliding-panel.vue';
 export { default as SnippetCallbacks } from './snippet-callbacks.vue';
 export { default as PageLoaderButton } from './page-loader-button.vue';
diff --git a/packages/x-components/src/components/location-provider.vue b/packages/x-components/src/components/location-provider.vue
index 0dc38d159b..74568b3d77 100644
--- a/packages/x-components/src/components/location-provider.vue
+++ b/packages/x-components/src/components/location-provider.vue
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { defineComponent, PropType, provide, toRef } from 'vue';
   import { FeatureLocation } from '../types';
-  import { useNoElementRender } from '../composables/use-no-element-render';
 
   /**
    * Location Provider component.
@@ -26,7 +25,7 @@
       const featureLocation = toRef(props, 'location');
       provide('location', featureLocation);
 
-      return () => useNoElementRender(slots);
+      return () => slots.default?.()[0] ?? '';
     }
   });
 </script>
diff --git a/packages/x-components/src/components/modals/base-modal.vue b/packages/x-components/src/components/modals/base-modal.vue
index fd58190382..bc8ff84615 100644
--- a/packages/x-components/src/components/modals/base-modal.vue
+++ b/packages/x-components/src/components/modals/base-modal.vue
@@ -31,14 +31,11 @@
 </template>
 
 <script lang="ts">
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  import Vue, { defineComponent, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
-  import { useDebounce } from '../../composables/use-debounce';
+  import { defineComponent, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+  import { useDebounce } from '../../composables';
   import { AnimationProp } from '../../types';
-  import { getTargetElement } from '../../utils/html';
-  import Fade from '../animations/fade.vue';
-  import { NoElement } from '../no-element';
-  import { FOCUSABLE_SELECTORS } from '../../utils/focus';
+  import { getTargetElement, FOCUSABLE_SELECTORS } from '../../utils';
+  import { Fade, NoAnimation } from '../animations';
 
   /**
    * Base component with no XPlugin dependencies that serves as a utility for constructing more
@@ -48,7 +45,6 @@
    */
   export default defineComponent({
     name: 'BaseModal',
-    components: { NoElement },
     props: {
       /** Determines if the modal is open or not. */
       open: {
@@ -72,7 +68,7 @@
       /** Animation to use for opening/closing the modal.This animation only affects the content. */
       animation: {
         type: AnimationProp,
-        default: () => NoElement
+        default: () => NoAnimation
       },
       /**
        * Animation to use for the overlay (backdrop) part of the modal. By default, it uses
@@ -121,7 +117,7 @@
        *
        * @param event - The click event.
        */
-      function emitOverlayClicked(event: MouseEvent) {
+      function emitOverlayClicked(event: Event) {
         emit('click:overlay', event);
       }
 
diff --git a/packages/x-components/src/components/no-element.ts b/packages/x-components/src/components/no-element.ts
deleted file mode 100644
index daaf905801..0000000000
--- a/packages/x-components/src/components/no-element.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { defineComponent } from 'vue';
-import { useNoElementRender } from '../composables/use-no-element-render';
-
-/**
- * The purpose of this Component is to use as default value for props that receive a Component that
- * doesn't render any DOM element. For example the animations with `Transition` component.
- *
- * @internal
- */
-export const NoElement = defineComponent({
-  name: 'NoElement',
-  setup(_, { slots }) {
-    return () => useNoElementRender(slots);
-  }
-});
diff --git a/packages/x-components/src/components/panels/base-header-toggle-panel.vue b/packages/x-components/src/components/panels/base-header-toggle-panel.vue
index add00425f4..99879618e1 100644
--- a/packages/x-components/src/components/panels/base-header-toggle-panel.vue
+++ b/packages/x-components/src/components/panels/base-header-toggle-panel.vue
@@ -23,8 +23,8 @@
 
 <script lang="ts">
   import { defineComponent, ref } from 'vue';
-  import { AnimationProp } from '../../types/animation-prop';
-  import { NoElement } from '../no-element';
+  import { AnimationProp } from '../../types';
+  import { NoAnimation } from '../animations';
   import BaseTogglePanel from './base-toggle-panel.vue';
 
   /**
@@ -37,18 +37,13 @@
     name: 'BaseHeaderTogglePanel',
     components: { BaseTogglePanel },
     props: {
-      /**
-       * Animation component that will be used to animate the base-toggle-panel.
-       *
-       * @public
-       */
-      animation: { type: AnimationProp, default: () => NoElement },
-      /**
-       * Handles if the panel is open by default.
-       *
-       * @public
-       */
-      startCollapsed: { type: Boolean, default: false },
+      /** Animation component that will be used to animate the base-toggle-panel. */
+      animation: {
+        type: AnimationProp,
+        default: () => NoAnimation
+      },
+      /** Handles if the panel is open by default. */
+      startCollapsed: Boolean,
       /** Class inherited by content element. */
       headerClass: String
     },
diff --git a/packages/x-components/src/components/panels/base-id-toggle-panel.vue b/packages/x-components/src/components/panels/base-id-toggle-panel.vue
index 18b089cf34..714e65b4b2 100644
--- a/packages/x-components/src/components/panels/base-id-toggle-panel.vue
+++ b/packages/x-components/src/components/panels/base-id-toggle-panel.vue
@@ -7,9 +7,9 @@
 
 <script lang="ts">
   import { defineComponent, ref, watch } from 'vue';
-  import { NoElement } from '../no-element';
   import { AnimationProp } from '../../types';
   import { use$x } from '../../composables';
+  import { NoAnimation } from '../animations';
   import BaseTogglePanel from './base-toggle-panel.vue';
 
   /**
@@ -26,27 +26,17 @@
    */
   export default defineComponent({
     name: 'BaseIdTogglePanel',
-    components: {
-      BaseTogglePanel
-    },
+    components: { BaseTogglePanel },
     props: {
-      /**
-       * Shows the panel open at the beginning or not, depending on its state.
-       *
-       * @public
-       */
+      /** Shows the panel open at the beginning or not, depending on its state. */
       startOpen: {
         type: Boolean,
         default: true
       },
-      /**
-       * Animation component that will be used to animate the panel content.
-       *
-       * @public
-       */
+      /** Animation component that will be used to animate the panel content. */
       animation: {
         type: AnimationProp,
-        default: () => NoElement
+        default: () => NoAnimation
       },
       /**
        * The id to link with the BaseIdTogglePanelButton.
diff --git a/packages/x-components/src/components/panels/base-tabs-panel.vue b/packages/x-components/src/components/panels/base-tabs-panel.vue
index 11d72b1df6..7b77d4c64a 100644
--- a/packages/x-components/src/components/panels/base-tabs-panel.vue
+++ b/packages/x-components/src/components/panels/base-tabs-panel.vue
@@ -66,8 +66,8 @@
 
 <script lang="ts">
   import { defineComponent, ref } from 'vue';
-  import { NoElement } from '../no-element';
   import { AnimationProp } from '../../types';
+  import { NoAnimation } from '../animations';
 
   /**
    * Base Tabs Panel.
@@ -93,7 +93,7 @@
        */
       contentAnimation: {
         type: AnimationProp,
-        default: () => NoElement
+        default: () => NoAnimation
       },
       /**
        * The tab to be initially selected.
diff --git a/packages/x-components/src/components/result/base-result-image.vue b/packages/x-components/src/components/result/base-result-image.vue
index ea637ad255..bb121107b3 100644
--- a/packages/x-components/src/components/result/base-result-image.vue
+++ b/packages/x-components/src/components/result/base-result-image.vue
@@ -42,8 +42,8 @@
 <script lang="ts">
   import { Result } from '@empathyco/x-types';
   import { computed, DefineComponent, defineComponent, PropType, Ref, ref, watch } from 'vue';
-  import { NoElement } from '../no-element';
   import { animationProp } from '../../utils/options-api';
+  import { NoAnimation } from '../animations';
 
   /**
    * Component to be reused that renders an `<img>`.
@@ -51,40 +51,26 @@
    * @public
    */
   export default defineComponent({
-    components: {
-      NoElement
-    },
+    name: 'BaseResultImage',
     props: {
-      /**
-       * (Required) The {@link @empathyco/x-types#Result} information.
-       *
-       * @public
-       */
+      /** (Required) The {@link @empathyco/x-types#Result} information. */
       result: {
         type: Object as PropType<Result>,
         required: true
       },
-
       /**
        * Animation to use when switching between the placeholder, the loaded image, or the failed
        * image fallback.
-       *
-       * @public
        */
       loadAnimation: {
         type: animationProp,
-        default: () => NoElement
+        default: () => NoAnimation
       },
-
-      /**
-       * Animation to use when switching between the loaded image and the hover image.
-       *
-       * @public
-       */
+      /** Animation to use when switching between the loaded image and the hover image. */
       hoverAnimation: {
-        type: animationProp
+        type: animationProp,
+        default: () => NoAnimation
       },
-
       /**
        * Indicates if the next valid image should be displayed on hover.
        *
@@ -95,7 +81,6 @@
         default: false
       }
     },
-
     setup(props) {
       /**
        * Copy of the images of the result.
diff --git a/packages/x-components/src/composables/__tests__/use-no-element-render.spec.ts b/packages/x-components/src/composables/__tests__/use-no-element-render.spec.ts
deleted file mode 100644
index 412f18fdc1..0000000000
--- a/packages/x-components/src/composables/__tests__/use-no-element-render.spec.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import Vue, { ComponentOptions, defineComponent } from 'vue';
-import { mount, Wrapper } from '@vue/test-utils';
-import { Dictionary } from '@empathyco/x-utils';
-import { useNoElementRender } from '../use-no-element-render';
-import { getDataTestSelector } from '../../__tests__/utils';
-
-const renderUseNoElementRender = ({
-  slots,
-  component
-}: RenderUseNoElementRenderOptions = {}): Wrapper<Vue> => {
-  const wrapper = mount(
-    component ??
-      (defineComponent({
-        setup(props, { slots }) {
-          return () => useNoElementRender(slots);
-        }
-      }) as ComponentOptions<Vue>),
-    {
-      slots
-    }
-  );
-
-  return wrapper;
-};
-
-describe('testing useNoElementRender composable', () => {
-  it('renders as empty if there are no slots', () => {
-    let wrapper = renderUseNoElementRender();
-
-    expect(wrapper.html()).toBe('');
-
-    wrapper = renderUseNoElementRender({
-      slots: {
-        nonDefault: '<div data-test="non-default-slot"></div>'
-      }
-    });
-
-    expect(wrapper.html()).toBe('');
-  });
-
-  it('renders the default slot if there is any', () => {
-    const wrapper = renderUseNoElementRender({
-      slots: {
-        default: '<div data-test="default-slot"></div>',
-        nonDefault: '<div data-test="non-default-slot"></div>'
-      }
-    });
-
-    expect(wrapper.find(getDataTestSelector('default-slot')).exists()).toBe(true);
-  });
-
-  it('also works from the `setup` function', () => {
-    const component = defineComponent({
-      setup(_, { slots }) {
-        return () => useNoElementRender(slots);
-      }
-    });
-
-    let wrapper = renderUseNoElementRender({
-      component
-    });
-
-    expect(wrapper.html()).toBe('');
-
-    wrapper = renderUseNoElementRender({
-      slots: {
-        default: '<div data-test="default-slot"></div>'
-      },
-      component
-    });
-
-    expect(wrapper.find(getDataTestSelector('default-slot')).exists()).toBe(true);
-  });
-});
-
-type RenderUseNoElementRenderOptions = {
-  slots?: Dictionary<string>;
-  component?: ComponentOptions<Vue>;
-};
diff --git a/packages/x-components/src/composables/index.ts b/packages/x-components/src/composables/index.ts
index 755102e32b..951fdacb52 100644
--- a/packages/x-components/src/composables/index.ts
+++ b/packages/x-components/src/composables/index.ts
@@ -3,7 +3,6 @@ export * from './use-$x';
 export * from './use-alias-api';
 export * from './use-debounce';
 export * from './use-getter';
-export * from './use-no-element-render';
 export * from './use-on-display';
 export * from './use-state';
 export * from './use-store';
diff --git a/packages/x-components/src/composables/use-no-element-render.ts b/packages/x-components/src/composables/use-no-element-render.ts
deleted file mode 100644
index 78a1f4ea5b..0000000000
--- a/packages/x-components/src/composables/use-no-element-render.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { h, SetupContext, VNode } from 'vue';
-
-/**
- * Returns a render function that returns the default slot or nothing if it's not defined.
- *
- * @param slots - The slots object from the component.
- * @returns The result of the rendering function to use.
- *
- * @public
- */
-export function useNoElementRender(
-  slots: { [key: string]: VNode[] | undefined } | SetupContext['slots']
-): VNode | VNode[] | string {
-  const defaultSlotContent = typeof slots.default === 'function' ? slots.default() : slots.default;
-
-  return defaultSlotContent ?? '';
-}
diff --git a/packages/x-components/src/x-modules/empathize/components/empathize.vue b/packages/x-components/src/x-modules/empathize/components/empathize.vue
index 4d1b83828f..9d68ec39e3 100644
--- a/packages/x-components/src/x-modules/empathize/components/empathize.vue
+++ b/packages/x-components/src/x-modules/empathize/components/empathize.vue
@@ -17,9 +17,8 @@
 
 <script lang="ts">
   import { defineComponent, PropType, ref } from 'vue';
-  import { NoElement } from '../../../components/no-element';
-  import { useDebounce } from '../../../composables/use-debounce';
-  import { use$x } from '../../../composables/use-$x';
+  import { NoAnimation } from '../../../components';
+  import { use$x, useDebounce } from '../../../composables';
   import { AnimationProp } from '../../../types';
   import { XEvent } from '../../../wiring';
   import { empathizeXModule } from '../x-module';
@@ -34,7 +33,6 @@
   export default defineComponent({
     name: 'Empathize',
     xModule: empathizeXModule.name,
-    components: { NoElement },
     props: {
       /** Array of {@link XEvent} to open the empathize. */
       eventsToOpenEmpathize: {
@@ -54,7 +52,7 @@
       /** Animation component that will be used to animate the empathize. */
       animation: {
         type: AnimationProp,
-        default: () => NoElement
+        default: () => NoAnimation
       }
     },
     setup(props) {
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 6c4c3b879e..2fe31022e6 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
@@ -4,7 +4,6 @@
   import { isArrayEmpty } from '../../../utils/array';
   import { SnippetConfig } from '../../../x-installer/api/api.types';
   import { useXBus } from '../../../composables/use-x-bus';
-  import { useNoElementRender } from '../../../composables';
   import { facetsXModule } from '../x-module';
 
   /**
@@ -70,7 +69,7 @@
        */
       watch(preselectedFilters, emitPreselectedFilters, { immediate: true });
 
-      return () => useNoElementRender(slots);
+      return () => slots.default?.()[0] ?? '';
     }
   });
 </script>
diff --git a/packages/x-components/src/x-modules/scroll/components/scroll-to-top.vue b/packages/x-components/src/x-modules/scroll/components/scroll-to-top.vue
index 623c91ae7e..9afae11466 100644
--- a/packages/x-components/src/x-modules/scroll/components/scroll-to-top.vue
+++ b/packages/x-components/src/x-modules/scroll/components/scroll-to-top.vue
@@ -2,7 +2,6 @@
   <component :is="animation">
     <BaseEventButton
       v-if="isVisible"
-      v-on="$listeners"
       class="x-scroll-to-top x-button"
       data-test="scroll-to-top"
       aria-label="Scroll to top"
@@ -16,12 +15,11 @@
 
 <script lang="ts">
   import { computed, defineComponent } from 'vue';
-  import BaseEventButton from '../../../components/base-event-button.vue';
-  import { NoElement } from '../../../components/no-element';
+  import { NoAnimation, BaseEventButton } from '../../../components';
   import { XEventsTypes } from '../../../wiring';
   import { scrollXModule } from '../x-module';
-  import { AnimationProp } from '../../../types/animation-prop';
-  import { useState } from '../../../composables/use-state';
+  import { AnimationProp } from '../../../types';
+  import { useState } from '../../../composables';
   import { MainScrollId } from './scroll.const';
 
   /**
@@ -42,7 +40,7 @@
        */
       animation: {
         type: AnimationProp,
-        default: () => NoElement
+        default: () => NoAnimation
       },
       /**
        * Threshold in pixels from the top to show the button.

From 5d69d649a694cab4e619eda41397d524938a75e0 Mon Sep 17 00:00:00 2001
From: "Jose A. Cabaneros" <joseacabaneros@gmail.com>
Date: Thu, 1 Aug 2024 18:34:33 +0200
Subject: [PATCH 4/7] fix(hyperscript): fix minor issues with h function

---
 .../src/components/filters/labels/base-price-filter-label.vue | 4 ++--
 .../x-components/src/views/home/display-result-provider.vue   | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/x-components/src/components/filters/labels/base-price-filter-label.vue b/packages/x-components/src/components/filters/labels/base-price-filter-label.vue
index 40de7cfa04..048330fc5e 100644
--- a/packages/x-components/src/components/filters/labels/base-price-filter-label.vue
+++ b/packages/x-components/src/components/filters/labels/base-price-filter-label.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { computed, defineComponent, h, PropType, VNode, VNodeChildren } from 'vue';
+  import { computed, defineComponent, h, PropType, VNode } from 'vue';
   import { RangeValue } from '@empathyco/x-types';
   import BaseCurrency from '../../currency/base-currency.vue';
 
@@ -67,7 +67,7 @@
       const render = (): VNode => {
         const labelParts = label.value.split(/({min}|{max})/);
 
-        const children: VNodeChildren = labelParts.map(partMessage => {
+        const children = labelParts.map(partMessage => {
           if (partMessage === '{min}') {
             return h('BaseCurrency', {
               props: {
diff --git a/packages/x-components/src/views/home/display-result-provider.vue b/packages/x-components/src/views/home/display-result-provider.vue
index 5cd960b15a..a69e424b6e 100644
--- a/packages/x-components/src/views/home/display-result-provider.vue
+++ b/packages/x-components/src/views/home/display-result-provider.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { defineComponent, h, PropType, provide } from 'vue';
+  import { defineComponent, PropType, provide } from 'vue';
   import { TaggingRequest } from '@empathyco/x-types';
 
   export default defineComponent({

From 3bd300a7203db974cd414155d65f7299607a08eb Mon Sep 17 00:00:00 2001
From: "Jose A. Cabaneros" <joseacabaneros@gmail.com>
Date: Thu, 1 Aug 2024 18:46:20 +0200
Subject: [PATCH 5/7] fix(default-slot): fix minor default slots

---
 .../x-components/src/components/result/base-result-image.vue  | 3 +--
 .../src/components/result/result-variants-provider.vue        | 2 +-
 .../extra-params/components/renderless-extra-param.vue        | 2 +-
 .../components/lists/exclude-filters-with-no-results.vue      | 4 ++--
 .../src/x-modules/facets/components/lists/sorted-filters.vue  | 4 ++--
 5 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/x-components/src/components/result/base-result-image.vue b/packages/x-components/src/components/result/base-result-image.vue
index bb121107b3..3cbb0ba43a 100644
--- a/packages/x-components/src/components/result/base-result-image.vue
+++ b/packages/x-components/src/components/result/base-result-image.vue
@@ -68,8 +68,7 @@
       },
       /** Animation to use when switching between the loaded image and the hover image. */
       hoverAnimation: {
-        type: animationProp,
-        default: () => NoAnimation
+        type: animationProp
       },
       /**
        * Indicates if the next valid image should be displayed on hover.
diff --git a/packages/x-components/src/components/result/result-variants-provider.vue b/packages/x-components/src/components/result/result-variants-provider.vue
index 52f602e9df..25bb9d0663 100644
--- a/packages/x-components/src/components/result/result-variants-provider.vue
+++ b/packages/x-components/src/components/result/result-variants-provider.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { defineComponent, ref, computed, watch, provide, Ref, PropType, h } from 'vue';
+  import { defineComponent, ref, computed, watch, provide, Ref, PropType } from 'vue';
   import { Result, ResultVariant } from '@empathyco/x-types';
   import {
     RESULT_WITH_VARIANTS_KEY,
diff --git a/packages/x-components/src/x-modules/extra-params/components/renderless-extra-param.vue b/packages/x-components/src/x-modules/extra-params/components/renderless-extra-param.vue
index 52454c4641..a5c46e5f95 100644
--- a/packages/x-components/src/x-modules/extra-params/components/renderless-extra-param.vue
+++ b/packages/x-components/src/x-modules/extra-params/components/renderless-extra-param.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { computed, defineComponent, h } from 'vue';
+  import { computed, defineComponent } from 'vue';
   import { extraParamsXModule } from '../x-module';
   import { useState } from '../../../composables/use-state';
   import { useXBus } from '../../../composables/use-x-bus';
diff --git a/packages/x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue b/packages/x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue
index ce1f68ca5e..14dcf09b07 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Filter, isBooleanFilter } from '@empathyco/x-types';
-  import { computed, defineComponent, PropType, provide, h } from 'vue';
+  import { computed, defineComponent, PropType, provide } from 'vue';
   import { facetsXModule } from '../../x-module';
   import { useFiltersInjection } from '../../composables/use-filters-injection';
 
@@ -44,7 +44,7 @@
       );
       provide('filters', filtersWithResults);
 
-      return () => slots.default?.({ filters: filtersWithResults.value }) ?? '';
+      return () => slots.default?.({ filters: filtersWithResults.value })[0] ?? '';
     }
   });
 </script>
diff --git a/packages/x-components/src/x-modules/facets/components/lists/sorted-filters.vue b/packages/x-components/src/x-modules/facets/components/lists/sorted-filters.vue
index 78fa8603c1..33a888a9bc 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/sorted-filters.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/sorted-filters.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { BooleanFilter, Filter, isBooleanFilter } from '@empathyco/x-types';
-  import { computed, defineComponent, PropType, provide, h } from 'vue';
+  import { computed, defineComponent, PropType, provide } from 'vue';
   import { isArrayEmpty } from '../../../../utils';
   import { facetsXModule } from '../../x-module';
   import { useFiltersInjection } from '../../composables/use-filters-injection';
@@ -52,7 +52,7 @@
       });
       provide('filters', sortedFilters);
 
-      return () => slots.default?.({ filters: sortedFilters.value }) ?? '';
+      return () => slots.default?.({ filters: sortedFilters.value })[0] ?? '';
     }
   });
 </script>

From f566c8709dd5b22b7e2511cf8fbdb03b8c970640 Mon Sep 17 00:00:00 2001
From: "Jose A. Cabaneros" <joseacabaneros@gmail.com>
Date: Fri, 2 Aug 2024 11:17:59 +0200
Subject: [PATCH 6/7] fix(renderless-extra-params): binding props to the
 default slot as raw

---
 .../extra-params/components/renderless-extra-param.vue          | 2 +-
 .../src/x-modules/scroll/components/main-scroll.vue             | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/x-components/src/x-modules/extra-params/components/renderless-extra-param.vue b/packages/x-components/src/x-modules/extra-params/components/renderless-extra-param.vue
index a5c46e5f95..6395c9950d 100644
--- a/packages/x-components/src/x-modules/extra-params/components/renderless-extra-param.vue
+++ b/packages/x-components/src/x-modules/extra-params/components/renderless-extra-param.vue
@@ -37,7 +37,7 @@
         xBus.emit('UserChangedExtraParams', { [props.name]: newValue });
       }
 
-      return () => slots.default?.({ value, updateValue })[0] ?? '';
+      return () => slots.default?.({ value: value.value, updateValue })[0] ?? '';
     }
   });
 </script>
diff --git a/packages/x-components/src/x-modules/scroll/components/main-scroll.vue b/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
index 745ec33f5a..991d0e899c 100644
--- a/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
+++ b/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
@@ -3,7 +3,6 @@
     computed,
     defineComponent,
     getCurrentInstance,
-    h,
     onBeforeUnmount,
     onMounted,
     provide,

From 78e0077790022787024c575d0dd09554107ca1d6 Mon Sep 17 00:00:00 2001
From: "Jose A. Cabaneros" <joseacabaneros@gmail.com>
Date: Mon, 5 Aug 2024 19:07:45 +0200
Subject: [PATCH 7/7] fix(slot): rename slots for render functions to kebab
 case

---
 .../x-components/src/components/animations/no-animation.vue  | 5 ++---
 .../src/components/modals/base-id-modal-close.vue            | 4 ++--
 .../src/components/modals/base-id-modal-open.vue             | 4 ++--
 .../extra-params/components/renderless-extra-param.vue       | 4 ++--
 4 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/x-components/src/components/animations/no-animation.vue b/packages/x-components/src/components/animations/no-animation.vue
index 4feb2f6477..86034a9501 100644
--- a/packages/x-components/src/components/animations/no-animation.vue
+++ b/packages/x-components/src/components/animations/no-animation.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { defineComponent, h, Comment } from 'vue';
+  import { defineComponent } from 'vue';
 
   /**
    * Component to be used as `default` for animation props together with dynamic components
@@ -8,8 +8,7 @@
   export default defineComponent({
     name: 'NoAnimation',
     setup(_, { slots }) {
-      return () =>
-        slots.default?.()[0] ?? h(Comment, 'NoAnimation component - Without default slot');
+      return () => slots.default?.()[0] ?? '';
     }
   });
 </script>
diff --git a/packages/x-components/src/components/modals/base-id-modal-close.vue b/packages/x-components/src/components/modals/base-id-modal-close.vue
index b6b1bf5ab4..38d7c13954 100644
--- a/packages/x-components/src/components/modals/base-id-modal-close.vue
+++ b/packages/x-components/src/components/modals/base-id-modal-close.vue
@@ -42,11 +42,11 @@
         $x.emit('UserClickedCloseModal', props.modalId, { target: target as HTMLElement });
       }
 
-      /* Hack to render through a render-function, the `closingElement` slot or, in its absence,
+      /* Hack to render through a render-function, the `closing-element` slot or, in its absence,
        the component itself. It is the alternative for the NoElement antipattern. */
       const innerProps = { closeModal };
       return (
-        slots.closingElement ? () => slots.closingElement?.(innerProps)[0] : innerProps
+        slots['closing-element'] ? () => slots['closing-element']?.(innerProps)[0] : innerProps
       ) as typeof innerProps;
     }
   });
diff --git a/packages/x-components/src/components/modals/base-id-modal-open.vue b/packages/x-components/src/components/modals/base-id-modal-open.vue
index dd4ae29d0c..acc11f96a7 100644
--- a/packages/x-components/src/components/modals/base-id-modal-open.vue
+++ b/packages/x-components/src/components/modals/base-id-modal-open.vue
@@ -41,11 +41,11 @@
         $x.emit('UserClickedOpenModal', props.modalId, { target: target as HTMLElement });
       }
 
-      /* Hack to render through a render-function, the `openingElement` slot or, in its absence,
+      /* Hack to render through a render-function, the `opening-element` slot or, in its absence,
        the component itself. It is the alternative for the NoElement antipattern. */
       const innerProps = { openModal };
       return (
-        slots.openingElement ? () => slots.openingElement?.(innerProps)[0] : innerProps
+        slots['opening-element'] ? () => slots['opening-element']?.(innerProps)[0] : innerProps
       ) as typeof innerProps;
     }
   });
diff --git a/packages/x-components/src/x-modules/extra-params/components/renderless-extra-param.vue b/packages/x-components/src/x-modules/extra-params/components/renderless-extra-param.vue
index 6395c9950d..e298f8a0f0 100644
--- a/packages/x-components/src/x-modules/extra-params/components/renderless-extra-param.vue
+++ b/packages/x-components/src/x-modules/extra-params/components/renderless-extra-param.vue
@@ -26,7 +26,7 @@
       const stateParams = useState('extraParams', ['params']).params;
 
       /** It returns the value of the extra param from the store. */
-      const value = computed(() => stateParams.value[props.name]);
+      const extraParam = computed(() => stateParams.value[props.name]);
 
       /**
        * It sets the new value to the store.
@@ -37,7 +37,7 @@
         xBus.emit('UserChangedExtraParams', { [props.name]: newValue });
       }
 
-      return () => slots.default?.({ value: value.value, updateValue })[0] ?? '';
+      return () => slots.default?.({ value: extraParam.value, updateValue })[0] ?? '';
     }
   });
 </script>