Fun.Blazor

Fun.Blazor is a project designed to make Blazor development easier for F# developers. It provides a Domain Specific Language (DSL) using Computation Expressions (CE) to wrap both internal and third-party Blazor libraries.

Key features include:

• F# Blazor Development: Full support for writing Blazor apps in F#.
• CE-style DSL: Uses computation expressions for defining HTML and components.
• Dependency Injection: Supported via html.inject.
• Model Support: Supports the Adaptive model (recommended via adaptiview/AdaptiveForm) and the Elmish model (via html.elmish).
• Routing: Implements Giraffe-style routing (html.route) alongside official Blazor routing.
• Type-safe CSS: Integration with Fun.Css for type-safe CSS editing.
• HTML Conversion: Tools from Fun.Dev.Tools can convert standard HTML into CE-style code.

Fun.Blazor is a library designed to make Blazor development easier for F# developers. It provides several key capabilities:

• F# for Blazor: Enables writing Blazor applications using F# instead of C#.
• Computation Expression (CE) DSL: Provides a DSL for defining HTML and interacting with both internal and third-party Blazor libraries.
• Dependency Injection: Supports function-style DI via html.inject.
• Architectural Models: Supports the Adaptive model (highly recommended via adaptiview/AdaptiveForm) and the Elmish model (via html.elmish).
• Routing: Implements Giraffe-style routing using html.route.
• Styling: Provides type-safe stylesheet creation through Fun.Css.
• Tooling: Includes Fun.Dev.Tools to convert standard HTML into CE-style code.
• Compatibility: All official Blazor features remain fully functional.

In Fun.Blazor, everything is dynamic, meaning sequence numbers (used for DOM diff calculation) can change when you compose different fragments or components. If a conditional block (like an if statement) adds or removes nodes, it can shift the sequence numbers of all subsequent elements, potentially degrading performance.

To prevent this, use the region function to isolate dynamic content. A region creates a boundary that isolates the sequence numbers of its internal content, ensuring that changes inside the region do not affect the sequence numbers of elements outside of it.

While often transparent, using region is a best practice for both code readability and performance when dealing with highly dynamic UI segments.

div {
    region {
        // Content inside here has isolated sequence numbers
        if isLoading then
            loader
    }
    div {
        "hi"
    }
}

Classes inheriting from FunComponent are useful when you need to interact closely with the Blazor framework or provide components to C# consumers. Unlike functions, classes automatically trigger a re-render after event handlers are executed or when this.StateHasChanged() is called, making them compatible with standard mutable state.

type Counter() =
    inherit FunComponent()

    let mutable counter = 0

    [<Inject>]
    member val Logger: ILogger<Counter> = Unchecked.defaultof<_> with get, set

    override this.Render() =
        fragment {
            h1 { $"Count: {counter}" }

            button {
                onclick (fun _ ->
                    let newCount = counter + 1
                    this.Logger.LogDebug("Old Value: {count} - New Value: {newCount}", counter, newCount)
                    counter <- newCount
                )
                "Increment"
            }
        }

Fun.Blazor supports multiple patterns. While Elmish is available, the project suggests a layered approach for better performance and state sharing, especially in larger applications.

Recommended Layers:

• Db / Domain / Services: Core logic and data.
• UI: The presentation layer, which can be subdivided into:
  • Stores.fs: Contains IShareStore (scoped to the session) or IGlobalStore (singleton/shared across all users in Blazor Server).
  • Hooks.fs: Standalone UI logic (e.g., IComponentHook) for managing side effects or complex form states.
  • Controls.fs: Small, reusable shared UI components.
  • Components: Business-specific components (e.g., Comp1.fs).
  • App.fs: The entry point where routes and top-level layout are composed.

Component Composition Strategy:

To improve hot-reload speed, intellisense performance, and inline optimization, it is recommended to keep fragments small and compose them using html.inject.

// Example of composing small fragments into a component
let private fragment1 = div { ... }

let private fragment2 (shareStore: IShareStore) = 
    adaptiview { 
        let! isDark, setIsDark = shareStore.IsDark.WithSetter()
        div { ... }
    }

type Comp1 = 
    static member Create() = 
        html.inject (fun (svc1, shareStore: IShareStore, ...) -> 
            div {
                fragment1
                fragment2 shareStore
            }
        )