Electron/fable 3/elmish/react - a modern webpack 5 build

[tomcl]

Objective

Discuss fine points of getting Fable 3 to work well with Electron in 2022

• Get a best possible well understood and documented uptodate electron/fable 3/elmish/react/fake build with working HMR and source maps
  • Fable 3 / elmish / react / electron / webpack 5 builds are (now) pretty much OK, but we would have liked all the interactions well explained with a good example.
• Investigate minor variants of this (e.g. React -> Lit, or using Feliz instead of Elmish DOM?)
• Publicise this (it is not easy to find recent and uptodate samples of fable/elmish used with electron).
• Keep in mind the possibility of jumping eventually from electron to something better - but no good options ATM

Context

• We have an open source 24K (F#) line electron/fable app issie which we have updated to a recent Electron / Webpack 5 build. NB the build with fully sorted out source maps is still WIP and can be found on branch new-build-trimmed. That branch currently has working source maps, but they are a bit slow, see Specifics below.
• The repo can be developed fully cross-platform, with dev setup equally easy on macos/windows. Linux will work fine but maybe is not yet as smooth, because we do not normally use linux.
• For 24 months our build was loosely inspired by cmeeren's build
  • electron-webpack was painful to use because very obscure - it either worked or not, with no easy insight into what it was doing
  • electron-webpack is not now maintained and cannot be used with webpack 5 or recent electron build
  • Therefore it is no longer usable - electron builds need to keep up with recent electron
  • Anyway webpack 4 is very old, we should move to webpack 5
• We are pretty happy with the new build. It took so long to get to it we thought this should be shared.

Specifics

Minor things we want to improve and/or document better:

• The interaction between HMR and source-map support remains obscure to us. (Context - we use source-map-loader and Webpack 5 HMR, with Elmish).
• We have fast HMR working without source maps
• Enabling the sending of the source map .fs files to the Webpack 5 dev server causes exactly the same HMR reload (all modules after changed one in compile order) twice.
• What seems to happen is that webpack loads once on .js file change, and treats a changed fs file as like a js file and so does another identical "bubble up" reload. This doubles HMR time, and is annoying.

Example

Repo and branch to fork

1. See ./README getting started in that branch (not yet on master) to set up dev envt with HMR. NB it is Dotnet 6 / Node 16.
2. Check source maps by throwing an exception: File -> Force Exception
3. Check HMR by running issie.sln in Visual Studio 2022 or VSC/Ionide with dotnet 6/F#6 and changing a file e.g. any of the strings in src\renderer\ui\Catalogueview.fs.

[alfonsogarciacaro]

Thanks a lot for sharing your experience and providing the template @tomcl! This will be very useful to other Fable users 👏 👏

I think I had also once an issue with source maps and hot reloading, but don't remember if/how we solved or whether we just disabled source maps 😅 I'll try to check. BTW, there's also a discussion to improve HMR by skipping files that haven't changed: #2869

Also, in one of latest releases I added an experimental argument to prevent watch compilation triggering too many times. Not sure if it will help in your case, but maybe you can try setting --watchDelay 600 to see if it helps:

Fable/src/Fable.Cli/Entry.fs

Line 60 in b0a610f

["--watchDelay"], ["Delay in ms before recompiling after a file changes (default 200)"]