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!