Using ReasonML string interpolation in js components

[krisko4]

I am completely new to ReScript. In my job, we have a project written in ReasonML. We have made a decision to diverge from this language and build new features using TypeScript. For this reason, I have created a TypeScript project inside my ReScript project which shares the same dependencies. I am going to provide a two-sided communication between both solutions, so that I can import ts components into my reason files and reason components into my ts files. The problem is that ReasonML string literals are not equal to js strings, which causes a huge problem. Let’s say that I have a piece of a component in my Example.re file:

  [@react.component]
  let make =
      (
        ~variant: variant=`primary
      ) => { ... }

When I run bsb -make-world, Example.bs.js file will be created. Then I can import it and use it in my js file:

import {make as Example} from 'Example.bs.js'

<Example variant="primary" />

The variant prop will not be applied properly, since `primary in Example.bs.js has been converted to a number. Is there a way I can make it on JavaScript side, for example by converting a js string to equivalent value for reason string interpolation? I have a lot of string interpolations in my reason project.

[dkirchhof]

Sorry, but I don’t get it.
Are you talking about reasonml or rescript?
Your code looks like reason. It’s another language.

Anyways. In rescript you could use polymorphic variants (Polymorphic Variant | ReScript Language Manual). They will be translated to strings instead of numbers.

[lessp]

In ReScript, AFAIK, these would indeed be strings. I think using genType would be helpful in your scenario, but if not then I imagine you could expose the variants as variables, i.e.

type variant = [ `primary | `secondary ]

module Variant = {
  let primary = `primary
  let secondary = `secondary
}

[krisko4]

You are right. I am using ReasonML. I’m sorry for confusion.

[krisko4]

This is the exact workaround which I have used. Thank you!

[lessp]

In any case, adding gentype should be relatively straight forward. It might be particularly useful if you’re interoping with TypeScript.

If you only wish to export the variant:

Generated TypeScript file:

bsconfig.json:

Generated TypeScript, if you’d annotate the component itself, in which case you should be able to drop the genType-annotation on the variant

And then, rather than import the .bs.js-file you’d import the generated TypeScript-file á MyButton.gen(.tsx)