Finish implementing the 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.