snowpack and react-refresh question

[nojaf]

Hey @Zaid-Ajaj
I'm playing around with snowpack and have a fast refresh related question.

In short:

• snowpack dev server uses react-refresh
• Goal is to use this in combination with fable-splitter, compile F# to js and snowpick just picks it up like any other JS file.
• Sample: https://github.com/nojaf/snowpack-fable-bug
• Normal Fable components refresh is getting picked up. (Sun component)
• Feliz binding component not. (Moon component)
• Related snowpack conversation: React component doesn't update when using Fable. FredKSchott/snowpack#1139

Any thoughts? What is Feliz doing that is so different from what Fable.React is doing.

[Zaid-Ajaj]

Hi Florian, this is the same issue that blocks Feliz from fully using fast-refresh whether it is with snowpack or webpack. The problem is in how the generated code looks like and how fast-refresh actually picks it up. There are special requirements which the generated code doesn't adhere to in order to be picked up: the value definition of the function component must be upper case (i.e. the let binding), the definition must be a module level definition, the use of IIFEs in the generated code that makes the component lose its original reference and other stuff discussed thoroughly here as I was trying to figure out why the plugin doesn't work with Feliz.

How to solve this issue? Generating React output that fast-refresh knows how to work with which is basically a simplified version of what Fable does right now. Is this possible now? No, we cannot change how Fable works with bindings. HOWEVER, in Fable 3 @alfonsogarciacaro is working on bringing plugins back which should allow me to build an internal Fable plugin that rewrites the generated into something that works with the fast-refresh properly. I am waiting for an alpha release with plugin support to start juggling the ASTs

[Shmew]

That's interesting. Looking at the source code for Fable.React it seems that it's a side-effect from the caching implementation.

@Zaid-Ajaj and I have done a lot of tinkering to get it to work, and it's not really achievable while being user friendly currently. You can see the discussions in these two issues #157 and #203.

With Fable 3 (hopefully) coming soon and the implementation of a plugin system we will likely compile the Feliz code into actual jsx and should work out of the box without the user really even thinking about it.

[alfonsogarciacaro]

This indeed looks like a very good use-case for plugins! There's already an alpha version of Nagareyama (Fable 3) released and I'm just testing it with some production projects in order to polish issues and make an informal announcement with upgrade instructions. Plugins come next, most of the preparation work (cleaning up the AST and making it independent of FCS) is already done and there's already a POC for Fable 2 so hopefully it shouldn't take much time. As soon as it's ready I will contact you so we can test it with fast-refresh 👍

[nojaf]

Hey all, thanks for the thorough explanation!
Looking forward to Nagareyama, exciting times.