Playground output result #420

diogomqbm · 2021-08-07T21:03:01Z

Description

I've created a way to eval code using eval and postMessage API.
Also transpiling the generated code removing imports and exports.
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.
The code is executed inside an iframe that has React, ReactDOM, and the values above mentioned in global.window.
Polish UI/UX

I've been doing this for a while and forgot to upload it here. After I saw #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

…g.org into playground-ouput-result

diogomqbm · 2021-08-07T21:20:49Z

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.

tom-sherman · 2021-08-08T15:04:52Z

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.

diogomqbm · 2021-08-08T19:30:00Z

...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.

diogomqbm · 2021-08-11T19:59:30Z

src/Playground.res

+  let codeFromResult = (result: FinalResult.t): string => {
+    open Api
+    switch result {
+    | FinalResult.Comp(comp) =>
+      switch comp {
+      | CompilationResult.Success({js_code}) => js_code
+      | UnexpectedError(_)
+      | Unknown(_, _)
+      | Fail(_) => "/* No JS code generated */"
+      }
+    | Nothing
+    | Conv(_) => "/* No JS code generated */"
+    }
+  }


Moved this from the Output Panel in order to re-use it here.

ryyppy · 2021-09-07T07:07:55Z

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

diogomqbm · 2021-09-07T19:36:16Z

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

ryyppy · 2021-09-08T06:33:20Z

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.

…g.org into playground-ouput-result

diogomqbm · 2021-09-25T02:47:13Z

@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.

davesnx · 2022-08-11T11:00:39Z

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

diogomqbm · 2022-08-11T23:24:02Z

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.

diogomqbm · 2022-08-12T01:02:18Z

@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.

ryyppy · 2023-05-26T13:24:14Z

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

When a compiler version > 11 is loaded, the iframe should load React@18 (due to its newest rescript-react bindings)
Also version > 11 comes with rescript-core ... not sure how we should load the runtime dependencies there?
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
When doing Js.log, it literally logs to my browser console. Wondering if we could make this a little bit more visual?

fhammerschmidt · 2024-06-05T07:14:49Z

this got merged in #875 🎉

diogomqbm added 4 commits May 27, 2021 22:30

wip: running custom code

6dd763d

feat: running code 🥳

e7ae99d

Merge branch 'master' of github.com:rescript-association/rescript-lan…

d8f94fb

…g.org into playground-ouput-result

feat: bundling stdlib

f8130b5

vercel bot deployed to Preview August 7, 2021 21:03 View deployment

fix: fixing ci

68e141a

vercel bot deployed to Preview August 7, 2021 21:10 View deployment

feat: better ux

4610bf3

vercel bot deployed to Preview August 11, 2021 19:34 View deployment

diogomqbm commented Aug 11, 2021

View reviewed changes

chore: removing useless deps

17c002f

vercel bot deployed to Preview August 11, 2021 20:21 View deployment

chore: removing useless file

6c9709c

vercel bot deployed to Preview August 11, 2021 20:54 View deployment

chore: better method name

108b6f6

vercel bot deployed to Preview August 11, 2021 21:01 View deployment

diogomqbm marked this pull request as ready for review August 11, 2021 21:02

fix: adjusting iframe height

c0ec898

vercel bot deployed to Preview August 11, 2021 22:00 View deployment

diogomqbm added 3 commits September 24, 2021 23:05

Merge branch 'master' of github.com:rescript-association/rescript-lan…

26a44b0

…g.org into playground-ouput-result

fix: safelly checking for import and exports

f9fb41a

refactor: better naming

72a856f

vercel bot deployed to Preview September 25, 2021 02:41 View deployment

chore: adjusting code style

4a8de4d

vercel bot deployed to Preview August 12, 2022 00:31 View deployment

refactor: moving logic to RenderOutputManager

8341fbe

vercel bot deployed to Preview August 12, 2022 01:02 View deployment

aspeddro mentioned this pull request Jul 26, 2023

Playground output result (#420) #704

Closed

tsnobip mentioned this pull request Nov 4, 2023

Playground output result (formerly #704 and #420) #742

Closed

3 tasks

fhammerschmidt closed this Jun 5, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Playground output result #420

Playground output result #420

diogomqbm commented Aug 7, 2021 •

edited

Loading

diogomqbm commented Aug 7, 2021 •

edited

Loading

tom-sherman commented Aug 8, 2021 •

edited

Loading

diogomqbm commented Aug 8, 2021 •

edited

Loading

diogomqbm Aug 11, 2021

ryyppy commented Sep 7, 2021

diogomqbm commented Sep 7, 2021 •

edited

Loading

ryyppy commented Sep 8, 2021 •

edited

Loading

diogomqbm commented Sep 25, 2021 •

edited

Loading

davesnx commented Aug 11, 2022 •

edited

Loading

diogomqbm commented Aug 11, 2022

diogomqbm commented Aug 12, 2022

ryyppy commented May 26, 2023 •

edited

Loading

fhammerschmidt commented Jun 5, 2024

Playground output result #420

Playground output result #420

Conversation

diogomqbm commented Aug 7, 2021 • edited Loading

Description

🚨 Attention 🚨

diogomqbm commented Aug 7, 2021 • edited Loading

tom-sherman commented Aug 8, 2021 • edited Loading

diogomqbm commented Aug 8, 2021 • edited Loading

diogomqbm Aug 11, 2021

Choose a reason for hiding this comment

ryyppy commented Sep 7, 2021

diogomqbm commented Sep 7, 2021 • edited Loading

ryyppy commented Sep 8, 2021 • edited Loading

diogomqbm commented Sep 25, 2021 • edited Loading

davesnx commented Aug 11, 2022 • edited Loading

diogomqbm commented Aug 11, 2022

diogomqbm commented Aug 12, 2022

ryyppy commented May 26, 2023 • edited Loading

fhammerschmidt commented Jun 5, 2024

diogomqbm commented Aug 7, 2021 •

edited

Loading

diogomqbm commented Aug 7, 2021 •

edited

Loading

tom-sherman commented Aug 8, 2021 •

edited

Loading

diogomqbm commented Aug 8, 2021 •

edited

Loading

diogomqbm commented Sep 7, 2021 •

edited

Loading

ryyppy commented Sep 8, 2021 •

edited

Loading

diogomqbm commented Sep 25, 2021 •

edited

Loading

davesnx commented Aug 11, 2022 •

edited

Loading

ryyppy commented May 26, 2023 •

edited

Loading