chore(examples): only use bundle

examples/nextjs/pages/Backgrounds/index.tsx

@@ -5,13 +5,10 @@ import {
   Node,
   ReactFlowProvider,
   useNodesState,
-} from '@react-flow/core';
-
-import {
   Background,
   BackgroundProps,
   BackgroundVariant,
-} from '@react-flow/background';
+} from '@react-flow/bundle';
 
 import styles from './style.module.css';
 
@@ -23,10 +20,7 @@ const initialNodes: Node[] = [
   },
 ];
 
-const Flow: FC<{ id: string; bgProps: BackgroundProps }> = ({
+const Flow: FC<{ id: string; bgProps: BackgroundProps }> = ({ id, bgProps }) => {
-  id,
-  bgProps,
-}) => {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
 
   return (
@@ -41,14 +35,8 @@ const Flow: FC<{ id: string; bgProps: BackgroundProps }> = ({
 const Backgrounds: FC = () => (
   <div className={styles.wrapper}>
     <Flow id="flow-a" bgProps={{ variant: BackgroundVariant.Dots }} />
-    <Flow
+    <Flow id="flow-b" bgProps={{ variant: BackgroundVariant.Lines, gap: [50, 50] }} />
-      id="flow-b"
+    <Flow id="flow-c" bgProps={{ variant: BackgroundVariant.Cross, gap: [100, 50] }} />
-      bgProps={{ variant: BackgroundVariant.Lines, gap: [50, 50] }}
-    />
-    <Flow
-      id="flow-c"
-      bgProps={{ variant: BackgroundVariant.Cross, gap: [100, 50] }}
-    />
   </div>
 );
 

examples/nextjs/pages/ControlledUncontrolled/index.tsx

@@ -7,8 +7,9 @@ import {
   ReactFlowProvider,
   useNodesState,
   useEdgesState,
-} from '@react-flow/core';
+  Background,
-import { Background, BackgroundVariant } from '@react-flow/background';
+  BackgroundVariant,
+} from '@react-flow/bunde';
 
 const defaultNodes: Node[] = [
   {

examples/nextjs/pages/CustomConnectionLine/ConnectionLine.tsx

@@ -1,12 +1,7 @@
 import React, { FC } from 'react';
-import { ConnectionLineComponentProps } from '@react-flow/core';
+import { ConnectionLineComponentProps } from '@react-flow/bundle';
 
-const ConnectionLine: FC<ConnectionLineComponentProps> = ({
+const ConnectionLine: FC<ConnectionLineComponentProps> = ({ fromX, fromY, toX, toY }) => {
-  fromX,
-  fromY,
-  toX,
-  toY,
-}) => {
   return (
     <g>
       <path
@@ -16,14 +11,7 @@ const ConnectionLine: FC<ConnectionLineComponentProps> = ({
         className="animated"
         d={`M${fromX},${fromY} C ${fromX} ${toY} ${fromX} ${toY} ${toX},${toY}`}
       />
-      <circle
+      <circle cx={toX} cy={toY} fill="#fff" r={3} stroke="#222" strokeWidth={1.5} />
-        cx={toX}
-        cy={toY}
-        fill="#fff"
-        r={3}
-        stroke="#222"
-        strokeWidth={1.5}
-      />
     </g>
   );
 };

examples/nextjs/pages/CustomConnectionLine/index.tsx

@@ -7,8 +7,9 @@ import {
   Edge,
   useNodesState,
   useEdgesState,
-} from '@react-flow/core';
+  Background,
-import { Background, BackgroundVariant } from '@react-flow/background';
+  BackgroundVariant,
+} from '@react-flow/bundle';
 
 import ConnectionLine from './ConnectionLine';
 
@@ -25,10 +26,7 @@ const initialEdges: Edge[] = [];
 const ConnectionLineFlow = () => {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const onConnect = useCallback(
+  const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
-    (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)),
-    [setEdges]
-  );
 
   return (
     <ReactFlow

examples/nextjs/pages/CustomNode/ColorSelectorNode.tsx

@@ -1,11 +1,5 @@
 import React, { memo, FC, CSSProperties } from 'react';
-import {
+import { Handle, Position, NodeProps, Connection, Edge } from '@react-flow/bundle';
-  Handle,
-  Position,
-  NodeProps,
-  Connection,
-  Edge,
-} from '@react-flow/renderer';
 
 const targetHandleStyle: CSSProperties = { background: '#555' };
 const sourceHandleStyleA: CSSProperties = { ...targetHandleStyle, top: 10 };
@@ -15,27 +9,16 @@ const sourceHandleStyleB: CSSProperties = {
   top: 'auto',
 };
 
-const onConnect = (params: Connection | Edge) =>
+const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params);
-  console.log('handle onConnect', params);
 
 const ColorSelectorNode: FC<NodeProps> = ({ data, isConnectable }) => {
   return (
     <>
-      <Handle
+      <Handle type="target" position={Position.Left} style={targetHandleStyle} onConnect={onConnect} />
-        type="target"
-        position={Position.Left}
-        style={targetHandleStyle}
-        onConnect={onConnect}
-      />
       <div>
         Custom Color Picker Node: <strong>{data.color}</strong>
       </div>
-      <input
+      <input className="nodrag" type="color" onChange={data.onChange} defaultValue={data.color} />
-        className="nodrag"
-        type="color"
-        onChange={data.onChange}
-        defaultValue={data.color}
-      />
       <Handle
         type="source"
         position={Position.Right}
@@ -46,13 +29,7 @@ const ColorSelectorNode: FC<NodeProps> = ({ data, isConnectable }) => {
           console.log('You trigger mousedown event', e);
         }}
       />
-      <Handle
+      <Handle type="source" position={Position.Right} id="b" style={sourceHandleStyleB} isConnectable={isConnectable} />
-        type="source"
-        position={Position.Right}
-        id="b"
-        style={sourceHandleStyleB}
-        isConnectable={isConnectable}
-      />
     </>
   );
 };

examples/nextjs/pages/CustomNode/index.tsx

@@ -11,7 +11,7 @@ import {
   Connection,
   useNodesState,
   useEdgesState,
-} from '@react-flow/renderer';
+} from '@react-flow/bundle';
 
 import ColorSelectorNode from './ColorSelectorNode';
 
@@ -120,9 +120,7 @@ const CustomNodeFlow = () => {
   }, []);
 
   const onConnect = (connection: Connection) =>
-    setEdges((eds) =>
+    setEdges((eds) => addEdge({ ...connection, animated: true, style: { stroke: '#fff' } }, eds));
-      addEdge({ ...connection, animated: true, style: { stroke: '#fff' } }, eds)
-    );
 
   return (
     <ReactFlow

examples/nextjs/pages/DefaultNodes/index.tsx

@@ -5,8 +5,9 @@ import {
   Node,
   Edge,
   ReactFlowProvider,
-} from '@react-flow/core';
+  Background,
-import { Background, BackgroundVariant } from '@react-flow/background';
+  BackgroundVariant,
+} from '@react-flow/bundle';
 
 const defaultNodes: Node[] = [
   {
@@ -77,12 +78,7 @@ const DefaultNodes = () => {
   };
 
   return (
-    <ReactFlow
+    <ReactFlow defaultNodes={defaultNodes} defaultEdges={defaultEdges} defaultEdgeOptions={defaultEdgeOptions} fitView>
-      defaultNodes={defaultNodes}
-      defaultEdges={defaultEdges}
-      defaultEdgeOptions={defaultEdgeOptions}
-      fitView
-    >
       <Background variant={BackgroundVariant.Lines} />
 
       <div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>

examples/nextjs/pages/DragHandle/DragHandleNode.tsx

@@ -1,15 +1,8 @@
 import React, { memo, FC } from 'react';
 
-import {
+import { Handle, Position, NodeProps, Connection, Edge } from '@react-flow/bundle';
-  Handle,
-  Position,
-  NodeProps,
-  Connection,
-  Edge,
-} from '@react-flow/core';
 
-const onConnect = (params: Connection | Edge) =>
+const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params);
-  console.log('handle onConnect', params);
 
 const labelStyle = {
   display: 'flex',
@@ -28,12 +21,11 @@ const dragHandleStyle = {
 const ColorSelectorNode: FC<NodeProps> = () => {
   return (
     <>
-      <Handle type='target' position={Position.Left} onConnect={onConnect} />
+      <Handle type="target" position={Position.Left} onConnect={onConnect} />
       <div style={labelStyle}>
-        Only draggable here →{' '}
+        Only draggable here → <span className="custom-drag-handle" style={dragHandleStyle} />
-        <span className='custom-drag-handle' style={dragHandleStyle} />
       </div>
-      <Handle type='source' position={Position.Right} />
+      <Handle type="source" position={Position.Right} />
     </>
   );
 };

examples/nextjs/pages/DragNDrop/index.tsx

@@ -9,8 +9,8 @@ import {
   Node,
   useNodesState,
   useEdgesState,
-} from '@react-flow/core';
+  Controls,
-import { Controls } from '@react-flow/controls';
+} from '@react-flow/bundle';
 
 import Sidebar from './Sidebar';
 
@@ -34,13 +34,11 @@ let id = 0;
 const getId = () => `dndnode_${id++}`;
 
 const DnDFlow = () => {
-  const [reactFlowInstance, setReactFlowInstance] =
+  const [reactFlowInstance, setReactFlowInstance] = useState<ReactFlowInstance>();
-    useState<ReactFlowInstance>();
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
 
-  const onConnect = (params: Connection | Edge) =>
+  const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
-    setEdges((eds) => addEdge(params, eds));
   const onInit = (rfi: ReactFlowInstance) => setReactFlowInstance(rfi);
 
   const onDrop = (event: DragEvent) => {

examples/nextjs/pages/EdgeTypes/index.tsx

@@ -14,7 +14,7 @@ import {
   Edge,
   useNodesState,
   useEdgesState,
-} from '@react-flow/renderer';
+} from '@react-flow/bundle';
 
 import { getElements } from './utils';
 
@@ -31,8 +31,7 @@ const deleteKeyCode = ['AltLeft+KeyD', 'Backspace'];
 const EdgeTypesFlow = () => {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const onConnect = (params: Connection | Edge) =>
+  const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
-    setEdges((eds) => addEdge(params, eds));
 
   return (
     <ReactFlow

examples/nextjs/pages/EdgeTypes/utils.ts

@@ -1,4 +1,4 @@
-import { Edge, Node, Position } from '@react-flow/core';
+import { Edge, Node, Position } from '@react-flow/bundle';
 
 const nodeWidth = 80;
 const nodeGapWidth = nodeWidth * 2;
@@ -54,18 +54,10 @@ const getNodeId = (): string => (id++).toString();
 export function getElements(): { nodes: Node[]; edges: Edge[] } {
   const initialElements = { nodes: [] as Node[], edges: [] as Edge[] };
 
-  for (
+  for (let sourceTargetIndex = 0; sourceTargetIndex < sourceTargetPositions.length; sourceTargetIndex++) {
-    let sourceTargetIndex = 0;
-    sourceTargetIndex < sourceTargetPositions.length;
-    sourceTargetIndex++
-  ) {
     const currSourceTargetPos = sourceTargetPositions[sourceTargetIndex];
 
-    for (
+    for (let edgeTypeIndex = 0; edgeTypeIndex < edgeTypes.length; edgeTypeIndex++) {
-      let edgeTypeIndex = 0;
-      edgeTypeIndex < edgeTypes.length;
-      edgeTypeIndex++
-    ) {
       const currEdgeType = edgeTypes[edgeTypeIndex];
 
       for (let offsetIndex = 0; offsetIndex < offsets.length; offsetIndex++) {

examples/nextjs/pages/Edges/CustomEdge.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { EdgeProps, getBezierPath } from '@react-flow/core';
+import { EdgeProps, getBezierPath } from '@react-flow/bundle';
 
 const CustomEdge: FC<EdgeProps> = ({
   id,
@@ -22,14 +22,9 @@ const CustomEdge: FC<EdgeProps> = ({
 
   return (
     <>
-      <path id={id} className='react-flow__edge-path' d={edgePath} />
+      <path id={id} className="react-flow__edge-path" d={edgePath} />
       <text>
-        <textPath
+        <textPath href={`#${id}`} style={{ fontSize: '12px' }} startOffset="50%" textAnchor="middle">
-          href={`#${id}`}
-          style={{ fontSize: '12px' }}
-          startOffset='50%'
-          textAnchor='middle'
-        >
           {data.text}
         </textPath>
       </text>

examples/nextjs/pages/Edges/CustomEdge2.tsx

@@ -1,10 +1,5 @@
 import React, { FC } from 'react';
-import {
+import { EdgeProps, getBezierPath, EdgeText, getBezierEdgeCenter } from '@react-flow/bundle';
-  EdgeProps,
-  getBezierPath,
-  EdgeText,
-  getBezierEdgeCenter,
-} from '@react-flow/core';
 
 const CustomEdge: FC<EdgeProps> = ({
   id,
@@ -33,7 +28,7 @@ const CustomEdge: FC<EdgeProps> = ({
 
   return (
     <>
-      <path id={id} className='react-flow__edge-path' d={edgePath} />
+      <path id={id} className="react-flow__edge-path" d={edgePath} />
       <EdgeText
         x={centerX}
         y={centerY}

examples/nextjs/pages/Edges/index.tsx

@@ -12,23 +12,18 @@ import {
   Node,
   useEdgesState,
   useNodesState,
-} from '@react-flow/renderer';
+} from '@react-flow/bundle';
 
 import CustomEdge from './CustomEdge';
 import CustomEdge2 from './CustomEdge2';
 
-const onNodeDragStop = (_: MouseEvent, node: Node) =>
+const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
-  console.log('drag stop', node);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
 const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
-const onEdgeDoubleClick = (_: MouseEvent, edge: Edge) =>
+const onEdgeDoubleClick = (_: MouseEvent, edge: Edge) => console.log('dblclick', edge);
-  console.log('dblclick', edge);
+const onEdgeMouseEnter = (_: MouseEvent, edge: Edge) => console.log('enter', edge);
-const onEdgeMouseEnter = (_: MouseEvent, edge: Edge) =>
+const onEdgeMouseMove = (_: MouseEvent, edge: Edge) => console.log('move', edge);
-  console.log('enter', edge);
+const onEdgeMouseLeave = (_: MouseEvent, edge: Edge) => console.log('leave', edge);
-const onEdgeMouseMove = (_: MouseEvent, edge: Edge) =>
-  console.log('move', edge);
-const onEdgeMouseLeave = (_: MouseEvent, edge: Edge) =>
-  console.log('leave', edge);
 
 const initialNodes: Node[] = [
   {
@@ -189,10 +184,7 @@ const defaultViewport = {
 const EdgesFlow = () => {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const onConnect = useCallback(
+  const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
-    (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)),
-    [setEdges]
-  );
 
   return (
     <ReactFlow

examples/nextjs/pages/Empty/index.tsx

@@ -12,13 +12,11 @@ import {
   useNodesState,
   useEdgesState,
   ReactFlowInstance,
-} from '@react-flow/renderer';
+} from '@react-flow/bundle';
 
-const onInit = (reactFlowInstance: ReactFlowInstance) =>
+const onInit = (reactFlowInstance: ReactFlowInstance) => console.log('flow loaded:', reactFlowInstance);
-  console.log('flow loaded:', reactFlowInstance);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
-const onNodeDragStop = (_: MouseEvent, node: Node) =>
+const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
-  console.log('drag stop', node);
 
 const buttonStyle: CSSProperties = {
   position: 'absolute',
@@ -31,10 +29,7 @@ const EmptyFlow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
 
-  const onConnect = useCallback(
+  const onConnect = useCallback((params: Connection | Edge) => setEdges((els) => addEdge(params, els)), [setEdges]);
-    (params: Connection | Edge) => setEdges((els) => addEdge(params, els)),
-    [setEdges]
-  );
   const addRandomNode = () => {
     const nodeId = (nodes.length + 1).toString();
     const newNode: Node = {

examples/nextjs/pages/FloatingEdges/FloatingConnectionLine.tsx

@@ -1,9 +1,5 @@
 import React, { FC } from 'react';
-import {
+import { getBezierPath, ConnectionLineComponentProps, Node } from '@react-flow/bundle';
-  getBezierPath,
-  ConnectionLineComponentProps,
-  Node,
-} from '@react-flow/core';
 
 import { getEdgeParams } from './utils';
 
@@ -37,21 +33,8 @@ const FloatingConnectionLine: FC<ConnectionLineComponentProps> = ({
 
   return (
     <g>
-      <path
+      <path fill="none" stroke="#222" strokeWidth={1.5} className="animated" d={d} />
-        fill='none'
+      <circle cx={targetX} cy={targetY} fill="#fff" r={3} stroke="#222" strokeWidth={1.5} />
-        stroke='#222'
-        strokeWidth={1.5}
-        className='animated'
-        d={d}
-      />
-      <circle
-        cx={targetX}
-        cy={targetY}
-        fill='#fff'
-        r={3}
-        stroke='#222'
-        strokeWidth={1.5}
-      />
     </g>
   );
 };

examples/nextjs/pages/FloatingEdges/FloatingEdge.tsx

@@ -1,10 +1,5 @@
 import React, { FC, useMemo, CSSProperties } from 'react';
-import {
+import { EdgeProps, useStore, getBezierPath, ReactFlowState } from '@react-flow/bundle';
-  EdgeProps,
-  useStore,
-  getBezierPath,
-  ReactFlowState,
-} from '@react-flow/core';
 
 import { getEdgeParams } from './utils';
 
@@ -13,23 +8,14 @@ const nodeSelector = (s: ReactFlowState) => s.nodeInternals;
 const FloatingEdge: FC<EdgeProps> = ({ id, source, target, style }) => {
   const nodeInternals = useStore(nodeSelector);
 
-  const sourceNode = useMemo(
+  const sourceNode = useMemo(() => nodeInternals.get(source), [source, nodeInternals]);
-    () => nodeInternals.get(source),
+  const targetNode = useMemo(() => nodeInternals.get(target), [target, nodeInternals]);
-    [source, nodeInternals]
-  );
-  const targetNode = useMemo(
-    () => nodeInternals.get(target),
-    [target, nodeInternals]
-  );
 
   if (!sourceNode || !targetNode) {
     return null;
   }
 
-  const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(
+  const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode);
-    sourceNode,
-    targetNode
-  );
 
   const d = getBezierPath({
     sourceX: sx,
@@ -41,13 +27,8 @@ const FloatingEdge: FC<EdgeProps> = ({ id, source, target, style }) => {
   });
 
   return (
-    <g className='react-flow__connection'>
+    <g className="react-flow__connection">
-      <path
+      <path id={id} className="react-flow__edge-path" d={d} style={style as CSSProperties} />
-        id={id}
-        className='react-flow__edge-path'
-        d={d}
-        style={style as CSSProperties}
-      />
     </g>
   );
 };

examples/nextjs/pages/FloatingEdges/index.tsx

@@ -9,7 +9,7 @@ import {
   Connection,
   useNodesState,
   useEdgesState,
-} from '@react-flow/renderer';
+} from '@react-flow/bundle';
 
 import styles from './style.module.css';
 
@@ -17,8 +17,7 @@ import FloatingConnectionLine from './FloatingConnectionLine';
 import FloatingEdge from './FloatingEdge';
 import { createElements } from './utils';
 
-const onInit = (reactFlowInstance: ReactFlowInstance) =>
+const onInit = (reactFlowInstance: ReactFlowInstance) => reactFlowInstance.fitView();
-  reactFlowInstance.fitView();
 
 const { nodes: initialNodes, edges: initialEdges } =
   typeof window !== 'undefined' ? createElements() : { nodes: [], edges: [] };

examples/nextjs/pages/FloatingEdges/utils.ts

@@ -1,11 +1,8 @@
-import React, { Position, XYPosition, Node, Edge } from '@react-flow/core';
+import { Position, XYPosition, Node, Edge } from '@react-flow/bundle';
 
 // this helper function returns the intersection point
 // of the line between the center of the intersectionNode and the target node
-function getNodeIntersection(
+function getNodeIntersection(intersectionNode: Node, targetNode: Node): XYPosition {
-  intersectionNode: Node,
-  targetNode: Node
-): XYPosition {
   // https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a
 
   const {

examples/nextjs/pages/Hidden/index.tsx

@@ -8,10 +8,9 @@ import {
   Node,
   useNodesState,
   useEdgesState,
-} from '@react-flow/core';
+  MiniMap,
-
+  Controls,
-import { Controls } from '@react-flow/controls';
+} from '@react-flow/bundle';
-import { MiniMap } from '@react-flow/minimap';
 
 const initialNodes: Node[] = [
   {

examples/nextjs/pages/Interaction/index.tsx

@@ -1,8 +1,4 @@
-import React, {
+import React, { useState, MouseEvent as ReactMouseEvent, WheelEvent } from 'react';
-  useState,
-  MouseEvent as ReactMouseEvent,
-  WheelEvent,
-} from 'react';
 import {
   ReactFlow,
   addEdge,
@@ -13,10 +9,9 @@ import {
   Viewport,
   useNodesState,
   useEdgesState,
-} from '@react-flow/core';
+  Controls,
-
+  MiniMap,
-import { Controls } from '@react-flow/controls';
+} from '@react-flow/bundle';
-import { MiniMap } from '@react-flow/minimap';
 
 const initialNodes: Node[] = [
   {
@@ -35,27 +30,19 @@ const initialEdges: Edge[] = [
   { id: 'e1-3', source: '1', target: '3' },
 ];
 
-const onNodeDragStart = (_: ReactMouseEvent, node: Node) =>
+const onNodeDragStart = (_: ReactMouseEvent, node: Node) => console.log('drag start', node);
-  console.log('drag start', node);
+const onNodeDragStop = (_: ReactMouseEvent, node: Node) => console.log('drag stop', node);
-const onNodeDragStop = (_: ReactMouseEvent, node: Node) =>
+const onNodeClick = (_: ReactMouseEvent, node: Node) => console.log('click', node);
-  console.log('drag stop', node);
+const onEdgeClick = (_: ReactMouseEvent, edge: Edge) => console.log('click', edge);
-const onNodeClick = (_: ReactMouseEvent, node: Node) =>
+const onPaneClick = (event: ReactMouseEvent) => console.log('onPaneClick', event);
-  console.log('click', node);
-const onEdgeClick = (_: ReactMouseEvent, edge: Edge) =>
-  console.log('click', edge);
-const onPaneClick = (event: ReactMouseEvent) =>
-  console.log('onPaneClick', event);
 const onPaneScroll = (event?: WheelEvent) => console.log('onPaneScroll', event);
-const onPaneContextMenu = (event: ReactMouseEvent) =>
+const onPaneContextMenu = (event: ReactMouseEvent) => console.log('onPaneContextMenu', event);
-  console.log('onPaneContextMenu', event);
+const onMoveEnd = (_: TouchEvent | MouseEvent, viewport: Viewport) => console.log('onMoveEnd', viewport);
-const onMoveEnd = (_: TouchEvent | MouseEvent, viewport: Viewport) =>
-  console.log('onMoveEnd', viewport);
 
 const InteractionFlow = () => {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const onConnect = (params: Connection | Edge) =>
+  const onConnect = (params: Connection | Edge) => setEdges((els) => addEdge(params, els));
-    setEdges((els) => addEdge(params, els));
 
   const [isSelectable, setIsSelectable] = useState<boolean>(false);
   const [isDraggable, setIsDraggable] = useState<boolean>(false);
@@ -63,15 +50,12 @@ const InteractionFlow = () => {
   const [zoomOnScroll, setZoomOnScroll] = useState<boolean>(false);
   const [zoomOnPinch, setZoomOnPinch] = useState<boolean>(false);
   const [panOnScroll, setPanOnScroll] = useState<boolean>(false);
-  const [panOnScrollMode, setPanOnScrollMode] = useState<PanOnScrollMode>(
+  const [panOnScrollMode, setPanOnScrollMode] = useState<PanOnScrollMode>(PanOnScrollMode.Free);
-    PanOnScrollMode.Free
-  );
   const [zoomOnDoubleClick, setZoomOnDoubleClick] = useState<boolean>(false);
   const [panOnDrag, setPanOnDrag] = useState<boolean>(true);
   const [captureZoomClick, setCaptureZoomClick] = useState<boolean>(false);
   const [captureZoomScroll, setCaptureZoomScroll] = useState<boolean>(false);
-  const [captureElementClick, setCaptureElementClick] =
+  const [captureElementClick, setCaptureElementClick] = useState<boolean>(false);
-    useState<boolean>(false);
 
   return (
     <ReactFlow
@@ -180,9 +164,7 @@ const InteractionFlow = () => {
             <select
               id="panonscrollmode"
               value={panOnScrollMode}
-              onChange={(event) =>
+              onChange={(event) => setPanOnScrollMode(event.target.value as PanOnScrollMode)}
-                setPanOnScrollMode(event.target.value as PanOnScrollMode)
-              }
               className="react-flow__panonscrollmode"
             >
               <option value="free">free</option>

examples/nextjs/pages/Layouting/index.tsx

@@ -11,7 +11,7 @@ import {
   useEdgesState,
   MarkerType,
   EdgeMarker,
-} from '@react-flow/renderer';
+} from '@react-flow/bundle';
 
 import dagre from 'dagre';
 
@@ -78,10 +78,7 @@ const LayoutFlow = () => {
       eds.map((e) => ({
         ...e,
         markerEnd: {
-          type:
+          type: (e.markerEnd as EdgeMarker)?.type === MarkerType.Arrow ? MarkerType.ArrowClosed : MarkerType.Arrow,
-            (e.markerEnd as EdgeMarker)?.type === MarkerType.Arrow
-              ? MarkerType.ArrowClosed
-              : MarkerType.Arrow,
         },
       }))
     );

examples/nextjs/pages/Layouting/initial-elements.ts

@@ -1,4 +1,4 @@
-import { Node, Edge, XYPosition, MarkerType } from '@react-flow/core';
+import { Node, Edge, XYPosition, MarkerType } from '@react-flow/bundle';
 
 const position: XYPosition = { x: 0, y: 0 };
 

examples/nextjs/pages/MultiFlows/index.tsx

@@ -11,7 +11,7 @@ import {
   useNodesState,
   useEdgesState,
   MarkerType,
-} from '@react-flow/renderer';
+} from '@react-flow/bundle';
 
 import styles from './multiflows.module.css';
 
@@ -58,8 +58,7 @@ const Flow: FC<{ id: string }> = ({ id }) => {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
-  const onConnect = (params: Edge | Connection) =>
+  const onConnect = (params: Edge | Connection) => setEdges((eds) => addEdge(params, eds));
-    setEdges((eds) => addEdge(params, eds));
 
   return (
     <ReactFlowProvider>

examples/nextjs/pages/NestedNodes/index.tsx

@@ -11,10 +11,9 @@ import {
   Edge,
   ReactFlowInstance,
   Connection,
-} from '@react-flow/renderer';
+} from '@react-flow/bundle';
 
-const onNodeDragStop = (_: MouseEvent, node: Node) =>
+const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
-  console.log('drag stop', node);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
 const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
 
@@ -110,10 +109,7 @@ const NestedFlow = () => {
     },
     [setEdges]
   );
-  const onInit = useCallback(
+  const onInit = useCallback((reactFlowInstance: ReactFlowInstance) => setRfInstance(reactFlowInstance), []);
-    (reactFlowInstance: ReactFlowInstance) => setRfInstance(reactFlowInstance),
-    []
-  );
 
   const updatePos = () => {
     setNodes((nds) => {

examples/nextjs/pages/NodeTypeChange/index.tsx

@@ -1,15 +1,6 @@
 import React, { CSSProperties, useCallback } from 'react';
 
-import {
+import { ReactFlow, addEdge, Node, Position, Connection, Edge, useNodesState, useEdgesState } from '@react-flow/bundle';
-  ReactFlow,
-  addEdge,
-  Node,
-  Position,
-  Connection,
-  Edge,
-  useNodesState,
-  useEdgesState,
-} from '@react-flow/core';
 
 const initialNodes: Node[] = [
   {
@@ -29,9 +20,7 @@ const initialNodes: Node[] = [
   },
 ];
 
-const initialEdges: Edge[] = [
+const initialEdges: Edge[] = [{ id: 'e1-2', source: '1', type: 'smoothstep', target: '2', animated: true }];
-  { id: 'e1-2', source: '1', type: 'smoothstep', target: '2', animated: true },
-];
 
 const buttonStyle: CSSProperties = {
   position: 'absolute',
@@ -43,10 +32,7 @@ const buttonStyle: CSSProperties = {
 const NodeTypeChangeFlow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const onConnect = useCallback(
+  const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
-    (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)),
-    [setEdges]
-  );
   const changeType = () => {
     setNodes((nds) =>
       nds.map((node) => {

examples/nextjs/pages/NodeTypesObjectChange/index.tsx

@@ -11,7 +11,7 @@ import {
   NodeTypes,
   useNodesState,
   useEdgesState,
-} from '@react-flow/core';
+} from '@react-flow/bundle';
 
 const initialNodes: Node[] = [
   {
@@ -68,10 +68,7 @@ const NodeTypeChangeFlow = () => {
   const [nodeTypesId, setNodeTypesId] = useState<string>('a');
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-  const onConnect = useCallback(
+  const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
-    (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)),
-    [setEdges]
-  );
   const changeType = () => setNodeTypesId((nt) => (nt === 'a' ? 'b' : 'a'));
 
   return (

examples/nextjs/pages/Overview/index.tsx

@@ -1,8 +1,4 @@
-import React, {
+import React, { MouseEvent as ReactMouseEvent, CSSProperties, useCallback } from 'react';
-  MouseEvent as ReactMouseEvent,
-  CSSProperties,
-  useCallback,
-} from 'react';
 
 import {
   ReactFlow,
@@ -16,63 +12,42 @@ import {
   useNodesState,
   useEdgesState,
   OnSelectionChangeParams,
-} from '@react-flow/core';
+  Controls,
+  Background,
+  MiniMap,
+} from '@react-flow/bundle';
 
-import { Controls } from '@react-flow/controls';
+const onNodeDragStart = (_: ReactMouseEvent, node: Node, nodes: Node[]) => console.log('drag start', node, nodes);
-import { Background } from '@react-flow/background';
+const onNodeDrag = (_: ReactMouseEvent, node: Node, nodes: Node[]) => console.log('drag', node, nodes);
-import { MiniMap } from '@react-flow/minimap';
+const onNodeDragStop = (_: ReactMouseEvent, node: Node, nodes: Node[]) => console.log('drag stop', node, nodes);
-
+const onNodeDoubleClick = (_: ReactMouseEvent, node: Node) => console.log('node double click', node);
-const onNodeDragStart = (_: ReactMouseEvent, node: Node, nodes: Node[]) =>
+const onPaneClick = (event: ReactMouseEvent) => console.log('pane click', event);
-  console.log('drag start', node, nodes);
+const onPaneScroll = (event?: ReactMouseEvent) => console.log('pane scroll', event);
-const onNodeDrag = (_: ReactMouseEvent, node: Node, nodes: Node[]) =>
+const onPaneContextMenu = (event: ReactMouseEvent) => console.log('pane context menu', event);
-  console.log('drag', node, nodes);
+const onSelectionDrag = (_: ReactMouseEvent, nodes: Node[]) => console.log('selection drag', nodes);
-const onNodeDragStop = (_: ReactMouseEvent, node: Node, nodes: Node[]) =>
+const onSelectionDragStart = (_: ReactMouseEvent, nodes: Node[]) => console.log('selection drag start', nodes);
-  console.log('drag stop', node, nodes);
+const onSelectionDragStop = (_: ReactMouseEvent, nodes: Node[]) => console.log('selection drag stop', nodes);
-const onNodeDoubleClick = (_: ReactMouseEvent, node: Node) =>
-  console.log('node double click', node);
-const onPaneClick = (event: ReactMouseEvent) =>
-  console.log('pane click', event);
-const onPaneScroll = (event?: ReactMouseEvent) =>
-  console.log('pane scroll', event);
-const onPaneContextMenu = (event: ReactMouseEvent) =>
-  console.log('pane context menu', event);
-const onSelectionDrag = (_: ReactMouseEvent, nodes: Node[]) =>
-  console.log('selection drag', nodes);
-const onSelectionDragStart = (_: ReactMouseEvent, nodes: Node[]) =>
-  console.log('selection drag start', nodes);
-const onSelectionDragStop = (_: ReactMouseEvent, nodes: Node[]) =>
-  console.log('selection drag stop', nodes);
 const onSelectionContextMenu = (event: ReactMouseEvent, nodes: Node[]) => {
   event.preventDefault();
   console.log('selection context menu', nodes);
 };
-const onNodeClick = (_: ReactMouseEvent, node: Node) =>
+const onNodeClick = (_: ReactMouseEvent, node: Node) => console.log('node click:', node);
-  console.log('node click:', node);
 
-const onSelectionChange = ({ nodes, edges }: OnSelectionChangeParams) =>
+const onSelectionChange = ({ nodes, edges }: OnSelectionChangeParams) => console.log('selection change', nodes, edges);
-  console.log('selection change', nodes, edges);
 const onInit = (reactFlowInstance: ReactFlowInstance) => {
   console.log('pane ready:', reactFlowInstance);
 };
 
-const onMoveStart = (_: MouseEvent | TouchEvent, viewport: Viewport) =>
+const onMoveStart = (_: MouseEvent | TouchEvent, viewport: Viewport) => console.log('zoom/move start', viewport);
-  console.log('zoom/move start', viewport);
+const onMoveEnd = (_: MouseEvent | TouchEvent, viewport: Viewport) => console.log('zoom/move end', viewport);
-const onMoveEnd = (_: MouseEvent | TouchEvent, viewport: Viewport) =>
+const onEdgeContextMenu = (_: ReactMouseEvent, edge: Edge) => console.log('edge context menu', edge);
-  console.log('zoom/move end', viewport);
+const onEdgeMouseEnter = (_: ReactMouseEvent, edge: Edge) => console.log('edge mouse enter', edge);
-const onEdgeContextMenu = (_: ReactMouseEvent, edge: Edge) =>
+const onEdgeMouseMove = (_: ReactMouseEvent, edge: Edge) => console.log('edge mouse move', edge);
-  console.log('edge context menu', edge);
+const onEdgeMouseLeave = (_: ReactMouseEvent, edge: Edge) => console.log('edge mouse leave', edge);
-const onEdgeMouseEnter = (_: ReactMouseEvent, edge: Edge) =>
+const onEdgeDoubleClick = (_: ReactMouseEvent, edge: Edge) => console.log('edge double click', edge);
-  console.log('edge mouse enter', edge);
-const onEdgeMouseMove = (_: ReactMouseEvent, edge: Edge) =>
-  console.log('edge mouse move', edge);
-const onEdgeMouseLeave = (_: ReactMouseEvent, edge: Edge) =>
-  console.log('edge mouse leave', edge);
-const onEdgeDoubleClick = (_: ReactMouseEvent, edge: Edge) =>
-  console.log('edge double click', edge);
 const onNodesDelete = (nodes: Node[]) => console.log('nodes delete', nodes);
 const onEdgesDelete = (edges: Edge[]) => console.log('edges delete', edges);
-const onPaneMouseMove = (e: ReactMouseEvent) =>
+const onPaneMouseMove = (e: ReactMouseEvent) => console.log('pane move', e.clientX);
-  console.log('pane move', e.clientX);
 
 const initialNodes: Node[] = [
   {
@@ -122,11 +97,7 @@ const initialNodes: Node[] = [
       label: (
         <>
           You can find the docs on{' '}
-          <a
+          <a href="https://github.com/wbkd/react-flow" target="_blank" rel="noopener noreferrer">
-            href="https://github.com/wbkd/react-flow"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
             Github
           </a>
         </>
@@ -215,10 +186,7 @@ const nodeColor = (n: Node): string => {
 const OverviewFlow = () => {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const onConnect = useCallback(
+  const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
-    (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)),
-    [setEdges]
-  );
 
   return (
     <ReactFlow
@@ -259,11 +227,7 @@ const OverviewFlow = () => {
       onEdgesDelete={onEdgesDelete}
       onPaneMouseMove={onPaneMouseMove}
     >
-      <MiniMap
+      <MiniMap nodeStrokeColor={nodeStrokeColor} nodeColor={nodeColor} nodeBorderRadius={2} />
-        nodeStrokeColor={nodeStrokeColor}
-        nodeColor={nodeColor}
-        nodeBorderRadius={2}
-      />
       <Controls />
       <Background color="#aaa" gap={25} />
     </ReactFlow>

examples/nextjs/pages/Provider/Sidebar.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useStore, useStoreApi } from '@react-flow/core';
+import { useStore, useStoreApi } from '@react-flow/bundle';
 
 import styles from './provider.module.css';
 
@@ -16,19 +16,16 @@ const Sidebar = () => {
   return (
     <aside className={styles.aside}>
       <div className={styles.description}>
-        This is an example of how you can access the internal state outside of
+        This is an example of how you can access the internal state outside of the ReactFlow component.
-        the ReactFlow component.
       </div>
       <div className={styles.title}>Zoom & pan transform</div>
       <div className={styles.transform}>
-        [{transform[0].toFixed(2)}, {transform[1].toFixed(2)},{' '}
+        [{transform[0].toFixed(2)}, {transform[1].toFixed(2)}, {transform[2].toFixed(2)}]
-        {transform[2].toFixed(2)}]
       </div>
       <div className={styles.title}>Nodes</div>
       {Array.from(nodeInternals).map(([, node]) => (
         <div key={node.id}>
-          Node {node.id} - x: {node.position.x.toFixed(2)}, y:{' '}
+          Node {node.id} - x: {node.position.x.toFixed(2)}, y: {node.position.y.toFixed(2)}
-          {node.position.y.toFixed(2)}
         </div>
       ))}
 

examples/nextjs/pages/Provider/index.tsx

@@ -11,15 +11,14 @@ import {
   useNodesState,
   useEdgesState,
   ReactFlowInstance,
-} from '@react-flow/renderer';
+} from '@react-flow/bundle';
 
 import Sidebar from './Sidebar';
 
 import styles from './provider.module.css';
 
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
-const onInit = (reactFlowInstance: ReactFlowInstance) =>
+const onInit = (reactFlowInstance: ReactFlowInstance) => console.log('pane ready:', reactFlowInstance);
-  console.log('pane ready:', reactFlowInstance);
 
 const initialNodes: Node[] = [
   {
@@ -41,10 +40,7 @@ const initialEdges: Edge[] = [
 const ProviderFlow = () => {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const onConnect = useCallback(
+  const onConnect = useCallback((params: Edge | Connection) => setEdges((els) => addEdge(params, els)), [setEdges]);
-    (params: Edge | Connection) => setEdges((els) => addEdge(params, els)),
-    [setEdges]
-  );
 
   return (
     <div className={styles.providerflow}>

examples/nextjs/pages/SaveRestore/Controls.tsx

@@ -1,10 +1,5 @@
 import React, { memo, useCallback, Dispatch, FC } from 'react';
-import {
+import { useReactFlow, Edge, Node, ReactFlowJsonObject } from '@react-flow/bundle';
-  useReactFlow,
-  Edge,
-  Node,
-  ReactFlowJsonObject,
-} from '@react-flow/core';
 import localforage from 'localforage';
 
 import styles from './save.module.css';
@@ -33,9 +28,7 @@ const Controls: FC<ControlsProps> = ({ setNodes, setEdges }) => {
 
   const onRestore = useCallback(() => {
     const restoreFlow = async () => {
-      const flow: ReactFlowJsonObject | null = await localforage.getItem(
+      const flow: ReactFlowJsonObject | null = await localforage.getItem(flowKey);
-        flowKey
-      );
 
       if (flow) {
         const { x, y, zoom } = flow.viewport;

examples/nextjs/pages/SaveRestore/index.tsx

@@ -8,7 +8,7 @@ import {
   Edge,
   useNodesState,
   useEdgesState,
-} from '@react-flow/core';
+} from '@react-flow/bundle';
 import Controls from './Controls';
 
 const initialNodes: Node[] = [
@@ -21,10 +21,7 @@ const initialEdges: Edge[] = [{ id: 'e1-2', source: '1', target: '2' }];
 const SaveRestore = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const onConnect = useCallback(
+  const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
-    (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)),
-    [setEdges]
-  );
 
   return (
     <ReactFlowProvider>

examples/nextjs/pages/Stress/index.tsx

@@ -10,10 +10,10 @@ import {
   addEdge,
   applyEdgeChanges,
   EdgeChange,
-} from '@react-flow/core';
+  Controls,
-import { Controls } from '@react-flow/controls';
+  Background,
-import { Background } from '@react-flow/background';
+  MiniMap,
-import { MiniMap } from '@react-flow/minimap';
+} from '@react-flow/bundle';
 
 import { getNodesAndEdges } from './utils';
 

examples/nextjs/pages/Stress/utils.ts

@@ -1,14 +1,11 @@
-import { Node, Edge } from '@react-flow/core';
+import { Node, Edge } from '@react-flow/bundle';
 
 type ElementsCollection = {
   nodes: Node[];
   edges: Edge[];
 };
 
-export function getNodesAndEdges(
+export function getNodesAndEdges(xElements = 10, yElements = 10): ElementsCollection {
-  xElements: number = 10,
-  yElements: number = 10
-): ElementsCollection {
   const initialNodes = [];
   const initialEdges: Edge[] = [];
   let nodeId = 1;

examples/nextjs/pages/Subflow/DebugNode.tsx

@@ -1,6 +1,6 @@
 import React, { memo, FC, CSSProperties } from 'react';
 
-import { Handle, NodeProps, Position } from '@react-flow/core';
+import { Handle, NodeProps, Position } from '@react-flow/bundle';
 
 const infoStyle: CSSProperties = { fontSize: 11 };
 const idStyle: CSSProperties = {
@@ -14,12 +14,12 @@ const idStyle: CSSProperties = {
 const DebugNode: FC<NodeProps> = ({ zIndex, xPos, yPos, id }) => {
   return (
     <>
-      <Handle type='target' position={Position.Top} />
+      <Handle type="target" position={Position.Top} />
       <div style={idStyle}>{id}</div>
       <div style={infoStyle}>
         x:{Math.round(xPos || 0)} y:{Math.round(yPos || 0)} z:{zIndex}
       </div>
-      <Handle type='source' position={Position.Bottom} />
+      <Handle type="source" position={Position.Bottom} />
     </>
   );
 };

examples/nextjs/pages/Subflow/index.tsx

@@ -9,17 +9,15 @@ import {
   MarkerType,
   useNodesState,
   useEdgesState,
-} from '@react-flow/core';
+  Controls,
-import { Controls } from '@react-flow/controls';
+  MiniMap,
-import { Background } from '@react-flow/background';
+  Background,
-import { MiniMap } from '@react-flow/minimap';
+} from '@react-flow/bundle';
 
 import DebugNode from './DebugNode';
 
-const onNodeDrag = (_: MouseEvent, node: Node, nodes: Node[]) =>
+const onNodeDrag = (_: MouseEvent, node: Node, nodes: Node[]) => console.log('drag', node, nodes);
-  console.log('drag', node, nodes);
+const onNodeDragStop = (_: MouseEvent, node: Node, nodes: Node[]) => console.log('drag stop', node, nodes);
-const onNodeDragStop = (_: MouseEvent, node: Node, nodes: Node[]) =>
-  console.log('drag stop', node, nodes);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
 const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
 
@@ -150,14 +148,8 @@ const Subflow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
-  const onConnect = useCallback(
+  const onConnect = useCallback((connection: Connection) => setEdges((eds) => addEdge(connection, eds)), [setEdges]);
-    (connection: Connection) => setEdges((eds) => addEdge(connection, eds)),
+  const onInit = useCallback((reactFlowInstance: ReactFlowInstance) => setRfInstance(reactFlowInstance), []);
-    [setEdges]
-  );
-  const onInit = useCallback(
-    (reactFlowInstance: ReactFlowInstance) => setRfInstance(reactFlowInstance),
-    []
-  );
 
   const updatePos = () => {
     setNodes((nds) => {

examples/nextjs/pages/Switch/index.tsx

@@ -1,16 +1,7 @@
 import React, { MouseEvent, useCallback } from 'react';
-import {
+import { ReactFlow, addEdge, Node, Connection, Edge, useNodesState, useEdgesState } from '@react-flow/bundle';
-  ReactFlow,
-  addEdge,
-  Node,
-  Connection,
-  Edge,
-  useNodesState,
-  useEdgesState,
-} from '@react-flow/core';
 
-const onNodeDragStop = (_: MouseEvent, node: Node) =>
+const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
-  console.log('drag stop', node);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
 
 const nodesA: Node[] = [
@@ -96,10 +87,7 @@ const BasicFlow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(nodesA);
   const [edges, setEdges, onEdgesChange] = useEdgesState(edgesA);
 
-  const onConnect = useCallback(
+  const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
-    (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)),
-    [setEdges]
-  );
 
   return (
     <ReactFlow

examples/nextjs/pages/TouchDevice/index.tsx

@@ -1,14 +1,5 @@
 import React, { useCallback } from 'react';
-import {
+import { ReactFlow, Node, Edge, useNodesState, useEdgesState, Position, Connection, addEdge } from '@react-flow/bundle';
-  ReactFlow,
-  Node,
-  Edge,
-  useNodesState,
-  useEdgesState,
-  Position,
-  Connection,
-  addEdge,
-} from '@react-flow/core';
 
 import styles from './touch-device.module.css';
 
@@ -34,20 +25,11 @@ const initialEdges: Edge[] = [];
 const TouchDeviceFlow = () => {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const onConnect = useCallback(
+  const onConnect = useCallback((connection: Connection) => setEdges((eds) => addEdge(connection, eds)), [setEdges]);
-    (connection: Connection) => setEdges((eds) => addEdge(connection, eds)),
-    [setEdges]
-  );
   const onConnectStart = useCallback(() => console.log('connect start'), []);
   const onConnectEnd = useCallback(() => console.log('connect end'), []);
-  const onClickConnectStart = useCallback(
+  const onClickConnectStart = useCallback(() => console.log('click connect start'), []);
-    () => console.log('click connect start'),
+  const onClickConnectEnd = useCallback(() => console.log('click connect end'), []);
-    []
-  );
-  const onClickConnectEnd = useCallback(
-    () => console.log('click connect end'),
-    []
-  );
 
   return (
     <ReactFlow

examples/nextjs/pages/Undirectional/CustomNode.tsx

@@ -1,6 +1,6 @@
 import React, { memo, FC, CSSProperties } from 'react';
 
-import { Handle, Position, NodeProps } from '@react-flow/core';
+import { Handle, Position, NodeProps } from '@react-flow/bundle';
 
 const nodeStyles: CSSProperties = {
   padding: '10px 15px',
@@ -11,10 +11,10 @@ const CustomNode: FC<NodeProps> = ({ id }) => {
   return (
     <div style={nodeStyles}>
       <div>node {id}</div>
-      <Handle type='source' id='left' position={Position.Left} />
+      <Handle type="source" id="left" position={Position.Left} />
-      <Handle type='source' id='right' position={Position.Right} />
+      <Handle type="source" id="right" position={Position.Right} />
-      <Handle type='source' id='top' position={Position.Top} />
+      <Handle type="source" id="top" position={Position.Top} />
-      <Handle type='source' id='bottom' position={Position.Bottom} />
+      <Handle type="source" id="bottom" position={Position.Bottom} />
     </div>
   );
 };

examples/nextjs/pages/Undirectional/index.tsx

@@ -14,7 +14,7 @@ import {
   updateEdge,
   useNodesState,
   useEdgesState,
-} from '@react-flow/core';
+} from '@react-flow/bundle';
 import CustomNode from './CustomNode';
 
 const initialNodes: Node[] = [
@@ -184,8 +184,7 @@ const UpdateNodeInternalsFlow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
-  const onConnect = (params: Edge | Connection) =>
+  const onConnect = (params: Edge | Connection) => setEdges((els) => addEdge(params, els));
-    setEdges((els) => addEdge(params, els));
   const { project } = useReactFlow();
   const onEdgeUpdate = (oldEdge: Edge, newConnection: Connection) =>
     setEdges((els) => updateEdge(oldEdge, newConnection, els));

examples/nextjs/pages/UpdatableEdge/index.tsx

@@ -12,7 +12,7 @@ import {
   NodeChange,
   EdgeChange,
   HandleType,
-} from '@react-flow/core';
+} from '@react-flow/bundle';
 
 import { Controls } from '@react-flow/controls';
 
@@ -59,17 +59,11 @@ const initialNodes: Node[] = [
   },
 ];
 
-const initialEdges = [
+const initialEdges = [{ id: 'e1-2', source: '1', target: '2', label: 'This is a draggable edge' }];
-  { id: 'e1-2', source: '1', target: '2', label: 'This is a draggable edge' },
-];
 
-const onInit = (reactFlowInstance: ReactFlowInstance) =>
+const onInit = (reactFlowInstance: ReactFlowInstance) => reactFlowInstance.fitView();
-  reactFlowInstance.fitView();
+const onEdgeUpdateStart = (_: React.MouseEvent, edge: Edge, handleType: HandleType) =>
-const onEdgeUpdateStart = (
+  console.log(`start update ${handleType} handle`, edge);
-  _: React.MouseEvent,
-  edge: Edge,
-  handleType: HandleType
-) => console.log(`start update ${handleType} handle`, edge);
 const onEdgeUpdateEnd = (_: MouseEvent, edge: Edge, handleType: HandleType) =>
   console.log(`end update ${handleType} handle`, edge);
 
@@ -78,8 +72,7 @@ const UpdatableEdge = () => {
   const [edges, setEdges] = useState<Edge[]>(initialEdges);
   const onEdgeUpdate = (oldEdge: Edge, newConnection: Connection) =>
     setEdges((els) => updateEdge(oldEdge, newConnection, els));
-  const onConnect = (connection: Connection) =>
+  const onConnect = (connection: Connection) => setEdges((els) => addEdge(connection, els));
-    setEdges((els) => addEdge(connection, els));
 
   const onNodesChange = useCallback((changes: NodeChange[]) => {
     console.log(changes);

examples/nextjs/pages/UpdateNode/index.tsx

@@ -1,11 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import {
+import { ReactFlow, Node, Edge, useNodesState, useEdgesState } from '@react-flow/bundle';
-  ReactFlow,
-  Node,
-  Edge,
-  useNodesState,
-  useEdgesState,
-} from '@react-flow/core';
 
 import styles from './updatenode.module.css';
 
@@ -77,21 +71,14 @@ const UpdateNode = () => {
     >
       <div className={styles.controls}>
         <label>label:</label>
-        <input
+        <input value={nodeName} onChange={(evt) => setNodeName(evt.target.value)} />
-          value={nodeName}
-          onChange={(evt) => setNodeName(evt.target.value)}
-        />
 
         <label className={styles.bgLabel}>background:</label>
         <input value={nodeBg} onChange={(evt) => setNodeBg(evt.target.value)} />
 
         <div className="updatenode__checkboxwrapper">
           <label>hidden:</label>
-          <input
+          <input type="checkbox" checked={nodeHidden} onChange={(evt) => setNodeHidden(evt.target.checked)} />
-            type="checkbox"
-            checked={nodeHidden}
-            onChange={(evt) => setNodeHidden(evt.target.checked)}
-          />
         </div>
       </div>
     </ReactFlow>

examples/nextjs/pages/UseKeyPress/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useKeyPress } from '@react-flow/core';
+import { useKeyPress } from '@react-flow/bundle';
 
 const UseKeyPressComponent = () => {
   const metaPressed = useKeyPress(['Meta']);

examples/nextjs/pages/UseReactFlow/index.tsx

@@ -11,7 +11,7 @@ import {
   Edge,
   useNodesState,
   useEdgesState,
-} from '@react-flow/renderer';
+} from '@react-flow/bundle';
 
 const initialNodes: Node[] = [
   {
@@ -53,8 +53,7 @@ const getId = () => `${id++}`;
 const UseZoomPanHelperFlow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const onConnect = (params: Connection | Edge) =>
+  const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
-    setEdges((eds) => addEdge(params, eds));
   const {
     project,
     setCenter,
@@ -117,10 +116,7 @@ const UseZoomPanHelperFlow = () => {
     addEdges({ id: 'e3-4', source: '3', target: '4' });
   }, [addEdges]);
 
-  const onResetNodes = useCallback(
+  const onResetNodes = useCallback(() => setNodesHook(initialNodes), [setNodesHook]);
-    () => setNodesHook(initialNodes),
-    [setNodesHook]
-  );
 
   return (
     <ReactFlow
@@ -138,9 +134,7 @@ const UseZoomPanHelperFlow = () => {
       <div style={{ position: 'absolute', left: 0, top: 0, zIndex: 100 }}>
         <button onClick={() => zoomIn({ duration: 1200 })}>zoomIn</button>
         <button onClick={() => zoomOut({ duration: 0 })}>zoomOut</button>
-        <button onClick={() => fitView({ duration: 1200, padding: 0.3 })}>
+        <button onClick={() => fitView({ duration: 1200, padding: 0.3 })}>fitView</button>
-          fitView
-        </button>
         <button onClick={onAddNode}>add node</button>
         <button onClick={onResetNodes}>reset nodes</button>
         <button onClick={logNodes}>useNodes</button>

examples/nextjs/pages/UseUpdateNodeInternals/CustomNode.tsx

@@ -1,5 +1,5 @@
 import React, { memo, FC, useMemo, CSSProperties } from 'react';
-import { Handle, Position, NodeProps } from '@react-flow/core';
+import { Handle, Position, NodeProps } from '@react-flow/bundle';
 
 const nodeStyles: CSSProperties = { padding: 10, border: '1px solid #ddd' };
 
@@ -11,7 +11,7 @@ const CustomNode: FC<NodeProps> = ({ data }) => {
         return (
           <Handle
             key={handleId}
-            type='source'
+            type="source"
             position={Position.Right}
             id={handleId}
             style={{ top: 10 * i + data.handlePosition * 10 }}
@@ -23,7 +23,7 @@ const CustomNode: FC<NodeProps> = ({ data }) => {
 
   return (
     <div style={nodeStyles}>
-      <Handle type='target' position={Position.Left} />
+      <Handle type="target" position={Position.Left} />
       <div>output handle count: {data.handleCount}</div>
       {handles}
     </div>

examples/nextjs/pages/UseUpdateNodeInternals/index.tsx

@@ -12,7 +12,7 @@ import {
   Position,
   useNodesState,
   useEdgesState,
-} from '@react-flow/core';
+} from '@react-flow/bundle';
 
 import CustomNode from './CustomNode';
 
@@ -48,10 +48,7 @@ const getId = (): string => `${id++}`;
 const UpdateNodeInternalsFlow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-  const onConnect = useCallback(
+  const onConnect = useCallback((params: Edge | Connection) => setEdges((els) => addEdge(params, els)), [setEdges]);
-    (params: Edge | Connection) => setEdges((els) => addEdge(params, els)),
-    [setEdges]
-  );
 
   const updateNodeInternals = useUpdateNodeInternals();
   const { project } = useReactFlow();
@@ -98,10 +95,7 @@ const UpdateNodeInternalsFlow = () => {
     );
   }, [setNodes]);
 
-  const updateNode = useCallback(
+  const updateNode = useCallback(() => updateNodeInternals('1'), [updateNodeInternals]);
-    () => updateNodeInternals('1'),
-    [updateNodeInternals]
-  );
 
   return (
     <ReactFlow

examples/nextjs/pages/Validation/index.tsx

@@ -12,7 +12,7 @@ import {
   useNodesState,
   useEdgesState,
   OnConnectStartParams,
-} from '@react-flow/core';
+} from '@react-flow/bundle';
 
 import styles from './validation.module.css';
 
@@ -28,27 +28,15 @@ const isValidConnection = (connection: Connection) => connection.target === 'B';
 const CustomInput: FC<NodeProps> = () => (
   <>
     <div>Only connectable with B</div>
-    <Handle
+    <Handle type="source" position={Position.Right} isValidConnection={isValidConnection} />
-      type="source"
-      position={Position.Right}
-      isValidConnection={isValidConnection}
-    />
   </>
 );
 
 const CustomNode: FC<NodeProps> = ({ id }) => (
   <>
-    <Handle
+    <Handle type="target" position={Position.Left} isValidConnection={isValidConnection} />
-      type="target"
-      position={Position.Left}
-      isValidConnection={isValidConnection}
-    />
     <div>{id}</div>
-    <Handle
+    <Handle type="source" position={Position.Right} isValidConnection={isValidConnection} />
-      type="source"
-      position={Position.Right}
-      isValidConnection={isValidConnection}
-    />
   </>
 );
 

examples/nextjs/pages/index.tsx

@@ -10,7 +10,7 @@ import {
   Node,
   Edge,
   useReactFlow,
-} from '@react-flow/renderer';
+} from '@react-flow/bundle';
 
 const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node);
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);