How to Use WebAssembly with JavaScript - Complete Guide

      // Enhanced WASM module loader with error handling
class WASMLoader {
  constructor() {
    this.modules = new Map();
  }

  async loadModule(name, wasmPath, imports = {}) {
    try {
      if (this.modules.has(name)) {
        return this.modules.get(name);
      }

      const module = await WebAssembly.instantiateStreaming(
        fetch(wasmPath),
        { env: imports }
      );

      this.modules.set(name, module);
      return module;
    } catch (error) {
      console.error(`Failed to load WASM module ${name}:`, error);
      throw error;
    }
  }

  async callFunction(moduleName, functionName, ...args) {
    const module = this.modules.get(moduleName);
    if (!module) {
      throw new Error(`Module ${moduleName} not loaded`);
    }

    return module.instance.exports[functionName](...args);
  }
}

// Usage example
const wasmLoader = new WASMLoader();

async function initializeCalculator() {
  await wasmLoader.loadModule('math', 'calculator.wasm');
  
  const result = await wasmLoader.callFunction('math', 'fibonacci', 10);
  console.log(`Fibonacci(10) = ${result}`);
}
    

      class WASMImageProcessor {
  constructor() {
    this.module = null;
    this.memory = null;
    this.initialized = false;
  }

  async initialize() {
    this.module = await WebAssembly.instantiateStreaming(
      fetch('image_processor.wasm'),
      {
        env: {
          abort: () => console.error('WASM abort called'),
          memory: new WebAssembly.Memory({ initial: 256 })
        }
      }
    );

    this.memory = this.module.instance.exports.memory;
    this.initialized = true;
  }

  async processImage(imageData, filterType = 'blur') {
    if (!this.initialized) await this.initialize();

    const { width, height, data } = imageData;
    const totalPixels = width * height * 4; // RGBA

    // Allocate memory in WASM
    const inputPtr = this.module.instance.exports.allocate(totalPixels);
    const outputPtr = this.module.instance.exports.allocate(totalPixels);

    try {
      // Copy image data to WASM memory
      const wasmMemory = new Uint8ClampedArray(this.memory.buffer);
      wasmMemory.set(data, inputPtr);

      // Apply filter
      const filterFunctions = {
        blur: 'apply_blur_filter',
        sharpen: 'apply_sharpen_filter',
        edge_detect: 'apply_edge_detection'
      };

      const functionName = filterFunctions[filterType];
      if (!functionName) {
        throw new Error(`Unknown filter type: ${filterType}`);
      }

      this.module.instance.exports[functionName](
        inputPtr, outputPtr, width, height
      );

      // Copy processed data back to JavaScript
      const processedData = wasmMemory.slice(outputPtr, outputPtr + totalPixels);
      
      return new ImageData(processedData, width, height);
    } finally {
      // Clean up allocated memory
      this.module.instance.exports.deallocate(inputPtr);
      this.module.instance.exports.deallocate(outputPtr);
    }
  }
}

// Usage with Canvas API
async function applyImageFilter(canvas, filterType) {
  const ctx = canvas.getContext('2d');
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  
  const processor = new WASMImageProcessor();
  const processedData = await processor.processImage(imageData, filterType);
  
  ctx.putImageData(processedData, 0, 0);
}
    

      class WASMAudioProcessor extends AudioWorkletProcessor {
  constructor() {
    super();
    this.wasmModule = null;
    this.inputBuffer = null;
    this.outputBuffer = null;
    this.bufferSize = 128;
    
    this.initializeWASM();
  }

  async initializeWASM() {
    try {
      this.wasmModule = await WebAssembly.instantiateStreaming(
        fetch('audio_processor.wasm'),
        {
          env: {
            memory: new WebAssembly.Memory({ initial: 1 }),
            consoleLog: (msg) => console.log(msg)
          }
        }
      );

      // Allocate persistent buffers
      const memory = this.wasmModule.instance.exports.memory;
      this.inputBuffer = this.wasmModule.instance.exports.allocate_buffer(this.bufferSize);
      this.outputBuffer = this.wasmModule.instance.exports.allocate_buffer(this.bufferSize);
      
      this.port.postMessage({ type: 'initialized' });
    } catch (error) {
      console.error('WASM audio processor initialization failed:', error);
    }
  }

  process(inputs, outputs, parameters) {
    if (!this.wasmModule) return true;

    const input = inputs[0];
    const output = outputs[0];

    if (input.length > 0 && output.length > 0) {
      const inputChannel = input[0];
      const outputChannel = output[0];

      // Copy input to WASM memory
      const wasmMemory = new Float32Array(this.wasmModule.instance.exports.memory.buffer);
      wasmMemory.set(inputChannel, this.inputBuffer / 4);

      // Process audio in WASM
      this.wasmModule.instance.exports.process_audio(
        this.inputBuffer,
        this.outputBuffer,
        inputChannel.length,
        parameters.gain?.[0] || 1.0,
        parameters.frequency?.[0] || 440.0
      );

      // Copy processed audio back
      outputChannel.set(
        wasmMemory.slice(
          this.outputBuffer / 4,
          (this.outputBuffer / 4) + outputChannel.length
        )
      );
    }

    return true;
  }
}

