I am playing around with trying to use ReScript in Svelte, and so I was wondering: is there was a JavaScript API which I can call, that takes ReScript and returns the compiled JS?
At its simplest form, something like:
let javascript = ReScript.compile(input);
Where input is a string with the ReScript to compile.
Such a JS API would be used in the Svelte pre-processor I’m setting up.
This is kinda complicated. We have a JS bundle of the rescript-compiler, but it doesn’t really feature all the functionality that ReScript brings. The most important one is the build system that links all interdependent modules and libraries, and you’d basically need to reimplement the whole build system logic in JS as well, which is probably really really complex. And then you need to figure out how to store the build artifacts (you probably will require file access to have some caching).
This PR is basically the current state of the playground that is currently in use on rescript-lang.org. I had to tweak a few bits to make this thing a “reentrant compiler”, which means that for each compile, the bundle resets its internal compiler state (the compiler itself is designed to be a one-shot process, not a long living JS instance).
I haven’t used svelte yet, nor have I thought pretty hard about it but:
Svelte (the part you want to do the compilation) is running on node, right?
So you could just create a wrapper which actually calls bsb.
But it’s getting complicated pretty fast if you want to compile multiple interacting modules together.
Why not just compile res files to js first and use them in svelte?
After posting the question, and seeing the helpful responses (thanks @ryyppy, and @woeps) , I wondered if I was just making a rod for my own back trying to do this.
@woeps that’s right, it’s running on node.
The common method of writing components in Svelte is to have the code, markup, and CSS all in the one file. To support Rescript in Svelte, I’d need to compile res files to js using a custom Svelte preprocessor. Essentially, all that is is being able to take the Rescript in a Svelte component:
<script lang="res">
// rescript here
</script>
The preprocessor receives anything in script tags with lang="res" (this could be anything, I just set the preprocessor to look for "res"), and converts it to Javascript:
let javascript = ReScript.compile(scriptTagResString);
@dbarros Oh man, i was thinking about the same thing lately. I don’t write any svelte yet, but the reactivity pattern is incredible.
When I plan to work on something similar i was thinking about creating decorator for rescript, like right now we have @react.component. I would like to have something different for example @svelte.component (not sure if it is even possible though, but definitely will be fun to try implement it).
Anyway, your approach seems much more reasonable (putting ReScript to Svelte, not the other way around like i was planning to do).
Please let me know if you were able to do it, because honestly, having typesafe language for logic like rescript, and reactivity pattern from svelte, it will be endgame for me when it comes to writing UI’s.
@faliszek I agree that this would be a good combination. Basically I’d prefer something like Rescript over Javascript, and I have little interest in TypeScript.
@dbarros Right now I am doing a small project in Svelte and ReScript. What I am doing right now is using Svelte for Html/CSS and to subscribe to the Store whereas all the app logic, api request, Store and updating the store is written in ReScript.
I am not using any pre-processor at the moment. Whenever I save the ReScript file it gets converted to JS file which I import in Svelte.
Are you doing it the same way perhaps? or differently?
Not sure if this example project (using ReScript with Svelte) will help, but thought I’d share it nonetheless.