[feat] Show component file path in Elements panel / 支持在 elements 面板显示组件文件路径

[tjx666]

描述

像 https://github.com/webfansplz/vite-plugin-vue-inspector 一样：

使用场景

有时候两个组件在网页上非常接近不好选中，如果可以直接在 elements 面板中清除的看到某个元素对应哪个文件就好了

[zthxxx]

@tjx666 可以添加 babel 插件，提供了 @react-dev-inspector/babel-plugin

https://react-dev-inspector.zthxxx.me/docs/compiler-plugin#react-dev-inspectorbabel-plugin

效果如：

// Input
<div />

// Output
<div data-inspector-relative-path="src/path/Component.tsx" data-inspector-line="10" data-inspector-column="6" />

[tjx666]

抱歉，我应该先仔细看一下文档的。

试用了下，我感觉更理想的效果：

1. 只注入一个属性：data-inspector-path="src/a.ts?line=100&col=21"
2. 应该只在快捷键开启时显示这个属性
3. 貌似和 mui 冲突

[zthxxx]

Get, 明白你说的问题点呢～

近期目标是提供一个右键菜单以支持选择父级各个组件。

[zthxxx]

@tjx666

• right-click panel added in beta version >= 2.1.0-beta.9, PR #174
• npm i -D react-dev-inspector@v2.1.0-beta.9
• Online Showcase Page

[tjx666]

@zthxxx

⨯ Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/yutengjing/code/xxx/web/node_modules/solid-element/dist/index.js from /Users/yutengjing/code/xxx/web/node_modules/@react-dev-inspector/web-components/dist/cjs/index.js not supported.

[zthxxx]

@tjx666 报错信息和截图似乎没有关联，发下完整配置信息和完整报错栈呢

examples/nextjs-custom-server 是能正常启动的

https://github.com/zthxxx/react-dev-inspector/blob/dev/examples/nextjs-custom-server/server.mjs

[tjx666]

@zthxxx

1. open https://stackblitz.com/edit/nextjs-ztxbey?file=pages%2F_app.tsx
2. npm run dev

[zthxxx]

@tjx666 workaround:

I'll try to fix it in release 2.1.0

import dynamic from 'next/dynamic';
import type { AppProps } from 'next/app';

const Inspector = dynamic(
  () => import('react-dev-inspector').then(({ Inspector }) => Inspector),
  { ssr: false }
);

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Inspector />
      <Component {...pageProps} />
    </>
  );
}