Investigate adding Fast-Refresh plugin into the Feliz.Template

[Zaid-Ajaj]

In order to migrate the template gradually into a standalone React app instead of Elmish and only use Elmish when needed via Feliz.UseElmish library

[Zaid-Ajaj]

OK so my attempts aren't yielding much results 😞 if someone gives this a try and succeeds, please let us know 🙏

[aspnetde]

If I wanted to look into it, where would I have to start?

[Shmew]

Here's an app using fast-refresh, webpack.config.js, package.json, hopefully that should help give you an idea. It's pretty straightforward for the most part.

[Zaid-Ajaj]

Follow up discussion on this issue from the fast-refresh plugin repository in Fable support for Feliz/React applications

[Zaid-Ajaj]

Almost done, waiting on two issues:

• Exporting an alias to a CSS module breaks react-refresh and causes full page refresh for scoped stylesheet modules unless they are marked private
• Using extended classes for props doesn't get picked up by react-refresh because records as props use extended classes (for now using anon records or multiple parameters works better for authoring React components in Fable 3)

[Jmaharman]

Isn’t the issue with both of these problems that you can only export React components from a file if fast refresh is going to work? I.e you cannot export anything else, otherwise it cannot create the boundary and goes up the tree?

If you move those two scenarios into different files to separate them from the component, does that solve the issue?

[Zaid-Ajaj]

Current template supports react-refresh just fine 😄