{"id":13927,"date":"2023-04-10T05:27:17","date_gmt":"2023-04-10T10:27:17","guid":{"rendered":"https:\/\/rud.is\/b\/?p=13927"},"modified":"2023-04-10T05:27:17","modified_gmt":"2023-04-10T10:27:17","slug":"introducing-webrider-the-webr-ide-ish-repl-you-didnt-know-you-needed","status":"publish","type":"post","link":"https:\/\/rud.is\/b\/2023\/04\/10\/introducing-webrider-the-webr-ide-ish-repl-you-didnt-know-you-needed\/","title":{"rendered":"Introducing WebRIDEr: The WebR “IDE”-ish REPL You Didn’t Know You Needed"},"content":{"rendered":"

The official example WebR REPL<\/a> is definitely cool and useful to get the feel for WebR. But, it is far from an ideal way to deal with it interactively, even as just a REPL.<\/p>\n

As y’all know, I’ve been conducing numerous experiments<\/a> with WebR and various web technologies. I started doing this for numerous reasons, one was to get folks excited about WebR and try to show there are endless possibilities for it (and hopefully avoid lock-in to prescribed views on how you should work with it). Another was to brush up on rusty web skills and have something fun to do during the continuing long aftermath of my spike protein invasion.<\/p>\n

I started poking under the WebR covers this past weekend, and until there’s a more pyodide-like JS bridge on the R side of WebR, I decided to forego said spelunking. Instead, I began a dive into {plot2<\/a>}, a really neat {ggplot2}-esque enhancement to base R plotting. While I could use any R-compatible IDE (there are many, btw), I wanted to do all the experiments in WebR-proper, since base plots work out of the box and the {ggplot2} ecosystem takes a bit of time to install. The tinkering began just fine, but it became a bit tedious doing browser refreshes (they’re automatic with Vite in dev mode) for small tweaks. There was no way I was using the official REPL given the lack of real interactivity in the console. And, I wanted to avoid keeping re-rendering Quarto documents, since that would have been as tedious as the Vite refreshes.<\/p>\n

So, I decided to make an “IDE REPL” for WebR, so I could work with it like I would R in Sublime Text, VS Code, or RStudio. I mean, wouldn’t everyone?<\/p>\n

You can check it out here<\/a>, and the source is on GitHub<\/a>.<\/p>\n

I’m not going to take up much more time here, since it comes with some explanations out of the box, but I will reproduce the GH README for it at the end. I will present the structure of the project, here, to make it easier to build upon it (clone\/fork away!).<\/p>\n

I’m using Monaco, the editor that powers VS Code and the online GitHub editor. It has so many batteries included that it’s hard not to want to use it, even considering how much I despise Microsoft as a company. It is dead simple to use.<\/p>\n

The entire project is in vanilla javascript, and there is no builder this time, since I wanted to make this as accessible to as many folks as possible.<\/p>\n

This is the project structure:<\/p>\n

\u251c\u2500\u2500 boilerplate.js # text that appears in the source on first load or hard refresh\n\u251c\u2500\u2500 completions.js # a decent number of R completions (I'll add more)\n\u251c\u2500\u2500 index.css      # core CSS\n\u251c\u2500\u2500 index.html     # HTML shell\n\u251c\u2500\u2500 main.js        # Main \"app\"\n\u251c\u2500\u2500 resizers.js    # We need to keep the panes sized properly\n\u251c\u2500\u2500 r.js           # Some WebR bits\n\u2514\u2500\u2500 rlang.js       # Language stuff for Microsoft's Monaco editor\n<\/code><\/pre>\n
Rather than adorn the interface with silly buttons and baubles, I am putting functionality into the Monaco command palette.<\/p>\n
Here’s what you’ve got with v0.1.0:<\/p>\n