// Register the processor
registerProcessor('wasm-audio-processor', WASMAudioProcessor);

// Usage in main thread
async function setupAudioProcessing() {
  const audioContext = new AudioContext();
  
  await audioContext.audioWorklet.addModule('wasm-audio-worklet.js');
  
  const wasmProcessor = new AudioWorkletNode(audioContext, 'wasm-audio-processor');
  
  // Connect to audio graph
  const source = await navigator.mediaDevices.getUserMedia({ audio: true });
  const mediaSource = audioContext.createMediaStreamSource(source);
  
  mediaSource.connect(wasmProcessor).connect(audioContext.destination);
}
    

      class WASMGameEngine {
  constructor(canvasId) {
    this.canvas = document.getElementById(canvasId);
    this.ctx = this.canvas.getContext('2d');
    this.wasmModule = null;
    this.gameState = {
      entities: new Map(),
      resources: new Map()
    };
    this.running = false;
  }

  async initialize() {
    // Load game engine WASM module
    this.wasmModule = await WebAssembly.instantiateStreaming(
      fetch('game_engine.wasm'),
      {
        env: {
          // Graphics callbacks
          clear_screen: (r, g, b, a) => {
            this.ctx.fillStyle = `rgba(${r},${g},${b},${a})`;
            this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
          },
          
          draw_sprite: (x, y, width, height, spriteId) => {
            const sprite = this.gameState.resources.get(spriteId);
            if (sprite) {
              this.ctx.drawImage(sprite, x, y, width, height);
            }
          },
          
          draw_text: (x, y, textPtr, size, r, g, b) => {
            const text = this.readStringFromWASM(textPtr);
            this.ctx.font = `${size}px Arial`;
            this.ctx.fillStyle = `rgb(${r},${g},${b})`;
            this.ctx.fillText(text, x, y);
          },

          // Input callbacks
          get_mouse_x: () => this.mouseX || 0,
          get_mouse_y: () => this.mouseY || 0,
          is_key_pressed: (keyCode) => this.pressedKeys.has(keyCode),

          // Audio callbacks
          play_sound: (soundId, volume, pitch) => {
            this.playSound(soundId, volume, pitch);
          },

          // Utility
          get_time: () => performance.now(),
          random: () => Math.random()
        }
      }
    );

    this.setupInputHandlers();
    this.loadGameAssets();
    
    // Initialize game state in WASM
    this.wasmModule.instance.exports.initialize_game(
      this.canvas.width,
      this.canvas.height
    );
  }

  setupInputHandlers() {
    this.pressedKeys = new Set();
    this.mouseX = 0;
    this.mouseY = 0;

    document.addEventListener('keydown', (e) => {
      this.pressedKeys.add(e.keyCode);
    });

    document.addEventListener('keyup', (e) => {
      this.pressedKeys.delete(e.keyCode);
    });

    this.canvas.addEventListener('mousemove', (e) => {
      const rect = this.canvas.getBoundingClientRect();
      this.mouseX = e.clientX - rect.left;
      this.mouseY = e.clientY - rect.top;
    });
  }

  readStringFromWASM(ptr) {
    const memory = new Uint8Array(this.wasmModule.instance.exports.memory.buffer);
    let length = 0;
    while (memory[ptr + length] !== 0) length++;
    
    return new TextDecoder().decode(memory.slice(ptr, ptr + length));
  }

  async loadGameAssets() {
    // Load sprites, sounds, etc.
    const assets = [
      { id: 'player', src: 'sprites/player.png' },
      { id: 'enemy', src: 'sprites/enemy.png' },
      { id: 'background', src: 'sprites/background.png' }
    ];

    for (const asset of assets) {
      const img = new Image();
      img.src = asset.src;
      await new Promise(resolve => {
        img.onload = resolve;
      });
      this.gameState.resources.set(asset.id, img);
    }
  }

  start() {
    this.running = true;
    this.gameLoop();
  }

  stop() {
    this.running = false;
  }

  gameLoop() {
    if (!this.running) return;

    // Update game logic in WASM
    const deltaTime = 16.67; // ~60 FPS
    this.wasmModule.instance.exports.update_game(deltaTime);

    // Render frame in WASM
    this.wasmModule.instance.exports.render_game();

    requestAnimationFrame(() => this.gameLoop());
  }
}

