feat(playground): add multi-file editor with file explorer#10353
feat(playground): add multi-file editor with file explorer#10353JoshLove-msft wants to merge 4 commits intomicrosoft:mainfrom
Conversation
Add files, selectedFile to PlaygroundState. Normalize single-file content into files Record. Update compile function to write all files to virtual FS. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Add useMonacoModels hook for managing multiple Monaco editor models - Add file tree explorer panel that shows when multiple input files exist - Update EditorPanel to accept inputFiles, selectedInputFile props - Wire multi-file compile: write all files to BrowserHost, clear stale ones - Add normalized multi-file accessors to playground state Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- 13 tests for usePlaygroundState multi-file support - Tests cover: files normalization, isMultiFile, selectedFile defaults, onSelectedFileChange, onFilesChange, onFileContentChange - Add changeset for @typespec/playground Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
JoshLove-msft
requested review from
bterlson,
markcowl and
timotheeguerin
as code owners
JoshLove-msft
requested review from
AlitzelMendez,
chrisradek and
witemple-msft
as code owners
…e-explorer # Conflicts: # packages/playground/src/react/playground.tsx # pnpm-lock.yaml
commit: |
|
All changed packages have been documented.
|
|
You can try these changes here
|
There was a problem hiding this comment.
I had a pr experimenting adding this a few weeks ago but held on as unsure it was that valuable and to find the correct UI for it so we don't make this even more crowded(playground already getting tight on small screen).
What motivated this?
Not fully sure what it's supposed to look like in your pr as it doesn't seem to work in the preview playground
There was a problem hiding this comment.
Ha yeah I see it is not working. The motivation for this is to ultimately be able to load in specs from the rest spec repo.
There was a problem hiding this comment.
you can already do that with the import it just combine them into one file
3 participants
Multi-file editor support for the TypeSpec playground
Adds the ability to work with multiple input files in the playground editor.
Changes
files,selectedFile, and normalized accessors toPlaygroundStateuseMonacoModelshook: Manages Monaco editor model lifecycle per file (create/update/dispose)FileTreeExplorercomponentBrowserHostvirtual FS and clears stale.tspfiles before each compilationinputFiles,selectedInputFile,onSelectedInputFileChangefrom playground stateusePlaygroundStatemulti-file supportFollow-up work