Skip to content

Commit

Permalink
chore(react): fix migration guide styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@moklick
moklick committed Dec 4, 2024
1 parent 07204f6 commit e9c7020
Showing 1 changed file with 38 additions and 39 deletions.
77 changes: 38 additions & 39 deletions sites/reactflow.dev/src/pages/learn/troubleshooting/migrate-to-v12.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,19 +27,18 @@ Before you start to migrate, you need to install the new package.
npm install @xyflow/react
```

{/* this is a workaround to hide headlines from the TOC */}
{<h3>1. A new npm package name</h3>}
### 1. A new npm package name

The package `reactflow` has been renamed to `@xyflow/react` and it's not a default import anymore. You also need to adjust the style import. Before v12, React Flow was divided into multiple packages. That's not the case anymore. If you just used the core, you now need to install the `@xyflow/react` package.

{<h4>Old API</h4>}
**Old API**

```js
// npm install reactflow
import ReactFlow from 'reactflow';
```

{<h4>New API</h4>}
**New API**

```js
// npm install @xyflow/react
Expand All @@ -52,31 +51,31 @@ import '@xyflow/react/dist/style.css';
import '@xyflow/react/dist/base.css';
```

{<h3>2. Node <code>measured</code> attribute for measured <code>width</code> and <code>height</code></h3>}
### 2. Node <code>measured</code> attribute for measured <code>width</code> and <code>height</code>

All measured node values are now stored in `node.measured`. Besides the new package name, this is the biggest change. After React Flow measures your nodes, it writes the dimesions to `node.measured.width` and `node.measured.height`. If you are using any layouting library like dagre or elk, you now need to take the dimesions from `node.measured` instead of `node`. If you are using `width` and `height`, those values will now be used as inline styles to specify the node dimensions.

{<h4>Old API</h4>}
**Old API**

```js
// getting the measured width and height
const nodeWidth = node.width;
const nodeHeight = node.height;
```

{<h4>New API</h4>}
**New API**

```js
// getting the measured width and height
const nodeWidth = node.measured?.width;
const nodeHeight = node.measured?.height;
```
{<h3>3. New dimension handling <code>node.width</code> / <code>node.height</code> vs <code>node.measured.width</code> / <code>node.measured.height</code></h3>}
### 3. New dimension handling <code>node.width</code> / <code>node.height</code> vs <code>node.measured.width</code> / <code>node.measured.height</code>
In order to support server side rendering we had to restructure the API a bit, so that users can pass node dimensions more easily. For this we changed the behaviour of the `node.width` and `node.height` attributes. In React Flow 11, those attributes were measured values and only used as a reference. In React Flow 12 those attributes are used as inline styles to specify the node dimensions. If you load nodes from a database, you probably want to remove the `width` and `height` attributes from your nodes, because the behaviour is slightly different now. Using `width` and `height` now means that the dimensions are not dynamic based on the content but fixed.
{<h4>Old API</h4>}
**Old API**
```js
// in React Flow 11 you might used node.style to set the dimensions
Expand All @@ -91,7 +90,7 @@ const nodes = [
];
```
{<h4>New API</h4>}
**New API**
```js
// in React Flow 12 you can used node.width and node.height to set the dimensions
Expand All @@ -109,11 +108,11 @@ const nodes = [
If you want to read more about how to configure React Flow for server side rendering, you can read about it in the [server side rendering guide](/learn/advanced-use/ssr-ssg-configuration).
{<h3>4. Updating nodes and edges</h3>}
### 4. Updating nodes and edges
We are not supporting node and edge updates with object mutations anymore. If you want to update a certain attribute, you need to create a new node / edge.
{<h4>Old API</h4>}
**Old API**
```js
setNodes((currentNodes) =>
Expand All @@ -124,7 +123,7 @@ setNodes((currentNodes) =>
);
```
{<h4>New API</h4>}
**New API**
```js
setNodes((currentNodes) =>
Expand All @@ -135,7 +134,7 @@ setNodes((currentNodes) =>
);
```
{<h3>5. Rename <code>onEdgeUpdate</code> (and related APIs) to <code>onReconnect</code></h3>}
### 5. Rename <code>onEdgeUpdate</code> (and related APIs) to <code>onReconnect</code>
We renamed the `onEdgeUpdate` function to `onReconnect` and all related APIs (mentioned below). The new name is more descriptive and makes it clear that the function is used to reconnect edges.
Expand All @@ -147,7 +146,7 @@ We renamed the `onEdgeUpdate` function to `onReconnect` and all related APIs (me
- `edge.updatable` renamed to `edge.reconnectable`
- `edgesUpdatable` renamed to `edgesReconnectable`
{<h4>Old API</h4>}
**Old API**
```js
<ReactFlow
Expand All @@ -157,7 +156,7 @@ We renamed the `onEdgeUpdate` function to `onReconnect` and all related APIs (me
/>
```
{<h4>New API</h4>}
**New API**
```js
<ReactFlow
Expand All @@ -167,11 +166,11 @@ We renamed the `onEdgeUpdate` function to `onReconnect` and all related APIs (me
/>
```
{<h3>6. Rename <code>parentNode</code> to <code>parentId</code></h3>}
### 6. Rename <code>parentNode</code> to <code>parentId</code>
If you are working with subflows, you need to rename `node.parentNode` to `node.parentId`. The `parentNode` attribute was a bit misleading, because it was not a reference to the parent node, but the `id` of the parent node.
{<h4>Old API</h4>}
**Old API**
```js
const nodes = [
Expand All @@ -186,7 +185,7 @@ const nodes = [
];
```
{<h4>New API</h4>}
**New API**
```js
const nodes = [
Expand All @@ -201,54 +200,54 @@ const nodes = [
];
```
{<h3>7. Custom node props</h3>}
### 7. Custom node props
We renamed the `xPos` and `yPos` props to `positionAbsoluteX` and `positionAbsoluteY`
{<h4>Old API</h4>}
**Old API**
```js
function CustomNode({ xPos, yPos }) {
...
}
```
{<h4>New API</h4>}
**New API**
```js
function CustomNode({ positionAbsoluteX, positionAbsoluteY }) {
...
}
```
{<h3>8. Handle component class names</h3>}
### 8. Handle component class names
We renamed some of the classes used to define the current state of a handle.
- `react-flow__handle-connecting` renamed to `connectingto` / `connectingfrom`
- `react-flow__handle-valid` renamed to `valid`
{<h3>9. <code>getNodesBounds</code> options</h3>}
### 9. <code>getNodesBounds</code> options
The type of the second param changed from `nodeOrigin` to `options.nodeOrigin`
{<h4>Old API</h4>}
**Old API**
```js
const bounds = getNodesBounds(nodes: Node[], nodeOrigin)
```
{<h4>New API</h4>}
**New API**
```js
const bounds = getNodesBounds(nodes: Node[], { nodeOrigin })
```
{<h3>10. Typescript changes for defining nodes and edges</h3>}
### 10. Typescript changes for defining nodes and edges
We simplified types and fixed issues about functions where users could pass a NodeData generic. The new way is to define your own node type with a union of all your nodes. With this change, you can now have multiple node types with different data structures and always be able to distinguish by checking the `node.type` attribute.
{<h4>New API</h4>}
**New API**
```js
type NumberNode = Node<{ value: number }, 'number'>;
Expand All @@ -271,23 +270,23 @@ const onNodesChange: onNodesChange<AppNode> = useCallback((changes) => setNodes(
You can read more about this in the [Typescript guide](/learn/advanced-use/typescript).
{<h3>11. Rename <code>nodeInternals</code></h3>}
### 11. Rename <code>nodeInternals</code>
If you are using `nodeInternals` you need to rename it to `nodeLookup`.
{<h4>Old API</h4>}
**Old API**
```js
const node = useStore((s) => s.nodeInternals.get(id));
```
{<h4>New API</h4>}
**New API**
```js
const node = useStore((s) => s.nodeLookup.get(id));
```
{<h3>12. Removal of deprecated functions</h3>}
### 12. Removal of deprecated functions
We removed the following deprecated functions:
Expand All @@ -297,37 +296,37 @@ We removed the following deprecated functions:
- `getMarkerEndId`
- `updateEdge` (replaced by `reconnectEdge`)
{<h3>13. Custom <code>applyNodeChanges</code> and <code>applyEdgeChanges</code></h3>}
### 13. Custom <code>applyNodeChanges</code> and <code>applyEdgeChanges</code>
If you wrote your own function for applying changes, you need to handle the new "replace" event. We removed the "reset" event and added a "replace" event that replaces specific nodes or edges.
## New features
Now that you successfully migrated to v12, you can use all the fancy features. As mentioned above, the biggest updates for v12 are:
{<h3>1. Server side rendering</h3>}
### 1. Server side rendering
You can define `width`, `height` and `handles` for the nodes. This makes it possible to render a flow on the server and hydrate on the client: [server side rendering guide](/learn/advanced-use/ssr-ssg-configuration).
- **Details:** In v11, `width` and `height` were set by the library as soon as the nodes got measured. This still happens, but we are now using `measured.width` and `measured.height` to store this information. In the previous versions there was always a lot of confusion about `width` and `height`. It’s hard to understand, that you can’t use it for passing an actual width or height. It’s also not obvious that those attributes get added by the library. We think that the new implementation solves both of the problems: `width` and `height` are optional attributes that can be used to define dimensions and everything that is set by the library, is stored in `measured`.
{<h3>2. Computing flows</h3>}
### 2. Computing flows
The new hooks [`useHandleConnections`](/api-reference/hooks/use-handle-connections) and [`useNodesData`](/api-reference/hooks/use-nodes-data) and the new [`updateNode`](/api-reference/hooks/use-react-flow#update-node) and [`updateNodeData`](/api-reference/hooks/use-react-flow#update-node-data) functions (both are part of `useReactFlow`) can be used to manage the data flow between your nodes: [computing flows guide](/learn/advanced-use/computing-flows). We also added those helpers for edges (`updateEdge` and `updateEdgeData`)!
- **Details:** Working with flows where one node data relies on another node is super common. You update node A and want to react on those changes in the connected node B. Until now everyone had to come up with a custom solution. With this version we want to change this and give you performant helpers to handle use cases like this.
{<h3>3. Dark mode and CSS variables</h3>}
### 3. Dark mode and CSS variables
React Flow now comes with a built-in dark mode, that can be toggled by using the new [`colorMode`](/api-reference/react-flow#color-mode) prop (”light”, “dark” or “system”): [dark mode example](/examples/styling/dark-mode)
- **Details:** With this version we want to make it easier to switch between dark and light modes and give you a better starting point for dark flows. If you pass `colorMode="dark"`, we add the class name "dark" to the wrapper and use it to adjust the styling. To make the implementation for this new feature easier on our ends, we switched to CSS variables for most of the styles. These variables can also be used in user land to customize a flow.
{<h3>4. A better DX with TSDoc</h3>}
### 4. A better DX with TSDoc
We started to use TSDoc for a better DX. While developing your IDE will now show you the documentation for the props and hooks. This is a big step for us to make the library more accessible and easier to use. We will also use TSDoc in the near future to generate the documentation.
{<h3>More features and updates</h3>}
### More features and updates
There is more! Besides the new main features, we added some minor things that were on our list for a long time:
Expand All @@ -354,7 +353,7 @@ There is more! Besides the new main features, we added some minor things that we
- add `selectable`, `deletable`, `draggable` and `parentId` to `NodeProps`
- add a warning when styles not loaded
{<h3>Internal changes</h3>}
### Internal changes
These changes are not really user-facing, but it could be important for folks who are working with the internal React Flow store:
Expand Down

0 comments on commit e9c7020

Please sign in to comment.