refactor: remove useHybridInject (#1439)

Co-authored-by: Laura Martinez Garcia <[email protected]>

packages/x-components/src/components/snippet-callbacks.vue

@@ -4,10 +4,9 @@
 
 <script lang="ts">
   import { map } from '@empathyco/x-utils';
-  import { computed, defineComponent } from 'vue';
+  import { computed, defineComponent, inject } from 'vue';
   import { WireMetadata } from '../wiring';
   import { SnippetConfig, XEventListeners } from '../x-installer/api/api.types';
-  import { useHybridInject } from '../composables';
   import { useXBus } from '../composables/use-x-bus';
   import GlobalXBus from './global-x-bus.vue';
 
@@ -28,7 +27,7 @@
        *
        * @internal
        */
-      const snippetConfig = useHybridInject<SnippetConfig>('snippetConfig');
+      const snippetConfig = inject<SnippetConfig>('snippetConfig');
 
       /**
        * It maps all the callbacks provided by the snippetConfig and adds an emit to each one.

packages/x-components/src/composables/index.ts

@@ -6,5 +6,4 @@ export * from './use-on-display';
 export * from './use-store';
 export * from './use-state';
 export * from './use-getter';
-export * from './use-hybrid-inject';
 export * from './use-alias-api';

packages/x-components/src/composables/use-x-bus.ts

@@ -1,12 +1,11 @@
-import Vue, { getCurrentInstance, isRef, Ref } from 'vue';
+import Vue, { getCurrentInstance, inject, Ref } from 'vue';
 import { XBus } from '@empathyco/x-bus';
 import { bus } from '../plugins/x-bus';
 import { XEvent, XEventPayload, XEventsTypes } from '../wiring/events.types';
 import { WireMetadata } from '../wiring/wiring.types';
 import { getRootXComponent, getXComponentXModuleName } from '../components/x-component.utils';
 import { FeatureLocation } from '../types/origin';
 import { PropsWithType } from '../utils/types';
-import { useHybridInject } from './use-hybrid-inject';
 
 /**
  * Composable which injects the current location,
@@ -16,10 +15,7 @@ import { useHybridInject } from './use-hybrid-inject';
  * @returns An object with the `on` and `emit` functions.
  */
 export function useXBus(): UseXBusAPI {
-  const injectedLocation = useHybridInject<Ref<FeatureLocation> | FeatureLocation>(
-    'location',
-    'none'
-  );
+  const injectedLocation = inject<Ref<FeatureLocation> | FeatureLocation>('location', 'none');
 
   const currentComponent: PrivateExtendedVueComponent | undefined | null =
     getCurrentInstance()?.proxy;
@@ -35,7 +31,10 @@ export function useXBus(): UseXBusAPI {
       payload?: XEventPayload<Event>,
       metadata: Omit<WireMetadata, 'moduleName'> = {}
     ) => {
-      const location = isRef(injectedLocation) ? injectedLocation.value : injectedLocation;
+      const location =
+        typeof injectedLocation === 'object' && 'value' in injectedLocation
+          ? injectedLocation.value
+          : injectedLocation;
 
       bus.emit(event, payload, createWireMetadata(metadata, currentComponent, location));
       currentXComponent?.$emit(event, payload);

packages/x-components/src/views/home/aside.vue

@@ -136,7 +136,7 @@
     Facet,
     SimpleFilter as SimpleFilterModel
   } from '@empathyco/x-types';
-  import { defineComponent } from 'vue';
+  import { defineComponent, inject, Ref } from 'vue';
   import BasePriceFilterLabel from '../../components/filters/labels/base-price-filter-label.vue';
   import EditableNumberPriceRangeFilter from '../../x-modules/facets/components/filters/editable-number-range-filter.vue';
   import ChevronDown from '../../components/icons/chevron-down.vue';
@@ -153,7 +153,6 @@
   import SelectedFilters from '../../x-modules/facets/components/lists/selected-filters.vue';
   import SlicedFilters from '../../x-modules/facets/components/lists/sliced-filters.vue';
   import SortedFilters from '../../x-modules/facets/components/lists/sorted-filters.vue';
-  import { useHybridInject } from '../../composables';
   import { HomeControls } from './types';
   /* eslint-enable max-len */
 
@@ -178,7 +177,7 @@
       SortedFilters
     },
     setup() {
-      const controls = useHybridInject<HomeControls>('controls') as HomeControls;
+      const controls = inject<Ref<HomeControls>>('controls')?.value;
       const editableNumberRangeFilter: EditableNumberRangeFilter = {
         facetId: 'salePrice',
         selected: false,

packages/x-components/src/x-modules/facets/components/preselected-filters.vue

@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { defineComponent, PropType, watch, computed, ref } from 'vue';
+  import { defineComponent, PropType, watch, computed, inject } 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 { useNoElementRender } from '../../../composables';
 
   /**
    * This component emits {@link FacetsXEvents.PreselectedFiltersProvided} when a preselected filter
@@ -37,7 +37,7 @@
        *
        * @internal
        */
-      const snippetConfig = ref(useHybridInject<SnippetConfig>('snippetConfig'));
+      const snippetConfig = inject<SnippetConfig>('snippetConfig');
 
       /**
        * Gets the provided preselected filters prioritizing the {@link SnippetConfig} over the
@@ -47,7 +47,7 @@
        * @internal
        */
       const preselectedFilters = computed<string[]>(() => {
-        return snippetConfig.value?.filters ?? props.filters;
+        return snippetConfig?.filters ?? props.filters;
       });
 
       /**