Bolero

Bolero 0.20 released

A new HTML syntax on .NET 6

We are happy to announce the release of Bolero version 0.20. Bolero is a library that enables writing full-stack applications in F#, whose client side runs in WebAssembly using Blazor.

The main highlight of this release is a new syntax for writing HTML in F# that is both visually lighter and more efficient at runtime.

Install the latest project template with:

dotnet new -i Bolero.Templates::0.20.4

Changes

  • Bolero now requires .NET 6.

  • #249 Use computation expressions for the HTML syntax. Instead of functions taking lists of attributes and children, HTML now looks like this:

    concat {
    "Welcome to "
    a {
        attr.href "https://fsbolero.io"
        attr.id "link"
        "Bolero"
    }
    "!"
}

    This new syntax also applies to Blazor components. For example, to use a MatBlazor button:

    comp<MatButton> {
    attr.callback "OnClick" (fun _ -> dispatch ButtonClicked)
    "Link" => "https://fsbolero.io"
    "Target" => "_blank"

    "Click me!"
}

    The virtualize component uses let! to bind the current item:

    let numbers = [ 1 .. 100 ]

ul {
    virtualize.comp {
        virtualize.itemSize 20f

        let! item = virtualize.items numbers
        li {
            $"Item #{item}"
        }
    }
}

    In addition to being slightly more concise, this syntax is more efficient performance-wise; see the linked issue for more details.

  • The values empty and attr.empty are now functions: empty() / attr.empty().

  • CSS classes from multiple calls to attr.classes and/or attr.``class`` are no longer combined together into a single class attribute. This feature was incompatible with the code inlining that makes the new syntax performant.

    To combine CSS classes, combine them with String.concat " " and pass the result to attr.``class``.

  • Bolero's assemblies are now trimmed during publish in WebAssembly mode, for a smaller download size.

Happy coding!

Articles