Fix sharp import issue (#251)

This PR updates the window controls overlay code to remove the
dependency on `sharp`, which is a natively-compiled Node library that is
really hard to package for Electron given the way that we strip node
modules after bundling. I've replaced this with `pngjs`, which has a
smaller footprint and is still relatively fast (it doesn't need to be
perfect since it runs on the Node process instead of the browser
process).

electron-builder.config.cjs

@@ -31,8 +31,6 @@ const config = {
   },
   asarUnpack: [
     "dist/bin/**/*", // wavesrv and wsh binaries
-    "**/node_modules/sharp/**/*", // Requirement for sharp, a dependency of the fast-average-color-node package
-    "**/node_modules/@img/**/*", // Requirement sharp, a dependency of the fast-average-color-node package
   ],
   mac: {
     target: [

electron.vite.config.ts

@@ -17,7 +17,6 @@ export default defineConfig({
                 input: {
                     index: "emain/emain.ts",
                 },
-                external: ["sharp"],
             },
             outDir: "dist/main",
         },

emain/emain.ts

@@ -2,11 +2,12 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import * as electron from "electron";
-import { getAverageColor } from "fast-average-color-node";
+import { FastAverageColor } from "fast-average-color";
 import fs from "fs";
 import * as child_process from "node:child_process";
 import os from "os";
 import * as path from "path";
+import { PNG } from "pngjs";
 import * as readline from "readline";
 import { sprintf } from "sprintf-js";
 import { debounce } from "throttle-debounce";
@@ -596,8 +597,9 @@ electron.ipcMain.on("update-window-controls-overlay", async (event, rect: Dimens
         };
         const overlay = await event.sender.capturePage(electronRect);
         const overlayBuffer = overlay.toPNG();
-
-        const color = await getAverageColor(overlayBuffer);
+        const png = PNG.sync.read(overlayBuffer);
+        const fac = new FastAverageColor();
+        const color = fac.prepareResult(fac.getColorFromArray4(png.data));
         const window = electron.BrowserWindow.fromWebContents(event.sender);
         window.setTitleBarOverlay({
             color: unamePlatform === "linux" ? color.rgba : "#00000000", // Windows supports a true transparent overlay, so we don't need to set a background color.

package.json

@@ -29,6 +29,7 @@
     "devDependencies": {
         "@chromatic-com/storybook": "^1.6.1",
         "@eslint/js": "^9.9.0",
+        "@rollup/plugin-node-resolve": "^15.2.3",
         "@storybook/addon-essentials": "^8.2.9",
         "@storybook/addon-interactions": "^8.2.9",
         "@storybook/addon-links": "^8.2.9",
@@ -40,6 +41,7 @@
         "@types/electron": "^1.6.10",
         "@types/node": "^22.3.0",
         "@types/papaparse": "^5",
+        "@types/pngjs": "^6.0.5",
         "@types/react": "^18.3.3",
         "@types/shell-quote": "^1",
         "@types/sprintf-js": "^1",
@@ -58,7 +60,6 @@
         "prettier-plugin-jsdoc": "^1.3.0",
         "prettier-plugin-organize-imports": "^4.0.0",
         "rollup-plugin-flow": "^1.1.1",
-        "sharp": "^0.33.5",
         "storybook": "^8.2.9",
         "ts-node": "^10.9.2",
         "tslib": "^2.6.3",
@@ -92,7 +93,7 @@
         "css-tree": "^2.3.1",
         "dayjs": "^1.11.12",
         "electron-updater": "6.3.3",
-        "fast-average-color-node": "^3.0.0",
+        "fast-average-color": "^9.4.0",
         "htl": "^0.3.1",
         "html-to-image": "^1.11.11",
         "immer": "^10.1.1",
@@ -101,6 +102,7 @@
         "overlayscrollbars": "^2.10.0",
         "overlayscrollbars-react": "^0.5.6",
         "papaparse": "^5.4.1",
+        "pngjs": "^7.0.0",
         "react": "^18.3.1",
         "react-dnd": "^16.0.1",
         "react-dnd-html5-backend": "^16.0.1",