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:

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

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

• 17.0 >= react > 18.0
• 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 🚀

• Supports Fable v4
• Depends on Fable.ReactDom.Types (v18.0)
  • NPM 18 > react >= 19.0
  • 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 ⬆️

• Feliz.Recharts v4.0.0
• Feliz.PigeonMaps v3.0.0
• Feliz.Popover v3.0.0
• Feliz.RoughViz v2.0.0
• Feliz.SelectSearch v2.0.0
• Feliz.UseDefefferd v2.0.0
• Feliz.Router v4.0.0
• Feliz.Kawaii v2.0.0
• Feliz.Markdown v2.0.0
• 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:

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

[MangelMaxime]

It is also possible that people need to lock the version of Feliz.CompilerPlugins to 1.5.0.

If they don't do that and use Fable 3, there is no compilation error but at runtime React is complaining about invalid hook usage.

[Dzoukr]

Hello, great work! I have two questions:

1. How do Feliz.UseElmish and Fable.React.UseElmish differs and which one is recommended to use?
2. It seems that calling dispatch from React.useEffectOnce does not trigger an update... Is this on purpose or bug?

[Zaid-Ajaj]

How do Feliz.UseElmish and Fable.React.UseElmish differs and which one is recommended to use?

AFAIK @alfonsogarciacaro created Fable.React.UseElmish because technically UseElmish doesn't depend on Feliz and be its own thing. He also fixed HMR issues that were present in Feliz.UseElmish. Right now though the functionality is the same. I personally think it was redundant but maybe I took too long to merge the fix and publish a new version so now we have two packages 🤷

It seems that calling dispatch from React.useEffectOnce does not trigger an update... Is this on purpose or bug?

Sounds like a bug. Do you a repro for me? (hopefully in a new issue 🙏 )

[Dzoukr]

Sounds like a bug. Do you a repro for me? (hopefully in a new issue 🙏 )

#540 - I hope it helps 🙏

[mattgallagher92]

Thanks for putting together Feliz v2 Zaid!

One thing I noticed when working on a SAFE app is that I had a out-of-sync NuGet and npm packages (Feliz was upgraded to v2 but React remained on v17), but femto validation passed. If I understand femto correctly, I think that validation should have failed.

I think that the reason femto validation passes is because the NpmPackage elements were removed from ./Feliz/Feliz.fsproj (in d2881be), but not being super familiar with how femto works, I'm not certain that's the cause.

Am I right that femto validation should have failed? Was removing and not replacing those tags the cause, and was that a deliberate decision? If so, what was the rationale?

Anyway, thanks so much to you and the rest of the F# front-end pioneers ❤️ Your hard work making full-stack F# development a joy is greatly appreciated!

[mattgallagher92]

Ah, I see in https://github.com/fable-compiler/fable-react that the NpmPackage elements are present in the project files for Fable.React.Types and Fable.ReactDom.Types. Feliz depends on the former (but not the latter), so I guess my analysis of why femto validation didn't fail is wrong.

Either way, please let me know if you think femto validation should fail in the situation I described above (Feliz v2, React v17).

[Zaid-Ajaj]

@mattgallagher92 the problem your are seeing is fable-compiler/fable-react#235: It is not enough for Fable.React.Types and Fable.ReactDom.Types to have NpmPackage definitions in the project file, they need to publish sources to the ./fable directory as well

[Zaid-Ajaj]

@mattgallagher92 Just published Feliz v2.4.0 which should fix your issue 👍

[mattgallagher92]

Ah yes. Thanks for the speedy turnaround ❤️

[iuribrindeiro]

Can't wait to see the new template. I had kind of a bad time trying to setup that using the old template but I managed to make it work after a few hours. I'm new to the whole F# environment

[Zaid-Ajaj]

@iuribrindeiro getting the new template out is the very next thing I am going to work on. Hopefully sometime upcoming week 🤞

[Zaid-Ajaj]

Feliz.Template v4.x is out 🚀 which is updated to latest bits of Fable v4/Feliz v2 and with simplified dev config with vite

[panmona]

I followed the instructions in the README to try out the new template:

dotnet new -i Feliz.Template
dotnet new feliz -n MyProject
cd MyProject
npm i
npm start

But in the browser I get a white page and in the console have the error:
GET http://127.0.0.1:5173/Main.fs.js net::ERR_ABORTED 404 (Not Found)

I found that the Fable compilation doesn't seem to start when using NET 7.0. Only when I downgraded the project to net6.0 and added a global.json (and deleted the caches: bin, obj, fable_modules) the compilation got correctly triggered.

After getting the compilation to work, I run into the same Invalid hook call error that was also reported here: #544

[MangelMaxime]

@panmona Can you please check that you are using Fable 4? Fable 4 does support .Net7 while Fable 3 doesn't yet

[panmona]

Oh you're right. The template still had the Fable 3 tool configured. With the latest Fable 4 tool everything works correctly: #557

[enzonun]

Can Fable be used with ViteJS instead of webpack ?

[MangelMaxime]

@enzonun Fable can do anything JavaScript does.

So yes, you can use it with Vite there is no special configuration required for it to work.

Here is a template for Fable 3 + ViteJS + Gitpod. For Fable 4, it would be the same stuff.

https://github.com/MangelMaxime/template-gitpod-fable-3-vite-react/tree/main/src

[Zaid-Ajaj]

@enzonun The new Feliz template already uses vite 😄