1
0
mirror of synced 2024-11-13 18:50:53 +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 ccache -s
EOF 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 FROM scratch as raw
COPY --from=build [ \ COPY --from=build [ \
# ImHex \ # ImHex \
"/build/imhex.wasm", \ "/build/imhex.wasm", \
"/build/imhex.wasm.size", \
"/build/imhex.js", \ "/build/imhex.js", \
"/build/imhex.worker.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 // Monkeypatch WebAssembly to have a progress bar
// inspired from: https://github.com/WordPress/wordpress-playground/pull/46 (but had to be modified) // inspired from: https://github.com/WordPress/wordpress-playground/pull/46 (but had to be modified)
function monkeyPatch(progressFun) { function monkeyPatch(progressFun) {
const _instantiateStreaming = WebAssembly.instantiateStreaming; const _instantiateStreaming = WebAssembly.instantiateStreaming;
WebAssembly.instantiateStreaming = (response, ...args) => { WebAssembly.instantiateStreaming = (response, ...args) => {
// Do not collect wasm content length here see above
const file = response.url.substring( const file = response.url.substring(
new URL(response.url).origin.length + 1 new URL(response.url).origin.length + 1
); );
@ -10,18 +18,16 @@ function monkeyPatch(progressFun) {
new ReadableStream( new ReadableStream(
{ {
async start(controller) { async start(controller) {
const contentLength = response.headers.get("content-length");
const total = parseInt(contentLength, 10);
const reader = response.clone().body.getReader(); const reader = response.clone().body.getReader();
let loaded = 0; let loaded = 0;
for (; ;) { for (; ;) {
const { done, value } = await reader.read(); const { done, value } = await reader.read();
if (done) { if (done) {
progressFun(file, total, total); if(wasmSize) progressFun(file, wasmSize);
break; break;
} }
loaded += value.byteLength; loaded += value.byteLength;
progressFun(file, loaded, total); progressFun(file, loaded);
controller.enqueue(value); controller.enqueue(value);
} }
controller.close(); controller.close();
@ -40,13 +46,16 @@ function monkeyPatch(progressFun) {
return _instantiateStreaming(reportingResponse, ...args); return _instantiateStreaming(reportingResponse, ...args);
} }
} }
monkeyPatch((file, done, total) => { monkeyPatch((file, done) => {
if (total === 0 || done > total) if (!wasmSize) return;
if (done > wasmSize) {
console.log(`Warning: downloaded size ${done} is larger than wasm size ${wasmSize}`);
return; return;
};
const percent = ((done / total) * 100).toFixed(0); const percent = ((done / wasmSize) * 100).toFixed(0);
const mibNow = (done / 1024**2).toFixed(1); 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'); let root = document.querySelector(':root');
root.style.setProperty("--progress", `${percent}%`) root.style.setProperty("--progress", `${percent}%`)