HoC using Functors

I’m trying to create a higher order component using Functors. To achieve that, I created the following module type:

module type Component = {
    type props
    let make: props => React.element

It’s not correct, as we’ll see when we try to use it:

module Make = (C: Component) => {}

module MakeApp = Make(App)

The error is as follow:

FAILED: src/Test.cmj

  We've found a bug for you!

  6 │ module Make = (C: Component) => {}
  7 │
  8 │ module MakeApp = Make(App)
  9 │

  Signature mismatch:
  Modules do not match:
  external makeProps: (~?key: string, unit) => {} = "" "#rescript-external"
  let make: {} => React.element
  is not included in
  The type `props' is required but not provided
  File "/home/gustavo.aguiar/dev/gugahoa/mangadex-reader/src/Test.res", line 2, characters 5-15:
    Expected declaration

FAILED: cannot make progress due to previous errors.

From what I understood, there’s no way to get the props type as the module type of a component is as such:

  external makeProps: (~?key: string, unit) => {} = "" "#rescript-external"
  let make: {} => React.element

(This example is for a simple component that receives no props and returns a div)

To make it easier to create Functors that can act as a higher order component, could we make the @react.component ppx also output two other types? One for the makeProps argument list and another for the props themself.

1 Like

What are you trying to achieve with higher order components?

Nothing in particular, I was nerd sniped by a friend who was trying to create a HoC

Spent a good part of my weekend toying around with the problem, seems like there would be more problems even if @react.component did output the types Sketch.sh - Interactive ReasonML/OCaml sketchbook