Extension Methods

These methods are provided as method calls to an element constructor.

They either provide native functionality through directives provided by solid-js such as with bool: or on:, or javascript functionality such as object spreading through the extension method .spread.

On

.on(eventName: string, eventHandler: Event -> unit)

Uses the solid-js on: directive to handle events for the given name.

div().on("click", fun event -> JS.console.log "Clicked!)

Bool

.bool(name: string, value: bool)

Adds or removes the given attribute using the solid-js bool: directive.

div().bool("keyed", true)

Ref

.ref(el: #Element) | .ref(el: #Element -> unit)

Reference a native HTML element type before connecting to the DOM by passing a reactive signal setter, or by passing a mutable value.

let mutable containerRef: HTMLElement = null
div().ref(containerRef)

let containerRef, setContainerRef = createSignal<HTMLElement>(null)
div().ref(setContainerRef)

Attr

.attr(name: string, value: obj)

Adds an attribute to the element.

div().attr("someAttribute", 100)

ClassList

.classList(classListObj: obj)

Conditional classes, like clsx and related libraries, through the respective solid-js directive.

div().classList(createObj [ "absolute" ==> true; "disabled" ==> false ])

Data

.data(name: string, value: string)

Adds a data-[name] attribute.

div().data("visible", "false")

Style

.style'(value: obj) | .style'(value: (string * obj) list)

Passes the value to the style attribute as an object, or creates the object in place if provided a key,value list.

div().style'([ "--primary-color" ==> "#FFFFFF" ])

Spread

[<SolidComponent>]
let MyComponent () =
    let myObj = {| ``class`` = "bg-primary" |}
    div().spread myObj { "Primary BG" }

Any identifier can be spread within a tag using the special extension method .spread.

// ...
    [<SolidTypeComponent>]
    member props.constructor =
        props.class' <- "bg-accent"
        div().spread props { "Accent BG" }

This is most commonly used in building complex components where the properties of a parent component are passed to a nested child component.

namespace Partas.Solid.MyCenteredButton
open Fable.Core
open Partas.Solid

[<Erase>]
type MyCenteredButton() =
    interface RegularNode
    [<SolidTypeComponent>]
    member props.constructor =
        div(class' = "flex justify-center w-full") {
            button().spread props
        }

// usage
[<SolidComponent>]
let SpreadExampleOne () =
    MyCenteredButton(class' = "bg-primary hover:bg-background") { "Centered" }

Gotchas

When used with SolidTypeComponent's properties, one must remember that any reads from the props identifier before or after the spread will result in the plugin splitting that property from the identifier.

namespace Partas.Solid.MyCenteredButton
open Fable.Core
open Partas.Solid

[<Erase>]
type MyCenteredButtonTwo() =
    interface RegularNode
    [<SolidTypeComponent>]
    member props.constructor =
    div(class' = "flex justify-center w-full") {
        div(class' = props.class') { "Div" }
        button().spread props
    }

// usage
[<SolidComponent>]
let SpreadExampleTwo () =
    MyCenteredButtonTwo(class' = "bg-primary hover:bg-background") { "Centered" }

In the above example, the div receives the classes that we pass to MyCenteredButtonTwo, but the button does not receive it because it was removed from the props identifier when it was read by the div.

In cases like this, if you want to pass these split properties with the spread, you have to manually pass the properties to the child along with the spread:

[<Erase>]
type MyCenteredButtonThree() =
    interface RegularNode
    [<SolidTypeComponent>]
    member props.constructor =
        div(class' = "flex w-full justify-center") {
            div(class' = props.class') { "Div" }
            button(class' = props.class').spread props
        }