How to adapt JavaScript native apps to ReScript?

1

Hi everyone,
I’m new on ReScript and I’m still learning on how everything works.

I’m contributing to web app that uses ReScript and I wanted to add module React TextArea Code Editor, however, when I added this module to package.json and bsconfig.json, I got stuck on this issue:

➜  op-onai-edu git:(code-completion) ✗ yarn run re:build
yarn run v1.22.17
$ rescript
Error: PfIcon__Example found in two directories: (app/javascript/packages/pf-icon/lib/ocaml, app/javascript/packages/pf-icon/src)
File names must be unique per project
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
➜  op-onai-edu git:(code-completion) ✗ yarn run re:watch
yarn run v1.22.17
$ rescript clean && rescript build -w
Error: /home/indicozy/Documents/Projects/oponai/op-onai-edu/node_modules/@uiw/react-textarea-code-editor/bsconfig.json: No such file or directory
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Is it because this module needs to support ReScript or am I doing something wrong on my side?

2

Hi Cozy
Unless React TextArea already has rescript bindings, you shouldnt need to add anything to bsconfig.
That might be confusing it.

bsconfig is for letting the compiler know about bindings that are provided by the library.

edit: If so then your next step will be making bindings for the component you want to include.

3

Hi @mouton, thanks for reply!
So if a module has no rescript bindings whatsoever, how hard is it to make them work? Is it a matter of minutes creating bsconfig.json or do I need to rewrite some code for it?

4

Bindings are a wonderful rainbow of possible complexity.
Yours look pretty straight forward for a first pass.
This would be a rescript file using external and friends: External (Bind to Any JS Library) | ReScript Language Manual

Also look at @react.component which you can use with external to make bindings to an external react component

edit: external is keyword not decorator