@empathyco/x-components 5.0.0-alpha.9 → 6.0.0-alpha.2

package/js/x-installer/x-installer/x-installer.js

@@ -1,5 +1,5 @@
 import { isFunction, forEach } from '@empathyco/x-utils';
-import Vue from 'vue';
+import { reactive, createApp } from 'vue';
 import { XPlugin } from '../../plugins/x-plugin.js';
 import { BaseXAPI } from '../api/base-api.js';
 import { bus } from '../../plugins/x-bus.js';
@@ -126,16 +126,17 @@ class XInstaller {
     }
     async init(snippetConfig = this.retrieveSnippetConfig()) {
         if (snippetConfig) {
-            this.snippetConfig = this.normaliseSnippetConfig(snippetConfig);
+            this.snippetConfig = reactive(this.normaliseSnippetConfig(snippetConfig));
+            this.createApp();
             const bus = this.createBus();
             const pluginOptions = this.getPluginOptions();
             const plugin = this.installPlugin(pluginOptions, bus);
-            const extraPlugins = await this.installExtraPlugins(bus);
-            const app = this.createApp(extraPlugins);
+            await this.installExtraPlugins(bus);
             this.api?.setBus(bus);
+            this.app.mount(this.getMountingTarget(this.options.domElement));
             return {
                 api: this.api,
-                app,
+                app: this.app,
                 bus,
                 plugin
             };
@@ -171,21 +172,6 @@ class XInstaller {
     createBus() {
         return this.options.bus ?? bus;
     }
-    /**
-     * This method returns the VueConstructor to use to create the App instance.
-     * It returns the `vue` parameter in the {@link InstallXOptions} or if not provided, then
-     * returns the default Vue.
-     *
-     * @remarks The purpose of this option is mainly the testing. In a test we can use this option
-     * to pass the local vue instance created by `createLocalVue` method.
-     *
-     * @returns VueConstructor - The vue constructor to create the App instance.
-     *
-     * @internal
-     */
-    getVue() {
-        return this.options.vue ?? Vue;
-    }
     /**
      * Creates and install the Vue Plugin. If `plugin` parameter is passed in the
      * {@link InstallXOptions}, then it is used. If not, then a new instance of {@link XPlugin} is
@@ -195,50 +181,36 @@ class XInstaller {
      * of the plugin.
      * @param bus - The {@link @empathyco/x-bus#XBus} to be used to create the XPlugin.
      *
-     * @returns PluginObject<XPluginOption> - The plugin instance.
+     * @returns Plugin<XPluginOption> - The plugin instance.
      * @internal
      */
     installPlugin(pluginOptions, bus) {
         const plugin = this.options.plugin ?? new XPlugin(bus);
-        const vue = this.getVue();
-        vue.use(plugin, pluginOptions);
+        this.app.use(plugin, pluginOptions);
         return plugin;
     }
     /**
-     * Install more plugins to Vue defined by the user.
+     * Runs the installExtraPlugins callback defined in the {@link InstallXOptions}
+     * to allow the user to install more plugins to the App.
      *
      * @param bus - The events bus used in the application.
-     * @returns The arguments from the plugins installation to be used in Vue's constructor.
+     * @returns An empty promise.
      * @internal
      */
     installExtraPlugins(bus) {
-        const vue = this.getVue();
-        return Promise.resolve(this.options.installExtraPlugins?.({ vue, snippet: this.snippetConfig, bus }));
+        return Promise.resolve(this.options.installExtraPlugins?.({ app: this.app, snippet: this.snippetConfig, bus }));
     }
     /**
-     * In the case that the `app` parameter is present in the {@link InstallXOptions}, then a new Vue
-     * application is created using that app.
-     *
-     * @param extraPlugins - Vue plugins initialisation data.
-     * @returns The Created Vue application or undefined if not created.
+     * In the case that the `rootComponent` parameter is present in the {@link InstallXOptions},
+     * then a new Vue application is created using that component as root.
      *
      * @internal
      */
-    createApp(extraPlugins) {
-        if (this.options.app !== undefined) {
-            const vue = this.getVue();
-            const app = new vue({
-                ...extraPlugins,
-                ...this.options.vueOptions,
-                provide: {
-                    snippetConfig: (this.snippetConfig = vue.observable(this.snippetConfig))
-                },
-                store: this.options.store,
-                el: this.getMountingTarget(this.options.domElement),
-                render: h => h(this.options.app)
-            });
-            this.options.onCreateApp?.(app);
-            return app;
+    createApp() {
+        if (this.options.rootComponent !== undefined) {
+            this.app = createApp(this.options.rootComponent);
+            this.app.provide('snippetConfig', this.snippetConfig);
+            this.options.onCreateApp?.(this.app);
         }
     }
     /**
@@ -293,7 +265,7 @@ class XInstaller {
             return;
         }
         forEach(this.normaliseSnippetConfig(newSnippetConfig), (name, value) => {
-            this.getVue().set(this.snippetConfig, name, value);
+            this.snippetConfig[name] = value;
         });
     }
     /**

package/js/x-installer/x-installer/x-installer.js.map

@@ -1 +1 @@
-{"version":3,"file":"x-installer.js","sources":["../../../../src/x-installer/x-installer/x-installer.ts"],"sourcesContent":["import { forEach, isFunction } from '@empathyco/x-utils';\nimport Vue, { PluginObject, VueConstructor } from 'vue';\nimport { XBus } from '@empathyco/x-bus';\nimport { XPlugin } from '../../plugins/x-plugin';\nimport { XPluginOptions } from '../../plugins/x-plugin.types';\nimport { NormalisedSnippetConfig, SnippetConfig, XAPI } from '../api/api.types';\nimport { BaseXAPI } from '../api/base-api';\nimport { WireMetadata, XEventsTypes } from '../../wiring/index';\nimport { bus } from '../../plugins/x-bus';\nimport { InitWrapper, InstallXOptions, VueConstructorPartialArgument } from './types';\n\ndeclare global {\n  interface Window {\n    InterfaceX?: XAPI;\n    initX?: (() => SnippetConfig) | SnippetConfig;\n  }\n}\n\n/**\n * The purpose of this class is to offer a quick way to initialize the XComponents in a setup\n * project. It allows to receive all the options in {@link InstallXOptions} which is an extension\n * of {@link XPluginOptions} with all the options for the plugin and some options more.\n *\n * This class does multiple things:\n * 1. Install the {@link XPlugin} with the {@link XPluginOptions}.\n * 2. Creates the public {@link XAPI} and add it to global window.\n * 3. Creates the Vue Application for the customer project.\n *\n * The steps 2 & 3 are optional and depends on the options passed in {@link InstallXOptions}.\n *\n * @example The way to use this class is the next:\n *    1. Create the installer passing in the {@link InstallXOptions}. This only save the options:\n *\n * ```\n *        const installer = new XInstaller(installXOptions)\n * ```\n *\n *    2. Initialize passing the {@link SnippetConfig}. This installs the plugin and creates the App.\n *       There are 3 different ways to do this:\n *\n *        2.1 Using the created installer:\n *\n * ```\n *            installer.init(snippetConfig)\n * ```\n *\n *        2.2 If the API option is enabled (`createAPI` is `true` in {@link InstallXOptions}, or\n *            is not present as the default value is `true`) then this init step can be done with\n *            the Public API:\n *\n * ```\n *            window.InterfaceX.init(snippetConfig)\n * ```\n *\n *        2.3 When the script of the project build is loaded it searches for a global `initX`\n *            variable that the customer must have in their website. This variable can be a\n *            function that returns the {@link SnippetConfig} or an object that contains the\n *            {@link SnippetConfig} itself:\n *\n * ```\n *            window.initX = function() {\n *                 return {\n *                   instance,\n *                   env,\n *                   scope,\n *                   lang,\n *                   uiLang,\n *                   currency,\n *                   consent,\n *                   documentDirection\n *                 };\n *              };\n * ```\n *\n * ```\n *            window.initX = {\n *                 instance,\n *                 env,\n *                 scope,\n *                 lang,\n *                 uiLang,\n *                 currency,\n *                 consent,\n *                 documentDirection\n *               };\n * ```\n *\n * @public\n */\nexport class XInstaller {\n  private api?: XAPI;\n\n  /**\n   * The configuration coming from the snippet {@link SnippetConfig}.\n   *\n   * @internal\n   */\n  protected snippetConfig?: NormalisedSnippetConfig;\n\n  /**\n   * Receives the {@link InstallXOptions} and merges it with the default fallback options. Also\n   * creates the public {@link XAPI}.\n   *\n   * @remarks Auto initializes the Vue application if window.initX is defined as a function or\n   * object specifying the {@link SnippetConfig | snippet config}.\n   *\n   *\n   * @param options - The {@link InstallXOptions}.\n   *\n   * @public\n   */\n  public constructor(protected readonly options: InstallXOptions) {\n    this.createAPI();\n  }\n\n  /**\n   * Creates the public {@link XAPI} using the `api` option from {@link InstallXOptions}. If this\n   * `api` option is not passed, then a default {@link BaseXAPI} is created. To disable the API\n   * creation the value `false` must be passed in the `api` option.\n   *\n   * @internal\n   */\n  protected createAPI(): void {\n    const { api } = this.options;\n    if (api !== false) {\n      this.api = api ?? new BaseXAPI();\n      this.api.setInitCallback(this.init.bind(this));\n      this.api.setSnippetConfigCallback(this.updateSnippetConfig.bind(this));\n      this.api.setSnippetConfigGetter(this.getSnippetConfig.bind(this));\n      window.InterfaceX = this.api;\n    }\n  }\n\n  /**\n   * Retrieves the {@link SnippetConfig | snippet config} it is defined in the window.initX.\n   *\n   * @returns The snippet config if it is defined or undefined otherwise.\n   *\n   * @internal\n   */\n  private retrieveSnippetConfig(): SnippetConfig | undefined {\n    if (typeof window.initX === 'function') {\n      return window.initX();\n    } else if (typeof window.initX === 'object') {\n      return window.initX;\n    }\n  }\n\n  /**\n   * Receives the {@link SnippetConfig | snippet config} or retrieves it from window.initX and\n   * installs the plugin and initializes the Vue application.\n   *\n   * @param snippetConfig - The {@link SnippetConfig} that receives from snippet integration.\n   *\n   * @returns If {@link SnippetConfig | snippet config} is passed or configured in window.initX,\n   * returns an object with the {@link XAPI}, the {@link @empathyco/x-bus#XBus}, the {@link XPlugin}\n   * and the Vue App used in the application. Else, a rejected promise is returned.\n   *\n   * @public\n   */\n  init(snippetConfig: SnippetConfig): Promise<InitWrapper>;\n  init(): Promise<InitWrapper | void>;\n  async init(snippetConfig = this.retrieveSnippetConfig()): Promise<InitWrapper | void> {\n    if (snippetConfig) {\n      this.snippetConfig = this.normaliseSnippetConfig(snippetConfig);\n      const bus = this.createBus();\n      const pluginOptions = this.getPluginOptions();\n      const plugin = this.installPlugin(pluginOptions, bus);\n      const extraPlugins = await this.installExtraPlugins(bus);\n      const app = this.createApp(extraPlugins);\n      this.api?.setBus(bus);\n\n      return {\n        api: this.api,\n        app,\n        bus,\n        plugin\n      };\n    }\n\n    return Promise.resolve();\n  }\n\n  /**\n   * Creates the {@link XPluginOptions} object.\n   *\n   * @returns The {@link XPluginOptions} object.\n   *\n   * @internal\n   */\n  protected getPluginOptions(): XPluginOptions {\n    const { adapter, store, initialXModules, xModules, __PRIVATE__xModules } = this.options;\n    return {\n      adapter,\n      store,\n      xModules,\n      initialXModules,\n      __PRIVATE__xModules\n    };\n  }\n\n  /**\n   * This method returns the bus instance to be used in the {@link XPlugin} and in the {@link XAPI}.\n   * It returns the `bus` parameter in the {@link InstallXOptions} or if not provided, then\n   * creates a new instance of {@link @empathyco/x-bus#XPriorityBus | bus}.\n   *\n   * @returns XBus - The bus instance.\n   *\n   * @internal\n   */\n  protected createBus(): XBus<XEventsTypes, WireMetadata> {\n    return this.options.bus ?? bus;\n  }\n\n  /**\n   * This method returns the VueConstructor to use to create the App instance.\n   * It returns the `vue` parameter in the {@link InstallXOptions} or if not provided, then\n   * returns the default Vue.\n   *\n   * @remarks The purpose of this option is mainly the testing. In a test we can use this option\n   * to pass the local vue instance created by `createLocalVue` method.\n   *\n   * @returns VueConstructor - The vue constructor to create the App instance.\n   *\n   * @internal\n   */\n  protected getVue(): VueConstructor {\n    return this.options.vue ?? Vue;\n  }\n\n  /**\n   * Creates and install the Vue Plugin. If `plugin` parameter is passed in the\n   * {@link InstallXOptions}, then it is used. If not, then a new instance of {@link XPlugin} is\n   * created and installed.\n   *\n   * @param pluginOptions - The {@link XPluginOptions} to passed as parameter to the install method\n   * of the plugin.\n   * @param bus - The {@link @empathyco/x-bus#XBus} to be used to create the XPlugin.\n   *\n   * @returns PluginObject<XPluginOption> - The plugin instance.\n   * @internal\n   */\n  protected installPlugin(\n    pluginOptions: XPluginOptions,\n    bus: XBus<XEventsTypes, WireMetadata>\n  ): PluginObject<XPluginOptions> {\n    const plugin = this.options.plugin ?? new XPlugin(bus);\n    const vue = this.getVue();\n    vue.use(plugin, pluginOptions);\n    return plugin;\n  }\n\n  /**\n   * Install more plugins to Vue defined by the user.\n   *\n   * @param bus - The events bus used in the application.\n   * @returns The arguments from the plugins installation to be used in Vue's constructor.\n   * @internal\n   */\n  protected installExtraPlugins(\n    bus: XBus<XEventsTypes, WireMetadata>\n  ): Promise<VueConstructorPartialArgument> {\n    const vue = this.getVue();\n    return Promise.resolve(\n      this.options.installExtraPlugins?.({ vue, snippet: this.snippetConfig!, bus })\n    );\n  }\n\n  /**\n   * In the case that the `app` parameter is present in the {@link InstallXOptions}, then a new Vue\n   * application is created using that app.\n   *\n   * @param extraPlugins - Vue plugins initialisation data.\n   * @returns The Created Vue application or undefined if not created.\n   *\n   * @internal\n   */\n  protected createApp(extraPlugins: VueConstructorPartialArgument): Vue | undefined {\n    if (this.options.app !== undefined) {\n      const vue = this.getVue();\n      const app = new vue({\n        ...extraPlugins,\n        ...this.options.vueOptions,\n        provide: {\n          snippetConfig: (this.snippetConfig = vue.observable(this.snippetConfig))\n        },\n        store: this.options.store,\n        el: this.getMountingTarget(this.options.domElement),\n        render: h => h(this.options.app)\n      });\n      this.options.onCreateApp?.(app);\n      return app;\n    }\n  }\n\n  protected normaliseSnippetConfig(snippetConfig: SnippetConfig): NormalisedSnippetConfig;\n  protected normaliseSnippetConfig(snippetConfig: Partial<SnippetConfig>): Partial<SnippetConfig>;\n  /**\n   * Transforms the snippet configuration.\n   * - If `lang` is provided and `uiLang` is not, it sets `uiLang=lang`.\n   *\n   * @param snippetConfig - The snippet config to normalise.\n   * @returns The normalised version of the given snippet config.\n   * @internal\n   */\n  protected normaliseSnippetConfig(\n    snippetConfig: SnippetConfig | Partial<SnippetConfig>\n  ): NormalisedSnippetConfig | Partial<SnippetConfig> {\n    if (snippetConfig.lang) {\n      snippetConfig.uiLang ??= snippetConfig.lang;\n    }\n    return snippetConfig;\n  }\n\n  /**\n   * It returns the HTML element to mount the Vue Application. If the `domElement` parameter in\n   * the {@link InstallXOptions} is an Element or an element selector, then this will be used.\n   * The `domElement` can also be a function with the {@link SnippetConfig} as parameter which\n   * returns an Element or element selector to use.\n   * If it is not present, a new <div> Element is created and appended to the body.\n   *\n   * @param domElement - {@link InstallXOptions.domElement | Element, string or function} Used\n   * to mount the Vue Application.\n   *\n   * @returns The Element to use as mounting target for the Vue Application.\n   * @internal\n   */\n  protected getMountingTarget(domElement?: InstallXOptions['domElement']): Element {\n    if (isFunction(domElement)) {\n      domElement = domElement(this.snippetConfig!);\n    }\n    if (typeof domElement === 'string') {\n      const target = document.querySelector(domElement);\n      if (!target) {\n        throw Error(\n          `XComponents app couldn't be mounted: Element \"${domElement}\" couldn't be found`\n        );\n      }\n      return target;\n    }\n    return domElement ?? document.body.appendChild(document.createElement('div'));\n  }\n\n  /**\n   * It updates all the provided properties from the current snippet config.\n   *\n   * @param newSnippetConfig - All the properties to be updated in the {@link SnippetConfig}.\n   *\n   * @internal\n   */\n  protected updateSnippetConfig(newSnippetConfig: Partial<SnippetConfig>): void {\n    if (!this.snippetConfig) {\n      return;\n    }\n    forEach(this.normaliseSnippetConfig(newSnippetConfig), (name, value) => {\n      this.getVue().set(this.snippetConfig!, name, value);\n    });\n  }\n\n  /**\n   * Getter for the snippet config object.\n   *\n   * @returns The {@link NormalisedSnippetConfig | snippetConfig} object.\n   *\n   * @public\n   */\n  protected getSnippetConfig(): NormalisedSnippetConfig {\n    return this.snippetConfig!;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"x-installer.js","sources":["../../../../src/x-installer/x-installer/x-installer.ts"],"sourcesContent":["import { forEach, isFunction } from '@empathyco/x-utils';\nimport { App, createApp, reactive, Plugin } from 'vue';\nimport { XBus } from '@empathyco/x-bus';\nimport { XPlugin } from '../../plugins/x-plugin';\nimport { XPluginOptions } from '../../plugins/x-plugin.types';\nimport { NormalisedSnippetConfig, SnippetConfig, XAPI } from '../api/api.types';\nimport { BaseXAPI } from '../api/base-api';\nimport { WireMetadata, XEventsTypes } from '../../wiring/index';\nimport { bus } from '../../plugins/x-bus';\nimport { InitWrapper, InstallXOptions } from './types';\n\ndeclare global {\n  interface Window {\n    InterfaceX?: XAPI;\n    initX?: (() => SnippetConfig) | SnippetConfig;\n  }\n}\n\n/**\n * The purpose of this class is to offer a quick way to initialize the XComponents in a setup\n * project. It allows to receive all the options in {@link InstallXOptions} which is an extension\n * of {@link XPluginOptions} with all the options for the plugin and some options more.\n *\n * This class does multiple things:\n * 1. Install the {@link XPlugin} with the {@link XPluginOptions}.\n * 2. Creates the public {@link XAPI} and add it to global window.\n * 3. Creates the Vue Application for the customer project.\n *\n * The steps 2 & 3 are optional and depends on the options passed in {@link InstallXOptions}.\n *\n * @example The way to use this class is the next:\n *    1. Create the installer passing in the {@link InstallXOptions}. This only save the options:\n *\n * ```\n *        const installer = new XInstaller(installXOptions)\n * ```\n *\n *    2. Initialize passing the {@link SnippetConfig}. This installs the plugin and creates the App.\n *       There are 3 different ways to do this:\n *\n *        2.1 Using the created installer:\n *\n * ```\n *            installer.init(snippetConfig)\n * ```\n *\n *        2.2 If the API option is enabled (`createAPI` is `true` in {@link InstallXOptions}, or\n *            is not present as the default value is `true`) then this init step can be done with\n *            the Public API:\n *\n * ```\n *            window.InterfaceX.init(snippetConfig)\n * ```\n *\n *        2.3 When the script of the project build is loaded it searches for a global `initX`\n *            variable that the customer must have in their website. This variable can be a\n *            function that returns the {@link SnippetConfig} or an object that contains the\n *            {@link SnippetConfig} itself:\n *\n * ```\n *            window.initX = function() {\n *                 return {\n *                   instance,\n *                   env,\n *                   scope,\n *                   lang,\n *                   uiLang,\n *                   currency,\n *                   consent,\n *                   documentDirection\n *                 };\n *              };\n * ```\n *\n * ```\n *            window.initX = {\n *                 instance,\n *                 env,\n *                 scope,\n *                 lang,\n *                 uiLang,\n *                 currency,\n *                 consent,\n *                 documentDirection\n *               };\n * ```\n *\n * @public\n */\nexport class XInstaller {\n  private app!: App;\n  private api?: XAPI;\n\n  /**\n   * The configuration coming from the snippet {@link SnippetConfig}.\n   *\n   * @internal\n   */\n  protected snippetConfig?: NormalisedSnippetConfig;\n\n  /**\n   * Receives the {@link InstallXOptions} and merges it with the default fallback options. Also\n   * creates the public {@link XAPI}.\n   *\n   * @remarks Auto initializes the Vue application if window.initX is defined as a function or\n   * object specifying the {@link SnippetConfig | snippet config}.\n   *\n   *\n   * @param options - The {@link InstallXOptions}.\n   *\n   * @public\n   */\n  public constructor(protected readonly options: InstallXOptions) {\n    this.createAPI();\n  }\n\n  /**\n   * Creates the public {@link XAPI} using the `api` option from {@link InstallXOptions}. If this\n   * `api` option is not passed, then a default {@link BaseXAPI} is created. To disable the API\n   * creation the value `false` must be passed in the `api` option.\n   *\n   * @internal\n   */\n  protected createAPI(): void {\n    const { api } = this.options;\n    if (api !== false) {\n      this.api = api ?? new BaseXAPI();\n      this.api.setInitCallback(this.init.bind(this));\n      this.api.setSnippetConfigCallback(this.updateSnippetConfig.bind(this));\n      this.api.setSnippetConfigGetter(this.getSnippetConfig.bind(this));\n      window.InterfaceX = this.api;\n    }\n  }\n\n  /**\n   * Retrieves the {@link SnippetConfig | snippet config} it is defined in the window.initX.\n   *\n   * @returns The snippet config if it is defined or undefined otherwise.\n   *\n   * @internal\n   */\n  private retrieveSnippetConfig(): SnippetConfig | undefined {\n    if (typeof window.initX === 'function') {\n      return window.initX();\n    } else if (typeof window.initX === 'object') {\n      return window.initX;\n    }\n  }\n\n  /**\n   * Receives the {@link SnippetConfig | snippet config} or retrieves it from window.initX and\n   * installs the plugin and initializes the Vue application.\n   *\n   * @param snippetConfig - The {@link SnippetConfig} that receives from snippet integration.\n   *\n   * @returns If {@link SnippetConfig | snippet config} is passed or configured in window.initX,\n   * returns an object with the {@link XAPI}, the {@link @empathyco/x-bus#XBus}, the {@link XPlugin}\n   * and the Vue application instance. Else, a rejected promise is returned.\n   *\n   * @public\n   */\n  init(snippetConfig: SnippetConfig): Promise<InitWrapper>;\n  init(): Promise<InitWrapper | void>;\n  async init(snippetConfig = this.retrieveSnippetConfig()): Promise<InitWrapper | void> {\n    if (snippetConfig) {\n      this.snippetConfig = reactive(this.normaliseSnippetConfig(snippetConfig));\n      this.createApp();\n      const bus = this.createBus();\n      const pluginOptions = this.getPluginOptions();\n      const plugin = this.installPlugin(pluginOptions, bus);\n      await this.installExtraPlugins(bus);\n      this.api?.setBus(bus);\n      this.app.mount(this.getMountingTarget(this.options.domElement));\n\n      return {\n        api: this.api,\n        app: this.app,\n        bus,\n        plugin\n      };\n    }\n\n    return Promise.resolve();\n  }\n\n  /**\n   * Creates the {@link XPluginOptions} object.\n   *\n   * @returns The {@link XPluginOptions} object.\n   *\n   * @internal\n   */\n  protected getPluginOptions(): XPluginOptions {\n    const { adapter, store, initialXModules, xModules, __PRIVATE__xModules } = this.options;\n    return {\n      adapter,\n      store,\n      xModules,\n      initialXModules,\n      __PRIVATE__xModules\n    };\n  }\n\n  /**\n   * This method returns the bus instance to be used in the {@link XPlugin} and in the {@link XAPI}.\n   * It returns the `bus` parameter in the {@link InstallXOptions} or if not provided, then\n   * creates a new instance of {@link @empathyco/x-bus#XPriorityBus | bus}.\n   *\n   * @returns XBus - The bus instance.\n   *\n   * @internal\n   */\n  protected createBus(): XBus<XEventsTypes, WireMetadata> {\n    return this.options.bus ?? bus;\n  }\n\n  /**\n   * Creates and install the Vue Plugin. If `plugin` parameter is passed in the\n   * {@link InstallXOptions}, then it is used. If not, then a new instance of {@link XPlugin} is\n   * created and installed.\n   *\n   * @param pluginOptions - The {@link XPluginOptions} to passed as parameter to the install method\n   * of the plugin.\n   * @param bus - The {@link @empathyco/x-bus#XBus} to be used to create the XPlugin.\n   *\n   * @returns Plugin<XPluginOption> - The plugin instance.\n   * @internal\n   */\n  protected installPlugin(\n    pluginOptions: XPluginOptions,\n    bus: XBus<XEventsTypes, WireMetadata>\n  ): Plugin<XPluginOptions> {\n    const plugin = this.options.plugin ?? new XPlugin(bus);\n    this.app.use(plugin, pluginOptions);\n    return plugin;\n  }\n\n  /**\n   * Runs the installExtraPlugins callback defined in the {@link InstallXOptions}\n   * to allow the user to install more plugins to the App.\n   *\n   * @param bus - The events bus used in the application.\n   * @returns An empty promise.\n   * @internal\n   */\n  protected installExtraPlugins(bus: XBus<XEventsTypes, WireMetadata>): Promise<void> {\n    return Promise.resolve(\n      this.options.installExtraPlugins?.({ app: this.app, snippet: this.snippetConfig!, bus })\n    );\n  }\n\n  /**\n   * In the case that the `rootComponent` parameter is present in the {@link InstallXOptions},\n   * then a new Vue application is created using that component as root.\n   *\n   * @internal\n   */\n  protected createApp(): void {\n    if (this.options.rootComponent !== undefined) {\n      this.app = createApp(this.options.rootComponent);\n      this.app.provide('snippetConfig', this.snippetConfig);\n      this.options.onCreateApp?.(this.app);\n    }\n  }\n\n  protected normaliseSnippetConfig(snippetConfig: SnippetConfig): NormalisedSnippetConfig;\n  protected normaliseSnippetConfig(snippetConfig: Partial<SnippetConfig>): Partial<SnippetConfig>;\n  /**\n   * Transforms the snippet configuration.\n   * - If `lang` is provided and `uiLang` is not, it sets `uiLang=lang`.\n   *\n   * @param snippetConfig - The snippet config to normalise.\n   * @returns The normalised version of the given snippet config.\n   * @internal\n   */\n  protected normaliseSnippetConfig(\n    snippetConfig: SnippetConfig | Partial<SnippetConfig>\n  ): NormalisedSnippetConfig | Partial<SnippetConfig> {\n    if (snippetConfig.lang) {\n      snippetConfig.uiLang ??= snippetConfig.lang;\n    }\n    return snippetConfig;\n  }\n\n  /**\n   * It returns the HTML element to mount the Vue Application. If the `domElement` parameter in\n   * the {@link InstallXOptions} is an Element or an element selector, then this will be used.\n   * The `domElement` can also be a function with the {@link SnippetConfig} as parameter which\n   * returns an Element or element selector to use.\n   * If it is not present, a new <div> Element is created and appended to the body.\n   *\n   * @param domElement - {@link InstallXOptions.domElement | Element, string or function} Used\n   * to mount the Vue Application.\n   *\n   * @returns The Element to use as mounting target for the Vue Application.\n   * @internal\n   */\n  protected getMountingTarget(domElement?: InstallXOptions['domElement']): Element {\n    if (isFunction(domElement)) {\n      domElement = domElement(this.snippetConfig!);\n    }\n    if (typeof domElement === 'string') {\n      const target = document.querySelector(domElement);\n      if (!target) {\n        throw Error(\n          `XComponents app couldn't be mounted: Element \"${domElement}\" couldn't be found`\n        );\n      }\n      return target;\n    }\n    return domElement ?? document.body.appendChild(document.createElement('div'));\n  }\n\n  /**\n   * It updates all the provided properties from the current snippet config.\n   *\n   * @param newSnippetConfig - All the properties to be updated in the {@link SnippetConfig}.\n   *\n   * @internal\n   */\n  protected updateSnippetConfig(newSnippetConfig: Partial<SnippetConfig>): void {\n    if (!this.snippetConfig) {\n      return;\n    }\n    forEach(this.normaliseSnippetConfig(newSnippetConfig), (name, value) => {\n      this.snippetConfig![name] = value;\n    });\n  }\n\n  /**\n   * Getter for the snippet config object.\n   *\n   * @returns The {@link NormalisedSnippetConfig | snippetConfig} object.\n   *\n   * @public\n   */\n  protected getSnippetConfig(): NormalisedSnippetConfig {\n    return this.snippetConfig!;\n  }\n}\n"],"names":[],"mappings":"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"}

package/js/x-modules/device/components/device-detector.vue.js

@@ -1,52 +1,16 @@
-import script from './device-detector.vue2.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import _sfc_main from './device-detector.vue2.js';
+import { resolveComponent, openBlock, createBlock, createCommentVNode } from 'vue';
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
-/* script */
-const __vue_script__ = script;
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_GlobalEvents = resolveComponent("GlobalEvents");
+  return !_ctx.force ? (openBlock(), createBlock(_component_GlobalEvents, {
+    key: 0,
+    onResize: _ctx.throttledStoreWindowWidth,
+    target: "window"
+  }, null, 8, ["onResize"])) : createCommentVNode("v-if", true);
+}
+var deviceDetector = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return !_vm.force
-    ? _c("GlobalEvents", {
-        attrs: { target: "window" },
-        on: { resize: _vm.throttledStoreWindowWidth },
-      })
-    : _vm._e()
-};
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export { __vue_component__ as default };
+export { deviceDetector as default };
 //# sourceMappingURL=device-detector.vue.js.map

package/js/x-modules/device/components/device-detector.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"device-detector.vue.js","sources":["../../../../../src/x-modules/device/components/device-detector.vue"],"sourcesContent":["<template>\n  <GlobalEvents v-if=\"!force\" @resize=\"throttledStoreWindowWidth\" target=\"window\" />\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import GlobalEvents from 'vue-global-events';\n  import { Component, Prop, Watch } from 'vue-property-decorator';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { XEmit } from '../../../components/decorators/bus.decorators';\n  import { throttle } from '../../../utils/throttle';\n  import { deviceXModule } from '../x-module';\n\n  /** Alias just to improve code readiness. */\n  type Device = string;\n  /** Alias just to improve code readiness. */\n  type MaxWidth = number;\n\n  /**\n   * This component helps to detect or setting a device, that can be used later to create\n   * different layouts optimized for different devices. This detected device is available under\n   * the {@link XComponentAliasAPI.device} property.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(deviceXModule)],\n    components: {\n      GlobalEvents\n    }\n  })\n  export default class DeviceDetector extends Vue {\n    /**\n     * Record of the device name, that can be whatever you want `xs`, `mobile`, `big`... And\n     * the max width in pixels for that device.\n     *\n     * @public\n     */\n    @Prop({ default: () => ({}) })\n    public readonly breakpoints!: Record<Device, MaxWidth>;\n\n    /**\n     * Forces a device, ignoring the {@link DeviceDetector.breakpoints} prop.\n     *\n     * @public\n     */\n    @Prop()\n    public readonly force?: Device;\n\n    /**\n     * Time in milliseconds to throttle the resize events used to detect the device.\n     *\n     * @public\n     */\n    @Prop({ default: 100 })\n    public readonly throttleMs!: number;\n\n    /**\n     * The width in pixels of the window where the app is being rendered.\n     *\n     * @internal\n     */\n    protected windowWidthPx: number | null = null;\n\n    /**\n     * Throttled version of {@link DeviceDetector.storeWindowWidth} function.\n     *\n     * @internal\n     */\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    protected throttledStoreWindowWidth = this.storeWindowWidth;\n\n    /**\n     * List of each of the entries of the breakpoints sorted from the smallest to the biggest\n     * max width.\n     *\n     * @returns A list of the breakpoints sorted by its max width in ascending order.\n     *\n     * @internal\n     */\n    protected get sortedBreakpoints(): [Device, MaxWidth][] {\n      return Object.entries(this.breakpoints).sort(([, aWidth], [, bWidth]) => aWidth - bWidth);\n    }\n\n    /**\n     * The device detected by this component, or the value provided in {@link DeviceDetector.force}\n     * prop.\n     *\n     * @returns The detected device, or the value provided in {@link DeviceDetector.force}\n     * prop.\n     *\n     * @internal\n     */\n    @XEmit('DeviceProvided')\n    public get detectedDevice(): string | null {\n      if (this.force) {\n        return this.force;\n      } else if (this.windowWidthPx === null) {\n        return null;\n      } else {\n        return (\n          this.sortedBreakpoints.find(([, width]) => this.windowWidthPx! <= width)?.[0] ?? null\n        );\n      }\n    }\n\n    /**\n     * Stores the window width in {@link DeviceDetector.windowWidthPx}.\n     *\n     * @internal\n     */\n    protected storeWindowWidth(): void {\n      this.windowWidthPx = window.innerWidth;\n    }\n\n    /**\n     * Updates {@link DeviceDetector.throttledStoreWindowWidth} with the throttle time at\n     * {@link DeviceDetector.throttleMs}.\n     *\n     * @param throttleMs - The new duration in milliseconds for the throttle.\n     *\n     * @internal\n     */\n    @Watch('throttleMs', { immediate: true })\n    protected updateThrottledStoreWindowWidth(throttleMs: number): void {\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      this.throttledStoreWindowWidth = throttle(this.storeWindowWidth, throttleMs);\n    }\n\n    /**\n     * Initialises the store window width.\n     *\n     * @remarks This is done this way to ensure SSR compatibility.\n     *\n     * @internal\n     */\n    mounted(): void {\n      this.storeWindowWidth();\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`DeviceProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nThis component renders no element to the DOM, but serves as way to safely detect or set the device\nname given an object containing all the possible breakpoints.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" />\n    {{ $x.device }}\n  </div>\n</template>\n\n<script>\n  import { DeviceDetector } from '@empathyco/x-components/device';\n\n  export default {\n    name: 'DeviceDemo',\n    components: {\n      DeviceDetector\n    },\n    data() {\n      return {\n        breakpoints: {\n          mobile: 600,\n          tablet: 900,\n          desktop: Number.POSITIVE_INFINITY\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the `DeviceDetector` has been forced to always detect the `mobile` device. No\nmatter what the window width is.\n\n_Try resizing the window to check that it never changes_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector force=\"mobile\" :breakpoints=\"breakpoints\" />\n    {{ $x.device }}\n  </div>\n</template>\n\n<script>\n  import { DeviceDetector } from '@empathyco/x-components/device';\n\n  export default {\n    name: 'DeviceDemo',\n    components: {\n      DeviceDetector\n    },\n    data() {\n      return {\n        breakpoints: {\n          mobile: 600,\n          tablet: 900,\n          desktop: Number.POSITIVE_INFINITY\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, the `DeviceDetector` will emit a `DeviceProvided` event, with the new device as the\npayload. This device is stored in a data variable and then displayed.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" @DeviceProvided=\"storeDevice\" />\n    {{ device }}\n  </div>\n</template>\n\n<script>\n  import { DeviceDetector } from '@empathyco/x-components/device';\n\n  export default {\n    name: 'DeviceDemo',\n    components: {\n      DeviceDetector\n    },\n    data() {\n      return {\n        device: 'unknown',\n        breakpoints: {\n          mobile: 600,\n          tablet: 900,\n          desktop: Number.POSITIVE_INFINITY\n        }\n      };\n    },\n    methods: {\n      storeDevice(device) {\n        this.device = device;\n      }\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"device-detector.vue.js","sources":["../../../../../src/x-modules/device/components/device-detector.vue"],"sourcesContent":["<template>\n  <GlobalEvents v-if=\"!force\" @resize=\"throttledStoreWindowWidth\" target=\"window\" />\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, onMounted, PropType, Ref, ref, watch } from 'vue';\n  import { GlobalEvents } from 'vue-global-events';\n  import { throttle } from '../../../utils/throttle';\n  import { deviceXModule } from '../x-module';\n  import { useXBus } from '../../../composables/use-x-bus';\n\n  /** Alias just to improve code readiness. */\n  type Device = string;\n  /** Alias just to improve code readiness. */\n  type MaxWidth = number;\n\n  /**\n   * This component helps to detect or setting a device, that can be used later to create\n   * different layouts optimized for different devices. This detected device is available under\n   * the {@link XComponentAliasAPI.device} property.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'DeviceDetector',\n    xModule: deviceXModule.name,\n    components: { GlobalEvents },\n    props: {\n      /**\n       * Record of the device name, that can be whatever you want `xs`, `mobile`, `big`... And\n       * the max width in pixels for that device.\n       *\n       * @public\n       */\n      breakpoints: {\n        type: Object as PropType<Record<Device, MaxWidth>>,\n        default: () => ({})\n      },\n      /**\n       * Forces a device, ignoring the breakpoints prop.\n       *\n       * @public\n       */\n      force: String as PropType<Device>,\n\n      /**\n       * Time in milliseconds to throttle the resize events used to detect the device.\n       *\n       * @public\n       */\n      throttleMs: {\n        type: Number,\n        default: 100\n      }\n    },\n    setup(props) {\n      const xBus = useXBus();\n\n      /**\n       * The width in pixels of the window where the app is being rendered.\n       *\n       * @internal\n       */\n      const windowWidthPx: Ref<number | null> = ref(null);\n\n      /**\n       * Stores the window width in {@link DeviceDetector.windowWidthPx}.\n       *\n       * @internal\n       */\n      const storeWindowWidth = (): void => {\n        windowWidthPx.value = window.innerWidth;\n      };\n\n      /**\n       * Throttled version of {@link DeviceDetector.storeWindowWidth} function.\n       *\n       * @internal\n       */\n      let throttledStoreWindowWidth = storeWindowWidth;\n\n      /**\n       * List of each of the entries of the breakpoints sorted from the smallest to the biggest\n       * max width.\n       *\n       * @returns A list of the breakpoints sorted by its max width in ascending order.\n       *\n       * @internal\n       */\n      const sortedBreakpoints = computed((): [Device, MaxWidth][] =>\n        Object.entries(props.breakpoints).sort(([, aWidth], [, bWidth]) => aWidth - bWidth)\n      );\n\n      /**\n       * The device detected by this component, or the value provided in {@link DeviceDetector.force}\n       * prop.\n       *\n       * @returns The detected device, or the value provided in {@link DeviceDetector.force}\n       * prop.\n       *\n       * @internal\n       */\n      const detectedDevice = computed((): string | null => {\n        if (props.force) {\n          return props.force;\n        } else if (windowWidthPx.value === null) {\n          return null;\n        } else {\n          return (\n            sortedBreakpoints.value.find(([, width]) => windowWidthPx.value! <= width)?.[0] ?? null\n          );\n        }\n      });\n\n      watch(\n        detectedDevice,\n        device => {\n          xBus.emit('DeviceProvided', device);\n        },\n        { immediate: true }\n      );\n\n      /**\n       * Updates {@link DeviceDetector.throttledStoreWindowWidth} with the throttle time at\n       * {@link DeviceDetector.throttleMs}.\n       *\n       * @param throttleMs - The new duration in milliseconds for the throttle.\n       *\n       * @internal\n       */\n      watch(\n        () => props.throttleMs,\n        throttleMs => {\n          throttledStoreWindowWidth = throttle(storeWindowWidth, throttleMs);\n        },\n        { immediate: true }\n      );\n\n      /**\n       * Initialises the store window width.\n       *\n       * @remarks This is done this way to ensure SSR compatibility.\n       *\n       * @internal\n       */\n      onMounted(() => {\n        storeWindowWidth();\n      });\n\n      return {\n        throttledStoreWindowWidth\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`DeviceProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nThis component renders no element to the DOM, but serves as way to safely detect or set the device\nname given an object containing all the possible breakpoints.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" />\n    {{ $x.device }}\n  </div>\n</template>\n\n<script>\n  import { DeviceDetector } from '@empathyco/x-components/device';\n\n  export default {\n    name: 'DeviceDemo',\n    components: {\n      DeviceDetector\n    },\n    data() {\n      return {\n        breakpoints: {\n          mobile: 600,\n          tablet: 900,\n          desktop: Number.POSITIVE_INFINITY\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the `DeviceDetector` has been forced to always detect the `mobile` device. No\nmatter what the window width is.\n\n_Try resizing the window to check that it never changes_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector force=\"mobile\" :breakpoints=\"breakpoints\" />\n    {{ $x.device }}\n  </div>\n</template>\n\n<script>\n  import { DeviceDetector } from '@empathyco/x-components/device';\n\n  export default {\n    name: 'DeviceDemo',\n    components: {\n      DeviceDetector\n    },\n    data() {\n      return {\n        breakpoints: {\n          mobile: 600,\n          tablet: 900,\n          desktop: Number.POSITIVE_INFINITY\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, the `DeviceDetector` will emit a `DeviceProvided` event, with the new device as the\npayload. This device is stored in a data variable and then displayed.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" @DeviceProvided=\"storeDevice\" />\n    {{ device }}\n  </div>\n</template>\n\n<script>\n  import { DeviceDetector } from '@empathyco/x-components/device';\n\n  export default {\n    name: 'DeviceDemo',\n    components: {\n      DeviceDetector\n    },\n    data() {\n      return {\n        device: 'unknown',\n        breakpoints: {\n          mobile: 600,\n          tablet: 900,\n          desktop: Number.POSITIVE_INFINITY\n        }\n      };\n    },\n    methods: {\n      storeDevice(device) {\n        this.device = device;\n      }\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_createCommentVNode"],"mappings":";;;;;AAC4B,EAAA,MAAA,uBAAA,GAAAA,gBAAA,CAAA,cAAA,CAAA,CAAA;AAD5B,EAAA,OAAA,CAAA,IAAA,CAAA,KAAA,IAAAC,SAAA,EACgE,EAAAC,WAAA,CAAA,uBAAA,EAAA;AAAA,IAAE,GAAA,EAAA,CAAA;AAAA,IAAA,QAAA,EAAA,IAAA,CAAA,yBAAA;AADlE,IAAA,MAAA,EAAA,QAAA;AAAA,GAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,UAAA,CAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

package/js/x-modules/device/components/device-detector.vue2.js

@@ -1,11 +1,8 @@
-import { __decorate } from 'tslib';
-import Vue from 'vue';
-import GlobalEvents from 'vue-global-events';
-import { Prop, Watch, Component } from 'vue-property-decorator';
-import { xComponentMixin } from '../../../components/x-component.mixin.js';
-import { XEmit } from '../../../components/decorators/bus.decorators.js';
+import { defineComponent, ref, computed, watch, onMounted } from 'vue';
+import { GlobalEvents } from 'vue-global-events';
 import { throttle } from '../../../utils/throttle.js';
 import { deviceXModule } from '../x-module.js';
+import { useXBus } from '../../../composables/use-x-bus.js';
 
 /**
  * This component helps to detect or setting a device, that can be used later to create
@@ -14,109 +11,117 @@ import { deviceXModule } from '../x-module.js';
  *
  * @public
  */
-let DeviceDetector = class DeviceDetector extends Vue {
-    constructor() {
-        super(...arguments);
+var _sfc_main = defineComponent({
+    name: 'DeviceDetector',
+    xModule: deviceXModule.name,
+    components: { GlobalEvents },
+    props: {
+        /**
+         * Record of the device name, that can be whatever you want `xs`, `mobile`, `big`... And
+         * the max width in pixels for that device.
+         *
+         * @public
+         */
+        breakpoints: {
+            type: Object,
+            default: () => ({})
+        },
+        /**
+         * Forces a device, ignoring the breakpoints prop.
+         *
+         * @public
+         */
+        force: String,
+        /**
+         * Time in milliseconds to throttle the resize events used to detect the device.
+         *
+         * @public
+         */
+        throttleMs: {
+            type: Number,
+            default: 100
+        }
+    },
+    setup(props) {
+        const xBus = useXBus();
         /**
          * The width in pixels of the window where the app is being rendered.
          *
          * @internal
          */
-        this.windowWidthPx = null;
+        const windowWidthPx = ref(null);
+        /**
+         * Stores the window width in {@link DeviceDetector.windowWidthPx}.
+         *
+         * @internal
+         */
+        const storeWindowWidth = () => {
+            windowWidthPx.value = window.innerWidth;
+        };
         /**
          * Throttled version of {@link DeviceDetector.storeWindowWidth} function.
          *
          * @internal
          */
-        // eslint-disable-next-line @typescript-eslint/unbound-method
-        this.throttledStoreWindowWidth = this.storeWindowWidth;
-    }
-    /**
-     * List of each of the entries of the breakpoints sorted from the smallest to the biggest
-     * max width.
-     *
-     * @returns A list of the breakpoints sorted by its max width in ascending order.
-     *
-     * @internal
-     */
-    get sortedBreakpoints() {
-        return Object.entries(this.breakpoints).sort(([, aWidth], [, bWidth]) => aWidth - bWidth);
-    }
-    /**
-     * The device detected by this component, or the value provided in {@link DeviceDetector.force}
-     * prop.
-     *
-     * @returns The detected device, or the value provided in {@link DeviceDetector.force}
-     * prop.
-     *
-     * @internal
-     */
-    get detectedDevice() {
-        if (this.force) {
-            return this.force;
-        }
-        else if (this.windowWidthPx === null) {
-            return null;
-        }
-        else {
-            return (this.sortedBreakpoints.find(([, width]) => this.windowWidthPx <= width)?.[0] ?? null);
-        }
-    }
-    /**
-     * Stores the window width in {@link DeviceDetector.windowWidthPx}.
-     *
-     * @internal
-     */
-    storeWindowWidth() {
-        this.windowWidthPx = window.innerWidth;
-    }
-    /**
-     * Updates {@link DeviceDetector.throttledStoreWindowWidth} with the throttle time at
-     * {@link DeviceDetector.throttleMs}.
-     *
-     * @param throttleMs - The new duration in milliseconds for the throttle.
-     *
-     * @internal
-     */
-    updateThrottledStoreWindowWidth(throttleMs) {
-        // eslint-disable-next-line @typescript-eslint/unbound-method
-        this.throttledStoreWindowWidth = throttle(this.storeWindowWidth, throttleMs);
-    }
-    /**
-     * Initialises the store window width.
-     *
-     * @remarks This is done this way to ensure SSR compatibility.
-     *
-     * @internal
-     */
-    mounted() {
-        this.storeWindowWidth();
+        let throttledStoreWindowWidth = storeWindowWidth;
+        /**
+         * List of each of the entries of the breakpoints sorted from the smallest to the biggest
+         * max width.
+         *
+         * @returns A list of the breakpoints sorted by its max width in ascending order.
+         *
+         * @internal
+         */
+        const sortedBreakpoints = computed(() => Object.entries(props.breakpoints).sort(([, aWidth], [, bWidth]) => aWidth - bWidth));
+        /**
+         * The device detected by this component, or the value provided in {@link DeviceDetector.force}
+         * prop.
+         *
+         * @returns The detected device, or the value provided in {@link DeviceDetector.force}
+         * prop.
+         *
+         * @internal
+         */
+        const detectedDevice = computed(() => {
+            if (props.force) {
+                return props.force;
+            }
+            else if (windowWidthPx.value === null) {
+                return null;
+            }
+            else {
+                return (sortedBreakpoints.value.find(([, width]) => windowWidthPx.value <= width)?.[0] ?? null);
+            }
+        });
+        watch(detectedDevice, device => {
+            xBus.emit('DeviceProvided', device);
+        }, { immediate: true });
+        /**
+         * Updates {@link DeviceDetector.throttledStoreWindowWidth} with the throttle time at
+         * {@link DeviceDetector.throttleMs}.
+         *
+         * @param throttleMs - The new duration in milliseconds for the throttle.
+         *
+         * @internal
+         */
+        watch(() => props.throttleMs, throttleMs => {
+            throttledStoreWindowWidth = throttle(storeWindowWidth, throttleMs);
+        }, { immediate: true });
+        /**
+         * Initialises the store window width.
+         *
+         * @remarks This is done this way to ensure SSR compatibility.
+         *
+         * @internal
+         */
+        onMounted(() => {
+            storeWindowWidth();
+        });
+        return {
+            throttledStoreWindowWidth
+        };
     }
-};
-__decorate([
-    Prop({ default: () => ({}) })
-], DeviceDetector.prototype, "breakpoints", void 0);
-__decorate([
-    Prop()
-], DeviceDetector.prototype, "force", void 0);
-__decorate([
-    Prop({ default: 100 })
-], DeviceDetector.prototype, "throttleMs", void 0);
-__decorate([
-    XEmit('DeviceProvided')
-], DeviceDetector.prototype, "detectedDevice", null);
-__decorate([
-    Watch('throttleMs', { immediate: true })
-], DeviceDetector.prototype, "updateThrottledStoreWindowWidth", null);
-DeviceDetector = __decorate([
-    Component({
-        mixins: [xComponentMixin(deviceXModule)],
-        components: {
-            GlobalEvents
-        }
-    })
-], DeviceDetector);
-var script = DeviceDetector;
+});
 
-export { script as default };
+export { _sfc_main as default };
 //# sourceMappingURL=device-detector.vue2.js.map

package/js/x-modules/device/components/device-detector.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"device-detector.vue2.js","sources":["../../../../../src/x-modules/device/components/device-detector.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n  import Vue from 'vue';\n  import GlobalEvents from 'vue-global-events';\n  import { Component, Prop, Watch } from 'vue-property-decorator';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { XEmit } from '../../../components/decorators/bus.decorators';\n  import { throttle } from '../../../utils/throttle';\n  import { deviceXModule } from '../x-module';\n\n  /** Alias just to improve code readiness. */\n  type Device = string;\n  /** Alias just to improve code readiness. */\n  type MaxWidth = number;\n\n  /**\n   * This component helps to detect or setting a device, that can be used later to create\n   * different layouts optimized for different devices. This detected device is available under\n   * the {@link XComponentAliasAPI.device} property.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(deviceXModule)],\n    components: {\n      GlobalEvents\n    }\n  })\n  export default class DeviceDetector extends Vue {\n    /**\n     * Record of the device name, that can be whatever you want `xs`, `mobile`, `big`... And\n     * the max width in pixels for that device.\n     *\n     * @public\n     */\n    @Prop({ default: () => ({}) })\n    public readonly breakpoints!: Record<Device, MaxWidth>;\n\n    /**\n     * Forces a device, ignoring the {@link DeviceDetector.breakpoints} prop.\n     *\n     * @public\n     */\n    @Prop()\n    public readonly force?: Device;\n\n    /**\n     * Time in milliseconds to throttle the resize events used to detect the device.\n     *\n     * @public\n     */\n    @Prop({ default: 100 })\n    public readonly throttleMs!: number;\n\n    /**\n     * The width in pixels of the window where the app is being rendered.\n     *\n     * @internal\n     */\n    protected windowWidthPx: number | null = null;\n\n    /**\n     * Throttled version of {@link DeviceDetector.storeWindowWidth} function.\n     *\n     * @internal\n     */\n    // eslint-disable-next-line @typescript-eslint/unbound-method\n    protected throttledStoreWindowWidth = this.storeWindowWidth;\n\n    /**\n     * List of each of the entries of the breakpoints sorted from the smallest to the biggest\n     * max width.\n     *\n     * @returns A list of the breakpoints sorted by its max width in ascending order.\n     *\n     * @internal\n     */\n    protected get sortedBreakpoints(): [Device, MaxWidth][] {\n      return Object.entries(this.breakpoints).sort(([, aWidth], [, bWidth]) => aWidth - bWidth);\n    }\n\n    /**\n     * The device detected by this component, or the value provided in {@link DeviceDetector.force}\n     * prop.\n     *\n     * @returns The detected device, or the value provided in {@link DeviceDetector.force}\n     * prop.\n     *\n     * @internal\n     */\n    @XEmit('DeviceProvided')\n    public get detectedDevice(): string | null {\n      if (this.force) {\n        return this.force;\n      } else if (this.windowWidthPx === null) {\n        return null;\n      } else {\n        return (\n          this.sortedBreakpoints.find(([, width]) => this.windowWidthPx! <= width)?.[0] ?? null\n        );\n      }\n    }\n\n    /**\n     * Stores the window width in {@link DeviceDetector.windowWidthPx}.\n     *\n     * @internal\n     */\n    protected storeWindowWidth(): void {\n      this.windowWidthPx = window.innerWidth;\n    }\n\n    /**\n     * Updates {@link DeviceDetector.throttledStoreWindowWidth} with the throttle time at\n     * {@link DeviceDetector.throttleMs}.\n     *\n     * @param throttleMs - The new duration in milliseconds for the throttle.\n     *\n     * @internal\n     */\n    @Watch('throttleMs', { immediate: true })\n    protected updateThrottledStoreWindowWidth(throttleMs: number): void {\n      // eslint-disable-next-line @typescript-eslint/unbound-method\n      this.throttledStoreWindowWidth = throttle(this.storeWindowWidth, throttleMs);\n    }\n\n    /**\n     * Initialises the store window width.\n     *\n     * @remarks This is done this way to ensure SSR compatibility.\n     *\n     * @internal\n     */\n    mounted(): void {\n      this.storeWindowWidth();\n    }\n  }\n"],"names":[],"mappings":";;;;;;;;;AAkBE;;;;;;AAMG;AAOY,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,GAAG,CAAA;AAAhC,IAAA,WAAA,GAAA;;AA0Bb;;;;AAIG;QACO,IAAa,CAAA,aAAA,GAAkB,IAAI,CAAC;AAE9C;;;;AAIG;;AAEO,QAAA,IAAA,CAAA,yBAAyB,GAAG,IAAI,CAAC,gBAAgB,CAAC;KAqE7D;AAnEC;;;;;;;AAOG;AACH,IAAA,IAAc,iBAAiB,GAAA;AAC7B,QAAA,OAAO,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,EAAE,GAAG,MAAM,CAAC,KAAK,MAAM,GAAG,MAAM,CAAC,CAAC;KAC3F;AAED;;;;;;;;AAQG;AAEH,IAAA,IAAW,cAAc,GAAA;QACvB,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,OAAO,IAAI,CAAC,KAAK,CAAC;AACnB,SAAA;AAAM,aAAA,IAAI,IAAI,CAAC,aAAa,KAAK,IAAI,EAAE;AACtC,YAAA,OAAO,IAAI,CAAC;AACb,SAAA;AAAM,aAAA;AACL,YAAA,QACE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,IAAI,CAAC,aAAc,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,IAAI,EACrF;AACH,SAAA;KACF;AAED;;;;AAIG;IACO,gBAAgB,GAAA;AACxB,QAAA,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC,UAAU,CAAC;KACxC;AAED;;;;;;;AAOG;AAEO,IAAA,+BAA+B,CAAC,UAAkB,EAAA;;QAE1D,IAAI,CAAC,yBAAyB,GAAG,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC;KAC9E;AAED;;;;;;AAMG;IACH,OAAO,GAAA;QACL,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;CACF,CAAA;AApGC,UAAA,CAAA;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;AACyB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQvD,UAAA,CAAA;AADC,IAAA,IAAI,EAAE;AACwB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQ/B,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC;AACa,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAuCpC,UAAA,CAAA;IADC,KAAK,CAAC,gBAAgB,CAAC;AAWvB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,IAAA,CAAA,CAAA;AAoBD,UAAA,CAAA;IADC,KAAK,CAAC,YAAY,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AAIxC,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,iCAAA,EAAA,IAAA,CAAA,CAAA;AAhGkB,cAAc,GAAA,UAAA,CAAA;AANlC,IAAA,SAAS,CAAC;AACT,QAAA,MAAM,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;AACxC,QAAA,UAAU,EAAE;YACV,YAAY;AACb,SAAA;KACF,CAAC;AACmB,CAAA,EAAA,cAAc,CA4GlC,CAAA;aA5GoB,cAAc;;;;"}
+{"version":3,"file":"device-detector.vue2.js","sources":["../../../../../src/x-modules/device/components/device-detector.vue"],"sourcesContent":["<template>\n  <GlobalEvents v-if=\"!force\" @resize=\"throttledStoreWindowWidth\" target=\"window\" />\n</template>\n\n<script lang=\"ts\">\n  import { computed, defineComponent, onMounted, PropType, Ref, ref, watch } from 'vue';\n  import { GlobalEvents } from 'vue-global-events';\n  import { throttle } from '../../../utils/throttle';\n  import { deviceXModule } from '../x-module';\n  import { useXBus } from '../../../composables/use-x-bus';\n\n  /** Alias just to improve code readiness. */\n  type Device = string;\n  /** Alias just to improve code readiness. */\n  type MaxWidth = number;\n\n  /**\n   * This component helps to detect or setting a device, that can be used later to create\n   * different layouts optimized for different devices. This detected device is available under\n   * the {@link XComponentAliasAPI.device} property.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'DeviceDetector',\n    xModule: deviceXModule.name,\n    components: { GlobalEvents },\n    props: {\n      /**\n       * Record of the device name, that can be whatever you want `xs`, `mobile`, `big`... And\n       * the max width in pixels for that device.\n       *\n       * @public\n       */\n      breakpoints: {\n        type: Object as PropType<Record<Device, MaxWidth>>,\n        default: () => ({})\n      },\n      /**\n       * Forces a device, ignoring the breakpoints prop.\n       *\n       * @public\n       */\n      force: String as PropType<Device>,\n\n      /**\n       * Time in milliseconds to throttle the resize events used to detect the device.\n       *\n       * @public\n       */\n      throttleMs: {\n        type: Number,\n        default: 100\n      }\n    },\n    setup(props) {\n      const xBus = useXBus();\n\n      /**\n       * The width in pixels of the window where the app is being rendered.\n       *\n       * @internal\n       */\n      const windowWidthPx: Ref<number | null> = ref(null);\n\n      /**\n       * Stores the window width in {@link DeviceDetector.windowWidthPx}.\n       *\n       * @internal\n       */\n      const storeWindowWidth = (): void => {\n        windowWidthPx.value = window.innerWidth;\n      };\n\n      /**\n       * Throttled version of {@link DeviceDetector.storeWindowWidth} function.\n       *\n       * @internal\n       */\n      let throttledStoreWindowWidth = storeWindowWidth;\n\n      /**\n       * List of each of the entries of the breakpoints sorted from the smallest to the biggest\n       * max width.\n       *\n       * @returns A list of the breakpoints sorted by its max width in ascending order.\n       *\n       * @internal\n       */\n      const sortedBreakpoints = computed((): [Device, MaxWidth][] =>\n        Object.entries(props.breakpoints).sort(([, aWidth], [, bWidth]) => aWidth - bWidth)\n      );\n\n      /**\n       * The device detected by this component, or the value provided in {@link DeviceDetector.force}\n       * prop.\n       *\n       * @returns The detected device, or the value provided in {@link DeviceDetector.force}\n       * prop.\n       *\n       * @internal\n       */\n      const detectedDevice = computed((): string | null => {\n        if (props.force) {\n          return props.force;\n        } else if (windowWidthPx.value === null) {\n          return null;\n        } else {\n          return (\n            sortedBreakpoints.value.find(([, width]) => windowWidthPx.value! <= width)?.[0] ?? null\n          );\n        }\n      });\n\n      watch(\n        detectedDevice,\n        device => {\n          xBus.emit('DeviceProvided', device);\n        },\n        { immediate: true }\n      );\n\n      /**\n       * Updates {@link DeviceDetector.throttledStoreWindowWidth} with the throttle time at\n       * {@link DeviceDetector.throttleMs}.\n       *\n       * @param throttleMs - The new duration in milliseconds for the throttle.\n       *\n       * @internal\n       */\n      watch(\n        () => props.throttleMs,\n        throttleMs => {\n          throttledStoreWindowWidth = throttle(storeWindowWidth, throttleMs);\n        },\n        { immediate: true }\n      );\n\n      /**\n       * Initialises the store window width.\n       *\n       * @remarks This is done this way to ensure SSR compatibility.\n       *\n       * @internal\n       */\n      onMounted(() => {\n        storeWindowWidth();\n      });\n\n      return {\n        throttledStoreWindowWidth\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`DeviceProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nThis component renders no element to the DOM, but serves as way to safely detect or set the device\nname given an object containing all the possible breakpoints.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" />\n    {{ $x.device }}\n  </div>\n</template>\n\n<script>\n  import { DeviceDetector } from '@empathyco/x-components/device';\n\n  export default {\n    name: 'DeviceDemo',\n    components: {\n      DeviceDetector\n    },\n    data() {\n      return {\n        breakpoints: {\n          mobile: 600,\n          tablet: 900,\n          desktop: Number.POSITIVE_INFINITY\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the `DeviceDetector` has been forced to always detect the `mobile` device. No\nmatter what the window width is.\n\n_Try resizing the window to check that it never changes_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector force=\"mobile\" :breakpoints=\"breakpoints\" />\n    {{ $x.device }}\n  </div>\n</template>\n\n<script>\n  import { DeviceDetector } from '@empathyco/x-components/device';\n\n  export default {\n    name: 'DeviceDemo',\n    components: {\n      DeviceDetector\n    },\n    data() {\n      return {\n        breakpoints: {\n          mobile: 600,\n          tablet: 900,\n          desktop: Number.POSITIVE_INFINITY\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, the `DeviceDetector` will emit a `DeviceProvided` event, with the new device as the\npayload. This device is stored in a data variable and then displayed.\n\n_Try resizing the browser window!_\n\n```vue live\n<template>\n  <div>\n    <DeviceDetector :breakpoints=\"breakpoints\" @DeviceProvided=\"storeDevice\" />\n    {{ device }}\n  </div>\n</template>\n\n<script>\n  import { DeviceDetector } from '@empathyco/x-components/device';\n\n  export default {\n    name: 'DeviceDemo',\n    components: {\n      DeviceDetector\n    },\n    data() {\n      return {\n        device: 'unknown',\n        breakpoints: {\n          mobile: 600,\n          tablet: 900,\n          desktop: Number.POSITIVE_INFINITY\n        }\n      };\n    },\n    methods: {\n      storeDevice(device) {\n        this.device = device;\n      }\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAgBE;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,gBAAgB;IACtB,OAAO,EAAE,aAAa,CAAC,IAAI;IAC3B,UAAU,EAAE,EAAE,YAAW,EAAG;AAC5B,IAAA,KAAK,EAAE;AACL;;;;;AAKE;AACF,QAAA,WAAW,EAAE;AACX,YAAA,IAAI,EAAE,MAA4C;AAClD,YAAA,OAAO,EAAE,OAAO,EAAE,CAAA;AACnB,SAAA;AACD;;;;AAIE;AACF,QAAA,KAAK,EAAE,MAA0B;AAEjC;;;;AAIE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,GAAE;AACb,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,IAAG,GAAI,OAAO,EAAE,CAAA;AAEtB;;;;AAIE;AACF,QAAA,MAAM,aAAa,GAAuB,GAAG,CAAC,IAAI,CAAC,CAAA;AAEnD;;;;AAIE;QACF,MAAM,gBAAe,GAAI,MAAY;AACnC,YAAA,aAAa,CAAC,KAAM,GAAE,MAAM,CAAC,UAAU,CAAA;AACzC,SAAC,CAAA;AAED;;;;AAIE;QACF,IAAI,yBAAwB,GAAI,gBAAgB,CAAA;AAEhD;;;;;;;AAOE;AACF,QAAA,MAAM,iBAAkB,GAAE,QAAQ,CAAC,MACjC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,EAAE,GAAG,MAAM,CAAC,KAAK,MAAK,GAAI,MAAM,CAAA,CACnF,CAAA;AAED;;;;;;;;AAQE;AACF,QAAA,MAAM,cAAa,GAAI,QAAQ,CAAC,MAAqB;YACnD,IAAI,KAAK,CAAC,KAAK,EAAE;gBACf,OAAO,KAAK,CAAC,KAAK,CAAA;AACpB,aAAA;AAAO,iBAAA,IAAI,aAAa,CAAC,KAAM,KAAI,IAAI,EAAE;AACvC,gBAAA,OAAO,IAAI,CAAA;AACX,aAAA;AAAK,iBAAA;AACL,gBAAA,QACE,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,aAAa,CAAC,KAAK,IAAK,KAAK,CAAC,GAAG,CAAC,CAAA,IAAK,IAAG,EACvF;AACH,aAAA;AACF,SAAC,CAAC,CAAA;AAEF,QAAA,KAAK,CACH,cAAc,EACd,MAAK,IAAK;AACR,YAAA,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAA;AACrC,SAAC,EACD,EAAE,SAAS,EAAE,IAAK,EAAA,CACnB,CAAA;AAED;;;;;;;AAOE;QACF,KAAK,CACH,MAAM,KAAK,CAAC,UAAU,EACtB,UAAW,IAAG;AACZ,YAAA,yBAAwB,GAAI,QAAQ,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAA;AACpE,SAAC,EACD,EAAE,SAAS,EAAE,IAAK,EAAA,CACnB,CAAA;AAED;;;;;;AAME;QACF,SAAS,CAAC,MAAM;AACd,YAAA,gBAAgB,EAAE,CAAA;AACpB,SAAC,CAAC,CAAA;QAEF,OAAO;YACL,yBAAwB;SACzB,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

package/js/x-modules/device/x-module.js

@@ -1,3 +1,4 @@
+import { XPlugin } from '../../plugins/x-plugin.js';
 import { deviceEmitters } from './store/emitters.js';
 import { deviceXStoreModule } from './store/module.js';
 import { deviceWiring } from './wiring.js';
@@ -13,7 +14,8 @@ const deviceXModule = {
     storeModule: deviceXStoreModule,
     storeEmitters: deviceEmitters,
     wiring: deviceWiring
-};
+};
+XPlugin.registerXModule(deviceXModule);
 
 export { deviceXModule };
 //# sourceMappingURL=x-module.js.map

package/js/x-modules/device/x-module.js.map

@@ -1 +1 @@
-{"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/device/x-module.ts"],"sourcesContent":["import { XModule } from '../x-modules.types';\nimport { deviceEmitters } from './store/emitters';\nimport { deviceXStoreModule } from './store/module';\nimport { DeviceXStoreModule } from './store/types';\nimport { deviceWiring } from './wiring';\n\n/**\n * Device {@link XModule} alias.\n *\n * @public\n */\nexport type DeviceXModule = XModule<DeviceXStoreModule>;\n\n/**\n * Device {@link XModule} implementation. This module is auto-registered as soon as you\n * import any component from the `device` entry point.\n *\n * @public\n */\nexport const deviceXModule: DeviceXModule = {\n  name: 'device',\n  storeModule: deviceXStoreModule,\n  storeEmitters: deviceEmitters,\n  wiring: deviceWiring\n};\n"],"names":[],"mappings":";;;;AAaA;;;;;AAKG;AACU,MAAA,aAAa,GAAkB;AAC1C,IAAA,IAAI,EAAE,QAAQ;AACd,IAAA,WAAW,EAAE,kBAAkB;AAC/B,IAAA,aAAa,EAAE,cAAc;AAC7B,IAAA,MAAM,EAAE,YAAY;;;;;"}
+{"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/device/x-module.ts"],"sourcesContent":["import { XModule } from '../x-modules.types';\nimport { XPlugin } from '../../plugins/x-plugin';\nimport { deviceEmitters } from './store/emitters';\nimport { deviceXStoreModule } from './store/module';\nimport { DeviceXStoreModule } from './store/types';\nimport { deviceWiring } from './wiring';\n\n/**\n * Device {@link XModule} alias.\n *\n * @public\n */\nexport type DeviceXModule = XModule<DeviceXStoreModule>;\n\n/**\n * Device {@link XModule} implementation. This module is auto-registered as soon as you\n * import any component from the `device` entry point.\n *\n * @public\n */\nexport const deviceXModule: DeviceXModule = {\n  name: 'device',\n  storeModule: deviceXStoreModule,\n  storeEmitters: deviceEmitters,\n  wiring: deviceWiring\n};\n\nXPlugin.registerXModule(deviceXModule);\n"],"names":[],"mappings":";;;;;AAcA;;;;;AAKG;AACU,MAAA,aAAa,GAAkB;AAC1C,IAAA,IAAI,EAAE,QAAQ;AACd,IAAA,WAAW,EAAE,kBAAkB;AAC/B,IAAA,aAAa,EAAE,cAAc;AAC7B,IAAA,MAAM,EAAE,YAAY;EACpB;AAEF,OAAO,CAAC,eAAe,CAAC,aAAa,CAAC;;;;"}