chore(packages): adjust names

examples/nextjs/CHANGELOG.md

@@ -5,4 +5,4 @@
 ### Patch Changes
 
 - Updated dependencies []:
-  - @react-flow/bundle@11.0.0-next.0
+  - reactflow@11.0.0-next.0

examples/nextjs/package.json

@@ -5,19 +5,19 @@
   "license": "MIT",
   "scripts": {
     "dev": "next dev",
-    "copystyles": "cp ../../node_modules/@react-flow/bundle/dist/style.css ./styles/rf-style.css && cp ../../node_modules/@react-flow/bundle/dist/base.css ./styles/rf-base.css",
+    "copystyles": "cp ../../node_modules/reactflow/dist/style.css ./styles/rf-style.css && cp ../../node_modules/reactflow/dist/base.css ./styles/rf-base.css",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
     "@preconstruct/next": "^4.0.0",
-    "@react-flow/bundle": "workspace:*",
     "dagre": "^0.8.5",
     "localforage": "^1.10.0",
     "next": "12.2.2",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "reactflow": "workspace:*"
   },
   "devDependencies": {
     "@types/dagre": "^0.7.47",

examples/nextjs/pages/Backgrounds/index.tsx

@@ -8,7 +8,7 @@ import {
   Background,
   BackgroundProps,
   BackgroundVariant,
-} from '@react-flow/bundle';
+} from 'reactflow';
 
 import styles from './style.module.css';
 

examples/nextjs/pages/CustomConnectionLine/ConnectionLine.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { ConnectionLineComponentProps } from '@react-flow/bundle';
+import { ConnectionLineComponentProps } from 'reactflow';
 
 const ConnectionLine: FC<ConnectionLineComponentProps> = ({ fromX, fromY, toX, toY }) => {
   return (

examples/nextjs/pages/CustomConnectionLine/index.tsx

@@ -9,7 +9,7 @@ import {
   useEdgesState,
   Background,
   BackgroundVariant,
-} from '@react-flow/bundle';
+} from 'reactflow';
 
 import ConnectionLine from './ConnectionLine';
 

examples/nextjs/pages/CustomNode/ColorSelectorNode.tsx

@@ -1,5 +1,5 @@
 import React, { memo, FC, CSSProperties, useCallback } from 'react';
-import { Handle, Position, NodeProps, Connection, Edge, useOnViewportChange, Viewport } from '@react-flow/bundle';
+import { Handle, Position, NodeProps, Connection, Edge, useOnViewportChange, Viewport } from 'reactflow';
 
 const targetHandleStyle: CSSProperties = { background: '#555' };
 const sourceHandleStyleA: CSSProperties = { ...targetHandleStyle, top: 10 };

examples/nextjs/pages/CustomNode/index.tsx

@@ -11,7 +11,7 @@ import {
   Connection,
   useNodesState,
   useEdgesState,
-} from '@react-flow/bundle';
+} from 'reactflow';
 
 import ColorSelectorNode from './ColorSelectorNode';
 

examples/nextjs/pages/DefaultNodes/index.tsx

@@ -1,13 +1,5 @@
 import React from 'react';
-import {
-  ReactFlow,
-  useReactFlow,
-  Node,
-  Edge,
-  ReactFlowProvider,
-  Background,
-  BackgroundVariant,
-} from '@react-flow/bundle';
+import { ReactFlow, useReactFlow, Node, Edge, ReactFlowProvider, Background, BackgroundVariant } from 'reactflow';
 
 const defaultNodes: Node[] = [
   {

examples/nextjs/pages/DragHandle/DragHandleNode.tsx

@@ -1,6 +1,6 @@
 import React, { memo, FC } from 'react';
 
-import { Handle, Position, NodeProps, Connection, Edge } from '@react-flow/bundle';
+import { Handle, Position, NodeProps, Connection, Edge } from 'reactflow';
 
 const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params);
 

examples/nextjs/pages/DragNDrop/index.tsx

@@ -11,7 +11,7 @@ import {
   useEdgesState,
   Controls,
   NodeOrigin,
-} from '@react-flow/bundle';
+} from 'reactflow';
 
 import Sidebar from './Sidebar';
 

