react-spectrum
react-spectrum copied to clipboard
adobe
Use Sandpack for docs examples
Adds CodeSandbox's Sandpack to render examples in the docs. This gives us live example editing, an open in codesandbox button, a copy code button, lazy rendering, and more.
Known issues:
- Since previews use iframes, dialogs won't take over entire page
✅ Pull Request Checklist:
- [ ] Included link to corresponding React Spectrum GitHub Issue.
- [ ] Added/updated unit tests and storybook for this change (for new code or code which already has tests).
- [ ] Filled out test instructions.
- [ ] Updated documentation (if it already exists for this component).
- [ ] Looked at the Accessibility Practices for this feature - Aria Practices
📝 Test Instructions:
Live examples have been enabled on the first example on each of these pages in the docs: ActionButton, Button, LogicButton, ToggleButton, and TableView.
🧢 Your Project:
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Is this something that should be working on the built version of the docs or just locally? I'm just seeing the sandboxes
Working for me on the built version... still not good to see inconsistencies. I wonder if you had any console errors or failed requests.
This is pretty cool. I like the idea of making it opt-in though. I'm a bit concerned about the loading performance at the moment, seems fairly heavy. Maybe we can discuss with the team how we want to roll this out, i.e. which examples get the sandpack treatment vs not.
This is pretty cool. I like the idea of making it opt-in though. I'm a bit concerned about the loading performance at the moment, seems fairly heavy. Maybe we can discuss with the team how we want to roll this out, i.e. which examples get the sandpack treatment vs not.
Definitely, and we could also look at normal rendering as a loading and/or fallback state where sandpack is used. There is also a docs section on Hosting the bundler. And since service workers are used, subsequent loads should be faster.
@reidbarber here are the errors I saw in the console:
I was able to get it to load in a incog window and then by turning off some of my adblocking extensions. Not entirely sure which was the actual solution cuz now it loads properly with the extentions back on again...
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Devon and I are a little concerned about the performance (rendering time on load). I would like to see this functionality become available via a trigger. I think this will also help discoverability. Because it currently does not look any different to the "non-editable" examples, I would like something for people to click on. Edit action button?
Devon and I are a little concerned about the performance (rendering time on load). I would like to see this functionality become available via a trigger. I think this will also help discoverability. Because it currently does not look any different to the "non-editable" examples, I would like something for people to click on. Edit action button?
Maybe on initial render, the code and example should render normally, but we still have the "Copy code" and "Open in CodeSandbox" buttons. And instead of the "Refresh" button, there is an "Edit" button that makes the example live-editable and focus is moved to the editable area.
Or just an "Edit" button initially, that would then enable editing and show the other buttons.
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Build successful! 🎉
Closing for now since we've changed up the example rendering a lot since then. We can re-open later if we want to.