Fun Blazor

Fun.Blazor Nuget

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

It is based on bolero and Feliz.Engine

WASM side docs

Server side docs

What you can get with this project?

  1. Use F# ❤️😊 for blazor
  2. Feliz and computation style DSL for internal and thrid party blazor libraries
  3. Dependency injection (html.inject)
  4. Elmish model (html.elmish), obervable model (html.watch), adaptive model(adapt)

Domain specific language (DSL)

By default we expose Feliz style DSL for internal components

open Fun.Blazor
let app =
    html.div [
        attr.styles [ style.margin 10 ]
        html.text "Fun Blazor"
    ]
// Open this to allow CE style
open Fun.Blazor.DslCE
let app =
    div(){
        styles [ style.margin 10 ]
        childContent "Fun Blazor"
    }

With Fun.Blazor.Cli you can generate Feliz or CE style automatically for any blazor third party libraries

open Fun.Blazor
open MudBlazor

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

Feliz style

open Fun.Blazor
open MudBlazor

let alertDemo =
    mudCard.create [
        mudAlert.create [
            mudAlert.icon Icons.Filled.AccessAlarm
            mudAlert.childContent "This is the way"
        ]
    ]

Create a WASM app

Other resources like index.html should be put under wwwroot. You can check Fun.Blazor.Docs.Wasm project for detail

dotnet add package Fun.Blazor
open System
open Microsoft.Extensions.DependencyInjection
open Microsoft.AspNetCore.Components.WebAssembly.Hosting
open Fun.Blazor

let app = html.text "hello world"

let builder = WebAssemblyHostBuilder.CreateDefault(Environment.GetCommandLineArgs())
        
builder
    .AddFunBlazorNode("#app", app)
    .Services
    .AddFunBlazor() |> ignore
        
builder.Build().RunAsync() |> ignore

Create a blazor server app

You can check project Fun.Blazor.Docs.Server for the actual code

dotnet add package Fun.Blazor
dotnet add package Bolero.Server
// Startup.fx
open System
open Microsoft.AspNetCore.Builder
open Microsoft.AspNetCore.Hosting
open Microsoft.Extensions.Hosting
open Microsoft.Extensions.DependencyInjection
open Bolero.Server
open Fun.Blazor

type Index () =
    inherit FunBlazorComponent()

    override this.Render() = html.text "Fun Blazor"

    static member page =
        html.doctypeHtml [
            html.head [
                html.title "Fun Blazor"
                html.baseUrl "/"
                html.meta [ attr.charsetUtf8 ]
                html.meta [ attr.name "viewport"; attr.content "width=device-width, initial-scale=1.0" ]
            ]
            html.body [
                attr.childContent [ html.bolero Bolero.Server.Html.rootComp<Index> ]
                html.bolero Bolero.Server.Html.boleroScript
            ]
        ]


Host.CreateDefaultBuilder(Environment.GetCommandLineArgs())
    .ConfigureWebHostDefaults(fun builder ->
        builder
            .ConfigureServices(fun (services: IServiceCollection) ->
                services.AddControllersWithViews() |> ignore
                services
                    .AddServerSideBlazor().Services
                    .AddBoleroHost(true, true)
                    .AddFunBlazor() |> ignore)
            .Configure(fun (application: IApplicationBuilder) ->
                application
                    .UseStaticFiles()
                    .UseRouting()
                    .UseEndpoints(fun endpoints ->
                        endpoints.MapBlazorHub() |> ignore
                        endpoints.MapFallbackToBolero(Index.page) |> ignore) |> ignore) |> ignore)
    .Build()
    .Run()