Switch to @resvg/resvg-wasm for generate-images

.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

@@ -68,6 +68,7 @@
   "devDependencies": {
     "@eslint-community/eslint-plugin-eslint-comments": "4.5.0",
     "@playwright/test": "1.54.1",
+    "@resvg/resvg-wasm": "2.6.2",
     "@stoplight/spectral-cli": "6.15.0",
     "@stylistic/eslint-plugin-js": "3.1.0",
     "@stylistic/stylelint-plugin": "4.0.0",

tools/generate-images.js

@@ -1,8 +1,10 @@
 #!/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';
+import {join, dirname} from 'node:path';
+import {fileURLToPath} from 'node:url';
 
 function doExit(err) {
   if (err) console.error(err);
@@ -27,34 +29,20 @@ 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 === true && {background: 'white'}),
+  });
+  const renderedImage = resvgJS.render();
+  const pngBytes = renderedImage.asPng();
+  await writeFile(outputFile, pngBytes);
 }
 
 async function main() {
+  await initWasm(readFile(fileURLToPath(import.meta.resolve('@resvg/resvg-wasm/index_bg.wasm'))));
   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');