feat: source editor that supports multiple files #759

aminaopio · 2024-10-30T06:41:09Z

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/ server running):

feat759.mov

Screenshots:

Pre-flight checklist

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

aminaopio · 2024-10-30T07:04:31Z

@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 · 2024-10-30T22:17:36Z

@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 · 2024-11-06T09:53:12Z

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 · 2024-11-06T10:08:52Z

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:

The editor
The transformed JS code of the currently active file
The styles collected from the currently active file
- OR the final CSS
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 · 2024-11-06T10:23:48Z

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:

The editor

The transformed JS code of the currently active file

The styles collected from the currently active file

OR the final CSS

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 · 2024-11-06T18:31:01Z

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 · 2024-11-06T20:14:16Z

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 · 2024-11-06T20:15:16Z

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 · 2024-11-06T20:17:02Z

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

aminaopio · 2024-11-06T20:33:04Z

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!

…le (facebook#805)

* feat: add dynamic styles to benchmarks fixture * fix style * adding more styles to fixure * fix style * standardize css property names in dynamic fixture * fix style

* prefix dev classnames with property name * added debug config and babel tests * add caching to default path

… return (facebook#814)

…, borderStyle to valid-shorthands (facebook#817)

…n.rootDir` (facebook#820)

resolving conflicts Better styling in playground component, still needs work Import FontAwsome Icon library, changed tab input

aminaopio · 2024-12-22T05:34:06Z

OPTIONAL: squash the commits in your branch to make rebasing later easier.

Tried to squash as much as I could, but commits from better-playground popped up as well...is that normal?

Rebase with git rebase main. Fix all the conflicts. The more commits you have the longer this will take.

I think it's done?

nmn · 2024-12-22T08:36:37Z

I'm so sorry. I suggested rebasing on main, but what I meant was rebasing onto better-playground.

Can you re-rebase onto the better-playground branch. It's all the same steps, but with that branch name instead of main.

* chore: Update Flow and type defs * chore: update more dependencies * chore: update eslint deps * chore: rollup and types updated * chore: update terser * release: v0.9.0-beta.1 * chore: fix babel rollup bundling

* feat: add no-unused eslint rule * Addressed comments; added tests: named exports, indirect style invoke; added features: non-default export, used style as return, full import pattern support

* feat: add postcss-plugin * fix postcss-plugin readme text * remove .ts, .tsx from node_modules @stylexjs/open-props globs in postcss.config.js * do not rely on internal exports path * fix: remove redundant @layer stylex

* chore: Clean up Nextjs-example with postcss-plugin * chore: remove unnecessary 'bright' dep * chore: add json-scheme types

feat: allow file editing and updates the preview update reload button fix: cleanup and improve perf

chore: prettier feat: loading indicator for sidebar while WC boots refactor: add filereader to dropzone, error rev feat: added dropzone to src directory feat: prevent duplicate filenames - Add check to ensure filenames are unique - Prevent accidental overwriting of existing files feat: failed to load error message and reload preview button refactor: reverting back to filesref fix: ensuring consistency across tab styling chore: reduce codeChangeTimeout to 1000ms - Fix sidebar files not rendering fix: resolve sidebar file rendering issue - Allow main.jsx file to be editable refactor: improve UX by keeping cursor position during changes refactor: optimize component performance - Reduce re-renders by using useRef for tracking files - Add support for updating multiple files at a time feat: delete and rename file operations - Add support for deleting and renaming files - Remove deleted files in previews directory - Update UI widths for sidebar, editor, and preview feat: create and update file operations - Add support for creating and updating files - Fix issue causing the preview to render twice - Improve variable naming for better readability feat: WIP update rollup project feat: WIP view preview files Import FontAwsome Icon library, changed tab input minor change added javascript import for codemirror Implemented src, js, and metadata directories Better styling in playground component, still needs work added changes from better-playground Running prettier/lint, issue unrelated to feature

* feat: add postcss-plugin * fix postcss-plugin readme text * remove .ts, .tsx from node_modules @stylexjs/open-props globs in postcss.config.js * do not rely on internal exports path * fix: remove redundant @layer stylex

* chore: Clean up Nextjs-example with postcss-plugin * chore: remove unnecessary 'bright' dep * chore: add json-scheme types

resolving conflicts Better styling in playground component, still needs work Import FontAwsome Icon library, changed tab input

aminaopio · 2024-12-22T19:14:50Z

I'm so sorry. I suggested rebasing on main, but what I meant was rebasing onto better-playground.

That's my bad, I didn't notice

Can you re-rebase onto the better-playground branch. It's all the same steps, but with that branch name instead of main.

We should be good to go @nmn. For future reference, what's the proper way to clean up commit history? Would running git rebase --interactive $commit and manually removing duplicate commits prior to rebasing cause any issues?

nmn added 10 commits October 17, 2024 13:31

Docs: Add proper playground

546076d

Improve compilation to not insert inject calls

21e8cef

Add Vercel headers

2ad472b

Configure local development for playground

c052704

Add codemirror editor

4310651

Use rollup and static server.

52f2a71

Delay preview to wait for built files

9b82f83

chore: update to latest StyleX for playground

0b46504

chore: fix build

73af4ce

chore: playground actually builds

e962bf8

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Oct 30, 2024

aminaopio changed the title ~~Dev-amina-playground~~ feat: source editor that supports multiple files Oct 30, 2024

vercel bot deployed to Preview October 30, 2024 06:44 View deployment

aminaopio changed the base branch from main to better-playground October 30, 2024 07:13

nmn force-pushed the better-playground branch from e962bf8 to 58bd372 Compare November 1, 2024 08:34

vercel bot deployed to Preview November 6, 2024 09:41 View deployment

aminaopio marked this pull request as ready for review November 6, 2024 09:43

vercel bot deployed to Preview November 6, 2024 09:54 View deployment

vercel bot deployed to Preview November 6, 2024 17:25 View deployment

vercel bot deployed to Preview November 8, 2024 04:19 View deployment

mellyeliu and others added 9 commits December 21, 2024 23:12

feat: add autofix for logical to inline properties in valid-styles ru…

04f91b7

…le (facebook#805)

chore: fix @Property inherits syntax (facebook#806)

eeeaf12

feat: add dynamic styles to benchmarks fixture (facebook#807)

5460c6a

* feat: add dynamic styles to benchmarks fixture * fix style * adding more styles to fixure * fix style * standardize css property names in dynamic fixture * fix style

feat: better dev theme names (facebook#803)

859e9fb

* prefix dev classnames with property name * added debug config and babel tests * add caching to default path

fix valid-shorthands null object error from null css-shorthand-expand…

0de7d45

… return (facebook#814)

fix: add inline processing for borderWidth, borderRadius, borderColor…

e697241

…, borderStyle to valid-shorthands (facebook#817)

fix: Babel plugin should no longer require `unstable_moduleResolutio…

c2e9fe3

…n.rootDir` (facebook#820)

Configure local development for playground

f25d369

chore: fix build

6d6f5b6

aminaopio force-pushed the dev-amina-playground branch from ff8e109 to 1df2576 Compare December 22, 2024 05:14

feat: loading indicator for sidebar while WC boots

28cdb24

resolving conflicts Better styling in playground component, still needs work Import FontAwsome Icon library, changed tab input

aminaopio force-pushed the dev-amina-playground branch from 1df2576 to 28cdb24 Compare December 22, 2024 05:16

vercel bot deployed to Preview December 22, 2024 05:19 View deployment

nmn and others added 13 commits December 22, 2024 12:40

chore: update dependencies and type definitions (facebook#755)

0775590

* chore: Update Flow and type defs * chore: update more dependencies * chore: update eslint deps * chore: rollup and types updated * chore: update terser * release: v0.9.0-beta.1 * chore: fix babel rollup bundling

feat: add no-unused eslint rule to find unused styles (facebook#767)

0ee3d6e

* feat: add no-unused eslint rule * Addressed comments; added tests: named exports, indirect style invoke; added features: non-default export, used style as return, full import pattern support

feat: add postcss-plugin (facebook#781)

518d63e

* feat: add postcss-plugin * fix postcss-plugin readme text * remove .ts, .tsx from node_modules @stylexjs/open-props globs in postcss.config.js * do not rely on internal exports path * fix: remove redundant @layer stylex

chore: Clean up Nextjs-example with postcss-plugin (facebook#784)

ac3d569

* chore: Clean up Nextjs-example with postcss-plugin * chore: remove unnecessary 'bright' dep * chore: add json-scheme types

feat: adjust build setup to use vite

901a617

feat: allow file editing and updates the preview update reload button fix: cleanup and improve perf

Docs: Add proper playground

0e3edd8

Improve compilation to not insert inject calls

ad9273f

rebasing

7703321

release: v0.9.1

2cc9e14

feat: add postcss-plugin (facebook#781)

1a187c2

* feat: add postcss-plugin * fix postcss-plugin readme text * remove .ts, .tsx from node_modules @stylexjs/open-props globs in postcss.config.js * do not rely on internal exports path * fix: remove redundant @layer stylex

chore: Clean up Nextjs-example with postcss-plugin (facebook#784)

a422b80

* chore: Clean up Nextjs-example with postcss-plugin * chore: remove unnecessary 'bright' dep * chore: add json-scheme types

feat: loading indicator for sidebar while WC boots

2e4cc99

resolving conflicts Better styling in playground component, still needs work Import FontAwsome Icon library, changed tab input

vercel bot had a problem deploying to Preview December 22, 2024 19:11 Failure

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: source editor that supports multiple files #759

feat: source editor that supports multiple files #759

aminaopio commented Oct 30, 2024 •

edited

Loading

aminaopio commented Oct 30, 2024

nmn commented Oct 30, 2024

aminaopio commented Nov 6, 2024

nmn commented Nov 6, 2024

aminaopio commented Nov 6, 2024 •

edited

Loading

aminaopio commented Nov 6, 2024 •

edited

Loading

nmn commented Nov 6, 2024

nmn commented Nov 6, 2024

nmn commented Nov 6, 2024

aminaopio commented Nov 6, 2024

aminaopio commented Dec 22, 2024

nmn commented Dec 22, 2024

aminaopio commented Dec 22, 2024

feat: source editor that supports multiple files #759

Are you sure you want to change the base?

feat: source editor that supports multiple files #759

Conversation

aminaopio commented Oct 30, 2024 • edited Loading

What changed / motivation ?

Linked PR/Issues

Additional Context

Pre-flight checklist

aminaopio commented Oct 30, 2024

nmn commented Oct 30, 2024

aminaopio commented Nov 6, 2024

nmn commented Nov 6, 2024

aminaopio commented Nov 6, 2024 • edited Loading

aminaopio commented Nov 6, 2024 • edited Loading

nmn commented Nov 6, 2024

nmn commented Nov 6, 2024

nmn commented Nov 6, 2024

aminaopio commented Nov 6, 2024

aminaopio commented Dec 22, 2024

nmn commented Dec 22, 2024

aminaopio commented Dec 22, 2024

aminaopio commented Oct 30, 2024 •

edited

Loading

aminaopio commented Nov 6, 2024 •

edited

Loading

aminaopio commented Nov 6, 2024 •

edited

Loading