feat(linting): add eslint

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';