My experiences with Fable.Core.JSX

[shayanhabibi]

My experiences with Fable and JSX

I am an amateur at JavaScript. Probably worse than an amateur. There are many poems that would justifiable express my distaste of JS and all things associated with it.

After grinding so many pointless hours of my life away trying to figure out how to do something such as creating a port/bindings for Shadcn so that I wouldn't have to create a single JScript file has really caused me grievance. I don't blame F# or Fable. I blame JScript. Through and through.

It would be fantastic if I didn't have to dip my toes into this festid pool, but that is apparently the only real way of deploying an SPA to the web without having to create the tools as I went along (which is what I think I've ended up doing).

This is just a dump of my experiences that hopefully might help someone else as nooby as myself (unlikely), or perhaps elicit some fantastical solution that would have saved me days of my life (and perhaps momentarily have me wish violence upon whatever genius shines that light onto my failure ;) ).

Motivation

My motivation on this journey was to create a port of Shadcn so that I could consume/customise a nice default set of components in Feliz style that had a well rounded set of relatively easily styled functional items.

This is simply because I do not know Html/JScript or anything of the sort, and the Feliz style was the most attractive method of building the UI. Naturally, I learned that there is no avoiding the tyranny of these technologies if you want to develop on the web. Fair enough (I miss systems programming though).

JSX on Fable

When I gave up on creating bindings for Shadcn-react libraries (because they were sub-par and lost any benefit of using Shadcn in customisability), I came across the JSX portion of Feliz and remembered reading on Fable that I could generate JSX from F#.

Fantastic!

Off I went to explore how to use this, and was unable to find anything on the web documentation to reflect on its usage.

My memory of JSX in Fable was from reading the blog posts. This was essentially all I had to go off.

// ...
open Fable.Core
open Feliz

[<JSX.Component>]
let Accordion () : JSX.Element =
    let className = "border-b"
    JSX.jsx $"""
    <div>
        <input placeholder="banana" className={className} />
    </div>
    """

let root = ReactDOM.createRoot (document.getElementById "elmish-app")
root.render ( TestView () )

Lets give it a test run...

root.render expecteded a ReactElement, it was given a JSX.Element

Ah, no problem, this was discussed in the article; since Feliz consumes its own ReactElement type, and we are producing JSX.Elements, we will have to just get the compiler to turn a blind eye since we are aware they are compatible.

As per the blog, some easy helper funcs can keep things still well typed to a degree. I decided to make a little library for these helpers.

// JSXInterop
open Fable.Core
open Feliz
open Fable.Core.JsInterop

[<RequireQualifiedAccess>]
type [<Erase>] JSX =
    // Interop helpers
    static member inline toReact ( el : JSX.Element ) : ReactElement = unbox el
    static member inline toJSX ( el : ReactElement ) : JSX.Element = unbox el

// Program
// ...
open Fable.Core
open Feliz
open JSXInterop

[<JSX.Component>]
let Accordion () : JSX.Element =
    let className = "border-b"
    JSX.jsx $"""
    <div>
        <input placeholder="banana" className={className} />
    </div>
    """

let root = ReactDOM.createRoot (document.getElementById "elmish-app")
root.render ( TestView () |> JSX.toReact )

Ah, I had succesfully rendered an input with some styling that was interpolated in.

I did some extra naive tests such as passing reactelements in as a parameter to see if I could instantiate them within the JSX template. All went well.

The brain felt its momentary elation as I felt that this would make porting shadcn a breeze. Everyone's favourite copy pasta.

Spreads

Oh. There's a lot of this {...props} rubbish in the Shadcn JSX. What is this? I get what it is. But how am I supposed to utilise this pattern in Fable?

// An example from Shadcn
const AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => (
  <AccordionPrimitive.Header className="flex">
    <AccordionPrimitive.Trigger
      ref={ref}
      className={cn(
        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
        className
      )}
      {...props}>
      {children}
      <ChevronDown
        className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
    </AccordionPrimitive.Trigger>
  </AccordionPrimitive.Header>
))

The blog post is quite clear that interpolation can only be done in the position of attribute values and element children.

Also, unless I start passing anonymous functions as the parameter, I'm not sure that I can unpack the fields as they do.

