refactor(lib): use react 18

src/container/EdgeRenderer/index.tsx

@@ -15,11 +15,12 @@ import {
   OnEdgeUpdateFunc,
   HandleType,
   ReactFlowState,
+  EdgeTypesWrapped,
 } from '../../types';
 import useVisibleEdges from '../../hooks/useVisibleEdges';
 
 interface EdgeRendererProps {
-  edgeTypes: any;
+  edgeTypes: EdgeTypesWrapped;
   connectionLineType: ConnectionLineType;
   connectionLineStyle?: CSSProperties;
   connectionLineComponent?: ConnectionLineComponent;

src/container/EdgeRenderer/utils.ts

@@ -4,6 +4,7 @@ import wrapEdge from '../../components/Edges/wrapEdge';
 import {
   EdgeProps,
   EdgeTypes,
+  EdgeTypesWrapped,
   HandleElement,
   NodeHandleBounds,
   NodeInternals,
@@ -14,10 +15,10 @@ import {
 } from '../../types';
 import { rectToBox } from '../../utils';
 
-export type CreateEdgeTypes = (edgeTypes: EdgeTypes) => EdgeTypes;
+export type CreateEdgeTypes = (edgeTypes: EdgeTypes) => EdgeTypesWrapped;
 
-export function createEdgeTypes(edgeTypes: EdgeTypes): EdgeTypes {
-  const standardTypes: EdgeTypes = {
+export function createEdgeTypes(edgeTypes: EdgeTypes): EdgeTypesWrapped {
+  const standardTypes: EdgeTypesWrapped = {
     default: wrapEdge((edgeTypes.default || BezierEdge) as ComponentType<EdgeProps>),
     straight: wrapEdge((edgeTypes.bezier || StraightEdge) as ComponentType<EdgeProps>),
     step: wrapEdge((edgeTypes.step || StepEdge) as ComponentType<EdgeProps>),
@@ -25,8 +26,8 @@ export function createEdgeTypes(edgeTypes: EdgeTypes): EdgeTypes {
     simplebezier: wrapEdge((edgeTypes.simplebezier || SimpleBezierEdge) as ComponentType<EdgeProps>),
   };
 
-  const wrappedTypes = {} as EdgeTypes;
-  const specialTypes: EdgeTypes = Object.keys(edgeTypes)
+  const wrappedTypes = {} as EdgeTypesWrapped;
+  const specialTypes: EdgeTypesWrapped = Object.keys(edgeTypes)
     .filter((k) => !['default', 'bezier'].includes(k))
     .reduce((res, key) => {
       res[key] = wrapEdge((edgeTypes[key] || BezierEdge) as ComponentType<EdgeProps>);

src/container/GraphView/index.tsx

@@ -5,11 +5,12 @@ import NodeRenderer from '../NodeRenderer';
 import EdgeRenderer from '../EdgeRenderer';
 import Viewport from '../Viewport';
 import useOnInitHandler from '../../hooks/useOnInitHandler';
-import { NodeTypes, EdgeTypes, ConnectionLineType, KeyCode, ReactFlowProps } from '../../types';
+import { NodeTypesWrapped, EdgeTypesWrapped, ConnectionLineType, KeyCode, ReactFlowProps } from '../../types';
 
-export interface GraphViewProps extends Omit<ReactFlowProps, 'onSelectionChange' | 'nodes' | 'edges'> {
-  nodeTypes: NodeTypes;
-  edgeTypes: EdgeTypes;
+export interface GraphViewProps
+  extends Omit<ReactFlowProps, 'onSelectionChange' | 'nodes' | 'edges' | 'nodeTypes' | 'edgeTypes'> {
+  nodeTypes: NodeTypesWrapped;
+  edgeTypes: EdgeTypesWrapped;
   selectionKeyCode: KeyCode | null;
   deleteKeyCode: KeyCode | null;
   multiSelectionKeyCode: KeyCode | null;

src/container/NodeRenderer/index.tsx

@@ -3,10 +3,10 @@ import shallow from 'zustand/shallow';
 
 import useVisibleNodes from '../../hooks/useVisibleNodes';
 import { useStore } from '../../store';
-import { Node, NodeTypes, Position, ReactFlowState, WrapNodeProps } from '../../types';
+import { Node, NodeTypesWrapped, Position, ReactFlowState, WrapNodeProps } from '../../types';
 
 interface NodeRendererProps {
-  nodeTypes: NodeTypes;
+  nodeTypes: NodeTypesWrapped;
   selectNodesOnDrag: boolean;
   onNodeClick?: (event: MouseEvent, element: Node) => void;
   onNodeDoubleClick?: (event: MouseEvent, element: Node) => void;

src/container/NodeRenderer/utils.ts

@@ -5,20 +5,20 @@ import InputNode from '../../components/Nodes/InputNode';
 import OutputNode from '../../components/Nodes/OutputNode';
 import GroupNode from '../../components/Nodes/GroupNode';
 import wrapNode from '../../components/Nodes/wrapNode';
-import { NodeTypes, NodeProps } from '../../types';
+import { NodeTypes, NodeProps, NodeTypesWrapped } from '../../types';
 
-export type CreateNodeTypes = (nodeTypes: NodeTypes) => NodeTypes;
+export type CreateNodeTypes = (nodeTypes: NodeTypes) => NodeTypesWrapped;
 
-export function createNodeTypes(nodeTypes: NodeTypes): NodeTypes {
-  const standardTypes: NodeTypes = {
+export function createNodeTypes(nodeTypes: NodeTypes): NodeTypesWrapped {
+  const standardTypes: NodeTypesWrapped = {
     input: wrapNode((nodeTypes.input || InputNode) as ComponentType<NodeProps>),
     default: wrapNode((nodeTypes.default || DefaultNode) as ComponentType<NodeProps>),
     output: wrapNode((nodeTypes.output || OutputNode) as ComponentType<NodeProps>),
     group: wrapNode((nodeTypes.group || GroupNode) as ComponentType<NodeProps>),
   };
 
-  const wrappedTypes = {} as NodeTypes;
-  const specialTypes: NodeTypes = Object.keys(nodeTypes)
+  const wrappedTypes = {} as NodeTypesWrapped;
+  const specialTypes: NodeTypesWrapped = Object.keys(nodeTypes)
     .filter((k) => !['input', 'default', 'output', 'group'].includes(k))
     .reduce((res, key) => {
       res[key] = wrapNode((nodeTypes[key] || DefaultNode) as ComponentType<NodeProps>);

src/container/ReactFlow/Wrapper.tsx

@@ -1,8 +1,8 @@
-import React, { FC } from 'react';
+import React, { FC, PropsWithChildren } from 'react';
 
 import { Provider, createStore, useStoreApi } from '../../store';
 
-const Wrapper: FC = ({ children }) => {
+const Wrapper: FC<PropsWithChildren<{}>> = ({ children }) => {
   let isWrapped = true;
 
   try {

src/container/ReactFlow/index.tsx

@@ -13,7 +13,9 @@ import {
   ConnectionLineType,
   ConnectionMode,
   EdgeTypes,
+  EdgeTypesWrapped,
   NodeTypes,
+  NodeTypesWrapped,
   PanOnScrollMode,
   ReactFlowProps,
   ReactFlowRefType,
@@ -21,7 +23,7 @@ import {
 import { createEdgeTypes } from '../EdgeRenderer/utils';
 import GraphView from '../GraphView';
 import { createNodeTypes } from '../NodeRenderer/utils';
-import injectStyle, { useNodeOrEdgeTypes } from './utils';
+import { injectStyle, useNodeOrEdgeTypes } from './utils';
 import Wrapper from './Wrapper';
 
 if (__INJECT_STYLES__) {
@@ -29,13 +31,13 @@ if (__INJECT_STYLES__) {
   injectStyle(theme as unknown as string);
 }
 
-const defaultNodeTypes = {
+const defaultNodeTypes: NodeTypes = {
   input: InputNode,
   default: DefaultNode,
   output: OutputNode,
 };
 
-const defaultEdgeTypes = {
+const defaultEdgeTypes: EdgeTypes = {
   default: BezierEdge,
   straight: StraightEdge,
   step: StepEdge,
@@ -139,8 +141,8 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
     },
     ref
   ) => {
-    const nodeTypesParsed = useNodeOrEdgeTypes(nodeTypes, createNodeTypes) as NodeTypes;
-    const edgeTypesParsed = useNodeOrEdgeTypes(edgeTypes, createEdgeTypes) as EdgeTypes;
+    const nodeTypesWrapped = useNodeOrEdgeTypes(nodeTypes, createNodeTypes) as NodeTypesWrapped;
+    const edgeTypesWrapped = useNodeOrEdgeTypes(edgeTypes, createEdgeTypes) as EdgeTypesWrapped;
     const reactFlowClasses = cc(['react-flow', className]);
 
     return (
@@ -161,8 +163,8 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             onNodeDragStart={onNodeDragStart}
             onNodeDrag={onNodeDrag}
             onNodeDragStop={onNodeDragStop}
-            nodeTypes={nodeTypesParsed}
-            edgeTypes={edgeTypesParsed}
+            nodeTypes={nodeTypesWrapped}
+            edgeTypes={edgeTypesWrapped}
             connectionLineType={connectionLineType}
             connectionLineStyle={connectionLineStyle}
             connectionLineComponent={connectionLineComponent}

src/container/ReactFlow/utils.ts

@@ -1,12 +1,12 @@
 import { useMemo, useRef } from 'react';
 import shallow from 'zustand/shallow';
 
-import { EdgeTypes, NodeTypes } from '../../types';
+import { EdgeTypes, EdgeTypesWrapped, NodeTypes, NodeTypesWrapped } from '../../types';
 import { CreateEdgeTypes } from '../EdgeRenderer/utils';
 import { CreateNodeTypes } from '../NodeRenderer/utils';
 
-export function useNodeOrEdgeTypes(nodeOrEdgeTypes: NodeTypes, createTypes: CreateNodeTypes): NodeTypes;
-export function useNodeOrEdgeTypes(nodeOrEdgeTypes: EdgeTypes, createTypes: CreateEdgeTypes): EdgeTypes;
+export function useNodeOrEdgeTypes(nodeOrEdgeTypes: NodeTypes, createTypes: CreateNodeTypes): NodeTypesWrapped;
+export function useNodeOrEdgeTypes(nodeOrEdgeTypes: EdgeTypes, createTypes: CreateEdgeTypes): EdgeTypesWrapped;
 export function useNodeOrEdgeTypes(nodeOrEdgeTypes: any, createTypes: any): any {
   const typesKeysRef = useRef<string[] | null>(null);
 
@@ -28,7 +28,7 @@ export function useNodeOrEdgeTypes(nodeOrEdgeTypes: any, createTypes: any): any
   return typesParsed;
 }
 
-export default function injectStyle(css: string): void {
+export function injectStyle(css: string): void {
   if (!css || typeof document === 'undefined') return;
 
   const head = document.head || document.getElementsByTagName('head')[0];