examples/nextjs/pages/EdgeTypes/index.tsx

@@ -14,7 +14,7 @@ import {
   Edge,
   useNodesState,
   useEdgesState,
-} from '@react-flow/bundle';
+} from 'reactflow';
 
 import { getElements } from './utils';
 

examples/nextjs/pages/EdgeTypes/utils.ts

@@ -1,4 +1,4 @@
-import { Edge, Node, Position } from '@react-flow/bundle';
+import { Edge, Node, Position } from 'reactflow';
 
 const nodeWidth = 80;
 const nodeGapWidth = nodeWidth * 2;

examples/nextjs/pages/Edges/CustomEdge.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { EdgeProps, getBezierPath } from '@react-flow/bundle';
+import { EdgeProps, getBezierPath } from 'reactflow';
 
 const CustomEdge: FC<EdgeProps> = ({
   id,

examples/nextjs/pages/Edges/CustomEdge2.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { EdgeProps, getBezierPath, EdgeText, getBezierEdgeCenter } from '@react-flow/bundle';
+import { EdgeProps, getBezierPath, EdgeText, getBezierEdgeCenter } from 'reactflow';
 
 const CustomEdge: FC<EdgeProps> = ({
   id,

examples/nextjs/pages/Edges/index.tsx

@@ -12,7 +12,7 @@ import {
   Node,
   useEdgesState,
   useNodesState,
-} from '@react-flow/bundle';
+} from 'reactflow';
 
 import CustomEdge from './CustomEdge';
 import CustomEdge2 from './CustomEdge2';

examples/nextjs/pages/Empty/index.tsx

@@ -12,7 +12,7 @@ import {
   useNodesState,
   useEdgesState,
   ReactFlowInstance,
-} from '@react-flow/bundle';
+} from 'reactflow';
 
 const onInit = (reactFlowInstance: ReactFlowInstance) => console.log('flow loaded:', reactFlowInstance);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);

examples/nextjs/pages/FloatingEdges/FloatingConnectionLine.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { getBezierPath, ConnectionLineComponentProps, Node } from '@react-flow/bundle';
+import { getBezierPath, ConnectionLineComponentProps, Node } from 'reactflow';
 
 import { getEdgeParams } from './utils';
 

examples/nextjs/pages/FloatingEdges/FloatingEdge.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useMemo, CSSProperties } from 'react';
-import { EdgeProps, useStore, getBezierPath, ReactFlowState } from '@react-flow/bundle';
+import { EdgeProps, useStore, getBezierPath, ReactFlowState } from 'reactflow';
 
 import { getEdgeParams } from './utils';
 

examples/nextjs/pages/FloatingEdges/index.tsx

@@ -9,7 +9,7 @@ import {
   Connection,
   useNodesState,
   useEdgesState,
-} from '@react-flow/bundle';
+} from 'reactflow';
 
 import styles from './style.module.css';
 

examples/nextjs/pages/FloatingEdges/utils.ts

@@ -1,4 +1,4 @@
-import { Position, XYPosition, Node, Edge } from '@react-flow/bundle';
+import { Position, XYPosition, Node, Edge } from 'reactflow';
 
 // this helper function returns the intersection point
 // of the line between the center of the intersectionNode and the target node

examples/nextjs/pages/Hidden/index.tsx

@@ -1,16 +1,6 @@
 import React, { useState, useEffect, useCallback } from 'react';
 
-import {
-  ReactFlow,
-  addEdge,
-  Connection,
-  Edge,
-  Node,
-  useNodesState,
-  useEdgesState,
-  MiniMap,
-  Controls,
-} from '@react-flow/bundle';
+import { ReactFlow, addEdge, Connection, Edge, Node, useNodesState, useEdgesState, MiniMap, Controls } from 'reactflow';
 
 const initialNodes: Node[] = [
   {

examples/nextjs/pages/Interaction/index.tsx

@@ -11,7 +11,7 @@ import {
   useEdgesState,
   Controls,
   MiniMap,
-} from '@react-flow/bundle';
+} from 'reactflow';
 
 const initialNodes: Node[] = [
   {

examples/nextjs/pages/Layouting/index.tsx

@@ -11,7 +11,7 @@ import {
   useEdgesState,
   MarkerType,
   EdgeMarker,
-} from '@react-flow/bundle';
+} from 'reactflow';
 
 import dagre from 'dagre';
 

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

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

examples/nextjs/pages/MultiFlows/index.tsx

@@ -11,7 +11,7 @@ import {
   useNodesState,
   useEdgesState,
   MarkerType,
-} from '@react-flow/bundle';
+} from 'reactflow';
 
 import styles from './multiflows.module.css';
 

examples/nextjs/pages/NestedNodes/index.tsx

@@ -11,7 +11,7 @@ import {
   Edge,
   ReactFlowInstance,
   Connection,
-} from '@react-flow/bundle';
+} from 'reactflow';
 
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);

