@empathyco/x-components 3.0.0-alpha.36 → 3.0.0-alpha.360

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;;;;AAIG;AACU,MAAA,YAAY,GAAG,kBAAkB,GAAG;AAEjD;;;;AAIG;AACH,SAAS,kBAAkB,GAAA;AACzB,IAAA,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,KAAI;AAC1C,QAAA,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;AACJ,KAAC,CAAC,CAAC;AACL,CAAC;AAED;;;;;;;;AAQG;SACa,QAAQ,CAAC,GAAW,EAAE,UAAkB,EAAE,SAAiB,EAAA;IACzE,SAAS,IAAI,GAAG,CAAC;AACjB,IAAA,MAAM,CAAC,GAAG,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,CAAC,GAAG,SAAS,CAAC,IAAI,GAAG,CAAC;AAClE,IAAA,MAAM,CAAC,GAAG,CAAC,CAAS,KAAY;QAC9B,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,GAAG,EAAE,IAAI,EAAE,CAAC;AAC9B,QAAA,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;AACtE,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC;aAC3B,QAAQ,CAAC,EAAE,CAAC;AACZ,aAAA,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;AACtB,KAAC,CAAC;IACF,OAAO,QAAQ,CAAC,CAAG,EAAA,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAA,EAAG,CAAC,CAAC,CAAC,CAAC,CAAE,CAAA,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;;;;;;;;AAQG;AACG,SAAU,aAAa,CAAC,GAAQ,EAAA;AACpC,IAAA,mBAAmB,CACjB;AACE,QAAA,EAAE,EAAE,8BAA8B;AAClC,QAAA,KAAK,EAAE,cAAc;AACrB,QAAA,WAAW,EAAE,yBAAyB;AACtC,QAAA,QAAQ,EAAE,oBAAoB;AAC9B,QAAA,gBAAgB,EAAE,IAAI;QACtB,GAAG,EAAE,GAAU;KAChB,EACD,GAAG,IAAG;AACJ,QAAA,IAAI,GAAG,EAAE;YACP,mBAAmB,CAAC,GAAG,CAAC,CAAC;YACzB,mBAAmB,CAAC,GAAG,CAAC,CAAC;AAC1B,SAAA;AACH,KAAC,CACF,CAAC;AACJ;;;;"}

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

@@ -0,0 +1,108 @@
+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-all-events',
+        regex: /^$/,
+        label: 'X events'
+    },
+    {
+        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: /Request(?:Changed|Updated)$/,
+        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) {
+        const timelineEvent = {
+            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()
+        };
+        devtoolsAPI.addTimelineEvent({
+            event: timelineEvent,
+            layerId: getTimelineLayer(event)
+        });
+        devtoolsAPI.addTimelineEvent({
+            event: timelineEvent,
+            layerId: 'x-components-all-events'
+        });
+    }
+}
+
+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-all-events',\n    regex: /^$/,\n    label: 'X events'\n  },\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: /Request(?:Changed|Updated)$/,\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' && devtoolsAPI) {\n    const timelineEvent = {\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    devtoolsAPI.addTimelineEvent({\n      event: timelineEvent,\n      layerId: getTimelineLayer(event)\n    });\n    devtoolsAPI.addTimelineEvent({\n      event: timelineEvent,\n      layerId: 'x-components-all-events'\n    });\n  }\n}\n"],"names":[],"mappings":"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"}

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,72 +1,25 @@
-import { ReplaySubject } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { XPriorityBus } from '@empathyco/x-bus';
+import { logDevtoolsXEvent } from './devtools/timeline.devtools.js';
 
 /**
- * Default {@link XBus} implementation.
+ * Default {@link @empathyco/x-bus#XBus} implementation.
  *
  * @public
  */
