As a followup to my previous post, I found that in practice embedding a WebAssembly binary in code as a base64 string using a bundler (such as Webpack or Rollup) is still not ideal. So I created a small tool, wasmwrap that generates a plain Javascript or Typescript file for you instead.
To install it:
npm install wasmwrap --save-dev
Then you can use it as such:
wasmwrap --input my-file.wasm --output myFile.ts
and it then generates the code for you:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
// myFile.ts
// WARNING: This file was autogenerated by wasmwrap and should not be edited manually.
const CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
const lookup = new Uint8Array(256);
for (let i = 0; i < CHARS.length; i++) {
lookup[CHARS.charCodeAt(i)] = i;
}
export function decode(base64: string): ArrayBuffer {
let bufferLength = base64.length * 0.75;
const len = base64.length;
if (base64[len - 1] === "=") bufferLength--;
if (base64[len - 2] === "=") bufferLength--;
const bytes = new Uint8Array(bufferLength);
let p = 0;
for (let i = 0; i < len; i+=4) {
const encoded1 = lookup[base64.charCodeAt(i)];
const encoded2 = lookup[base64.charCodeAt(i+1)];
const encoded3 = lookup[base64.charCodeAt(i+2)];
const encoded4 = lookup[base64.charCodeAt(i+3)];
bytes[p++] = (encoded1 << 2) | (encoded2 >> 4);
bytes[p++] = ((encoded2 & 15) << 4) | (encoded3 >> 2);
bytes[p++] = ((encoded3 & 3) << 6) | (encoded4 & 63);
}
return bytes.buffer;
}
export const base64 = "AGFzbQEAAAABMAlgA"; // Shortened, normally this would be a longer base64 string
export const buffer = decode(base64);
|
As you can see it generates a base64 decoder too, you can turn that off if you want. Check out wasmwrap here.