Since I'm trying to bind to consume in feliz style, this won't work.

In the end, I couldn't find a better way than this to achieve the same features:

[<JSX.Component>]
let Test (props : IReactProperty list ) =
    let properties = !!props |> createObj
    emitJsStatement properties "const {children, ...props} = $0"
    JSX.jsx $"""
    <>
    {{children}}
    <input {{...props}}/>
    </>
"""
let root = ReactDOM.createRoot (document.getElementById "elmish-app")
root.render ( Test [prop.text "Hello World" ; prop.autoFocus true] |> JSX.toReact)

This can fail with JSX elements that are defined in the component library, but has the instantiation abstracted away from the consumer. If they are not inherently passed any attributes, then createObj will fail on a non-iterable variable. But that's okay, we can handle this with pattern matching

[<JSX.Component>]
let AlertDialogPortal ( props : IReactProperty list ) : JSX.Element =
    let properties =
        match props with
        | [] -> createEmpty
        | _ -> createObj !!props
    emitJsStatement properties "const {...props} = $0"
    JSX.jsx $"""
    <AlertDialogPrimitive.Portal {{...props}}/>
    """

But this fails for the same reason. The transpiled file shows that JSX.Components are passed a $props parameter, and all arguments on the F# side are accessed as a field of this $props parameter. Best to just check against a null (will have to use unbox to allow this on props)

[<JSX.Component>]
let AlertDialogPortal ( props : IReactProperty list ) : JSX.Element =
    let properties =
        match unbox props with
        | null -> createEmpty
        | _ -> createObj !!props
    emitJsStatement properties "const {...props} = $0"
    JSX.jsx $"""
    <AlertDialogPrimitive.Portal {{...props}}/>
    """

This compiles fine, but in this case, the primitive I've imported from @radix-ui is not receiving its attributes correctly, and is not functioning.

This is likely because whatever mechanism by which it is inheriting those attributes are not being passed to our component through the same props attribute that the JSX.Component interop uses.

{
    props : F#Parameters/Arguments here
    
    ? : ?
}

Nothing to do but unpack the $props argument in the transpiled code.
This is making a massive assumption that the argument will always be $props. This is pretty harsh and makes all of this very poor to maintain.

[<JSX.Component>]
let AlertDialogPortal ( props : IReactProperty list ) : JSX.Element =
    let properties =
        match unbox props with
        | null -> createEmpty
        | _ -> createObj !!props
    emitJsStatement properties "const {...props} = $0"
    JSX.jsx $"""
    <AlertDialogPrimitive.Portal {{...$props}} {{...props}}/>
    """

At this point, I'm tired of the JSX.toReact boilerplate at either the callsite, or requiring another definition with a different name.

So not I just append an unbox ;_;

[<JSX.Component>]
let AlertDialogPortal ( props : IReactProperty list ) : ReactElement =
    let properties =
        match unbox props with
        | null -> createEmpty
        | _ -> createObj !!props
    emitJsStatement properties "const {...props} = $0"
    JSX.jsx $"""
    <AlertDialogPrimitive.Portal {{...$props}} {{...props}}/>
    """ |> unbox

It's nice to use the interop of Fable outside of this very niche and particular use case.

Some things just absolutely work first try and fill me with enough confidence to fall off a cliff edge at the next implementation attempt:

