Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
33 of 35 tasks
Zaid-Ajaj opened this issue Dec 25, 2022 · 18 comments
Open
33 of 35 tasks

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

Zaid-Ajaj opened this issue Dec 25, 2022 · 18 comments
Labels
announcement

Comments

@Zaid-Ajaj
Copy link
Owner

Zaid-Ajaj commented Dec 25, 2022 •
edited

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
@Zaid-Ajaj Zaid-Ajaj mentioned this issue Dec 25, 2022
Closed
@Zaid-Ajaj Zaid-Ajaj pinned this issue Dec 25, 2022
@MangelMaxime
Copy link
Contributor

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
Copy link
Contributor

Dzoukr commented Jan 4, 2023

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
Copy link
Owner Author

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 Dzoukr mentioned this issue Jan 4, 2023
Closed
@Dzoukr
Copy link
Contributor

Dzoukr commented Jan 4, 2023

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

#540 - I hope it helps 馃檹

@mattgallagher92
Copy link

mattgallagher92 commented Jan 13, 2023 •
edited

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
Copy link

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
Copy link
Owner Author

Zaid-Ajaj commented Jan 13, 2023 •
edited

@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
Copy link
Owner Author

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

@mattgallagher92
Copy link

Ah yes. Thanks for the speedy turnaround 鉂わ笍

@panmona panmona mentioned this issue Feb 7, 2023
Merged
@iuribrindeiro
Copy link

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
Copy link
Owner Author

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

@Zaid-Ajaj
Copy link
Owner Author

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
Copy link
Contributor

panmona commented Feb 23, 2023

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
Copy link
Contributor

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

@panmona panmona mentioned this issue Feb 23, 2023
Merged
@panmona
Copy link
Contributor

panmona commented Feb 23, 2023 •
edited

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

@enzonun
Copy link

enzonun commented Mar 29, 2023

Can Fable be used with ViteJS instead of webpack ?

@MangelMaxime
Copy link
Contributor

@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
Copy link
Owner Author

@enzonun The new Feliz template already uses vite 馃槃

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
announcement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@Dzoukr @MangelMaxime @iuribrindeiro @Zaid-Ajaj @panmona @enzonun @mattgallagher92