Skip to content

Conversation

@Victorcorcos
Copy link
Contributor

Summary

This PR adds a comprehensive web example interface that demonstrates the parsec_web WebAssembly integration with a polished user experience with improved loading UI.

Key Features

  • Enhanced Loading Experience: Custom loading spinner with progress indicator showing "Loading Parsec..." and "Initializing WebAssembly"
  • Modern UI Design: Gradient background with clean, responsive styling using system fonts
  • WebAssembly Integration: Proper ES6 module loading for parsec-web JavaScript wrapper
  • Flutter Bootstrap: Optimized Flutter web initialization sequence with proper lifecycle management
  • Error Handling: Graceful fallback when WASM modules are unavailable with console warnings

Technical Implementation

  • Uses <script type="module"> for parsec-web JavaScript wrapper to support ES6 exports
  • Implements proper WASM initialization checking (window.parsecWebReady) before Flutter app startup
  • Provides visual feedback during both WebAssembly and Flutter engine loading phases
  • Follows Flutter web best practices for production deployments with proper service worker handling
  • Dynamic WASM module imports handled by the wrapper during initialization

File Structure

parsec/example/web/index.html
├── Meta tags and iOS app configuration
├── Custom CSS with loading spinner animation
├── Parsec WebAssembly integration scripts
└── Flutter web bootstrap with proper initialization

Test Plan

To verify this enhancement works correctly:

  1. Generate WASM files: cd parsec_web && dart bin/generate.dart
  2. Launch web demo: cd parsec/example && flutter run -d chrome
  3. Verify loading sequence:
    • Loading spinner should appear immediately
    • "Loading Parsec..." and "Initializing WebAssembly" text visible
    • Console should show either "✅ Parsec WebAssembly library loaded successfully" or "⚠️ Parsec WebAssembly library not found"
    • Loading indicator disappears when Flutter app starts
  4. Test responsiveness: Resize browser window to verify responsive design
  5. Verify WebAssembly integration: Use parsec evaluation functions in the demo

Dependencies

This enhancement depends on the parsec_web package structure with:

  • packages/parsec_web/parsec-web/js/equations_parser_wrapper.js (ES6 module)
  • WASM files generated by dart bin/generate.dart

Breaking Changes

None. This is a new file that enhances the existing web example without affecting other platforms or core functionality.

@Victorcorcos Victorcorcos self-assigned this Sep 7, 2025
@Victorcorcos Victorcorcos added the enhancement New feature or request label Sep 7, 2025
@Victorcorcos Victorcorcos merged commit d060d4e into oxeanbits:main Sep 7, 2025
1 check failed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant