@empathyco/x-components 3.0.0-alpha.13 → 3.0.0-alpha.130

package/js/plugins/x-plugin.js

@@ -1,28 +1,13 @@
-import { __rest, __assign } from 'tslib';
-import '../utils/array.js';
-import '../utils/function.js';
-import '../utils/cancellable-promise.js';
-import '../utils/clone.js';
-import '../utils/currency-formatter.js';
-import '../utils/debounce.js';
-import '../utils/filters.js';
-import '../utils/get-url-parameters.js';
-import '../utils/html.js';
-import '../utils/normalize.js';
-import '../utils/number.js';
-import { forEach } from '../utils/object.js';
-import '../utils/sanitize.js';
-import '../utils/storage.js';
-import '../utils/string.js';
-import '../utils/throttle.js';
 import { deepMerge } from '@empathyco/x-deep-merge';
+import { forEach } from '@empathyco/x-utils';
 import Vuex, { Store } from 'vuex';
 import { FILTERS_REGISTRY } from '../filters/filters.registry.js';
-import { getGettersProxyFromModule, cleanGettersProxyCache } from '../store/utils/get-getters-proxy.js';
+import { cleanGettersProxyCache } from '../store/utils/getters-proxy.utils.js';
 import { RootXStoreModule } from '../store/x.module.js';
 import { bus } from './x-bus.js';
-import { assertXPluginOptionsAreValid } from './x-plugin.utils.js';
+import { registerStoreEmitters } from './x-emitters.js';
 import { createXComponentAPIMixin } from './x-plugin.mixin.js';
+import { assertXPluginOptionsAreValid } from './x-plugin.utils.js';
 
 /**
  * Vue plugin that initializes the properties needed by the x-components, and exposes the events bus
@@ -30,14 +15,15 @@ import { createXComponentAPIMixin } from './x-plugin.mixin.js';
  *
  * @public
  */
