Fancier method signatures?

[3xau1o]

I've read some articles about rescript and managed to setup rescript with webpack and react

I want in the future to make some tutorials on rescript, however i found some barriers when using the rescript-webapi module
The bigger downside i found for a newcomer like me were the differences between the javascript Dom api method signatures

In javascript making DOM operations follows:

document.getElementById("root")

the rescript counterpart requires passing the document reference as the first argument
is that by design? i think it's important to know why, because it requires more code, so i believe this has a justification

                                      // document reference
                                      // ↓↓↓↓↓
let container = Document.getElementById(document, "root")

/* 
 * there is also the fancier less readable syntax, 
 * using pipe first operator
 */
let container = document->Document.getElementById("root")

i'm okay with this extra document reference added signtures, the problem is that they can take some time to figure out, so whatever reason you had for making as it is, it's okay for me as well, i just want to make it easier for others like me coming from js.

While i believe this is not a big deal, i believe result in rapid lost of interest if someone is just taking a look an tries some basic dom manipulation and encounters some fancy syntax with different signatures, because it's less pragmatic (from the user perspective), even though in general rescript uses less code than the javascript counterpart.

[TheSpyder]

There is a lot of power here but I agree for newcomers it's completely opaque. The ReScript community could use some good people writing tutorials!

Yes this is all by design. ReScript is geared towards functional programming and modularisation, which means that attaching functions to objects in the OO style document.getElementById(), while possible, is strongly discouraged.

The thing to remember is that modules can be brought into scope so one option to achieve nice code is:

open Document

document->getElementById("root")

And if you look at the compiled JS the ReScript external magic produces document.getElementById("root").

This is why the reference is the first argument, so that pipe first can be written in a similar style to the JS approach. I like to say that with a bit of squinting it even looks the same, and -> can in many cases be thought of as doing something similar to ..

Once a new developer can accept that, we then explain that generally you don't want the entire Document module in scope, it's best to refer to functions inside their module. At that point the full code isn't hard to follow at all document->Document.getElementById("root").

[3xau1o]

I appreciate you responded, si it's both technical and functional style design, i can easily accept that kind of tradeoff in Rescript.

[TheSpyder]

We're very open to contributions in this area. I'm not sure we'll have time to do much about documentation ourselves in the near future.

[3xau1o]

@TheSpyder
Is there a way to curry the document reference? so it would be passed once.

EDIT:
yeah, the document reference can be curried

let container = Document.getElementById(document)("root")

is there a way to curry all the module functions?

[TheSpyder]

The design of the API means you can't easily curry the entire module, no. If you're after that I suggest creating a copy of the module, perhaps call it DefaultDocument, and have the implied global document supplied directly in the external definitions.

For example, this definition:
https://github.com/tinymce/rescript-webapi/blob/b138ae2982d24193473e01929251871ea2d4ba65/src/Webapi/Dom/Webapi__Dom__NonElementParentNode.res#L7

If you create a new one adding @scope, and swap @send for @val, then getElementById("root") will generate document.getElementById("root") in JS:
https://rescript-lang.org/try?code=AINwhgNgBMBOCmAXArrAdgCjciEwCMJ4BKGAZwGMB7AB3gwCIATKi5AW3jUQeICh4AD0Tx0kKAHMkAUSKduAIQCeASSYAuKGUSwAlmglQAvAD4otRLqpoAPABEq7AHTw5XRGaNQGUxLPjyiMpqDHx8RIhQ7Er+gcaSMm6KqkyMsFRUPMRAA

It wouldn't be hard to apply this change across the entire Document module.

[3xau1o]

thanks for the response i will look forward to understand the technical details