feat: add an interactive playground to the documentation site #216
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
mnahkies
commented
Jun 2, 2024
mnahkies
commented
Jun 2, 2024
mnahkies
commented
Jun 2, 2024
mnahkies
force-pushed
the
mn/feat/playground
branch
from
66b7c29 to
6d16802
Compare
mnahkies
force-pushed
the
mn/feat/playground
branch
from
6d16802 to
1133a1c
Compare
mnahkies
force-pushed
the
mn/feat/playground
branch
3 times, most recently
from
7143634 to
513b30c
Compare
mnahkies
force-pushed
the
mn/feat/playground
branch
from
43f9be0 to
d0fd8f1
Compare
mnahkies
force-pushed
the
mn/feat/playground
branch
from
d0fd8f1 to
8eac716
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Oh boy was this more of a pain than I expected.
Creates an interactive playground similar to the typespec or typescript ones, based on https://github.com/microsoft/monaco-editor
The actual code generation is off-loaded to a web worker, which actually made the react side of things much simpler and easier to reason about, and reduces blocking on the UI thread/main event loop.
Prettier is used instead of Biome due to difficulties getting the WASM to load correctly in the browser / with nextjs. Unfortunately Prettier hits a maximum recursion limit when formatting some of the larger files (in firefox at least), so it would be good to revisit this and try and get Biome working.
When loading the larger files, the performance of the editor gets a bit shaky. I'm unsure if there is a way to offload more of the editor to web workers to reduce strain on the UI thread.
Demo Video
https://github.com/user-attachments/assets/5b34f63e-9eaf-4e27-88e9-5a6a0bf5b9fe