Datastar

FSharp.ViewEngine provides type-safe Datastar attributes through the Datastar type.

Setup

Open the Datastar type to access Datastar attributes:

open FSharp.ViewEngine
open type Html
open type Datastar

Core Attributes

data-signals

Define reactive signals on an element:

div {
    _dataSignals ("count", "0")
    _dataSignals ("name", "'World'")
}

data-on

Listen for events and run expressions:

button {
    _dataOn ("click", "$count++")
    "Increment"
}

data-bind

Two-way bind a signal to an input element:

input { _type "text"; _dataBind "name" }

data-show

Conditionally show or hide an element:

div { _dataShow "$count > 0"; "Count is positive" }

data-text

Set the text content of an element reactively:

span { _dataText "$count" }

data-effect

Run an expression whenever its dependencies change:

div { _dataEffect "console.log($count)" }

data-init

Run an expression when the element is initialized:

div { _dataInit "console.log('initialized')" }

data-attr

Dynamically set an HTML attribute:

div { _dataAttr ("disabled", "$count === 0") }

data-class

Toggle a CSS class based on an expression:

div { _dataClass ("active", "$isActive") }

data-computed

Define a computed signal derived from other signals:

div { _dataComputed ("double", "$count * 2") }

data-style

Dynamically set a CSS style property:

div { _dataStyle ("color", "$isError ? 'red' : 'green'") }

data-ref

Reference an element by name:

input { _dataRef "myInput" }

data-indicator

Bind a loading indicator signal:

button { _dataIndicator "loading" }

data-json-signals

Render signals as JSON for debugging:

pre { _dataJsonSignals () }
pre { _dataJsonSignals "{include: /counter/, exclude: /temp$/}" }

data-ignore

Prevent Datastar from processing an element:

div { _dataIgnore }

data-ignore-morph

Prevent morphing of an element during updates:

div { _dataIgnoreMorph }

data-on-intersect

Run an expression when an element enters the viewport:

div { _dataOnIntersect "$count++" }

data-on-interval

Run an expression on a timed interval:

div { _dataOnInterval "$count++" }

data-on-signal-patch

Run an expression when signals are patched:

div { _dataOnSignalPatch "console.log('patched')" }

data-on-signal-patch-filter

Filter which signal patches trigger the expression:

div { _dataOnSignalPatchFilter "{include: /^count$/}" }

data-preserve-attr

Preserve specified attributes during morphing:

div { _dataPreserveAttr "class" }

Pro Attributes

data-animate

Apply animations to an element:

div { _dataAnimate "fadeIn 0.5s" }

data-custom-validity

Set custom validation messages:

input { _dataCustomValidity "$name === '' ? 'Name is required' : ''" }

data-on-raf

Run an expression on every animation frame:

canvas { _dataOnRaf "draw()" }

data-on-resize

Run an expression when the element is resized:

div { _dataOnResize "console.log('resized')" }

data-persist

Persist signals to local storage (or session storage with modifiers):

div { _dataPersist () }                                  // default key: datastar
div { _dataPersist "mykey" }                           // custom storage key
div { _dataPersist ("mykey", "{include: /foo/}") }    // key + filter object

data-query-string

Sync signals with URL query parameters:

div { _dataQueryString () }
div { _dataQueryString "{include: /foo/, exclude: /temp$/}" }

data-replace-url

Replace the current URL:

div { _dataReplaceUrl "/new-path" }

data-rocket

Create a Rocket web component:

div { _dataRocket "{ endpoint: '/stream' }" }

data-scroll-into-view

Scroll the element into view:

div { _dataScrollIntoView }

data-view-transition

Apply view transitions:

div { _dataViewTransition "fade" }

Complete Example

Here's a complete example combining multiple Datastar attributes:

div {
    _dataSignals ("count", "0")
    _dataSignals ("name", "'World'")
    _dataComputed ("greeting", "'Hello, ' + $name + '!'")

    input { _type "text"; _dataBind "name" }
    span { _dataText "$greeting" }

    button {
        _dataOn ("click", "$count++")
        _dataClass ("active", "$count > 0")
        "Clicked "
    }
    span { _dataText "$count" }
    span { _dataShow "$count > 0"; " times" }
}