feat: allow file editing and updates the preview

[6ri4n]

What changed / motivation ?

WIP Implementing Playground Container

Changed the following web container project structure:

• Adjusted the build tool to use Vite instead of Rollup
• Supports hot reloading and JSX syntax
• Add generateCSS.js script which is make-stylex-sheet.js but with small changes

Changed the following to Playground.js:

• Allow file editing to app.jsx
• Preview gets updated

Linked PR/Issues

#732

Additional Context

In Playground.js, if app.jsx changes, the function updateFiles writes the changes to the app.jsx file and then runs the generateCSS.js script which creates stylex.css inside the src directory.

The app.jsx file includes import "./stylex.css"; and if removed then any further changes to the styling won't be applied, it'll use the last stylex.css file that was created.

Screenshots:

Container Running with Vite

Hot Reloading / Applying Changes

Pre-flight checklist

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

[6ri4n]

Hi @nmn, here’s what I have so far. I'd appreciate any feedback or suggestions.

[nmn]

The code makes sense, but it doesn't seem to be working in my testing. See for yourself:

https://stylex-git-fork-6ri4n-dev-better-playground-fbopensource.vercel.app/playground/

Changing the styles just causes the box to lose all styles. It seems like the new CSS file isn't being loaded after being generated. Even if I manually reload the iFrame the new styles are not being loaded. I'll try to pull your PR locally and investigate a bit further.

[nmn]

I pulled the changes down locally and the file update is working correctly, so is the generateCSS script. However, the web preview is broken. I only saw the new styles applied once after a dozen attempts. Most of the time, the CSS simply does not load.

[nmn]

The generateCSS script from the docs app is probably not the best approach here.

The best idea would be to setup a standalone Rollup + React + StyleX application and then once that works correctly, re-create that setup within the playground.

Our Rollup plugin is the most reliable, so it should work well.

We can also try a custom Vite plugin, which is what is set up right now and can do Fast Refresh. There are a few examples of Vite plugins used with frameworks like Svelte, Qwik and Remix. One of those should work well as a starting point.

[nmn]

The StyleX plugin should already be doing this.

[nmn]

This branch will also need to be rebased again. I just rebased the better-playground branch.

[nmn]

@6ri4n we can show an error message in safari if it doesnt work, and maybe add an explicit reload button for the preview.

[6ri4n]

@nmn I've added the preview reload button, along with an error message that appears if the container fails to load (if the instance or url are invalid) after a certain period of time.

On Safari the preview may get stuck on the gray screen but I believe clicking the reload preview button resolves it as long as the url is valid. I would appreciate your feedback and if everything looks good, would you like me to add these features into #759

[nmn]

Yes. This is looking good functionally. The remaining issues are mostly visual and features which are being done in the other PR.

[nmn]

The one thing to investigate is to figure out why there is syntax highlighting for the code, but I won't block this work for that.

[6ri4n]

The one thing to investigate is to figure out why there is syntax highlighting for the code, but I won't block this work for that.

@nmn To clarify, are you talking about this playground with the vite setup or the playground with the rollup setup because I'm not seeing any syntax highlighting with the vite setup.

[nmn]

This PR has been rebased merged into #12