The SAFE stack 1.0 had been released for about two months now. I am looking at the different between 1.0 compared to the older version which one of the project I am working on is using. The best way to learn about it – is to try to upgrade the project to match what’s in version 1.0.
Upgrade Challenges
Fable.Core and Fable.Elmish 2 -> 3
The biggest change I see is the major version change of the Fable.Core and Fable.Elmish packages. These major version upgrade come with namespace / module reorganization and splitting some packages into smaller packages. Notable changes I see are:
Elmish.Browser.Navigation->Elmish.NavigationElmish.Browser.UrlParser->Elmish.UrlParser
There are some minor breaking change but they can be resolve pretty easily with a couple of minutes of googling.
Fable.React 4 -> 5
Similar to other packages, there are changes in namespace / module reorganization:
Fable.Helpers.React->Fable.ReactFable.Helpers.React.Props->Fable.React.Props
Fable.PowerPack and Thoth.Fetch
Fable.PowerPack is now archived on github and the pack is split into smaller individual packages, such as Fable.Fetch and Fable.Promise.
As of the time of writing Fable.Fetch actually commented out function like fetchAs in the source code. As a result, I decided to replace fetchAs with Thoth.Fetch which under the hood still use Fable.Fetch. But Thoth.Fetch come with the ability to deserialize the response using Thoth and tryFetchAs function to return a F# Results directly which make Railway Oriented Programming much easier.
However, there are some quirks to use Thoth.Fetch. When opening the module we need to open Fable.Fetch too. Below is the code snippet to do so correctly.
open Fetch
open Thoth.FetchElmish Cmd changes
The Cmd in Elmish also come with “breaking” change. Cmd.ofPromise is now Cmd.OfPromise.either. The reason why breaking is quoted is because there is actually an upgrade path using just a slightly different API on Cmd and it is also documented very clearly. However, the catch is that the new API is hidden behind a compiler constant called FABLE_COMPILER. If the existing client side project does not already have this FABLE_COMPILER constant setup in the project file. The new API is not available to use. So a manual editing of the client side fsproj file is needed to add FABLE_COMPILER to it. You may add that like below:
<Project Sdk="Microsoft.NET.Sdk">
<PropertyGroup>
<TargetFramework>netstandard2.0</TargetFramework>
<DefineConstants>FABLE_COMPILER</DefineConstants>
</PropertyGroup>Other quirks after upgrading Fable and FAKE
If running into problem trying to build the project after upgrading to SAFE stack 1.0. Try deleting the .fable and .fake folder and rebuild from a clean slate.
Behind Simplicity 