examples/nextjs/pages/NodeTypeChange/index.tsx

@@ -1,6 +1,6 @@
 import React, { CSSProperties, useCallback } from 'react';
 
-import { ReactFlow, addEdge, Node, Position, Connection, Edge, useNodesState, useEdgesState } from '@react-flow/bundle';
+import { ReactFlow, addEdge, Node, Position, Connection, Edge, useNodesState, useEdgesState } from 'reactflow';
 
 const initialNodes: Node[] = [
   {

examples/nextjs/pages/NodeTypesObjectChange/index.tsx

@@ -11,7 +11,7 @@ import {
   NodeTypes,
   useNodesState,
   useEdgesState,
-} from '@react-flow/bundle';
+} from 'reactflow';
 
 const initialNodes: Node[] = [
   {

examples/nextjs/pages/Overview/index.tsx

@@ -15,7 +15,7 @@ import {
   Controls,
   Background,
   MiniMap,
-} from '@react-flow/bundle';
+} from 'reactflow';
 
 const onNodeDragStart = (_: ReactMouseEvent, node: Node, nodes: Node[]) => console.log('drag start', node, nodes);
 const onNodeDrag = (_: ReactMouseEvent, node: Node, nodes: Node[]) => console.log('drag', node, nodes);

examples/nextjs/pages/Provider/Sidebar.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useStore, useStoreApi } from '@react-flow/bundle';
+import { useStore, useStoreApi } from 'reactflow';
 
 import styles from './provider.module.css';
 

examples/nextjs/pages/Provider/index.tsx

@@ -11,7 +11,7 @@ import {
   useNodesState,
   useEdgesState,
   ReactFlowInstance,
-} from '@react-flow/bundle';
+} from 'reactflow';
 
 import Sidebar from './Sidebar';
 

examples/nextjs/pages/SaveRestore/Controls.tsx

@@ -1,5 +1,5 @@
 import React, { memo, useCallback, Dispatch, FC } from 'react';
-import { useReactFlow, Edge, Node, ReactFlowJsonObject } from '@react-flow/bundle';
+import { useReactFlow, Edge, Node, ReactFlowJsonObject } from 'reactflow';
 import localforage from 'localforage';
 
 import styles from './save.module.css';

examples/nextjs/pages/SaveRestore/index.tsx

@@ -1,14 +1,5 @@
 import React, { useCallback } from 'react';
-import {
-  ReactFlow,
-  ReactFlowProvider,
-  Node,
-  addEdge,
-  Connection,
-  Edge,
-  useNodesState,
-  useEdgesState,
-} from '@react-flow/bundle';
+import { ReactFlow, ReactFlowProvider, Node, addEdge, Connection, Edge, useNodesState, useEdgesState } from 'reactflow';
 import Controls from './Controls';
 
 const initialNodes: Node[] = [

examples/nextjs/pages/Stress/index.tsx

@@ -13,7 +13,7 @@ import {
   Controls,
   Background,
   MiniMap,
-} from '@react-flow/bundle';
+} from 'reactflow';
 
 import { getNodesAndEdges } from './utils';
 

examples/nextjs/pages/Stress/utils.ts

