Add JSX support

[PawelStadnicki]

With Fable 4 we can mix plain React components with JSX component. In order to use jsx we need to add Fable option -e .jsx --run vite. However when I add this option the fable app loses to load App.js at all. Maybe I'm missing something but it would be awesome if you can add JSX working support . In the template it could be plain jsx mixed with other divs like:

React.fragment [

    toReact <| JSX.jsx $"""<div>Ooo Macarena!</div>"""
    Html.div state.Message

.....

[Dzoukr]

I have a very low experience with JSX in Fable, so I'm afraid you would have to kick it through on your own and send a PR (which would be awesome!)

[lukaszkrzywizna]

@PawelStadnicki what is an exact error? I've followed the instructions from the Fable blog post and I've successfully run a JSX:

[<JSX.Component>]
let MyJsxComponent (x: string) =
    Feliz.JSX.React.Html.div [
        Html.h1 "Hello from React!" |> toJsx
        Feliz.JSX.React.Html.h1 "Hello from JSX!"
        JSX.jsx $"<span>{x}</span>"
    ]

[<ReactComponent>]
let AppView () =
    let state,dispatch = React.useElmish(init, update)
    let navigation =
        Html.div [
            (toReact (MyJsxComponent("Hello from a raw JSX")))
        ]
    let render =
        match state.Page with
        | Page.Index -> Pages.Index.IndexView ()
        | Page.About -> Html.text "SAFEr Template"
    React.router [
        router.pathMode
        router.onUrlChanged (Page.parseFromUrlSegments >> UrlChanged >> dispatch)
        router.children [ navigation; render ]
    ]    

npm:

"start": "dotnet fable watch ./src/SAFEr.Lab.Client -s --outDir ./src/SAFEr.Lab.Client/.fable-build -e .jsx --run vite"

[PawelStadnicki]

I will not recall it now. However, it was months ago with pre-releases, and excellent that it works now.