Apply the react-refresh on tranformed code

[phaistonian]

Hello,

I have created a plugin to transform SVG to JSX, and I would like to know how to apply the Refresh facility using the resulting code.

Is there such an API exposed from the plugin?

Also, I used to use the babel.transform function from the react plugin, but this no longer works.

[hi-ogawa]

You can probably customize parserConfig https://github.com/vitejs/vite-plugin-react-swc?tab=readme-ov-file#parserconfig to transform svg. Then your plugin needs to have enforce: "pre" and put it before react plugin.

My first impression is that setting up react-refresh for svg seems a bit unusual since svg based component is normally rendered inside other React components which is in jsx/tsx. So if react-refresh already works there, DX would be basically same unless SVG is transformed in a way that SVG component itself has some states. I'm wondering if that's your use case.

[phaistonian]

Here's the plugin I came up with.

I need somehow to wrap it with the necessary code for fast refresh.

Ps: I did it somehow in the past, I can not recall how.

[ArnaudBarre]

The only benefit is if you want to edit SVG files manually and have very scoped updates, with seems unusual and most of the time having fast refresh on all parents of this SVG with results into the same render, maybe few ms slower but overall it would be slower given the extra transform time

[phaistonian]

Well, we use ladle for pretty much anything at work.

More often than not, we need to update icons, illustrations, and other things (SVG files).

The only way to expose the changes is by restarting the ladle (vite server).

Being able to hot-reload SVGs (transformed to React components with this plugin) will help us a lot of time.

[ArnaudBarre]

fast refresh will works only if HMR works in the first place. In my setup SVG are HMRed, just not a the file level but at the component that uses them. If you need to restart the server, adding react-refresh transform won't solve the problem. Are you able to repro this issue on a starter template of laddle?