refactor(classnames): use faster classcat alternative

package-lock.json

@@ -6177,6 +6177,11 @@
       "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==",
       "dev": true
     },
+    "classcat": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/classcat/-/classcat-4.1.0.tgz",
+      "integrity": "sha512-RA8O5oCi1I1CF6rR4cRBROh8MtZzM4w7xKLm0jd+S6UN2G4FIto+9DVOeFc46JEZFN5PVe/EZWLQO1VU/AUH4A=="
+    },
     "classnames": {
       "version": "2.2.6",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",

package.json

@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@welldone-software/why-did-you-render": "^4.2.5",
-    "classnames": "^2.2.6",
+    "classcat": "^4.1.0",
     "d3-selection": "^1.4.1",
     "d3-zoom": "^1.8.3",
     "easy-peasy": "^3.3.1",

src/additional-components/Background/index.tsx

@@ -1,5 +1,5 @@
 import React, { memo, HTMLAttributes } from 'react';
-import classnames from 'classnames';
+import cc from 'classcat';
 
 import { useStoreState } from '../../store/hooks';
 import { BackgroundVariant } from '../../types';
@@ -25,7 +25,7 @@ const Background = memo(
     const height = useStoreState((s) => s.height);
     const [x, y, scale] = useStoreState((s) => s.transform);
 
-    const bgClasses = classnames('react-flow__background', className);
+    const bgClasses = cc(['react-flow__background', className]);
     const bgColor = color ? color : defaultColors[variant];
     const scaledGap = gap * scale;
     const xOffset = x % scaledGap;

src/additional-components/Controls/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classnames from 'classnames';
+import cc from 'classcat';
 
 import { useStoreState, useStoreActions } from '../../store/hooks';
 
@@ -24,7 +24,7 @@ const Controls = ({ style, showZoom = true, showFitView = true, showInteractive
   const zoomOut = useStoreActions((actions) => actions.zoomOut);
 
   const isInteractive = useStoreState((s) => s.nodesDraggable && s.nodesConnectable && s.elementsSelectable);
-  const mapClasses = classnames('react-flow__controls', className);
+  const mapClasses = cc(['react-flow__controls', className]);
 
   return (
     <div className={mapClasses} style={style}>

src/additional-components/MiniMap/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classnames from 'classnames';
+import cc from 'classcat';
 
 import { useStoreState } from '../../store/hooks';
 import { getRectOfNodes, getBoundsofRects } from '../../utils/graph';
@@ -31,7 +31,7 @@ const MiniMap = ({
   const [tX, tY, tScale] = useStoreState((s) => s.transform);
   const nodes = useStoreState((s) => s.nodes);
 
-  const mapClasses = classnames('react-flow__minimap', className);
+  const mapClasses = cc(['react-flow__minimap', className]);
   const elementWidth = (style.width || defaultWidth)! as number;
   const elementHeight = (style.height || defaultHeight)! as number;
   const nodeColorFunc = (nodeColor instanceof Function ? nodeColor : () => nodeColor) as StringFunc;

src/components/ConnectionLine/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, CSSProperties } from 'react';
-import cx from 'classnames';
+import cc from 'classcat';
 
 import { getBezierPath } from '../Edges/BezierEdge';
 import { getStepPath } from '../Edges/StepEdge';
@@ -46,7 +46,7 @@ export default ({
     return null;
   }
 
-  const connectionLineClasses: string = cx('react-flow__connection', className);
+  const connectionLineClasses: string = cc(['react-flow__connection', className]);
 
   const sourceHandle = handleId
     ? sourceNode.__rf.handleBounds[connectionHandleType].find((d: HandleElement) => d.id === handleId)

src/components/Edges/wrapEdge.tsx

@@ -1,5 +1,5 @@
 import React, { memo, ComponentType, CSSProperties } from 'react';
-import cx from 'classnames';
+import cc from 'classcat';
 
 import { useStoreActions } from '../../store/hooks';
 import { ElementId, Edge, EdgeCompProps } from '../../types';
@@ -39,7 +39,7 @@ export default (EdgeComponent: ComponentType<EdgeCompProps>) => {
       ...rest
     }: EdgeWrapperProps) => {
       const setSelectedElements = useStoreActions((a) => a.setSelectedElements);
-      const edgeClasses = cx('react-flow__edge', `react-flow__edge-${type}`, className, { selected, animated });
+      const edgeClasses = cc(['react-flow__edge', `react-flow__edge-${type}`, className, { selected, animated }]);
       const edgeGroupStyle: CSSProperties = {
         pointerEvents: elementsSelectable ? 'all' : 'none',
       };

src/components/Handle/BaseHandle.tsx

@@ -1,5 +1,5 @@
 import React, { memo, MouseEvent as ReactMouseEvent, CSSProperties } from 'react';
-import cx from 'classnames';
+import cc from 'classcat';
 
 import { HandleType, ElementId, Position, XYPosition, OnConnectFunc, Connection, SetConnectionId } from '../../types';
 
@@ -144,10 +144,16 @@ const BaseHandle = memo(
     ...rest
   }: BaseHandleProps) => {
     const isTarget = type === 'target';
-    const handleClasses = cx('react-flow__handle', `react-flow__handle-${position}`, 'nodrag', className, {
+    const handleClasses = cc([
-      source: !isTarget,
+      'react-flow__handle',
-      target: isTarget,
+      `react-flow__handle-${position}`,
-    });
+      'nodrag',
+      className,
+      {
+        source: !isTarget,
+        target: isTarget,
+      },
+    ]);
 
     const nodeIdWithHandleId = id ? `${nodeId}__${id}` : nodeId;
 

src/components/Handle/index.tsx

@@ -1,5 +1,5 @@
 import React, { memo, useContext } from 'react';
-import classnames from 'classnames';
+import cc from 'classcat';
 
 import { useStoreActions, useStoreState } from '../../store/hooks';
 import BaseHandle from './BaseHandle';
@@ -26,7 +26,7 @@ const Handle = memo(
       onConnectAction(params);
       onConnect(params);
     };
-    const handleClasses = classnames(className, { connectable: isConnectable });
+    const handleClasses = cc([className, { connectable: isConnectable }]);
 
     return (
       <BaseHandle

src/components/Nodes/wrapNode.tsx

@@ -10,7 +10,8 @@ import React, {
   useCallback,
 } from 'react';
 import { DraggableCore } from 'react-draggable';
-import cx from 'classnames';
+import cc from 'classcat';
+
 import { ResizeObserver } from 'resize-observer';
 import { useStoreActions } from '../../store/hooks';
 
@@ -192,10 +193,15 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
       const [offset, setOffset] = useState({ x: 0, y: 0 });
       const [isDragging, setDragging] = useState(false);
       const position = { x: xPos, y: yPos };
-      const nodeClasses = cx('react-flow__node', `react-flow__node-${type}`, className, {
+      const nodeClasses = cc([
-        selected,
+        'react-flow__node',
-        selectable: isSelectable,
+        `react-flow__node-${type}`,
-      });
+        className,
+        {
+          selected,
+          selectable: isSelectable,
+        },
+      ]);
       const node = { id, type, position, data };
       const onMouseEnterHandler = useMemo(() => {
         if (!onMouseEnter || isDragging) {

src/container/ReactFlow/index.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, CSSProperties, HTMLAttributes, MouseEvent } from 'react';
-import cx from 'classnames';
+import cc from 'classcat';
 
 const nodeEnv: string = process.env.NODE_ENV as string;
 
@@ -98,9 +98,10 @@ const ReactFlow = ({
 }: ReactFlowProps) => {
   const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), []);
   const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []);
+  const reactFlowClasses = cc(['react-flow', className]);
 
   return (
-    <div style={style} className={cx('react-flow', className)}>
+    <div style={style} className={reactFlowClasses}>
       <Wrapper>
         <GraphView
           onLoad={onLoad}