[playground] Introduce new potential replacement playground

[henryqdineen]

What changed / motivation ?

The StyleX playground can be slow to load, to the point that it seems broken. I was reading old issues and got inspired by some impressive work by Jan Potoms (https://github.com/facebook/stylex/issues/732#issuecomment-2768404971) on an alternative StyleX playground. I think a playground like this can be really useful for somebody learning how StyleX works and the behavior of the transform.

This PR introduces a new /playground-new route (not in nav yet) that implements a playground based on (but less full-featured than) Jan's design and following Naman's original requirements.

Technical details

• I noticed that the React docs used Sandpack so I figured it would be okay here (Jan's version used react-runner). I ran into some React version incompatibility with @codesandbox/sandpack-react and the old version of Docusaurus so I ended up using the lower-level @codesandbox/sandpack-client package. I can look into updating Docusaurus in a separate PR if you would like.
• Since @stylexjs/babel-plugin cannot run in the browser I had to add some custom webpack configuration get it to work. An alternative solution could be to publish a second rollup bundle from @stylejs/babel-plugin that is designed to work in the browser (POC).

Linked PR/Issues

Related to https://github.com/facebook/stylex/issues/732

Additional Context

Pre-flight checklist

• [x] I have read the contributing guidelines Contribution Guidelines
• [x] Performed a self-review of my code

[mellyeliu]

We have been wanting this for so long!

[nmn]

@henryqdineen Thank you so much for working on this. As a related development, I have been working on an unplugin package that has a working plugin for esbuild, vite, rollup, rspack and webpack. It even works with RSCs (I tested redwoodSDK).

If we want to stick to using webContainers, that might improve performance.

I can look into updating Docusaurus in a separate PR if you would like.

I'm hoping that the unplugin plugin can unblock that work as well.

An alternative solution could be to publish a second rollup bundle from @stylejs/babel-plugin that is designed to work in the browser (POC).

I'm open to shipping this if you can make a PR. I attempted this in the past and ran into some issues. Things have come a long way since so it may not be a problem anymore.

[henryqdineen]

👍 Maybe the web containers-based playground and the one in the PR both have a place in the docs but I'm not sure how to differentiate them. Personally I more comfortable with my local IDE and don't find myself using tools like StackBlitz to any meaningful prototyping in the browser. The playground in this PR is definitely more along the lines of tools like AST explorer, Babel Repl, and TypeScript playground, which I have used countless times over the years.

I'll try to put up a PR for a browser version of the Babel plugin soon.

[nmn]

@henryqdineen Sorry for the long delay while I've been catching up on a bunch of chores for the repo. After looking at the details, I think sandpack should be fine as the technology for the one and only playground for the website. What you've implemented is already doing most of what I would want from the playground.

I'll do some testing to check edge-cases for theming etc, and after that I'd feel happy to merge it.

[henryqdineen]

Great! Let me know how I can help.