feat(linting): add eslint

packages/core/src/components/A11yDescriptions/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 const style = { display: 'none' };
 
 export const ARIA_NODE_DESC_KEY = 'react-flow__node-desc';

packages/core/src/components/Attribution/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import Panel from '../Panel';
 import { PanelPosition, ProOptions } from '../../types';
 

packages/core/src/components/ConnectionLine/index.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, useCallback } from 'react';
+import { CSSProperties, useCallback } from 'react';
 import shallow from 'zustand/shallow';
 
 import { useStore } from '../../hooks/useStore';
@@ -24,7 +24,7 @@ const oppositePosition = {
   [Position.Bottom]: Position.Top,
 };
 
-export default ({
+const ConnectionLine = ({
   connectionNodeId,
   connectionHandleType,
   connectionLineStyle,
@@ -63,7 +63,7 @@ export default ({
     return null;
   }
 
-  let toPosition: Position = oppositePosition[fromPosition];
+  const toPosition: Position = oppositePosition[fromPosition];
 
   if (CustomConnectionLineComponent) {
     return (
@@ -84,7 +84,7 @@ export default ({
     );
   }
 
-  let dAttr: string = '';
+  let dAttr = '';
 
   const pathParams = {
     sourceX: fromX,
@@ -117,3 +117,7 @@ export default ({
     </g>
   );
 };
+
+ConnectionLine.displayName = 'ConnectionLine';
+
+export default ConnectionLine;

packages/core/src/components/Edges/BaseEdge.tsx

@@ -1,9 +1,7 @@
-import React from 'react';
-
 import EdgeText from './EdgeText';
 import { BaseEdgeProps } from '../../types';
 
-export default ({
+const BaseEdge = ({
   path,
   centerX,
   centerY,
@@ -44,3 +42,7 @@ export default ({
     </>
   );
 };
+
+BaseEdge.displayName = 'BaseEdge';
+
+export default BaseEdge;

packages/core/src/components/Edges/BezierEdge.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 import { EdgeProps, Position } from '../../types';
 import BaseEdge from './BaseEdge';
 
@@ -126,7 +126,7 @@ export function getBezierCenter({
   return [centerX, centerY, xOffset, yOffset];
 }
 
-export default memo(
+const BezierEdge = memo(
   ({
     sourceX,
     sourceY,
@@ -175,3 +175,7 @@ export default memo(
     );
   }
 );
+
+BezierEdge.displayName = 'BezierEdge';
+
+export default BezierEdge;

packages/core/src/components/Edges/EdgeAnchor.tsx

@@ -1,4 +1,4 @@
-import React, { FC, HTMLAttributes } from 'react';
+import { FC, HTMLAttributes } from 'react';
 import cc from 'classcat';
 
 import { Position } from '../../types';

packages/core/src/components/Edges/EdgeText.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useRef, useState, useEffect, FC, PropsWithChildren } from 'react';
+import { memo, useRef, useState, useEffect, FC, PropsWithChildren } from 'react';
 import cc from 'classcat';
 
 import { EdgeTextProps, Rect } from '../../types';

packages/core/src/components/Edges/SimpleBezierEdge.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 import { EdgeProps, Position } from '../../types';
 import BaseEdge from './BaseEdge';
 
@@ -100,7 +100,7 @@ export function getSimpleBezierCenter({
   return [centerX, centerY, xOffset, yOffset];
 }
 
-export default memo(
+const SimpleBezierEdge = memo(
   ({
     sourceX,
     sourceY,
@@ -147,3 +147,7 @@ export default memo(
     );
   }
 );
+
+SimpleBezierEdge.displayName = 'SimpleBezierEdge';
+
+export default SimpleBezierEdge;

packages/core/src/components/Edges/SmoothStepEdge.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 
 import { getCenter } from './utils';
 import { EdgeSmoothStepProps, Position } from '../../types';
@@ -115,7 +115,7 @@ export function getSmoothStepPath({
   return `M ${sourceX},${sourceY}${firstCornerPath}${secondCornerPath}L ${targetX},${targetY}`;
 }
 
-export default memo(
+const SmoothStepEdge = memo(
   ({
     sourceX,
     sourceY,
@@ -164,3 +164,7 @@ export default memo(
     );
   }
 );
+
+SmoothStepEdge.displayName = 'SmoothStepEdge';
+
+export default SmoothStepEdge;

packages/core/src/components/Edges/StepEdge.tsx

@@ -1,8 +1,10 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 
 import { EdgeSmoothStepProps } from '../../types';
 import SmoothStepEdge from './SmoothStepEdge';
 
-export default memo((props: EdgeSmoothStepProps) => {
-  return <SmoothStepEdge {...props} borderRadius={0} />;
-});
+const StepEdge = memo((props: EdgeSmoothStepProps) => <SmoothStepEdge {...props} borderRadius={0} />);
+
+StepEdge.displayName = 'StepEdge';
+
+export default StepEdge;

packages/core/src/components/Edges/StraightEdge.tsx

@@ -1,9 +1,9 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 
 import BaseEdge from './BaseEdge';
 import { EdgeProps } from '../../types';
 
-export default memo(
+const StraightEdge = memo(
   ({
     sourceX,
     sourceY,
@@ -44,3 +44,7 @@ export default memo(
     );
   }
 );
+
+StraightEdge.displayName = 'StraightEdge';
+
+export default StraightEdge;

packages/core/src/components/Edges/utils.ts

@@ -1,5 +1,5 @@
 import { MouseEvent as ReactMouseEvent } from 'react';
-import { GetState } from 'zustand';
+import { StoreApi } from 'zustand';
 
 import { Edge, MarkerType, Position, ReactFlowState } from '../../types';
 
@@ -58,13 +58,16 @@ export const getCenter = ({
 
 export function getMouseHandler(
   id: string,
-  getState: GetState<ReactFlowState>,
+  getState: StoreApi<ReactFlowState>['getState'],
   handler?: (event: ReactMouseEvent<SVGGElement, MouseEvent>, edge: Edge) => void
 ) {
   return handler === undefined
     ? handler
     : (event: ReactMouseEvent<SVGGElement, MouseEvent>) => {
-        const edge = getState().edges.find((e) => e.id === id)!;
-        handler(event, { ...edge });
+        const edge = getState().edges.find((e) => e.id === id);
+
+        if (edge) {
+          handler(event, { ...edge });
+        }
       };
 }

packages/core/src/components/Edges/wrapEdge.tsx

@@ -1,4 +1,4 @@
-import React, { memo, ComponentType, useState, useMemo, KeyboardEvent, useRef } from 'react';
+import { memo, ComponentType, useState, useMemo, KeyboardEvent, useRef } from 'react';
 import cc from 'classcat';
 
 import { useStoreApi } from '../../hooks/useStore';
@@ -66,14 +66,16 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
 
     const onEdgeClick = (event: React.MouseEvent<SVGGElement, MouseEvent>): void => {
       const { edges, addSelectedEdges } = store.getState();
-      const edge = edges.find((e) => e.id === id)!;
 
       if (elementsSelectable) {
         store.setState({ nodesSelectionActive: false });
         addSelectedEdges([id]);
       }
 
-      onClick?.(event, edge);
+      if (onClick) {
+        const edge = edges.find((e) => e.id === id)!;
+        onClick(event, edge);
+      }
     };
 
     const onEdgeDoubleClickHandler = getMouseHandler(id, store.getState, onEdgeDoubleClick);

packages/core/src/components/Handle/handler.ts

@@ -1,5 +1,5 @@
 import { MouseEvent as ReactMouseEvent } from 'react';
-import { GetState, SetState } from 'zustand';
+import { StoreApi } from 'zustand';
 
 import { getHostForElement } from '../../utils';
 import { OnConnect, ConnectionMode, Connection, HandleType, ReactFlowState } from '../../types';
@@ -91,8 +91,8 @@ export function handleMouseDown({
   nodeId: string;
   onConnect: OnConnect;
   isTarget: boolean;
-  getState: GetState<ReactFlowState>;
-  setState: SetState<ReactFlowState>;
+  getState: StoreApi<ReactFlowState>['getState'];
+  setState: StoreApi<ReactFlowState>['setState'];
   isValidConnection: ValidConnectionFunc;
   elementEdgeUpdaterType?: HandleType;
   onEdgeUpdateEnd?: (evt: MouseEvent) => void;

packages/core/src/components/Handle/index.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useContext, HTMLAttributes, forwardRef } from 'react';
+import { memo, useContext, HTMLAttributes, forwardRef, MouseEvent as ReactMouseEvent } from 'react';
 import cc from 'classcat';
 import shallow from 'zustand/shallow';
 
@@ -57,7 +57,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
       onConnect?.(edgeParams);
     };
 
-    const onMouseDownHandler = (event: React.MouseEvent<HTMLDivElement>) => {
+    const onMouseDownHandler = (event: ReactMouseEvent<HTMLDivElement>) => {
       if (event.button === 0) {
         handleMouseDown({
           event,
@@ -73,7 +73,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
       onMouseDown?.(event);
     };
 
-    const onClick = (event: React.MouseEvent) => {
+    const onClick = (event: ReactMouseEvent) => {
       const { onClickConnectStart, onClickConnectEnd, connectionMode } = store.getState();
       if (!connectionStartHandle) {
         onClickConnectStart?.(event, { nodeId, handleId, handleType: type });

packages/core/src/components/Nodes/DefaultNode.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 
 import Handle from '../../components/Handle';
 import { NodeProps, Position } from '../../types';

packages/core/src/components/Nodes/InputNode.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 
 import Handle from '../../components/Handle';
 import { NodeProps, Position } from '../../types';

packages/core/src/components/Nodes/OutputNode.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 
 import Handle from '../../components/Handle';
 import { NodeProps, Position } from '../../types';

packages/core/src/components/Nodes/utils.ts

@@ -1,5 +1,5 @@
 import { MouseEvent } from 'react';
-import { GetState, SetState } from 'zustand';
+import { StoreApi } from 'zustand';
 
 import { HandleElement, Node, Position, ReactFlowState } from '../../types';
 import { getDimensions } from '../../utils';
@@ -33,7 +33,7 @@ export const getHandleBounds = (
 
 export function getMouseHandler(
   id: string,
-  getState: GetState<ReactFlowState>,
+  getState: StoreApi<ReactFlowState>['getState'],
   handler?: (event: MouseEvent, node: Node) => void
 ) {
   return handler === undefined
@@ -55,8 +55,8 @@ export function handleNodeClick({
 }: {
   id: string;
   store: {
-    getState: GetState<ReactFlowState>;
-    setState: SetState<ReactFlowState>;
+    getState: StoreApi<ReactFlowState>['getState'];
+    setState: StoreApi<ReactFlowState>['setState'];
   };
   unselect?: boolean;
 }) {

packages/core/src/components/Nodes/wrapNode.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, memo, ComponentType, MouseEvent, KeyboardEvent } from 'react';
+import { useEffect, useRef, memo, ComponentType, MouseEvent, KeyboardEvent } from 'react';
 import cc from 'classcat';
 
 import { useStoreApi } from '../../hooks/useStore';
@@ -90,7 +90,7 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
           store,
           unselect,
         });
-      } else if (selected && arrowKeyDiffs.hasOwnProperty(event.key)) {
+      } else if (selected && Object.prototype.hasOwnProperty.call(arrowKeyDiffs, event.key)) {
         updatePositions(arrowKeyDiffs[event.key]);
       }
     };

packages/core/src/components/NodesSelection/index.tsx

@@ -3,7 +3,7 @@
  * made a selection with on or several nodes
  */
 
-import React, { memo, useRef, MouseEvent, KeyboardEvent, useEffect } from 'react';
+import { memo, useRef, MouseEvent, KeyboardEvent, useEffect } from 'react';
 import cc from 'classcat';
 import shallow from 'zustand/shallow';
 
@@ -61,7 +61,7 @@ function NodesSelection({ onSelectionContextMenu, noPanClassName, disableKeyboar
     : undefined;
 
   const onKeyDown = (event: KeyboardEvent) => {
-    if (arrowKeyDiffs.hasOwnProperty(event.key)) {
+    if (Object.prototype.hasOwnProperty.call(arrowKeyDiffs, event.key)) {
       updatePositions(arrowKeyDiffs[event.key]);
     }
   };

packages/core/src/components/Panel/index.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 import cc from 'classcat';
 
 import { PanelPosition } from '../../types';

packages/core/src/components/ReactFlowProvider/index.tsx

@@ -1,11 +1,11 @@
-import React, { FC, PropsWithChildren, useRef } from 'react';
+import { FC, PropsWithChildren, useRef } from 'react';
 import { StoreApi } from 'zustand';
 
 import { Provider } from '../../contexts/RFStoreContext';
 import { createRFStore } from '../../store';
 import { ReactFlowState } from '../../types';
 
-const ReactFlowProvider: FC<PropsWithChildren<{}>> = ({ children }) => {
+const ReactFlowProvider: FC<PropsWithChildren> = ({ children }) => {
   const storeRef = useRef<StoreApi<ReactFlowState> | null>(null);
 
   if (!storeRef.current) {

packages/core/src/components/SelectionListener/index.tsx

@@ -13,7 +13,9 @@ const selector = (s: ReactFlowState) => ({
   selectedEdges: s.edges.filter((e) => e.selected),
 });
 
-const areEqual = (objA: any, objB: any) => {
+type SelectorSlice = ReturnType<typeof selector>;
+
+function areEqual(objA: SelectorSlice, objB: SelectorSlice) {
   const selectedNodeIdsA = objA.selectedNodes.map((n: Node) => n.id);
   const selectedNodeIdsB = objB.selectedNodes.map((n: Node) => n.id);
 
@@ -21,7 +23,7 @@ const areEqual = (objA: any, objB: any) => {
   const selectedEdgeIdsB = objB.selectedEdges.map((e: Edge) => e.id);
 
   return shallow(selectedNodeIdsA, selectedNodeIdsB) && shallow(selectedEdgeIdsA, selectedEdgeIdsB);
-};
+}
 
 // This is just a helper component for calling the onSelectionChange listener.
 // @TODO: Now that we have the onNodesChange and on EdgesChange listeners, do we still need this component?

packages/core/src/components/UserSelection/index.tsx

@@ -2,7 +2,7 @@
  * The user selection rectangle gets displayed when a user drags the mouse while pressing shift
  */
 
-import React, { memo, useState, useRef } from 'react';
+import { memo, useState, useRef } from 'react';
 import shallow from 'zustand/shallow';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
@@ -42,7 +42,7 @@ const initialRect: SelectionRect = {
   draw: false,
 };
 
-export default memo(({ selectionKeyPressed }: UserSelectionProps) => {
+const UserSelection = memo(({ selectionKeyPressed }: UserSelectionProps) => {
   const store = useStoreApi();
   const prevSelectedNodesCount = useRef<number>(0);
   const prevSelectedEdgesCount = useRef<number>(0);
@@ -157,3 +157,7 @@ export default memo(({ selectionKeyPressed }: UserSelectionProps) => {
     </div>
   );
 });
+
+UserSelection.displayName = 'UserSelection';
+
+export default UserSelection;

packages/core/src/container/EdgeRenderer/MarkerDefinitions.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useCallback } from 'react';
+import { memo, useCallback } from 'react';
 
 import { useStore } from '../../hooks/useStore';
 import { EdgeMarker, ReactFlowState } from '../../types';
@@ -24,6 +24,10 @@ const Marker = ({
 }: MarkerProps) => {
   const Symbol = useMarkerSymbol(type);
 
+  if (!Symbol) {
+    return null;
+  }
+
   return (
     <marker
       className="react-flow__arrowhead"

packages/core/src/container/EdgeRenderer/MarkerSymbols.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { MarkerType, EdgeMarker } from '../../types';
 
 type SymbolProps = Omit<EdgeMarker, 'type'>;
@@ -36,14 +36,14 @@ export const MarkerSymbols = {
 
 export function useMarkerSymbol(type: MarkerType) {
   const symbol = useMemo(() => {
-    const symbolExists = MarkerSymbols.hasOwnProperty(type);
+    const symbolExists = Object.prototype.hasOwnProperty.call(MarkerSymbols, type);
 
     if (!symbolExists) {
-      // @ts-ignore
       if (process.env.NODE_ENV === 'development') {
         console.warn(`[React Flow]: Marker type "${type}" doesn't exist. Help: https://reactflow.dev/error#900`);
       }
-      return () => null;
+
+      return null;
     }
 
     return MarkerSymbols[type];

packages/core/src/container/EdgeRenderer/index.tsx

@@ -1,4 +1,4 @@
-import React, { memo, CSSProperties } from 'react';
+import { memo, CSSProperties } from 'react';
 import shallow from 'zustand/shallow';
 import cc from 'classcat';
 
@@ -114,7 +114,6 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
               const targetPosition = targetHandle?.position || Position.Top;
 
               if (!sourceHandle) {
-                // @ts-ignore
                 if (process.env.NODE_ENV === 'development') {
                   console.warn(
                     `[React Flow]: Couldn't create edge for source handle id: ${edge.sourceHandle}; edge id: ${edge.id}. Help: https://reactflow.dev/error#800`
@@ -124,7 +123,6 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
               }
 
               if (!targetHandle) {
-                // @ts-ignore
                 if (process.env.NODE_ENV === 'development') {
                   console.warn(
                     `[React Flow]: Couldn't create edge for target handle id: ${edge.targetHandle}; edge id: ${edge.id}. Help: https://reactflow.dev/error#800`

packages/core/src/container/EdgeRenderer/utils.ts

@@ -41,7 +41,7 @@ export function createEdgeTypes(edgeTypes: EdgeTypes): EdgeTypesWrapped {
   };
 }
 
-export function getHandlePosition(position: Position, nodeRect: Rect, handle: any | null = null): XYPosition {
+export function getHandlePosition(position: Position, nodeRect: Rect, handle: HandleElement | null = null): XYPosition {
   const x = (handle?.x || 0) + nodeRect.x;
   const y = (handle?.y || 0) + nodeRect.y;
   const width = handle?.width || nodeRect.width;
@@ -97,10 +97,10 @@ interface EdgePositions {
 
 export const getEdgePositions = (
   sourceNodeRect: Rect,
-  sourceHandle: HandleElement | unknown,
+  sourceHandle: HandleElement,
   sourcePosition: Position,
   targetNodeRect: Rect,
-  targetHandle: HandleElement | unknown,
+  targetHandle: HandleElement,
   targetPosition: Position
 ): EdgePositions => {
   const sourceHandlePos = getHandlePosition(sourcePosition, sourceNodeRect, sourceHandle);

packages/core/src/container/FlowRenderer/index.tsx

@@ -1,4 +1,4 @@
-import React, { memo, ReactNode, WheelEvent, MouseEvent } from 'react';
+import { memo, ReactNode, WheelEvent, MouseEvent } from 'react';
 
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import useGlobalKeyHandler from '../../hooks/useGlobalKeyHandler';

packages/core/src/container/GraphView/index.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import { memo } from 'react';
 
 import FlowRenderer from '../FlowRenderer';
 import NodeRenderer from '../NodeRenderer';

packages/core/src/container/NodeRenderer/index.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useMemo, ComponentType, useEffect, useRef } from 'react';
+import { memo, useMemo, ComponentType, useEffect, useRef } from 'react';
 import shallow from 'zustand/shallow';
 
 import useVisibleNodes from '../../hooks/useVisibleNodes';
@@ -66,7 +66,6 @@ const NodeRenderer = (props: NodeRendererProps) => {
         let nodeType = node.type || 'default';
 
         if (!props.nodeTypes[nodeType]) {
-          // @ts-ignore
           if (process.env.NODE_ENV === 'development') {
             console.warn(
               `[React Flow]: Node type "${nodeType}" not found. Using fallback type "default". Help: https://reactflow.dev/error#300`

packages/core/src/container/ReactFlow/Wrapper.tsx

@@ -1,9 +1,9 @@
-import React, { FC, PropsWithChildren } from 'react';
+import { FC, PropsWithChildren } from 'react';
 
 import { useStoreApi } from '../../hooks/useStore';
 import ReactFlowProvider from '../../components/ReactFlowProvider';
 
-const Wrapper: FC<PropsWithChildren<{}>> = ({ children }) => {
+const Wrapper: FC<PropsWithChildren> = ({ children }) => {
   let isWrapped = true;
 
   try {

packages/core/src/container/ReactFlow/index.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, forwardRef, useId } from 'react';
+import { CSSProperties, forwardRef, useId } from 'react';
 import cc from 'classcat';
 import { injectStyle } from '@react-flow/css-utils';
 

packages/core/src/container/ReactFlow/utils.ts

@@ -7,11 +7,11 @@ import { CreateNodeTypes } from '../NodeRenderer/utils';
 
 export function useNodeOrEdgeTypes(nodeOrEdgeTypes: NodeTypes, createTypes: CreateNodeTypes): NodeTypesWrapped;
 export function useNodeOrEdgeTypes(nodeOrEdgeTypes: EdgeTypes, createTypes: CreateEdgeTypes): EdgeTypesWrapped;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function useNodeOrEdgeTypes(nodeOrEdgeTypes: any, createTypes: any): any {
   const typesKeysRef = useRef<string[] | null>(null);
 
   const typesParsed = useMemo(() => {
-    // @ts-ignore
     if (process.env.NODE_ENV === 'development') {
       const typeKeys = Object.keys(nodeOrEdgeTypes);
       if (shallow(typesKeysRef.current, typeKeys)) {

packages/core/src/container/Viewport/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 import { useStore } from '../../hooks/useStore';
 import { ReactFlowState } from '../../types';
@@ -13,7 +13,7 @@ function Viewport({ children }: ViewportProps) {
   const transform = useStore(selector);
 
   return (
-    <div className="react-flow__viewport react-flow__container" style={{ transform: transform }}>
+    <div className="react-flow__viewport react-flow__container" style={{ transform }}>
       {children}
     </div>
   );

packages/core/src/container/ZoomPane/index.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useRef } from 'react';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useEffect, useRef } from 'react';
 import { D3ZoomEvent, zoom, zoomIdentity } from 'd3-zoom';
 import { select, pointer } from 'd3-selection';
 import shallow from 'zustand/shallow';

packages/core/src/custom.d.ts

@@ -3,7 +3,7 @@ declare module '*.css' {
   export default content;
 }
 
-interface SvgrComponent extends React.FunctionComponent<React.SVGAttributes<SVGElement>> {}
+type SvgrComponent = React.FunctionComponent<React.SVGAttributes<SVGElement>>;
 
 declare module '*.svg' {
   const svgUrl: string;
@@ -12,6 +12,6 @@ declare module '*.svg' {
   export { svgComponent as ReactComponent };
 }
 
-declare var __REACT_FLOW_VERSION__: string;
-declare var __ENV__: string;
-declare var __INJECT_STYLES__: boolean;
+declare const __REACT_FLOW_VERSION__: string;
+declare const __ENV__: string;
+declare const __INJECT_STYLES__: boolean;

packages/core/src/hooks/useDrag/utils.ts

@@ -78,7 +78,6 @@ export function calcNextPosition(
             ]
           : currentExtent;
     } else {
-      // @ts-ignore
       if (process.env.NODE_ENV === 'development') {
         console.warn('[React Flow]: Only child nodes can use a parent extent. Help: https://reactflow.dev/error#500');
       }

packages/core/src/hooks/useNodesEdgesState.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { useState, useCallback, SetStateAction, Dispatch } from 'react';
 
 import { applyNodeChanges, applyEdgeChanges } from '../utils/changes';

packages/core/src/hooks/useOnInitHandler.ts

@@ -3,7 +3,7 @@ import { useEffect, useRef } from 'react';
 import useReactFlow from './useReactFlow';
 import { OnInit } from '../types';
 
-function useOnInitHandler(onInit: OnInit<any> | undefined) {
+function useOnInitHandler(onInit: OnInit | undefined) {
   const ReactFlowInstance = useReactFlow();
   const isInitialized = useRef<boolean>(false);
 

packages/core/src/hooks/useReactFlow.ts

@@ -13,6 +13,7 @@ import {
   EdgeRemoveChange,
 } from '../types';
 
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlowInstance<NodeData, EdgeData> {
   const { initialized: viewportInitialized, ...viewportHelperFunctions } = useViewportHelper();
   const store = useStoreApi();

packages/core/src/hooks/useResizeHandler.ts

@@ -16,7 +16,6 @@ function useResizeHandler(rendererNode: MutableRefObject<HTMLDivElement | null>)
 
       const size = getDimensions(rendererNode.current);
 
-      // @ts-ignore
       if (process.env.NODE_ENV === 'development') {
         if (size.height === 0 || size.width === 0) {
           console.warn(

packages/core/src/hooks/useViewportHelper.ts

@@ -4,21 +4,22 @@ import shallow from 'zustand/shallow';
 
 import { useStoreApi, useStore } from '../hooks/useStore';
 import { pointToRendererPoint, getTransformForBounds, getD3Transition } from '../utils/graph';
-import { FitViewOptions, Viewport, ViewportHelperFunctions, ReactFlowState, Rect, XYPosition } from '../types';
+import { ViewportHelperFunctions, ReactFlowState, XYPosition } from '../types';
 import { fitView as fitViewStore } from '../store/utils';
 
-const DEFAULT_PADDING = 0.1;
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => {};
 
 const initialViewportHelper: ViewportHelperFunctions = {
-  zoomIn: () => {},
-  zoomOut: () => {},
-  zoomTo: (_: number) => {},
+  zoomIn: noop,
+  zoomOut: noop,
+  zoomTo: noop,
   getZoom: () => 1,
-  setViewport: (_: Viewport) => {},
+  setViewport: noop,
   getViewport: () => ({ x: 0, y: 0, zoom: 1 }),
-  fitView: (_: FitViewOptions = { padding: DEFAULT_PADDING, includeHiddenNodes: false }) => {},
-  setCenter: (_: number, __: number) => {},
-  fitBounds: (_: Rect) => {},
+  fitView: noop,
+  setCenter: noop,
+  fitBounds: noop,
   project: (position: XYPosition) => position,
   initialized: false,
 };

packages/core/src/hooks/useVisibleEdges.ts

@@ -7,7 +7,7 @@ import { internalsSymbol, isNumeric } from '../utils';
 
 const defaultEdgeTree = [{ level: 0, isMaxLevel: true, edges: [] }];
 
-function groupEdgesByZLevel(edges: Edge[], nodeInternals: NodeInternals, elevateEdgesOnSelect: boolean = false) {
+function groupEdgesByZLevel(edges: Edge[], nodeInternals: NodeInternals, elevateEdgesOnSelect = false) {
   let maxLevel = -1;
 
   const levelLookup = edges.reduce<Record<string, Edge[]>>((tree, edge) => {

packages/core/src/store/utils.ts

@@ -1,5 +1,5 @@
 import { zoomIdentity } from 'd3-zoom';
-import { GetState, SetState } from 'zustand';
+import { StoreApi } from 'zustand';
 
 import { internalsSymbol, isNumeric } from '../utils';
 import { getD3Transition, getRectOfNodes, getTransformForBounds } from '../utils/graph';
@@ -99,8 +99,9 @@ type InternalFitViewOptions = {
   initial?: boolean;
 } & FitViewOptions;
 
-export function fitView(get: GetState<ReactFlowState>, options: InternalFitViewOptions = {}) {
-  let { nodeInternals, width, height, minZoom, maxZoom, d3Zoom, d3Selection, fitViewOnInitDone, fitViewOnInit } = get();
+export function fitView(get: StoreApi<ReactFlowState>['getState'], options: InternalFitViewOptions = {}) {
+  const { nodeInternals, width, height, minZoom, maxZoom, d3Zoom, d3Selection, fitViewOnInitDone, fitViewOnInit } =
+    get();
 
   if ((options.initial && !fitViewOnInitDone && fitViewOnInit) || !options.initial) {
     if (d3Zoom && d3Selection) {
@@ -165,8 +166,8 @@ export function handleControlledEdgeSelectionChange(edgeChanges: EdgeSelectionCh
 type UpdateNodesAndEdgesParams = {
   changedNodes: NodeSelectionChange[] | null;
   changedEdges: EdgeSelectionChange[] | null;
-  get: GetState<ReactFlowState>;
-  set: SetState<ReactFlowState>;
+  get: StoreApi<ReactFlowState>['getState'];
+  set: StoreApi<ReactFlowState>['setState'];
 };
 
 export function updateNodesAndEdgesSelections({ changedNodes, changedEdges, get, set }: UpdateNodesAndEdgesParams) {

packages/core/src/types/changes.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
 import { XYPosition, Dimensions } from './utils';
 import { Node } from './nodes';
 import { Edge } from './edges';

packages/core/src/types/component-props.ts

@@ -18,7 +18,7 @@ import {
   OnEdgeUpdateFunc,
   OnInit,
   ProOptions,
-  AttributionPosition,
+  PanelPosition,
   DefaultEdgeOptions,
   FitViewOptions,
   OnNodesDelete,
@@ -122,7 +122,7 @@ export interface ReactFlowProps extends HTMLAttributes<HTMLDivElement> {
   fitView?: boolean;
   fitViewOptions?: FitViewOptions;
   connectOnClick?: boolean;
-  attributionPosition?: AttributionPosition;
+  attributionPosition?: PanelPosition;
   proOptions?: ProOptions;
   elevateEdgesOnSelect?: boolean;
   disableKeyboardA11y?: boolean;

packages/core/src/types/edges.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { CSSProperties, ComponentType, HTMLAttributes, ReactNode } from 'react';
 import { Connection } from './general';
 import { HandleElement, HandleType } from './handles';

packages/core/src/types/general.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { MouseEvent as ReactMouseEvent, ComponentType, MemoExoticComponent } from 'react';
 import { Selection as D3Selection, ZoomBehavior } from 'd3';
 

packages/core/src/types/instance.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-namespace */
 import { ViewportHelperFunctions, Viewport } from './general';
 import { Node } from './nodes';
 import { Edge } from './edges';

packages/core/src/types/nodes.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
 
 import { XYPosition, Position, CoordinateExtent } from './utils';

packages/core/src/utils/changes.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Node, Edge, EdgeChange, NodeChange } from '../types';
 
 function handleParentExpand(res: any[], updateItem: any) {

packages/core/src/utils/graph.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Selection as D3Selection } from 'd3';
 
 import { boxToRect, clamp, getBoundsOfBoxes, rectToBox } from '../utils';
@@ -59,7 +60,6 @@ const connectionExists = (edge: Edge, edges: Edge[]) => {
 
 export const addEdge = (edgeParams: Edge | Connection, edges: Edge[]): Edge[] => {
   if (!edgeParams.source || !edgeParams.target) {
-    // @ts-ignore
     if (process.env.NODE_ENV === 'development') {
       console.warn(
         "[React Flow]: Can't create edge. An edge needs a source and a target. Help: https://reactflow.dev/error#600"
@@ -87,7 +87,6 @@ export const addEdge = (edgeParams: Edge | Connection, edges: Edge[]): Edge[] =>
 
 export const updateEdge = (oldEdge: Edge, newConnection: Connection, edges: Edge[]): Edge[] => {
   if (!newConnection.source || !newConnection.target) {
-    // @ts-ignore
     if (process.env.NODE_ENV === 'development') {
       console.warn(
         "[React Flow]: Can't create a new edge. An edge needs a source and a target. Help: https://reactflow.dev/error#600"
@@ -99,7 +98,6 @@ export const updateEdge = (oldEdge: Edge, newConnection: Connection, edges: Edge
   const foundEdge = edges.find((e) => e.id === oldEdge.id) as Edge;
 
   if (!foundEdge) {
-    // @ts-ignore
     if (process.env.NODE_ENV === 'development') {
       console.warn(
         `[React Flow]: The old edge with id=${oldEdge.id} does not exist. Help: https://reactflow.dev/error#700`
@@ -168,9 +166,9 @@ export const getNodesInside = (
   nodeInternals: NodeInternals,
   rect: Rect,
   [tx, ty, tScale]: Transform = [0, 0, 1],
-  partially: boolean = false,
+  partially = false,
   // set excludeNonSelectableNodes if you want to pay attention to the nodes "selectable" attribute
-  excludeNonSelectableNodes: boolean = false
+  excludeNonSelectableNodes = false
 ): Node[] => {
   const rBox = rectToBox({
     x: (rect.x - tx) / tScale,
@@ -219,7 +217,7 @@ export const getTransformForBounds = (
   height: number,
   minZoom: number,
   maxZoom: number,
-  padding: number = 0.1
+  padding = 0.1
 ): Transform => {
   const xZoom = width / (bounds.width * (1 + padding));
   const yZoom = height / (bounds.height * (1 + padding));
@@ -233,6 +231,6 @@ export const getTransformForBounds = (
   return [x, y, clampedZoom];
 };
 
-export const getD3Transition = (selection: D3Selection<Element, unknown, null, undefined>, duration: number = 0) => {
+export const getD3Transition = (selection: D3Selection<Element, unknown, null, undefined>, duration = 0) => {
   return selection.transition().duration(duration);
 };

packages/core/src/utils/index.ts

@@ -5,7 +5,7 @@ export const getDimensions = (node: HTMLDivElement): Dimensions => ({
   height: node.offsetHeight,
 });
 
-export const clamp = (val: number, min: number = 0, max: number = 1): number => Math.min(Math.max(val, min), max);
+export const clamp = (val: number, min = 0, max = 1): number => Math.min(Math.max(val, min), max);
 
 export const clampPosition = (position: XYPosition, extent: CoordinateExtent) => ({
   x: clamp(position.x, extent[0][0], extent[1][0]),
@@ -39,6 +39,7 @@ export const boxToRect = ({ x, y, x2, y2 }: Box): Rect => ({
 export const getBoundsOfRects = (rect1: Rect, rect2: Rect): Rect =>
   boxToRect(getBoundsOfBoxes(rectToBox(rect1), rectToBox(rect2)));
 
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export const isNumeric = (n: any): n is number => !isNaN(n) && isFinite(n);
 
 export const internalsSymbol = Symbol('internals');