Binding to union types in record fields in JS/TS

1

Hey, as a continuation to Using react-spring and use-gesture, how would you approach it?

I have been investigating ways to represent the record fields for the configuration which are usually TS unions with types like boolean | number or things like that.

Here are the options I’ve found, I’d like to know your opinion and if there are other ways to do it:

1. Define a module and unboxed type for the field type

module Delay = {
  @unboxed
  type t = Bool(bool) | Int(int)
}

type config = {delay: Delay.t}

let config = {
  delay: Delay.Int(5),
}

Seems nice enough to use, with a local open of the Config module where all these would be defined.

It also seems quite verbose to define one of these for each field with union types (which are a lot of them).

2. Module with externals

module Delay1 = {
  type t
  external int: int => t = "%identity"
  external bool: bool => t = "%identity"
}

type config1 = {delay: Delay1.t}

let config = {
  delay: Delay1.int(5),
}

Pretty much the same as option 1, not sure why I would use this over option 1, but good to know the escape hatch is there in case there are some gnarly types I can’t unbox nicely.

3. Unboxed polymorphic variants (and unwrap)

An option that seemed nice would be to define inline polymorphic variants and unbox them, but that doesn’t seem to be an option

type config = {
  delay: @unboxed [#bool(bool) | #int(int)]
}

Would save a lot of code and be ergonomic to use in my opinion, but I don’t think it is possible with the language as is.

I tried to investigate using @unwrap with poly variants in externals, but it was very inconsistent when it worked and didn’t, and it doesn’t seem like it saves much compared to options above.

// Doesn't unwrap with %identity?
type delay2
external delay2: @unwrap [#bool(bool) | #int(int)] => delay2 = "%identity"

let delay2 = delay2(#bool(true)) // Doesn't work as expected

// Doesn't unwrap with @send?
type delay3
@send external delay3: @unwrap [#bool(bool) | #int(int)] => delay3 = "valueOf"

let delay3 = delay3(#bool(true)) // Doesn't work as expected

// It does unwrap properly with a function. Could create a JS helper
@module("utils")
type delay4
external delay4: @unwrap [#bool(bool) | #int(int)] => delay4 = "identity"

let delay4 = delay4(#bool(true)) // Actually unwraps the thing

Playground link of a bunch of the examples

Did I miss any option that would be worth considering?

How would you do this?

2

Broadly speaking, I’d go with option 1. However, one important thing to remember is this: you don’t have to bind to all available values.

For example, per gesture’s docs, passing a Delay of true is equivalent to setting it to 180; this gives you a little flexibility in how you represent it. (I’m guessing setting it to false is the same as not passing it at all.)

One alternative would be to just make the delay an int, optionally providing the default value of 180 as a constant instead.

type config = {delay: int}
// If you want to provide it
let defaultDelay = 180

If you’d still like modules, could also do:

module Delay = {
  type t = int
  let default = 180
}
type config = {delay: Delay.t}

You can even see this in the official bindings to React hooks: useState only takes the callback overload, rather than a direct constant. This would also be a possible simplification in your case: it looks like a few options take either a callback or a constant. You’d only really need to bind to the function case.

2 Likes
3

That is really good advice, I’ve been looking at the different options and with that in mind most of the union types provided for convenience/sugar just go away by providing the canonical version, like you mentioned.

I’ll keep that in mind.

I assume then there are no other ways to represent these things, right?

4

Nothing that comes to mind; I’m sure someone else will chime in if I’m wrong. :wink: