Add Pyodide version selector to REPL

[simonw]

Add a Pyodide version selection to pyodide-repl.html

Summary

This PR adds a version selector dropdown to the Pyodide REPL interface, allowing users to choose between different Pyodide versions (0.24.1 through 0.27.5). The selected version is persisted via URL parameters and used to dynamically load the appropriate Pyodide runtime.

Key Changes

• UI Enhancement: Added a version picker dropdown in the header next to the "Pyodide REPL" title with styling that matches the existing design system
• Version Selection: Implemented dropdown with 14 available Pyodide versions, defaulting to v0.25.1
• URL Parameter Support: Version selection is persisted via the v query parameter, allowing users to share links with specific versions
• Dynamic Loading: Modified the Pyodide initialization to use the selected version from the dropdown instead of a hardcoded version
• Styling: Added CSS for the version picker container, select element, and focus states using existing CSS variables

Implementation Details

• The version selector reads from the URL on page load and updates the URL when changed, triggering a page reload with the new version
• CSS escaping is used when validating URL parameters to prevent injection issues
• The loading text now displays the selected version dynamically
• The CDN URL is constructed using the selected version to load the correct Pyodide runtime

https://claude.ai/code/session_01G5zh3gpcGirvwjG1qeU9LQ

[claude]

Claude finished @simonw's task —— View job

---

PR Review: Pyodide Version Selector

I've thoroughly reviewed this PR and overall it's a well-implemented feature with clean code. Here's my comprehensive analysis:

Review Progress:

• Read the modified pyodide-repl.html file to understand the implementation
• Analyze JavaScript code for security vulnerabilities (URL parameter handling)
• Review CSS implementation and styling approach
• Check for potential performance issues
• Evaluate code quality and best practices
• Provide comprehensive review feedback via GitHub comment

✅ Strengths

Security: The implementation properly handles URL parameters with CSS.escape() at pyodide-repl.html:288, which prevents XSS attacks through malformed version parameters.

UX/UI: The version picker integrates seamlessly with the existing design system using consistent CSS variables and styling patterns. The layout is well-structured with flexbox for responsive behavior.

Code Quality: Clean, readable JavaScript with good separation of concerns. The version selection logic is straightforward and well-implemented.

Functionality: URL parameter persistence works correctly with proper URL manipulation using the URL API.

🔍 Areas for Improvement

1. Version Validation Logic

The current validation at pyodide-repl.html:288 only checks if an option exists in the DOM:

if (urlVersion && versionSelect.querySelector(`option[value="${CSS.escape(urlVersion)}"]`)) {

Issue: This relies on DOM structure for validation. Consider adding explicit version validation:

const VALID_VERSIONS = ['0.24.1', '0.25.0', '0.25.1', /* ... */];
if (urlVersion && VALID_VERSIONS.includes(urlVersion)) {

2. Error Handling for Version Loading

The current error handling at pyodide-repl.html:563-566 shows a generic message. Consider adding version-specific error handling:

} catch (e) {
    loadingText.textContent = `Failed to load Pyodide v${selectedVersion}: ${e.message}`;
    console.error('Pyodide loading error:', e);
}

3. Loading State Management

The loading text updates at pyodide-repl.html:513, but there's no indication if a specific version fails to load. Consider adding fallback logic or clearer error states.

🚀 Performance Considerations

Good: The implementation doesn't introduce performance overhead. Version selection triggers a page reload, which is appropriate for this use case since Pyodide needs to be reinitialized with a different version.

Minor: The version list is hardcoded in HTML. For future scalability, consider loading available versions dynamically, but this isn't necessary for the current scope.

🧪 Test Coverage

Missing: No automated tests are present for the new functionality. Consider adding:

• Unit tests for URL parameter handling
• Integration tests for version selection workflow
• Tests for edge cases (invalid versions, malformed URLs)

However, given this is a single HTML file tool, manual testing may be sufficient.

📋 Minor Suggestions

1. Documentation: Consider adding inline comments explaining the version validation logic
2. Accessibility: The version selector could benefit from aria-label for screen readers
3. Version Ordering: Versions are listed newest-first, which is good UX

🎯 Verdict

This is a solid, production-ready implementation. The code demonstrates good security practices, clean architecture, and thoughtful UX design. The suggested improvements are minor enhancements rather than critical issues.

Recommendation: ✅ Approve - This PR is ready to merge with the current implementation.

---

[cloudflare-workers-and-pages]

Deploying tools with    Cloudflare Pages

Latest commit:	db70dfe
Status:	✅  Deploy successful!
Preview URL:	https://7ebbff98.tools-b1q.pages.dev
Branch Preview URL:	https://claude-add-pyodide-version-s.tools-b1q.pages.dev

View logs

[simonw]