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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Astro integration #73

Open
jkone27 opened this issue Nov 17, 2022 · 2 comments
Open

Astro integration #73

jkone27 opened this issue Nov 17, 2022 · 2 comments

Comments

@jkone27
Copy link

jkone27 commented Nov 17, 2022 •
edited
Loading

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

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

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

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

No branches or pull requests
3 participants
@alfonsogarciacaro @AngelMunoz @jkone27