Switch to @resvg/resvg-wasm for generate-images (#35415)

Use the WASM module of [`resvg-js`](https://github.com/thx/resvg-js) to
replace `fabric` and the problematic native `canvas` dependency. WASM
works cross-platform so we can include it in the main `package.json`.

Author: silverwind

.gitignore

@@ -74,7 +74,6 @@ cpu.out
 /tests/*.ini
 /tests/**/*.git/**/*.sample
 /node_modules
-/tools/node_modules
 /.venv
 /yarn.lock
 /yarn-error.log

Makefile

@@ -230,7 +230,7 @@ node-check:
 
 .PHONY: clean-all
 clean-all: clean ## delete backend, frontend and integration files
-	rm -rf $(WEBPACK_DEST_ENTRIES) node_modules tools/node_modules
+	rm -rf $(WEBPACK_DEST_ENTRIES) node_modules
 
 .PHONY: clean
 clean: ## delete backend and integration files
@@ -847,10 +847,6 @@ node_modules: pnpm-lock.yaml
 	pnpm install --frozen-lockfile
 	@touch node_modules
 
-tools/node_modules: tools/package.json
-	cd tools && pnpm install
-	@touch tools/node_modules
-
 .venv: uv.lock
 	uv sync
 	@touch .venv
@@ -925,7 +921,7 @@ generate-gitignore: ## update gitignore files
 	$(GO) run build/generate-gitignores.go
 
 .PHONY: generate-images
-generate-images: | node_modules tools/node_modules ## generate images (requires cairo development packages)
+generate-images: | node_modules ## generate images
 	cd tools && node generate-images.js $(TAGS)
 
 .PHONY: generate-manpage

package.json

@@ -15,6 +15,7 @@
     "@github/text-expander-element": "2.9.2",
     "@mcaptcha/vanilla-glue": "0.1.0-alpha-3",
     "@primer/octicons": "19.15.5",
+    "@resvg/resvg-wasm": "2.6.2",
     "@silverwind/vue3-calendar-heatmap": "2.0.6",
     "@techknowlogick/license-checker-webpack-plugin": "0.3.0",
     "add-asset-webpack-plugin": "3.0.0",

pnpm-lock.yaml

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import {loadSVGFromString, Canvas, Rect, util} from 'fabric/node'; // eslint-disable-line import-x/no-unresolved
+import {initWasm, Resvg} from '@resvg/resvg-wasm';
 import {optimize} from 'svgo';
 import {readFile, writeFile} from 'node:fs/promises';
 import {argv, exit} from 'node:process';
@@ -27,37 +27,23 @@ async function generate(svg, path, {size, bg}) {
     return;
   }
 
-  const {objects, options} = await loadSVGFromString(svg);
-  const canvas = new Canvas();
-  canvas.setDimensions({width: size, height: size});
-  const ctx = canvas.getContext('2d');
-  ctx.scale(options.width ? (size / options.width) : 1, options.height ? (size / options.height) : 1);
-
-  if (bg) {
-    canvas.add(new Rect({
-      left: 0,
-      top: 0,
-      height: size * (1 / (size / options.height)),
-      width: size * (1 / (size / options.width)),
-      fill: 'white',
-    }));
-  }
-
-  canvas.add(util.groupSVGElements(objects, options));
-  canvas.renderAll();
-
-  let png = Buffer.from([]);
-  for await (const chunk of canvas.createPNGStream()) {
-    png = Buffer.concat([png, chunk]);
-  }
-
-  await writeFile(outputFile, png);
+  const resvgJS = new Resvg(svg, {
+    fitTo: {
+      mode: 'width',
+      value: size,
+    },
+    ...(bg && {background: 'white'}),
+  });
+  const renderedImage = resvgJS.render();
+  const pngBytes = renderedImage.asPng();
+  await writeFile(outputFile, Buffer.from(pngBytes));
 }
 
 async function main() {
   const gitea = argv.slice(2).includes('gitea');
   const logoSvg = await readFile(new URL('../assets/logo.svg', import.meta.url), 'utf8');
   const faviconSvg = await readFile(new URL('../assets/favicon.svg', import.meta.url), 'utf8');
+  await initWasm(await readFile(new URL(import.meta.resolve('@resvg/resvg-wasm/index_bg.wasm'))));
 
   await Promise.all([
     generate(logoSvg, '../public/assets/img/logo.svg', {size: 32}),