Skip to content

About Partas.Solid

Introduction

Partas.Solid is a plugin for Fable, the F# to JavaScript compiler. It turns F# into JSX for Solid. Partas.Solid 3.0 targets Solid 2.0 (currently 2.0.0-rc.14).

It has one overarching goal that sets it apart from other F# front-end libraries:

What this means

A component you write is called the same way as div or a component imported from a library. It inherits its shape from one type: inherit button() and it accepts children, classes and every button attribute and event, with no overloads written by hand. Defaults are set in the body, as they would be in the JavaScript you are porting from:

[<Erase>]
type Card() =
    inherit button()

    [<Erase>]
    member val label: string = unbox null with get, set

    [<SolidTypeComponent>]
    member props.View =
        props.label <- "Untitled"
        button(style = "padding: .25rem .75rem").spread props { props.label }

[<SolidComponent>]
let CardDemo () =
    div (style = "display: flex; gap: .5rem") {
        Card()
        Card(label = "Disabled", disabled = true)
        button (style = "padding: .25rem .75rem") { "Native button" }
    }

export function Card(props) {
    props = merge({
        label: "Untitled",
    }, props);
    const PARTAS_OTHERS = omit(props, "label");
    return <button style="padding: .25rem .75rem"
        {...PARTAS_OTHERS} n$={false}>
        {props.label}
    </button>;
}

export function CardDemo() {
    return <div style="display: flex; gap: .5rem">
        <Card />
        <Card label="Disabled"
            disabled={true} />
        <button style="padding: .25rem .75rem">
            Native button
        </button>
    </div>;
}

Where to go next

Edit this page