Improved `%%javascript` cell magic.

I have been working on am improved %%javascript cell magic and I wanted to run the idea by others to gauge interest. The existing %%javascript magic uses eval on a string of JavaScript code. While this works, it is relatively difficult to load external JavaScript packages and it is awkward to work with the DOM. I have developed a prototype with the following features:

• Uses the sucrase library to allow a use to write modern JS, JSX or even TypeScript.
• Run the code by appending a script tag to the page with type=module. This allows users to directly import modules from CDNs that support modules, such as Skypack.
• Includes a JS implementation of a display function that takes a React element, native DOM element or list of thereof and renders it into the output of that cell.

The result of all this is that a user can write code that looks like the following:

%%typescript

display(<h1>Hello World</h1>);

And it will “just work”. I would propose that this improved magic replaces the existing javascript magic. We might also want to have multiple variants that handle plain javascript, typescript, etc. At this point, I mostly want to get feedback on this directly to see if there is interest in this being in IPython. Here are a couple of example of this in action:

[echarles]

Maybe jumping to the details too soon, and better discussed in the upcoming repository, but I prefer logging my questions here for now:

1. Would sucrase invocation be different for js, jsx, ts, tsx? I guess tsx would cover everything. Let’s say it is different, then we could have the magic being %%js, %%jsx, %%ts, %%tsx allowing keeping the to be deprecated %%javascript, and allowing to no make the pure javascript developer afraid with the typescript naming…
2. Let’s say I run in JupyterLab, will the generated code have access to jupyterlab dependencies and code, so we could simply say import React from "react" without going to Skypack?
3. Again for JupyterLab, will the generated code have access to the effective runtime, so being able to access some singleton, and from there other live constructs, even some private or more sensible ones?

[Carreau]

I’m happy to deprecate the current javascript magic before 8.0, but I think that if anything a magic like that should be in a separate package to move at its own speed.

Even in a separate package, we can make IPython depend on it, or auto load it when present.

I also want to be really careful about “just swapping” as it may break a lot of existing code.