Alpine.js

FSharp.ViewEngine provides type-safe Alpine.js directives through the Alpine type.

Setup

Open the Alpine type to access Alpine.js directives:

open FSharp.ViewEngine
open type Html
open type Alpine

Initialize a component's reactive data with _xData:

div {
    _xData "{ open: false, count: 0 }"
    button {
        _xOn ("click", "count++")
        "Increment"
    }
    span { _xText "count" }
}

Run an expression when a component is initialized:

div {
    _xData "{ users: [] }"
    _xInit "users = await (await fetch('/api/users')).json()"
}

Toggle the visibility of an element:

div {
    _xData "{ open: false }"
    button { _xOn ("click", "open = !open"); "Toggle" }
    div { _xShow "open"; "Content here" }
}

Conditionally add or remove an element from the DOM:

template { _xIf "open"; div { "Shown when open is true" } }

Loop over a list and render elements:

template {
    _xFor "item in items"
    li { _xText "item" }
}

Dynamically set HTML attributes:

div {
    _xBind ("class", "open ? 'block' : 'hidden'")
}

Listen for browser events:

button {
    _xOn ("click", "handleClick()")
    _xOn ("mouseenter", "hovering = true")
    "Click me"
}

Set the text content of an element:

span { _xText "message" }

Two-way data binding for form elements:

div {
    _xData "{ search: '' }"
    input { _type "text"; _xModel "search" }
    p { _xText "search" }
}

You can also use modifiers:

input { _xModel ("value", ".debounce.500ms") }

Reference elements directly:

div {
    input { _xRef "nameInput" }
    button { _xOn ("click", "$refs.nameInput.focus()"); "Focus" }
}

Execute a script each time one of its dependencies change:

div { _xEffect "console.log(count)" }

Apply transition classes during enter/leave:

div {
    _xShow "open"
    _xTransition ()
    "Animated content"
}

Hide an element until Alpine is initialized:

div { _xCloak; "Hidden until Alpine loads" }

Move an element to another location in the DOM:

div { _xTeleport "body"; "Teleported to body" }

Trap focus within an element:

div { _xTrap "open"; "Focus is trapped here" }

Scope generated IDs to the component:

div { _xId "['dropdown']" }