React Compiler ESLint plugin & update Vite/Vitest (#782)

* Add eslint-plugin-react-compiler * Fix react compiler issues * Fix lint error * Punt on lint errors * Update eslint react compiler * Update vitest and coverage reporter * Update Vite * Update changelog
aws · Feb 7, 2025 · 9ba2a68 · 9ba2a68
1 parent 46372f5
commit 9ba2a68
Show file tree

Hide file tree

Showing 17 changed files with 686 additions and 277 deletions.
diff --git a/Changelog.md b/Changelog.md
@@ -38,6 +38,7 @@
 - **Updated** dependencies and remove unused dependencies
   ([#764](https://github.com/aws/graph-explorer/pull/764),
   [#776](https://github.com/aws/graph-explorer/pull/776),
+  [#782](https://github.com/aws/graph-explorer/pull/782),
   [#783](https://github.com/aws/graph-explorer/pull/783))
 
 ## Release 1.13.0

diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -4,6 +4,7 @@ import tseslint from "typescript-eslint";
 import reactLint from "eslint-plugin-react";
 import reactHooksLint from "eslint-plugin-react-hooks";
 import tanstackQueryLint from "@tanstack/eslint-plugin-query";
+import reactCompiler from "eslint-plugin-react-compiler";
 import eslintConfigPrettier from "eslint-config-prettier";
 import { fixupPluginRules, includeIgnoreFile } from "@eslint/compat";
 import path from "node:path";
@@ -53,6 +54,14 @@ export default tseslint.config(
       ...tanstackQueryLint.configs.recommended.rules,
     },
   },
+  {
+    plugins: {
+      "react-compiler": reactCompiler,
+    },
+    rules: {
+      "react-compiler/react-compiler": "error",
+    },
+  },
   eslintConfigPrettier,
   // General rules
   {

diff --git a/package.json b/package.json
@@ -32,18 +32,19 @@
     "@eslint/compat": "^1.2.5",
     "@eslint/js": "^9.18.0",
     "@tanstack/eslint-plugin-query": "^5.64.2",
-    "@vitest/coverage-v8": "^2.1.8",
+    "@vitest/coverage-v8": "^3.0.5",
     "eslint": "^9.18.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-compiler": "19.0.0-beta-714736e-20250131",
     "eslint-plugin-react-hooks": "^5.1.0",
     "globals": "^15.14.0",
     "husky": "^9.1.7",
     "lint-staged": "^15.4.2",
     "prettier": "^3.4.2",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.21.0",
-    "vitest": "^2.1.9"
+    "vitest": "^3.0.5"
   },
   "lint-staged": {
     "*.{js,ts,tsx}": [

diff --git a/packages/graph-explorer-proxy-server/package.json b/packages/graph-explorer-proxy-server/package.json
@@ -37,10 +37,10 @@
     "@types/cors": "^2.8.17",
     "@types/express": "^4.17.21",
     "@types/node": "^22.10.10",
-    "@vitest/coverage-v8": "^2.1.8",
+    "@vitest/coverage-v8": "^3.0.5",
     "memfs": "^4.17.0",
     "rimraf": "^6.0.1",
     "tsx": "^4.19.2",
-    "vitest": "^2.1.9"
+    "vitest": "^3.0.5"
   }
 }
diff --git a/packages/graph-explorer/package.json b/packages/graph-explorer/package.json
@@ -112,7 +112,7 @@
     "@types/react-transition-group": "^4.4.12",
     "@types/uuid": "^10.0.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/coverage-v8": "^2.1.8",
+    "@vitest/coverage-v8": "^3.0.5",
     "autoprefixer": "^10.4.20",
     "buffer": "^6.0.3",
     "core-js": "^3.40.0",
@@ -129,17 +129,16 @@
     "ts-node": "^10.9.2",
     "tslib": "^2.8.1",
     "type-fest": "^4.33.0",
-    "vite": "^5.4.14",
+    "vite": "^6.1.0",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^2.1.9",
+    "vitest": "^3.0.5",
     "webpack": "^5.97.1"
   },
   "overrides": {
     "json5@>=2.0.0 <2.2.2": "2.2.2",
     "loader-utils@>=2.0.0 <2.0.3": "2.0.4",
     "decode-uri-component@<0.2.1": "0.2.2",
     "semver@>=6.0.0 <6.3.1": ">=6.3.1",
-    "vite@>=4.5.0 <4.5.3": "4.5.3",
     "webpack@>=5.0.0 <5.76.0": "5.76.0",
     "tough-cookie@<4.1.3": "4.1.3",
     "postcss@<8.4.31": ">=8.4.31",

diff --git a/packages/graph-explorer/src/components/Graph/Graph.tsx b/packages/graph-explorer/src/components/Graph/Graph.tsx
@@ -359,7 +359,6 @@ export const Graph = (
     additionalLayoutsConfig,
     graphStructureVersion,
     mounted,
-    nodes,
   });
 
   useImperativeHandle(

diff --git a/packages/graph-explorer/src/components/Graph/hooks/useClickAndHold.ts b/packages/graph-explorer/src/components/Graph/hooks/useClickAndHold.ts
diff --git a/packages/graph-explorer/src/components/Graph/hooks/useInitCytoscape.tsx b/packages/graph-explorer/src/components/Graph/hooks/useInitCytoscape.tsx
@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from "react";
 
 import { GraphProps } from "../Graph";
 import { Config, CytoscapeType } from "../Graph.model";
+import { useDeepMemo } from "@/hooks";
 
 export interface UseInitCytoscapeProps
   extends Required<
@@ -27,7 +28,9 @@ const useInitCytoscape = ({
 }: UseInitCytoscapeProps) => {
   const [cy, setCy] = useState<CytoscapeType | undefined>();
 
-  const { autolock, userZoomingEnabled, userPanningEnabled } = config;
+  const memoizedConfig = useDeepMemo(() => config, [config]);
+
+  const { autolock, userZoomingEnabled, userPanningEnabled } = memoizedConfig;
   const layoutGraphConfig = useRef({
     autolock,
     userZoomingEnabled,
@@ -62,7 +65,7 @@ const useInitCytoscape = ({
       const cy = cytoscape({
         container: wrapper,
         style: [],
-        ...config,
+        ...memoizedConfig,
       });
 
       cy.on("layoutstart", () => {
@@ -102,8 +105,7 @@ const useInitCytoscape = ({
       };
     }
     // since this is to init cytoscape, this should only run when wrapper is set
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [wrapper]);
+  }, [memoizedConfig, wrapper]);
 
   return cy;
 };

diff --git a/packages/graph-explorer/src/components/Graph/hooks/useRunLayout.ts b/packages/graph-explorer/src/components/Graph/hooks/useRunLayout.ts
@@ -1,6 +1,6 @@
 import cytoscape from "cytoscape";
 import { useEffect, useRef } from "react";
-import type { CytoscapeType, GraphNode } from "../Graph.model";
+import type { CytoscapeType } from "../Graph.model";
 import { runLayout } from "../helpers/layout";
 
 interface UseUpdateLayout {
@@ -13,7 +13,6 @@ interface UseUpdateLayout {
   onLayoutUpdated?: (cy: CytoscapeType, layout: string) => void;
   graphStructureVersion: number;
   mounted: boolean;
-  nodes: GraphNode[];
 }
 
 function useUpdateLayout({
@@ -24,20 +23,24 @@ function useUpdateLayout({
   useAnimation,
   graphStructureVersion,
   mounted,
-  nodes,
 }: UseUpdateLayout) {
   const previousNodesRef = useRef(new Set<string>());
   const previousLayoutRef = useRef(layout);
   const previousGraphStructureVersionRef = useRef(graphStructureVersion);
 
   useEffect(() => {
-    if (cy && layout && mounted && cy.nodes().length) {
+    if (!cy || !layout || !mounted) {
+      return;
+    }
+
+    const nodesInGraph = cy.nodes();
+    if (nodesInGraph.length) {
       const shouldLock =
         previousLayoutRef.current === layout &&
         previousGraphStructureVersionRef.current !== graphStructureVersion;
 
       if (shouldLock) {
-        cy.nodes()
+        nodesInGraph
           .filter(cyNode => previousNodesRef.current.has(cyNode.data().id))
           .forEach(node => {
             node.lock();
@@ -48,20 +51,16 @@ function useUpdateLayout({
       onLayoutUpdated?.(cy, layout);
 
       if (shouldLock) {
-        cy.nodes()
+        nodesInGraph
           .filter(cyNode => previousNodesRef.current.has(cyNode.data().id))
           .forEach(node => {
             node.unlock();
           });
       }
 
-      previousNodesRef.current = new Set(nodes.map(node => node.data.id));
+      previousNodesRef.current = new Set(nodesInGraph.map(node => node.id()));
       previousLayoutRef.current = layout;
     }
-    // nodes variable is not a dependency because
-    // it is kept in the reference and the hook will run using
-    // graphStructureVersion as trigger.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     cy,
     layout,

diff --git a/packages/graph-explorer/src/components/Select/internalComponents/SelectBox.tsx b/packages/graph-explorer/src/components/Select/internalComponents/SelectBox.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-compiler/react-compiler */
 import { cn } from "@/utils";
 import type { ListProps } from "@react-stately/list";
 import type { MultipleSelection } from "@react-types/shared/src/selection";

diff --git a/packages/graph-explorer/src/components/Tabular/useTabular.ts b/packages/graph-explorer/src/components/Tabular/useTabular.ts
@@ -1,3 +1,4 @@
+/* eslint-disable react-compiler/react-compiler */
 import { MouseEvent, useEffect, useMemo, useRef, useState } from "react";
 
 import {

diff --git a/packages/graph-explorer/src/core/AppStatusLoader.tsx b/packages/graph-explorer/src/core/AppStatusLoader.tsx
@@ -15,6 +15,7 @@ import { CONNECTIONS_OP } from "@/modules/CreateConnection/CreateConnection";
 import { logger } from "@/utils";
 import { useQuery } from "@tanstack/react-query";
 import { fetchDefaultConnection } from "./defaultConnection";
+import { cloneDeep } from "lodash";
 
 const AppStatusLoader = ({ children }: PropsWithChildren) => {
   const location = useLocation();
@@ -53,7 +54,7 @@ const AppStatusLoader = ({ children }: PropsWithChildren) => {
       !!defaultConnectionConfig &&
       !configuration.get(defaultConnectionConfig.id)
     ) {
-      const newConfig: RawConfiguration = defaultConnectionConfig;
+      const newConfig: RawConfiguration = cloneDeep(defaultConnectionConfig);
       newConfig.__fileBase = true;
       let activeConfigId = defaultConnectionConfig.id;
 

diff --git a/packages/graph-explorer/src/hooks/useDebounceValue.ts b/packages/graph-explorer/src/hooks/useDebounceValue.ts
@@ -9,8 +9,7 @@ const useDebounceValue = <T>(value: T, delay: number) => {
     return () => {
       clearTimeout(handler);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value]);
+  }, [delay, value]);
   return debouncedValue;
 };
 

diff --git a/packages/graph-explorer/src/hooks/useDeepMemo.ts b/packages/graph-explorer/src/hooks/useDeepMemo.ts
@@ -1,3 +1,4 @@
+/* eslint-disable react-compiler/react-compiler */
 // Gracefully copied from
 // https://github.com/apollographql/react-apollo/blob/4aff75b4a073ff7c816738af867ad7b5f2e96407/packages/hooks/src/utils/useDeepMemo.ts
 

diff --git a/packages/graph-explorer/src/workspaces/DataExplorer/DataExplorer.tsx b/packages/graph-explorer/src/workspaces/DataExplorer/DataExplorer.tsx
@@ -337,9 +337,7 @@ function usePagingOptions() {
         { replace: true }
       );
     },
-    // setSearchParams is not memoized and causes infinite loop
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
+    [setSearchParams]
   );
 
   const onPageSizeChange = useCallback(
@@ -355,9 +353,7 @@ function usePagingOptions() {
         { replace: true }
       );
     },
-    // setSearchParams is not memoized and causes infinite loop
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
+    [setSearchParams]
   );
 
   return {

diff --git a/packages/shared/package.json b/packages/shared/package.json
@@ -17,8 +17,8 @@
   },
   "devDependencies": {
     "@types/uuid": "^10.0.0",
-    "@vitest/coverage-v8": "^2.1.8",
+    "@vitest/coverage-v8": "^3.0.5",
     "rimraf": "^6.0.1",
-    "vitest": "^2.1.9"
+    "vitest": "^3.0.5"
   }
 }