// Usage
async function startGame() {
  const game = new WASMGameEngine('gameCanvas');
  await game.initialize();
  game.start();
}
    

      class WASMCrypto {
  constructor() {
    this.module = null;
  }

  async initialize() {
    this.module = await WebAssembly.instantiateStreaming(
      fetch('crypto.wasm'),
      {
        env: {
          random_bytes: (ptr, length) => {
            const randomBytes = crypto.getRandomValues(new Uint8Array(length));
            const memory = new Uint8Array(this.module.instance.exports.memory.buffer);
            memory.set(randomBytes, ptr);
          }
        }
      }
    );
  }

  async hashData(data, algorithm = 'sha256') {
    if (!this.module) await this.initialize();

    const dataBytes = new TextEncoder().encode(data);
    const inputPtr = this.module.instance.exports.allocate(dataBytes.length);
    const outputPtr = this.module.instance.exports.allocate(32); // SHA256 output size

    try {
      const memory = new Uint8Array(this.module.instance.exports.memory.buffer);
      memory.set(dataBytes, inputPtr);

      this.module.instance.exports[`hash_${algorithm}`](
        inputPtr, dataBytes.length, outputPtr
      );

      const hashBytes = memory.slice(outputPtr, outputPtr + 32);
      return Array.from(hashBytes)
        .map(b => b.toString(16).padStart(2, '0'))
        .join('');
    } finally {
      this.module.instance.exports.deallocate(inputPtr);
      this.module.instance.exports.deallocate(outputPtr);
    }
  }

  async generateKeyPair() {
    if (!this.module) await this.initialize();

    const publicKeyPtr = this.module.instance.exports.allocate(32);
    const privateKeyPtr = this.module.instance.exports.allocate(32);

    try {
      this.module.instance.exports.generate_ed25519_keypair(
        publicKeyPtr, privateKeyPtr
      );

      const memory = new Uint8Array(this.module.instance.exports.memory.buffer);
      
      return {
        publicKey: memory.slice(publicKeyPtr, publicKeyPtr + 32),
        privateKey: memory.slice(privateKeyPtr, privateKeyPtr + 32)
      };
    } finally {
      this.module.instance.exports.deallocate(publicKeyPtr);
      this.module.instance.exports.deallocate(privateKeyPtr);
    }
  }
}
    

      class WASMScientificComputing {
  constructor() {
    this.module = null;
    this.matrixOperations = null;
  }

  async initialize() {
    this.module = await WebAssembly.instantiateStreaming(
      fetch('scientific_computing.wasm'),
      {
        env: {
          log: (x) => console.log(x),
          exp: Math.exp,
          sin: Math.sin,
          cos: Math.cos,
          sqrt: Math.sqrt
        }
      }
    );

    this.matrixOperations = this.module.instance.exports;
  }

  async multiplyMatrices(matrixA, matrixB) {
    if (!this.module) await this.initialize();

    const rowsA = matrixA.length;
    const colsA = matrixA[0].length;
    const rowsB = matrixB.length;
    const colsB = matrixB[0].length;

    if (colsA !== rowsB) {
      throw new Error('Matrix dimensions incompatible for multiplication');
    }

    // Flatten matrices for WASM
    const flatA = matrixA.flat();
    const flatB = matrixB.flat();
    const resultSize = rowsA * colsB;

    // Allocate memory
    const ptrA = this.matrixOperations.allocate_matrix(flatA.length);
    const ptrB = this.matrixOperations.allocate_matrix(flatB.length);
    const ptrResult = this.matrixOperations.allocate_matrix(resultSize);

    try {
      const memory = new Float64Array(this.module.instance.exports.memory.buffer);
      
      // Copy data to WASM
      memory.set(flatA, ptrA / 8);
      memory.set(flatB, ptrB / 8);

      // Perform multiplication
      this.matrixOperations.multiply_matrices(
        ptrA, rowsA, colsA,
        ptrB, rowsB, colsB,
        ptrResult
      );

      // Read result
      const result = Array.from(memory.slice(ptrResult / 8, (ptrResult / 8) + resultSize));
      
      // Reshape to 2D array
      const resultMatrix = [];
      for (let i = 0; i < rowsA; i++) {
        resultMatrix.push(result.slice(i * colsB, (i + 1) * colsB));
      }

      return resultMatrix;
    } finally {
      this.matrixOperations.deallocate_matrix(ptrA);
      this.matrixOperations.deallocate_matrix(ptrB);
      this.matrixOperations.deallocate_matrix(ptrResult);
    }
  }

  async solveLeastSquares(X, y) {
    if (!this.module) await this.initialize();

    // Implementation for solving Ax = b using least squares
    const XtX = await this.multiplyMatrices(this.transpose(X), X);
    const Xty = await this.multiplyMatrices(this.transpose(X), [y]);
    
    return this.solveLinearSystem(XtX, Xty[0]);
  }

  transpose(matrix) {
    return matrix[0].map((_, colIndex) => matrix.map(row => row[colIndex]));
  }
}
    

      class WASMDataVisualizer {
  constructor(canvasId) {
    this.canvas = document.getElementById(canvasId);
    this.ctx = this.canvas.getContext('2d');
    this.wasmModule = null;
    this.dataBuffer = null;
    this.animationId = null;
    this.datasets = new Map();
  }

  async initialize() {
    this.wasmModule = await WebAssembly.instantiateStreaming(
      fetch('data_visualizer.wasm'),
      {
        env: {
          // Canvas drawing callbacks
          draw_line: (x1, y1, x2, y2, r, g, b, alpha) => {
            this.ctx.strokeStyle = `rgba(${r},${g},${b},${alpha})`;
            this.ctx.beginPath();
            this.ctx.moveTo(x1, y1);
            this.ctx.lineTo(x2, y2);
            this.ctx.stroke();
          },
          
          draw_circle: (x, y, radius, r, g, b, alpha, filled) => {
            this.ctx.fillStyle = `rgba(${r},${g},${b},${alpha})`;
            this.ctx.strokeStyle = `rgba(${r},${g},${b},${alpha})`;
            this.ctx.beginPath();
            this.ctx.arc(x, y, radius, 0, 2 * Math.PI);
            filled ? this.ctx.fill() : this.ctx.stroke();
          },
          
          draw_text: (x, y, textPtr, size, r, g, b) => {
            const text = this.readStringFromWASM(textPtr);
            this.ctx.font = `${size}px Arial`;
            this.ctx.fillStyle = `rgb(${r},${g},${b})`;
            this.ctx.fillText(text, x, y);
          },
          
          clear_canvas: (r, g, b) => {
            this.ctx.fillStyle = `rgb(${r},${g},${b})`;
            this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
          },
          
          // Math functions for complex calculations
          sin: Math.sin,
          cos: Math.cos,
          sqrt: Math.sqrt,
          pow: Math.pow,
          log: Math.log,
          
          // Performance timing
          get_time: () => performance.now()
        }
      }
    );

    // Initialize WASM visualization engine
    this.wasmModule.instance.exports.init_visualizer(
      this.canvas.width,
      this.canvas.height
    );
  }

  readStringFromWASM(ptr) {
    const memory = new Uint8Array(this.wasmModule.instance.exports.memory.buffer);
    let length = 0;
    while (memory[ptr + length] !== 0) length++;
    return new TextDecoder().decode(memory.slice(ptr, ptr + length));
  }

  async loadDataset(name, data, dataType = 'timeseries') {
    if (!this.wasmModule) await this.initialize();

    // Flatten data for WASM consumption
    const flatData = data.flat();
    const dataSize = flatData.length;

    // Allocate memory for dataset
    const dataPtr = this.wasmModule.instance.exports.allocate_dataset(dataSize);
    const memory = new Float32Array(this.wasmModule.instance.exports.memory.buffer);
    
    // Copy data to WASM memory
    memory.set(flatData, dataPtr / 4);

    // Register dataset in WASM
    const namePtr = this.wasmModule.instance.exports.allocate_string(name.length);
    const nameMemory = new Uint8Array(this.wasmModule.instance.exports.memory.buffer);
    for (let i = 0; i < name.length; i++) {
      nameMemory[namePtr + i] = name.charCodeAt(i);
    }

    this.wasmModule.instance.exports.register_dataset(
      namePtr, name.length,
      dataPtr, dataSize,
      this.getDataTypeId(dataType)
    );

    this.datasets.set(name, {
      ptr: dataPtr,
      size: dataSize,
      type: dataType
    });
  }

  getDataTypeId(dataType) {
    const types = {
      'timeseries': 0,
      'scatter': 1,
      'histogram': 2,
      'heatmap': 3,
      'network': 4
    };
    return types[dataType] || 0;
  }

  async renderVisualization(datasetName, visualizationType, options = {}) {
    if (!this.datasets.has(datasetName)) {
      throw new Error(`Dataset ${datasetName} not loaded`);
    }

    const {
      animated = false,
      duration = 1000,
      colorScheme = 'default',
      showGrid = true,
      showLabels = true
    } = options;

    // Set visualization parameters
    this.wasmModule.instance.exports.set_visualization_params(
      this.getVisualizationTypeId(visualizationType),
      animated ? 1 : 0,
      duration,
      this.getColorSchemeId(colorScheme),
      showGrid ? 1 : 0,
      showLabels ? 1 : 0
    );

    // Start rendering
    if (animated) {
      this.startAnimatedRender(datasetName);
    } else {
      this.renderFrame(datasetName);
    }
  }

  getVisualizationTypeId(type) {
    const types = {
      'line_chart': 0,
      'bar_chart': 1,
      'scatter_plot': 2,
      'area_chart': 3,
      'pie_chart': 4,
      'heatmap': 5,
      'network_graph': 6
    };
    return types[type] || 0;
  }

  getColorSchemeId(scheme) {
    const schemes = {
      'default': 0,
      'viridis': 1,
      'plasma': 2,
      'cool': 3,
      'warm': 4
    };
    return schemes[scheme] || 0;
  }

  renderFrame(datasetName) {
    const namePtr = this.wasmModule.instance.exports.allocate_string(datasetName.length);
    const nameMemory = new Uint8Array(this.wasmModule.instance.exports.memory.buffer);
    
    for (let i = 0; i < datasetName.length; i++) {
      nameMemory[namePtr + i] = datasetName.charCodeAt(i);
    }

    this.wasmModule.instance.exports.render_frame(namePtr, datasetName.length);
    this.wasmModule.instance.exports.deallocate_string(namePtr);
  }

  startAnimatedRender(datasetName) {
    const animate = () => {
      this.renderFrame(datasetName);
      
      // Check if animation is complete
      const isComplete = this.wasmModule.instance.exports.is_animation_complete();
      
      if (!isComplete) {
        this.animationId = requestAnimationFrame(animate);
      }
    };

    this.animationId = requestAnimationFrame(animate);
  }

  stopAnimation() {
    if (this.animationId) {
      cancelAnimationFrame(this.animationId);
      this.animationId = null;
    }
  }

  async processDataInRealTime(dataStream) {
    if (!this.wasmModule) await this.initialize();

    // Set up real-time processing
    const bufferSize = 1024;
    const bufferPtr = this.wasmModule.instance.exports.allocate_buffer(bufferSize);
    
    const reader = dataStream.getReader();
    
    try {
      while (true) {
        const { done, value } = await reader.read();
        if (done) break;

        // Process incoming data chunk
        const memory = new Float32Array(this.wasmModule.instance.exports.memory.buffer);
        memory.set(value, bufferPtr / 4);

        // Apply real-time filters and transformations
        this.wasmModule.instance.exports.process_realtime_data(
          bufferPtr,
          value.length
        );

        // Update visualization
        this.wasmModule.instance.exports.update_realtime_visualization();
        this.renderFrame('realtime');
      }
    } finally {
      this.wasmModule.instance.exports.deallocate_buffer(bufferPtr);
      reader.releaseLock();
    }
  }

  // Advanced statistical analysis
  async calculateStatistics(datasetName) {
    if (!this.datasets.has(datasetName)) {
      throw new Error(`Dataset ${datasetName} not loaded`);
    }

    const dataset = this.datasets.get(datasetName);
    const statsPtr = this.wasmModule.instance.exports.calculate_statistics(
      dataset.ptr,
      dataset.size
    );

    // Read statistics from WASM memory
    const memory = new Float32Array(this.wasmModule.instance.exports.memory.buffer);
    const stats = {
      mean: memory[statsPtr / 4],
      median: memory[statsPtr / 4 + 1],
      std: memory[statsPtr / 4 + 2],
      min: memory[statsPtr / 4 + 3],
      max: memory[statsPtr / 4 + 4],
      skewness: memory[statsPtr / 4 + 5],
      kurtosis: memory[statsPtr / 4 + 6]
    };

    this.wasmModule.instance.exports.deallocate_stats(statsPtr);
    return stats;
  }

  // Interactive features
  handleMouseInteraction(x, y, eventType) {
    if (!this.wasmModule) return;

    this.wasmModule.instance.exports.handle_mouse_event(
      x, y, this.getEventTypeId(eventType)
    );
    
    // Check if redraw is needed
    const needsRedraw = this.wasmModule.instance.exports.needs_redraw();
    if (needsRedraw) {
      this.renderFrame('current');
    }
  }

  getEventTypeId(eventType) {
    const types = {
      'click': 0,
      'hover': 1,
      'drag': 2,
      'wheel': 3
    };
    return types[eventType] || 0;
  }

  cleanup() {
    this.stopAnimation();
    
    // Cleanup all allocated datasets
    for (const [name, dataset] of this.datasets) {
      this.wasmModule.instance.exports.deallocate_dataset(dataset.ptr);
    }
    
    this.datasets.clear();
    
    // Cleanup WASM visualizer
    if (this.wasmModule) {
      this.wasmModule.instance.exports.cleanup_visualizer();
    }
  }
}

