Chapter 4

amirkogit · Dec 7, 2021 · 541408a · 541408a
1 parent 06f9938
commit 541408a
Show file tree

Hide file tree

Showing 15 changed files with 265 additions and 0 deletions.
diff --git a/ch04/README.md b/ch04/README.md
@@ -0,0 +1,17 @@
+## Chapter 4 : WebAssembly Memory
+
+In this chapter we begin to focus on using WebAssembly Memory instances.
+
+The code examples are expressed in `.html` files that you can serve up
+as previously with Python or some other web server:
+
+```
+> python -m http.server 10000
+Serving HTTP on :: port 10000 (http://[::]:10000/) ...
+::1 - - [07/Dec/2021 08:56:41] "GET /index.html HTTP/1.1" 200 -
+::1 - - [07/Dec/2021 08:56:41] code 404, message File not found
+::1 - - [07/Dec/2021 08:56:41] "GET /bootstrap.min.css HTTP/1.1" 404 -
+::1 - - [07/Dec/2021 08:56:41] "GET /utils.js HTTP/1.1" 200 -
+::1 - - [07/Dec/2021 08:56:41] "GET /memory.wasm HTTP/1.1" 200 -
+::1 - - [07/Dec/2021 08:57:41] "GET /memory.html HTTP/1.1" 200 -
+```
diff --git a/ch04/fibonacci.html b/ch04/fibonacci.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="bootstrap.min.css">
+    <title>Fibonacci</title>    
+    <script src="utils.js"></script>
+  </head>
+  <body>
+    <div id="container"></div>
+
+    <script>
+      var memory = new WebAssembly.Memory({initial:10, maximum:100});
+
+      var importObject = {
+        js: { mem: memory }
+      };
+
+      fetchAndInstantiate('memory2.wasm', importObject).then(function(instance) {
+	  var fibNum = 20;
+	  instance.exports.fibonacci(fibNum);
+	  var i32 = new Uint32Array(memory.buffer);
+
+	  var container = document.getElementById('container');
+
+	  for(var i = 0; i < fibNum; i++) {
+	      container.innerText += `Fib[${i}]: ${i32[i]}\n`;
+	  }
+      });
+
+    </script>
+  </body>
+</html>
diff --git a/ch04/index.html b/ch04/index.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="en">
+  <!-- Latest compiled and minified CSS -->
+  <link rel="stylesheet" href="bootstrap.min.css">
+  <head>
+      <meta charset="utf-8">    
+      <script src="utils.js"></script>
+  </head>
+  <body>
+    <title>Memory</title>
+    <div class="container">
+      <h1>Memory</h1>
+
+      <div>Your memory instance is <span id="mem"></span> bytes.</div>
+      <div>It has this many pages: <span id="pages"></span>.</div>
+      <div>Uint32Buffer[0] = <span id="firstint"></span>.</div>
+      <div>Uint8Buffer[0-4] = <span id="firstbytes"></span>.</div>
+    </div>
+
+    <button id="expand">Expand</button>
+
+    <script>
+      function showDetails(mem) {
+	  var buf = mem.buffer;
+
+	  var memEl = document.getElementById('mem');
+	  var pagesEl = document.getElementById('pages');
+	  var firstIntEl = document.getElementById('firstint');
+	  var firstBytesEl = document.getElementById('firstbytes');
+
+	  memEl.innerText=buf.byteLength;
+	  pagesEl.innerText=buf.byteLength / 65536;
+
+	  var i32 = new Uint32Array(buf);
+	  var u8 = new Uint8Array(buf);
+
+	  firstIntEl.innerText=i32[0];
+	  firstBytesEl.innerText= "[" + u8[0] + "," + u8[1] + "," + u8[2] + "," + u8[3] + "]";
+      };
+
+      fetchAndInstantiate('memory.wasm').then(function(instance) {
+	  var mem = instance.exports.memory;
+
+	  var button = document.getElementById("expand");
+	  button.onclick = function() {
+	      try {
+		  mem.grow(1);
+		  showDetails(mem);		  
+	      } catch(re) {
+		  alert("You cannot grow the Memory any more!");
+	      };
+	  };
+
+	  showDetails(mem);
+      });
+    </script>
+  </body>
+</html>
diff --git a/ch04/memory.html b/ch04/memory.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<html lang="en">
+  <!-- Latest compiled and minified CSS -->
+  <link rel="stylesheet" href="bootstrap.min.css">
+  <head>
+      <meta charset="utf-8">    
+      <script src="utils.js"></script>
+  </head>
+  <body>
+    <title>Fibonacci</title>
+
+    <div id="container">
+    </div>
+
+    <script>
+      var memory = new WebAssembly.Memory({initial:10, maximum:100});
+
+      var importObject = {
+        js: { mem: memory }
+      };
+
+      fetchAndInstantiate('memory2.wasm', importObject).then(function(instance) {
+	  var fibNum = 20;
+	  instance.exports.fibonacci(fibNum);
+	  var i32 = new Uint32Array(memory.buffer);
+
+	  var container = document.getElementById('container');
+
+	  for(var i = 0; i < fibNum; i++) {
+	      container.innerText += `Fib[${i}]: ${i32[i]}\n`;
+	  }
+      });
+
+    </script>
+  </body>
+</html>
diff --git a/ch04/memory.wasm b/ch04/memory.wasm
diff --git a/ch04/memory.wat b/ch04/memory.wat
@@ -0,0 +1,4 @@
+(module
+   (memory (export "memory") 1 10)
+   (data (i32.const 0x0) "\01\01\00\00")
+)
diff --git a/ch04/memory2.wasm b/ch04/memory2.wasm
diff --git a/ch04/memory2.wat b/ch04/memory2.wat
@@ -0,0 +1,30 @@
+(module
+ (memory (import "js" "mem") 1)
+ (func (export "fibonacci") (param $n i32)
+    (local $index i32)
+    (local $ptr i32)
+
+    (i32.store (i32.const 0) (i32.const 0))
+    (i32.store (i32.const 4) (i32.const 1))    
+
+    (set_local $index (i32.const 2))
+    (set_local $ptr (i32.const 8))
+
+    (block $break
+      (loop $top
+            (br_if $break (i32.eq (get_local $n) (get_local $index)))
+	    (i32.store
+	       (get_local $ptr)
+	       (i32.add
+	         (i32.load (i32.sub (get_local $ptr) (i32.const 4)))
+		 (i32.load (i32.sub (get_local $ptr) (i32.const 8)))
+	       )
+	    )
+
+	    (set_local $ptr (i32.add (get_local $ptr) (i32.const 4)))
+	    (set_local $index (i32.add (get_local $index) (i32.const 1)))	    
+	    (br $top)
+      )
+    )
+   )
+ )
diff --git a/ch04/strings.html b/ch04/strings.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="bootstrap.min.css">
+    <title>Reading Strings From Memory</title>    
+    <script src="utils.js"></script>
+  </head>
+  <body>
+    <div>
+      <div>Japanese: <span id="japanese"></span></div>
+      <div>English: <span id="english"></span></div>
+    </div>
+    <script>
+      fetchAndInstantiate('strings.wasm').then(function(instance) {
+	  var mem = instance.exports.memory;
+
+	  var bytes = new Uint8Array(mem.buffer, 0, 39);
+          var string = new TextDecoder('utf8').decode(bytes);
+          var japanese = document.getElementById('japanese');
+	  japanese.innerText = string;
+
+	  bytes = new Uint8Array(mem.buffer, 39, 26);
+	  string = new TextDecoder('utf8').decode(bytes);
+          var english = document.getElementById('english');
+	  english.innerText = string;
+      });
+
+    </script>
+  </body>
+</html>
diff --git a/ch04/strings.wasm b/ch04/strings.wasm
diff --git a/ch04/strings.wat b/ch04/strings.wat
@@ -0,0 +1,4 @@
+(module
+   (memory (export "memory") 1)
+   (data (i32.const 0x0) "私は横浜に住んでいました。I used to live in Yokohama.")
+)
diff --git a/ch04/strings2.html b/ch04/strings2.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="bootstrap.min.css">
+    <title>Reading Strings From Memory</title>    
+    <script src="utils.js"></script>
+  </head>
+  <body>
+    <div>
+      <div>Japanese: <span id="japanese"></span></div>
+      <div>English: <span id="english"></span></div>
+    </div>
+    <script>
+      fetchAndInstantiate('strings2.wasm').then(function(instance) {
+	  var mem = instance.exports.memory;
+
+	  var dv = new DataView(mem.buffer);
+	  var start = dv.getUint8(0);
+	  var end = dv.getUint8(1);
+
+	  var bytes = new Uint8Array(mem.buffer, start, end);
+	  var string = new TextDecoder('utf8').decode(bytes);
+          var japanese = document.getElementById('japanese');
+	  japanese.innerText = string;
+
+	  start = dv.getUint8(2);
+	  end = dv.getUint8(3);
+
+	  bytes = new Uint8Array(mem.buffer, start, end);
+	  string = new TextDecoder('utf8').decode(bytes);
+          var english = document.getElementById('english');
+	  english.innerText = string;
+      });
+
+    </script>
+  </body>
+</html>
diff --git a/ch04/strings2.wasm b/ch04/strings2.wasm
diff --git a/ch04/strings2.wat b/ch04/strings2.wat
@@ -0,0 +1,5 @@
+(module
+   (memory (export "memory") 1)
+   (data (i32.const 0x0) "\04\27\2b\1b")
+   (data (i32.const 0x4) "私は横浜に住んでいました。I used to live in Yokohama.")
+)
diff --git a/ch04/utils.js b/ch04/utils.js
@@ -0,0 +1,9 @@
+function fetchAndInstantiate(url, importObject) {
+    return fetch(url).then(response =>
+        response.arrayBuffer()
+    ).then(bytes =>
+        WebAssembly.instantiate(bytes, importObject)
+    ).then(results =>
+        results.instance
+    );
+}