Long compile time

Help
,
#1

Hi,

I’m working on a react-basic wrapper for the ionic framework. In doing so, I used jvliwanag’s awesome untagged-union library. First draft here: https://github.com/timdeputter/purescript-react-basic-ionic. However, compiling an example react component like the one below took almost 2 min. I’m not sure how this happens, maybe I’m missing something?

mkExample :: Effect (ReactComponent {})
mkExample = component "Example" \_ -> React.do
  showModal /\ setShowModal <- useState false
  showSheet /\ setShowSheet <- useState false
  pure $
    I.ionApp_ [
      I.ionHeader {translucent: true, children: [
        I.ionToolbar_ [I.ionTitle_ [R.text "Modal"]]
      ]},
      I.ionContent {fullscreen: true, className: "ion-padding", children: [
        I.ionButton {expand: "block", onClick: handler_ (setShowModal $ const true), children: [
          R.text "Show Modal"
        ]},
        I.ionButton {expand: "block", onClick: handler_ (setShowSheet $ const true), children: [
          R.text "Show Actionsheet"
        ]}
      ]},
      I.ionActionSheet {
        isOpen: showSheet,
        onDidDismiss: handler_ $ setShowSheet $ const false,
        buttons: [ 
          roleButton "Delete" "destructive" "trash",
          button "Share" "share",
          button "Play" "caretForwardCircle",
          roleButton "Cancel" "cancel" "close"
        ]
      },
      I.ionModal {isOpen: showModal, children: [
        I.ionHeader {translucent: true, children: [
          I.ionToolbar_ [
            I.ionTitle_ [R.text "Modal Content"],
            I.ionButtons {slot: "end", children: [
              I.ionButton {onClick: handler_ (setShowModal $ const false), children: [
                R.text "Close"
              ]}
            ]}
          ]
        ]},
        I.ionContent {fullscreen: true, children: [
          I.ionList_ [
            listEntry "Frodo" "Go back, Sam!",
            listEntry "Arnold" "Be Back!",
            listEntry "Vader" "Whos your daddy?"
          ]
        ]}        
      ]}
    ]

listEntry :: String -> String -> JSX
listEntry heading text = I.ionItem_ [
  I.ionAvatar {slot: "start", children: [
    I.ionImg {src: "./avatar-frodo.jpg"}
  ]},
  I.ionLabel_ [R.h2_ [R.text heading], R.p_ [R.text text]]
]


roleButton :: String -> String -> String -> ActionSheetButton
roleButton text role icon = coerce {text, role, icon}

button :: String -> String -> ActionSheetButton
button text icon = coerce {text, icon}
#2

Hi @tim,

I’ve encountered a similar problem when I worked on the MUI react-basic backed bindings. I’m not sure if this is related. If the compilation time increases in a linear fashion when you add more components which props are transformed by the lib I think that it could be the same problem.
If you have props rows which extend react-basic rows or any other large rows containing like more than 50 props you can probably encounter a slowdown related to this issue: `RowList` iteration seems to be relatively slow

Unfortunately I was forced to fallback to Union constraints for now in the case of MUI binding :frowning:

#3

Hi @paluh,

first of all,thank you for your detailed answer. Yeah, this may explain things. There are a lot Record/Row-Types defining React-Props in the library. Unfortunately I don’t seem to know what exactly you mean by Union constraints. Maybe you can provide a few explanatory words? Thank you :slightly_smiling_face:!