JavaScript and WebAssembly

// Binary format (shown here as hexadecimal)
00 61 73 6D  // magic number: "\0asm"
01 00 00 00  // version: 1
// ... followed by sections containing types, functions, etc.

(module
  (func $add (param $a i32) (param $b i32) (result i32)
    local.get $a
    local.get $b
    i32.add)
  (export "add" (func $add))
)

// Basic example of loading a WebAssembly module
fetch('simple.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes))
  .then(result => {
    // Get exported function
    const add = result.instance.exports.add;
    
    // Call the function
    console.log(add(40, 2)); // 42
  });

// Example C code (math.c)
#include 

EMSCRIPTEN_KEEPALIVE
int add(int a, int b) {
  return a + b;
}

EMSCRIPTEN_KEEPALIVE
int subtract(int a, int b) {
  return a - b;
}

// Compile with Emscripten
emcc math.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_add", "_subtract"]' -o math.js

                 u32 {
    if n <= 1 {
        return n;
    }
    
    let mut a = 0;
    let mut b = 1;
    
    for _ in 2..=n {
        let temp = a + b;
        a = b;
        b = temp;
    }
    
    b
}]]>

// Build with wasm-pack
wasm-pack build --target web

// Compile with AssemblyScript compiler
asc assembly/index.ts -o build/optimized.wasm

// WebAssembly Text Format (WAT) with memory operations
(module
  ;; Define a memory with initial size of 1 page (64KB)
  (memory (export "memory") 1)
  
  ;; Store value 42 at memory address 0
  (func $storeValue (param $value i32)
    i32.const 0    ;; address
    local.get $value
    i32.store)     ;; store 4 bytes at address
  
  ;; Load value from memory address 0
  (func $loadValue (result i32)
    i32.const 0    ;; address
    i32.load)      ;; load 4 bytes from address
  
  ;; Export the functions
  (export "storeValue" (func $storeValue))
  (export "loadValue" (func $loadValue))
)

// Load WebAssembly module
WebAssembly.instantiateStreaming(fetch('memory.wasm'))
  .then(result => {
    const instance = result.instance;
    const { memory, storeValue, loadValue } = instance.exports;
    
    // Create views into the memory buffer
    const i32Array = new Int32Array(memory.buffer);
    const u8Array = new Uint8Array(memory.buffer);
    
    // Store a value using the WebAssembly function
    storeValue(42);
    console.log('Value stored in WebAssembly memory:', loadValue());
    
    // Directly manipulate memory from JavaScript
    i32Array[1] = 100;  // Store value 100 at index 1 (address 4)
    console.log('Value at index 1:', i32Array[1]);
    
    // Write a string to memory
    const message = 'Hello, WebAssembly!';
    for (let i = 0; i < message.length; i++) {
      u8Array[8 + i] = message.charCodeAt(i);
    }
    u8Array[8 + message.length] = 0;  // Null terminator
  });

// Traditional approach (multi-step)
fetch('module.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes))
  .then(result => {
    const instance = result.instance;
    // Use the instance
  });

// Streaming approach (more efficient)
WebAssembly.instantiateStreaming(fetch('module.wasm'))
  .then(result => {
    const instance = result.instance;
    // Use the instance
  });

// WebAssembly Text Format (WAT) with imports
(module
  ;; Import JavaScript functions
  (import "console" "log" (func $log (param i32)))
  (import "math" "random" (func $random (result f64)))
  
  ;; Function that uses the imported functions
  (func $generateAndLogRandom (export "generateAndLogRandom")
    ;; Call random() and convert result to i32
    call $random
    f64.const 100
    f64.mul
    i32.trunc_f64_s
    
    ;; Call log with the random number
    call $log
  )
)

// JavaScript side: providing the imports
const importObject = {
  console: {
    log: (value) => console.log('From WebAssembly:', value)
  },
  math: {
    random: () => Math.random()
  }
};

WebAssembly.instantiateStreaming(fetch('imports.wasm'), importObject)
  .then(result => {
    const { generateAndLogRandom } = result.instance.exports;
    
    // Call the WebAssembly function that uses JavaScript imports
    generateAndLogRandom();  // Logs a random number between 0-99
  });

// JavaScript glue code for DOM access
const domImports = {
  dom: {
    createElement: (tagNamePtr, tagNameLen) => {
      // Convert memory pointer to string
      const memory = wasmInstance.exports.memory;
      const bytes = new Uint8Array(memory.buffer, tagNamePtr, tagNameLen);
      const tagName = new TextDecoder('utf8').decode(bytes);
      
      // Create the element and store it somewhere
      const element = document.createElement(tagName);
      const elementId = nextElementId++;
      elements.set(elementId, element);
      
      return elementId;
    },
    appendChild: (parentId, childId) => {
      const parent = elements.get(parentId);
      const child = elements.get(childId);
      if (parent && child) {
        parent.appendChild(child);
      }
    },
    // More DOM operations...
  }
};

// Inefficient: Many boundary crossings
for (let i = 0; i < 1000; i++) {
  wasmInstance.exports.processItem(i);  // 1000 crossings
}

// Better: Single boundary crossing
wasmInstance.exports.processItems(0, 1000);  // 1 crossing

// Prepare data in WebAssembly memory
const { memory, processArray } = wasmInstance.exports;
const array = new Float64Array(memory.buffer);

// Fill array with data
for (let i = 0; i < 1000; i++) {
  array[i] = i * 1.1;
}

// Process the entire array in one call
processArray(0, 1000);  // Passing offset and length