Add wasm support #127
Merged
Add wasm support #127
+764
−20
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
Port WASM infrastructure from travels project to enable building the intro executable for web browsers using Emscripten. Core WASM infrastructure: - cmake/Emscripten.cmake: Emscripten/WASM build configuration - Detects Emscripten builds and disables incompatible features - Configures pthread support (required by FTXUI) - Provides myproject_configure_wasm_target() function - Optional resource embedding support via INTRO_RESOURCES_DIR - web/shell.html: Custom HTML shell with xterm.js terminal - Dark-themed terminal UI with WebGL rendering - Handles stdin/stdout/stderr buffering for WASM - Supports ?version URL parameter - web/coi-serviceworker.min.js: Service worker for COOP/COEP headers - Required for SharedArrayBuffer/pthread support on GitHub Pages - .github/workflows/wasm.yml: CI/CD workflow - Builds WASM on all CI runs - Deploys to GitHub Pages for main/develop branches and tags CMake integration: - CMakeLists.txt: Include Emscripten.cmake before ProjectOptions - ProjectOptions.cmake: Add EMSCRIPTEN detection to disable sanitizers - src/ftxui_sample/CMakeLists.txt: Apply WASM configuration to intro Critical bug fixes included: - cmake/Hardening.cmake: Fix CMake list handling and global flag propagation (proper add_compile_options() usage) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Support any URL parameter as command-line argument - Smart prefix detection: single-char → -, multi-char → -- - Handle both boolean flags and parameters with values - Add visible usage guide on web page explaining conversion rules Examples: ?version → --version ?v → -v ?file=test.txt → --file test.txt ?verbose&config=app.cfg → --verbose --config app.cfg 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Update xterm from 5.3.0 to 6.0.0 - Update addon-fit from 0.8.0 to 0.10.0 - Update addon-webgl from 0.16.0 to 0.18.0 - Use new @xterm scoped package names for addons 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Fixes multiple critical issues that prevented xterm 6.0 from working:
1. Package naming: Use @xterm/xterm instead of deprecated xterm package
- Changed CSS URL to @xterm/xterm@6.0.0/css/xterm.css
- Changed import map to use @xterm/xterm
- Changed import statement to match
2. Module initialization timing: Define Module synchronously
- Module must exist BEFORE Emscripten's {{{ SCRIPT }}} loads
- ES modules execute asynchronously, causing "Module should not be
replaced during async compilation" error
- Solution: Define Module in regular <script> tag, then ES module
hooks into Module.preRun/postRun arrays
3. Add FS to EXPORTED_RUNTIME_METHODS
- Without FS export, FS.init() fails
- Emscripten falls back to window.prompt() for stdin
- Added 'FS' to exported methods in Emscripten.cmake
Structure:
- <script>: Define Module synchronously
- <script type="importmap">: Define ES module imports
- <script type="module">: Load xterm 6.0, hook into Module lifecycle
- {{{ SCRIPT }}}: Emscripten code (uses existing Module)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Convert hardcoded shell.html to CMake template (shell_template.html.in) - Add per-target customization via TITLE and DESCRIPTION parameters - Generate target-specific shell files in build/web/<target>_shell.html - Fix @ symbol escaping in npm CDN URLs using @at@ placeholder - Update myproject_configure_wasm_target() to accept optional parameters This enables multiple WASM executables in one project, each with customized HTML pages and titles. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Create web-dist target that collects all WASM artifacts into organized structure
- Add index_template.html.in for landing page with app cards
- Register WASM targets globally with title and description metadata
- Implement myproject_create_web_dist() function to:
- Generate index.html from template with links to all apps
- Copy each target's artifacts to subdirectories (intro/, etc.)
- Rename target.html to index.html for clean URLs
- Update CI workflow to build web-dist instead of individual targets
- Make web-dist part of ALL target so it builds by default
Directory structure:
web-dist/
index.html (landing page)
coi-serviceworker.min.js
intro/
index.html
intro.js
intro.wasm
coi-serviceworker.min.js
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## develop #127 +/- ##
===========================================
+ Coverage 20.16% 20.50% +0.33%
===========================================
Files 5 5
Lines 238 239 +1
Branches 111 108 -3
===========================================
+ Hits 48 49 +1
- Misses 182 184 +2
+ Partials 8 6 -2
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Phase 1: Critical Fixes - Remove redundant -fwasm-exceptions flag (already in global CMAKE_CXX_FLAGS) - Fix HTML injection vulnerability by escaping special characters in titles/descriptions - Absolutify resource paths to prevent Emscripten path resolution issues - Ensure service worker copied to both individual targets and web-dist Phase 2: Configuration Improvements - Add configurable WASM runtime parameters (memory, thread pool, asyncify stack) - MYPROJECT_WASM_INITIAL_MEMORY (default: 32MB) - MYPROJECT_WASM_PTHREAD_POOL_SIZE (default: 4) - MYPROJECT_WASM_ASYNCIFY_STACK_SIZE (default: 64KB) - Replace INTRO_RESOURCES_DIR with per-target RESOURCES_DIR parameter - Make each target directory fully standalone with its own service worker Benefits: - Users can tune WASM performance without editing CMake files - HTML injection vulnerability fixed - Resource paths work correctly with relative paths - Both individual targets and web-dist deployments are self-contained - More flexible per-target resource embedding 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Reduces code duplication and improves maintainability while preserving all functionality. Changes include: JavaScript simplifications (web/shell_template.html.in): - Remove 39 lines of duplicate URL parameter documentation - Consolidate error handlers with shared showError() helper - Extract buffer writer factory to eliminate stdout/stderr duplication - Simplify URL parameter parsing using forEach API - Total reduction: ~70 lines CMake simplifications (cmake/Emscripten.cmake): - Add reusable escape_html() helper function - Loop sanitizer configuration instead of 5 separate set() calls - Use string(APPEND) for compiler flags - Use escape_html() helper to eliminate duplicate escaping logic - Remove redundant else clause for WASM_BUILD flag - Remove redundant directory creation (configure_file creates parents) - Change template missing warning to fatal error (fail fast) - Total reduction: ~12 lines Overall impact: ~82 fewer lines, improved readability, easier maintenance. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Replace direct CMAKE_CXX_FLAGS/CMAKE_C_FLAGS manipulation with add_compile_options() and add_link_options(), which is more idiomatic modern CMake and handles flag propagation correctly. Both -pthread and -fwasm-exceptions need to be specified at compile and link time for Emscripten builds. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Eliminates code duplication and improves maintainability:
- Define common web asset paths as constants at top of file
(MYPROJECT_WEB_DIR, MYPROJECT_COI_WORKER, etc.) instead of
duplicating "${CMAKE_SOURCE_DIR}/web/..." throughout
- Loop static analysis tool options (CLANG_TIDY, CPPCHECK,
WARNINGS_AS_ERRORS) instead of three separate set() calls
- Use path constants consistently in both myproject_configure_wasm_target
and myproject_create_web_dist functions
- Remove outdated comment reference to old line number
- Add clarifying comment about WASM artifact files being copied
Net result: 3 fewer lines, single source of truth for file paths,
more consistent code structure.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Note that main deploys to root, develop to /develop/, and tags to /tagname/ subdirectories. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Include links to both main and develop deployments so users can see both stable and development versions of the demo. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
No description provided.