livewire-ray-snapshot.js

import {ray, Ray} from "node-ray/web";

const colors = ['green', 'orange', 'red', 'purple', 'blue', 'gray'];
const componentMap = new Map();
let colorIndex = 0;

const Payload = class {
    constructor() {
        this.remotePath = null;
        this.localPath = null;
        this.initialized = false;
        this.data = {
            type: "",
            content: "",
            origin: { function_name: "", file: "", line_number: 0, hostname: "remote" }
        };
    }
    replaceRemotePathWithLocalPath(filePath) {
        if (this.remotePath === null || this.localPath === null) {
            return filePath;
        }
        const pattern = new RegExp("^" + this.remotePath);
        return filePath.replace(pattern, this.localPath);
    }
    getContent() {
        return {};
    }
    toArray() {
        if (!this.initialized) {
            this.initialized = true;
            this.data.type = this.getType();
            this.data.content = this.getContent();
            this.data.origin.file = this.replaceRemotePathWithLocalPath(this.data.origin.file);
        }
        return this.data;
    }
    toJson() {
        return JSON.stringify(this.toArray());
    }
};

const ColorPayload = class extends Payload {
    constructor(color) {
        super();
        this.color = color;
    }
    getType() {
        return "color";
    }
    getContent() {
        return {
            color: this.color
        };
    }
};

const LabelPayload = class extends Payload {
    constructor(label) {
        super();
        this.label = label;
    }
    getType() {
        return "label";
    }
    getContent() {
        return {
            label: this.label
        };
    }
};

if(import.meta.env.VITE_APP_ENV === 'local') {
    document.addEventListener('livewire:init', async () => {
        Ray.useDefaultSettings({
            sending_payload_callback: (r, payload) => {
                if (payload[0].getType() === 'json_string') {
                    const sObj = JSON.parse(payload[0].getContent().value);
                    const componentId = sObj.memo?.id;

                    if (componentId === undefined) {
                        return;
                    }

                    const color = componentMap.get(componentId);

                    const colorPayload = new ColorPayload(color);
                    const labelPayload = new LabelPayload(sObj.memo?.name ?? `id#${componentId}`);

                    payload.push(colorPayload, labelPayload);
                }
            }
        });
        ray().clearAll();
        ray().newScreen('Livewire Snapshots');
        window.Livewire.hook("commit", ({succeed}) => {
            succeed(({snapshot, effect}) => {
                const sObj = JSON.parse(snapshot);
                const componentId = sObj.memo?.id;

                if (componentId === undefined) {
                    return;
                }

                if (!componentMap.has(componentId)) {
                    componentMap.set(componentId, colors[colorIndex]);
                    colorIndex++;
                    if (colorIndex >= colors.length) {
                        colorIndex = 0;
                    }
                }

                const color = componentMap.get(componentId);
                if (typeof sObj.memo?.errors === 'object' && !Array.isArray(sObj.memo.errors) && Object.keys(sObj.memo.errors).length > 0) {
                    let errors = Object.keys(sObj.memo.errors);
                    console.group(` Livewire Snapshot \t%c ${sObj.memo?.name} `, `color:white;background-color:${color};font-weight:bold;`);
                    console.group(`%c Errors: ${errors.length} `, 'color:white;background-color:red;font-weight:bold;')
                    errors.forEach((key) => {
                        console.log(`%c ${key} `, 'background-color:rgb(78, 53, 52)', sObj.memo.errors[key]);
                    });
                    console.groupEnd();
                } else {
                    console.groupCollapsed(` Livewire Snapshot \t%c ${sObj.memo?.name} `, `color:white;background-color:${color};font-weight:bold;`);
                    console.log(`%c Errors: 0 `, 'color:white;background-color:red;font-weight:bold;')
                }
                console.groupCollapsed('%c Memo ', 'color:white;background-color:teal;font-weight:bold;')
                console.log(sObj.memo);
                console.groupEnd();
                console.groupCollapsed('%c Data ', 'color:white;background-color:green;font-weight:bold;')
                console.log(sObj.data);
                console.groupEnd();
                console.groupCollapsed('%c Full Snapshot ', 'color:white;background-color:black;font-weight:bold;')
                console.log(sObj);
                console.groupEnd();
                console.groupEnd();

                ray().toJson(sObj);
            });
        });
    });
} else {
    ray().disable();
}