search

ericclemmons / click-to-component

Option+Click React components in your browser to instantly open the source in VS Code
MIT License
1.82k stars 65 forks source link

How does it work under the hood? #5

Closed ericclemmons closed 2 years ago

ericclemmons commented 2 years ago
  1. In development, frameworks like CRA, Next.js, etc. all include file metadata (e.g. fileName, lineNumber, columNumber) when transforming JSX. (Link babel plugin here)
  2. On hover or right-click, click-to-react-component grabs the React renderer & finds the Fiber node associated with the DOM element (e.g. $0['__reactFiber$fq4qzh0im06'])
  3. This fiber node has a __debugSource value that contains the file metadata from babel.
  4. This file metadata is turned into a URL & launches your editor: https://code.visualstudio.com/docs/editor/command-line#_opening-vs-code-with-urls
ericclemmons commented 2 years ago

The README largely answers this by linking to https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx-source