Question: how does the console work?

[marksherman]

Hi, everyone! I'm a professor who teaches intro programming using p5.js. The resources you, and the Processing Foundation produce are fantastic! I got my school to donate to the foundation in support. Thank you.

Anyway, my question. I'm trying to reproduce the Console feature from this web editor in other environments and can't nail down the magic is that lets you capture the console output from the user code without getting tangled in the browser's full console. How do you do that capture and redirect?

I figured I'd ask- can someone point me towards how this mechanism works? Of course I'll share anything cool I make with it back to the community.

Thank you,
Mark

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[catarak]

Hey Mark! Thanks for your support ✨ I'm using a library called console-feed, which does a lot of the work, but there's also a lot of other stuff going on, which I can't say is 100% the best and most optimal solution, but it's working for now. I've also been working on finally merging in #667, which makes a lot of improvements to the console, but most importantly makes the console interactive, so that you can execute JS in the context of the iframe running your p5.js sketch.

Other important code that supports the console feature:

• Console.jsx - the React component responsible for rendering the console
• previewEntry.js - This code is added to the iframe when a user hits the play button, and listens for console events
• consoleUtils.js - Contains two functions, one of which catches errors in the iframe and transforms them into console events that can be rendered by Console.jsx, and one that helps generate the correct line numbers for the errors.

In order to work on #667, I've honestly been looking a lot at the CodeSandbox GitHub, which has taken me a long time to figure out which code/files are actually relevant.

Hopefully this is helpful! If you have more questions I can try to answer them. Writing this all out makes me think of how many technical things I've had to piece together on my own in working on the web editor, and how it would maybe be useful to others if I documented/wrote about some of this work!

[marksherman]

Thank you very much! This is exactly the information I was hoping for. I wish you luck on the improvements. Having an interactive console will clearly have great educational implications.