Using Fable.Lit for Fable apps

Fable.Lit is

a comprehensive suite of tools to write Fable apps by embedding HTML into your F# code with the power of Google's Lit.

It's an exciting development in the Fable ecosystem, offering a new way to write your front-end code. In this blog post I'll explain a bit about what it is. To do so, I'll first discuss the underlying library, Lit, and Web Components, the suite of tools underpinning Lit.

Web Components

The MDN Web docs page on Web Components says:

Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.

You do this by:

• Specifying your custom element's functionality
• Registering your custom element
• Attaching a Shadow DOM to isolate your component's code and style from the main DOM (optional)
• Using a template and slots to store a fragment of content and inject variable markup into it (optional)
• Using it in your markup as though it were a regular HTML element

Web components have native browser support, bringing a number of benefits:

• You can use them without a front-end framework
• You can start with a basic HTML site and progressively add web components
• You can use them within your favourite front-end framework
• You can use the same component in multiple front-end frameworks

According to Lit's docs,

Lit is a simple library for building fast, lightweight web components.

At Lit's core is a boilerplate-killing component base class that provides reactive state, scoped styles, and a declarative template system that's tiny, fast and expressive.

Creating a Lit component is simple, giving a cleaner experience than using the Web Components APIs directly. For rendering, you can use Lit templates, which use JavaScript template literals with the html tag. This allows the browser to avoid re-rendering unchanged parts of the template. Again, this is a nicer experience than the underlying Web Components APIs offer.

It's worth knowing that there's a standalone lit-html npm package that allows you to get the benefits of Lit templates in plain HTML, without using web components.

Fable.Lit

Fable.Lit builds on top of the features that Lit provides.

You can use F# interpolated strings to build Lit templates and, as demonstrated by Angel Munoz, you can create an Elmish application using Fable.Lit templates as the view engine (instead of Fable.React):

let private counter
    (props: {| counter: int
               decrement: unit -> unit
               reset: unit -> unit
               increment: unit -> unit |})
    =
    html
        $"""
        <button @click={fun _ -> props.decrement ()}>-</button>
        <button @click={fun _ -> props.reset ()}>Reset</button>
        <button @click={fun _ -> props.increment ()}>+</button>
        <div>{props.counter}</div>
        """

let view state dispatch =
    let counterEl =
        counter
            {| counter = state.counter
               decrement = fun _ -> dispatch Decrement
               increment = fun _ -> dispatch Increment
               reset = fun _ -> dispatch Reset |}

    html
        $"""
        <div>Hello {state.name}!</div>
        {counterEl}
        """

Alfonso has even provided us with a VS Code extension for highlighting template strings. It means that VS Code gives you the same editor experience you would get when working in an HTML file.

It's already worth considering Fable.Lit purely for making Lit templates, but you're also covered if you want to write a full component. Fable.Lit provides two options:

• Using hooks similar to those provided by Fable.React and Feliz
• Creating web components

Wrap-up

Fable.Lit offers a new way to generate the view code for your Fable applications, including Elmish applications. You can also use it to make Fable components or even native web components. Thanks to the contributors for making this possible!