refactor(eslint): upgrade eslint to v9 and fix breaking changes with @squonk/eslint v3

Author: OliverDudgeon

package.json

@@ -103,9 +103,9 @@
     "@bufbuild/protoc-gen-es": "2.2.5",
     "@next/bundle-analyzer": "15.2.4",
     "@playwright/test": "1.51.1",
-    "@squonk/eslint-config": "2.2.0",
+    "@squonk/eslint-config": "3.0.0",
     "dotenv": "16.4.7",
-    "eslint": "8.57.1",
+    "eslint": "9.25.1",
     "husky": "9.1.7",
     "identity-obj-proxy": "3.0.0",
     "lint-staged": "15.5.0",

pnpm-lock.yaml

@@ -117,7 +117,7 @@ export const SMILESInput = ({
   }
 
   const saveHandler = async () => {
-    const ketcher = global.ketcher;
+    const ketcher = globalThis.ketcher;
     try {
       const smi = await ketcher?.getSmiles();
       if (smi === undefined) {

src/components/SMILESInput.tsx

@@ -80,7 +80,7 @@ export const Sketcher = ({ smiles }: SketcherProps) => {
 
   // Synchronise the react state to the component
   useEffect(() => {
-    void global.ketcher?.setMolecule(smiles);
+    void globalThis.ketcher?.setMolecule(smiles);
   }, [smiles]);
 
   return (
@@ -97,7 +97,7 @@ export const Sketcher = ({ smiles }: SketcherProps) => {
       staticResourcesUrl="./" // TODO: Config for subpaths
       structServiceProvider={new StandaloneStructServiceProvider()}
       onInit={(ketcher: Ketcher) => {
-        global.ketcher = ketcher;
+        globalThis.ketcher = ketcher;
         void ketcher.setMolecule(smiles);
         window.parent.postMessage({ eventType: "init" }, "*");
       }}

src/components/Sketcher.tsx

@@ -97,6 +97,7 @@ export const JobInputFields = ({
           } else if (type === "molecules-smi") {
             // Going to replace the "molecules-smi" type as this is specified by "multiple".
             // For now though, we assume it's always multiple molecules
+            // eslint-disable-next-line no-useless-assignment
             multiple = true;
 
             const required = inputs.required?.includes(key);

src/components/runCards/JobCard/JobInputFields.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useState } from "react";
 
-import { type SDFRecord } from "@squonk/sdf-parser";
+import { type SDFRecord } from "@squonk/sdf-parser/web";
 
 import { Alert, AlertTitle, Box, LinearProgress, Typography } from "@mui/material";
 import { useQuery } from "@tanstack/react-query";

src/features/SDFViewer/SDFViewerData.tsx

@@ -1,5 +1,5 @@
 import { useGetProjectFile } from "@squonk/data-manager-client/project";
-import { createSDFTransformer } from "@squonk/sdf-parser";
+import { createSDFTransformer } from "@squonk/sdf-parser/web";
 
 import { useQuery } from "@tanstack/react-query";
 

src/features/SDFViewer/useGetSDFSchema.ts

@@ -1,6 +1,7 @@
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 
-const useIsomorphicEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+const useIsomorphicEffect = globalThis.window === undefined ? useEffect : useLayoutEffect;
 
 export interface Props {
   /** Animation duration in seconds */

src/hooks/useTimeElapsed.ts

@@ -44,11 +44,6 @@ const App = ({ Component, pageProps }: CustomAppProps) => {
   // React-Query
   const queryClient = useMemo(() => new QueryClient(), []);
 
-  // Vercel specific code is only imported if needed
-  // if (process.env.NEXT_PUBLIC_VERCEL_URL) {
-  //   import("../utils/next/vercelRedirect").then(({ vercelRedirect }) => vercelRedirect());
-  // }
-
   return (
     <StrictMode>
       <AppCacheProvider {...pageProps}>

src/pages/_app.tsx

@@ -3,7 +3,7 @@ import {
   type FilterRule,
   NodeSDFTransformer,
   type SDFRecord,
-} from "@squonk/sdf-parser";
+} from "@squonk/sdf-parser/node";
 
 import { getAccessToken, withApiAuthRequired } from "@auth0/nextjs-auth0";
 import { type NextApiRequest, type NextApiResponse } from "next";

src/pages/api/sdf-parser.ts

@@ -17,7 +17,7 @@ export const projectFileURL: (typeof API_ROUTES)["projectFile"] = (project, path
   process.env.DATA_MANAGER_API_SERVER + API_ROUTES.projectFile(project, path, file);
 
 export const projectURL = (projectId: string) =>
-  window.location.origin +
+  globalThis.location.origin +
   (process.env.NEXT_PUBLIC_BASE_PATH ?? "") +
   "/project?" +
   new URLSearchParams([["project", projectId]]).toString();

src/utils/app/routes.ts

@@ -99,7 +99,7 @@ test("Project bootstrap works", async ({ page, baseURL }) => {
   await page.locator(`button:has-text("Create")`).isDisabled();
 
   const regexp = new RegExp(
-    baseURL + "/?\\?project=project-[\\w\\d]+-[\\w\\d]+-[\\w\\d]+-[\\w\\d]+-[\\w\\d]+",
+    baseURL + String.raw`/?\?project=project-[\w\d]+-[\w\d]+-[\w\d]+-[\w\d]+-[\w\d]+`,
     "u",
   );
   await expect(page).toHaveURL(regexp, { timeout: 30_000 });