Advice on use of React UI component libraries like MUI with purescript?

Help
#1

Hi,

Short version is I’m trying to understand how best to use React MUI (https://mui.com/), or any similar 3rd party UI components, with my own purescript code - react-basic / react-basic-hooks / react-halo (latest versions).

  • Are there existing FFI bindings for purescript somewhere for some React UI component library - or some relatively automated way to produce them from TS modules - that I havent found?

  • I’ve seen this: GitHub - doolse/purescript-react-mui: Purescript bindings for https://material-ui.com/ which has bindings for react (not react-basic, and is somewhat old (2019, purs 0.13.2 not 0.14, and MUI v3 rather than v5, bower and no spago, and react not react-basic).
    But it does have a ‘synctypes’ subproject that seems to automatically create purescript bindings, which I might be able to use.

  • I’ve seen this, which has some information about using Typescript libraries from Purescript (seems most 3rd party UI libraries will probably be TS) blog-posts/PureScript-React.md at master · xc-jp/blog-posts · GitHub

  • I could make an FFI library by hand, just implementing the things I need as I need them. But there are loads of components and an automated transformation process would be great, if a method to do that already exists somewhere.

  • Or, am I asking the wrong question - is there some better alternative I dont know?

Cheers,

Mike

–

Longer version with some context as to why I ask:

I’m new to purescript, working on a personal project (no CSS/UX design team, just me :).

I started with the purescript book. Then looked at halogen (after seing the realworld example). I like halogen as I think it will help me with a complex domain problem. But it seems people are rolling their own styled UI components. (For example, this discussion: Styling question · Issue #46 · thomashoneyman/purescript-halogen-realworld · GitHub).

I dont have a team or the expertise to write cross-platform styled UI components, and wanted to leverage something like existing React UI components.

So next I looked into purescript-react and purescript-react-basic + purescript-react-basic-hooks.

I tried upgrading the ‘realworld’ example for the latter to the latest versions of purs/preact/react & it seems to work OK other than some json parsing issues in the API (GitHub - intronic/purescript-react-realworld: A real-world application demonstrating PureScript and React).

(There seem to be a lot of purescript projects that havent been updated since ~2018 and dont work with latest purescript versions so this has been my first step when looking through libraries in pursuit.)

Doing that I realised there is also react-halo which seems best of both worlds - use 3rd party React components, plus react-basic-hooks & react-halo for my problem domain.

Hence now, looking at how to best use React UI libraries.

1 Like
#2

it seems to work OK other than some json parsing issues in the API

FYI Real World recently updated their API, the JSON is still the same as far as I know, but there is just no data.

As for FFI of library react components, I usually just write FFI for them when I need them. Mostly because most of the time the props are too cumbersome to accurately write types for. So I write opinionated FFI that suit my use case. I did this, for example, in my Next.JS example:

1 Like
#3

@intronic Turns out they did change the API. I have updated the repo:

You can now see the articles appear on https://purescript-react-realworld.netlify.app/

#4

I want to put just a quick related note here. Together with @intronic we were able to update purescript-react-basic-mui so it compiles under the latest purs version. Unfortunatelly the project needs a bit more work before any release - we want to provide / migrate all other components (we have more than 60 components already working).

2 Likes
#5

Hi Jonas, thanks for your comment about FFI and the pointer to your nextjs example.

I think I’m starting to understand some of the issues with trying to convert TS types from existing projects into PS automatically. The TS types can get horrendous as they try to retrofit types onto JS code, and translated PS versions could be ugly if not next to impossible.

So I’ve realised that opinionated FFI for specific use-cases can actually be a win and I’m going to try that next.

Also thanks for updating the realworld repo, very helpful for the likes of me.

1 Like
#6

Cool to see some MUI action. I’m also considering using to give purescript-react-basic-mui a shot.

@paluh Could you elaborate a bit on the work necessary? Is it something people new to the project could help you with?

1 Like
#7

Hi @paluh I’ll start trying to debug this shortly, but I’m curious if running the updated codegen is just a problem in my environment or if you see it also?

Cheers…

#8

Yeah, after a MUI update (I was not aware that I’m using the old one) I’m experiencing the same issue. I’m going to debug it tomorrow (CET ;-)) and continue the thread on GitHub.

I’m going to clean up the issue tracker on github and ping you there @andys8 :stuck_out_tongue:

#9

@paluh ping me as well, I’d like to help move this forward. Seems to me like the first issue to resolve is upstream in ReadDTS.

I missed the replies in this thread, guess I should be monitoring the discourse …

#10

Sure!