Fun.Blazor

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

Use F# ❤️😊 for blazor
Computation expression (CE) style DSL for internal and third party blazor libraries
Dependency injection (html.inject/html.comp)
Adaptive model (adaptiview/AdaptivieForm) (recommend), elmish model (html.elmish)
Giraffe style routing (html.route)
Type safe style (Fun.Css)
Convert html to CE style by Fun.Dev.Tools

Check the WASM Docs for more 🚀

Benchmark

Method	Mean	Error	StdDev	Gen 0	Allocated
RenderWithRazorCSharp	400.3 ns	6.99 ns	6.20 ns	0.0610	384 B
RenderWithBolero	926.1 ns	17.49 ns	17.96 ns	0.2546	1,600 B
RenderWithFunBlazorCE	731.1 ns	14.07 ns	21.49 ns	0.1173	736 B
RenderWithFunBlazorTemplate	2,569.9 ns	42.22 ns	39.50 ns	0.6752	4,240 B

Main projects

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}"
        }
    }

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>
        """
    }

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"
        }
    ]

ruxo/Fun.Blazor

Fun.Blazor

Benchmark

Main projects