iFrame to execute parsed JavaScript? #100

jaredcwhite · 2021-02-14T07:31:00Z

jaredcwhite
Feb 14, 2021
Maintainer

I was thinking, as the demo gets better and better, the final awesomeness might be to have a simple CodePen-style HTML output in an iframe that can execute the script (either automatically or via a "Run" button).

I threw a wad of code together to experiment with creating an iFrame and injecting it with code…should prove pretty simple to integrate something like that into the demo UI. Obviously the "injectscript" below would be the output from Ruby2JS' parser.

// just an example:
const injectscript = `
class MyClass {
  logprompt() {
    console.log(prompt("What should it say?"))
  }
}

window.obj = new MyClass()

window.addEventListener("DOMContentLoaded", () => {
  document.querySelector("main").innerHTML = '<button onclick="obj.logprompt()">Prompt for Log</button>'
})
`

// the code of interest:
const codeframe = document.createElement("iframe")
codeframe.width = 500
codeframe.height = 300
codeframe.srcdoc = `<html>
<head>
<style>body { font-family: sans-serif; }</style>
<script>
window.console.log = function () {
  document.querySelector("console-output").innerHTML += "<p>" + Array.from(arguments).join(", ") + "</p>"
}
</script>
<script type="module">
${injectscript}
</script>
</head>
<body>
  <main></main>

  <console-output></console-output>
</body>
</html>`

document.body.append(codeframe)

rubys · 2021-02-14T18:08:14Z

rubys
Feb 14, 2021
Maintainer

Getting there. 😃

I'll confirm that I am treating the React site as an exemplar of what site like these should look like. Potentially multiple code editors on a page, each with associated result areas. And, yes, clearly all of the building blocks are now in place.

The current speed bump is that the Ruby2JS site uses layouts and Turbo. The layouts control the head section and Turbo works by replacing the <body> of pages. The problem I saw with the live demo link at the bottom of the stimulus introduction page was that Turbo doesn't play well with pages that define <script> tags in their body.

So the challenge is to do all of this with no <script> tags unique to the page.

Unsurprisingly, Stimulus solves this problem. We can define a few core Controllers for things like a RubyEditor, a JavaScript (readonly) editor, and a Result area. The form on the demo page that lets you adjust ESLevel, Filters, and Options would also need to be a controller, even if it is only used once on the site, but that's OK.

Once these controllers are in place, they would be available to all pages on the site. To use them, one would not need to write any scripts, instead one would write add a data-controller attribute and perhaps a few targets and other data attributes. Static HTML, so something Bridgetown handles well.

Some closing thoughts:

Once this is in place, I can drop the data-turbo=false from the Stimulus introduction. And for that matter, drop the target="_blank" from the "Try it Online!" button. Users that navigate these links will already have the scripts pre-loaded, so will see the full benefit from Turbo.
There likely will still need to be a build stop for the controllers themselves and the things they depend on (like the codemirror editor, converting Ruby2JS to JS via Opal, etc.). This is not a big problem, it already is a handled by a Rakefile, and once debugged, these scripts will probably not need to change very often. But if there is going to be a build step anyway, those scripts might as well be written in Ruby and converted to JS, dogfooding this library and providing an example for others to follow.

P.S. If you can't tell, I'm having a blast, learning new things and applying them.

1 reply

jaredcwhite Feb 15, 2021
Maintainer Author

That all sounds fab! And I like the idea of using Ruby2JS to write the Ruby2JS demo/editors, which in turn uses Opal to parse Ruby…we should publish a blog post at the end of the line to highlight all the magic!

rubys · 2021-02-16T14:45:40Z

rubys
Feb 16, 2021
Maintainer

The scripts are going to look strange for the next few days, but should continue to work as I restructure things. I'm starting by pulling all of the code which will eventually be placed into controllers into a single file, leaving the opal generated code to focus on a single purpose: exposing Ruby2JS.convert and Ruby2JS.parse functions, and leaving the CodeMirror code to exposing a read/write Ruby editor and a read-only JS editor. A second pass will reorganize the extracted code into controllers.

Along the way, I've opened bridgetownrb/bridgetown#246

0 replies

rubys · 2021-02-21T18:00:42Z

rubys
Feb 21, 2021
Maintainer

The example on the front page will now execute as you make changes.

1 reply

