update deps

package.json

@@ -37,7 +37,7 @@
     "check:spelling": "cspell --cache --no-progress '**/*'",
     "testonly": "npm run build:demo && npm pack && docker compose up --abort-on-container-exit --build test",
     "declarations": "tsc --emitDeclarationOnly -p tsconfig.lib.json",
-    "update-snapshots": "docker compose up --build update-snapshots"
+    "update-snapshots": "npm run build:demo && npm pack && docker compose up --build update-snapshots"
   },
   "peerDependencies": {
     "graphql": ">=16.5.0",
@@ -46,46 +46,46 @@
   "dependencies": {
     "@emotion/react": "11.13.3",
     "@emotion/styled": "11.13.0",
-    "@mui/icons-material": "5.16.7",
+    "@mui/icons-material": "6.1.1",
     "@mui/lab": "5.0.0-alpha.169",
-    "@mui/material": "5.16.7",
-    "commonmark": "0.30.0",
+    "@mui/material": "6.1.1",
+    "commonmark": "0.31.2",
     "svg-pan-zoom": "3.6.1"
   },
   "devDependencies": {
-    "@playwright/test": "1.32.0",
-    "@svgr/webpack": "6.5.1",
-    "@types/commonmark": "0.27.5",
-    "@types/node": "20.4.8",
-    "@types/react": "18.3.8",
+    "@playwright/test": "1.47.2",
+    "@svgr/webpack": "8.1.0",
+    "@types/commonmark": "0.27.9",
+    "@types/node": "22.7.4",
+    "@types/react": "18.3.10",
     "@types/react-dom": "18.3.0",
-    "@types/webpack-node-externals": "3.0.0",
-    "@typescript-eslint/eslint-plugin": "7.8.0",
-    "@typescript-eslint/parser": "7.8.0",
+    "@types/webpack-node-externals": "3.0.4",
+    "@typescript-eslint/eslint-plugin": "8.7.0",
+    "@typescript-eslint/parser": "8.7.0",
     "cspell": "6.2.3",
-    "css-loader": "6.7.1",
-    "eslint": "8.57.0",
-    "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-playwright": "1.6.0",
-    "eslint-plugin-react": "7.34.1",
-    "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-simple-import-sort": "12.1.0",
-    "graphql": "16.5.0",
-    "mini-css-extract-plugin": "2.6.0",
+    "css-loader": "7.1.2",
+    "eslint": "8.57.1",
+    "eslint-plugin-import": "2.30.0",
+    "eslint-plugin-playwright": "1.6.2",
+    "eslint-plugin-react": "7.37.0",
+    "eslint-plugin-react-hooks": "4.6.2",
+    "eslint-plugin-simple-import-sort": "12.1.1",
+    "graphql": "16.9.0",
+    "mini-css-extract-plugin": "2.9.1",
     "postcss-cssnext": "3.1.1",
-    "postcss-import": "12.0.1",
-    "postcss-loader": "3.0.0",
+    "postcss-import": "16.1.0",
+    "postcss-loader": "8.1.1",
     "postcss-variables-loader": "6.0.0",
-    "prettier": "3.0.1",
+    "prettier": "3.3.3",
     "raw-loader": "4.0.2",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "style-loader": "0.23.1",
+    "style-loader": "4.0.0",
     "svg-as-symbol-loader": "1.2.4",
-    "ts-loader": "5.3.3",
+    "ts-loader": "9.5.1",
     "ts-node": "10.9.2",
-    "typescript": "4.9.5",
-    "webpack": "5.94.0",
+    "typescript": "5.5.4",
+    "webpack": "5.95.0",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "5.1.0",
     "webpack-node-externals": "3.0.0"

src/components/IntrospectionModal.tsx

@@ -6,12 +6,12 @@ import Button from '@mui/material/Button';
 import Dialog from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
+import Grid from '@mui/material/Grid2';
 import Stack from '@mui/material/Stack';
 import Tab from '@mui/material/Tab';
 import TextField from '@mui/material/TextField';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
-import Grid from '@mui/material/Unstable_Grid2';
 import { buildClientSchema } from 'graphql/utilities';
 import { useState } from 'react';
 
@@ -179,7 +179,7 @@ function PresetsTab(props: PresetsTabProps) {
   return (
     <Grid container spacing={4}>
       {presetNames.map((name) => (
-        <Grid xs={12} sm={6} key={name}>
+        <Grid size={{ xs: 12, sm: 6 }} key={name}>
           <Button
             fullWidth
             variant="outlined"

src/graph/graphviz-worker.ts

@@ -15,7 +15,7 @@ export class VizWorker {
     maxSize: 10,
   });
   private _worker: Worker;
-  private _listeners: Array<(result: RenderResult) => void> = [];
+  private _listeners: Map<number, (result: RenderResult) => void> = new Map();
 
   constructor() {
     const blob = new Blob([VizWorkerSource], {
@@ -28,8 +28,8 @@ export class VizWorker {
     this._worker.addEventListener('message', (event) => {
       const { id, result } = event.data as RenderResponse;
 
-      this._listeners[id](result);
-      delete this._listeners[id];
+      this._listeners.get(id)?.(result);
+      this._listeners.delete(id);
     });
   }
 
@@ -67,9 +67,9 @@ export class VizWorker {
 
   _renderString(src: string): Promise<string> {
     return new Promise((resolve, reject) => {
-      const id = this._listeners.length;
+      const id = this._listeners.size;
 
-      this._listeners.push(function (result): void {
+      this._listeners.set(id, function (result): void {
         if ('error' in result) {
           const { error } = result;
           const e = new Error(error.message);
@@ -94,7 +94,6 @@ async function decompressFromDataURL(dataURL: string): Promise<string> {
   const blob = await response.blob();
   switch (blob.type) {
     case 'application/gzip': {
-      // @ts-expect-error DecompressionStream is missing from DOM types
       const stream = blob.stream().pipeThrough(new DecompressionStream('gzip'));
       const decompressedBlob = await streamToBlob(stream, 'text/plain');
       return decompressedBlob.text();
@@ -109,7 +108,6 @@ async function decompressFromDataURL(dataURL: string): Promise<string> {
 async function compressToDataURL(str: string): Promise<string> {
   try {
     const blob = new Blob([str], { type: 'text/plain' });
-    // @ts-expect-error CompressionStream is missing from DOM types
     const stream = blob.stream().pipeThrough(new CompressionStream('gzip'));
     const compressedBlob = await streamToBlob(stream, 'application/gzip');
     return blobToDataURL(compressedBlob);
@@ -131,6 +129,7 @@ function blobToDataURL(blob: Blob): Promise<string> {
       };
       fileReader.readAsDataURL(blob);
     } catch (err) {
+      // eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors
       reject(err);
     }
   });

src/graph/svg-renderer.ts

@@ -12,13 +12,17 @@ export async function renderSvg(typeGraph: TypeGraph) {
   return svg;
 }
 
+// eslint-disable-next-line @typescript-eslint/no-require-imports
 const RelayIconSvg = require('!!svg-as-symbol-loader?id=RelayIcon!../components/icons/relay-icon.svg');
+// eslint-disable-next-line @typescript-eslint/no-require-imports
 const DeprecatedIconSvg = require('!!svg-as-symbol-loader?id=DeprecatedIcon!../components/icons/deprecated-icon.svg');
+
 const svgNS = 'http://www.w3.org/2000/svg';
 const xlinkNS = 'http://www.w3.org/1999/xlink';
 
 function preprocessVizSVG(svgString: string) {
   //Add Relay and Deprecated icons
+  // eslint-disable-next-line @typescript-eslint/no-base-to-string
   svgString = svgString.replace(/<svg [^>]*>/, '$&' + RelayIconSvg);
   svgString = svgString.replace(/<svg [^>]*>/, '$&' + DeprecatedIconSvg);
 

src/graph/viewport.ts

@@ -238,7 +238,7 @@ export class Viewport {
     this.resizeObserver.disconnect();
     try {
       this.zoomer.destroy();
-    } catch (e) {
+    } catch {
       // skip
     }
   }

src/middleware/hapi.ts

@@ -1,5 +1,6 @@
 import renderVoyagerPage, { MiddlewareOptions } from './render-voyager-page';
 
+// eslint-disable-next-line @typescript-eslint/no-require-imports
 const pkg = require('../package.json');
 
 const hapi = {

src/utils/is-match.tsx

@@ -6,7 +6,7 @@ export function isMatch(sourceText: string, searchValue: string | null) {
   try {
     const escaped = searchValue.replace(/[^_0-9A-Za-z]/g, (ch) => '\\' + ch);
     return sourceText.search(new RegExp(escaped, 'i')) !== -1;
-  } catch (e) {
+  } catch {
     return sourceText.toLowerCase().includes(searchValue.toLowerCase());
   }
 }

webpack.config.ts

@@ -6,6 +6,7 @@ import * as MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import * as webpack from 'webpack';
 import * as NodeExternals from 'webpack-node-externals';
 
+// eslint-disable-next-line @typescript-eslint/no-require-imports
 const packageJSON = require('./package.json');
 const BANNER = `GraphQL Voyager - Represent any GraphQL API as an interactive graph
 -------------------------------------------------------------