Skip to content

feat(ui): added support for Effect.ts playground links #3082

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nikelborm wants to merge 1 commit into
base: main
Choose a base branch
from
+22 −0
Open

feat(ui): added support for Effect.ts playground links #3082

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions app/components/Package/Playgrounds.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ const props = defineProps<{
const providerIcons: Record<string, string> = {
'stackblitz': 'i-simple-icons:stackblitz',
'codesandbox': 'i-simple-icons:codesandbox',
'effect-ts-playground': 'i-simple-icons:effect',
'codepen': 'i-simple-icons:codepen',
'replit': 'i-simple-icons:replit',
'gitpod': 'i-simple-icons:gitpod',
Expand All @@ -28,6 +29,7 @@ const providerIcons: Record<string, string> = {
const providerColors: Record<string, string> = {
'stackblitz': 'text-provider-stackblitz',
'codesandbox': 'text-provider-codesandbox',
'effect-ts-playground': 'text-provider-effect',
'codepen': 'text-provider-codepen',
'replit': 'text-provider-replit',
'gitpod': 'text-provider-gitpod',
Expand Down
7 changes: 7 additions & 0 deletions server/utils/readme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,13 @@ const PLAYGROUND_PROVIDERS: PlaygroundProvider[] = [
paths: ['/play'],
icon: 'typescript',
},
{
id: 'effect-ts-playground',
name: 'Effect.ts Playground',
domains: ['effect.website'],
paths: ['/play'],
icon: 'effect',
Comment on lines +102 to +107

@coderabbitai coderabbitai Bot Jul 25, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Avoid prefix matching for the /play route.

The matcher uses pathname.startsWith(path), so this entry also classifies URLs such as /playground and /player as Effect.ts playgrounds. Match the exact route or a segment descendant (/play and /play/...) and add a near-match regression test.

🤖 Prompt for 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.

In `@server/utils/readme.ts` around lines 102 - 107, Update the route matching
logic used by the readme entries so the `effect-ts-playground` path `/play`
matches only the exact pathname or descendants beginning with `/play/`, not
prefix-only near matches such as `/playground` or `/player`. Add a regression
test covering these near-match paths while preserving valid `/play` and
nested-route behavior.

@nikelborm nikelborm Jul 25, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The same feedback applies to the TypeScript case, which was used as a base for this addition. Fixing the prefix issue needs refactoring that is outside the scope of this PR.

@coderabbitai coderabbitai Bot Jul 25, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@nikelborm, agreed — this is pre-existing shared matcher behaviour, including the TypeScript provider, rather than a regression unique to the Effect.ts addition. I’ll leave it out of this PR. Would you like me to open a follow-up issue to tighten path matching across all providers?

},
{
id: 'solid-playground',
name: 'Solid Playground',
Expand Down
12 changes: 12 additions & 0 deletions test/unit/server/utils/readme.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,18 @@ describe('Playground Link Extraction', () => {
expect(result.playgroundLinks[0]!.provider).toBe('codepen')
})

it('extracts Effect.ts playground links', async () => {
const markdown1 = `[Try it!](https://effect.website/play#3efe9f827b7d)`
const result1 = await renderReadmeHtml(markdown1, 'test-pkg')

expect(result1.playgroundLinks[0]!.provider).toBe('effect-ts-playground')

const markdown2 = `[Try it!](https://effect.website/play?code=Y29uc29sZS5sb2coKQ==)`
const result2 = await renderReadmeHtml(markdown2, 'test-pkg')

expect(result2.playgroundLinks[0]!.provider).toBe('effect-ts-playground')
})
Comment on lines +94 to +104

@coderabbitai coderabbitai Bot Jul 25, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Assert the link exists before indexing the array.

Both assertions use playgroundLinks[0]!; if extraction regresses, the test throws an unhelpful runtime error rather than reporting a failed assertion. Assert the expected length or element presence before reading index 0.

As per coding guidelines, array values accessed by index must be checked.

🤖 Prompt for 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.

In `@test/unit/server/utils/readme.spec.ts` around lines 94 - 104, Update the test
around renderReadmeHtml to assert that each result.playgroundLinks contains an
element before accessing index 0. Add the presence or expected-length assertion
for both result1 and result2, then retain the existing provider assertions
without non-null assertions.

Source: Coding guidelines

@nikelborm nikelborm Jul 25, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The same feedback applies to the test, which was used as a base for this addition. Polishing the tests regarding this issue needs refactoring that is outside the scope of this PR.

@coderabbitai coderabbitai Bot Jul 25, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@nikelborm Understood. Keeping this focused on Effect.ts playground support is reasonable; the assertion-pattern cleanup can be handled consistently in a separate test refactor.

Would you like me to open a follow-up issue for it?
🐇💭


it('extracts Replit links', async () => {
const markdown = `[Repl](https://replit.com/@user/project)`
const result = await renderReadmeHtml(markdown, 'test-pkg')
Expand Down
1 change: 1 addition & 0 deletions uno.theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ export const theme = {
provider: {
stackblitz: '#1389FD',
codesandbox: '#FFCC00',
effect: '#000000',
codepen: '#47CF73',
replit: '#F26207',
gitpod: '#FFAE33',
Expand Down
Loading