Comments (2)
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
from fable.lit.
Thanks for your comment @jkone27! In principle Fable.Lit components should be able to integrate with Astro as they're just LitElement
s 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>
from fable.lit.
Related Issues (20)
- Accessing children in custom element HOT 6
- Problem importing raw css into ShadowDom HOT 6
- Class Based API vnext HOT 1
- What does this mean? HOT 4
- Is there similar pattern in Lit that uses React.useContext (Context propagation)? HOT 1
- Hooks.useTransition is leaving transition-enter classname to its next sibling. HOT 4
- Simple SVG is not rendering properly HOT 3
- Lit.mapiUnique HOT 4
- Self closing tag LitComponents are not closing properly if there's an HTML element after it HOT 2
- LitLabs.motion.animate() throws an error HOT 1
- Q: wrapping requirejs amd module (durandaljs interop) HOT 2
- Incongruence in documentation HOT 1
- Update to .net 6 HOT 5
- Use of Hook.useRef HOT 1
- Upgrading to Fable.Lit 1.4.2 causes issues in Elmish types HOT 1
- Update Fable.React and Feliz Bindings HOT 4
- Hook.useTransition with more events
- Hook.Elmish doesn't rerun when props change HOT 2
- hasChanged and currying problems
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fable.lit.