binji/add.wat

## add.wat
;; Convert this to add.wasm by running:
;;
;;   wat2wasm add.wat -o add.wasm
;;
(module
  (func (export "add") (param i32 i32) (result i32)
    get_local 0
    get_local 1
    i32.add))

## example.html
<!DOCTYPE html>
<body>
  <input type="text" id="lhs" value="10">
  +
  <input type="text" id="rhs" value="20">
  <button id="add">=</button>
  <span id="result"></span>
  <script src="example.js"></script>
</body>

## example.js
let $ = x => document.querySelector(x);
let lhsEl = $('#lhs');
let rhsEl = $('#rhs');
let addEl = $('#add');
let resultEl = $('#result');

// Fetch add.wasm...
let addFuncPromise = fetch('add.wasm').then(
    // Convert the response to an array buffer...
    response => response.arrayBuffer()
  ).then(
    // Use that array buffer to create a new instance...
    buffer => WebAssembly.instantiate(buffer)
  ).then(
    // And extract the exported "add" function from that instance.
    ({instance}) => instance.exports.add
  );

// When the button is clicked...
addEl.addEventListener('click', () => {
  // Wait for the addFuncPromise to resolve, then...
  addFuncPromise.then((addFunc) => {
    // Call the "add" function with the two inputs.
    // The inputs will be automatically coerced from strings to int32 values,
    // and the result of the function will be coerced from int32 to a string.
    resultEl.textContent = addFunc(lhsEl.value, rhsEl.value);
  });
});
	;; Convert this to add.wasm by running:
	;;
	;; wat2wasm add.wat -o add.wasm
	;;
	(module
	(func (export "add") (param i32 i32) (result i32)
	get_local 0
	get_local 1
	i32.add))
	<!DOCTYPE html>
	<body>
	<input type="text" id="lhs" value="10">
	+
	<input type="text" id="rhs" value="20">
	<button id="add">=</button>
	<span id="result"></span>
	<script src="example.js"></script>
	</body>
	let $ = x => document.querySelector(x);
	let lhsEl = $('#lhs');
	let rhsEl = $('#rhs');
	let addEl = $('#add');
	let resultEl = $('#result');

	// Fetch add.wasm...
	let addFuncPromise = fetch('add.wasm').then(
	// Convert the response to an array buffer...
	response => response.arrayBuffer()
	).then(
	// Use that array buffer to create a new instance...
	buffer => WebAssembly.instantiate(buffer)
	).then(
	// And extract the exported "add" function from that instance.
	({instance}) => instance.exports.add
	);

	// When the button is clicked...
	addEl.addEventListener('click', () => {
	// Wait for the addFuncPromise to resolve, then...
	addFuncPromise.then((addFunc) => {
	// Call the "add" function with the two inputs.
	// The inputs will be automatically coerced from strings to int32 values,
	// and the result of the function will be coerced from int32 to a string.
	resultEl.textContent = addFunc(lhsEl.value, rhsEl.value);
	});
	});