From 9a84e2170e8a08808d1887b44cb4716c72ffe2f0 Mon Sep 17 00:00:00 2001
From: Andrea Delgado <114981520+andreadlgdo@users.noreply.github.com>
Date: Mon, 8 Jul 2024 12:04:16 +0200
Subject: [PATCH 1/6] feat: migrate url-handler

---
 .../x-modules/url/components/url-handler.vue  | 666 +++++++++---------
 .../src/x-modules/url/x-module.ts             |   3 +
 2 files changed, 339 insertions(+), 330 deletions(-)

diff --git a/packages/x-components/src/x-modules/url/components/url-handler.vue b/packages/x-components/src/x-modules/url/components/url-handler.vue
index 650bdcf666..9bf259c7cb 100644
--- a/packages/x-components/src/x-modules/url/components/url-handler.vue
+++ b/packages/x-components/src/x-modules/url/components/url-handler.vue
@@ -4,12 +4,8 @@
 
 <script lang="ts">
   import { Dictionary, objectFilter } from '@empathyco/x-utils';
-  import Vue from 'vue';
+  import { computed, defineComponent, inject, onMounted, ref } from 'vue';
   import GlobalEvents from 'vue-global-events';
-  import { Component, Inject } from 'vue-property-decorator';
-  import { State } from '../../../components';
-  import { XOn } from '../../../components/decorators/bus.decorators';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
   import { FeatureLocation } from '../../../types/origin';
   import { UrlParams } from '../../../types/url-params';
   import { isArrayEmpty } from '../../../utils/array';
@@ -18,6 +14,8 @@
   import { initialUrlState } from '../store/initial-state';
   import { UrlParamValue } from '../store/types';
   import { urlXModule } from '../x-module';
