unplugin-react-inspector/dist/client/index.mjs

A plugin to improve the happiness index of react development

import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import styleInject from '/Users/qiuqfang/Desktop/code/unplugin-react-inspector/node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js';
import { createRoot } from 'react-dom/client';
import { memo, useState, useEffect } from 'react';

var css_248z = "body {\n  cursor: pointer;\n}\n.inspector-overlay {\n  border-radius: 5px;\n  padding: 5px 10px;\n  position: fixed;\n  z-index: 1000;\n  box-sizing: content-box;\n  background-color: rgba(255, 0, 0, 0.1);\n  transition: all 0.5s;\n  display: none;\n}\n\n.inspector-info {\n  border-radius: 5px;\n  padding: 5px 10px;\n  position: absolute;\n  background-color: #fff;\n  font-size: 12px;\n  color: #000;\n  left: 50%;\n  transform: translate(-50%, -100%);\n}\n\n#inspector-overlay-checkbox-label {\n  position: fixed;\n  top: 10px;\n  right: 10px;\n  z-index: 1000;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: pointer;\n}\n\n#inspector-overlay-checkbox-label .label-text {\n  margin-left: 5px;\n}\n\n#inspector-overlay-checkbox-label input {\n  cursor: pointer;\n}\n";
styleInject(css_248z);

function debounce(fn, wait = 50, immediate = true) {
    let timer = null;
    return function(...args) {
        if (timer) clearTimeout(timer);
        if (immediate && !timer) {
            fn.apply(this, args);
        }
        timer = setTimeout(()=>{
            fn.apply(this, args);
        }, wait);
    };
}
const InspectorOverlay = /*#__PURE__*/ memo((props)=>{
    const { document  } = window;
    const [fileLocation, setFileLocation] = useState("");
    const [inspectorOverlayStyle, setInspectorOverlayStyle] = useState({});
    const [inspectorInfoStyle, setInspectorInfoStyle] = useState({});
    const [enabledInspector, setEnabledInspector] = useState(props.enabled);
    useEffect(()=>{
        document.addEventListener("mousemove", handleMouseMove);
        document.addEventListener("keydown", (e)=>{
            if (e.key === "Escape") setInspectorOverlayStyle({
                display: "none"
            });
        });
    }, []);
    const handleMouseMove = debounce((e)=>{
        const target = e.target;
        const dataKeyValue = target.getAttribute(props.dataKey);
        if (!dataKeyValue) return;
        const rect = target.getBoundingClientRect();
        const top = rect.top - 5;
        const left = rect.left - 10;
        setInspectorOverlayStyle({
            display: "block",
            width: rect.width,
            height: rect.height,
            top,
            left
        });
        if (top < 60) {
            setInspectorInfoStyle({
                transform: "translate(-50%, 100%)"
            });
        } else {
            setInspectorInfoStyle({});
        }
        setFileLocation(dataKeyValue);
    });
    const handleClick = ()=>{
        fetch(`http://localhost:${props.port}?file=${fileLocation}`, {
            mode: "no-cors"
        });
    };
    return /*#__PURE__*/ jsxs(Fragment, {
        children: [
            enabledInspector && /*#__PURE__*/ jsx("div", {
                id: "inspector-overlay",
                className: "inspector-overlay",
                style: inspectorOverlayStyle,
                onClick: handleClick,
                children: /*#__PURE__*/ jsx("div", {
                    className: "inspector-info",
                    style: inspectorInfoStyle,
                    children: fileLocation
                })
            }),
            /*#__PURE__*/ jsxs("label", {
                id: "inspector-overlay-checkbox-label",
                htmlFor: "inspector-overlay-checkbox",
                children: [
                    /*#__PURE__*/ jsx("input", {
                        id: "inspector-overlay-checkbox",
                        type: "checkbox",
                        name: "inspector-overlay",
                        value: "Inspector",
                        checked: enabledInspector,
                        onChange: ()=>setEnabledInspector(!enabledInspector)
                    }),
                    /*#__PURE__*/ jsx("div", {
                        className: "label-text",
                        children: "Inspector"
                    })
                ]
            })
        ]
    });
});

const createClient = (options)=>{
    console.log("createClient", options);
    const fragment = document.createDocumentFragment();
    const inspectorContainer = document.createElement("div");
    inspectorContainer.setAttribute("id", "unplugin-react-inspector");
    fragment.appendChild(inspectorContainer);
    createRoot(inspectorContainer).render(/*#__PURE__*/ jsx(InspectorOverlay, {
        ...options
    }));
    document.body.appendChild(fragment);
};

export { createClient };