Babel plugins (source mapping)

[getflourish]

Tell us how you think we can improve Sandpack

Enable @babel/plugin-transform-react-jsx-source

Packages affected

• sandpack-client
• sandpack-react

What is this feature?

I would like users to click on React nodes in SandpackPreview and then highlight the code in the SandpackCodeEditor

Similar to Svelte’s inspector:
https://x.com/rich_harris/status/1636444006635716627

For this, there’s this library:
https://github.com/ericclemmons/click-to-component

But it relies on a Babel plugin:
@babel/plugin-transform-react-jsx-source

How would your idea work?

I assume I would need to be able to customize the Babel config, or make this an explicit feature of Sandpack?

babel.config.js

{ "plugins": ["@babel/plugin-transform-react-jsx"] }