Zaid-Ajaj / Feliz

A fresh retake of the React API in Fable and a collection of high-quality components to build React applications in F#, optimized for happiness
https://zaid-ajaj.github.io/Feliz/
MIT License
531 stars 77 forks source link

Add jsx string template support to default template and to docs? #571

Open jkone27 opened 1 year ago

jkone27 commented 1 year ago

https://fable.io/blog/2022/2022-10-12-react-jsx.html

i saw this post and was able to have it working, i think is a cool feat especially for js devs, not familiare with typed HTML, i think is quite nice to add!

very cool, and the new template is amazing :)

i had to add just this 2 in the template , maybe Fable.Core is not required as it's already upgraded?

<PackageReference Include="Feliz.CompilerPlugins" Version="2.2.0" />
<PackageReference Include="Fable.Core" Version="4.0.0-theta-006" />

then i was able to do for example

 [<AutoOpen>]
module JsxHelpers =

    let inline toJsx (el: ReactElement) : JSX.Element = unbox el
    let inline toReact (el: JSX.Element) : ReactElement = unbox el

 type Components =

    [<ReactComponent>]
    static member HelloWorld() = 
        JSX.jsx $"""
        <>
        <h1>HELLO WORLD!</h1>
        <div>this is a div from JSX</div>
        </>
        """
        |> toReact
Zaid-Ajaj commented 1 year ago

very cool, and the new template is amazing :)

Thank you! 😄

Add jsx string template support to default template and to docs?

Could add it to the docs but not sure if I should it yet to the template itself because I feel like it is still experimental. Also the fact that you need toJsx and toReact is a bit hacky. There is the choice between [<ReactComponent>] and [<JSX.Component>] but could introduce some confusion for beginners