feat: enhance URL loader with Google Drive support and improved UI #412
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Implements support for loading Smalruby projects from Google Drive URLs in addition to existing Scratch project URLs: **New Features:** - Google Drive URL pattern support: - https://drive.google.com/file/d/FILE_ID/view - https://drive.google.com/open?id=FILE_ID - https://drive.google.com/uc?export=download&id=FILE_ID **Technical Implementation:** - Updated URL parser with Google Drive detection functions - Enhanced URL Loader HOC to handle both Scratch and Google Drive URLs - Google Drive projects loaded as SB3 files via CORS proxy - Scratch projects continue to work with JSON format as before **UI Improvements:** - Updated placeholder text to show both URL types - Updated prompt message to be more generic - Enhanced validation messages for both URL types **Localization:** - Updated all locale files (en.js, ja.js, ja-Hira.js) - Added Google Drive support to error messages and UI text **File Loading Logic:** - Scratch URLs: JSON format via scratch-api-proxy (existing) - Google Drive URLs: SB3 format via CORS proxy (new) - Uses https://api.smalruby.app/cors-proxy for Google Drive access This enhancement allows users to easily load and share Smalruby projects stored in Google Drive, expanding the URL loader functionality while maintaining full backward compatibility. Resolves: #411 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
Fixed "Expected a function" error by updating bindAll to reference the correct method names after refactoring: - loadProjectFromUrl -> loadScratchProjectFromUrl - Added loadGoogleDriveProjectFromUrl and clearLoadingReferences This resolves the runtime error preventing the URL loader from initializing properly. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
Fixed React warnings about unknown event handlers and props being passed to DOM elements by properly filtering out all URL loader HOC-specific props in the render method: - closeUrlLoaderModal -> closeUrlLoaderModalProp - onLoadedProject -> onLoadedProjectProp - openUrlLoaderModal -> openUrlLoaderModalProp - setProjectId -> setProjectIdProp - Plus other HOC-specific props (intl, vm, onError, etc.) This prevents the props from being spread to DOM elements where they would cause React warnings about unknown properties. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
Fixed CloudManager error "Cannot read properties of undefined (reading 'on')"
by explicitly passing the vm prop to WrappedComponent. The CloudManager
component requires the vm prop to register event listeners in its
constructor, but it was being filtered out during prop destructuring.
Changes:
- Added explicit vm={vm} prop to WrappedComponent in render method
- CloudManager can now access vm.on() for event listener registration
- Maintains prop filtering to prevent React warnings while ensuring
required props reach child components
This resolves the TypeError that prevented CloudManager from initializing
properly and causing the application to crash.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <[email protected]>
- Remove prompt text "Enter a project URL:" to simplify the modal - Add dedicated URL examples section below input field - Update placeholder text to be shorter and clearer - Clean up unused CSS styles and internationalization messages 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
github-actions bot
pushed a commit
that referenced
this pull request
Sep 18, 2025
…e-drive-url-support feat: enhance URL loader with Google Drive support and improved UI
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR enhances the URL loader functionality with comprehensive Google Drive URL support and improves the modal UI for better user experience.
Key Features Added
Implementation Details
Google Drive URL Support
url-parser.jswith functions to detect and extract Google Drive file IDshttps://drive.google.com/file/d/{file_id}/viewhttps://drive.google.com/file/d/{file_id}/view?usp=sharinghttps://drive.google.com/file/d/{file_id}/view?usp=drive_linkhttps://api.smalruby.app/cors-proxy) for secure file accessURL Loader Modal UI Improvements
Technical Enhancements
URL Examples Supported
Scratch Projects
Google Drive Files
Testing
Files Changed
src/components/url-loader-modal/url-loader-modal.jsx- Enhanced modal componentsrc/components/url-loader-modal/url-loader-modal.css- Updated styling for examples sectionsrc/lib/url-loader-hoc.jsx- Added Google Drive loading logic and fixed prop issuessrc/lib/url-parser.js- New URL validation and parsing utilitiessrc/locales/*.js- Updated internationalization messagesBreaking Changes
None. This is a backward-compatible enhancement that extends existing functionality.
Related Issues
Closes #411
🤖 Generated with Claude Code