Convert sql-wasm.wasm to base64 and embed in HTML/JavaScript about sql.js HOT 6 CLOSED

You can even go better then that. See https://github.com/lovasoa/bin2png

from sql.js.

I am going to give this a try and will update with another response but I feel like even this won't resolve it. When I load from base64 I get Uncaught (in promise) TypeError: WebAssembly.instantiate(): Import #0 module="a" error: module is not an object or function which I found out means wasm module needs something else too. https://stackoverflow.com/questions/75839317/how-do-i-load-sql-js-wasm-as-base64-so-that-it-can-be-loaded-directly-in-html-fi

from sql.js.

Your PNG method worked, thanks for pointing out. But why go through PNG conversion and back when you have wasm as base64 string.

From your code I found out i was supposed to use initSqlJs instead of calling WebAssembly.instantiate directly.

Then I used https://github.com/BillKek/wasm2js_let_static to convert sql-wasm.wasm v1.8.0 to base64 again. New base64 is correct one.

Then loaded it like this

    const wasm_strbuffer = atob(SQLBASE64);
    let wasm_codearray = new Uint8Array(wasm_strbuffer.length);
    for (var i in wasm_strbuffer) wasm_codearray[i] = wasm_strbuffer.charCodeAt(i);

    const sqlPromise = initSqlJs({
        locateFile: filename => URL.createObjectURL(new Blob([wasm_codearray], { type: 'application/wasm' }))
    });
    const dataPromise = fetch("mysqlite.db").then(res => res.arrayBuffer());
    Promise.all([sqlPromise, dataPromise]).then((data) => {
        const SQL = data[0];
        const buf = data[1];
        const db = new SQL.Database(new Uint8Array(buf));
        dbLoaded(db);
    });

and it just works.

Base64 wasm gist https://gist.github.com/SMUsamaShah/358fba159cb41fe469fc61e7db444c0e

from sql.js.

The question is why go to base64 and back when you can encode as a png instead?

• PNG compresses the data, whereas base64 makes it larger.
• PNG can be efficiently decoded in the background whereas base64 decoding blocks the main thread.

from sql.js.

Additionally, in your example, you decode the base64 to a js string, then copy the data to an uint8array, and immediately deallocate the large js string you just allocated. This is inefficient both in term of cpu and memory usage.

from sql.js.

You are right, don't disagree with you. But with my use case, I don't need to worry about size or blocking the main thread at all, mainly because it's a one time operation.

Only reason I was interested in embedding it in html is so that I can double click open the html file in the browser, which means I have no reason worry about size anyway.

If I was loading html from a server I can load wasm binary itself. Base64 is mainly a way to avoid cors issues.

from sql.js.