-var BaseXBus = /** @class */ (function () {
-    function BaseXBus() {
-        /**
-         * Dictionary to store the created event emitters.
-         *
-         * @internal
-         */
-        this.emitters = {};
-    }
-    /**
-     * Emits an event. See {@link XBus.(emit:2)}.
-     *
-     * @param event - Event to be emitted.
-     * @param payload - Event payload.
-     * @param metadata - Information of who emits the event.
-     */
-    BaseXBus.prototype.emit = function (event, payload, metadata) {
-        if (metadata === void 0) { metadata = { moduleName: null }; }
-        // Payload is defined here as an optional argument (which is wrong), but as this
-        // implementation must be used with the type XBus there is no problem
-        var value = {
-            eventPayload: payload,
-            metadata: metadata
-        };
-        var emitter = this.getOrCreateEmitter(event);
-        emitter.next(value);
-    };
-    /**
-     * Retrieves an observable. See {@link XBus.(on:3)}.
-     *
-     * @public
-     * @param event - Event to listener.
-     * @param withMetadata - Option to listener with info about event emitter.
-     * @returns The emitter for the event passed.
-     */
-    BaseXBus.prototype.on = function (event, withMetadata) {
-        if (withMetadata === void 0) { withMetadata = false; }
-        return withMetadata
-            ? this.getOrCreateEmitter(event)
-            : this.getOrCreateEmitter(event).pipe(map(function (value) { return value.eventPayload; }));
-    };
-    /**
-     * Retrieves an event emitter for a given event.
-     *
-     * @param event - The event to retrieve the emitter for.
-     * @returns The emitter for the event passed.
-     * @remarks The emitter is implemented with a
-     * {@Link https://www.learnrxjs.io/learn-rxjs/subjects/replaysubject | ReplaySubject} to allow any
-     * new subscriber receive the last emitted value.
-     * @internal
-     */
-    BaseXBus.prototype.getOrCreateEmitter = function (event) {
-        var _a;
-        // TODO I Don't get why the types are not working here
-        return ((_a = this.emitters[event]) !== null && _a !== void 0 ? _a : (this.emitters[event] = new ReplaySubject(1)));
-    };
-    return BaseXBus;
-}());
-/** @internal The bus instance. Will be replaced by injection */
-var bus = new BaseXBus();
-// TODO Remove this instantiation and replace with injection where used
+const bus = new XPriorityBus({
+    priorities: {
+        Updated: 2,
+        Changed: 4,
+        FromUrl: 8,
+        User: 16,
+        External: 32,
+        Initialized: 64,
+        Provided: 128,
+        DataReceived: 256,
+        ModuleRegistered: 512
+    },
+    emitCallbacks: [logDevtoolsXEvent]
+});
 
-export { BaseXBus, bus };
+export { bus };
 //# sourceMappingURL=x-bus.js.map

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;;;;;;IAKA;;;;;;QAMY,aAAQ,GAAa,EAAE,CAAC;KA0DnC;;;;;;;;IAjDC,uBAAI,GAAJ,UACE,KAAY,EACZ,OAA8B,EAC9B,QAA6C;QAA7C,yBAAA,EAAA,aAA2B,UAAU,EAAE,IAAI,EAAE;;;QAI7C,IAAM,KAAK,GAAsC;YAC/C,YAAY,EAAE,OAAc;YAC5B,QAAQ,UAAA;SACT,CAAC;QACF,IAAM,OAAO,GAAG,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;QAC/C,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACrB;;;;;;;;;IAUD,qBAAE,GAAF,UACE,KAAY,EACZ,YAAoB;QAApB,6BAAA,EAAA,oBAAoB;QAEpB,OAAO,YAAY;cACf,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC;cAC9B,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,YAAY,GAAA,CAAC,CAAC,CAAC;KAC3E;;;;;;;;;;;IAYS,qCAAkB,GAA5B,UAAmD,KAAY;;;QAE7D,QACE,MAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,oCACnB,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,IAAI,aAAa,CAAoC,CAAC,CAAQ,CAAC,EACvF;KACH;IACH,eAAC;AAAD,CAAC,IAAA;AAED;IACa,GAAG,GAAS,IAAI,QAAQ,GAAG;AACxC;;;;"}
+{"version":3,"file":"x-bus.js","sources":["../../../src/plugins/x-bus.ts"],"sourcesContent":["import { XPriorityBus } from '@empathyco/x-bus';\nimport { XEventsTypes } from '../wiring/events.types';\nimport { WireMetadata } from '../wiring/wiring.types';\nimport { logDevtoolsXEvent } from './devtools/timeline.devtools';\n\n/**\n * Default {@link @empathyco/x-bus#XBus} implementation.\n *\n * @public\n */\nexport const bus = new XPriorityBus<XEventsTypes, WireMetadata>({\n  priorities: {\n    Updated: 2,\n    Changed: 4,\n    FromUrl: 8,\n    User: 16,\n    External: 32,\n    Initialized: 64,\n    Provided: 128,\n    DataReceived: 256,\n    ModuleRegistered: 512\n  },\n  emitCallbacks: [logDevtoolsXEvent]\n});\n"],"names":[],"mappings":";;;AAKA;;;;AAIG;AACU,MAAA,GAAG,GAAG,IAAI,YAAY,CAA6B;AAC9D,IAAA,UAAU,EAAE;AACV,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,OAAO,EAAE,CAAC;AACV,QAAA,IAAI,EAAE,EAAE;AACR,QAAA,QAAQ,EAAE,EAAE;AACZ,QAAA,WAAW,EAAE,EAAE;AACf,QAAA,QAAQ,EAAE,GAAG;AACb,QAAA,YAAY,EAAE,GAAG;AACjB,QAAA,gBAAgB,EAAE,GAAG;AACtB,KAAA;IACD,aAAa,EAAE,CAAC,iBAAiB,CAAC;AACnC,CAAA;;;;"}

