@realflow/compat 0.2.0 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +105 -0
- package/package.json +3 -3
package/README.md
ADDED
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
# @realflow/compat
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@realflow/compat)
|
|
4
|
+
[](https://github.com/olbboy/realflow/blob/main/LICENSE)
|
|
5
|
+
[](https://www.typescriptlang.org/)
|
|
6
|
+
|
|
7
|
+
A **drop-in [React Flow](https://github.com/xyflow/xyflow) (xyflow) API
|
|
8
|
+
compatibility layer** for [RealFlow](https://github.com/olbboy/realflow).
|
|
9
|
+
Migrate an existing React Flow app by changing your imports — and get RealFlow's
|
|
10
|
+
**undo/redo and viewport culling for free**, at no extra work.
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
npm install @realflow/compat
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
## Migrate in one diff
|
|
17
|
+
|
|
18
|
+
```diff
|
|
19
|
+
- import { ReactFlow, Handle, Position, useReactFlow } from '@xyflow/react';
|
|
20
|
+
+ import { ReactFlow, Handle, Position, useReactFlow } from '@realflow/compat';
|
|
21
|
+
- import '@xyflow/react/dist/style.css';
|
|
22
|
+
+ import '@realflow/compat/style.css';
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
Your existing controlled React Flow code keeps working unchanged:
|
|
26
|
+
|
|
27
|
+
```tsx
|
|
28
|
+
import { useCallback } from 'react';
|
|
29
|
+
import {
|
|
30
|
+
ReactFlow, Background, Controls, MiniMap,
|
|
31
|
+
useNodesState, useEdgesState, addEdge, type Connection,
|
|
32
|
+
} from '@realflow/compat';
|
|
33
|
+
import '@realflow/compat/style.css';
|
|
34
|
+
|
|
35
|
+
const initialNodes = [
|
|
36
|
+
{ id: '1', position: { x: 0, y: 0 }, data: { label: 'Input' } },
|
|
37
|
+
{ id: '2', position: { x: 240, y: 80 }, data: { label: 'Output' } },
|
|
38
|
+
];
|
|
39
|
+
const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];
|
|
40
|
+
|
|
41
|
+
export default function Flow() {
|
|
42
|
+
const [nodes, , onNodesChange] = useNodesState(initialNodes);
|
|
43
|
+
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
|
|
44
|
+
const onConnect = useCallback(
|
|
45
|
+
(c: Connection) => setEdges((eds) => addEdge(c, eds)),
|
|
46
|
+
[setEdges],
|
|
47
|
+
);
|
|
48
|
+
|
|
49
|
+
return (
|
|
50
|
+
<div style={{ width: '100vw', height: '100vh' }}>
|
|
51
|
+
<ReactFlow
|
|
52
|
+
nodes={nodes}
|
|
53
|
+
edges={edges}
|
|
54
|
+
onNodesChange={onNodesChange}
|
|
55
|
+
onEdgesChange={onEdgesChange}
|
|
56
|
+
onConnect={onConnect}
|
|
57
|
+
>
|
|
58
|
+
<Background />
|
|
59
|
+
<Controls />
|
|
60
|
+
<MiniMap />
|
|
61
|
+
</ReactFlow>
|
|
62
|
+
</div>
|
|
63
|
+
);
|
|
64
|
+
}
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
## What's supported
|
|
68
|
+
|
|
69
|
+
The adapter maps React Flow's controlled model onto RealFlow's engine:
|
|
70
|
+
|
|
71
|
+
- **Components** — `ReactFlow`, `ReactFlowProvider`, `Handle` (`type` / `position`
|
|
72
|
+
props), `Background`, `MiniMap`, `Controls`, `Panel`, `NodeResizer`, `NodeToolbar`
|
|
73
|
+
- **Hooks** — `useReactFlow`, `useNodesState`, `useEdgesState`, `useOnSelectionChange`
|
|
74
|
+
- **Change helpers** — `applyNodeChanges`, `applyEdgeChanges`, `addEdge`, `reconnectEdge`
|
|
75
|
+
- **Enums** — `Position`, `MarkerType`, `ConnectionMode`, `ConnectionLineType`, `PanOnScrollMode`
|
|
76
|
+
- **Types** — `Node`, `Edge`, `Connection`, `NodeChange`, `EdgeChange`, `NodeProps`,
|
|
77
|
+
`EdgeProps`, `OnConnect`, `ReactFlowInstance`, `Viewport`, `ReactFlowProps`, and more
|
|
78
|
+
|
|
79
|
+
Custom `nodeTypes` / `edgeTypes`, `onConnect`, and the `<Handle type position>`
|
|
80
|
+
API all keep working. Coverage targets the common migration surface — see the
|
|
81
|
+
[migration guide](https://github.com/olbboy/realflow/blob/main/docs/migration.md)
|
|
82
|
+
for the exact map and the few APIs that need manual attention.
|
|
83
|
+
|
|
84
|
+
## Why migrate?
|
|
85
|
+
|
|
86
|
+
Once you're on the RealFlow engine you get, without changing your app code:
|
|
87
|
+
|
|
88
|
+
- **Undo / redo** — transactional, drag-coalescing (`⌘Z` / `⌘⇧Z`)
|
|
89
|
+
- **Viewport culling** — spatial-hash backed, on by default (large graphs stay interactive)
|
|
90
|
+
- **Zero-render pan/zoom** — the viewport transform is written straight to the DOM
|
|
91
|
+
|
|
92
|
+
When you're ready, drop the compat layer and adopt the native, less-boilerplate
|
|
93
|
+
[`@realflow/react`](https://www.npmjs.com/package/@realflow/react) API
|
|
94
|
+
(`useRealFlow()` — no `onNodesChange` / `applyNodeChanges` wiring).
|
|
95
|
+
|
|
96
|
+
## Related packages
|
|
97
|
+
|
|
98
|
+
| Package | What it is |
|
|
99
|
+
| --- | --- |
|
|
100
|
+
| [`@realflow/react`](https://www.npmjs.com/package/@realflow/react) | The native RealFlow React renderer |
|
|
101
|
+
| [`@realflow/core`](https://www.npmjs.com/package/@realflow/core) | Headless, zero-dependency engine |
|
|
102
|
+
|
|
103
|
+
## License
|
|
104
|
+
|
|
105
|
+
[MIT](https://github.com/olbboy/realflow/blob/main/LICENSE) © RealFlow contributors.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@realflow/compat",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"description": "Drop-in React Flow (xyflow) API compatibility layer for RealFlow. Migrate an existing React Flow app by changing one import.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"publishConfig": {
|
|
@@ -26,8 +26,8 @@
|
|
|
26
26
|
"build": "tsc -p tsconfig.build.json && node ../../scripts/append-js-extensions.mjs dist && cp ../react/src/styles.css dist/style.css"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@realflow/core": "0.2.
|
|
30
|
-
"@realflow/react": "0.2.
|
|
29
|
+
"@realflow/core": "0.2.1",
|
|
30
|
+
"@realflow/react": "0.2.1"
|
|
31
31
|
},
|
|
32
32
|
"peerDependencies": {
|
|
33
33
|
"react": ">=18",
|