Enhance compatibility of emscripten built codecs with Cloudflare Workers

[jamsinclair]

Currently using the packages for avif, jpeg and webp would require workarounds at build time to work in Cloudflare Workers. This was shown in the Cloudflare Worker Example.

It required:

• Polyfilling the ImageData class into the global scope
• At build time replacing import.meta.url and self.location.href values.

This added the burden onto consumers of these packages and was highlighted in issues #20 and possibly #18

This PR:

• Adds a pre script that polyfills these values in the Emscripten Module glue code at runtime – only when run in a Cloudflare Worker
• Updates the examples to work with the latest module versions

[sengho66]

When decoding or encoding using the png module, the object globalThis.ImageData will need to be polyfilled too. I don’t see the script pre.js being included in the module, I suppose this needs to be included in the source and also in Makefile?

Tested this on my machine by polyfilling it manually in my project, not sure how cpp works so I have no idea how to make a PR.

[jamsinclair]

Thanks for bringing that to my attentioin @sengho66, the png module is Rust based and so doesn't follow the usual emscripten approach.

I've created an issue (#25) and will follow up when I get a chance.

[jamsinclair]

@sengho66 I've released v2.1.0 of @jsquash/png, let me know if that works for you 🙇

[sengho66]

@sengho66 I've released v2.1.0 of @jsquash/png, let me know if that works for you 🙇

Thank you, will have a look when I have the chance.

Also I am quite new to the open source scene, not sure if it’s alright to ask non-related question in a specific topic.

When importing the compiled binary of the webp’s wasm module directly, Typescript will warn you that module is not found because webp_enc_simd.wasm.d.ts doesn’t exist. I have written a script in Rust to emit the declaration by reading into the binary and then parse them and create a d.ts for it. However the names are mangled because of some of the clang flags tell the compiler to minify the emscripten’s code so the emitted declaration’s name will be weird. Do you happen to know how to have clang or emcc not to mangle and preserve the function name? Again, I do not know anything about cpp or emcc.

Thanks!

[jamsinclair]

When importing the compiled binary of the webp’s wasm module directly, Typescript will warn you that module is not found because webp_enc_simd.wasm.d.ts doesn’t exist.

You must be using some kind of bundler with your Frontend application, as normally you can't import wasm binaries directly. The easiest way to type it would be to cast it to WebAssembly.Module.

I have written a script in Rust to emit the declaration by reading into the binary and then parse them and create a d.ts for it.

This sounds very complicated 😅 . Would a simpler solution work? As you're likely using it with the generated glue code they're already typed as part of this library. See packages/webp/codec/enc/webp_enc.d.ts