Simple CDN example

[josephrocca]

It'd be great if there were a simple copy+paste CDN example in the readme. This would allow people to easily try it out in the browser, deno, etc. with a simple copy-paste code snippet. I tried this:

let webp = await import("https://cdn.jsdelivr.net/npm/@jsquash/webp@1.2.0/+esm");

and it loads, but when I try decoding:

await webp.decode(arrayBuffer)

it can't find the codec files. I saw this example in the readme:

import decode, { init as initWebpDecode } from '@jsquash/webp/decode';

initWebpDecode(WASM_MODULE); // The `WASM_MODULE` variable will need to be sourced by yourself and passed as an ArrayBuffer.
const image = await fetch('./image.webp').then(res => res.arrayBuffer()).then(decode);

But https://cdn.jsdelivr.net/npm/@jsquash/webp/decode@1.2.0/+esm doesn't exist, and @jsquash/webp only seems to export decode and encode functions - nothing else.

I also tried esm.sh: https://esm.sh/@jsquash/webp@1.2.0 but it isn't even able to load the module in the first place, for whatever reason.

[josephrocca]

Ah, looks like unpkg is able to correctly find the codec files! This works:

let webp = await import(`https://unpkg.com/@jsquash/webp@1.2.0/index.js?module`);
let imageData = await webp.decode(arrayBuffer);

Could an example like that be added to the readme? Let me know if you want me to make the pull request.

[jamsinclair]

@josephrocca Thanks for the suggestion. I can look into adding an unpkg example 👍

Looks like there might be an issue with jsDelivr and wasm files. Is there a known fix for this? If not, I think it's best to stick with unpkg.

I will note that this package has been built specifically for the browser runtimes. I am unsure of Deno and Bun compatibility at this time and am in no rush to implement.

[josephrocca]

Thanks! A simple example like that in the readme would be really helpful helpful I think.

It doesn't currently work with Deno (just says "Decoding error"), but that's likely not your problem anyway, since Deno aims to be ~completely compatible with browsers (so long as e.g. DOM isn't needed), so it should eventually work as they continue to improve compatibility.

[jamsinclair]

@josephrocca Deno does seem to work with what I've played around with. I've added some examples in commit 60a959a.

Deno has yet to support the ImageData API (denoland/deno#19288) so you'll need to polyfill that.

Let me know if you're still encountering issues and I can take a look 👍

[josephrocca]

Thanks, Jamie! 🙏