jaredcwhite Feb 22, 2021
Maintainer Author

Looking good in Firefox! =)

jaredcwhite · 2021-02-22T17:41:41Z

jaredcwhite
Feb 22, 2021
Maintainer Author

FYI, both the homepage and demo page are breaking in Safari with a JS error message. Hard to tell what's going on due to the one-line file.

SyntaxError: Unexpected token '='. Expected an opening '(' before a method's parameter list.

3 replies

rubys Feb 22, 2021
Maintainer

Will look into tonight.

rubys Feb 22, 2021
Maintainer

Fixed 2490a10. Thanks!

jaredcwhite Feb 23, 2021
Maintainer Author

Sweeeeeet!

rubys · 2021-02-22T18:06:30Z

rubys
Feb 22, 2021
Maintainer

The React examples are now live: https://www.ruby2js.com/examples/react/

It will take more work to get the Stimulus examples live, imports, registration, etc.

0 replies

rubys · 2021-02-24T19:56:23Z

rubys
Feb 24, 2021
Maintainer

stimulus examples are now live.

Fun fact: if you bring up a stimulus example in Safari and click on the JavaScript tab and then do the same in Chrome, Firefox, or Microsoft Edge, you will see different JavaScript. If you look in the console window, you will see an error in Safari - that's because Safari doesn't yet support some of the latest ES features. That error is recovered from, the eslevel option is downgraded, and the script is generated with the new options and tried again. I'm still working through other minor things, for example Safari doesn't appear to involve onload handlers on successful completion of an inline script, but what remains shouldn't be all that difficult to address.

3 replies

jaredcwhite Feb 25, 2021
Maintainer Author

Have had a hectic schedule lately, but I've been admiring all the updates from afar. Love the Ruby / JS toggles and showing the execution output inline with the examples. Now I want to write up some more tutorials/demos in just that manner for the site!

rubys Feb 25, 2021
Maintainer

What's shocking to me is the performance. Everything updates in real-time.

jaredcwhite Feb 26, 2021
Maintainer Author

For sure, it's quite impressive.

jaredcwhite · 2021-03-17T00:59:15Z

jaredcwhite
Mar 17, 2021
Maintainer Author

@rubys FYI, Bridgetown v0.20 is out now with better Webpack manifest support (aka multiple entry points and other arbitrary files via the webpack_path helper). 🤘

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

iFrame to execute parsed JavaScript? #100

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 7 comments 8 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

iFrame to execute parsed JavaScript? #100

jaredcwhite Feb 14, 2021 Maintainer

Replies: 7 comments · 8 replies

rubys Feb 14, 2021 Maintainer

jaredcwhite Feb 15, 2021 Maintainer Author

rubys Feb 16, 2021 Maintainer

rubys Feb 21, 2021 Maintainer

jaredcwhite Feb 22, 2021 Maintainer Author

jaredcwhite Feb 22, 2021 Maintainer Author

rubys Feb 22, 2021 Maintainer

rubys Feb 22, 2021 Maintainer

jaredcwhite Feb 23, 2021 Maintainer Author

rubys Feb 22, 2021 Maintainer

rubys Feb 24, 2021 Maintainer

jaredcwhite Feb 25, 2021 Maintainer Author

rubys Feb 25, 2021 Maintainer

jaredcwhite Feb 26, 2021 Maintainer Author

jaredcwhite Mar 17, 2021 Maintainer Author

jaredcwhite
Feb 14, 2021
Maintainer

Replies: 7 comments 8 replies

rubys
Feb 14, 2021
Maintainer

jaredcwhite Feb 15, 2021
Maintainer Author

rubys
Feb 16, 2021
Maintainer

rubys
Feb 21, 2021
Maintainer

jaredcwhite Feb 22, 2021
Maintainer Author

jaredcwhite
Feb 22, 2021
Maintainer Author

rubys Feb 22, 2021
Maintainer

rubys Feb 22, 2021
Maintainer

jaredcwhite Feb 23, 2021
Maintainer Author

rubys
Feb 22, 2021
Maintainer

rubys
Feb 24, 2021
Maintainer

jaredcwhite Feb 25, 2021
Maintainer Author

rubys Feb 25, 2021
Maintainer

jaredcwhite Feb 26, 2021
Maintainer Author

jaredcwhite
Mar 17, 2021
Maintainer Author