Support React `__source` prop

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)

Problem

React uses the __source prop display where components originate in the React devtools.

Babel supports this in @babel/babel-plugin-transform-react-jsx-source.

Solution

Inject this prop in a similar way as @babel/babel-plugin-transform-react-jsx-source. This should only happen in development and only for React, but optionally supporting alternative runtimes.

Also I’m willing to implement this.

Alternatives

It could be an external recma plugin, but I think it’s useful to include in core.

[remcohaszing]

AST explorer only attaches start and end offsets, but apparently the estree format produced by MDX attaches loc as well. So you’re right, we don’t need any additional information, at least not for MDX.

[remcohaszing]

I found a bit more info in the React RFC for the automatic runtime.

So basically in the classic runtime, we need to compile to:

React.createElement(
  Component,
  {
    ...props,
    __source={{ fileName, lineNumber, columnNumber }}
    __self={this}
  },
  ...children
)

And in the automatic runtime, we need to compile to the following, where isStaticChildren is a boolean indicating if a production runtime would use jsxs instead of jsx:

import { jsxDEV as _jsxDEV } from 'react/jsx-runtime'

_jsxDEV(
  Component,
  props,
  key,
  isStaticChildren,
  { fileName, lineNumber, columnNumber },
  this
)

I still need to figure out when the __self prop or last argument of _jsxDEV needs to be added. It could be added later as well, so I can focus on supporting __source first.

I also believe this shows this functionality belongs in core, especially for the automatic runtime.