search

mvsmal / fable-material-ui

Fable bindings for Material-UI https://mvsmal.github.io/fable-material-ui/
MIT License
61 stars 8 forks source link

Feliz-style bindings #67

Closed cmeeren closed 5 years ago

cmeeren commented 5 years ago

I am experimenting with creating Feliz-style bindings for Material-UI (see e.g. https://github.com/Zaid-Ajaj/Feliz/issues/11). Currently early experimentation, but I'm liking it.

You seem like you have enough on your plate, but I don't want to step on any toes, so I'll ask anyway: Is that something you'd want to be involved with?

(It won't be much (if any) overlap with Material-UI, it'll be a completely separate project. I don't think it'll be useful to even include Material-UI as a dependency.)

Luiz-Monad commented 5 years ago

I'm experimenting with the ts2fable tool, I converted it to TypeScript 3.5. I was thinking if it would be a good idea to automate the proxy generation. (I had a lot of fun making it create the binding for the material-ui-pickers, but I still had to fix "omit/pick" manually, but I didn't like the style of proxy it generated). I think I can make the typescript compiler used by ts2fable to flatten and emit the (omit/pick) types as interfaces, that way it would be able to convert the MUI api more directly. This Feliz-style bindings appears to be more easier for doing that in an automated way. Also, it appears that interfaces are almost entirely erased by fable, so it would cost almost nothing having them.

cmeeren commented 5 years ago

Awesome that you're improving ts2fable!

Automatically generating stuff is always neat, but in my experience (particularly with ts2fable) a lot of manual intervention is required anyway. This is echoed by the Fable team.

The Feliz-style bindings I'm working on in particular have some non-standard stuff to make it more pleasant to use.

However, there's a lot more to the Material-UI API than just the components/props (which is the focus of Feliz), and that benefits from at least an initial ts2fable round just like every other project.

cmeeren commented 5 years ago

Re. my previous assumption:

(It won't be much (if any) overlap with Material-UI, it'll be a completely separate project. I don't think it'll be useful to even include Material-UI as a dependency.)

Looking at the docs and the ts2fable output, the MUI API surface seems to be quite a bit larger than just the components and the styles. So it might be useful for Feliz.MaterialUI to depend on Fable.MaterialUI. I'll keep that in mind as I continue experimenting.

For example, it seems that I can to quite a bit just by adding extension members to types defined in Fable.MaterialUI.

Luiz-Monad commented 5 years ago

Yes, there's more than components and styling, there's also public method helpers and lots of Props that needs some manual fixes. I did this on small scale to see how hard would be doing it.

https://github.com/Luiz-Monad/fable-material-ui-pickers/blob/master/src/Fable.MaterialUI.Pickers.Props.fs

Props and Interfaces almost worked entirely automated, except for that issue with Union types. We should wait for F# to support them. https://github.com/fsharp/fslang-suggestions/issues/538

From what I learned its possible to add more passes to ts2fable for translating React components to this MaterialUI style. I don't think it would work for other TypeScript projects, but for Material-UI it's entirely possible to have a custom TS2Fable that does the translation. (better rename it to MUI2Fable)

cmeeren commented 5 years ago

What you have created there doesn't look like Feliz... (Feliz only has a single list per item, whereas React has two - one for props and one for children).

In any case, I have done this at large scale, auto-generating most of the code based on the (HTML) API docs. Seems to work fine and is pleasant to use (and low-maintenance due to auto-generation). Looking forward to share stuff once I'm ready.

Luiz-Monad commented 5 years ago

No, I think I wasn't clear, I was talking about the MUI API surface the way it is now. Feliz is much more easier to do indeed, but because I use the traditional MUI API, I'm keeping things that way for now.

cmeeren commented 5 years ago

Oh, all right then, that explains the confusion. This issue is about a new project I'm working on for Feliz-style bindings. :)

Luiz-Monad commented 5 years ago

Nice, I'll wait to see how it goes, I'm just trying lots of ways to make TypeScript integration more sweet with F#, because I found that to be a rough edge, perhaps I can help because I like to mess with compilers. (but first I need to deploy my project to pay the bills, so I went with we already had in MUI)

Sorry about the confusion, it's because we're in the "traditional" MUI repository, so I thought it wouldn't be a problem replying here.

cmeeren commented 5 years ago

For the record, experimental bindings are now uploaded to a branch of my Electron demo. Check out https://github.com/Zaid-Ajaj/Feliz/issues/11#issuecomment-522168641 for more information.

cmeeren commented 5 years ago

For the record, I have just published Feliz.MaterialUI to GitHub (no nuget release yet). In the end it made the most sense to not depend on Fable.MaterialUI.