feat: add more playground providers#1607
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
📝 WalkthroughWalkthroughChanges add support for four new playground providers: TypeScript, Solid, Svelte, and Tailwind. The Vue component now includes icon and colour mappings for these providers. The readme utility was updated to store provider paths as arrays instead of single values, enabling multiple URL path support per provider. New playground provider entries were added with their respective domains and icons. The configuration file extends the colour palette to include provider-specific colours for the newly supported playgrounds. 🚥 Pre-merge checks | ✅ 1✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Tip Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord. 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[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
server/utils/readme.ts (1)
97-97:startsWithpath matching without a trailing-slash guard can produce false positives on general domains.On
svelte.dev(andtypescriptlang.org), a URL likehttps://svelte.dev/replications/...would pass thestartsWith('/repl')check and be incorrectly labelled as a Svelte playground link. While no such paths exist today,svelte.devis a full-featured public site where future paths could collide.♻️ Suggested tighter path check
- (!provider.paths || provider.paths.some(path => parsed.pathname.startsWith(path))) + (!provider.paths || provider.paths.some(path => + parsed.pathname === path || parsed.pathname.startsWith(path + '/') + ))This keeps every current match (
/repl/hello-world,/playground/...,/play) whilst ruling out coincidental prefix collisions on general domains.Also applies to: 120-120
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
|
Thanks for your first contribution, @olivermrose! 💪 We'd love to welcome you to the npmx community. Come and say hi on Discord! And once you've joined, visit npmx.wamellow.com to claim the contributor role. |
2 participants
🔗 Linked issue
N/A
🧭 Context
Adds more playground providers for popular packages.
motion-sv example
📚 Description
This adds playground detection for Svelte, Solid, and Tailwind. Also adds the icon/color pair for TypeScript since it seemed like that was missing.
There are a slew of other custom playgrounds including:
But they're not included in the primary READMEs, and I was unable to find practical examples of them in the wild, so I just chose not to add them for now.
I had to change the
PlaygroundProviderinterface slightly to allow multiple paths since Svelte redirects/replto/playground; if this is undesired just lmk and I can revert.