how to use sucrase with react-refresh?

[zcaudate]

I'm looking to get react-refresh working with sucrase but I think only babel is supported at the moment:

https://github.com/facebook/react/blob/master/packages/react-refresh/src/ReactFreshBabelPlugin.js

I'm wondering if there have been any attempts to integrate sucrase with the library?

[alangpierce]

HI @zcaudate! Unfortunately, react-refresh isn't supported at the moment with Sucrase, and I don't think there have been any attempts yet to implement it. Like with the react-hot-loader transform, I think it's fair to call it in scope for Sucrase, so I'd be happy to accept a PR.

I've looked at the ReactFreshBabelPlugin.js code a few times and there's a lot of logic that may be hard to exactly replicate in Sucrase, especially since Sucrase doesn't have a syntax tree to work with (that's one of the reasons it's so fast). The transform has some heuristics to detect if something is a component or a hook call, so one possible idea is to implement simpler heuristics that are easier to get working in Sucrase.

[zcaudate]

@alangpierce: thanks for responding - and for sucrase. It's such a refreshing change.

I would do it but I just don't have the knowledge right now. I believe react-refresh has it's own diff walking mechanism and it just needs to receive the right inputs from hrm to activate the hook. But I'm missing a lot of context:

• how webpack.hmr works
• how sucrase works
• what react-fast-refresh is actually doing

Because sucrase is so fast, i'm settling on sucrase/react-hot-loader for now.

I did take a look at some gists that was posted for issue that was mentioned on the facebook ticket, the best one being here, I think the babel plugin is doing a lot of babel related stuff and all that is needed is to add this hook to sucrase).

I also had a look at sucrase-hot-reloader that @rickhanlonii linked to and it seems that there shouldn't be that much to change but as I've said before, I'm missing a lot of context.