@empathyco/x-components 3.0.0-alpha.177 → 3.0.0-alpha.179

package/CHANGELOG.md

@@ -3,6 +3,32 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-alpha.179](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.178...@empathyco/x-components@3.0.0-alpha.179) (2022-09-27)
+
+### Features
+
+- add `vue devtools` plugin to ease `XEvents` and `wiring` visualization (#215)
+  ([bd148ec](https://github.com/empathyco/x/commit/bd148ecb9682f8d4161d278c03f110f8f050d323)),
+  closes [EX-7032](https://searchbroker.atlassian.net/browse/EX-7032)
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [3.0.0-alpha.178](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.177...@empathyco/x-components@3.0.0-alpha.178) (2022-09-21)
+
+### Features
+
+- Improve `tailwindcss` types (#730)
+  ([b7ab20c](https://github.com/empathyco/x/commit/b7ab20cfb0faa7f21fdf4aaaa4ae3e6d44bc6a79)),
+  closes [EX-7041](https://searchbroker.atlassian.net/browse/EX-7041)
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 ## [3.0.0-alpha.177](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.176...@empathyco/x-components@3.0.0-alpha.177) (2022-09-21)
 
 ### Features

package/core/index.js

@@ -128,6 +128,7 @@ export { ItemsListInjectionMixin } from '../js/components/items-list-injection.m
 export { xComponentMixin } from '../js/components/x-component.mixin.js';
 export { getXComponentXModuleName, isXComponent } from '../js/components/x-component.utils.js';
 export { infiniteScroll } from '../js/directives/infinite-scroll/infinite-scroll.js';
+export { setupDevtools } from '../js/plugins/devtools/devtools.plugin.js';
 export { BaseXBus, bus } from '../js/plugins/x-bus.js';
 export { XPlugin, xPlugin } from '../js/plugins/x-plugin.js';
 export { createXComponentAPIMixin, getBusAPI, getRootXComponent } from '../js/plugins/x-plugin.mixin.js';

package/core/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/docs/API-reference/api/x-components.installxoptions.md

@@ -21,6 +21,7 @@ export interface InstallXOptions<API extends XAPI = XAPI> extends XPluginOptions
 |  [app?](./x-components.installxoptions.app.md) | VueConstructor \| ComponentOptions&lt;Vue&gt; | <i>(Optional)</i> The Vue component used as root of the application. If it is not passed, no Vue Application is initialized, only plugin installed. |
 |  [bus?](./x-components.installxoptions.bus.md) | [XBus](./x-components.xbus.md) | <i>(Optional)</i> The [XBus](./x-components.xbus.md) used in the [XPlugin](./x-components.xplugin.md)<!-- -->. If not passed an instance of [BaseXBus](./x-components.basexbus.md) will be used. |
 |  [domElement?](./x-components.installxoptions.domelement.md) | Element \| string | <i>(Optional)</i> An Element \| string to indicate the HTML element that will contain the Vue application. If string selector is passed and the element doesn't exits, the [XInstaller](./x-components.xinstaller.md) will create it. |
+|  [onCreateApp?](./x-components.installxoptions.oncreateapp.md) | (app: Vue) =&gt; void | <i>(Optional)</i> Callback to invoke after instantiating the app. |
 |  [plugin?](./x-components.installxoptions.plugin.md) | PluginObject&lt;[XPluginOptions](./x-components.xpluginoptions.md)<!-- -->&gt; | <i>(Optional)</i> The XPlugin which will be installed. If not passed, an instance of [XPlugin](./x-components.xplugin.md) will be installed. |
 |  [vue?](./x-components.installxoptions.vue.md) | VueConstructor | <i>(Optional)</i> The Vue instance used to install the plugin and to create the Application. If not passed the default Vue instance is used. This can be useful to use the <code>localVue</code> in the unit tests. |
 |  [vueOptions?](./x-components.installxoptions.vueoptions.md) | [VueConstructorPartialArgument](./x-components.vueconstructorpartialargument.md) | <i>(Optional)</i> This object can contain any option to pass to Vue instance at the moment of creating the App instance. |

package/docs/API-reference/api/x-components.installxoptions.oncreateapp.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [InstallXOptions](./x-components.installxoptions.md) &gt; [onCreateApp](./x-components.installxoptions.oncreateapp.md)
+
+## InstallXOptions.onCreateApp property
+
+Callback to invoke after instantiating the app.
+
+<b>Signature:</b>
+
+```typescript
+onCreateApp?: (app: Vue) => void;
+```

package/docs/API-reference/api/x-components.md

@@ -191,6 +191,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [namespacedWireDispatchWithoutPayload(moduleName)](./x-components.namespacedwiredispatchwithoutpayload.md) | Creates a namespaced [wireDispatchWithoutPayload()](./x-components.wiredispatchwithoutpayload.md) for the module name passed. |
 |  [normalizeString(string)](./x-components.normalizestring.md) | Trims the string, transforms it to lower case, and removes [combining diacritical marks](https://en.wikipedia.org/wiki/Combining_Diacritical_Marks) from it. |
 |  [setStatus(state, status)](./x-components.setstatus.md) | Sets the request status. Can be used as a mutation. |
+|  [setupDevtools(app)](./x-components.setupdevtools.md) | <b><i>(BETA)</i></b> Setups a plugin for the Vue's devtools adding: - [XEvent](./x-components.xevent.md)<!-- -->s timeline. Every event is recorded in time, and its payload and metadata can be inspected. - Wiring inspector. Events and its wires can be viewed and disabled. |
 |  [State(module, path)](./x-components.state.md) | Generates a computed property which returns the selected state.<!-- -->The decorated property needs to be public for type inference to work. |
 |  [throttle(wire, timeInMs, options)](./x-components.throttle.md) | Creates a throttled [Wire](./x-components.wire.md)<!-- -->. Being throttled means that it will only be executed once every couple of milliseconds given by the <code>timeInMs</code> parameter. |
 |  [toKebabCase(str)](./x-components.tokebabcase.md) | Util to transform string a into kebab case. |

package/docs/API-reference/api/x-components.setupdevtools.md

@@ -0,0 +1,27 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [setupDevtools](./x-components.setupdevtools.md)
+
+## setupDevtools() function
+
+> This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
+Setups a plugin for the Vue's devtools adding: - [XEvent](./x-components.xevent.md)<!-- -->s timeline. Every event is recorded in time, and its payload and metadata can be inspected. - Wiring inspector. Events and its wires can be viewed and disabled.
+
+<b>Signature:</b>
+
+```typescript
+export declare function setupDevtools(app: Vue): void;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  app | Vue | The Vue application the devtools should track. |
+
+<b>Returns:</b>
+
+void
+

package/docs/API-reference/api/x-components.wiremetadata.component.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [WireMetadata](./x-components.wiremetadata.md) &gt; [component](./x-components.wiremetadata.component.md)
+
+## WireMetadata.component property
+
+The component instance that triggered the event emission.
+
+<b>Signature:</b>
+
+```typescript
+component?: Vue;
+```

package/docs/API-reference/api/x-components.wiremetadata.md

@@ -16,6 +16,7 @@ export interface WireMetadata
 
 |  Property | Type | Description |
 |  --- | --- | --- |
+|  [component?](./x-components.wiremetadata.component.md) | Vue | <i>(Optional)</i> The component instance that triggered the event emission. |
 |  [feature?](./x-components.wiremetadata.feature.md) | [QueryFeature](./x-components.queryfeature.md) | <i>(Optional)</i> The [QueryFeature](./x-components.queryfeature.md) that originated the event. |
 |  [id?](./x-components.wiremetadata.id.md) | string | <i>(Optional)</i> The id of the component origin. |
 |  [location?](./x-components.wiremetadata.location.md) | [FeatureLocation](./x-components.featurelocation.md) | <i>(Optional)</i> The [FeatureLocation](./x-components.featurelocation.md) from where the event has been emitted. |

package/docs/API-reference/api/x-components.xeventstypes.md

@@ -22,6 +22,7 @@ Aside from common [XEvents](./x-components.xevent.md)<!-- -->, this interface al
 |  Property | Type | Description |
 |  --- | --- | --- |
 |  [ColumnsNumberProvided](./x-components.xeventstypes.columnsnumberprovided.md) | number | The number of columns of a grid has changed. Payload: the columns number. |
+|  [ModuleRegistered](./x-components.xeventstypes.moduleregistered.md) | [XModuleName](./x-components.xmodulename.md) | A new [XModule](./x-components.xmodule.md) has been registered. Payload: The name of the XModule that has been registered. |
 |  [SnippetCallbackExecuted](./x-components.xeventstypes.snippetcallbackexecuted.md) | { event: [XEvent](./x-components.xevent.md)<!-- -->; callbackReturn: unknown; payload: [ExtractPayload](./x-components.extractpayload.md)<!-- -->&lt;[XEvent](./x-components.xevent.md)<!-- -->&gt;; metadata: [WireMetadata](./x-components.wiremetadata.md)<!-- -->; } | A callback from the snippet has been executed. Payload: An object containing the event that executed the callback, the callback result, and the original event payload and metadata. |
 |  [SuggestionsDisplayed](./x-components.xeventstypes.suggestionsdisplayed.md) | Suggestion\[\] | Any kind of suggestions have been displayed (query-suggestions, popular searches...) Payload: The displayed [suggestions](./x-types.suggestion.md)<!-- -->. |
 |  [TogglePanelStateChanged](./x-components.xeventstypes.togglepanelstatechanged.md) | boolean | The <code>BaseToggleIdPanel</code> <code>isOpen</code> state changed. Payload: the new state. |

package/docs/API-reference/api/x-components.xeventstypes.moduleregistered.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [XEventsTypes](./x-components.xeventstypes.md) &gt; [ModuleRegistered](./x-components.xeventstypes.moduleregistered.md)
+
+## XEventsTypes.ModuleRegistered property
+
+A new [XModule](./x-components.xmodule.md) has been registered. Payload: The name of the XModule that has been registered.
+
+<b>Signature:</b>
+
+```typescript
+ModuleRegistered: XModuleName;
+```

package/docs/API-reference/api/x-components.xplugin.wiring.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [XPlugin](./x-components.xplugin.md) &gt; [wiring](./x-components.xplugin.wiring.md)
+
+## XPlugin.wiring property
+
+<b>Signature:</b>
+
+```typescript
+wiring: Partial<Record<XModuleName, Partial<Record<XEvent, string[]>>>>;
+```

package/js/index.js

@@ -128,6 +128,7 @@ export { ItemsListInjectionMixin } from './components/items-list-injection.mixin
 export { xComponentMixin } from './components/x-component.mixin.js';
 export { getXComponentXModuleName, isXComponent } from './components/x-component.utils.js';
 export { infiniteScroll } from './directives/infinite-scroll/infinite-scroll.js';
+export { setupDevtools } from './plugins/devtools/devtools.plugin.js';
 export { BaseXBus, bus } from './plugins/x-bus.js';
 export { XPlugin, xPlugin } from './plugins/x-plugin.js';
 export { createXComponentAPIMixin, getBusAPI, getRootXComponent } from './plugins/x-plugin.mixin.js';

package/js/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/plugins/devtools/colors.utils.js

@@ -0,0 +1,49 @@
+import { map } from '@empathyco/x-utils';
+import { RootXStoreModule } from '../../store/x.module.js';
+
+/**
+ * Unique color values for the text and background of each module.
+ *
+ * @internal
+ */
+const moduleColors = createModuleColors();
+/**
+ * Creates a dictionary with unique colors for each {@link XModule}.
+ *
+ * @returns A dictionary with unique text and background colors for every {@link XModule}.
+ */
+function createModuleColors() {
+    const xState = RootXStoreModule.state();
+    const modulesCount = Object.keys(xState).length;
+    return map(xState, (moduleName, _, index) => {
+        const hue = Math.trunc((index * 360) / modulesCount);
+        return {
+            textColor: hslToHex(hue, 30, 97.5),
+            backgroundColor: hslToHex(hue, 80, 35)
+        };
+    });
+}
+/**
+ * Transforms HSL values into a hex number.
+ *
+ * @param hue - The hue value, from 0 to 360.
+ * @param saturation - The saturation value, from 0 to 100.
+ * @param lightness - The lightness value, from 0 to 100.
+ * @returns The hex value of the color.
+ * @internal
+ */
+function hslToHex(hue, saturation, lightness) {
+    lightness /= 100;
+    const a = (saturation * Math.min(lightness, 1 - lightness)) / 100;
+    const f = (n) => {
+        const k = (n + hue / 30) % 12;
+        const color = lightness - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+        return Math.round(255 * color)
+            .toString(16)
+            .padStart(2, '0');
+    };
+    return parseInt(`${f(0)}${f(8)}${f(4)}`, 16);
+}
+
+export { hslToHex, moduleColors };
+//# sourceMappingURL=colors.utils.js.map

package/js/plugins/devtools/colors.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.utils.js","sources":["../../../../src/plugins/devtools/colors.utils.ts"],"sourcesContent":["import { InspectorNodeTag } from '@vue/devtools-api';\nimport { map } from '@empathyco/x-utils';\nimport { RootXStoreModule, XModuleState } from '../../store/x.module';\nimport { XModuleName } from '../../x-modules/x-modules.types';\n\n/** Unique text and background colors for each module. */\ntype ModuleColors = Record<XModuleName, Pick<InspectorNodeTag, 'textColor' | 'backgroundColor'>>;\n/**\n * Unique color values for the text and background of each module.\n *\n * @internal\n */\nexport const moduleColors = createModuleColors();\n\n/**\n * Creates a dictionary with unique colors for each {@link XModule}.\n *\n * @returns A dictionary with unique text and background colors for every {@link XModule}.\n */\nfunction createModuleColors(): ModuleColors {\n  const xState = (RootXStoreModule.state as () => XModuleState)();\n  const modulesCount = Object.keys(xState).length;\n  return map(xState, (moduleName, _, index) => {\n    const hue = Math.trunc((index * 360) / modulesCount);\n    return {\n      textColor: hslToHex(hue, 30, 97.5),\n      backgroundColor: hslToHex(hue, 80, 35)\n    };\n  });\n}\n\n/**\n * Transforms HSL values into a hex number.\n *\n * @param hue - The hue value, from 0 to 360.\n * @param saturation - The saturation value, from 0 to 100.\n * @param lightness - The lightness value, from 0 to 100.\n * @returns The hex value of the color.\n * @internal\n */\nexport function hslToHex(hue: number, saturation: number, lightness: number): number {\n  lightness /= 100;\n  const a = (saturation * Math.min(lightness, 1 - lightness)) / 100;\n  const f = (n: number): string => {\n    const k = (n + hue / 30) % 12;\n    const color = lightness - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n    return Math.round(255 * color)\n      .toString(16)\n      .padStart(2, '0');\n  };\n  return parseInt(`${f(0)}${f(8)}${f(4)}`, 16);\n}\n"],"names":[],"mappings":";;;AAOA;;;;;MAKa,YAAY,GAAG,kBAAkB,GAAG;AAEjD;;;;;AAKA,SAAS,kBAAkB;IACzB,MAAM,MAAM,GAAI,gBAAgB,CAAC,KAA4B,EAAE,CAAC;IAChE,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC;IAChD,OAAO,GAAG,CAAC,MAAM,EAAE,CAAC,UAAU,EAAE,CAAC,EAAE,KAAK;QACtC,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,GAAG,GAAG,IAAI,YAAY,CAAC,CAAC;QACrD,OAAO;YACL,SAAS,EAAE,QAAQ,CAAC,GAAG,EAAE,EAAE,EAAE,IAAI,CAAC;YAClC,eAAe,EAAE,QAAQ,CAAC,GAAG,EAAE,EAAE,EAAE,EAAE,CAAC;SACvC,CAAC;KACH,CAAC,CAAC;AACL,CAAC;AAED;;;;;;;;;SASgB,QAAQ,CAAC,GAAW,EAAE,UAAkB,EAAE,SAAiB;IACzE,SAAS,IAAI,GAAG,CAAC;IACjB,MAAM,CAAC,GAAG,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,CAAC,GAAG,SAAS,CAAC,IAAI,GAAG,CAAC;IAClE,MAAM,CAAC,GAAG,CAAC,CAAS;QAClB,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,GAAG,EAAE,IAAI,EAAE,CAAC;QAC9B,MAAM,KAAK,GAAG,SAAS,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;QACtE,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC;aAC3B,QAAQ,CAAC,EAAE,CAAC;aACZ,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;KACrB,CAAC;IACF,OAAO,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;AAC/C;;;;"}

package/js/plugins/devtools/devtools.plugin.js

@@ -0,0 +1,31 @@
+import { setupDevtoolsPlugin } from '@vue/devtools-api';
+import { setupTimelinePlugin } from './timeline.devtools.js';
+import { setupWiringDevtools } from './wiring.devtools.js';
+
+/**
+ * Setups a plugin for the Vue's devtools adding:
+ * - {@link XEvent}s timeline. Every event is recorded in time, and its payload and metadata can be
+ * inspected.
+ * - Wiring inspector. Events and its wires can be viewed and disabled.
+ *
+ * @param app - The Vue application the devtools should track.
+ * @beta
+ */
+function setupDevtools(app) {
+    setupDevtoolsPlugin({
+        id: 'x-components-devtools-plugin',
+        label: 'X Components',
+        packageName: '@empathyco/x-components',
+        homepage: 'https://empathy.co',
+        enableEarlyProxy: true,
+        app: app // FIXME: Infinite loop with types when inferred as a Vue2 app.
+    }, api => {
+        if (api) {
+            setupTimelinePlugin(api);
+            setupWiringDevtools(api);
+        }
+    });
+}
+
+export { setupDevtools };
+//# sourceMappingURL=devtools.plugin.js.map

package/js/plugins/devtools/devtools.plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools.plugin.js","sources":["../../../../src/plugins/devtools/devtools.plugin.ts"],"sourcesContent":["import { setupDevtoolsPlugin, App } from '@vue/devtools-api';\nimport Vue from 'vue';\nimport { setupTimelinePlugin } from './timeline.devtools';\nimport { setupWiringDevtools } from './wiring.devtools';\n\n/**\n * Setups a plugin for the Vue's devtools adding:\n * - {@link XEvent}s timeline. Every event is recorded in time, and its payload and metadata can be\n * inspected.\n * - Wiring inspector. Events and its wires can be viewed and disabled.\n *\n * @param app - The Vue application the devtools should track.\n * @beta\n */\nexport function setupDevtools(app: Vue): void {\n  setupDevtoolsPlugin(\n    {\n      id: 'x-components-devtools-plugin',\n      label: 'X Components',\n      packageName: '@empathyco/x-components',\n      homepage: 'https://empathy.co',\n      enableEarlyProxy: true,\n      app: app as App // FIXME: Infinite loop with types when inferred as a Vue2 app.\n    },\n    api => {\n      if (api) {\n        setupTimelinePlugin(api);\n        setupWiringDevtools(api);\n      }\n    }\n  );\n}\n"],"names":[],"mappings":";;;;AAKA;;;;;;;;;SASgB,aAAa,CAAC,GAAQ;IACpC,mBAAmB,CACjB;QACE,EAAE,EAAE,8BAA8B;QAClC,KAAK,EAAE,cAAc;QACrB,WAAW,EAAE,yBAAyB;QACtC,QAAQ,EAAE,oBAAoB;QAC9B,gBAAgB,EAAE,IAAI;QACtB,GAAG,EAAE,GAAU;KAChB,EACD,GAAG;QACD,IAAI,GAAG,EAAE;YACP,mBAAmB,CAAC,GAAG,CAAC,CAAC;YACzB,mBAAmB,CAAC,GAAG,CAAC,CAAC;SAC1B;KACF,CACF,CAAC;AACJ;;;;"}

package/js/plugins/devtools/timeline.devtools.js

@@ -0,0 +1,98 @@
+import { hslToHex } from './colors.utils.js';
+
+/**
+ * Contains the devtools API.
+ */
+let devtoolsAPI;
+/**
+ * List of all the configured timeline layers for {@link XEvent}s.
+ */
+const timelineLayers = [
+    {
+        id: 'x-components-module-registered-events',
+        regex: /^ModuleRegistered$/,
+        label: 'X registered modules'
+    },
+    {
+        id: 'x-components-user-events',
+        regex: /^User/,
+        label: 'X user events'
+    },
+    {
+        id: 'x-components-request-events',
+        regex: /RequestChanged$/,
+        label: 'X request events'
+    },
+    {
+        id: 'x-components-status-change-events',
+        regex: /Changed$/,
+        label: 'X status change events'
+    },
+    {
+        id: 'x-components-miscellanea-events',
+        regex: /.*/,
+        label: 'X miscellanea events'
+    }
+];
+/** Set containing the different layer ids. */
+const layerIds = new Set(timelineLayers.map(layer => layer.id));
+/**
+ * Retrieves the timeline layer that an {@link XEvent} belongs to.
+ *
+ * @param event - The {@link XEvent} to retrieve its layer id.
+ * @returns The layer id for the {@link XEvent}.
+ */
+function getTimelineLayer(event) {
+    return timelineLayers.find(layer => layer.regex.test(event)).id;
+}
+/**
+ * Configures Vue's devtools timeline with new rows for {@link XEvent}s.
+ *
+ * @param api - Vue's devtools API.
+ * @internal
+ */
+function setupTimelinePlugin(api) {
+    devtoolsAPI = api;
+    timelineLayers.forEach(layer => api.addTimelineLayer({
+        id: layer.id,
+        label: layer.label,
+        color: hslToHex(329, 100, 50)
+    }));
+    api.on.inspectTimelineEvent(payload => {
+        if (layerIds.has(payload.layerId)) {
+            const component = payload.event.data.metadata.component;
+            if (component) {
+                api.highlightElement(component);
+            }
+        }
+    });
+}
+/**
+ * Sends the emission of an {@link XEvent} to the devtools.
+ *
+ * @param event - The emitted {@link XEvent}.
+ * @param value - An object containing both the event payload and its metadata.
+ * @internal
+ */
+function logDevtoolsXEvent(event, value) {
+    if (process.env.NODE_ENV !== 'production') {
+        devtoolsAPI?.addTimelineEvent({
+            event: {
+                title: event,
+                data: {
+                    ...value,
+                    metadata: {
+                        ...value.metadata,
+                        // FIX-ME: copying metadata.component as it is defined as a non-enumerable property.
+                        component: value.metadata.component
+                    }
+                },
+                time: devtoolsAPI?.now()
+            },
+            layerId: getTimelineLayer(event)
+        });
+    }
+}
+
+export { logDevtoolsXEvent, setupTimelinePlugin };
+//# sourceMappingURL=timeline.devtools.js.map

package/js/plugins/devtools/timeline.devtools.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.devtools.js","sources":["../../../../src/plugins/devtools/timeline.devtools.ts"],"sourcesContent":["import { DevtoolsPluginApi } from '@vue/devtools-api';\nimport { Dictionary } from '@empathyco/x-utils';\nimport { XEvent, XEventPayload } from '../../wiring/events.types';\nimport { WirePayload } from '../../wiring/wiring.types';\nimport { hslToHex } from './colors.utils';\n\n/**\n * Contains the devtools API.\n */\nlet devtoolsAPI: DevtoolsPluginApi<Dictionary> | undefined;\n\n/**\n * List of all the configured timeline layers for {@link XEvent}s.\n */\nconst timelineLayers = [\n  {\n    id: 'x-components-module-registered-events',\n    regex: /^ModuleRegistered$/,\n    label: 'X registered modules'\n  },\n  {\n    id: 'x-components-user-events',\n    regex: /^User/,\n    label: 'X user events'\n  },\n\n  {\n    id: 'x-components-request-events',\n    regex: /RequestChanged$/,\n    label: 'X request events'\n  },\n  {\n    id: 'x-components-status-change-events',\n    regex: /Changed$/,\n    label: 'X status change events'\n  },\n  {\n    id: 'x-components-miscellanea-events',\n    regex: /.*/,\n    label: 'X miscellanea events'\n  }\n];\n\n/** Set containing the different layer ids. */\nconst layerIds = new Set(timelineLayers.map(layer => layer.id));\n\n/**\n * Retrieves the timeline layer that an {@link XEvent} belongs to.\n *\n * @param event - The {@link XEvent} to retrieve its layer id.\n * @returns The layer id for the {@link XEvent}.\n */\nfunction getTimelineLayer(event: XEvent): string {\n  return timelineLayers.find(layer => layer.regex.test(event))!.id;\n}\n\n/**\n * Configures Vue's devtools timeline with new rows for {@link XEvent}s.\n *\n * @param api - Vue's devtools API.\n * @internal\n */\nexport function setupTimelinePlugin(api: DevtoolsPluginApi<Dictionary>): void {\n  devtoolsAPI = api;\n  timelineLayers.forEach(layer =>\n    api.addTimelineLayer({\n      id: layer.id,\n      label: layer.label,\n      color: hslToHex(329, 100, 50)\n    })\n  );\n  api.on.inspectTimelineEvent(payload => {\n    if (layerIds.has(payload.layerId)) {\n      const component = (<WirePayload<unknown>>payload.event.data).metadata.component;\n      if (component) {\n        api.highlightElement(component);\n      }\n    }\n  });\n}\n\n/**\n * Sends the emission of an {@link XEvent} to the devtools.\n *\n * @param event - The emitted {@link XEvent}.\n * @param value - An object containing both the event payload and its metadata.\n * @internal\n */\nexport function logDevtoolsXEvent<Event extends XEvent>(\n  event: Event,\n  value: WirePayload<XEventPayload<Event>>\n): void {\n  if (process.env.NODE_ENV !== 'production') {\n    devtoolsAPI?.addTimelineEvent({\n      event: {\n        title: event,\n        data: {\n          ...value,\n          metadata: {\n            ...value.metadata,\n            // FIX-ME: copying metadata.component as it is defined as a non-enumerable property.\n            component: value.metadata.component\n          }\n        },\n        time: devtoolsAPI?.now()\n      },\n      layerId: getTimelineLayer(event)\n    });\n  }\n}\n"],"names":[],"mappings":";;AAMA;;;AAGA,IAAI,WAAsD,CAAC;AAE3D;;;AAGA,MAAM,cAAc,GAAG;IACrB;QACE,EAAE,EAAE,uCAAuC;QAC3C,KAAK,EAAE,oBAAoB;QAC3B,KAAK,EAAE,sBAAsB;KAC9B;IACD;QACE,EAAE,EAAE,0BAA0B;QAC9B,KAAK,EAAE,OAAO;QACd,KAAK,EAAE,eAAe;KACvB;IAED;QACE,EAAE,EAAE,6BAA6B;QACjC,KAAK,EAAE,iBAAiB;QACxB,KAAK,EAAE,kBAAkB;KAC1B;IACD;QACE,EAAE,EAAE,mCAAmC;QACvC,KAAK,EAAE,UAAU;QACjB,KAAK,EAAE,wBAAwB;KAChC;IACD;QACE,EAAE,EAAE,iCAAiC;QACrC,KAAK,EAAE,IAAI;QACX,KAAK,EAAE,sBAAsB;KAC9B;CACF,CAAC;AAEF;AACA,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,cAAc,CAAC,GAAG,CAAC,KAAK,IAAI,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;AAEhE;;;;;;AAMA,SAAS,gBAAgB,CAAC,KAAa;IACrC,OAAO,cAAc,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAE,CAAC,EAAE,CAAC;AACnE,CAAC;AAED;;;;;;SAMgB,mBAAmB,CAAC,GAAkC;IACpE,WAAW,GAAG,GAAG,CAAC;IAClB,cAAc,CAAC,OAAO,CAAC,KAAK,IAC1B,GAAG,CAAC,gBAAgB,CAAC;QACnB,EAAE,EAAE,KAAK,CAAC,EAAE;QACZ,KAAK,EAAE,KAAK,CAAC,KAAK;QAClB,KAAK,EAAE,QAAQ,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,CAAC;KAC9B,CAAC,CACH,CAAC;IACF,GAAG,CAAC,EAAE,CAAC,oBAAoB,CAAC,OAAO;QACjC,IAAI,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;YACjC,MAAM,SAAS,GAA0B,OAAO,CAAC,KAAK,CAAC,IAAK,CAAC,QAAQ,CAAC,SAAS,CAAC;YAChF,IAAI,SAAS,EAAE;gBACb,GAAG,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;aACjC;SACF;KACF,CAAC,CAAC;AACL,CAAC;AAED;;;;;;;SAOgB,iBAAiB,CAC/B,KAAY,EACZ,KAAwC;IAExC,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE;QACzC,WAAW,EAAE,gBAAgB,CAAC;YAC5B,KAAK,EAAE;gBACL,KAAK,EAAE,KAAK;gBACZ,IAAI,EAAE;oBACJ,GAAG,KAAK;oBACR,QAAQ,EAAE;wBACR,GAAG,KAAK,CAAC,QAAQ;;wBAEjB,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,SAAS;qBACpC;iBACF;gBACD,IAAI,EAAE,WAAW,EAAE,GAAG,EAAE;aACzB;YACD,OAAO,EAAE,gBAAgB,CAAC,KAAK,CAAC;SACjC,CAAC,CAAC;KACJ;AACH;;;;"}

package/js/plugins/devtools/wiring.devtools.js

@@ -0,0 +1,118 @@
+import { reduce, forEach } from '@empathyco/x-utils';
+import { filter } from '../../wiring/wires.operators.js';
+import { moduleColors, hslToHex } from './colors.utils.js';
+
+/** The full list of wiring nodes for the inspector. */
+const wiringNodes = {};
+/**
+ * Record of the wires enabled/disabled status.
+ */
+const wiresStatus = {};
+/**
+ * Creates tags given a node representing a wire.
+ *
+ * @param node - The inspector node representing a {@link Wire}.
+ * @returns A list of tags for the given node.
+ */
+function createWireTags({ tags = [], id }) {
+    const newTags = [...tags];
+    if (!wiresStatus[id]) {
+        newTags.push({
+            label: 'disabled',
+            backgroundColor: hslToHex(0, 88, 30),
+            textColor: hslToHex(0, 84, 90)
+        });
+    }
+    return newTags;
+}
+/**
+ * Setups an inspector in Vue's devtools to show the wiring.
+ *
+ * @param api - Vue's devtools API.
+ * @internal
+ */
+function setupWiringDevtools(api) {
+    const inspectorId = 'wiring-inspector';
+    api.addInspector({
+        id: inspectorId,
+        label: 'X-Components Wiring'
+    });
+    api.on.getInspectorTree(payload => {
+        if (payload.inspectorId !== inspectorId) {
+            return;
+        }
+        const query = payload.filter.toLowerCase();
+        payload.rootNodes = reduce(wiringNodes, (nodes, event, eventWires) => {
+            const wiresNodes = 
+            /* If there is no active search, or the event name includes the query, we include all the
+              available wires. */
+            !query || event.toLowerCase().includes(query)
+                ? eventWires
+                : eventWires.filter(node => node.label.toLowerCase().includes(payload.filter.toLowerCase()));
+            if (wiresNodes.length) {
+                nodes.push({
+                    id: event,
+                    label: event,
+                    children: wiresNodes.map(wireNode => ({
+                        ...wireNode,
+                        tags: createWireTags(wireNode)
+                    }))
+                });
+            }
+            return nodes;
+        }, []);
+    });
+    api.on.getInspectorState(payload => {
+        if (payload.inspectorId !== inspectorId) {
+            return;
+        }
+        payload.state = {
+            status: [
+                {
+                    key: 'enabled',
+                    value: wiresStatus[payload.nodeId],
+                    editable: true
+                }
+            ]
+        };
+    });
+    api.on.editInspectorState(payload => {
+        if (payload.inspectorId === inspectorId) {
+            wiresStatus[payload.nodeId] = payload.state.value;
+            api.sendInspectorTree(inspectorId);
+        }
+    });
+}
+/**
+ * Sends the module wiring to Vue's devtools inspector. Additionally, it modifies each wire, adding
+ * a filter function to let it be enabled/disabled from the devtools.
+ *
+ * @param module - The module name this wiring belongs too.
+ * @param wiring - The wiring to save.
+ * @internal
+ */
+function sendWiringToDevtools(module, wiring) {
+    if (process.env.NODE_ENV !== 'production') {
+        forEach(wiring, (event, wires) => {
+            const eventWiring = wiringNodes[event] ?? (wiringNodes[event] = []);
+            forEach(wires, (wireName, wire) => {
+                const id = `${module}-${event}-${wireName}`;
+                wiresStatus[id] = true;
+                wires[wireName] = filter(wire, () => wiresStatus[id]);
+                eventWiring.push({
+                    id,
+                    label: wireName,
+                    tags: [
+                        {
+                            label: module,
+                            ...moduleColors[module]
+                        }
+                    ]
+                });
+            });
+        });
+    }
+}
+
+export { sendWiringToDevtools, setupWiringDevtools };
+//# sourceMappingURL=wiring.devtools.js.map

package/js/plugins/devtools/wiring.devtools.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wiring.devtools.js","sources":["../../../../src/plugins/devtools/wiring.devtools.ts"],"sourcesContent":["import { Dictionary, forEach, reduce } from '@empathyco/x-utils';\nimport { CustomInspectorNode, DevtoolsPluginApi, InspectorNodeTag } from '@vue/devtools-api';\nimport { XEvent } from '../../wiring/events.types';\nimport { filter } from '../../wiring/wires.operators';\nimport { AnyWire, Wiring } from '../../wiring/wiring.types';\nimport { XModuleName } from '../../x-modules/x-modules.types';\nimport { hslToHex, moduleColors } from './colors.utils';\n\n/** The full list of wiring nodes for the inspector. */\nconst wiringNodes: Partial<Record<XEvent, CustomInspectorNode[]>> = {};\n/**\n * Record of the wires enabled/disabled status.\n */\nconst wiresStatus: Record<string, boolean> = {};\n\n/**\n * Creates tags given a node representing a wire.\n *\n * @param node - The inspector node representing a {@link Wire}.\n * @returns A list of tags for the given node.\n */\nfunction createWireTags({ tags = [], id }: CustomInspectorNode): InspectorNodeTag[] {\n  const newTags: InspectorNodeTag[] = [...tags];\n  if (!wiresStatus[id]) {\n    newTags.push({\n      label: 'disabled',\n      backgroundColor: hslToHex(0, 88, 30),\n      textColor: hslToHex(0, 84, 90)\n    });\n  }\n  return newTags;\n}\n\n/**\n * Setups an inspector in Vue's devtools to show the wiring.\n *\n * @param api - Vue's devtools API.\n * @internal\n */\nexport function setupWiringDevtools(api: DevtoolsPluginApi<Dictionary<unknown>>): void {\n  const inspectorId = 'wiring-inspector';\n  api.addInspector({\n    id: inspectorId,\n    label: 'X-Components Wiring'\n  });\n  api.on.getInspectorTree(payload => {\n    if (payload.inspectorId !== inspectorId) {\n      return;\n    }\n    const query = payload.filter.toLowerCase();\n    payload.rootNodes = reduce(\n      wiringNodes,\n      (nodes, event, eventWires) => {\n        const wiresNodes =\n          /* If there is no active search, or the event name includes the query, we include all the\n            available wires. */\n          !query || event.toLowerCase().includes(query)\n            ? eventWires\n            : eventWires.filter(node =>\n                node.label.toLowerCase().includes(payload.filter.toLowerCase())\n              );\n        if (wiresNodes.length) {\n          nodes.push({\n            id: event,\n            label: event,\n            children: wiresNodes.map(wireNode => ({\n              ...wireNode,\n              tags: createWireTags(wireNode)\n            }))\n          });\n        }\n        return nodes;\n      },\n      <CustomInspectorNode[]>[]\n    );\n  });\n\n  api.on.getInspectorState(payload => {\n    if (payload.inspectorId !== inspectorId) {\n      return;\n    }\n    payload.state = {\n      status: [\n        {\n          key: 'enabled',\n          value: wiresStatus[payload.nodeId],\n          editable: true\n        }\n      ]\n    };\n  });\n\n  api.on.editInspectorState(payload => {\n    if (payload.inspectorId === inspectorId) {\n      wiresStatus[payload.nodeId] = payload.state.value;\n      api.sendInspectorTree(inspectorId);\n    }\n  });\n}\n\n/**\n * Sends the module wiring to Vue's devtools inspector. Additionally, it modifies each wire, adding\n * a filter function to let it be enabled/disabled from the devtools.\n *\n * @param module - The module name this wiring belongs too.\n * @param wiring - The wiring to save.\n * @internal\n */\nexport function sendWiringToDevtools(module: XModuleName, wiring: Partial<Wiring>): void {\n  if (process.env.NODE_ENV !== 'production') {\n    forEach(wiring, (event, wires: Dictionary<AnyWire>) => {\n      const eventWiring = wiringNodes[event] ?? (wiringNodes[event] = []);\n      forEach(wires, (wireName, wire) => {\n        const id = `${module}-${event}-${wireName}`;\n        wiresStatus[id] = true;\n        wires[wireName] = filter(wire, () => wiresStatus[id]);\n        eventWiring.push({\n          id,\n          label: wireName,\n          tags: [\n            {\n              label: module,\n              ...moduleColors[module]\n            }\n          ]\n        });\n      });\n    });\n  }\n}\n"],"names":[],"mappings":"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"}

package/js/plugins/x-bus.js

@@ -1,5 +1,6 @@
 import { ReplaySubject } from 'rxjs';
 import { map } from 'rxjs/operators';
+import { logDevtoolsXEvent } from './devtools/timeline.devtools.js';
 
 /**
  * Default {@link XBus} implementation.
@@ -29,6 +30,7 @@ class BaseXBus {
             eventPayload: payload,
             metadata
         };
+        logDevtoolsXEvent(event, value);
         const emitter = this.getOrCreateEmitter(event);
         emitter.next(value);
     }
@@ -61,7 +63,7 @@ class BaseXBus {
             (this.emitters[event] = new ReplaySubject(1)));
     }
 }
-/** @internal The bus instance. Will be replaced by injection */
+/** @internal The bus instance. Will be replaced by injection. */
 const bus = new BaseXBus();
 // TODO Remove this instantiation and replace with injection where used
 

package/js/plugins/x-bus.js.map

@@ -1 +1 @@
-{"version":3,"file":"x-bus.js","sources":["../../../src/plugins/x-bus.ts"],"sourcesContent":["import { Observable, ReplaySubject } from 'rxjs';\nimport { map } from 'rxjs/operators';\nimport { XEvent, XEventPayload } from '../wiring/events.types';\nimport { WireMetadata, WirePayload } from '../wiring/wiring.types';\nimport { Emitter, Emitters, XBus } from './x-bus.types';\n\n/**\n * Default {@link XBus} implementation.\n *\n * @public\n */\nexport class BaseXBus implements XBus {\n  /**\n   * Dictionary to store the created event emitters.\n   *\n   * @internal\n   */\n  protected emitters: Emitters = {};\n\n  /**\n   * Emits an event. See {@link XBus.(emit:2)}.\n   *\n   * @param event - Event to be emitted.\n   * @param payload - Event payload.\n   * @param metadata - Information of who emits the event.\n   */\n  emit<Event extends XEvent>(\n    event: Event,\n    payload?: XEventPayload<Event>,\n    metadata: WireMetadata = { moduleName: null }\n  ): void {\n    // Payload is defined here as an optional argument (which is wrong), but as this\n    // implementation must be used with the type XBus there is no problem\n    const value: WirePayload<XEventPayload<Event>> = {\n      eventPayload: payload as any,\n      metadata\n    };\n    const emitter = this.getOrCreateEmitter(event);\n    emitter.next(value);\n  }\n\n  /**\n   * Retrieves an observable. See {@link XBus.(on:3)}.\n   *\n   * @public\n   * @param event - Event to listener.\n   * @param withMetadata - Option to listener with info about event emitter.\n   * @returns The emitter for the event passed.\n   */\n  on<Event extends XEvent>(\n    event: Event,\n    withMetadata = false\n  ): Observable<WirePayload<XEventPayload<Event>> | XEventPayload<Event>> {\n    return withMetadata\n      ? this.getOrCreateEmitter(event)\n      : this.getOrCreateEmitter(event).pipe(map(value => value.eventPayload));\n  }\n\n  /**\n   * Retrieves an event emitter for a given event.\n   *\n   * @param event - The event to retrieve the emitter for.\n   * @returns The emitter for the event passed.\n   * @remarks The emitter is implemented with a\n   * {@Link https://www.learnrxjs.io/learn-rxjs/subjects/replaysubject | ReplaySubject} to allow any\n   * new subscriber receive the last emitted value.\n   * @internal\n   */\n  protected getOrCreateEmitter<Event extends XEvent>(event: Event): Emitter<Event> {\n    // TODO I Don't get why the types are not working here\n    return (\n      this.emitters[event] ??\n      (this.emitters[event] = new ReplaySubject<WirePayload<XEventPayload<Event>>>(1) as any)\n    );\n  }\n}\n\n/** @internal The bus instance. Will be replaced by injection */\nexport const bus: XBus = new BaseXBus();\n// TODO Remove this instantiation and replace with injection where used\n"],"names":[],"mappings":";;;AAMA;;;;;MAKa,QAAQ;IAArB;;;;;;QAMY,aAAQ,GAAa,EAAE,CAAC;KA0DnC;;;;;;;;IAjDC,IAAI,CACF,KAAY,EACZ,OAA8B,EAC9B,WAAyB,EAAE,UAAU,EAAE,IAAI,EAAE;;;QAI7C,MAAM,KAAK,GAAsC;YAC/C,YAAY,EAAE,OAAc;YAC5B,QAAQ;SACT,CAAC;QACF,MAAM,OAAO,GAAG,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;QAC/C,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACrB;;;;;;;;;IAUD,EAAE,CACA,KAAY,EACZ,YAAY,GAAG,KAAK;QAEpB,OAAO,YAAY;cACf,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC;cAC9B,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,IAAI,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC;KAC3E;;;;;;;;;;;IAYS,kBAAkB,CAAuB,KAAY;;QAE7D,QACE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;aACnB,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,IAAI,aAAa,CAAoC,CAAC,CAAQ,CAAC,EACvF;KACH;CACF;AAED;MACa,GAAG,GAAS,IAAI,QAAQ,GAAG;AACxC;;;;"}
+{"version":3,"file":"x-bus.js","sources":["../../../src/plugins/x-bus.ts"],"sourcesContent":["import { Observable, ReplaySubject } from 'rxjs';\nimport { map } from 'rxjs/operators';\nimport { XEvent, XEventPayload } from '../wiring/events.types';\nimport { WireMetadata, WirePayload } from '../wiring/wiring.types';\nimport { logDevtoolsXEvent } from './devtools/timeline.devtools';\nimport { Emitter, Emitters, XBus } from './x-bus.types';\n\n/**\n * Default {@link XBus} implementation.\n *\n * @public\n */\nexport class BaseXBus implements XBus {\n  /**\n   * Dictionary to store the created event emitters.\n   *\n   * @internal\n   */\n  protected emitters: Emitters = {};\n\n  /**\n   * Emits an event. See {@link XBus.(emit:2)}.\n   *\n   * @param event - Event to be emitted.\n   * @param payload - Event payload.\n   * @param metadata - Information of who emits the event.\n   */\n  emit<Event extends XEvent>(\n    event: Event,\n    payload?: XEventPayload<Event>,\n    metadata: WireMetadata = { moduleName: null }\n  ): void {\n    // Payload is defined here as an optional argument (which is wrong), but as this\n    // implementation must be used with the type XBus there is no problem\n    const value: WirePayload<XEventPayload<Event>> = {\n      eventPayload: payload as any,\n      metadata\n    };\n    logDevtoolsXEvent(event, value);\n    const emitter = this.getOrCreateEmitter(event);\n    emitter.next(value);\n  }\n\n  /**\n   * Retrieves an observable. See {@link XBus.(on:3)}.\n   *\n   * @public\n   * @param event - Event to listener.\n   * @param withMetadata - Option to listener with info about event emitter.\n   * @returns The emitter for the event passed.\n   */\n  on<Event extends XEvent>(\n    event: Event,\n    withMetadata = false\n  ): Observable<WirePayload<XEventPayload<Event>> | XEventPayload<Event>> {\n    return withMetadata\n      ? this.getOrCreateEmitter(event)\n      : this.getOrCreateEmitter(event).pipe(map(value => value.eventPayload));\n  }\n\n  /**\n   * Retrieves an event emitter for a given event.\n   *\n   * @param event - The event to retrieve the emitter for.\n   * @returns The emitter for the event passed.\n   * @remarks The emitter is implemented with a\n   * {@Link https://www.learnrxjs.io/learn-rxjs/subjects/replaysubject | ReplaySubject} to allow any\n   * new subscriber receive the last emitted value.\n   * @internal\n   */\n  protected getOrCreateEmitter<Event extends XEvent>(event: Event): Emitter<Event> {\n    // TODO I Don't get why the types are not working here\n    return (\n      this.emitters[event] ??\n      (this.emitters[event] = new ReplaySubject<WirePayload<XEventPayload<Event>>>(1) as any)\n    );\n  }\n}\n\n/** @internal The bus instance. Will be replaced by injection. */\nexport const bus: XBus = new BaseXBus();\n// TODO Remove this instantiation and replace with injection where used\n"],"names":[],"mappings":";;;;AAOA;;;;;MAKa,QAAQ;IAArB;;;;;;QAMY,aAAQ,GAAa,EAAE,CAAC;KA2DnC;;;;;;;;IAlDC,IAAI,CACF,KAAY,EACZ,OAA8B,EAC9B,WAAyB,EAAE,UAAU,EAAE,IAAI,EAAE;;;QAI7C,MAAM,KAAK,GAAsC;YAC/C,YAAY,EAAE,OAAc;YAC5B,QAAQ;SACT,CAAC;QACF,iBAAiB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QAChC,MAAM,OAAO,GAAG,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;QAC/C,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACrB;;;;;;;;;IAUD,EAAE,CACA,KAAY,EACZ,YAAY,GAAG,KAAK;QAEpB,OAAO,YAAY;cACf,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC;cAC9B,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,IAAI,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC;KAC3E;;;;;;;;;;;IAYS,kBAAkB,CAAuB,KAAY;;QAE7D,QACE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;aACnB,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,IAAI,aAAa,CAAoC,CAAC,CAAQ,CAAC,EACvF;KACH;CACF;AAED;MACa,GAAG,GAAS,IAAI,QAAQ,GAAG;AACxC;;;;"}

package/js/plugins/x-plugin.js

@@ -3,6 +3,7 @@ import { forEach } from '@empathyco/x-utils';
 import Vuex, { Store } from 'vuex';
 import { cleanGettersProxyCache } from '../store/utils/getters-proxy.utils.js';
 import { RootXStoreModule } from '../store/x.module.js';
+import { sendWiringToDevtools } from './devtools/wiring.devtools.js';
 import { bus } from './x-bus.js';
 import { registerStoreEmitters } from './x-emitters.js';
 import { createXComponentAPIMixin } from './x-plugin.mixin.js';
@@ -23,6 +24,7 @@ class XPlugin {
      * @public
      */
     constructor(bus) {
+        this.wiring = {};
         /**
          * Set of the already installed {@link XModule | XModules} to avoid re-registering them.
          *
@@ -166,6 +168,7 @@ class XPlugin {
             // to allow lazy loaded modules work properly.
             this.registerWiring(customizedXModule);
             this.installedXModules.add(xModule.name);
+            this.bus.emit('ModuleRegistered', xModule.name);
         }
     }
     /**
@@ -197,7 +200,8 @@ class XPlugin {
      *
      * @internal
      */
-    registerWiring({ wiring }) {
+    registerWiring({ wiring, name }) {
+        sendWiringToDevtools(name, wiring);
         forEach(wiring, (event, wires) => {
             // Obtain the observable
             const observable = this.bus.on(event, true);