Why are __self and __source passed as props in compiled JSX code?

[kevinbarabash]

ReactDOM.render(<div className={css(styles.header)}>
    <h1>{foobar}</h1>
</div>, container);

compiles to

ReactDOM.render(React.createElement('div', { className: (0, _aphrodite.css)(styles.header), __self: this, __source: {fileName: _jsxFileName, lineNumber: 16}}
    , React.createElement('h1', {__self: this, __source: {fileName: _jsxFileName, lineNumber: 17}}, _foobar2.default)
), container);

I'm curious about what __self and __source are used for.

[alangpierce]

It's extra debugging information included in the Babel 7 version of babel-preset-react, and it's used for more helpful error messages. In particular, the React test suite relies on this transform.

See the package READMEs for more info:
https://github.com/babel/babel/tree/master/packages/babel-preset-react
https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx-self
https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx-source

I suppose it may be best to disable for production builds, but for now I'll keep the options simple and always leave it on, since Sucrase is primarily intended for development.

[lydell]

Would it be possible to make this not spam the Inspector in Chrome and Firefox?

I'm using preact.

EDIT: Maybe there's nothing Sucrase can do: preactjs/preact#1058

However, I'm using Sucrase for a browser extension. I have no need for Babel. I'm actually using Sucrase for the production build (which is almost identical to the development build). It's nice not having to set up two "build systems". So I'd appreciate an option to turn this off for production. Maybe Preact users want to always turn it off – I don't think Preact uses it?

EDIT again: Found that I can pass production: true as an option (added in #270). It works great for my browser extension + Preact case.

[alangpierce]

@lydell cool, glad you found the production flag, and thanks for surfacing; I wasn't aware that non-React JSX use cases would have trouble here. I still would like to keep the config as minimal as possible, but I'll see if I can make the docs more helpful here.