Add an in-browser playground to the docs site - #69
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
github-actions
Bot
added
dependencies
|
Warning Review limit reached
Next review available in: 44 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
WalkthroughChangesPlayground feature
Estimated code review effort: 4 (Complex) | ~45 minutes Suggested labels: Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
@coderabbitai review |
✅ Action performedReview finished.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@website/app/`(home)/playground/versions.ts:
- Line 9: Update the FALLBACK VersionOption label to remove the inaccurate
“latest” designation, using a neutral fallback label or no suffix while
preserving the existing fallback version value.
- Around line 51-56: Update the beta option construction in the versions-loading
flow to include tags.beta only when it exists in registry.versions and is not
already represented in stable. Preserve the existing beta label, stable options,
and FALLBACK behavior, while ensuring stale or duplicate beta values are
omitted.
- Around line 30-38: Add an API-supported abort timeout to the fetch call in the
registry-loading flow, passing the signal through the request options while
preserving the existing revalidation setting. Ensure timeout failures are
handled by the current catch path so the function returns FALLBACK.
In `@website/components/playground.tsx`:
- Around line 386-402: Handle rejected navigator.clipboard.writeText promises in
both CopyAction and ShareButton by adding failure handling that prevents
unhandled rejections and provides appropriate user feedback. Preserve the
existing success behavior, including updating copied state only after a
successful write, and anchor the changes to the onClick handlers in those
components.
- Around line 86-106: Update getHighlighter so a rejected highlighter
initialization promise clears the shared highlighter cache, allowing subsequent
calls to retry after transient Shiki or CDN failures. Preserve the existing
successful caching behavior and highlighting implementation, mirroring the
rejection-eviction approach used by loadRuntime.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: db913e2d-613c-41ef-9929-e1d8a4faea2d
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (7)
website/app/(home)/playground/page.tsxwebsite/app/(home)/playground/versions.tswebsite/app/global.csswebsite/components/code-editor.tsxwebsite/components/playground.tsxwebsite/lib/layout.shared.tsxwebsite/package.json
1 participant
Adds a playground at
/playgroundwhere you can paste code and watch SayKit extract its messages and compile it, live.How it works
The transformers are pure Babel with no Node dependencies, so the whole thing runs client-side with no server involved. Each version is loaded from esm.sh at runtime rather than bundled, which means the version list picks up new releases without rebuilding the site.
The version selector offers every stable release from 0.5.0 up, plus whatever the
betadist-tag currently points at. Betas are published as0.0.0-beta-<timestamp>, which sorts meaninglessly, so only the current one is surfaced rather than the whole list.@saykit/transform-jsxalso handles the plain-JS tagged-template and call forms by delegating to@saykit/transform-js, so one package covers both and there's no transformer picker to get wrong.Notes
^0.0.0-beta-<timestamp>gives a 200 on the entry but 404s on its imports. The siblings are pinned via?deps=to the exact version being loaded, which fixes beta and is a no-op for stable releases.@saykit/configat the same version as the transformer, so a displayed id always matches what that release would write into the catalogue. Generated ids render muted to distinguish them from explicit ones.hashchangelistener handles opening a share link while already on the page, which is a same-document navigation that never remounts.Verification
Type-check and build pass;
/playgroundprerenders as static with a 1h revalidate, and the build doesn't try to resolve the esm.sh URL.Verified in a browser: extraction and transformation on load, live updates while typing, syntax errors surfacing without reflowing the page or blanking the last good result, format, share round-trip on a cold load, light and dark, and no page-level horizontal overflow with a very long message.
Version switching is wired to the transformer rather than decorative. Same input,
say\Your total is ${{ cartTotal: getTotal() }} today``:0.5.0Your total is {0} todaybetaYour total is {cartTotal} todayNot verified: a true phone-width render, and behaviour when esm.sh is unreachable.
Summary by CodeRabbit