@empathyco/x-components/js/plugins/devtools/timeline.devtools.js

Empathy X Components

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) {
    // eslint-disable-next-line node/prefer-global/process
    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