| .. | ||
| src | ||
| config.toml | ||
| README.md | ||
| .. | ||
| src | ||
| config.toml | ||
| README.md | ||
bash\n curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh\n \n\n2. wasm-pack:\n\n bash\n cargo install wasm-pack\n \n\n3. WebAssembly target (usually included with wasm-pack):\n\n bash\n rustup target add wasm32-unknown-unknown\n \n\n## Building the Demo\n\n1. Development build (no WebAssembly compilation):\n\n bash\n cd /path/to/web-builder-framework\n ./wb page build wasm-demo --dev\n \n\n2. Production build (with WebAssembly compilation):\n\n bash\n ./wb page build wasm-demo --prod\n \n\n3. Development server (with hot-reload):\n\n bash\n ./wb page dev wasm-demo --watch --port 8080\n \n\n## Project Structure\n\nplaintext\npages/wasm-demo/\n├── config.toml # Page configuration with WASM enabled\n├── src/\n│ ├── index.html # Main HTML page\n│ ├── assets/\n│ │ ├── css/\n│ │ │ ├── main.css # Main styles\n│ │ │ └── wasm-ui.css # WASM-specific UI components\n│ │ └── js/\n│ │ ├── wasm-interface.js # WASM integration layer\n│ │ └── main.js # Application logic and demos\n│ └── wasm/\n│ └── compute/ # Rust WebAssembly module\n│ ├── Cargo.toml # Rust dependencies\n│ └── src/\n│ └── lib.rs # WASM implementation\n└── dist/ # Built output (generated)\n ├── index.html\n ├── assets/\n │ ├── css/main.min.css\n │ └── js/main.min.js\n └── wasm/ # WebAssembly binaries and loader\n ├── compute.wasm\n └── wasm-loader.js\n\n\n## Implementation Details\n\n### WebAssembly Module (Rust)\n\nThe compute module provides:\n\n- fibonacci(n): Fast Fibonacci calculation\n- is_prime(n): Primality testing with optimizations\n- matrix_multiply(a, b, size): Matrix multiplication\n- benchmark_computation(iterations): Performance benchmark\n- greet(name): Simple demonstration function\n\n### JavaScript Interface\n\nThe wasm-interface.js provides:\n\n- Automatic WASM module loading with fallbacks\n- Performance measurement wrapper functions\n- JavaScript equivalents for comparison\n- Error handling and browser compatibility\n\n### CSS Styling\n\n- Modern gradient backgrounds and animations\n- Responsive grid layout for demo sections\n- Performance result visualization\n- Loading states and error messages\n\n## Browser Compatibility\n\n- WebAssembly: Modern browsers (Chrome 57+, Firefox 52+, Safari 11+)\n- Fallback: JavaScript implementations work in all browsers\n- Features: ES2018+ with fallbacks for older browsers\n\n## Performance Tips\n\n1. Matrix Size: Start with smaller matrices (50x50) and increase gradually\n2. Fibonacci: Numbers above 45 may take significant time in JavaScript\n3. Prime Testing: Large primes (>10^9) show the biggest performance gains\n4. Benchmark: Adjust iterations based on your device performance\n\n## Troubleshooting\n\n### WebAssembly Not Loading\n\n1. Check browser console for errors\n2. Ensure wasm-pack is installed: cargo install wasm-pack\n3. Verify the build completed: Check for dist/wasm/compute.wasm\n4. Try building with: ./wb page build wasm-demo --prod --verbose\n\n### Build Errors\n\n1. Rust not found: Install Rust toolchain\n2. wasm-pack not found: Install with cargo install wasm-pack\n3. Permission errors: Check write permissions in the project directory\n\n### Performance Issues\n\n1. Slow compilation: Use --dev flag for faster builds during development\n2. Large WASM file: Enable optimization with use_wasm_opt = true in config\n3. Memory issues: Reduce matrix sizes or iteration counts\n\n## Extending the Demo\n\n### Adding New Functions\n\n1. Add Rust function to src/wasm/compute/src/lib.rs:\n\n rust\n #[wasm_bindgen]\n pub fn my_function(input: u32) -> u32 {\n // Your implementation\n }\n \n\n2. Add JavaScript wrapper to wasm-interface.js:\n\n javascript\n myFunction(input) {\n return this.module.exports.my_function(input);\n }\n \n\n3. Add UI controls and demo logic to main.js\n\n### Supporting Other Languages\n\nThe framework supports:\n\n- C/C++: Using Emscripten (emcc)\n- AssemblyScript: Using asc compiler\n- Go: Using Go's built-in WASM support\n\nUpdate the config.toml to add modules in different languages:\n\ntoml\n[wasm]\nmodules = [\n { name = "compute", source = "compute/src/lib.rs", lang = "rust" },\n { name = "graphics", source = "graphics/main.c", lang = "c" },\n { name = "utils", source = "utils/index.ts", lang = "assemblyscript" }\n]\n\n\n## Learn More\n\n- WebAssembly Official Site\n- Rust and WebAssembly Book\n- wasm-pack Documentation\n- Web Builder Framework Documentation