package/js/plugins/x-emitters.js

@@ -1,6 +1,4 @@
-import { __assign, __rest } from 'tslib';
-import { debounce } from '../utils/debounce.js';
-import { forEach } from '../utils/object.js';
+import { forEach } from '@empathyco/x-utils';
 import { getGettersProxyFromModule } from '../store/utils/getters-proxy.utils.js';
 
 /**
@@ -8,93 +6,52 @@ import { getGettersProxyFromModule } from '../store/utils/getters-proxy.utils.js
  * changes.
  *
  * @param xModule - The {@link XModule} to register its Store Emitters.
- * @param bus - The {@Link XBus} to emit the events by the Emitters.
+ * @param bus - The {@link @empathyco/x-bus#XBus} to emit the events by the Emitters.
  * @param store - The Vuex store to access to state and getters to watch them.
  *
  * @internal
  */
-function registerStoreEmitters(_a, bus, store) {
-    var name = _a.name, storeEmitters = _a.storeEmitters, storeModule = _a.storeModule;
-    var safeGettersProxy = getGettersProxyFromModule(store.getters, name, storeModule);
-    forEach(storeEmitters, function (event, stateSelector) {
-        var _a = normalizeStateSelector(stateSelector, event), selector = _a.selector, immediate = _a.immediate, filter = _a.filter, options = __rest(_a, ["selector", "immediate", "filter"]);
-        var emit = function (value) {
-            bus.emit(event, value, { moduleName: name });
-        };
-        var watcherSelector = function () { return selector(store.state.x[name], safeGettersProxy); };
-        var debouncedEffect = debounceWatcherEffect(event, function (newValue, oldValue) {
+function registerStoreEmitters({ name, storeEmitters, storeModule }, bus, store) {
+    const safeGettersProxy = getGettersProxyFromModule(store.getters, name, storeModule);
+    forEach(storeEmitters, (event, stateSelector) => {
+        const { selector, immediate, filter, metadata, ...options } = normalizeStateSelector(stateSelector);
+        const watcherSelector = () => selector(store.state.x[name], safeGettersProxy);
+        const emit = (newValue, oldValue) => {
             if (filter(newValue, oldValue)) {
-                emit(newValue);
+                bus.emit(event, newValue, { ...metadata, moduleName: name, oldValue });
             }
-        });
-        store.watch(watcherSelector, debouncedEffect, options);
+        };
+        store.watch(watcherSelector, emit, options);
         if (immediate) {
-            Promise.resolve().then(function () {
-                emit(watcherSelector());
-            });
+            emit(watcherSelector());
         }
     });
 }
-/**
- * This function "wraps" the watcher effect (the callback of the watcher) with debounce to avoid
- * repeating events and request. Right now this function wraps every effect in a debounce and adds
- * an extra debounce to the "SecondLevelEvent" events, to try to delay this events after the state
- * change events.
- *
- * @param event - The {@link XEvent} to emit.
- * @param watcherEffect - The callback to execute.
- * @returns A new function with the `watcherEffect` callback wrapped in debounce.
- */
-function debounceWatcherEffect(event, watcherEffect) {
-    /*
-     * Due the debounce added to the watch callback, the `oldValue` would be the one from the last
-     * watcher execution instead of the last callback execution. This would cause problems receiving
-     * unstable oldValues, used in the Emitter filter.
-     * To solve this, we store the `oldValue` of the watcher in the `previousValue` variable, and we
-     * keep there until the watcher callback is finally executed (after the debounce). Then this
-     * `previousValue` is cleared to store the next `oldValue`.
-     */
-    var previousValue = undefined;
-    var watcherCallback = debounce(function (newValue, oldValue) {
-        watcherEffect(newValue, oldValue);
-        previousValue = undefined;
-    }, 0);
-    /* Only applying the extra debounce to the "SecondLevelEvent" events to avoid repeating outer
-     * effects (requests, URL changes). If we only apply the debounce to all the events we still have
-     * the problem of outer effects. */
-    if (isSecondLevelEventEmitter(event)) {
-        var previousCallback_1 = watcherCallback;
-        var debouncedPreviousCallback_1 = debounce(previousCallback_1, 0);
-        watcherCallback = (function (n, o) {
-            previousCallback_1.cancel();
-            debouncedPreviousCallback_1(n, o);
-        });
-    }
-    return function (newValue, oldValue) {
-        previousValue = previousValue !== undefined ? previousValue : oldValue;
-        watcherCallback(newValue, previousValue);
-    };
-}
 /**
  * Transforms a {@link AnySimpleStateSelector} into a {@link AnyStateSelector}, and sets
  * default values for its properties.
  *
  * @param stateSelector - The state selector to normalize.
- * @param event - The event name of the emitter.
  * @returns A {@link AnyStateSelector} with all the properties set.
  *
  * @internal
  */
-function normalizeStateSelector(stateSelector, event) {
-    var normalizedSelector = isSimpleSelector(stateSelector)
+function normalizeStateSelector(stateSelector) {
+    const selectorOptions = isSimpleSelector(stateSelector)
         ? { selector: stateSelector }
         : stateSelector;
-    return __assign({ deep: false, immediate: false, filter: isSecondLevelEventEmitter(event)
-            ? function (newValue, oldValue) { return !hasPayloadChanged(newValue, oldValue); }
-            : function () { return true; } }, normalizedSelector);
+    return {
+        deep: false,
+        immediate: false,
+        filter: () => true,
+        metadata: {
+            replaceable: true
+        },
+        ...selectorOptions
+    };
 }
 /**
- * Checks if a the type of the store emitter selector is simple or complex. This selector can be
+ * Checks if 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.
@@ -104,43 +61,6 @@ function normalizeStateSelector(stateSelector, event) {
  */
 function isSimpleSelector(stateSelector) {
     return typeof stateSelector === 'function';
-}
-// TODO: Generalize the Naming of the Events to take this into account
-var secondLevelEvents = [/RequestChanged$/, /UrlStateChanged$/];
-/**
- * Function to detect if an {@link XEvent} is a "SecondLevelEvent", to treat it differently.
- *
- * @param event - The name of the {@link XEvent} to check.
- * @returns True if is an `SecondLevelEvent`, False otherwise.
- *
- * @internal
- */
-function isSecondLevelEventEmitter(event) {
-    return secondLevelEvents.some(function (regex) { return regex.test(event); });
-}
-/**
- * Function to filter if a payload of an {@link XEvent} has really changed or not. It only
- * compares the first level of fields and not deeply, to avoid CPU consuming task here.
- *
- * @param request1 - First request to compare.
- * @param request2 - Second request to compare.
- * @returns True if the two objects are different, false otherwise.
- *
- * @internal
- */
-function hasPayloadChanged(request1, request2) {
-    if (request1 === request2) {
-        return true;
-    }
-    if (!request1 || !request2) {
-        return false;
-    }
-    var keys1 = Object.keys(request1);
-    var keys2 = Object.keys(request2);
-    if (keys1.length !== keys2.length) {
-        return false;
-    }
-    return !keys1.some(function (key) { return request1[key] !== request2[key]; });
 }
 
 export { isSimpleSelector, registerStoreEmitters };