feat: add URL hash support for loading SB3 projects from external URLs

[takaokouji]

Summary

This PR implements the ability to load SB3 project files directly from external URLs specified in the hash fragment of the page URL, addressing issue #390.

Users can now access SB3 projects using URLs like:

https://smalruby.app#https://drive.google.com/uc?export=download&id=1YfxFO6KFdOpdEliSwvKNFZXrkVPlTyZO

Implementation Details

Files Changed

• src/lib/hash-parser-hoc.jsx: Extended hash parsing to detect URLs starting with http:// or https://
• src/lib/project-fetcher-hoc.jsx: Added URL-based project fetching functionality

Key Features

1. URL Detection: Automatically detects when hash contains a URL vs numeric project ID
2. Direct Download: Uses fetch() API to download SB3 files as ArrayBuffer
3. Project Loading: Utilizes existing vm.loadProject() method (same as file upload feature)
4. Title Extraction: Intelligently extracts project titles from URLs
5. Google Drive Support: Special handling for Google Drive share URLs
6. Backward Compatibility: Maintains 100% compatibility with existing numeric project IDs (#123)

Implementation Approach

// Hash parsing logic
if (hash.match(/^https?:\/\//)) {
    // URL case: set URL as projectId
    this.props.setProjectId(hash);
} else {
    // Traditional numeric ID handling
    const hashMatch = hash.match(/^(\d+)$/);
    const hashProjectId = hashMatch === null ? defaultProjectId : hashMatch[1];
    this.props.setProjectId(hashProjectId.toString());
}

// URL-based project fetching
async fetchProjectFromUrl(projectUrl, loadingState) {
    const response = await fetch(projectUrl);
    const arrayBuffer = await response.arrayBuffer();
    await this.props.vm.loadProject(arrayBuffer);
    // ... title extraction and completion handling
}

Usage Examples

Google Drive Integration

https://smalruby.app#https://drive.google.com/uc?export=download&id=FILE_ID

Direct File URLs

https://smalruby.app#https://example.com/path/to/project.sb3

Backward Compatibility (unchanged)

https://smalruby.app#123  // Still works as before

Error Handling

• Network Errors: Proper handling of fetch failures
• Invalid Files: Graceful handling of non-SB3 or corrupted files
• User Feedback: Integration with existing error notification system
• Fallback: Maintains existing error handling patterns

Testing Results

Lint Check

npm run test:lint
# ✅ All lint checks passed

Unit Tests

npm run test:unit -- --testPathPattern='hash-parser|project-fetcher'
# ✅ All existing tests passed
# ✅ No regressions detected

Manual Testing Scenarios

• Loading projects via Google Drive URLs
• Loading projects via direct file URLs
• Backward compatibility with numeric IDs
• Error handling for invalid URLs
• Error handling for non-existent files
• Project title extraction and display

Technical Notes

Dependencies

• No new dependencies added
• Utilizes existing fetch() API (modern browsers)
• Leverages existing VM infrastructure

Performance

• Minimal overhead for existing numeric ID workflow
• Efficient URL detection using regex patterns
• Reuses existing project loading pipeline

Security

• Uses standard fetch() with proper error handling
• No execution of downloaded content beyond VM's built-in SB3 parsing
• Respects CORS policies of target URLs

Addresses Issue

Fixes #390 - Enable loading SB3 projects from external URLs in hash fragment

This implementation provides a seamless way for educators to share Smalruby projects stored in Google Drive or other cloud services, improving the educational workflow significantly.

Breaking Changes

None. This is a fully backward-compatible enhancement.

🤖 Generated with Claude Code

Co-Authored-By: Claude noreply@anthropic.com