[docs] Improve the StyleX playground

[nmn]

The StyleX website has an empty page for a playground. This can be implemented using "WebContainers".

A basic playground should ship React, StyleX and a simple bundler. It should have four panes:

1. A source editor pane that support tabs for multiple files
2. A "transformed JS" pane that shows what the current file looks like after compilation.
3. A "CSS" pane that shows the overall generated CSS
4. A "preview" pane that shows a preview of the website.

[aminaopio]

Hi Naman! Myself and two other MLH Fellows—@6ri4n and @p0nch000—are working on implementing the rest of the playground. However, we have a few questions:

• Could you provide basic instructions on starting the playground locally?
  • We found a workaround for now, but we're unsure if it's the correct way as we are running into some errors. Does the npm run serve command suffice?
• Are the following errors important, or can it be ignored?:
  • Cookie “ahoy_visitor” has been rejected because it is in a cross-site context and its “SameSite” is “Lax” or “Strict”. headless Cookie “ahoy_visit” has been rejected because it is in a cross-site context and its “SameSite” is “Lax” or “Strict”. headless Cookie “guest_id” has been rejected because it is in a cross-site context and its “SameSite” is “Lax” or “Strict”.
• We're also getting a failed GET request for the Javascript and CSS Files:
  • GET https://gdquwtrcpfu4pzji4kvl98w7vpy5qk-ctxt--3111--34c588ed.local-corp.webcontainer-api.io/stylex.css [HTTP/1.1 404 0ms]
  • GET https://gdquwtrcpfu4pzji4kvl98w7vpy5qk-ctxt--3111--34c588ed.local-corp.webcontainer-api.io/bundle.js
• And lastly, the following errors for the web containers:
  • [!] (plugin rollup-plugin-stylex) RollupError: Expression expected src/app.jsx at error (/home/gdquwtrcpfu4pzji4kvl98w7vpy5qk-ctxt/node_modules/rollup/dist/shared/parseAst.js:279:30) at nodeConverters (/home/gdquwtrcpfu4pzji4kvl98w7vpy5qk-ctxt/node_modules/rollup/dist/shared/parseAst.js:2147:9) at convertNode (/home/gdquwtrcpfu4pzji4kvl98w7vpy5qk-ctxt/node_modules/rollup/dist/shared/parseAst.js:1032:12) at convertProgram (/home/gdquwtrcpfu4pzji4kvl98w7vpy5qk-ctxt/node_modules/rollup/dist/shared/parseAst.js:1023:48) at Object.parseAst (/home/gdquwtrcpfu4pzji4kvl98w7vpy5qk-ctxt/node_modules/rollup/dist/shared/parseAst.js:2207:20) at Object.transform (file:///home/gdquwtrcpfu4pzji4kvl98w7vpy5qk-ctxt/node_modules/@stylexjs/rollup-plugin/lib/es/index.mjs:120:26)

[nmn]

I just updated #12 to fix build. nThis should help some of the problems, but other problems will remain.

For the most part, see https://webcontainers.io/guides/quickstart#cross-origin-isolation for help troubleshooting.

Could you provide basic instructions on starting the playground locally?

This wasn't easy and I had trouble making this work locally. The general steps are:

1. Run npm run build for the whole repo. This should happen after you run npm install anyway.
2. In apps/docs running npm run serve should server the built folder

However, webcontainer require https to work which can be tricky to setup locally. See the link above for help solving this problem.

Every StyleX PR auto deploys and the test link: https://stylex-git-better-playground-fbopensource.vercel.app/playground/

Shows the webcontainer set up mostly working correctly. Although I AM also seeing the Rollup error.

Are the following errors important, or can it be ignored?:

I'm not sure, I don't see these errors, although I do see different errors which are all related to https not working as expected.

We're also getting a failed GET request for the Javascript and CSS Files:

If you get the webcontainer working correctly and set it up to compile the StyleX code within correctly, this problem should go away. Months ago I had this working, but you might need to update some of the "Playground" code to get to work without errors again.

And lastly, the following errors for the web containers:

Again, once you fix the "Playground" setup, these errors should go away.

[nmn]

OK. I made another update to the PR and things should be functional now.

Could you provide basic instructions on starting the playground locally?

After npm install at the root of the monorepo, which should automatically build all the core StyleX pagaes, you should be able to cd apps/docs and run the following after each change:

$ npm run build && npm run serve

Unfortunately, I have not found a way to make Docusaurus's hot reload work with the WebContainers. So, you have to do the build and serve from scratch after every code change to test locally.

---

Outside of that the errors should be fixed and you should get a successful blue "hello world" bar to render.

---

There are some pretty big issues still:

• The rollup setup does not seem to be able to understand JSX within the app.jsx file (which is also what is shown on the left of the playground). For not, I replaced this with React.createElement to fix the problem.
• Editing the file does not re-compile and update the preview
• All the other features of the playground are still missing.

I would recommend trying to take the entire "files" section of the playground to a standalone project, getting that to work correctly and then bringing it back in so you can then focus on the UI for the playground.

Since we want a preview of compiling each individual file, it will be useful to change up the setup to use something other than the basic Rollup setup. (It might be OK to add an additional script to compile each JS file with JS individually as needed.

[Janpot]

Was a bit dissatisfied with the stylex playground. It's a bit slow, no compiled output, no examples... So as one naturally does, I decided take a Sunday afternoon and vibe code me an alternative in bolt.new. There's still a few bugs in there but it seems to be mostly functional. In case anyone wants to play around with it: https://venerable-melomakarona-255f96.netlify.app/

[mellyeliu]

@Janpot awesome! We're looking into making improvements on the playground as well and this looks super promising. Would you be comfortable sharing the source code?

[nmn]

@Janpot This looks pretty awesome! It seems to have almost everything we wanted for our playground. We would really appreciate a PR.

[Janpot]

You can find the project here.

[Janpot]

you can unassign me, I'm not planning to further work on this rn