Open Zaid-Ajaj opened 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.
Hello, great work! I have two questions:
Feliz.UseElmish
and Fable.React.UseElmish
differs and which one is recommended to use?dispatch
from React.useEffectOnce
does not trigger an update... Is this on purpose or bug?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 🙏 )
Sounds like a bug. Do you a repro for me? (hopefully in a new issue 🙏 )
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!
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).
@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
@mattgallagher92 Just published Feliz v2.4.0 which should fix your issue 👍
Ah yes. Thanks for the speedy turnaround :heart:
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
@iuribrindeiro getting the new template out is the very next thing I am going to work on. Hopefully sometime upcoming week 🤞
Feliz.Template v4.x is out 🚀 which is updated to latest bits of Fable v4/Feliz v2 and with simplified dev config with vite
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
@panmona Can you please check that you are using Fable 4? Fable 4 does support .Net7 while Fable 3 doesn't yet
Oh you're right. The template still had the Fable 3 tool configured. With the latest Fable 4 tool everything works correctly: #557
Can Fable be used with ViteJS instead of webpack ?
@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
@enzonun The new Feliz template already uses vite 😄
Many changes have been happening across the @fable-compiler and JS ecosystem:
useEffect
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:
17.0 >= react > 18.0
17.0 >= react-dom > 18.0
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:
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 🚀
18 > react >= 19.0
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 ⬆️
Needs an update for Fable v4: