playground-elements

Synchronous XHR is a really bad way to do this. The performance will be terrible for anything but the smallest module graphs. But the TypeScript compiler API is synchronous, so there's a problem. What you want to do is asynchronously walk the import graph, resolving import specifiers along the way with something like es-module-lexer or TypeScript's light parser, then when all the input files are collected, pass them through a compiler host to the compiler. This is what the Lit team's Playground Elements do, which compile files on a worker for embeddable interactive code samples: https://github.com/google/playground-elements

The key is running the untrusted code in a cross-origin iframe so you can rely on the same-origin policies and `sandbox`[1]. You can control the code in a number of ways - loading a trusted shim that sets up a postMessage handler is pretty common. You can be careful and do that in a way that untructed code can't forge messages to look like their from the trusted code. Another way is to use two iframes to the untrusted origin. One only loads untrusted code, the other loads a control API that talks to the trusted code. You can then to the loading into the iframe with a service worker. This is how the Playground Elements work (they're a set of web components that let you safely embed a mini IDE for code samples) https://github.com/google/playground-elements [1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/if...

if you want a self-hosted codepen there's this https://github.com/google/playground-elements not sure if, based on the way it works, whether it supports SharedArrayBuffer

This one worked pretty great for my purposes. https://github.com/google/playground-elements Of course if you’d rather build your own less functional copy from scratch in order to waste several months and avoid shipping, I have some colleagues you might enjoy working with.

If you ever want to add a client-side-only playground to your own site, have a look at the Playground Elements project: https://github.com/google/playground-elements It's a set of custom elements and a service worker that populate an iframe with the contents of the code editor with no server, but in a way that looks like real network requests to the iframe. This means you get a root HTML page and all the right loading behavior and ordering as a real hosted web page. Inspect the iframe with devtools and you see exactly what you wrote, nothing added by the playground. The elements also support Node-style import specifier resolution, pulling npm dependencies automatically from unpkg.com, TypeScript, and JSX. And the elements are very configurable. You have drop in a tabbed-editor and preview combo element, or you can separate the preview and