SolidComponentAttribute

Overview

Apply this to bindings you are compiling into tag/element bindings:

[<SolidComponent>]
let Button (label: string) =
    button(class' = "btn") { label }

Requirements

The Attribute is only required when transformation of the body/content is required for elements in the DSL.

[<SolidComponent>]
let WrapDiv (btn: button) =
    div() { btn }

let Render () =
    "Button"
    |> Button
    |> WrapDiv

How does it work

This attribute recursively transforms the body of a member/function. It recursively searches the AST for tags, collects these tags into Elements, and compiles them as a Fable.Core call to JSX.create.

There are a few other optimisations and tricks that the plugin does with the AST, such as removing CE calls in lists etc to prevent obscuring Solid-JSs reactivity system. This was before Fable included these optimisations internally.

When else to use it

A common case is when you are referring to a Tag element value when constructing a record or tuple to pass or store for the UI to access (such as an icon).

Without being in a scope accessible by the plugin (a binding or member with a SolidComponent or SolidTypeComponent attribute) the !@ operator would not work.

However, if your icon/tag/element was a function binding (as opposed to a TypeComponent binding) then this wouldn't be an issue, and you can refer to the icon/tag/element directly.

// Define a SolidTypeComponent for example
[<Erase>]
type LucideActivity() =
    inherit Lucide.Activity()
4 collapsed lines
    [<SolidTypeComponent>]
    member props.__ =
        Lucide.Activity()

// Define a SolidComponent for example
[<SolidComponent>]
let MyIcon () =
    Lucide.Activity()

// Notice this is not in a Plugin scope
for item in titles do
    match item with
    | "Sports" -> // v---- This won't work
        item, Some !@LucideActivity

// Notice this is not in a Plugin scope
for item in titles do
    match item with
    | "Sports" ->
        item, Some MyIcon

[<SolidComponent>] // <-- Plugin Scope
let makeItems =
    for item in titles do
        match item with
        | "Sports" -> // v--- Works
            item, Some !@LucideActivity

Signatures

type SolidComponentAttribute(flag: int)
new()
new(compileOptions: ComponentFlag)

See Attribute Flags for the available ComponentFlags