feat: Wasm32 target custom font loading

[antmelnyk]

Heyo!

I know there is an opened but a bit stale PR that improves font handling, but I feel like ResvgJS lacks a direct, essential font-loading support on the wasm32 target before going into some more complicated APIs.

What do you think about the solution presented in this PR? Dead simple, with no API breaking change, just new optional font options and the possibility to pass an array of font data.

Works like this:

let resvg_wasm = await fetch("./index_bg.wasm");
await initWasm(resvg_wasm);

// Load font as buffer
const req = new XMLHttpRequest();
req.open("GET", "./Roboto-Regular.ttf", true);
req.responseType = "arraybuffer";

// Make sure it's a Uint8Array
const arrayBuffer = req.response;
const font = new Uint8Array(arrayBuffer);

const opts = {
  font: {
    fontsBuffers: [font],
  },
};

const resvgJS = new Resvg(svg, opts);

In the future, more complex API can be built on top of it or just, well, replaced if there is a better solution at one point.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
resvg-js	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 5, 2023 10:55am

[zimond]

I like this PR and in fact it does not conflict with the original font resolving PR, which focuses on resolving font related attributes in the SVG so that the users could get a hint about which font buffer to load. And this PR simply provides a way to load the buffer.

[antmelnyk]

I agree. Those are orthogonal changes!

The only problem I see now is that the WASM file size increased by 600 KBs, probably because of the addition of the text feature from Resvg. I wonder if something can be done about it...

[yisibl]

Thank you for your contribution, this is a great addition. I expect this wasm file to be generated and distributed independently, given the file size limitations for certain scenarios.

I have been very busy lately and will look at this PR in April.

[yisibl]

@antmelnyk Can you add some test cases?

[shuding]

Looking forward to seeing this being landed too, as we will likely to rely on this feature to solve vercel/satori#186 👍

[zimond]

@antmelnyk can you add some test cases covering this piece of code? Thanks. Lacking tests is what blocking this PR being merged.

[antmelnyk]

Hi. I'm sorry for the delay. I added the test. I hope it's OK.

Please rerun all the necessary builds for release with the latest dependencies because I don't know precisely what must be run. There are a lot of build and bundle commands in package.json.
Also, don't forget that this increased the wasm size by a lot, so as discussed, you might want to create a separate bundle with a text feature.

[zimond]

@antmelnyk lint is failing

[yisibl]

Please rerun all the necessary builds for release with the latest dependencies because I don't know precisely what must be run. There are a lot of build and bundle commands in package.json.

You just need to run two sets of commands:

 npm run build && npm run test
 npm run build:wasm && npm run test:wasm

[yisibl]

There is no fontsBuffers option in index.d.ts, which is currently specific to Wasm.

[lasseschou]

Great work. @yisibl can you please release a new version so we can start using fonts? 👍

[yisibl]

@lasseschou Please wait for me to update the documentation and playground.

[yisibl]

This PR has been released to v2.5.0, please note that the option name has been renamed from fontsBuffers to fontBuffers.