Fun.Blazor

This is a project to make F# developer to write blazor easier.

1. Use F# ❤️😊 for blazor
2. Computation expression (CE) style DSL for internal and third party blazor libraries
3. Dependency injection (html.inject/html.comp)
4. Adaptive model (adaptiview/AdaptivieForm) (recommend), elmish model (html.elmish)
5. Giraffe style routing (html.route)
6. Type safe style (Fun.Css)

Check the WASM Docs for more 🚀

Benchmark

Main projects

1. Fun.Blazor: help you to use basic dom DSL and state management helpers.

   let demo =
       adaptiview(){
           let! count, setCount = FSharp.Data.Adaptive.cval(1).WithSetter()
           button {
               onclick (fun _ -> setCount (count + 1))
               "Increase"
           }
           div {
               style { color "red" }
               $"value = {count}"
           }
       }
   

2. Fun.Blazor.HtmlTemplate: help you to convert plain string to dom tree. And with VSCode + Ionide-fsharp + Highlight HTML/SQL templates you can get embeded intellicense. You can check more detail in shoelacejs + tailwind demo

   let staticPart =
       Static.html """
           <div style="color: hotpink;">Congratulations! You made it ❤️</div>
       """
   
   // The performance will not be good as CE DSL for initial start. Because it need to parse at runtime and cache for next usage.
   let dynamicPart =
       adaptiview(){
           let! count, setCount = FSharp.Data.Adaptive.cval(1).WithSetter()
           Template.html $"""
               <div>
                   {staticPart}
                   {count}
                   <button onclick={fun _ -> setCount (count + 1)}></button>
               </div>
           """
       }
   

3. Fun.Blazor.Cli: support hot-reload and help you to generate CE style binding automatically for any blazor third party libraries.

   Docs for how to use it

   Docs for hot-reload

   Samples for using MudBlazor

   open Fun.Blazor
   open MudBlazor
   
   let alertDemo =
       MudCard'.create [
           MudAlert'() {
               Icon Icons.Filled.AccessAlarm
               "This is the way"
           }
       ]