Consider grouping the possible UI elements under one module

Hello @JaggerJo,

This project looks really good and I really like the API used for the view elements. It looks like it was loosely based on fabulous-simple-elements. If that the case, I would like to suggest something that I regret not adding to that library -> not being able to see which elements you can use!

Let me explain: if the user is a beginner, then there is no way to tell which elements are available in the framework. You have to go through the docs and search for elements you need. Of course once you have found them, it becomes easy to find their properties, but only after you have searched the docs.

I propose to add a module, maybe named Ava that contains the constructor for all possible UI elements. Instead of

Button.create [
    Button.onClick (fun _ -> dispatch Increment)
    Button.content "click to increment"
]

I suggest writing:

Ava.button [
    Button.onClick (fun _ -> dispatch Increment)
    Button.content "click to increment"
]

This way the beginner user has a nice “entry point” to the possible UI elements that can be used and from there the search for elements becomes even easier. The reason for the name Ava is that the formatting works nicely when the propery list is indented with 4 spaces such that the property modules become aligned with the constructor function. This is how it is done in both Mui module from Fable.MaterialUI and the Ant module from Fable.AntDesign.

It would be a plus if the property module was also lower-case (but would introduce a breaking change)

Ava.button [
    button.onClick (fun _ -> dispatch Increment)
    button.content "click to increment"
]

What do you think?

[JaggerJo]

Hello @JaggerJo, sorry I didn’t connect back to you! It seems you have thought about it more than I did 😄 I especially liked this snippet

DSL.Button.create [                          
    Button.dock Dock.Bottom                  
    Button.onClick (fun _ -> dispatch Reset) 
    Button.content "reset"                   
]                                            

Because there is only one use of DSL which becomes the entry point of discovery, really cool stuff. Thanks for taking the time with your detailed response 💯

@Zaid-Ajaj I have to admit that the formatting was pure luck, I never thought about DSL. = indent size TBH. But it’s neat!

Thanks for the feedback! 😊

[Zaid-Ajaj]

Hello @JaggerJo, sorry I didn’t connect back to you! It seems you have thought about it more than I did 😄 I especially liked this snippet

DSL.Button.create [                          
    Button.dock Dock.Bottom                  
    Button.onClick (fun _ -> dispatch Reset) 
    Button.content "reset"                   
]                                            

Because there is only one use of DSL which becomes the entry point of discovery, really cool stuff. Thanks for taking the time with your detailed response 💯