Improve the bindings

[MangelMaxime]

@alfonsogarciacaro in the past we had a discussion about improving the binding of Fable.React

I saw that you introduced version 4.0.0-alpha would you agree if I try to propose a new version for the bindings ?

[alfonsogarciacaro]

You mean #73? I think at the end we decided the changes didn't bring enough benefit to justify the API change. But sure, a new major release is an opportunity to add some breaking changes, though we need to be careful not to force users to rewrite too much code. What do you have in mind?

[MangelMaxime]

I want to provide something equivalent to ReactLeaflet bindings.

Remove the IProp thing completly, have a clean separation between html and svg elements.

Fable.Helpers.React:

// Contains the generic React helpers
namespace Fable.Helpers.React

[<AutoOpen>]
module Common =

    [<Import("createElement", from="react")>]
    let createElement(comp: obj, props: obj, [<ParamList>] children: obj) =
        HTMLNode.Empty :> ReactElement

    let inline ofFunction<'P> (f: 'P -> ReactElement) (props: 'P) (children: ReactElement seq): ReactElement =

    // Example
    /// Alias of `ofString`
    let inline str (s: string): ReactElement = unbox s

    /// Cast a string to a React element (erased in runtime)
    let inline ofString (s: string): ReactElement = unbox s

    /// Cast an option value to a React element (erased in runtime)
    let inline ofOption (o: ReactElement option): ReactElement =
        match o with Some o -> o | None -> null // Option.toObj(o)

    /// OBSOLETE: Use `ofOption`
    [<System.Obsolete("Use ofOption")>]
    let inline opt (o: ReactElement option): ReactElement = ofOption o

    /// Cast an int to a React element (erased in runtime)
    let inline ofInt (i: int): ReactElement = unbox i

    /// Cast a float to a React element (erased in runtime)
    let inline ofFloat (f: float): ReactElement = unbox f

    /// Returns a list **from .render() method**
    let inline ofList (els: ReactElement list): ReactElement = unbox(List.toArray els)

    /// Returns an array **from .render() method**
    let inline ofArray (els: ReactElement array): ReactElement = unbox els

Fable.Helpers.React.Html

module  Fable.Helpers.React.Html

type CSSProp =
    | AlignContent of obj
    | AlignItems of obj
    | AlignSelf of obj
    | Custom of string * obj

type Props =
    // Concatenation of HtmlProps & HtmlAttr
    | Key of string
    | Ref of (React.Element -> unit)
    | Custom of string * obj
    | Style of CSSProp list

// All the Html element helpers
let inline a b c = domEl "a" b c
let inline abbr b c = domEl "abbr" b c
let inline address b c = domEl "address" b c
let inline article b c = domEl "article" b c
let inline aside b c = domEl "aside" b c
let inline audio b c = domEl "audio" b c

module Fable.Helpers.React.Svg

type Props =
    // Concatenation of HtmlProps & HtmlAttr
    | Key of string
    | Ref of (React.Element -> unit)
    | Custom of string * obj
    | Style of CSSProp list

// All the Svg element helpers
let inline svg b c = svgEl "svg" b c
let inline circle b c = svgEl "circle" b c
let inline clipPath b c = svgEl "clipPath" b c
let inline defs b c = svgEl "defs" b c
let inline ellipse b c = svgEl "ellipse" b c

So we can have this kind of API:

// Old api
rect [ SVGAttr.X model.AxisYWidth
       SVGAttr.Y (offsetY - model.RowHeight)
       SVGAttr.Width barAreaWidth
       SVGAttr.Height model.RowHeight
       SVGAttr.Fill "#fff" ]
    [ ]

// New Api
Svg.rect [ Svg.X model.AxisYWidth
           Svg.Y (offsetY - model.RowHeight)
           Svg.Width barAreaWidth
           Svg.Height model.RowHeight
           Svg.Fill "#fff" ]
    [ ]

I guess my problem is that the current API isn't perfect and you can still write invalid code. And the IProp thing feel really like a hack for me. In general in bindings people do:

    type [<RequireQualifiedAccess>] Treemap =
        interface Fable.Helpers.React.Props.IProp

And that's wrong because you can't put Html props to a TreeMap for example. And I would like to introduce:

type CustomType =
    | [<Flatten>] HtmlProps of Html.Props list

Like that we mention that CustomType can accept Html.Props and only Html.Props not svg etc.

After writing this not sure if everyone would like to use this kind of API... And it's probably more a caprice from me.

Current API is probably good enough and next steps should probably be to implement a strongly typed DSL for CSS, units etc.

If we want to experiment it we probably should to try in a separate library. I will close this for now at least we have it for reference.