search

Zaid-Ajaj / Feliz

A fresh retake of the React API in Fable and a collection of high-quality components to build React applications in F#, optimized for happiness
https://zaid-ajaj.github.io/Feliz/
MIT License
534 stars 78 forks source link

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

Open Zaid-Ajaj opened 1 year ago

Zaid-Ajaj commented 1 year ago

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

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:

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

⚠️ 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:

⚠️ 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 🚀

Fable v4 + dependants of Feliz v2.x

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

⚠️ 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:

MangelMaxime commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

540 - I hope it helps 🙏

mattgallagher92 commented 1 year ago

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 d2881be7d988ab4552dec5ea00396129d0efe944), 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 :heart: Your hard work making full-stack F# development a joy is greatly appreciated!

mattgallagher92 commented 1 year ago

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 commented 1 year ago

@mattgallagher92 the problem your are seeing is https://github.com/fable-compiler/fable-react/issues/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 commented 1 year ago

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

mattgallagher92 commented 1 year ago

Ah yes. Thanks for the speedy turnaround :heart:

iuribrindeiro commented 1 year ago

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 commented 1 year ago

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

Zaid-Ajaj commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

panmona commented 1 year ago

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

enzonun commented 1 year ago

Can Fable be used with ViteJS instead of webpack ?

MangelMaxime commented 1 year ago

@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 commented 1 year ago

@enzonun The new Feliz template already uses vite 😄