// Usage example
async function createInteractiveChart() {
  const visualizer = new WASMDataVisualizer('chartCanvas');
  
  // Generate sample time series data
  const timeSeriesData = Array.from({length: 1000}, (_, i) => [
    i,
    Math.sin(i * 0.01) + Math.random() * 0.1,
    Math.cos(i * 0.015) + Math.random() * 0.1
  ]);
  
  await visualizer.loadDataset('timeseries', timeSeriesData, 'timeseries');
  
  // Render animated line chart
  await visualizer.renderVisualization('timeseries', 'line_chart', {
    animated: true,
    duration: 2000,
    colorScheme: 'viridis',
    showGrid: true
  });
  
  // Calculate and display statistics
  const stats = await visualizer.calculateStatistics('timeseries');
  console.log('Dataset statistics:', stats);
  
  // Set up mouse interactions
  const canvas = document.getElementById('chartCanvas');
  canvas.addEventListener('mousemove', (e) => {
    const rect = canvas.getBoundingClientRect();
    visualizer.handleMouseInteraction(
      e.clientX - rect.left,
      e.clientY - rect.top,
      'hover'
    );
  });
  
  canvas.addEventListener('click', (e) => {
    const rect = canvas.getBoundingClientRect();
    visualizer.handleMouseInteraction(
      e.clientX - rect.left,
      e.clientY - rect.top,
      'click'
    );
  });
  
  // Cleanup on page unload
  window.addEventListener('beforeunload', () => {
    visualizer.cleanup();
  });
}
    

      class WASMMemoryPool {
  constructor(wasmModule, initialSize = 1024 * 1024) {
    this.module = wasmModule;
    this.freeBlocks = new Map();
    this.allocatedBlocks = new Set();
    this.totalSize = initialSize;
  }

  allocate(size) {
    // Round up to nearest power of 2 for better alignment
    const alignedSize = Math.pow(2, Math.ceil(Math.log2(size)));
    
    if (this.freeBlocks.has(alignedSize) && this.freeBlocks.get(alignedSize).length > 0) {
      const ptr = this.freeBlocks.get(alignedSize).pop();
      this.allocatedBlocks.add(ptr);
      return ptr;
    }

    // Allocate new block
    const ptr = this.module.instance.exports._malloc(alignedSize);
    this.allocatedBlocks.add(ptr);
    return ptr;
  }

  deallocate(ptr, size) {
    if (!this.allocatedBlocks.has(ptr)) return;

    this.allocatedBlocks.delete(ptr);
    const alignedSize = Math.pow(2, Math.ceil(Math.log2(size)));
    
    if (!this.freeBlocks.has(alignedSize)) {
      this.freeBlocks.set(alignedSize, []);
    }
    
    this.freeBlocks.get(alignedSize).push(ptr);
  }

  cleanup() {
    // Free all blocks when done
    for (const ptr of this.allocatedBlocks) {
      this.module.instance.exports._free(ptr);
    }
    
    for (const [size, blocks] of this.freeBlocks) {
      for (const ptr of blocks) {
        this.module.instance.exports._free(ptr);
      }
    }
    
    this.allocatedBlocks.clear();
    this.freeBlocks.clear();
  }
}
    

      class WASMModuleCache {
  static cache = new Map();
  static compilePromises = new Map();

  static async precompileModule(name, wasmPath) {
    if (this.compilePromises.has(name)) {
      return this.compilePromises.get(name);
    }

    const compilePromise = WebAssembly.compileStreaming(fetch(wasmPath))
      .then(module => {
        this.cache.set(name, module);
        return module;
      })
      .catch(error => {
        console.error(`Failed to precompile ${name}:`, error);
        this.compilePromises.delete(name);
        throw error;
      });

    this.compilePromises.set(name, compilePromise);
    return compilePromise;
  }

  static async instantiateModule(name, imports = {}) {
    let module = this.cache.get(name);
    
    if (!module) {
      const compilePromise = this.compilePromises.get(name);
      if (compilePromise) {
        module = await compilePromise;
      } else {
        throw new Error(`Module ${name} not precompiled`);
      }
    }

    return WebAssembly.instantiate(module, imports);
  }

  static preloadAllModules(moduleConfigs) {
    return Promise.all(
      moduleConfigs.map(config => 
        this.precompileModule(config.name, config.path)
      )
    );
  }
}

