Description
Summary
__debugSource was removed in #28265 to solve problems that do not apply to us and without including any 1:1 replacement that we could make work for our case. We are currently looking for ways to re-implement it for React 19 but all approaches seem quite hacky or fragile without any additional support from React.
We use __debugSource to create a mapping between a DOM element (fiber node in practice) to the source location where the JSX element was created. We use this information to be able to implement an in-browser, in-app editor for JSX, e.g. we can find a fiber node from a DOM element and then find the exact source location where the element was created, parse the file and modify the JSX node. Naturally, this is only ever available in dev mode.
We control the main configuration for how TSX/JSX is transformed into JS so getting accurate source information has never been a problem. However, all approaches using stack traces and similar will not work as they only contain the line number and not exact location in the source file. Take for instance the JSX code
function MyView() {
return <><span>Hello</span><span>Hello</span><span>Hello</span></>;
}and it is quite difficult to know which element a <span> from the DOM maps to, even if the line number is available.
We have prototyped some workarounds like using our own jsx dev transform and placing the source info manually somewhere but these approaches also have issues:
- If placing on the
ReactElement, we have to abuse an existing property as only those are copied to the fiber nodes when rendering. The closest one would be_debugInfobut that will probably be overwritten in some cases - Placing the mapping in a global variable would work but as only the
ReactElementinstance is available at that point, and that instance is not referenced from a fiber node, there does not seem to be anything sensible available to use as a key for the map
We could rewrite part of the React code but that would seem even more fragile.
Good ideas are welcome