KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #developer-tools #ai-agent #claude-code #codex #typescript #ai-agents #deepseek-harness #mcp #cli #rust

Fun.Blazor

★ 212 Open GitHub ↗

Powered by .NET blazor!!! ❤ F#

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Fun.Blazor [![Nuget](https://img.shields.io/nuget/vpre/Fun.Blazor)](https://www.nuget.org/packages/Fun.Blazor)

![image](https://raw.githubusercontent.com/slaveOftime/Fun.Blazor/master/Docs/assets/fun-blazor%3D.png)

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)
4. [Adaptive](https://github.com/fsprojects/FSharp.Data.Adaptive) model (adaptiview/AdaptivieForm) (**recommend**), [elmish](https://github.com/elmish/elmish) model (html.elmish)
5. Giraffe style routing (html.route/blazor official style)
6. Type safe css style (Fun.Css)
7. Convert html to CE style by [Fun.Dev.Tools](https://slaveoftime.github.io/Fun.DevTools.Docs)

Check the [WASM Docs](https://slaveoftime.github.io/Fun.Blazor.Docs/) for more 🚀

## Donation

If you find my projects helpful and would like to support my work, consider making a donation via PayPal. Your support is greatly appreciated!

## Start to use

dotnet new install Fun.Blazor.Templates::4.1.1
    dotnet new fun-blazor -o FunBlazorDemo1

> The template is upgraded to dotnet 9, but you can downgrade it according to your needs.

## Code samples

```fsharp
// Functional style
let count = cval 0
let counter (str: string) = section {
    h2 { "Counter: "; str }
    adapt {
        let! count, setCount = count.WithSetter()
        button {
            onclick (fun _ -> setCount (count + 1))
            "Increase "; count
        }
    }
}

// Class style
type CountPage() =
    inherit FunComponent()

let mutable count = 0

override _.Render() = main {
        h1 { "Counter Page" }
        p { "hi here" }
        button {
            onclick (fun _ -> count <- count + 1)
            "Increase "; count
        }
        counter "functional style"
    }
```

## Naming convention: trailing apostrophe

Some DSL names would collide with F# keywords or with other identifiers in scope.
The Fun.Blazor DSL disambiguates those with a trailing apostrophe:

- `class'` — sets the `class` attribute (`class` is an F# keyword)
- `type'` — sets the `type` attribute (`type` is an F# keyword)
- `html'` — the `<html>` root element CE (the bare `html` is a static utility
  class that owns helpers such as `html.raw`, `html.inject`, `html.fragment`)

So a full document is authored as:

```fsharp
fragment {
    html.raw "<!DOCTYPE html>"
    html' {
        lang "en"
        head { title { "My app" } }
        body { ... }
    }
}
```

Writing the bare `html { ... }` instead produces
`FS0501: The object constructor 'html' takes 0 argument(s) but is here given 1`
because F# resolves the bare name to the static class above.

## Local development

You can run **dotnet fsi build.fsx -- -h** to check what is available to help you get started.

## Benchmark

BenchmarkDotNet v0.14.0, Windows 11 (10.0.22631.4317/23H2/2023Update/SunValley3)
12th Gen Intel Core i7-12700H, 1 CPU, 20 logical and 14 physical cores
.NET SDK 9.0.100
  [Host]     : .NET 9.0.0 (9.0.24.52809), X64 RyuJIT AVX2 DEBUG
  DefaultJob : .NET 9.0.0 (9.0.24.52809), X64 RyuJIT AVX2

| Method                         | Mean     | Error    | StdDev   | Ratio | RatioSD | Gen0   | Allocated | Alloc Ratio |
|------------------------------- |---------:|---------:|---------:|------:|--------:|-------:|----------:|------------:|
| RenderWithRazorCSharp          | 247.7 ns |  3.80 ns |  3.37 ns |  1.00 |    0.02 | 0.0291 |     368 B |        1.00 |
| RenderWithFunBlazorInlineCE    | 374.1 ns |  5.53 ns |  4.91 ns |  1.51 |    0.03 | 0.0439 |     552 B |        1.50 |
| RenderWithFunBlazorSSRTemplate | 475.6 ns |  5.78 ns |  5.40 ns |  1.92 |    0.03 | 0.0420 |     528 B |        1.43 |
| RenderWithBolero               | 497.9 ns |  8.46 ns | 10.07 ns |  2.01 |    0.05 | 0.1192 |    1496 B |        4.07 |
| RenderWithFunBlazorArray       | 525.2 ns | 10.44 ns | 11.17 ns |  2.12 |    0.05 | 0.1144 |    1440 B |        3.91 |
| RenderWithFunBlazorTemplate    | 785.9 ns |  7.95 ns |  7.44 ns |  3.17 |    0.05 | 0.1240 |    1560 B |        4.24 |

Fun.Blazor

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README