+  import { use$x } from '../../../composables/use-$x';
+  import { useState } from '../../../composables/use-state';
 
   interface ParsedUrlParams {
     all: UrlParams;
@@ -31,354 +29,362 @@
    *
    * @public
    */
-  @Component({
+  export default defineComponent({
+    name: 'UrlHandler',
     components: {
       GlobalEvents
     },
-    mixins: [xComponentMixin(urlXModule)]
-  })
-  export default class UrlHandler extends Vue {
-    /**
-     * The {@link SnippetConfig} provided by an ancestor.
-     *
-     * @internal
-     */
-    @Inject({ default: undefined })
-    protected snippetConfig?: SnippetConfig;
-
-    /**
-     * Flag to know if the params were already loaded from the URL.
-     *
-     * @internal
-     */
-    protected urlLoaded = false;
-
-    /**
-     * The page URL. It is used to compare against the current URL to check navigation state.
-     *
-     * @internal
-     */
-    protected url?: URL;
-
-    /**
-     * Flag to know if the page has been persisted by the browser's back-forward cache.
-     *
-     * @internal
-     */
-    protected isPagePersisted = false;
-
-    /**
-     * Computed to know which params we must get from URL. It gets the params names from the initial
-     * state, to get all default params names, and also from the `$attrs` to get the extra params
-     * names to take into account.
-     *
-     * @returns An array with the name of the params.
-     *
-     * @internal
-     */
-    protected get managedParamsNames(): string[] {
-      return Object.keys({ ...initialUrlState, ...this.$attrs });
-    }
+    xModule: urlXModule.name,
+    setup: function (props, { attrs }) {
+      const $x = use$x();
+
+      const initialExtraParams: Dictionary<unknown> = useState('url', ['initialExtraParams']);
+
+      /**
+       * The {@link SnippetConfig} provided by an ancestor.
+       *
+       * @internal
+       */
+      const snippetConfig = inject<SnippetConfig | undefined>('snippetConfig');
+
+      /**
+       * Flag to know if the params were already loaded from the URL.
+       *
+       * @internal
+       */
+      const urlLoaded = ref(false);
+
+      /**
+       * The page URL. It is used to compare against the current URL to check navigation state.
+       *
+       * @internal
+       */
+      const url = ref<URL | undefined>(undefined);
+
+      /**
+       * Flag to know if the page has been persisted by the browser's back-forward cache.
+       *
+       * @internal
+       */
+      const isPagePersisted = ref(false);
+
+      /**
+       * Computed to know which params we must get from URL. It gets the params names from the initial
+       * state, to get all default params names, and also from the `$attrs` to get the extra params
+       * names to take into account.
+       *
+       * @returns An array with the name of the params.
+       *
+       * @internal
+       */
+      const managedParamsNames = computed(() => {
+        return Object.keys({ ...initialUrlState, ...attrs });
+      });
 
-    @State('url', 'initialExtraParams')
-    public initialExtraParams!: Dictionary<unknown>;
-
-    /**
-     * Returns the mapping of the param keys used in the URL is configured through $attrs. This way
-     * we can support any param and extra param, no matters its name.
-     *
-     * @param paramName - The param name to get the Url key.
-     * @returns The key used in the URL for the `paramName` passed.
-     *
-     * @internal
-     */
-    protected getUrlKey(paramName: string): string {
-      return this.$attrs[paramName] ?? paramName;
-    }
+      /**
+       * Returns the mapping of the param keys used in the URL is configured through $attrs. This way
+       * we can support any param and extra param, no matters its name.
+       *
+       * @param paramName - The param name to get the Url key.
+       * @returns The key used in the URL for the `paramName` passed.
+       *
+       * @internal
+       */
+      const getUrlKey = (paramName: string): string => {
+        const paramValue = attrs[paramName];
+        return typeof paramValue === 'string' ? paramValue : paramName;
+      };
 
-    /**
-     * To emit the Url events just when the URL is load, and before the components mounted events
-     * and state changes, we do it in the created of this component.
-     */
-    created(): void {
-      this.emitEvents();
-    }
+      /**
+       * Deletes all the parameters in the passed URL.
+       *
+       * @param url - The URL to remove parameters from.
+       * @internal
+       */
+      const deleteUrlParameters = (url: URL): void => {
+        managedParamsNames.value.forEach(paramName =>
+          url.searchParams.delete(getUrlKey(paramName))
+        );
+      };
 
-    /**
-     * Updates the browser URL with the new {@link UrlParams} using the history `pushState` method.
-     *
-     * @param newUrlParams - The new params to update browser URL.
-     */
-    @XOn('PushableUrlStateUpdated')
-    updateUrlWithPush(newUrlParams: UrlParams): void {
-      this.updateUrl(newUrlParams, window.history.pushState.bind(window.history));
-    }
+      /**
+       * Sorts the params in a tuple array [key,value] to generate always the same URL with the params
+       * in the same order.
+       *
+       * @param urlParams - The {@link UrlParams} to sort.
+       * @returns An array of tuples with the key-value of each paramter, sorted by key.
+       * @internal
+       */
+      const sortParams = (urlParams: UrlParams): Array<[string, unknown]> => {
+        return Object.entries(urlParams).sort(([param1], [param2]) => {
+          return param1 < param2 ? -1 : 1;
+        });
+      };
 
-    /**
-     * Updates the browser URL with the new {@link UrlParams} using the history `replaceState`
-     * method.
-     *
-     * @param newUrlParams - The new params to update browser URL.
-     */
-    @XOn('ReplaceableUrlStateUpdated')
-    updateUrlWithReplace(newUrlParams: UrlParams): void {
-      this.updateUrl(newUrlParams, window.history.replaceState.bind(window.history));
-    }
+      /**
+       * Set all the provided parameters to the url with the mapped key.
+       *
+       * @param url - The current URL.
+       * @param urlParams - The list of parameters to add.
+       * @remarks The params are filtered because there maybe received extra params which will not be
+       * managed by URL. This is defined by the `managedParamsNames` computed. Also, the parameters
+       * are sorted Alphabetically to produce always the same URL with the same parameters.This is
+       * important for SEO purposes.
+       *
+       * @internal
+       */
+      const setUrlParameters = (url: URL, urlParams: UrlParams): void => {
+        // Only when there is a query the rest of the parameters are valid.
+        if (!urlParams.query) {
+          return;
+        }
+        const filteredParams = objectFilter(urlParams, paramName =>
+          managedParamsNames.value.includes(paramName as string)
+        );
+        const sortedParameters = sortParams(filteredParams);
+        sortedParameters.forEach(([paramName, paramValue]) => {
+          const urlParamKey = getUrlKey(paramName);
+          if (Array.isArray(paramValue)) {
+            paramValue.forEach(value => {
+              url.searchParams.append(urlParamKey, String(value));
+            });
+          } else {
+            url.searchParams.set(urlParamKey, String(paramValue));
+          }
+        });
+      };
 
-    /**
-     * Handler of the
-     * [pageshow](https://developer.mozilla.org/en-US/docs/Web/API/Window/pageshow_event)
-     * event.
-     *
-     * @remarks The pageshow event is listened to check if the browser has performed a navigation
-     * using the back-forward cache. This information is available in the
-     * PageTransitionEvent.persisted property.
-     *
-     * @param event - The page transition event.
-     * @internal
-     */
-    protected onPageShow(event: PageTransitionEvent): void {
-      this.isPagePersisted = event.persisted;
-      if (event.persisted) {
-        // The internal url is reset due to the back-forward cache storing the previous value which
-        // is no longer valid.
-        this.url = undefined;
-      }
-    }
+      /**
+       * Updates the browser URL with the passed `newUrlParams` and using the browser history method
+       * passed as `historyMethod`. It only updates the browser history if the new URL is different
+       * from the current.
+       *
+       * @param newUrlParams - The new params to add to the browser URL.
+       * @param historyMethod - The browser history method used to add the new URL.
+       *
+       * @internal
+       */
+      const updateUrl = (
+        newUrlParams: UrlParams,
+        historyMethod: History['pushState'] | History['replaceState']
+      ): void => {
+        if (urlLoaded.value) {
+          const url = new URL(window.location.href);
+          deleteUrlParameters(url);
+          setUrlParameters(url, newUrlParams);
+
+          url.href = url.href.replace(/\+/g, '%20');
+
+          if (url.href !== window.location.href) {
+            historyMethod({ ...window.history.state }, document.title, url.href);
+          }
+        }
+      };
 
-    /**
-     * Emits the {@link UrlXEvents.ParamsLoadedFromUrl} XEvent,
-     * the {@link UrlXEvents.ExtraParamsLoadedFromUrl} XEvent and, if there is query, also emits
-     * the {@link XEventsTypes.UserOpenXProgrammatically}.
-     *
-     * @internal
-     */
-    protected emitEvents(): void {
-      const { all, extra } = this.parseUrlParams();
-      const metadata = this.createWireMetadata();
-      this.$x.emit('ParamsLoadedFromUrl', all, metadata);
-      this.$x.emit('ExtraParamsLoadedFromUrl', extra, metadata);
-      // TODO: Move this logic from here.
-      if (all.query) {
-        this.$x.emit('UserOpenXProgrammatically', undefined, metadata);
-      }
-      this.urlLoaded = true;
-    }
+      /**
+       * Updates the browser URL with the new {@link UrlParams} using the history `pushState` method.
+       *
+       * @param newUrlParams - The new params to update browser URL.
+       */
+      $x.on('PushableUrlStateUpdated', false).subscribe((newUrlParams: UrlParams) => {
+        updateUrl(newUrlParams, window.history.pushState.bind(window.history));
+      });
 
-    /**
-     * Creates the wire metadata to include in every emitted {@link XEvent}.
-     *
-     * @returns The {@link WireMetadata}.
-     * @internal
-     */
-    protected createWireMetadata(): Pick<WireMetadata, 'feature' | 'location'> {
-      return {
-        feature: 'url',
-        location: this.detectLocation()
-      };
-    }
+      /**
+       * Updates the browser URL with the new {@link UrlParams} using the history `replaceState`
+       * method.
+       *
+       * @param newUrlParams - The new params to update browser URL.
+       */
+      $x.on('ReplaceableUrlStateUpdated', false).subscribe((newUrlParams: UrlParams) => {
+        updateUrl(newUrlParams, window.history.replaceState.bind(window.history));
+      });
 
-    /**
-     * Detects the {@link FeatureLocation} used to build the
-     * {@link QueryOriginInit} data.
-     *
-     * @returns The {@link FeatureLocation}.
-     * @internal
-     */
-    protected detectLocation(): FeatureLocation {
-      const currentUrl = new URL(window.location.href);
-      const previousUrl = this.url;
-      this.url = currentUrl;
-
-      const isInternalNavigation =
-        previousUrl?.search !== currentUrl.search && previousUrl?.pathname === currentUrl.pathname;
-      if (isInternalNavigation) {
-        return 'url_history';
-      }
-
-      if (this.isNavigatingFromPdp()) {
-        return 'url_history_pdp';
-      }
-
-      return 'external';
-    }
+      /**
+       * Handler of the
+       * [pageshow](https://developer.mozilla.org/en-US/docs/Web/API/Window/pageshow_event)
+       * event.
+       *
+       * @remarks The pageshow event is listened to check if the browser has performed a navigation
+       * using the back-forward cache. This information is available in the
+       * PageTransitionEvent.persisted property.
+       *
+       * @param event - The page transition event.
+       * @internal
+       */
+      const onPageShow = (event: PageTransitionEvent) => {
+        isPagePersisted.value = event.persisted;
+        if (event.persisted) {
+          // The internal url is reset due to the back-forward cache storing the previous value which
+          // is no longer valid.
+          url.value = undefined;
+        }
+      };
 
-    /**
-     * Check if the navigation is from a product page.
-     *
-     * @remarks Due to Safari 14 not supporting the new and standard PerformanceNavigationTiming
-     * API, we are falling back to the deprecated one, PerformanceNavigation. We also fallback to
-     * this API whenever we get a navigationType equal to reload, because Safari has a bug that the
-     * navigationType is permanently set to reload after you have reload the page and it never
-     * resets. As some browsers have a back-forward cache implemented, we also take into account if
-     * the page is persisted.
-     *
-     * @returns True if the navigation is from a product page, false otherwise.
-     * @internal
-     */
-    protected isNavigatingFromPdp(): boolean {
-      const isPagePersisted = this.isPagePersisted;
-      const navigationEntries = window.performance.getEntriesByType('navigation');
-      const navigationType = (navigationEntries[0] as PerformanceNavigationTiming)?.type;
-      const useFallbackStrategy =
-        window.performance.navigation &&
-        (isArrayEmpty(navigationEntries) || navigationType === 'reload');
-
-      // Reset internal isPagePersisted property value
-      this.isPagePersisted = false;
-
-      if (useFallbackStrategy) {
-        const {
-          type: fallbackNavigationType,
-          TYPE_BACK_FORWARD,
-          TYPE_NAVIGATE
-        } = window.performance.navigation;
-        const isNavigatingInSpa =
-          !!this.snippetConfig?.isSpa && fallbackNavigationType === TYPE_NAVIGATE;
-        return fallbackNavigationType === TYPE_BACK_FORWARD || isNavigatingInSpa || isPagePersisted;
-      } else {
-        const isNavigatingInSpa = !!this.snippetConfig?.isSpa && navigationType === 'navigate';
-        return navigationType === 'back_forward' || isNavigatingInSpa || isPagePersisted;
-      }
-    }
+      /**
+       * Returns the URL param value parsed depending on its type in the initial store state. As we
+       * can not know what type can have an extra param, all extra params are parsed as strings. We
+       * know if it is an extra param because it is not in the initial state.
+       *
+       * @param name - The name of the param in {@link UrlParams}.
+       * @param value - The `URLSearchParams` value as an arry of strings.
+       * @returns The parsed value.
+       *
+       * @internal
+       */
+      const parseUrlParam = (name: string, value: string[]): UrlParamValue => {
+        switch (typeof initialUrlState[name]) {
+          case 'number':
+            return Number(value[0]);
+          case 'boolean':
+            return value[0].toLowerCase() === 'true';
+          case 'string':
+            return value[0];
+          default:
+            // array
+            return value;
+        }
+      };
 
-    /**
-     * Gets the {@link UrlParams} from the URL, including only the params defined by `paramsNames`.
-     *
-     * @returns ParsedUrlParams obtained from URL.
-     * @internal
-     */
-    protected parseUrlParams(): ParsedUrlParams {
-      const urlSearchParams = new URL(window.location.href).searchParams;
-      return this.managedParamsNames.reduce<ParsedUrlParams>(
-        (params, name) => {
-          const urlKey = this.getUrlKey(name);
-          if (urlSearchParams.has(urlKey)) {
-            if (name in initialUrlState) {
-              const urlValue = urlSearchParams.getAll(urlKey);
-              params.all[name] = this.parseUrlParam(name, urlValue);
-            } else {
-              params.all[name] = params.extra[name] = urlSearchParams.get(urlKey);
+      /**
+       * Gets the {@link UrlParams} from the URL, including only the params defined by `paramsNames`.
+       *
+       * @returns ParsedUrlParams obtained from URL.
+       * @internal
+       */
+      const parseUrlParams = (): ParsedUrlParams => {
+        const urlSearchParams = new URL(window.location.href).searchParams;
+        return managedParamsNames.value.reduce<ParsedUrlParams>(
+          (params, name) => {
+            const urlKey = getUrlKey(name);
+            if (urlSearchParams.has(urlKey)) {
+              if (name in initialUrlState) {
+                const urlValue = urlSearchParams.getAll(urlKey);
+                params.all[name] = parseUrlParam(name, urlValue);
+              } else {
+                params.all[name] = params.extra[name] = urlSearchParams.get(urlKey);
+              }
             }
-          }
-          return params;
-        },
-        { all: { ...initialUrlState }, extra: { ...this.initialExtraParams } }
-      );
-    }
+            return params;
+          },
+          { all: { ...initialUrlState }, extra: { ...initialExtraParams } }
+        );
+      };
 
-    /**
-     * Updates the browser URL with the passed `newUrlParams` and using the browser history method
-     * passed as `historyMethod`. It only updates the browser history if the new URL is different
-     * from the current.
-     *
-     * @param newUrlParams - The new params to add to the browser URL.
-     * @param historyMethod - The browser history method used to add the new URL.
-     *
-     * @internal
-     */
-    protected updateUrl(
-      newUrlParams: UrlParams,
-      historyMethod: History['pushState'] | History['replaceState']
-    ): void {
-      if (this.urlLoaded) {
-        const url = new URL(window.location.href);
-        this.deleteUrlParameters(url);
-        this.setUrlParameters(url, newUrlParams);
-
-        url.href = url.href.replace(/\+/g, '%20');
-
-        if (url.href !== window.location.href) {
-          historyMethod({ ...window.history.state }, document.title, url.href);
+      /**
+       * Check if the navigation is from a product page.
+       *
+       * @remarks Due to Safari 14 not supporting the new and standard PerformanceNavigationTiming
+       * API, we are falling back to the deprecated one, PerformanceNavigation. We also fallback to
+       * this API whenever we get a navigationType equal to reload, because Safari has a bug that the
+       * navigationType is permanently set to reload after you have reload the page and it never
+       * resets. As some browsers have a back-forward cache implemented, we also take into account if
+       * the page is persisted.
+       *
+       * @returns True if the navigation is from a product page, false otherwise.
+       * @internal
+       */
+      const isNavigatingFromPdp = (): boolean => {
+        //const isPagePersisted = isPagePersisted.value;
+        const navigationEntries = window.performance.getEntriesByType('navigation');
+        const navigationType = (navigationEntries[0] as PerformanceNavigationTiming)?.type;
+        const useFallbackStrategy =
+          window.performance.navigation &&
+          (isArrayEmpty(navigationEntries) || navigationType === 'reload');
+
+        // Reset internal isPagePersisted property value
+        isPagePersisted.value = false;
+
+        if (useFallbackStrategy) {
+          const {
+            type: fallbackNavigationType,
+            TYPE_BACK_FORWARD,
+            TYPE_NAVIGATE
+          } = window.performance.navigation;
+          const isNavigatingInSpa =
+            !!snippetConfig?.isSpa && fallbackNavigationType === TYPE_NAVIGATE;
+          return (
+            fallbackNavigationType === TYPE_BACK_FORWARD ||
+            isNavigatingInSpa ||
+            isPagePersisted.value
+          );
+        } else {
+          const isNavigatingInSpa = !!snippetConfig?.isSpa && navigationType === 'navigate';
+          return navigationType === 'back_forward' || isNavigatingInSpa || isPagePersisted.value;
         }
-        this.url = url;
-      }
-    }
+      };
 
-    /**
-     * Deletes all the parameters in the passed URL.
-     *
-     * @param url - The URL to remove parameters from.
-     * @internal
-     */
-    protected deleteUrlParameters(url: URL): void {
-      this.managedParamsNames.forEach(paramName =>
-        url.searchParams.delete(this.getUrlKey(paramName))
-      );
-    }
+      /**
+       * Detects the {@link FeatureLocation} used to build the
+       * {@link QueryOriginInit} data.
+       *
+       * @returns The {@link FeatureLocation}.
+       * @internal
+       */
+      const detectLocation = (): FeatureLocation => {
+        const currentUrl = new URL(window.location.href);
+        const previousUrl = url.value;
+        url.value = currentUrl;
+
+        const isInternalNavigation =
+          previousUrl?.search !== currentUrl.search &&
+          previousUrl?.pathname === currentUrl.pathname;
+        if (isInternalNavigation) {
+          return 'url_history';
+        }
 
-    /**
-     * Set all the provided parameters to the url with the mapped key.
-     *
-     * @param url - The current URL.
-     * @param urlParams - The list of parameters to add.
-     * @remarks The params are filtered because there maybe received extra params which will not be
-     * managed by URL. This is defined by the `managedParamsNames` computed. Also, the parameters
-     * are sorted Alphabetically to produce always the same URL with the same parameters.This is
-     * important for SEO purposes.
-     *
-     * @internal
-     */
-    protected setUrlParameters(url: URL, urlParams: UrlParams): void {
-      // Only when there is a query the rest of the parameters are valid.
-      if (!urlParams.query) {
-        return;
-      }
-      const filteredParams = objectFilter(urlParams, paramName =>
-        this.managedParamsNames.includes(paramName as string)
-      );
-      const sortedParameters = this.sortParams(filteredParams);
-      sortedParameters.forEach(([paramName, paramValue]) => {
-        const urlParamKey = this.getUrlKey(paramName);
-        if (Array.isArray(paramValue)) {
-          paramValue.forEach(value => {
-            url.searchParams.append(urlParamKey, String(value));
-          });
-        } else {
-          url.searchParams.set(urlParamKey, String(paramValue));
+        if (isNavigatingFromPdp()) {
+          return 'url_history_pdp';
         }
-      });
-    }
 
-    /**
-     * Sorts the params in a tuple array [key,value] to generate always the same URL with the params
-     * in the same order.
-     *
-     * @param urlParams - The {@link UrlParams} to sort.
-     * @returns An array of tuples with the key-value of each paramter, sorted by key.
-     * @internal
-     */
-    protected sortParams(urlParams: UrlParams): Array<[string, unknown]> {
-      return Object.entries(urlParams).sort(([param1], [param2]) => {
-        return param1 < param2 ? -1 : 1;
+        return 'external';
+      };
+
+      /**
+       * Creates the wire metadata to include in every emitted {@link XEvent}.
+       *
+       * @returns The {@link WireMetadata}.
+       * @internal
+       */
+      const createWireMetadata = (): Pick<WireMetadata, 'feature' | 'location'> => {
+        return {
+          feature: 'url',
+          location: detectLocation()
+        };
+      };
+
+      /**
+       * Emits the {@link UrlXEvents.ParamsLoadedFromUrl} XEvent,
+       * the {@link UrlXEvents.ExtraParamsLoadedFromUrl} XEvent and, if there is query, also emits
+       * the {@link XEventsTypes.UserOpenXProgrammatically}.
+       *
+       * @internal
+       */
+      const emitEvents = () => {
+        const { all, extra } = parseUrlParams();
+        const metadata = createWireMetadata();
+        $x.emit('ParamsLoadedFromUrl', all, metadata);
+        $x.emit('ExtraParamsLoadedFromUrl', extra, metadata);
+        if (all.query) {
+          $x.emit('UserOpenXProgrammatically', undefined, metadata);
+        }
+        urlLoaded.value = true;
+      };
+
+      /**
+       * To emit the Url events just when the URL is load, and before the components mounted events
+       * and state changes, we do it in the created of this component.
+       */
+      onMounted(() => {
+        emitEvents();
       });
-    }
 
-    /**
-     * Returns the URL param value parsed depending on its type in the initial store state. As we
-     * can not know what type can have an extra param, all extra params are parsed as strings. We
-     * know if it is an extra param because it is not in the initial state.
-     *
-     * @param name - The name of the param in {@link UrlParams}.
-     * @param value - The `URLSearchParams` value as an arry of strings.
-     * @returns The parsed value.
-     *
-     * @internal
-     */
-    protected parseUrlParam(name: string, value: string[]): UrlParamValue {
-      switch (typeof initialUrlState[name]) {
-        case 'number':
-          return Number(value[0]);
-        case 'boolean':
-          return value[0].toLowerCase() === 'true';
-        case 'string':
-          return value[0];
-        default:
-          // array
-          return value;
-      }
+      return {
+        onPageShow,
+        emitEvents
+      };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/url/x-module.ts b/packages/x-components/src/x-modules/url/x-module.ts
index fba725a3bd..d3790fa420 100644
--- a/packages/x-components/src/x-modules/url/x-module.ts
+++ b/packages/x-components/src/x-modules/url/x-module.ts
@@ -1,4 +1,5 @@
 import { XModule } from '../x-modules.types';
+import { XPlugin } from '../../plugins/index';
 import { urlEmitters, urlXStoreModule, UrlXStoreModule } from './store';
 import { urlWiring } from './wiring';
 
@@ -21,3 +22,5 @@ export const urlXModule: UrlXModule = {
   storeEmitters: urlEmitters,
   wiring: urlWiring
 };
+
+XPlugin.registerXModule(urlXModule);

From fb231e685899541c606bff79a9758b333bdc650e Mon Sep 17 00:00:00 2001
From: Andrea Delgado <114981520+andreadlgdo@users.noreply.github.com>
Date: Mon, 8 Jul 2024 13:08:38 +0200
Subject: [PATCH 2/6] fix: add url line

---
 .../src/x-modules/url/components/url-handler.vue    | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/x-components/src/x-modules/url/components/url-handler.vue b/packages/x-components/src/x-modules/url/components/url-handler.vue
index 9bf259c7cb..20b3bb41ff 100644
--- a/packages/x-components/src/x-modules/url/components/url-handler.vue
+++ b/packages/x-components/src/x-modules/url/components/url-handler.vue
@@ -169,15 +169,16 @@
         historyMethod: History['pushState'] | History['replaceState']
       ): void => {
         if (urlLoaded.value) {
-          const url = new URL(window.location.href);
-          deleteUrlParameters(url);
-          setUrlParameters(url, newUrlParams);
+          const newUrl = new URL(window.location.href);
+          deleteUrlParameters(newUrl);
+          setUrlParameters(newUrl, newUrlParams);
 
-          url.href = url.href.replace(/\+/g, '%20');
+          newUrl.href = newUrl.href.replace(/\+/g, '%20');
 
-          if (url.href !== window.location.href) {
-            historyMethod({ ...window.history.state }, document.title, url.href);
+          if (newUrl.href !== window.location.href) {
+            historyMethod({ ...window.history.state }, document.title, newUrl.href);
           }
+          url.value = newUrl;
         }
       };
 

From 1114a191789db017cd39169ab9f268b0f3c9136a Mon Sep 17 00:00:00 2001
From: Andrea Delgado <114981520+andreadlgdo@users.noreply.github.com>
Date: Mon, 8 Jul 2024 13:42:30 +0200
Subject: [PATCH 3/6] fix: fix warning

---
 .../x-modules/url/components/url-handler.vue  | 20 +++++--------------
 1 file changed, 5 insertions(+), 15 deletions(-)

diff --git a/packages/x-components/src/x-modules/url/components/url-handler.vue b/packages/x-components/src/x-modules/url/components/url-handler.vue
index 20b3bb41ff..1512f29dfa 100644
--- a/packages/x-components/src/x-modules/url/components/url-handler.vue
+++ b/packages/x-components/src/x-modules/url/components/url-handler.vue
@@ -286,32 +286,22 @@
        * @internal
        */
       const isNavigatingFromPdp = (): boolean => {
-        //const isPagePersisted = isPagePersisted.value;
+        const isPagePersistedValue = isPagePersisted.value;
         const navigationEntries = window.performance.getEntriesByType('navigation');
         const navigationType = (navigationEntries[0] as PerformanceNavigationTiming)?.type;
         const useFallbackStrategy =
-          window.performance.navigation &&
+          !navigationEntries.length &&
           (isArrayEmpty(navigationEntries) || navigationType === 'reload');
 
         // Reset internal isPagePersisted property value
         isPagePersisted.value = false;
 
         if (useFallbackStrategy) {
-          const {
-            type: fallbackNavigationType,
-            TYPE_BACK_FORWARD,
-            TYPE_NAVIGATE
-          } = window.performance.navigation;
-          const isNavigatingInSpa =
-            !!snippetConfig?.isSpa && fallbackNavigationType === TYPE_NAVIGATE;
-          return (
-            fallbackNavigationType === TYPE_BACK_FORWARD ||
-            isNavigatingInSpa ||
-            isPagePersisted.value
-          );
+          const isNavigatingInSpa = !!snippetConfig?.isSpa && navigationType === 'navigate';
+          return navigationType === 'back_forward' || isNavigatingInSpa || isPagePersistedValue;
         } else {
           const isNavigatingInSpa = !!snippetConfig?.isSpa && navigationType === 'navigate';
-          return navigationType === 'back_forward' || isNavigatingInSpa || isPagePersisted.value;
+          return navigationType === 'back_forward' || isNavigatingInSpa || isPagePersistedValue;
         }
       };
 

From 5246addc6ec9e5967d51623b1bae2d0ff79ff071 Mon Sep 17 00:00:00 2001
From: Andrea Delgado <114981520+andreadlgdo@users.noreply.github.com>
Date: Tue, 9 Jul 2024 10:33:05 +0200
Subject: [PATCH 4/6] fix: try to fix test e2e

---
 packages/x-components/tests/e2e/url.feature | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/x-components/tests/e2e/url.feature b/packages/x-components/tests/e2e/url.feature
index 5f4e070add..cf48f5cc97 100644
--- a/packages/x-components/tests/e2e/url.feature
+++ b/packages/x-components/tests/e2e/url.feature
@@ -38,6 +38,7 @@ Feature: Url component
 
   Scenario Outline: 4. Extra params are properly restored when navigating
     Given a URL with query parameter "lego"
+    And   a tracking API with a known response
     Then  search request contains extra parameter "store" with value "<defaultStore>"
     And   url doesn't contain parameter "store" with value "<defaultStore>"
     When  selecting store "<store2>"

From 21a72ad0735fd858e20d7cfcad173b8de72ecc56 Mon Sep 17 00:00:00 2001
From: Andrea Delgado <114981520+andreadlgdo@users.noreply.github.com>
Date: Tue, 9 Jul 2024 13:36:39 +0200
Subject: [PATCH 5/6] fix: remove line of test e2e

---
 packages/x-components/tests/e2e/url.feature | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/x-components/tests/e2e/url.feature b/packages/x-components/tests/e2e/url.feature
index cf48f5cc97..5f4e070add 100644
--- a/packages/x-components/tests/e2e/url.feature
+++ b/packages/x-components/tests/e2e/url.feature
@@ -38,7 +38,6 @@ Feature: Url component
 
   Scenario Outline: 4. Extra params are properly restored when navigating
     Given a URL with query parameter "lego"
-    And   a tracking API with a known response
     Then  search request contains extra parameter "store" with value "<defaultStore>"
     And   url doesn't contain parameter "store" with value "<defaultStore>"
     When  selecting store "<store2>"

From 1380db7bd6a7a68fc377ced2751ef8c009345217 Mon Sep 17 00:00:00 2001
From: Diego Pascual <diegopf@users.noreply.github.com>
Date: Wed, 10 Jul 2024 13:23:28 +0200
Subject: [PATCH 6/6] fix `ExtraParamsLoadedFromUrl` payload

---
 .../x-components/src/x-modules/url/components/url-handler.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/x-components/src/x-modules/url/components/url-handler.vue b/packages/x-components/src/x-modules/url/components/url-handler.vue
index 1512f29dfa..17b7738eb7 100644
--- a/packages/x-components/src/x-modules/url/components/url-handler.vue
+++ b/packages/x-components/src/x-modules/url/components/url-handler.vue
@@ -38,7 +38,7 @@
     setup: function (props, { attrs }) {
       const $x = use$x();
 
-      const initialExtraParams: Dictionary<unknown> = useState('url', ['initialExtraParams']);
+      const initialExtraParams = useState('url', ['initialExtraParams']).initialExtraParams;
 
       /**
        * The {@link SnippetConfig} provided by an ancestor.
@@ -268,7 +268,7 @@
             }
             return params;
           },
-          { all: { ...initialUrlState }, extra: { ...initialExtraParams } }
+          { all: { ...initialUrlState }, extra: { ...initialExtraParams.value } }
         );
       };