search

fable-compiler / Fable.Lit

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

Astro integration #73

Open jkone27 opened 1 year ago

jkone27 commented 1 year ago

would fable lit produce google lit components and be able to integrate with astro somehow?

https://docs.astro.build/en/guides/integrations-guide/lit/

as i suspect that might become quite a dominant framework soon? or would it be possible to already integrate today? :) cheers..

what do you think about this framework for frameworks :)?

alfonsogarciacaro commented 1 year ago

Thanks for your comment @jkone27! In principle Fable.Lit components should be able to integrate with Astro as they're just LitElements under the hood. Though looking at the documentation you linked, it seems you need direct access to the class implementing the render function, and currently Fable.Lit LitElement attribute creates (and hides) a class expression on the fly to wrap the render function. So we may need a work around for that.

I haven't played with Astro yet, but it looks promising and I'm always happy to help integrate Fable with any interesting framework. If you just want to play with it and Fable, maybe for now you can just use the react integration using Feliz. I think something like this should work:

open Feliz

[<ReactComponent>]
let SayHello (name: string) =
    Html.p $"Hello {name}"

In your .astro file:

---
import { SayHello } from '../components/SayHello.fs.js';
---
<html>
  <body>
    <SayHello name="jkone27" />
  </body>
</html>
AngelMunoz commented 1 year ago

It could also be done with the lit class bindings I was working on but I don't remember what I was waiting for in that branch