react-dev-inspector
Version:
dev-tool for inspect react components and jump to local IDE for component code.
140 lines (139 loc) • 5.98 kB
JavaScript
;
'use client';
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Inspector = exports.defaultHotkeys = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const hotkeys_js_1 = __importDefault(require("hotkeys-js"));
const utils_1 = require("./utils");
const hooks_1 = require("./hooks");
const Overlay_1 = require("./Overlay");
/**
* `v2.0.0` changes:
* - make 'Ctrl + Shift + Alt + C' as default shortcut on Windows/Linux
* - export `defaultHotkeys`
*/
const defaultHotkeys = () => {
var _a;
return ((_a = navigator.platform) === null || _a === void 0 ? void 0 : _a.startsWith('Mac'))
? ['Ctrl', 'Shift', 'Command', 'C']
: ['Ctrl', 'Shift', 'Alt', 'C'];
};
exports.defaultHotkeys = defaultHotkeys;
const Inspector = (props) => {
const { keys, onHoverElement, onClickElement, onInspectElement, active: controlledActive, onActiveChange, disableLaunchEditor, disable = (process.env.NODE_ENV !== 'development'), children, } = props;
const [isActive, setActive] = (0, react_1.useState)(controlledActive !== null && controlledActive !== void 0 ? controlledActive : false);
// sync state as controlled component
(0, hooks_1.useLayoutEffect)(() => {
if (controlledActive !== undefined) {
setActive(controlledActive);
}
}, [controlledActive]);
(0, react_1.useEffect)(() => {
isActive
? startInspect()
: stopInspect();
return stopInspect;
}, [isActive]);
// hotkeys-js params need string
const hotkey = keys === null
? null
: (keys !== null && keys !== void 0 ? keys : []).join('+');
/** inspector tooltip overlay */
const overlayRef = (0, react_1.useRef)();
const mouseRef = (0, hooks_1.useMousePosition)({ disable });
const activate = (0, hooks_1.useEffectEvent)(() => {
onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(true);
if (controlledActive === undefined) {
setActive(true);
}
});
const deactivate = (0, hooks_1.useEffectEvent)(() => {
onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(false);
if (controlledActive === undefined) {
setActive(false);
}
});
const startInspect = (0, hooks_1.useEffectEvent)(() => {
if (overlayRef.current || disable)
return;
const overlay = new Overlay_1.Overlay();
overlayRef.current = overlay;
(0, hotkeys_js_1.default)(`esc`, deactivate);
const stopCallback = (0, utils_1.setupHighlighter)({
onPointerOver: handleHoverElement,
onClick: handleClickElement,
});
overlay.setRemoveCallback(stopCallback);
// inspect element immediately at mouse point
const initPoint = mouseRef.current;
const initElement = document.elementFromPoint(initPoint.x, initPoint.y);
if (initElement)
handleHoverElement(initElement);
});
const stopInspect = (0, hooks_1.useEffectEvent)(() => {
var _a;
(_a = overlayRef.current) === null || _a === void 0 ? void 0 : _a.remove();
overlayRef.current = undefined;
hotkeys_js_1.default.unbind(`esc`, deactivate);
});
const handleHoverElement = (0, hooks_1.useEffectEvent)((element) => {
var _a;
const overlay = overlayRef.current;
const codeInfo = (0, utils_1.getElementCodeInfo)(element);
const relativePath = codeInfo === null || codeInfo === void 0 ? void 0 : codeInfo.relativePath;
const absolutePath = codeInfo === null || codeInfo === void 0 ? void 0 : codeInfo.absolutePath;
const { fiber, name, title } = (0, utils_1.getElementInspect)(element);
(_a = overlay === null || overlay === void 0 ? void 0 : overlay.inspect) === null || _a === void 0 ? void 0 : _a.call(overlay, [element], title, relativePath !== null && relativePath !== void 0 ? relativePath : absolutePath);
onHoverElement === null || onHoverElement === void 0 ? void 0 : onHoverElement({
element,
fiber,
codeInfo,
name,
});
});
const handleClickElement = (0, hooks_1.useEffectEvent)((element) => {
deactivate();
const codeInfo = (0, utils_1.getElementCodeInfo)(element);
const { fiber, name } = (0, utils_1.getElementInspect)(element);
onClickElement === null || onClickElement === void 0 ? void 0 : onClickElement({
element,
fiber,
codeInfo,
name,
});
if (fiber && codeInfo) {
onInspectElement === null || onInspectElement === void 0 ? void 0 : onInspectElement({
element,
fiber,
codeInfo,
name: name,
});
if (!onInspectElement && !disableLaunchEditor) {
(0, utils_1.gotoServerEditor)(codeInfo);
}
}
});
(0, react_1.useEffect)(() => {
const handleHotKeys = () => {
overlayRef.current
? deactivate()
: activate();
};
const bindKey = (hotkey === null || disable)
? null
: (hotkey || (0, exports.defaultHotkeys)().join('+'));
if (bindKey) {
// https://github.com/jaywcjlove/hotkeys
(0, hotkeys_js_1.default)(bindKey, handleHotKeys);
return () => {
hotkeys_js_1.default.unbind(bindKey, handleHotKeys);
};
}
}, [hotkey, disable]);
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children !== null && children !== void 0 ? children : null }));
};
exports.Inspector = Inspector;