Using ReasonML string interpolation in js components

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 file:

  let make =
        ~variant: variant=`primary
      ) => { ... }

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

import {make as Example} from ''

<Example variant="primary" />

The variant prop will not be applied properly, since `primary in 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.

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.

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
1 Like

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

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

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:


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)