1
0
mirror of synced 2024-11-12 02:00:52 +01:00

fix: Fix detected wasm file size being wrong (#1525)

This commit is contained in:
iTrooz 2024-02-01 15:03:33 +01:00 committed by GitHub
parent be0e50f983
commit 7546655695
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 22 additions and 8 deletions

5
dist/web/Dockerfile vendored
View File

@ -73,10 +73,15 @@ cp /imhex/dist/web/source/* /build
ccache -s
EOF
# Create a file dedicated to store wasm size, because I know no way to get the wasm content length if the web server uses compression
# See https://stackoverflow.com/questions/41701849/cannot-modify-accept-encoding-with-fetch https://github.com/AnthumChris/fetch-progress-indicators/issues/13
RUN du -b /build/imhex.wasm | cut -f1 > imhex.wasm.size
FROM scratch as raw
COPY --from=build [ \
# ImHex \
"/build/imhex.wasm", \
"/build/imhex.wasm.size", \
"/build/imhex.js", \
"/build/imhex.worker.js", \
\

View File

@ -1,8 +1,16 @@
let wasmSize = null;
// See comment in dist/web/Dockerfile about imhex.wasm.size
fetch("imhex.wasm.size").then(async (resp) => {
wasmSize = parseInt((await resp.text()).trim());
console.log(`wasm size was found to be ${wasmSize} bytes`);
});
// Monkeypatch WebAssembly to have a progress bar
// inspired from: https://github.com/WordPress/wordpress-playground/pull/46 (but had to be modified)
function monkeyPatch(progressFun) {
const _instantiateStreaming = WebAssembly.instantiateStreaming;
WebAssembly.instantiateStreaming = (response, ...args) => {
// Do not collect wasm content length here see above
const file = response.url.substring(
new URL(response.url).origin.length + 1
);
@ -10,18 +18,16 @@ function monkeyPatch(progressFun) {
new ReadableStream(
{
async start(controller) {
const contentLength = response.headers.get("content-length");
const total = parseInt(contentLength, 10);
const reader = response.clone().body.getReader();
let loaded = 0;
for (; ;) {
const { done, value } = await reader.read();
if (done) {
progressFun(file, total, total);
if(wasmSize) progressFun(file, wasmSize);
break;
}
loaded += value.byteLength;
progressFun(file, loaded, total);
progressFun(file, loaded);
controller.enqueue(value);
}
controller.close();
@ -40,13 +46,16 @@ function monkeyPatch(progressFun) {
return _instantiateStreaming(reportingResponse, ...args);
}
}
monkeyPatch((file, done, total) => {
if (total === 0 || done > total)
monkeyPatch((file, done) => {
if (!wasmSize) return;
if (done > wasmSize) {
console.log(`Warning: downloaded size ${done} is larger than wasm size ${wasmSize}`);
return;
};
const percent = ((done / total) * 100).toFixed(0);
const percent = ((done / wasmSize) * 100).toFixed(0);
const mibNow = (done / 1024**2).toFixed(1);
const mibTotal = (total / 1024**2).toFixed(1);
const mibTotal = (wasmSize / 1024**2).toFixed(1);
let root = document.querySelector(':root');
root.style.setProperty("--progress", `${percent}%`)