Skip to content

Conversation

@Victorcorcos
Copy link
Contributor

@Victorcorcos Victorcorcos commented Sep 7, 2025

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.

…m Emscripten run

Remove **/wasm/** from .gitignore + Send javascript file resulted from Emscripten run
…n; export exception symbol

- README: add Web testing commands and CI notes
- pubspec: mention Web platform and add dev dependency on web
- platform_interface: export ParsecEvalException for consumers

Improves discoverability and setup for Web testing and consumption.
- Covers arithmetic, trig, hyperbolic, logs/exp, strings, booleans, comparisons, ternary, advanced functions, and performance
- Serves as the primary WASM-backed test harness for Chrome

Ensures broad coverage of the web plugin behavior.
Replace shell script approach with native Dart command for generating
WebAssembly files. This provides a more maintainable, cross-platform
solution that integrates better with Flutter development workflows.

- Add parsec_web/bin/generate.dart with comprehensive WASM generation
- Configure executable in pubspec.yaml for easy access
- Include Emscripten availability checking and error handling
- Provide user-friendly output with progress indicators and next steps
- Support building from 38 C++ source files to single WASM bundle
Modernize continuous integration workflows to use the new Dart-based
WebAssembly generation command instead of shell scripts.

- Replace shell script calls with 'dart bin/generate.dart' in web_tests.yml
- Remove redundant WebAssembly build step to avoid duplication
- Add parsec_web analysis step to flutter_ci.yml for complete coverage
- Maintain all existing test functionality while improving maintainability
Remove setup_web_assets.sh script that is no longer needed after
implementing the new Dart-based WebAssembly generation command.

The new 'dart bin/generate.dart' command provides all the functionality
of this script with better error handling, cross-platform support,
and integration with Flutter development workflows.
Update all documentation to reflect the new Dart-based WebAssembly
generation workflow, replacing references to obsolete shell scripts.

- Replace './setup_web_assets.sh' with 'dart bin/generate.dart' in README
- Add comprehensive web platform development section to CLAUDE.md
- Include Emscripten installation instructions and development workflow
- Update example README with clear native vs web platform instructions
- Improve troubleshooting sections with modern command references
@Victorcorcos Victorcorcos changed the title feat: enhance web example with improved loading UI and WebAssembly integration DIGIT-2292 Enhance the web index html from parsec flutter Sep 7, 2025
@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 3dd5ae2 into oxeanbits:main Sep 7, 2025
3 checks passed
Victorcorcos added a commit to Victorcorcos/parsec_flutter that referenced this pull request Sep 7, 2025
The enhanced index.html with loading UI and WebAssembly integration
has been moved to PR oxeanbits#35 to keep this PR focused on the core
Dart-based WASM generation infrastructure.
Victorcorcos added a commit to Victorcorcos/parsec_flutter that referenced this pull request Sep 7, 2025
Victorcorcos added a commit that referenced this pull request Sep 7, 2025
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