Fuzzy.Blazor.FluentRenderTreeBuilder 1.1.0

A fluent RenderTreeBuilder for Blazor Server and WebAssembly

Additional Details

Please use v2, which provides more extensions and smarter block closing methods.

There is a newer version of this package available.
See the version list below for details.
Install-Package Fuzzy.Blazor.FluentRenderTreeBuilder -Version 1.1.0
dotnet add package Fuzzy.Blazor.FluentRenderTreeBuilder --version 1.1.0
<PackageReference Include="Fuzzy.Blazor.FluentRenderTreeBuilder" Version="1.1.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add Fuzzy.Blazor.FluentRenderTreeBuilder --version 1.1.0
The NuGet Team does not provide support for this client. Please contact its maintainers for support.

FluentRenderTreeBuilder

The FluentRenderTreeBuilder library extends Blazor's built-in RenderTreeBuilder with a clean and fluent API for building Blazor components in pure C# code, and automatically generates source code line-based sequence numbers.

The resulting markup code is identical to the razor compiler output, with minor whitespace differences, and optionally output can be automatically minified by disabling the built-in 'pretty printing' feature, which is enabled by default to match the behaviour of Blazor's razor page compiler.

Fluent API

Developers don't have to hand-write repetitive calls to the built-in RenderTreeBuilder as the FluentRenderTreeBuilder allows fluent chaining of calls.

Taking an example from Chris Sainty's blog, this code:

protected override void BuildRenderTree(RenderTreeBuilder builder)
{
    base.BuildRenderTree(builder);
    builder.OpenElement(0, "nav");
    builder.AddAttribute(1, "class", "menu");
        
    builder.OpenElement(2, "ul");
    builder.OpenElement(3, "li");
    builder.OpenComponent<NavLink>(4);
    builder.AddAttribute(5, "href", "/");
    builder.AddAttribute(6, "Match", NavLinkMatch.All);
    builder.AddAttribute(7, "ChildContent", (RenderFragment)((builder2) => {
            builder2.AddContent(8, "Home");
    }));
    builder.CloseComponent();
    builder.CloseElement();
}

can now be written as:

protected override void BuildRenderTree(RenderTreeBuilder builder)
    => builder.Build()
        .OpenElement("nav", "menu")
            .OpenAutoList()
                .OpenComponent<NavLink>()
                    .Attribute("href", "/")
                    .Attribute("Match", NavLinkMatch.All)
                    .ChildContent("Home")
                .Close()
            .CloseAutoList()
        .Close();

There are many new convenience methods and parameters provided, such as automatically generating id and class attributes from optional parameters to OpenElement, as shown above with the menu CSS class.

See the pages and components in the test app provided in the source code repo on GitHub for more usage examples.

Extensibility

Extension methods can be used to add new high-level functionality, and many are already included to help with table, list and attribute generation. In the above code snippet the OpenElement method which takes optional CSS class and id attributes extends the built-in OpenElement method.

For example, an extension method to automatically generate NavLink content might look like this:

public static FluentRenderTreeBuilder NavLink(this FluentRenderTreeBuilder frtb,
        string url, string markup, NavLinkMatch match = NavLinkMatch.All,
        string? @class = null, string? id = null)
    => frtb.OpenComponent<NavLink>(@class ?? "nav-link", id)
            .Attribute("href", url)
            .Attribute("Match", match)
            .ChildContent((MarkupString) markup, prettyPrint: true)
            .NewLine(prettyPrint: true)
        .Close();

This would then allow everything from the OpenComponent&lt;NavLink&gt;() call to its matching Close() call in the above code snippet to be replaced by a single call to NavLink(&quot;/&quot;, &quot;Home&quot;), making navigation list generation possible with just a few lines of code.

Source code line-based sequence numbers

When using FluentRenderTreeBuilder developers don't have to manually provide and maintain the sequence numbers for each call to RenderTreeBuilder.

Unlike variable-based or calculated sequence numbers, which must not be used in Blazor components, FluentRenderTreeBuilder makes use of the [CallerLineNumber] attribute to generate each tree frame's sequence number based on the calling source code line number.

FluentRenderTreeBuilder

The FluentRenderTreeBuilder library extends Blazor's built-in RenderTreeBuilder with a clean and fluent API for building Blazor components in pure C# code, and automatically generates source code line-based sequence numbers.

The resulting markup code is identical to the razor compiler output, with minor whitespace differences, and optionally output can be automatically minified by disabling the built-in 'pretty printing' feature, which is enabled by default to match the behaviour of Blazor's razor page compiler.

Fluent API

Developers don't have to hand-write repetitive calls to the built-in RenderTreeBuilder as the FluentRenderTreeBuilder allows fluent chaining of calls.

Taking an example from Chris Sainty's blog, this code:

protected override void BuildRenderTree(RenderTreeBuilder builder)
{
    base.BuildRenderTree(builder);
    builder.OpenElement(0, "nav");
    builder.AddAttribute(1, "class", "menu");
        
    builder.OpenElement(2, "ul");
    builder.OpenElement(3, "li");
    builder.OpenComponent<NavLink>(4);
    builder.AddAttribute(5, "href", "/");
    builder.AddAttribute(6, "Match", NavLinkMatch.All);
    builder.AddAttribute(7, "ChildContent", (RenderFragment)((builder2) => {
            builder2.AddContent(8, "Home");
    }));
    builder.CloseComponent();
    builder.CloseElement();
}

can now be written as:

protected override void BuildRenderTree(RenderTreeBuilder builder)
    => builder.Build()
        .OpenElement("nav", "menu")
            .OpenAutoList()
                .OpenComponent<NavLink>()
                    .Attribute("href", "/")
                    .Attribute("Match", NavLinkMatch.All)
                    .ChildContent("Home")
                .Close()
            .CloseAutoList()
        .Close();

There are many new convenience methods and parameters provided, such as automatically generating id and class attributes from optional parameters to OpenElement, as shown above with the menu CSS class.

See the pages and components in the test app provided in the source code repo on GitHub for more usage examples.

Extensibility

Extension methods can be used to add new high-level functionality, and many are already included to help with table, list and attribute generation. In the above code snippet the OpenElement method which takes optional CSS class and id attributes extends the built-in OpenElement method.

For example, an extension method to automatically generate NavLink content might look like this:

public static FluentRenderTreeBuilder NavLink(this FluentRenderTreeBuilder frtb,
        string url, string markup, NavLinkMatch match = NavLinkMatch.All,
        string? @class = null, string? id = null)
    => frtb.OpenComponent<NavLink>(@class ?? "nav-link", id)
            .Attribute("href", url)
            .Attribute("Match", match)
            .ChildContent((MarkupString) markup, prettyPrint: true)
            .NewLine(prettyPrint: true)
        .Close();

This would then allow everything from the OpenComponent&lt;NavLink&gt;() call to its matching Close() call in the above code snippet to be replaced by a single call to NavLink(&quot;/&quot;, &quot;Home&quot;), making navigation list generation possible with just a few lines of code.

Source code line-based sequence numbers

When using FluentRenderTreeBuilder developers don't have to manually provide and maintain the sequence numbers for each call to RenderTreeBuilder.

Unlike variable-based or calculated sequence numbers, which must not be used in Blazor components, FluentRenderTreeBuilder makes use of the [CallerLineNumber] attribute to generate each tree frame's sequence number based on the calling source code line number.

Release Notes

The FluentRenderTreeBuilder wraps the built-in RenderTreeBuilder with a clean and fluent API for building Blazor components in pure C# code, and automatically generates source line based sequence numbers. See the example pages and components in the test app provided in the source code repo on GitHub for more details.

When using the FluentRenderTreeBuilder developers don't have to manually provide and maintain the sequence numbers or hand-write repetitive calls to the built-in RenderTreeBuilder.

The resulting markup code is identical to the razor compiler output, with minor whitespace differences, and optionally output can be automatically minified by disabling the built-in 'pretty printing' feature, which is enabled by default to match the behaviour of Blazor's razor page compiler.

All feedback and suggestions are welcome. Thank you for taking a look at FluentRenderTreeBuilder!

Fuzzy Work Ltd.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version History

Version Downloads Last updated
2.2.0 40 8/24/2020
2.1.0 25 8/17/2020
2.0.0 52 8/9/2020
1.1.1 101 8/5/2020
1.1.0 91 8/4/2020
1.0.1 158 8/1/2020
1.0.0 74 7/31/2020