Enhancing JavaScript Applications with WebAssembly Integration

title: Enhancing JavaScript Applications with WebAssembly Integration
description: Techniques for integrating WebAssembly to execute high-performance code alongside JavaScript in web applications.
category: JavaScript Cursor Rules
rules:
  - id: wasm-integration-best-practices
    description: >
      Ensure efficient integration of WebAssembly modules within JavaScript applications to enhance performance and maintain code readability.
    patterns:
      - pattern: |
          fetch('module.wasm')
            .then(response => response.arrayBuffer())
            .then(bytes => WebAssembly.instantiate(bytes))
            .then(results => {
              // Access WebAssembly exports
              let instance = results.instance;
              console.log(instance.exports.myFunction());
            });
        description: >
          Load and instantiate WebAssembly modules asynchronously to prevent blocking the main thread and ensure a responsive user interface.
        references:
          - url: https://appjot.com/2023/11/10/webassembly-boosting-web-performance/
            description: Integrating WebAssembly with JavaScript
      - pattern: |
          const memory = new WebAssembly.Memory({ initial: 256, maximum: 256 });
          const importObject = { env: { memory } };
          
          WebAssembly.instantiate(bytes, importObject).then(results => {
            // Now WebAssembly and JavaScript share the same memory
          });
        description: >
          Share memory between WebAssembly and JavaScript using ArrayBuffer to facilitate efficient data exchange without unnecessary copying.
        references:
          - url: https://appjot.com/2023/11/10/webassembly-boosting-web-performance/
            description: Sharing Memory and Data Types
      - pattern: |
          const importObject = {
            js: {
              log: arg => console.log(arg)
            }
          };
          
          WebAssembly.instantiate(bytes, importObject).then(results => {
            // WebAssembly can now use the imported "log" function
          });
        description: >
          Import JavaScript functions into WebAssembly modules to enable seamless interaction and leverage existing JavaScript functionalities.
        references:
          - url: https://appjot.com/2023/11/10/webassembly-boosting-web-performance/
            description: Calling JavaScript Functions from WebAssembly
      - pattern: |
          const worker = new Worker('worker.js');
          worker.onmessage = function(e) {
            console.log('Result from WebAssembly:', e.data);
          };
          worker.postMessage({ x: 10, y: 20 });
          
          // In worker.js
          WebAssembly.instantiateStreaming(fetch('my_module.wasm'))
            .then(result => {
              const { heavyComputation } = result.instance.exports;
          
              self.onmessage = function(e) {
                const result = heavyComputation(e.data.x, e.data.y);
                self.postMessage(result);
              };
            });
        description: >
          Utilize Web Workers to run WebAssembly code for compute-intensive tasks, ensuring that the main thread remains unblocked and the user interface remains responsive.
        references:
          - url: https://dev.to/aaravjoshi/webassembly-and-javascript-supercharge-your-web-apps-with-this-powerful-duo-3ccn
            description: Using WebAssembly in a Web Worker
      - pattern: |
          import React, { useState, useEffect } from 'react';
          
          const MyComponent = () => {
            const [wasmModule, setWasmModule] = useState(null);
          
            useEffect(() => {
              const loadWasm = async () => {
                try {
                  const wasm = await import('path/to/module.wasm');
                  setWasmModule(wasm);
                } catch (err) {
                  console.error('Failed to load WebAssembly module:', err);
                }
              };
              loadWasm();
            }, []);
          
            return (
              <div>
                {wasmModule ? (
                  <p>WebAssembly Module Loaded!</p>
                ) : (
                  <p>Loading WebAssembly...</p>
                )}
              </div>
            );
          };
          
          export default MyComponent;
        description: >
          Implement lazy loading of WebAssembly modules in React components to reduce initial load times and improve application performance.
        references:
          - url: https://appjot.com/2023/11/12/webassembly-web-dev-future-2024/
            description: Example: Lazy Loading a WebAssembly Module in React