Add script to download the correct version of canvas

Signed-off-by: Sebastian Malton <sebastian@malton.name>

package.json

@@ -78,6 +78,7 @@
     "build:theme-vars": "yarn run ts-node build/build_theme_vars.ts",
     "lint": "PROD=true yarn run eslint --ext js,ts,tsx --max-warnings=0 .",
     "lint:fix": "yarn run lint --fix",
+    "postinstall": "yarn run fix-canvas-deps",
     "mkdocs-serve-local": "docker build -t mkdocs-serve-local:latest mkdocs/ && docker run --rm -it -p 8000:8000 -v ${PWD}:/docs mkdocs-serve-local:latest",
     "verify-docs": "docker build -t mkdocs-serve-local:latest mkdocs/ && docker run --rm -v ${PWD}:/docs mkdocs-serve-local:latest build --strict",
     "typedocs-extensions-api": "yarn run typedoc src/extensions/extension-api.ts",
@@ -86,7 +87,9 @@
     "version": "yarn run version-checkout && git add package.json && yarn run version-commit",
     "postversion": "git push --set-upstream ${GIT_REMOTE:-origin} release/v$npm_package_version",
     "precreate-release-pr": "npx swc ./scripts/create-release-pr.ts -o ./scripts/create-release-pr.mjs",
-    "create-release-pr": "node ./scripts/create-release-pr.mjs"
+    "create-release-pr": "node ./scripts/create-release-pr.mjs",
+    "prefix-canvas-deps": "npx swc ./scripts/fix-canvas-deps.ts -o ./scripts/fix-canvas-deps.mjs",
+    "fix-canvas-deps": "node ./scripts/fix-canvas-deps.mjs"
   },
   "config": {
     "k8sProxyVersion": "0.3.0",

scripts/fix-canvas-deps.ts

@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import child_process from "child_process";
+import { remove } from "fs-extra";
+import fetch from "node-fetch";
+import { platform } from "process";
+import { SemVer } from "semver";
+import stream from "stream";
+import { promisify } from "util";
+import { extract } from "tar";
+
+// From "Node Major Version" to NODE_MODULE_VERSION
+const NODE_MODULE_VERSIONS: Partial<Record<string, string>> = {
+  "16": "93",
+  "17": "102",
+  "18": "108",
+  "19": "111",
+};
+
+function canvasPrebuiltUrlBuilder(canvasVersion: SemVer, nodeVersion: string) {
+  const compiler = platform === "linux"
+    ? "glibc"
+    : "unknown";
+
+  return `https://github.com/Automattic/node-canvas/releases/download/v${canvasVersion.format()}/canvas-v${canvasVersion.format()}-node-v${nodeVersion}-${platform}-${compiler}-x64.tar.gz`;
+}
+
+const exec = promisify(child_process.exec);
+const pipeline = promisify(stream.pipeline);
+
+const electronVersionCommand = "npm list --depth=0 --json";
+const { stdout } = await exec(electronVersionCommand);
+const output = JSON.parse(stdout);
+
+const nodeVersion = new SemVer(output.dependencies["@types/node"].version);
+const nodeModuleVersion = NODE_MODULE_VERSIONS[`${nodeVersion.major}`];
+
+if (!nodeModuleVersion) {
+  throw new Error(`Unknown node major version "${nodeVersion.major}". You need to update the NODE_MODULE_VERSIONS table above from https://nodejs.org/en/download/releases/`);
+}
+
+const canvasVersion = new SemVer(output.dependencies["canvas"].version);
+const canvasPrebuildUrl = canvasPrebuiltUrlBuilder(canvasVersion, nodeModuleVersion);
+
+await remove("./node_modules/canvas/build/Release");
+
+const canvasPrebuilt = await fetch(canvasPrebuildUrl);
+
+if (canvasPrebuilt.status !== 200) {
+  throw new Error(`Failed to download prebuilt from ${canvasPrebuildUrl}: ${canvasPrebuilt.statusText}`);
+}
+
+const dest = extract({
+  cwd: "./node_modules/canvas/build",
+});
+
+await pipeline(canvasPrebuilt.body, dest);