Add React Fast Refresh

[onigoetz]

• Create react-app 4 RC

  • Add experimental react-refresh support facebook/create-react-app#8582

• Storybook 6.1 Alpha

  • React: Add react fast refresh storybookjs/storybook#12470
  • React: Fix fast refresh storybookjs/storybook#12535

• react-refresh-webpack-plugin

  • https://github.com/pmmmwh/react-refresh-webpack-plugin

[rahul-s-bhatt]

Hey, is this issue beginner friendly?

[onigoetz]

Hi, thanks for the interest :)

Honestly, I don't know.
On paper it looks quite simple :

• Add an option to enable either the react-hot-loader (current : https://github.com/swissquote/crafty/blob/master/packages/crafty-preset-react/index.js#L5) or reactFastRefresh(new option) but not both at the same time
• Add the react-refresh babel plugin to replace (with an option) the react-hot-loader plugin : https://github.com/swissquote/crafty/blob/master/packages/crafty-preset-react/index.js#L42
• Add https://github.com/pmmmwh/react-refresh-webpack-plugin to the webpack configuration (somewhere around here : https://github.com/swissquote/crafty/blob/master/packages/crafty-preset-react/index.js#L51 )

This could already give some interesting results.

However what would need to be tested is, since Crafty is used in micro-frontend applications where an instance of React is loaded early (using RequireJS) how it would be possible to have this and Fast Refresh working at the same time? (since as explained here facebook/react#16604 (comment) there is something about a global variable needed by React to handle fast refresh.

Also the other question (which is certainly going to be tightly linked to the first one, can two builds in watch mode be run in two separate directories and be refreshed at the same time on the screen ?

If you want to have a go at getting the happy case to work I'd be willing to finish the part with the two extra points since most users will probably not have this use case.

[onigoetz]

Current status; the implementation is done and behind this flag : https://swissquote.github.io/crafty/Packages/crafty_preset_react.html#fast-refresh

However it seems that it's nor working correctly when React is loaded through requirejs, more experimentation is needed.
Also, it's unclear if it works for multiple bundles and multiple React versions/instances

[onigoetz]

Made some further tests and everything seems to be working properly, the gotcha is that Refresh only works when React is loaded in development mode.

The next version will enable React Fast Refresh by default when using react: true in a bundle