@@ -1,4 +1,4 @@
-import { Node, Edge } from '@react-flow/bundle';
+import { Node, Edge } from 'reactflow';
 
 type ElementsCollection = {
   nodes: Node[];

examples/nextjs/pages/Subflow/DebugNode.tsx

@@ -1,6 +1,6 @@
 import React, { memo, FC, CSSProperties } from 'react';
 
-import { Handle, NodeProps, Position } from '@react-flow/bundle';
+import { Handle, NodeProps, Position } from 'reactflow';
 
 const infoStyle: CSSProperties = { fontSize: 11 };
 const idStyle: CSSProperties = {

examples/nextjs/pages/Subflow/index.tsx

@@ -12,7 +12,7 @@ import {
   Controls,
   MiniMap,
   Background,
-} from '@react-flow/bundle';
+} from 'reactflow';
 
 import DebugNode from './DebugNode';
 

examples/nextjs/pages/Switch/index.tsx

@@ -1,5 +1,5 @@
 import React, { MouseEvent, useCallback } from 'react';
-import { ReactFlow, addEdge, Node, Connection, Edge, useNodesState, useEdgesState } from '@react-flow/bundle';
+import { ReactFlow, addEdge, Node, Connection, Edge, useNodesState, useEdgesState } from 'reactflow';
 
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);

examples/nextjs/pages/TouchDevice/index.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { ReactFlow, Node, Edge, useNodesState, useEdgesState, Position, Connection, addEdge } from '@react-flow/bundle';
+import { ReactFlow, Node, Edge, useNodesState, useEdgesState, Position, Connection, addEdge } from 'reactflow';
 
 import styles from './touch-device.module.css';
 

examples/nextjs/pages/Undirectional/CustomNode.tsx

@@ -1,6 +1,6 @@
 import React, { memo, FC, CSSProperties } from 'react';
 
-import { Handle, Position, NodeProps } from '@react-flow/bundle';
+import { Handle, Position, NodeProps } from 'reactflow';
 
 const nodeStyles: CSSProperties = {
   padding: '10px 15px',

examples/nextjs/pages/Undirectional/index.tsx

@@ -14,7 +14,7 @@ import {
   updateEdge,
   useNodesState,
   useEdgesState,
-} from '@react-flow/bundle';
+} from 'reactflow';
 import CustomNode from './CustomNode';
 
 const initialNodes: Node[] = [

examples/nextjs/pages/UpdatableEdge/index.tsx

@@ -12,7 +12,7 @@ import {
   NodeChange,
   EdgeChange,
   HandleType,
-} from '@react-flow/bundle';
+} from 'reactflow';
 
 import { Controls } from '@react-flow/controls';
 

examples/nextjs/pages/UpdateNode/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { ReactFlow, Node, Edge, useNodesState, useEdgesState } from '@react-flow/bundle';
+import { ReactFlow, Node, Edge, useNodesState, useEdgesState } from 'reactflow';
 
 import styles from './updatenode.module.css';
 

examples/nextjs/pages/UseKeyPress/index.tsx

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

examples/nextjs/pages/UseReactFlow/index.tsx

@@ -11,7 +11,7 @@ import {
   Edge,
   useNodesState,
   useEdgesState,
-} from '@react-flow/bundle';
+} from 'reactflow';
 
 const initialNodes: Node[] = [
   {

examples/nextjs/pages/UseUpdateNodeInternals/CustomNode.tsx

@@ -1,5 +1,5 @@
 import React, { useState, memo, FC, useMemo, CSSProperties } from 'react';
-import { Handle, Position, NodeProps, useUpdateNodeInternals } from '@react-flow/bundle';
+import { Handle, Position, NodeProps, useUpdateNodeInternals } from 'reactflow';
 
 const nodeStyles: CSSProperties = { padding: 10, border: '1px solid #ddd' };
 

examples/nextjs/pages/UseUpdateNodeInternals/index.tsx

@@ -11,7 +11,7 @@ import {
   Position,
   useNodesState,
   useEdgesState,
-} from '@react-flow/bundle';
+} from 'reactflow';
 
 import CustomNode from './CustomNode';
 

examples/nextjs/pages/Validation/index.tsx

@@ -12,7 +12,7 @@ import {
   useNodesState,
   useEdgesState,
   OnConnectStartParams,
-} from '@react-flow/bundle';
+} from 'reactflow';
 
 import styles from './validation.module.css';
 

examples/nextjs/pages/index.tsx

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