Fable v3 and v4 Compatibility Updates for Feliz v2.0 🚀

[Zaid-Ajaj]

Many changes have been happening across the @fable-compiler and JS ecosystem:

• Introduction of Fable v4 (new AST to be used by CompilerPlugins)
• The splitting of the Fable.React library into Fable.React.Types + Fable.ReactDom.Types
• The update from React v17 to v18 and its subtle differences with respect to useEffect
• Fable.Elmish v4 going stable
• The arrival of .NET7 SDK

Here is a short summary of what works currently in Fable v3 and what needs to happen when updating to Feliz v2 🚀

Fable v3 + Feliz v1.68

One might ask: for users of Feliz and its library of components, what still works and what is being worked on?

People using Fable v3.x can keep using the main Feliz library up until v1.68 and its dependants:

• [x] Feliz.Recharts v3.15.0
• [x] Feliz.PigeonMaps v2.7.0
• [x] Feliz.Popover v2.4.0
• [x] Feliz.RoughViz v1.6.0
• [x] Feliz.UseDeferred v1.5.0
• [x] Feliz.SelectSearch v1.8.0
• [x] Feliz.Router v3.10.0
• [x] Feliz.Markdown v1.4.0
• [x] Feliz.Svelte
• [x] Feliz.SvelteComponent v0.7.0
• [x] Feliz.Kawaii v1.3.0
• [x] Feliz.UseMediaQuery v1.5.0
• [x] Feliz.Delay v0.4.0

It is important to note that Feliz v1.68 has these NPM dependencies:

• [x] 17.0 >= react > 18.0
• [x] 17.0 >= react-dom > 18.0

⚠️ Upgrading react or react-dom to v18+ might break your app. Feliz v1.68 depends on the specific react and react-dom versions above ⚠️ Using Fable v3 with .NET 7 doesn't work! You will need global.json file in your project that specifies the SDK version to use 6.0.400 ⚠️ Feliz v1.68 might work with Fable v4 if you update Feliz.CompilerPlugins to v2

Feliz.UseElmish v2.x improvements

Going from Feliz.Elmish v1.6.0 (which relied on Fable.Elmish v3 and Feliz) now have been published as Feliz.UseElmish v2.1.0:

• No longer relies on Feliz (pure hook)
• Should work both with React v17 and React v18
• Integrates better with Hot Module Replacement (thanks @MangelMaxime @alfonsogarciacaro ❤️ )
• Should work with Fable v3 and Fable v4
• Depends on Fable.Elmish v4 stable 🚀

⚠️ Feliz.ElmishComponents is no longer maintained and removed from the repository. Use Feliz.UseElmish instead

Fable v4 + Feliz v2.x

Feliz v2 will be the supported version for Fable v4 moving onward.

Starting from the release of Feliz v2.0.0 🚀

• [x] Supports Fable v4
• [x] Depends on Fable.ReactDom.Types (v18.0)
  • [x] NPM 18 > react >= 19.0
  • [x] NPM 18 > react-dom >= 19.0

Fable v4 + dependants of Feliz v2.x

Every dependant library of Feliz v2.x in this repository gets a major version upgrade ⬆️

• [x] Feliz.Recharts v4.0.0
• [x] Feliz.PigeonMaps v3.0.0
• [x] Feliz.Popover v3.0.0
• [x] Feliz.RoughViz v2.0.0
• [x] Feliz.SelectSearch v2.0.0
• [x] Feliz.UseDefefferd v2.0.0
• [x] Feliz.Router v4.0.0
• [x] Feliz.Kawaii v2.0.0
• [x] Feliz.Markdown v2.0.0
• [x] Feliz.Delay v1.0.0
• [ ] Feliz.Svelte (todo)
• [ ] Feliz.SvelteComponent (todo)

⚠️ There might still be issues when using Feliz v2 and I hope to fix these ASAP. Please keep an eye on the minor and patch updates to Feliz and update to latest v2.x when a new package is available 🙏

Needs an update for Fable v4:

• [x] Feliz.Router v4.0
  • [x] Feliz -> 2.x
  • [x] Fable.Elmish -> 4.0.0
• [x] Feliz.Template