chore(dev-deps): Bump jimp from 0.22.10 to 1.6.0 (#577)

This bumps `jimp` from `0.22.10` to `1.6.0` and handles the breaking
changes.

This removes the dependency on `phin`, which resolves this Dependabot
alert:
https://github.com/MetaMask/snaps-directory/security/dependabot/18

Author: Mrtenz

.eslintrc.js

@@ -55,6 +55,15 @@ module.exports = {
         '@metamask/eslint-config-nodejs',
         'plugin:jest-dom/recommended',
       ],
+
+      rules: {
+        'jsdoc/check-tag-names': [
+          'error',
+          {
+            definedTags: ['jest-environment'],
+          },
+        ],
+      },
     },
 
     {

.yarn/patches/@jimp-plugin-print-npm-1.6.0-66dc34fcee.patch

@@ -0,0 +1,21 @@
+diff --git a/dist/commonjs/load-font.js b/dist/commonjs/load-font.js
+index 7c158d32db4965d7b6c739c6ed2382251232b808..dad1ff91af23a661eefdc5d074cb61791c98e512 100644
+--- a/dist/commonjs/load-font.js
++++ b/dist/commonjs/load-font.js
+@@ -2,6 +2,7 @@
+ Object.defineProperty(exports, "__esModule", { value: true });
+ exports.loadFont = loadFont;
+ const load_bitmap_font_js_1 = require("./load-bitmap-font.js");
++const _fs = require("fs");
+ /**
+  * Loads a Bitmap Font from a file.
+  * @param file A path or URL to a font file
+@@ -20,7 +21,7 @@ const load_bitmap_font_js_1 = require("./load-bitmap-font.js");
+ async function loadFont(file) {
+     let fileOrBuffer = file;
+     if (typeof window === "undefined" && !load_bitmap_font_js_1.isWebWorker) {
+-        const { existsSync, promises: fs } = await import("fs");
++        const { existsSync, promises: fs } = _fs;
+         if (existsSync(file)) {
+             fileOrBuffer = await fs.readFile(file);
+         }

jest.setup.ts

@@ -32,7 +32,8 @@ beforeEach(() => {
     originalConsoleError(error, ...args);
   });
 
-  const realAddEventListener = window?.addEventListener?.bind?.(window);
+  const realAddEventListener =
+    typeof window !== 'undefined' && window?.addEventListener?.bind?.(window);
 
   // Return window.ethereum for EIP6963 when applicable.
   Object.assign(globalThis, 'window', {
@@ -54,7 +55,7 @@ beforeEach(() => {
             },
           }),
         );
-      } else {
+      } else if (realAddEventListener) {
         realAddEventListener(type, listener);
       }
     }),

package.json

@@ -42,6 +42,7 @@
   },
   "resolutions": {
     "@chakra-ui/focus-lock@2.1.0": "patch:@chakra-ui/focus-lock@npm%3A2.1.0#./.yarn/patches/@chakra-ui-focus-lock-npm-2.1.0-46e41f49ee.patch",
+    "@jimp/plugin-print@1.6.0": "patch:@jimp/plugin-print@npm%3A1.6.0#./.yarn/patches/@jimp-plugin-print-npm-1.6.0-66dc34fcee.patch",
     "@noble/hashes@1.3.1": "patch:@noble/hashes@npm%3A1.3.2#./.yarn/patches/@noble-hashes-npm-1.3.2-1e619f9da0.patch",
     "@noble/hashes@^1.0.0": "patch:@noble/hashes@npm%3A1.3.2#./.yarn/patches/@noble-hashes-npm-1.3.2-1e619f9da0.patch",
     "@noble/hashes@^1.3.1": "patch:@noble/hashes@npm%3A1.3.2#./.yarn/patches/@noble-hashes-npm-1.3.2-1e619f9da0.patch",
@@ -141,7 +142,7 @@
     "jest-image-snapshot": "^6.2.0",
     "jest-it-up": "^2.0.2",
     "jest-when": "^3.6.0",
-    "jimp": "^0.22.10",
+    "jimp": "^1.6.0",
     "lint-staged": "^16.1.2",
     "nanoid": "^3.3.7",
     "node-fetch-cache": "^3.1.3",

src/utils/seo/images.test.ts

@@ -1,3 +1,7 @@
+/**
+ * @jest-environment node
+ */
+
 import { configureToMatchImageSnapshot } from 'jest-image-snapshot';
 import { resolve } from 'path';
 

src/utils/seo/images.ts

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-nodejs-modules, no-restricted-globals */
 
 import assert from 'assert';
-import Jimp from 'jimp';
+import { Jimp, loadFont, measureText, measureTextHeight } from 'jimp';
 import shuffle from 'lodash/shuffle';
 import sharp, { type OverlayOptions } from 'sharp';
 
@@ -41,16 +41,21 @@ export async function createFallbackIcon(
   size = 256,
   fontPath = 'fonts/icon/grey.fnt',
 ) {
-  const image = await Jimp.create(size, size);
-  const font = await Jimp.loadFont(getAssetPath(fontPath));
+  const image = new Jimp({ width: size, height: size });
+  const font = await loadFont(getAssetPath(fontPath));
 
-  const letterX = (size - Jimp.measureText(font, text)) / 2;
-  const letterY = (size - Jimp.measureTextHeight(font, text, size)) / 2;
+  const letterX = (size - measureText(font, text)) / 2;
+  const letterY = (size - measureTextHeight(font, text, size)) / 2;
 
-  image.print(font, letterX, letterY, text);
+  image.print({
+    font,
+    text,
+    x: letterX,
+    y: letterY,
+  });
 
   const icon = getImage('icon');
-  const input = await image.getBufferAsync(Jimp.MIME_PNG);
+  const input = await image.getBuffer('image/png');
 
   return icon
     .resize(size, size)
@@ -182,7 +187,7 @@ export async function createSnapImage(
 
   // The name may take two lines, so we need to calculate the height of the
   // name to determine the top of the author text.
-  const nameHeight = Jimp.measureTextHeight(black, name, FONT_MAX_WIDTH);
+  const nameHeight = measureTextHeight(black, name, FONT_MAX_WIDTH);
   const authorTop = 85 + nameHeight;
 
   background.composite([

src/utils/seo/utils.ts

@@ -1,13 +1,13 @@
 /* eslint-disable import/no-nodejs-modules, no-restricted-globals */
 
-import Jimp from 'jimp';
+import { Jimp, JimpMime, loadFont, measureText } from 'jimp';
 import { resolve } from 'path';
 import sharp from 'sharp';
 
 import { BASE_SEO_DIRECTORY, CANVAS_WIDTH, JIMP_FONTS } from './constants';
 import type { Fields } from '../snaps';
 
-export type Font = Awaited<ReturnType<typeof Jimp.loadFont>>;
+export type Font = Awaited<ReturnType<typeof loadFont>>;
 
 export type Snap = Fields<Queries.Snap, 'name'> & { icon?: string };
 export type SnapWithIcon = Snap & { icon: string };
@@ -21,14 +21,11 @@ export type SnapWithIcon = Snap & { icon: string };
  */
 export async function getFonts(name: string, author = '') {
   for (const { maxWidth, black, grey } of JIMP_FONTS) {
-    const font = await Jimp.loadFont(black);
-    const width = Math.max(
-      Jimp.measureText(font, name),
-      Jimp.measureText(font, author),
-    );
+    const font = await loadFont(black);
+    const width = Math.max(measureText(font, name), measureText(font, author));
 
     if (width <= maxWidth) {
-      return Promise.all([Jimp.loadFont(black), Jimp.loadFont(grey)]);
+      return Promise.all([loadFont(black), loadFont(grey)]);
     }
   }
 
@@ -76,10 +73,16 @@ export function normalizeName(name: string) {
  * @returns The buffer of the rendered image.
  */
 export async function getText(value: string, font: Font) {
-  const image = await Jimp.create(700, 300);
-  image.print(font, 0, 0, normalizeName(value), 700);
+  const image = new Jimp({ width: 700, height: 300 });
+  image.print({
+    font,
+    x: 0,
+    y: 0,
+    text: normalizeName(value),
+    maxWidth: 700,
+  });
 
-  return image.getBufferAsync(Jimp.MIME_PNG);
+  return image.getBuffer(JimpMime.png);
 }
 
 /**