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

Empathy X Components

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}.
 * @param node.tags - tags node.
 * @param node.id - id node.
 * @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) {
            // eslint-disable-next-line ts/no-unsafe-assignment
            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) {
    // eslint-disable-next-line node/prefer-global/process
    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