-var XPlugin = /** @class */ (function () {
+class XPlugin {
     /**
      * Creates a new instance of the XPlugin with the given bus passed as parameter.
      *
      * @param bus - The {@link XBus} implementation to use for the plugin.
+     *
      * @public
      */
-    function XPlugin(bus) {
+    constructor(bus) {
         /**
          * Set of the already installed {@link XModule | XModules} to avoid re-registering them.
          *
@@ -55,38 +41,41 @@ var XPlugin = /** @class */ (function () {
         this.isInstalled = false;
         this.bus = bus;
     }
-    Object.defineProperty(XPlugin, "adapter", {
-        /**
-         * {@link @empathyco/x-adapter#SearchAdapter | SearchAdapter} Is the middleware between
-         * the components and our API where data can be mapped to client needs.
-         * This property is only available after installing the plugin.
-         *
-         * @returns The installed adapter.
-         * @throws If this property is accessed before calling `Vue.use(xPlugin)`.
-         * @public
-         */
-        get: function () {
-            return this.getInstance().adapter;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(XPlugin, "bus", {
-        /**
-         * Exposed {@link XBus}, so any kind of application can subscribe to {@link XEventsTypes}
-         * without having to pass through a component.
-         * This property is only available after installing the plugin.
-         *
-         * @returns The installed bus.
-         * @throws If this property is accessed before calling `Vue.use(xPlugin)`.
-         * @public
-         */
-        get: function () {
-            return this.getInstance().bus;
-        },
-        enumerable: false,
-        configurable: true
-    });
+    /**
+     * {@link @empathyco/x-typesm#XComponentsAdapter | XComponentsAdapter} Is the middleware
+     * between the components and our API where data can be mapped to client needs.
+     * This property is only available after installing the plugin.
+     *
+     * @returns The installed adapter.
+     * @throws If this property is accessed before calling `Vue.use(xPlugin)`.
+     * @public
+     */
+    static get adapter() {
+        return this.getInstance().adapter;
+    }
+    /**
+     * Exposed {@link XBus}, so any kind of application can subscribe to {@link XEventsTypes}
+     * without having to pass through a component.
+     * This property is only available after installing the plugin.
+     *
+     * @returns The installed bus.
+     * @throws If this property is accessed before calling `Vue.use(xPlugin)`.
+     * @public
+     */
+    static get bus() {
+        return this.getInstance().bus;
+    }
+    /**
+     * {@link https://vuex.vuejs.org | Vuex Store} Is the place where all shared data
+     * is saved.
+     *
+     * @returns The installed store.
+     * @throws If this property is accessed before calling `Vue.use(xPlugin)`.
+     * @public
+     */
+    static get store() {
+        return this.getInstance().store;
+    }
     /**
      * Safely retrieves the installed instance of the XPlugin.
      *
@@ -94,26 +83,28 @@ var XPlugin = /** @class */ (function () {
      * @throws If this method is called before calling `Vue.use(xPlugin)`.
      * @internal
      */
-    XPlugin.getInstance = function () {
+    static getInstance() {
         if (!this.instance) {
             throw Error("XPlugin must be installed before accessing it's API.");
         }
         return this.instance;
-    };
+    }
     /**
      * If the plugin has already been installed, it immediately registers a {@link XModule}. If it
      * has not been installed yet, it stores the module in a list until the plugin is installed.
      *
      * @param xModule - The module to register.
+     *
+     * @public
      */
-    XPlugin.registerXModule = function (xModule) {
+    static registerXModule(xModule) {
         if (this.instance) {
             this.instance.registerXModule(xModule);
         }
         else {
             this.lazyRegisterXModule(xModule);
         }
-    };
+    }
     /**
      * Utility method for resetting the installed instance of the plugin.
      *
@@ -121,29 +112,31 @@ var XPlugin = /** @class */ (function () {
      *
      * @internal
      */
-    XPlugin.resetInstance = function () {
+    static resetInstance() {
         cleanGettersProxyCache();
         this.instance = undefined;
-    };
+    }
     /**
-     * Stores the {@link XModule} in a dictionary, so it can be registered later in the install
+     * Stores the {@link XModule} in a dictionary, so it can be registered later in the installation
      * process.
      *
      * @param xModule - The module to register.
+     *
      * @internal
      */
-    XPlugin.lazyRegisterXModule = function (xModule) {
+    static lazyRegisterXModule(xModule) {
         this.pendingXModules[xModule.name] = xModule;
-    };
+    }
     /**
      * Installs the plugin into the Vue instance.
      *
      * @param vue - The GlobalVue object.
      * @param options - The options to install this plugin with.
      * @throws If the XPlugin has already been installed, or the options are not valid.
+     *
      * @internal
      */
-    XPlugin.prototype.install = function (vue, options) {
+    install(vue, options) {
         if (this.isInstalled) {
             throw new Error('XPlugin has already been installed');
         }
@@ -152,90 +145,81 @@ var XPlugin = /** @class */ (function () {
         this.vue = vue;
         this.options = options;
         this.adapter = options.adapter;
-        this.createAdapterConfigChangedListener();
         this.registerStore();
         this.applyMixins();
         this.registerFilters();
         this.registerInitialModules();
         this.registerPendingXModules();
         this.isInstalled = true;
-    };
+    }
     /**
      * Performs the registration of a {@link XModule}.
      *
      * @param xModule - The module to register.
+     *
      * @internal
      */
-    XPlugin.prototype.registerXModule = function (_a) {
-        var name = _a.name, wiring = _a.wiring, storeModule = _a.storeModule, storeEmitters = _a.storeEmitters;
-        if (!this.installedXModules.has(name)) {
-            this.registerStoreModule(name, storeModule);
-            this.registerWiring(name, wiring);
-            this.registerStoreEmitters(name, storeModule, storeEmitters);
-            this.installedXModules.add(name);
+    registerXModule(xModule) {
+        if (!this.installedXModules.has(xModule.name)) {
+            const customizedXModule = this.customizeXModule(xModule);
+            this.registerStoreModule(customizedXModule);
+            this.registerStoreEmitters(customizedXModule);
+            // The wiring must be registered after the store emitters
+            // to allow lazy loaded modules work properly.
+            this.registerWiring(customizedXModule);
+            this.installedXModules.add(xModule.name);
         }
-    };
+    }
+    /**
+     * Performs a customization of a {@link XModule} using the XPlugin public and private options.
+     *
+     * @param xModule - The module to customize.
+     * @returns The customized xModule.
+     *
+     * @internal
+     */
+    customizeXModule({ name, wiring, storeModule, storeEmitters, ...restXModule }) {
+        const { wiring: wiringOptions, config } = this.options.xModules?.[name] ?? {};
+        const { storeModule: storeModuleOptions, storeEmitters: emittersOptions } = this.options.__PRIVATE__xModules?.[name] ?? {};
+        return {
+            name,
+            wiring: wiringOptions ? deepMerge({}, wiring, wiringOptions) : wiring,
+            storeModule: this.customizeStoreModule(storeModule, storeModuleOptions ?? {}, config),
+            storeEmitters: emittersOptions
+                ? deepMerge({}, storeEmitters, emittersOptions)
+                : storeEmitters,
+            ...restXModule
+        };
+    }
     /**
      * Performs the registration of the wiring, retrieving the observable for each event, and
      * executing each wire.
      *
-     * @param name - The name of the {@link XModule} of the wiring.
-     * @param wiring - The wiring to register.
+     * @param xModule - The {@link XModule} to register its wiring.
+     *
      * @internal
      */
-    XPlugin.prototype.registerWiring = function (name, wiring) {
-        var _this = this;
-        var _a;
-        var wiringOptions = (_a = this.getXModuleOptions(name)) === null || _a === void 0 ? void 0 : _a.wiring;
-        var customizedWiring = wiringOptions
-            ? deepMerge({}, wiring, wiringOptions)
-            : wiring;
-        forEach(customizedWiring, function (event, wires) {
+    registerWiring({ wiring }) {
+        forEach(wiring, (event, wires) => {
             // Obtain the observable
-            var observable = _this.bus.on(event, true);
+            const observable = this.bus.on(event, true);
             // Register event wires
-            forEach(wires, function (_, wire) {
-                wire(observable, _this.store, _this.bus.on.bind(_this.bus));
+            forEach(wires, (_, wire) => {
+                wire(observable, this.store, this.bus.on.bind(this.bus));
             });
         });
-    };
+    }
     /**
      * Registers a {@link https://vuex.vuejs.org/ | Vuex} store module under the 'x' module.
      *
-     * @param name - The module name.
-     * @param storeModule - The module definition to register.
-     * @internal
-     */
-    XPlugin.prototype.registerStoreModule = function (name, storeModule) {
-        var _a, _b, _c;
-        var storeModuleOptions = (_b = (_a = this.getPrivateXModuleOptions(name)) === null || _a === void 0 ? void 0 : _a.storeModule) !== null && _b !== void 0 ? _b : {};
-        var configOptions = (_c = this.getXModuleOptions(name)) === null || _c === void 0 ? void 0 : _c.config;
-        var customizedStoreModule = this.customizeStoreModule(storeModule, storeModuleOptions, configOptions);
-        customizedStoreModule.namespaced = true;
-        this.store.registerModule(['x', name], customizedStoreModule);
-    };
-    /**
-     * Retrieves the overridden private options of an {@link XModule}.
+     * @param xModule - The {@link XModule} to register its Store Module.
      *
-     * @param name - The module name.
-     * @returns Private options of the {@link XModule}.
      * @internal
      */
-    XPlugin.prototype.getPrivateXModuleOptions = function (name) {
-        var _a;
-        return (_a = this.options.__PRIVATE__xModules) === null || _a === void 0 ? void 0 : _a[name];
-    };
-    /**
-     * Retrieves the overridden public options of an {@link XModule}.
-     *
-     * @param name - The module name.
-     * @returns Public options of the {@link XModule}.
-     * @internal
-     */
-    XPlugin.prototype.getXModuleOptions = function (name) {
-        var _a;
-        return (_a = this.options.xModules) === null || _a === void 0 ? void 0 : _a[name];
-    };
+    registerStoreModule({ name, storeModule }) {
+        storeModule.namespaced = true;
+        this.store.registerModule(['x', name], storeModule);
+    }
     /**
      * Overrides a {@link https://vuex.vuejs.org/ | Vuex} store module definition.
      *
@@ -248,175 +232,109 @@ var XPlugin = /** @class */ (function () {
      * @param moduleOptions - The state, actions, mutations and getters to override the defaultModule.
      * @param configOptions - The state config to override the moduleOptions.
      * @returns The {@link XStoreModule} customized.
+     *
      * @internal
      */
-    XPlugin.prototype.customizeStoreModule = function (_a, _b, configOptions) {
-        var defaultState = _a.state, actionsGettersMutations = __rest(_a, ["state"]);
-        var xModuleState = _b.state, newActionsGettersMutations = __rest(_b, ["state"]);
-        var configOptionsObject = configOptions ? { config: configOptions } : {};
-        var customizedModule = deepMerge({}, actionsGettersMutations, newActionsGettersMutations);
+    customizeStoreModule({ state: defaultState, ...actionsGettersMutations }, { state: xModuleState, ...newActionsGettersMutations }, configOptions) {
+        const configOptionsObject = configOptions ? { config: configOptions } : {};
+        const customizedModule = deepMerge({}, actionsGettersMutations, newActionsGettersMutations);
         customizedModule.state = deepMerge(defaultState(), xModuleState, configOptionsObject);
         return customizedModule;
-    };
+    }
     /**
      * Registers the store emitters, making them emit the event when the part of the state selected
      * changes.
      *
-     * @param name - The module name.
-     * @param storeModule - The store module to retrieve its state and getters.
-     * @param storeEmitters - The store emitters to register.
-     * @internal
-     */
-    XPlugin.prototype.registerStoreEmitters = function (name, storeModule, storeEmitters) {
-        var _this = this;
-        var _a;
-        var storeEmittersOptions = (_a = this.getPrivateXModuleOptions(name)) === null || _a === void 0 ? void 0 : _a.storeEmitters;
-        var customizedStoreEmitters = storeEmittersOptions
-            ? deepMerge({}, storeEmitters, storeEmittersOptions)
-            : storeEmitters;
-        var safeGettersProxy = getGettersProxyFromModule(this.store.getters, name, storeModule);
-        forEach(customizedStoreEmitters, function (event, stateSelector) {
-            var _a = _this.normalizeStateSelector(stateSelector), selector = _a.selector, immediate = _a.immediate, filter = _a.filter, options = __rest(_a, ["selector", "immediate", "filter"]);
-            _this.store.watch(function (state) { return selector(state.x[name], safeGettersProxy); }, function (newValue, oldValue) {
-                if (filter(newValue, oldValue)) {
-                    _this.bus.emit(event, newValue, { moduleName: name });
-                }
-            }, options);
-            if (immediate) {
-                Promise.resolve().then(function () {
-                    _this.bus.emit(event, selector(_this.store.state.x[name], safeGettersProxy));
-                });
-            }
-        });
-    };
-    /**
-     * Transforms a {@link AnySimpleStateSelector} into a {@link AnyStateSelector}, and sets
-     * default values for its properties.
+     * @param xModule - The {@link XModule} to register its Store Emitters.
      *
-     * @param stateSelector - The state selector to normalize.
-     * @returns A {@link AnyStateSelector} with all the properties set.
      * @internal
      */
-    XPlugin.prototype.normalizeStateSelector = function (stateSelector) {
-        var normalizedSelector = this.isSimpleSelector(stateSelector)
-            ? { selector: stateSelector }
-            : stateSelector;
-        return __assign({ deep: false, immediate: false, filter: function () { return true; } }, normalizedSelector);
-    };
+    registerStoreEmitters(xModule) {
+        registerStoreEmitters(xModule, this.bus, this.store);
+    }
     /**
      * Registers the {@link https://vuex.vuejs.org/ | Vuex} store. If the store has not been passed
      * through the {@link XPluginOptions} object, it creates one, and injects it in the Vue
-     * prototype. Then it register an x module in the store, to safe scope all the
+     * prototype. Then it registers an x module in the store, to safe scope all the
      * {@link XModule | XModules} dynamically installed.
      *
      * @internal
      */
-    XPlugin.prototype.registerStore = function () {
-        var _a;
+    registerStore() {
         this.vue.use(Vuex); // We can safely install Vuex because if it is already installed Vue
         // will simply ignore it
         this.store =
-            (_a = this.options.store) !== null && _a !== void 0 ? _a : new Store({
-                strict: process.env.NODE_ENV !== 'production'
-            });
+            this.options.store ??
+                new Store({
+                    strict: process.env.NODE_ENV !== 'production'
+                });
         if (!this.options.store) {
             this.vue.prototype.$store = this.store;
         }
         this.store.registerModule('x', RootXStoreModule);
-    };
+    }
     /**
      * Applies the {@link createXComponentAPIMixin} mixin in the global Vue.
      *
      * @internal
      */
-    XPlugin.prototype.applyMixins = function () {
+    applyMixins() {
         this.vue.mixin(createXComponentAPIMixin(this.bus));
-    };
+    }
     /**
      * Registers the initial {@link XModule | XModules} during the {@link XPlugin} installation.
      *
      * @internal
      */
-    XPlugin.prototype.registerInitialModules = function () {
-        var _this = this;
-        var _a;
-        (_a = this.options.initialXModules) === null || _a === void 0 ? void 0 : _a.forEach(function (xModule) {
-            _this.registerXModule(xModule);
+    registerInitialModules() {
+        this.options.initialXModules?.forEach(xModule => {
+            this.registerXModule(xModule);
         });
-    };
+    }
     /**
      * Registers the pending {@link XModule | XModules}, that requested to be registered before the
      * installation of the plugin.
      *
      * @internal
      */
-    XPlugin.prototype.registerPendingXModules = function () {
-        var _this = this;
-        forEach(XPlugin.pendingXModules, function (_, xModule) {
-            _this.registerXModule(xModule);
+    registerPendingXModules() {
+        forEach(XPlugin.pendingXModules, (_, xModule) => {
+            this.registerXModule(xModule);
         });
         XPlugin.pendingXModules = {};
-    };
-    /**
-     * If the received adapter supports it, it registers a listener to emit the
-     * {@link XEventsTypes.AdapterConfigChanged} event whenever the config of it changes.
-     *
-     * @internal
-     */
-    XPlugin.prototype.createAdapterConfigChangedListener = function () {
-        var _this = this;
-        var _a, _b;
-        (_b = (_a = this.options.adapter).addConfigChangedListener) === null || _b === void 0 ? void 0 : _b.call(_a, function (newAdapterConfig) {
-            _this.bus.emit('AdapterConfigChanged', newAdapterConfig);
-        });
-    };
-    /**
-     * Checks if a the type of the store emitter selector is simple or complex. This selector can be
-     * a function if it is simple or an object with the selector and other options if it is complex.
-     *
-     * @param stateSelector - The store emitter selector.
-     * @returns A boolean which flags if the stateSelector is simple (function) or complex (object).
-     * @internal
-     */
-    XPlugin.prototype.isSimpleSelector = function (stateSelector) {
-        return typeof stateSelector === 'function';
-    };
+    }
     /**
      * Registers filters globally.
      *
      * @internal
      */
-    XPlugin.prototype.registerFilters = function () {
-        var _this = this;
-        forEach(FILTERS_REGISTRY, function (filterName, filterFunction) {
-            return _this.vue.filter(filterName, filterFunction);
-        });
-    };
-    /**
-     * Record of modules that have been tried to be installed before the installation of the plugin.
-     *
-     * @internal
-     */
-    XPlugin.pendingXModules = {};
-    return XPlugin;
-}());
+    registerFilters() {
+        forEach(FILTERS_REGISTRY, (filterName, filterFunction) => this.vue.filter(filterName, filterFunction));
+    }
+}
+/**
+ * Record of modules that have been tried to be installed before the installation of the plugin.
+ *
+ * @internal
+ */
+XPlugin.pendingXModules = {};
 /**
  * Vue plugin that modifies each component instance, extending them with the
  * {@link XComponentAPI | X Component API }.
  *
  * @example
- * Minimal installation example. A search adapter is needed for the plugin to work, and connect to
- * the API.
+ * Minimal installation example. An API adapter is needed to connect the X Components with the
+ * suggestions, search, or tagging APIs. In this example we are using the default Empathy's platform
+ * adapter.
+ *
  * ```typescript
- * const adapter = new EmpathyAdapterBuilder()
- *  .withConfiguration({instance: 'my-instance-id'})
- *  .build();
- * Vue.use(xPlugin, { adapter });
+ *  import { platformAdapter } from '@empathyco/x-adapter-platform';
+ *  Vue.use(xPlugin, { adapter: platformAdapter });
  * ```
  *
  * @example
  * If you are using {@link https://vuex.vuejs.org/ | Vuex} in your project you must install its
- *   plugin, and instantiate an store before installing the XPlugin:
+ *   plugin, and instantiate a store before installing the XPlugin:
  * ```typescript
  * Vue.use(Vuex);
  * const store = new Store({ ... });
@@ -424,7 +342,7 @@ var XPlugin = /** @class */ (function () {
  * ```
  * @public
  */
-var xPlugin = new XPlugin(bus);
+const xPlugin = new XPlugin(bus);
 
 export { XPlugin, xPlugin };
 //# sourceMappingURL=x-plugin.js.map