Web Components for F#

A component in a few lines

The code below is the source file for the live component beside it. This site is built with Firelight.

module Snippets.Counter

open Fable.Core
open Firelight
open type Firelight.Lit

[<AttachMembers>]
type Counter() =
    inherit LitElement()

    static member properties = PropertyDeclarations.create [ "count", PropertyDeclaration<int>() ]

    static member styles =
        css
            $$"""
        button { font: inherit; padding: 0.5rem 1rem; cursor: pointer; }
        """

    member val count = 0 with get, set

    override this.render() =
        html
            $"""
        <button @click={fun _ -> this.count <- this.count + 1}>
            Clicked {this.count} times
        </button>"""

defineElement<Counter> "my-counter"

Why a class?

You write a component as an F# class with mutable properties, which can look out of place in F#. But a custom element is a class: the browser creates it, calls its lifecycle methods and sets its properties, and Lit's components extend LitElement. Firelight keeps that mapping direct: a component is an ordinary F# class.

• What you write is what runs. There's no Firelight-specific compiler plugin or build step: [<AttachMembers>] tells Fable to put the members on the JavaScript class under their own names, where Lit looks for them.
• Lit's features map directly. Lifecycle callbacks, controllers and shadow DOM options are members you override or call on the class, so Lit's documentation for them carries over.
• The class is a thin shell. Changing this.count, a declared reactive property, schedules a render. Keep domain logic in functions and state in immutable values; the next example moves the state into an Elmish loop.

The Elmish loop, inside a component

ElmishController runs Model-View-Update inside a component. The update function stays pure and every new model triggers a render.

module Snippets.ElmishCounter

open Fable.Core
open Firelight
open Firelight.Elmish
open type Firelight.Lit

type Model = { Count: int }

type Msg =
    | Increment
    | Decrement

let init () = { Count = 0 }

let update msg model =
    match msg with
    | Increment -> { model with Count = model.Count + 1 }
    | Decrement -> { model with Count = model.Count - 1 }

[<AttachMembers>]
type ElmishCounter() as this =
    inherit LitElement()

    let elmish = ElmishController.simple this init update

    static member styles =
        css
            $$"""
        :host { display: inline-flex; align-items: center; gap: 0.75rem; }
        button { font: inherit; width: 2.5rem; height: 2.5rem; cursor: pointer; }
        """

    override _.render() =
        html
            $"""
        <button @click={fun _ -> elmish.dispatch Decrement}>−</button>
        <output>{elmish.model.Count}</output>
        <button @click={fun _ -> elmish.dispatch Increment}>+</button>"""

defineElement<ElmishCounter> "my-elmish-counter"

Why Firelight

Firelight compared sets it beside Fable.Lit, Feliz, Sutil and Lit in TypeScript.

Packages

Start with Firelight and add the others as you need them. Each page explains when you'd want the package and has a live example.

Demo apps

Get started

Add the package to a Fable project, and install Lit from npm:

dotnet add package Firelight
npm install lit

New to Firelight? The Get started tutorial creates an app from a template, then gives its component an attribute, an event, styles and a list.

Firelight hasn't reached 1.0 yet, so its API may still change before then.