search

fable-compiler / Fable.Lit

Write Fable Elmish apps with Lit
https://fable.io/Fable.Lit/
MIT License
93 stars 13 forks source link

early observations #2

Closed AngelMunoz closed 3 years ago

AngelMunoz commented 3 years ago

I've been having fun with this, I ended up with this sample repo

https://github.com/AngelMunoz/Flit

My only observation would be that it seems (due how to Lit works) if you create a standalone function that has internal state will not be rendered because render is only called when a change in the elmish state, my solution was to call each "page" which in turn fires it's own elmish loop, I'm not sure if that's a good way to do it

this might make things cumbersome in the long run since anything that requires internal state kind of requires an elmish loop so far

I'm still experimenting with it and if I come across more things I'll share them

AngelMunoz commented 3 years ago

I've been experimenting with the hooks provided by Haunted (Sample here)

(I know you're not a fan of hooks, but I guess it's something at least while we can figure out a better way to do this)

I think the single/multiple elmish looks can be solved by that in case it is a concern in scalability for some people the only "downside" to haunted is that converts the render functions into web components so by default all styling needs to be done via ShadowDOM styling, either by using the css tag or I think the stylemap directive you added on the lit bindings

I'll keep exploring and see what else I can find or figure out

alfonsogarciacaro commented 3 years ago

Well, Elmish is not about components so it's ok that functions have no internal state. If you want to structure your app with components I guess the best approach is what you did: use web components, either with the help of an existing library or maybe creating some adapters ourselves.

As an aside, for multi-page apps I just use the router in Fable.Elmish.Browser, though it's true some people don't like it because of the boilerplate needed.

I guess it's better to separate the packages by concerns, so for example Fable.Haunted doesn't need to take a dependency on Elmish. I've done it as follows:

AngelMunoz commented 3 years ago

I was just looking at Feliz.Engine.Lit (I was almost sure something like that would be possible 😆) man you are very loco I could barely put out some crappy bindings and here you are doing feliz engine and react mixing along the way be sure that I'll be checking the Lit stuff as well 😁

AngelMunoz commented 3 years ago

I ended doing some really basic dotnet templates, so people can get started with them I guess we'll keep these as betas for a while to see if they get picked up https://www.nuget.org/packages/Fable.Lit.Templates/1.0.0-beta-002

I think we can close this now