// Usage
const moduleConfigs = [
  { name: 'image-processor', path: 'wasm/image_processor.wasm' },
  { name: 'audio-processor', path: 'wasm/audio_processor.wasm' },
  { name: 'game-engine', path: 'wasm/game_engine.wasm' }
];

// Preload during app initialization
WASMModuleCache.preloadAllModules(moduleConfigs);
    

      class SecureWASMInterface {
  constructor(module) {
    this.module = module;
    this.sanitizers = new Map();
  }

  registerSanitizer(functionName, sanitizer) {
    this.sanitizers.set(functionName, sanitizer);
  }

  safeCall(functionName, ...args) {
    // Apply input sanitization
    const sanitizer = this.sanitizers.get(functionName);
    if (sanitizer) {
      args = sanitizer(args);
    }

    // Validate function exists
    if (!(functionName in this.module.instance.exports)) {
      throw new Error(`Function ${functionName} not found in WASM module`);
    }

    try {
      return this.module.instance.exports[functionName](...args);
    } catch (error) {
      console.error(`WASM function ${functionName} failed:`, error);
      throw new Error(`Safe execution failed for ${functionName}`);
    }
  }

  // Sanitizer example for string inputs
  static stringSanitizer(args) {
    return args.map(arg => {
      if (typeof arg === 'string') {
        // Remove potential harmful characters
        return arg.replace(/[<>\"'&]/g, '');
      }
      return arg;
    });
  }
}
    

      class WASMDebugger {
  constructor(module) {
    this.module = module;
    this.callStack = [];
    this.memoryWatches = new Map();
  }

  traceFunction(functionName) {
    const originalFunction = this.module.instance.exports[functionName];
    
    this.module.instance.exports[functionName] = (...args) => {
      console.log(`[WASM] Calling ${functionName} with args:`, args);
      this.callStack.push({ function: functionName, args, timestamp: Date.now() });
      
      try {
        const result = originalFunction.apply(this, args);
        console.log(`[WASM] ${functionName} returned:`, result);
        return result;
      } catch (error) {
        console.error(`[WASM] ${functionName} threw error:`, error);
        throw error;
      } finally {
        this.callStack.pop();
      }
    };
  }

  watchMemory(address, size, label = 'memory') {
    this.memoryWatches.set(label, { address, size });
  }

  dumpMemoryWatches() {
    const memory = new Uint8Array(this.module.instance.exports.memory.buffer);
    
    for (const [label, { address, size }] of this.memoryWatches) {
      const data = memory.slice(address, address + size);
      console.log(`[WASM Memory] ${label}:`, Array.from(data));
    }
  }

  getCallStack() {
    return [...this.callStack];
  }
}