Partas.Solid

Partas.Solid is a front-end framework for F#. It binds Solid and compiles your F# to the JSX Solid expects, through a Fable compiler plugin.

• F#. Write your front end in F#, next to an F# back end, with types checked end to end.
• Fable. Fable compiles your code to JavaScript. The Partas.Solid plugin turns your components into JSX on the way.
• Solid. The output is ordinary Solid code. You get its fine-grained reactivity and small bundles, and you can use it from JavaScript.

[<SolidComponent>]
let Counter () =
    let count, setCount = createSignal 0

    button (onClick = fun _ -> setCount (count () + 1)) {
        $"Clicked {count ()} times"
    }

export function Counter() {
    const patternInput = createSignal(0);
    const count = patternInput[0];
    return <button onClick={(_arg) => {
            patternInput[1](count() + 1);
        }}>
        {`Clicked ${count()} times`}
    </button>;
}

The example above is live, compiled from this F# when the site was built.

Partas.Solid is an opinionated fork of Oxpecker.Solid. It keeps Oxpecker's DSL and transforms the F# AST more aggressively to produce correct JSX. Please support the original project too. See the Oxpecker fork for the differences.

Where to start

• Installation: set up Fable, the packages and Vite.
• Overview: the two ways to write a component.
• Oxpecker DSL: elements, attributes and children.
• Building the DOM: reactivity, control flow and lists.
• API differences: where the F# API differs from Solid's.
• Common issues: what to check when something goes wrong.

For the plugin itself, see About and JSX output.