Description

• [x] I've created a way to eval code using eval and postMessage API.
• [x] Also transpiling the generated code removing imports and exports.
• [x] In order to work with the std lib, I've created a bundle where I add Caml, Curry, Std, and Js to global.window. This bundle is served using a bucket just for testing purposes.
• [x] The code is executed inside an iframe that has React, ReactDOM, and the values above mentioned in global.window.
• [x] Polish UI/UX

I've been doing this for a while and forgot to upload it here. After I saw https://github.com/rescript-association/rescript-lang.org/pull/415, I thought that we can join forces to finish this task.

🚨 Attention 🚨

In order to merge this, we should create an official bundle where we make the standard library available globally. Then, we should change it here.

Closes #414

cc @tom-sherman @ryyppy

I've also created a constraint that the module App should always exist because it is the one being called inside the iframe. If you have a better solution, please let me know.

Nice, would be interested to hear about the trade offs between iframe vs worker execution!

Now I need to figure out how to eval the code as the user types it

I don't know if you would want to execute the code as you type - I haven't used a REPL/playground that works like this.

I was basing the UX in my PR off of the TypeScript playground. Added a "Run" button next to format and was planning to allow Ctrl+Return for running too.

...would be interested to hear about the trade-offs between iframe vs worker execution!

I followed the svelte-repl approach which uses both background workers and iframe. The thing is that the background worker should be used to compile and bundle. After that, you send the code to be evaluated inside the iframe as I did.

Since we're not bundling multiple files as in Svelte's and the compiler is already handled, I focused on the logic to evaluate code and make sure it executes.

Thanks for the suggestion @tom-sherman. Indeed executing as the user types may not be a good approach.

Thanks for the effort!

just tried it and it broke with the following error after i ran the program, edit some code, and re-ran it:

framework-23118dcc1b886e5b49be.js:1 Uncaught TypeError: Cannot read properties of null (reading 'type')
    at Object.enter (4602.36ad9f9b40402bfe8083.js:1)
    at n.visit (72050.fb3ef5607642e26cc14f.js:1)
    at n.visit (72050.fb3ef5607642e26cc14f.js:1)
    at n.visit (72050.fb3ef5607642e26cc14f.js:1)
    at n.visit (72050.fb3ef5607642e26cc14f.js:1)
    at r (72050.fb3ef5607642e26cc14f.js:1)
    at Ee (4602.36ad9f9b40402bfe8083.js:1)
    at onClick (4602.36ad9f9b40402bfe8083.js:1)
    at Object.We (framework-23118dcc1b886e5b49be.js:1)
    at Ye (framework-23118dcc1b886e5b49be.js:1)
enter @ 4602.36ad9f9b40402bfe8083.js:1
visit @ 72050.fb3ef5607642e26cc14f.js:1
visit @ 72050.fb3ef5607642e26cc14f.js:1
visit @ 72050.fb3ef5607642e26cc14f.js:1
visit @ 72050.fb3ef5607642e26cc14f.js:1
r @ 72050.fb3ef5607642e26cc14f.js:1
Ee @ 4602.36ad9f9b40402bfe8083.js:1
onClick @ 4602.36ad9f9b40402bfe8083.js:1
We @ framework-23118dcc1b886e5b49be.js:1
Ye @ framework-23118dcc1b886e5b49be.js:1
(anonymous) @ framework-23118dcc1b886e5b49be.js:1
_r @ framework-23118dcc1b886e5b49be.js:1
Cr @ framework-23118dcc1b886e5b49be.js:1
(anonymous) @ framework-23118dcc1b886e5b49be.js:1
Fe @ framework-23118dcc1b886e5b49be.js:1
(anonymous) @ framework-23118dcc1b886e5b49be.js:1
Or @ framework-23118dcc1b886e5b49be.js:1
Jt @ framework-23118dcc1b886e5b49be.js:1
Zt @ framework-23118dcc1b886e5b49be.js:1
t.unstable_runWithPriority @ framework-23118dcc1b886e5b49be.js:1
Wl @ framework-23118dcc1b886e5b49be.js:1
Re @ framework-23118dcc1b886e5b49be.js:1
Xt @ framework-23118dcc1b886e5b49be.js:1

I'd need some more time to play around with the code and verify a few things. I am mostly interested in the maintainability / bundle size / UI UX aspect. My original vision was to go with @tom-sherman's approach of just executing the code without any rendering, just to keep things simple. The HTML / React rendering would have probably been the next step I guess.

Let's see

@ryyppy thank you for the answer! Can you send me the code you used to break the app?

Literally the example that loads in the beginning. Run it once, then add another match case to the switch count and run it again and check the console.

@ryyppy sorry for the delay, it's been a busy month.

I've managed to fix the error and would appreciate it if you could play around with it. I see it as a next step moving some parts to separate workers. Also did some renaming trying to make things clearer.

Hey @ryyppy, this PR seems like it got abandoned and was a good improvement over the current status.

Is there anything we could help in merging this?

Creating a bundle with Stdlib exposed into window sounds doable inside the rescript-lang.org repo, should it live here or have another repo for it?

cc @diogomqbm

Hey @ryyppy, this PR seems like it got abandoned and was a good improvement over the current status.

Hey @davesnx, I've been meaning to get back to this.

Is there anything we could help in merging this?

I'll do a little clean up here and I think we'll need an official bundle of the std lib. Besides that, we'll be good to go once the UI/UX is approved.

@davesnx @ryyppy I did a few adjustments both to the code and UI/UX adding the default background color to the render output pane. Please play with it and let me know what you think.

@diogomqbm I just gave this another look and I feel more comfortable pushing this forward. Any chance you could rebase onto latest master (maybe together with @aspeddro)?

Regarding usability there are a few things:

1. When a compiler version > 11 is loaded, the iframe should load React@18 (due to its newest rescript-react bindings)
2. Also version > 11 comes with rescript-core ... not sure how we should load the runtime dependencies there?
3. If I don't have an App module, the code doesn't run and fails silently. Would be good to explain how the Render panel works before I even start running anything
4. When doing Js.log, it literally logs to my browser console. Wondering if we could make this a little bit more visual?