// JSXInterop
[<RequireQualifiedAccess>]
type [<Erase>] JSX =
    // ...
    static member inline clsx ([<ParamList>] inputs : string []) : string = jsNative
    [<Import("twMerge","tailwind-merge")>]
    static member inline twMerge ( classes : string ) : string = jsNative
    static member inline cn ([<ParamList>] inputs : string []) : string =
        JSX.clsx inputs |> JSX.twMerge
    [<Import("cva", "class-variance-authority")>]
    static member inline cva ( initial : string ) ( config : 'a ) : obj = jsNative    

// Shadcn button variants in F# using class-variance-authority
let buttonVariants =
    JSX.cva "inline-flex items-center justify-center ..."
        {|
            variants = {|
                variant = {|
                   ``default``= "bg-primary text-primary-foreground ..."
                   destructive = "bg-destructive text-destructive-foreground ..."
                   // ....
                |}
                size = {|
                    ``default`` = "h-9 px-4 py-2"
                    sm = "h-8 rounded-md px-3 text-xs"
                    lg = "h-10 rounded-md px-8"
                    icon = "h-9 w-9"
                |}
               
            |}
                  
            defaultVariants = {|
                variant = "default"
                size = "default"
            |}
        |}

module [<Erase>] button =
    type [<Erase>] variant = // utilising some custom interop helpers
                            // ripped from FS.FluentUI
        static member inline default' : IButtonProp = Interop.mkProperty "variant" "default"
        static member inline destructive : IButtonProp = Interop.mkProperty "variant" "destructive"
        static member inline outline : IButtonProp = Interop.mkProperty "variant" "outline"
        static member inline secondary : IButtonProp = Interop.mkProperty "variant" "secondary"
        static member inline ghost : IButtonProp = Interop.mkProperty "variant" "ghost"
        static member inline link : IButtonProp = Interop.mkProperty "variant" "link"
    type [<Erase>] size =
        static member inline default' : IButtonProp = Interop.mkProperty "size" "default"
        static member inline sm : IButtonProp = Interop.mkProperty "size" "sm"
        static member inline lg : IButtonProp = Interop.mkProperty "size" "lg"
        static member inline icon : IButtonProp = Interop.mkProperty "size" "icon"

[<JSX.Component>]
let Button ( props : IButtonProp list ) : JSX.Element =
    let ref = React.useRef()
    let properties = !!props |> createObj
    emitJsStatement properties "const {className, variant, size, ...props} = $0"
    // TODO - implement asChild & Slot
    JSX.jsx $"""
    import {{ clsx }} from "clsx";
    import {{ twMerge }} from "tailwind-merge";
    
    <button className={{twMerge(clsx(buttonVariants({{className, variant, size}})))}}
            ref={ref}
            {{...props}}/>
    """
let RButton = Button >> JSX.toReact

This component is missing some of the latter works-arounds I stumbled through. It's also using some yucky methods of utilising the buttonVariants definition. This is just completely emitted and completely relies on transpilation keeping the name consistent.

But it was much easier to use at a call site where I could use an AnonRecord

[<JSX.Component>]
let AlertDialogCancel ( props : IAlertDialogCancelProp list ) : ReactElement =
    let ref = React.useRef()
    let properties = !!props |> createObj
    emitJsStatement properties "const {className, ...props} = $0"
    JSX.jsx $"""
    <AlertDialogPrimitive.Cancel
        ref={ref}
        className={ JSX.cn [|
            (unbox buttonVariants)({|variant="outline"|}) ; "mt-2 sm:mt-0" ; properties?className
        |] }
        {{...props}} />
    """ |> unbox

Conclusion

If anyone has any ideas on how these can be implemented better, or safer, I would love to hear it!

Thanks for the awesome work you guys do!

You can keep up with me falling down the proverbial staircase of porting shadcn to F# with my repo in progress Feliz.Shadcn

[shayanhabibi]

I've thought about the issue of default arguments being passed to JSX.Components in their implementations, and I'm not sure whether it is smart to preemptively treat them as existing outside of the $props.PARAM_NAME access.

ie. Instead of

let Component ( props : IReactProperty list ) =
    let properties =
        match unbox props with
        | null -> createEmpty
        | _ -> !!props |> createObj
    emitJsStatement properties "const {className, ...props} = $0" // this only captures all fields in `$props.props`
    JSX.jsx $"""
    <Component className={className} {{...props}} /> // we've only spread fields in `$props.props`
    """

I account for potentially other outlier fields

let Component ( props : IReactProperty list ) =
    let properties =
        match unbox props with
        | null -> createEmpty
        | _ -> !!props |> createObj                                        // Now i'll capture all fields except for props into `...attrs`
    emitJsStatement properties "const {className, ...props} = $0; const { props , ...attrs } = $props;"
    JSX.jsx $"""
    <Component className={className} {{...props}} {{...attrs}} /> // all fields captured and spread
    """

Will give this a shot, if anyone has any other tips I'd appreciate it.

Thanks!