feat: source editor that supports multiple files

[aminaopio]

What changed / motivation ?

The StyleX website has an empty-ish page for the playground. This tackles one of the issues: A source editor pane that support tabs for multiple files.

Linked PR/Issues

This helps address issue #732

Additional Context

Implemented Change (w/o server running):

feat759.mov

Screenshots:

Pre-flight checklist

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

[aminaopio]

@nmn Hey Naman! I'm still working through the functionality for this feature, but I'm having some trouble getting the styling correct. I've added 'overflow: auto,' to the container component, but the result is above. Without that, the header causes the remainder of the text to overflow slightly and the preview pane is not entirely visible. Any suggestions?

Also, it's currently setting default tabs to those provided within playground-utils/files. Is it preferable to only have the src as a tab and then allow the user to create additional tabs? Sorry if these are silly questions, but let me know your thoughts. Thanks in advance!

[nmn]

@aminaopio I suggest building a sidebar instead. Within the sidebar, you can use <details><summary> elements to create a tree view for the entire file-tree.

You can add a single icon button to show the sidebar that can be absolutely positioned appear over the code editor. This way you can avoid dealing with layout issues.

If you continue to deal with issues, lmk, and I'll help with the UI.

[aminaopio]

Hi @nmn, I ended up having to tuck the icon button into a header anyway, but let me know your thoughts. Maybe the UI could use some work....

[nmn]

I have a project with Rollup working properly here:
https://stackblitz.com/edit/sb1-tu4v6l?file=src%2FApp.tsx

• It's a basic React app with Rollup and livereload
• It uses a forked version of @stylexjs/rollup-plugin
  • It adds a few lines of code to write the individual transformed JS files and the collected styles from them to a previews folder.

Using this project, you should be able to have a four tab design with the following tabs:

1. The editor
2. The transformed JS code of the currently active file
3. The styles collected from the currently active file
   • OR the final CSS
4. The preview
   • The preview should "just work".
   • It should not refresh twice on every change

You can probably skip the eslint and typescript parts of the project for now. That should make the setup fairly small.

[aminaopio]

I have a project with Rollup working properly here: https://stackblitz.com/edit/sb1-tu4v6l?file=src%2FApp.tsx

• It's a basic React app with Rollup and livereload

• It uses a forked version of @stylexjs/rollup-plugin

  • It adds a few lines of code to write the individual transformed JS files and the collected styles from them to a previews folder.

Using this project, you should be able to have a four tab design with the following tabs:

1. The editor

2. The transformed JS code of the currently active file

3. The styles collected from the currently active file

   • OR the final CSS

4. The preview

   • The preview should "just work".
   • It should not refresh twice on every change

You can probably skip the eslint and typescript parts of the project for now. That should make the setup fairly small.

Ok I just looked over this again now that I'm fully awake, and I see what you're saying

[aminaopio]

However, I'm having some trouble visualizing what you mean by 4 tab design @nmn

• Do you want each of those tabs to be hidden within the sidebar and take up 100% of the screen when active?

• Or something like this:

  • 

I was under the impression that what I'm implementing currently is just the multi-file support for the code editor alone

A source editor pane that support tabs for multiple files

[nmn]

We have design options, but what I'm imagining is that the left half of the screen is the code editor (plus a sidebar), and the right half of the screen has tabs to let you see either the JS output, collected styles, generated CSS or preview.

A grid of four corners like in your hand-drawn picture could also work.

[nmn]

I was under the impression that what I'm implementing currently is just the multi-file support for the code editor alone

You can start with that. Do you want me to integrate the Rollup project into my playground PR so you can just rebase on top and do the work on adding tabs for the source editor?

[nmn]

Hey @aminaopio Sorry, I confused the two Playground related PRs. Please carry on with your work on adding tabs.

[aminaopio]

Hey @aminaopio Sorry, I confused the two Playground related PRs. Please carry on with your work on adding tabs.

Oh okay all good! I'll start implementing what you suggested once this one gets finished up and merged

You can start with that. Do you want me to integrate the Rollup project into my playground PR so you can just rebase on top and do the work on adding tabs for the source editor?

We can try this out on our own, but may need assistance. I'll get back to you on this one. Thanks!

[aminaopio]

@nmn Is this okay to merge? And can you go ahead an integrate the rollup project as well? Thanks!

[nmn]

@aminaopio I think you will need to rebase your branch before we can merge.

The basic functionality seems to work, but the design could use a bit more love too.

• The arrow icons can be replaced with real SVG icons. Docusaurus might also have an icon for this available.
• The trash icon should probably be red, and likely the outline variant.
• The filenames should not be editable all the time. Double-clicking (or hitting Enter) should enable edit mode and the border around the text input should be more prominent.

None of these changes are blockers, but we will need to get the other parts of the playground working before we are able to merge it anyway.

[aminaopio]

@aminaopio I think you will need to rebase your branch before we can merge.

The basic functionality seems to work, but the design could use a bit more love too.

• The arrow icons can be replaced with real SVG icons. Docusaurus might also have an icon for this available.
• The trash icon should probably be red, and likely the outline variant.
• The filenames should not be editable all the time. Double-clicking (or hitting Enter) should enable edit mode and the border around the text input should be more prominent.

None of these changes are blockers, but we will need to get the other parts of the playground working before we are able to merge it anyway.

@nmn Ok thanks for the feedback, it should be good to go now. I imported icons from FontAwesome and double-clicking will enable edit mode for the filename (let me know if the white bg is too harsh/if the red trash icon should be a diff color).

We're hoping to implement the rest of the playground in parallel with working on other issues. Do you have any beginner-friendly ideas for contributing to the docs?