click-to-component 点击组件打开源码文件

背景

https://github.com/ericclemmons/click-to-component https://github.com/ArnaudBarre/vite-plugin-react-click-to-component

功能：点击UI后直接到达源码文件，非常便捷的。

如果点击的源码不准确是什么原因

fiber 里面的 debug source 取决于编译器的最终输出结果。 如果跟源码的位置对应不上的话，就去找编译器的原因。

之前遇到了什么问题

在 window 上 点击源码无法直接打开对应文件。

https://superuser.com/questions/1481851/disable-chrome-to-ask-for-confirmation-to-open-external-application-everytime

如何配置电脑信任打开的文件地址 https://www.thewindowsclub.com/disable-this-site-is-trying-to-open-this-application

打开注册表 In the search box on the taskbar, type regedit, then select Registry Editor (Desktop app) from the results.

示例：https://github.com/ericclemmons/click-to-component/blob/main/apps/next/pages/_app.tsx

为什么要设计成安全阻挡

https://github.com/microsoft/vscode/issues/95252

类似框架

https://www.locatorjs.com/ https://github.com/infi-pc/locatorjs#similar-projects-and-alternatives

告警

https://github.com/vercel/next.js/discussions/17443

通过 https 可以绕开弹窗问题

https://juejin.cn/post/7102696038321881125

也许 insider 版本已经上了这个相关补丁

https://github.com/microsoft/vscode/issues/95670

还在解决中

源码

思路挺有意思的 https://github.dev/ericclemmons/click-to-component

先 window 监听 click 事件 条件下捕获 target，去找 react fiber 拿到源码，再去拿地址，通过 window open 进行打开

细节

target 代表的是 element

去 react 的渲染里找哪个 fiber 是挂载了这个 target 的。 这是得到 ReactInstance 的过程。 ReactInstance 里有_debugSource

  const {
    // It _does_ exist!
    // @ts-ignore Property 'columnNumber' does not exist on type 'Source'.ts(2339)
    columnNumber = 1,
    fileName,
    lineNumber = 1,
  } = _debugSource