alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(lib): use react 18

Browse Source
This commit is contained in:
moklick
2022-04-11 16:11:14 +02:00
parent 97c8316f8d
commit 607e8061c9
21 changed files with 129 additions and 513 deletions
Download Patch File Download Diff File Expand all files Collapse all files

434
example/package-lock.json generated
View File

@@ -21,13 +21,13 @@
"@types/dagre": "^0.7.47",
"@types/localforage": "0.0.34",
"@types/react": "file:../node_modules/@types/react",
"@types/react-dom": "^17.0.11",
"@types/react-dom": "^18.0.0",
"@types/react-router-dom": "^5.3.3"
}
},
"..": {
"name": "react-flow-renderer",
"version": "10.0.7",
"version": "10.0.9-next.0",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.17.8",
@@ -47,9 +47,8 @@
"@rollup/plugin-commonjs": "^21.0.2",
"@rollup/plugin-node-resolve": "^13.1.3",
"@rollup/plugin-replace": "^4.0.0",
"@svgr/rollup": "^6.2.1",
"@types/d3": "^7.1.0",
"@types/react": "^17.0.40",
"@types/react": "^18.0.1",
"@types/resize-observer-browser": "^0.1.7",
"autoprefixer": "^10.4.2",
"babel-preset-react-app": "^10.0.1",
@@ -58,24 +57,26 @@
"postcss-cli": "^9.1.0",
"postcss-nested": "^5.0.6",
"prettier": "2.5.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"release-it": "^14.12.5",
"rimraf": "^3.0.2",
"rollup": "^2.70.1",
"rollup-plugin-livereload": "^2.0.5",
"rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-serve": "^1.1.0",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^0.31.2",
"rollup-plugin-visualizer": "^5.6.0",
"start-server-and-test": "^1.14.0",
"typescript": "^4.6.2"
},
"engines": {
"node": ">=12"
"node": ">=14"
},
"peerDependencies": {
"react": "16 || 17",
"react-dom": "16 || 17"
"react": "16 || 17 || 18",
"react-dom": "16 || 17 || 18"
}
},
"../node_modules/@babel/code-frame": {
@@ -1335,20 +1336,6 @@
"@babel/core": "^7.0.0-0"
}
},
"../node_modules/@babel/plugin-transform-react-constant-elements": {
"version": "7.14.5",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/helper-plugin-utils": "^7.14.5"
},
"engines": {
"node": ">=6.9.0"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
},
"../node_modules/@babel/plugin-transform-react-display-name": {
"version": "7.16.7",
"dev": true,
@@ -2103,259 +2090,6 @@
"url": "https://github.com/sindresorhus/is?sponsor=1"
}
},
"../node_modules/@svgr/babel-plugin-add-jsx-attribute": {
"version": "6.0.0",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
},
"../node_modules/@svgr/babel-plugin-remove-jsx-attribute": {
"version": "6.0.0",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
},
"../node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": {
"version": "6.0.0",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
},
"../node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": {
"version": "6.0.0",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
},
"../node_modules/@svgr/babel-plugin-svg-dynamic-title": {
"version": "6.0.0",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
},
"../node_modules/@svgr/babel-plugin-svg-em-dimensions": {
"version": "6.0.0",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
},
"../node_modules/@svgr/babel-plugin-transform-react-native-svg": {
"version": "6.0.0",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
},
"../node_modules/@svgr/babel-plugin-transform-svg-component": {
"version": "6.2.0",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=12"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
},
"../node_modules/@svgr/babel-preset": {
"version": "6.2.0",
"dev": true,
"license": "MIT",
"dependencies": {
"@svgr/babel-plugin-add-jsx-attribute": "^6.0.0",
"@svgr/babel-plugin-remove-jsx-attribute": "^6.0.0",
"@svgr/babel-plugin-remove-jsx-empty-expression": "^6.0.0",
"@svgr/babel-plugin-replace-jsx-attribute-value": "^6.0.0",
"@svgr/babel-plugin-svg-dynamic-title": "^6.0.0",
"@svgr/babel-plugin-svg-em-dimensions": "^6.0.0",
"@svgr/babel-plugin-transform-react-native-svg": "^6.0.0",
"@svgr/babel-plugin-transform-svg-component": "^6.2.0"
},
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
},
"../node_modules/@svgr/core": {
"version": "6.2.1",
"dev": true,
"license": "MIT",
"dependencies": {
"@svgr/plugin-jsx": "^6.2.1",
"camelcase": "^6.2.0",
"cosmiconfig": "^7.0.1"
},
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
}
},
"../node_modules/@svgr/hast-util-to-babel-ast": {
"version": "6.2.1",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/types": "^7.15.6",
"entities": "^3.0.1"
},
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
}
},
"../node_modules/@svgr/hast-util-to-babel-ast/node_modules/entities": {
"version": "3.0.1",
"dev": true,
"license": "BSD-2-Clause",
"engines": {
"node": ">=0.12"
},
"funding": {
"url": "https://github.com/fb55/entities?sponsor=1"
}
},
"../node_modules/@svgr/plugin-jsx": {
"version": "6.2.1",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/core": "^7.15.5",
"@svgr/babel-preset": "^6.2.0",
"@svgr/hast-util-to-babel-ast": "^6.2.1",
"svg-parser": "^2.0.2"
},
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"peerDependencies": {
"@svgr/core": "^6.0.0"
}
},
"../node_modules/@svgr/plugin-svgo": {
"version": "6.2.0",
"dev": true,
"license": "MIT",
"dependencies": {
"cosmiconfig": "^7.0.1",
"deepmerge": "^4.2.2",
"svgo": "^2.5.0"
},
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"peerDependencies": {
"@svgr/core": "^6.0.0"
}
},
"../node_modules/@svgr/rollup": {
"version": "6.2.1",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/core": "^7.15.5",
"@babel/plugin-transform-react-constant-elements": "^7.14.5",
"@babel/preset-env": "^7.15.6",
"@babel/preset-react": "^7.14.5",
"@babel/preset-typescript": "^7.16.0",
"@svgr/core": "^6.2.1",
"@svgr/plugin-jsx": "^6.2.1",
"@svgr/plugin-svgo": "^6.2.0",
"rollup-pluginutils": "^2.8.2"
},
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
}
},
"../node_modules/@szmarczak/http-timer": {
"version": "4.0.6",
"dev": true,
@@ -8853,11 +8587,6 @@
"node": ">=4"
}
},
"../node_modules/svg-parser": {
"version": "2.0.4",
"dev": true,
"license": "MIT"
},
"../node_modules/svgo": {
"version": "2.8.0",
"dev": true,
@@ -12856,9 +12585,9 @@
"link": true
},
"node_modules/@types/react-dom": {
"version": "17.0.11",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.11.tgz",
"integrity": "sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q==",
"version": "18.0.0",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.0.tgz",
"integrity": "sha512-49897Y0UiCGmxZqpC8Blrf6meL8QUla6eb+BBhn69dTXlmuOlzkfr7HHY/O8J25e1lTUMs+YYxSlVDAaGHCOLg==",
"dev": true,
"dependencies": {
"@types/react": "*"
@@ -27562,9 +27291,9 @@
}
},
"@types/react-dom": {
"version": "17.0.11",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.11.tgz",
"integrity": "sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q==",
"version": "18.0.0",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.0.tgz",
"integrity": "sha512-49897Y0UiCGmxZqpC8Blrf6meL8QUla6eb+BBhn69dTXlmuOlzkfr7HHY/O8J25e1lTUMs+YYxSlVDAaGHCOLg==",
"dev": true,
"requires": {
"@types/react": "*"
@@ -34335,9 +34064,8 @@
"@rollup/plugin-commonjs": "^21.0.2",
"@rollup/plugin-node-resolve": "^13.1.3",
"@rollup/plugin-replace": "^4.0.0",
"@svgr/rollup": "^6.2.1",
"@types/d3": "^7.1.0",
"@types/react": "^17.0.40",
"@types/react": "^18.0.1",
"@types/resize-observer-browser": "^0.1.7",
"autoprefixer": "^10.4.2",
"babel-preset-react-app": "^10.0.1",
@@ -34349,14 +34077,16 @@
"postcss-cli": "^9.1.0",
"postcss-nested": "^5.0.6",
"prettier": "2.5.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-draggable": "^4.4.4",
"release-it": "^14.12.5",
"rimraf": "^3.0.2",
"rollup": "^2.70.1",
"rollup-plugin-livereload": "^2.0.5",
"rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-serve": "^1.1.0",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^0.31.2",
"rollup-plugin-visualizer": "^5.6.0",
"start-server-and-test": "^1.14.0",
@@ -35094,13 +34824,6 @@
"@babel/helper-plugin-utils": "^7.16.7"
}
},
"@babel/plugin-transform-react-constant-elements": {
"version": "7.14.5",
"dev": true,
"requires": {
"@babel/helper-plugin-utils": "^7.14.5"
}
},
"@babel/plugin-transform-react-display-name": {
"version": "7.16.7",
"dev": true,
@@ -35622,117 +35345,6 @@
"version": "4.2.0",
"dev": true
},
"@svgr/babel-plugin-add-jsx-attribute": {
"version": "6.0.0",
"dev": true,
"requires": {}
},
"@svgr/babel-plugin-remove-jsx-attribute": {
"version": "6.0.0",
"dev": true,
"requires": {}
},
"@svgr/babel-plugin-remove-jsx-empty-expression": {
"version": "6.0.0",
"dev": true,
"requires": {}
},
"@svgr/babel-plugin-replace-jsx-attribute-value": {
"version": "6.0.0",
"dev": true,
"requires": {}
},
"@svgr/babel-plugin-svg-dynamic-title": {
"version": "6.0.0",
"dev": true,
"requires": {}
},
"@svgr/babel-plugin-svg-em-dimensions": {
"version": "6.0.0",
"dev": true,
"requires": {}
},
"@svgr/babel-plugin-transform-react-native-svg": {
"version": "6.0.0",
"dev": true,
"requires": {}
},
"@svgr/babel-plugin-transform-svg-component": {
"version": "6.2.0",
"dev": true,
"requires": {}
},
"@svgr/babel-preset": {
"version": "6.2.0",
"dev": true,
"requires": {
"@svgr/babel-plugin-add-jsx-attribute": "^6.0.0",
"@svgr/babel-plugin-remove-jsx-attribute": "^6.0.0",
"@svgr/babel-plugin-remove-jsx-empty-expression": "^6.0.0",
"@svgr/babel-plugin-replace-jsx-attribute-value": "^6.0.0",
"@svgr/babel-plugin-svg-dynamic-title": "^6.0.0",
"@svgr/babel-plugin-svg-em-dimensions": "^6.0.0",
"@svgr/babel-plugin-transform-react-native-svg": "^6.0.0",
"@svgr/babel-plugin-transform-svg-component": "^6.2.0"
}
},
"@svgr/core": {
"version": "6.2.1",
"dev": true,
"requires": {
"@svgr/plugin-jsx": "^6.2.1",
"camelcase": "^6.2.0",
"cosmiconfig": "^7.0.1"
}
},
"@svgr/hast-util-to-babel-ast": {
"version": "6.2.1",
"dev": true,
"requires": {
"@babel/types": "^7.15.6",
"entities": "^3.0.1"
},
"dependencies": {
"entities": {
"version": "3.0.1",
"dev": true
}
}
},
"@svgr/plugin-jsx": {
"version": "6.2.1",
"dev": true,
"requires": {
"@babel/core": "^7.15.5",
"@svgr/babel-preset": "^6.2.0",
"@svgr/hast-util-to-babel-ast": "^6.2.1",
"svg-parser": "^2.0.2"
}
},
"@svgr/plugin-svgo": {
"version": "6.2.0",
"dev": true,
"requires": {
"cosmiconfig": "^7.0.1",
"deepmerge": "^4.2.2",
"svgo": "^2.5.0"
}
},
"@svgr/rollup": {
"version": "6.2.1",
"dev": true,
"requires": {
"@babel/core": "^7.15.5",
"@babel/plugin-transform-react-constant-elements": "^7.14.5",
"@babel/preset-env": "^7.15.6",
"@babel/preset-react": "^7.14.5",
"@babel/preset-typescript": "^7.16.0",
"@svgr/core": "^6.2.1",
"@svgr/plugin-jsx": "^6.2.1",
"@svgr/plugin-svgo": "^6.2.0",
"rollup-pluginutils": "^2.8.2"
}
},
"@szmarczak/http-timer": {
"version": "4.0.6",
"dev": true,
@@ -39822,10 +39434,6 @@
"has-flag": "^3.0.0"
}
},
"svg-parser": {
"version": "2.0.4",
"dev": true
},
"svgo": {
"version": "2.8.0",
"dev": true,

2
example/package.json
View File

@@ -37,7 +37,7 @@
"@types/dagre": "^0.7.47",
"@types/localforage": "0.0.34",
"@types/react": "file:../node_modules/@types/react",
"@types/react-dom": "^17.0.11",
"@types/react-dom": "^18.0.0",
"@types/react-router-dom": "^5.3.3"
}
}

11
example/src/index.tsx
View File

@@ -1,6 +1,7 @@
import { ChangeEvent } from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import { BrowserRouter, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
import Basic from './Basic';
import ControlledUncontrolled from './ControlledUncontrolled';
import CustomConnectionLine from './CustomConnectionLine';
@@ -187,7 +188,10 @@ const Header = () => {
);
};
ReactDOM.render(
const container = document.getElementById('root');
const root = createRoot(container!);
root.render(
<BrowserRouter>
<Header />
<Routes>
@@ -195,6 +199,5 @@ ReactDOM.render(
<Route path={route.path} key={route.path} element={<route.component />} />
))}
</Routes>
</BrowserRouter>,
document.getElementById('root')
</BrowserRouter>
);

78
package-lock.json generated
View File

@@ -27,7 +27,7 @@
"@rollup/plugin-node-resolve": "^13.1.3",
"@rollup/plugin-replace": "^4.0.0",
"@types/d3": "^7.1.0",
"@types/react": "^17.0.40",
"@types/react": "^18.0.1",
"@types/resize-observer-browser": "^0.1.7",
"autoprefixer": "^10.4.2",
"babel-preset-react-app": "^10.0.1",
@@ -36,8 +36,8 @@
"postcss-cli": "^9.1.0",
"postcss-nested": "^5.0.6",
"prettier": "2.5.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"release-it": "^14.12.5",
"rimraf": "^3.0.2",
"rollup": "^2.70.1",
@@ -54,8 +54,8 @@
"node": ">=14"
},
"peerDependencies": {
"react": "16 || 17",
"react-dom": "16 || 17"
"react": "16 || 17 || 18",
"react-dom": "16 || 17 || 18"
}
},
"node_modules/@ampproject/remapping": {
@@ -2583,9 +2583,9 @@
"dev": true
},
"node_modules/@types/react": {
"version": "17.0.40",
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.40.tgz",
"integrity": "sha512-UrXhD/JyLH+W70nNSufXqMZNuUD2cXHu6UjCllC6pmOQgBX4SGXOH8fjRka0O0Ee0HrFxapDD8Bwn81Kmiz6jQ==",
"version": "18.0.1",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.1.tgz",
"integrity": "sha512-VnWlrVgG0dYt+NqlfMI0yUYb8Rdl4XUROyH+c6gq/iFCiZ805Vi//26UW38DHnxQkbDhnrIWTBiy6oKZqL11cw==",
"dev": true,
"dependencies": {
"@types/prop-types": "*",
@@ -8174,30 +8174,28 @@
"dev": true
},
"node_modules/react": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
"integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
"version": "18.0.0",
"resolved": "https://registry.npmjs.org/react/-/react-18.0.0.tgz",
"integrity": "sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A==",
"dev": true,
"dependencies": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1"
"loose-envify": "^1.1.0"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/react-dom": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
"integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
"version": "18.0.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.0.0.tgz",
"integrity": "sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==",
"dev": true,
"dependencies": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1",
"scheduler": "^0.20.2"
"scheduler": "^0.21.0"
},
"peerDependencies": {
"react": "17.0.2"
"react": "^18.0.0"
}
},
"node_modules/react-draggable": {
@@ -9012,13 +9010,12 @@
"dev": true
},
"node_modules/scheduler": {
"version": "0.20.2",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
"integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
"version": "0.21.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz",
"integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==",
"dev": true,
"dependencies": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1"
"loose-envify": "^1.1.0"
}
},
"node_modules/semver": {
@@ -12133,9 +12130,9 @@
"dev": true
},
"@types/react": {
"version": "17.0.40",
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.40.tgz",
"integrity": "sha512-UrXhD/JyLH+W70nNSufXqMZNuUD2cXHu6UjCllC6pmOQgBX4SGXOH8fjRka0O0Ee0HrFxapDD8Bwn81Kmiz6jQ==",
"version": "18.0.1",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.1.tgz",
"integrity": "sha512-VnWlrVgG0dYt+NqlfMI0yUYb8Rdl4XUROyH+c6gq/iFCiZ805Vi//26UW38DHnxQkbDhnrIWTBiy6oKZqL11cw==",
"dev": true,
"requires": {
"@types/prop-types": "*",
@@ -16243,24 +16240,22 @@
}
},
"react": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
"integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
"version": "18.0.0",
"resolved": "https://registry.npmjs.org/react/-/react-18.0.0.tgz",
"integrity": "sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A==",
"dev": true,
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1"
"loose-envify": "^1.1.0"
}
},
"react-dom": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
"integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
"version": "18.0.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.0.0.tgz",
"integrity": "sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==",
"dev": true,
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1",
"scheduler": "^0.20.2"
"scheduler": "^0.21.0"
}
},
"react-draggable": {
@@ -16881,13 +16876,12 @@
"dev": true
},
"scheduler": {
"version": "0.20.2",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
"integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
"version": "0.21.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0.tgz",
"integrity": "sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==",
"dev": true,
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1"
"loose-envify": "^1.1.0"
}
},
"semver": {

10
package.json
View File

@@ -58,7 +58,7 @@
"@rollup/plugin-node-resolve": "^13.1.3",
"@rollup/plugin-replace": "^4.0.0",
"@types/d3": "^7.1.0",
"@types/react": "^17.0.40",
"@types/react": "^18.0.1",
"@types/resize-observer-browser": "^0.1.7",
"autoprefixer": "^10.4.2",
"babel-preset-react-app": "^10.0.1",
@@ -67,8 +67,8 @@
"postcss-cli": "^9.1.0",
"postcss-nested": "^5.0.6",
"prettier": "2.5.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"release-it": "^14.12.5",
"rimraf": "^3.0.2",
"rollup": "^2.70.1",
@@ -82,8 +82,8 @@
"typescript": "^4.6.2"
},
"peerDependencies": {
"react": "16 || 17",
"react-dom": "16 || 17"
"react": "16 || 17 || 18",
"react-dom": "16 || 17 || 18"
},
"files": [
"dist",

6
src/additional-components/Controls/index.tsx
View File

@@ -1,4 +1,4 @@
import React, { memo, useCallback, FC, useEffect, useState } from 'react';
import React, { memo, useCallback, FC, useEffect, useState, PropsWithChildren } from 'react';
import cc from 'classcat';
import { useStore, useStoreApi } from '../../store';
@@ -12,7 +12,7 @@ import UnlockIcon from './Icons/Unlock';
import { ControlProps, ControlButtonProps, ReactFlowState } from '../../types';
export const ControlButton: FC<ControlButtonProps> = ({ children, className, ...rest }) => (
export const ControlButton: FC<PropsWithChildren<ControlButtonProps>> = ({ children, className, ...rest }) => (
<button type="button" className={cc(['react-flow__controls-button', className])} {...rest}>
{children}
</button>
@@ -20,7 +20,7 @@ export const ControlButton: FC<ControlButtonProps> = ({ children, className, ...
const isInteractiveSelector = (s: ReactFlowState) => s.nodesDraggable && s.nodesConnectable && s.elementsSelectable;
const Controls: FC<ControlProps> = ({
const Controls: FC<PropsWithChildren<ControlProps>> = ({
style,
showZoom = true,
showFitView = true,

4
src/additional-components/ReactFlowProvider/index.tsx
View File

@@ -2,7 +2,9 @@ import React, { FC, PropsWithChildren } from 'react';
import { Provider, createStore } from '../../store';
const ReactFlowProvider: FC<PropsWithChildren<{}>> = ({ children }) => <Provider createStore={createStore}>{children}</Provider>;
const ReactFlowProvider: FC<PropsWithChildren<{}>> = ({ children }) => (
<Provider createStore={createStore}>{children}</Provider>
);
ReactFlowProvider.displayName = 'ReactFlowProvider';

4
src/components/Edges/EdgeText.tsx
View File

@@ -1,9 +1,9 @@
import React, { memo, useRef, useState, useEffect, FC } from 'react';
import React, { memo, useRef, useState, useEffect, FC, PropsWithChildren } from 'react';
import cc from 'classcat';
import { EdgeTextProps, Rect } from '../../types';
const EdgeText: FC<EdgeTextProps> = ({
const EdgeText: FC<PropsWithChildren<EdgeTextProps>> = ({
x,
y,
label,

2
src/components/Edges/wrapEdge.tsx
View File

@@ -140,7 +140,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
const handleEdgeUpdater = useCallback(
(event: React.MouseEvent<SVGGElement, MouseEvent>, isSourceHandle: boolean) => {
const nodeId = isSourceHandle ? target : source;
const handleId = isSourceHandle ? targetHandleId : sourceHandleId;
const handleId = (isSourceHandle ? targetHandleId : sourceHandleId) || null;
const handleType = isSourceHandle ? 'target' : 'source';
const isValidConnection = () => true;
const isTarget = isSourceHandle;

1
src/components/Nodes/wrapNode.tsx
View File

@@ -232,6 +232,7 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
]);
return (
// @ts-ignore
<DraggableCore
onStart={onDragStart}
onDrag={onDrag}

1
src/components/NodesSelection/index.tsx
View File

@@ -113,6 +113,7 @@ function NodesSelection({
return (
<div className={cc(['react-flow__nodesselection', 'react-flow__container', noPanClassName])} style={style}>
{/* @ts-ignore */}
<DraggableCore
scale={tScale}
grid={grid}

3
src/container/EdgeRenderer/index.tsx
View File

@@ -15,11 +15,12 @@ import {
OnEdgeUpdateFunc,
HandleType,
ReactFlowState,
EdgeTypesWrapped,
} from '../../types';
import useVisibleEdges from '../../hooks/useVisibleEdges';
interface EdgeRendererProps {
edgeTypes: any;
edgeTypes: EdgeTypesWrapped;
connectionLineType: ConnectionLineType;
connectionLineStyle?: CSSProperties;
connectionLineComponent?: ConnectionLineComponent;

11
src/container/EdgeRenderer/utils.ts
View File

@@ -4,6 +4,7 @@ import wrapEdge from '../../components/Edges/wrapEdge';
import {
EdgeProps,
EdgeTypes,
EdgeTypesWrapped,
HandleElement,
NodeHandleBounds,
NodeInternals,
@@ -14,10 +15,10 @@ import {
} from '../../types';
import { rectToBox } from '../../utils';
export type CreateEdgeTypes = (edgeTypes: EdgeTypes) => EdgeTypes;
export type CreateEdgeTypes = (edgeTypes: EdgeTypes) => EdgeTypesWrapped;
export function createEdgeTypes(edgeTypes: EdgeTypes): EdgeTypes {
const standardTypes: EdgeTypes = {
export function createEdgeTypes(edgeTypes: EdgeTypes): EdgeTypesWrapped {
const standardTypes: EdgeTypesWrapped = {
default: wrapEdge((edgeTypes.default || BezierEdge) as ComponentType<EdgeProps>),
straight: wrapEdge((edgeTypes.bezier || StraightEdge) as ComponentType<EdgeProps>),
step: wrapEdge((edgeTypes.step || StepEdge) as ComponentType<EdgeProps>),
@@ -25,8 +26,8 @@ export function createEdgeTypes(edgeTypes: EdgeTypes): EdgeTypes {
simplebezier: wrapEdge((edgeTypes.simplebezier || SimpleBezierEdge) as ComponentType<EdgeProps>),
};
const wrappedTypes = {} as EdgeTypes;
const specialTypes: EdgeTypes = Object.keys(edgeTypes)
const wrappedTypes = {} as EdgeTypesWrapped;
const specialTypes: EdgeTypesWrapped = Object.keys(edgeTypes)
.filter((k) => !['default', 'bezier'].includes(k))
.reduce((res, key) => {
res[key] = wrapEdge((edgeTypes[key] || BezierEdge) as ComponentType<EdgeProps>);

9
src/container/GraphView/index.tsx
View File

@@ -5,11 +5,12 @@ import NodeRenderer from '../NodeRenderer';
import EdgeRenderer from '../EdgeRenderer';
import Viewport from '../Viewport';
import useOnInitHandler from '../../hooks/useOnInitHandler';
import { NodeTypes, EdgeTypes, ConnectionLineType, KeyCode, ReactFlowProps } from '../../types';
import { NodeTypesWrapped, EdgeTypesWrapped, ConnectionLineType, KeyCode, ReactFlowProps } from '../../types';
export interface GraphViewProps extends Omit<ReactFlowProps, 'onSelectionChange' | 'nodes' | 'edges'> {
nodeTypes: NodeTypes;
edgeTypes: EdgeTypes;
export interface GraphViewProps
extends Omit<ReactFlowProps, 'onSelectionChange' | 'nodes' | 'edges' | 'nodeTypes' | 'edgeTypes'> {
nodeTypes: NodeTypesWrapped;
edgeTypes: EdgeTypesWrapped;
selectionKeyCode: KeyCode | null;
deleteKeyCode: KeyCode | null;
multiSelectionKeyCode: KeyCode | null;

4
src/container/NodeRenderer/index.tsx
View File

@@ -3,10 +3,10 @@ import shallow from 'zustand/shallow';
import useVisibleNodes from '../../hooks/useVisibleNodes';
import { useStore } from '../../store';
import { Node, NodeTypes, Position, ReactFlowState, WrapNodeProps } from '../../types';
import { Node, NodeTypesWrapped, Position, ReactFlowState, WrapNodeProps } from '../../types';
interface NodeRendererProps {
nodeTypes: NodeTypes;
nodeTypes: NodeTypesWrapped;
selectNodesOnDrag: boolean;
onNodeClick?: (event: MouseEvent, element: Node) => void;
onNodeDoubleClick?: (event: MouseEvent, element: Node) => void;

12
src/container/NodeRenderer/utils.ts
View File

@@ -5,20 +5,20 @@ import InputNode from '../../components/Nodes/InputNode';
import OutputNode from '../../components/Nodes/OutputNode';
import GroupNode from '../../components/Nodes/GroupNode';
import wrapNode from '../../components/Nodes/wrapNode';
import { NodeTypes, NodeProps } from '../../types';
import { NodeTypes, NodeProps, NodeTypesWrapped } from '../../types';
export type CreateNodeTypes = (nodeTypes: NodeTypes) => NodeTypes;
export type CreateNodeTypes = (nodeTypes: NodeTypes) => NodeTypesWrapped;
export function createNodeTypes(nodeTypes: NodeTypes): NodeTypes {
const standardTypes: NodeTypes = {
export function createNodeTypes(nodeTypes: NodeTypes): NodeTypesWrapped {
const standardTypes: NodeTypesWrapped = {
input: wrapNode((nodeTypes.input || InputNode) as ComponentType<NodeProps>),
default: wrapNode((nodeTypes.default || DefaultNode) as ComponentType<NodeProps>),
output: wrapNode((nodeTypes.output || OutputNode) as ComponentType<NodeProps>),
group: wrapNode((nodeTypes.group || GroupNode) as ComponentType<NodeProps>),
};
const wrappedTypes = {} as NodeTypes;
const specialTypes: NodeTypes = Object.keys(nodeTypes)
const wrappedTypes = {} as NodeTypesWrapped;
const specialTypes: NodeTypesWrapped = Object.keys(nodeTypes)
.filter((k) => !['input', 'default', 'output', 'group'].includes(k))
.reduce((res, key) => {
res[key] = wrapNode((nodeTypes[key] || DefaultNode) as ComponentType<NodeProps>);

4
src/container/ReactFlow/Wrapper.tsx
View File

@@ -1,8 +1,8 @@
import React, { FC } from 'react';
import React, { FC, PropsWithChildren } from 'react';
import { Provider, createStore, useStoreApi } from '../../store';
const Wrapper: FC = ({ children }) => {
const Wrapper: FC<PropsWithChildren<{}>> = ({ children }) => {
let isWrapped = true;
try {

16
src/container/ReactFlow/index.tsx
View File

@@ -13,7 +13,9 @@ import {
ConnectionLineType,
ConnectionMode,
EdgeTypes,
EdgeTypesWrapped,
NodeTypes,
NodeTypesWrapped,
PanOnScrollMode,
ReactFlowProps,
ReactFlowRefType,
@@ -21,7 +23,7 @@ import {
import { createEdgeTypes } from '../EdgeRenderer/utils';
import GraphView from '../GraphView';
import { createNodeTypes } from '../NodeRenderer/utils';
import injectStyle, { useNodeOrEdgeTypes } from './utils';
import { injectStyle, useNodeOrEdgeTypes } from './utils';
import Wrapper from './Wrapper';
if (__INJECT_STYLES__) {
@@ -29,13 +31,13 @@ if (__INJECT_STYLES__) {
injectStyle(theme as unknown as string);
}
const defaultNodeTypes = {
const defaultNodeTypes: NodeTypes = {
input: InputNode,
default: DefaultNode,
output: OutputNode,
};
const defaultEdgeTypes = {
const defaultEdgeTypes: EdgeTypes = {
default: BezierEdge,
straight: StraightEdge,
step: StepEdge,
@@ -139,8 +141,8 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
},
ref
) => {
const nodeTypesParsed = useNodeOrEdgeTypes(nodeTypes, createNodeTypes) as NodeTypes;
const edgeTypesParsed = useNodeOrEdgeTypes(edgeTypes, createEdgeTypes) as EdgeTypes;
const nodeTypesWrapped = useNodeOrEdgeTypes(nodeTypes, createNodeTypes) as NodeTypesWrapped;
const edgeTypesWrapped = useNodeOrEdgeTypes(edgeTypes, createEdgeTypes) as EdgeTypesWrapped;
const reactFlowClasses = cc(['react-flow', className]);
return (
@@ -161,8 +163,8 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
onNodeDragStart={onNodeDragStart}
onNodeDrag={onNodeDrag}
onNodeDragStop={onNodeDragStop}
nodeTypes={nodeTypesParsed}
edgeTypes={edgeTypesParsed}
nodeTypes={nodeTypesWrapped}
edgeTypes={edgeTypesWrapped}
connectionLineType={connectionLineType}
connectionLineStyle={connectionLineStyle}
connectionLineComponent={connectionLineComponent}

8
src/container/ReactFlow/utils.ts
View File

@@ -1,12 +1,12 @@
import { useMemo, useRef } from 'react';
import shallow from 'zustand/shallow';
import { EdgeTypes, NodeTypes } from '../../types';
import { EdgeTypes, EdgeTypesWrapped, NodeTypes, NodeTypesWrapped } from '../../types';
import { CreateEdgeTypes } from '../EdgeRenderer/utils';
import { CreateNodeTypes } from '../NodeRenderer/utils';
export function useNodeOrEdgeTypes(nodeOrEdgeTypes: NodeTypes, createTypes: CreateNodeTypes): NodeTypes;
export function useNodeOrEdgeTypes(nodeOrEdgeTypes: EdgeTypes, createTypes: CreateEdgeTypes): EdgeTypes;
export function useNodeOrEdgeTypes(nodeOrEdgeTypes: NodeTypes, createTypes: CreateNodeTypes): NodeTypesWrapped;
export function useNodeOrEdgeTypes(nodeOrEdgeTypes: EdgeTypes, createTypes: CreateEdgeTypes): EdgeTypesWrapped;
export function useNodeOrEdgeTypes(nodeOrEdgeTypes: any, createTypes: any): any {
const typesKeysRef = useRef<string[] | null>(null);
@@ -28,7 +28,7 @@ export function useNodeOrEdgeTypes(nodeOrEdgeTypes: any, createTypes: any): any
return typesParsed;
}
export default function injectStyle(css: string): void {
export function injectStyle(css: string): void {
if (!css || typeof document === 'undefined') return;
const head = document.head || document.getElementsByTagName('head')[0];

10
src/types/edges.ts
View File

@@ -1,4 +1,4 @@
import React, { CSSProperties, HTMLAttributes, ReactNode } from 'react';
import React, { CSSProperties, ComponentType, HTMLAttributes, ReactNode } from 'react';
import { Connection } from './general';
import { HandleElement, HandleType } from './handles';
import { Node } from './nodes';
@@ -101,8 +101,8 @@ export interface WrapEdgeProps<T = any> {
style?: CSSProperties;
source: string;
target: string;
sourceHandleId: string | null;
targetHandleId: string | null;
sourceHandleId?: string | null;
targetHandleId?: string | null;
sourceX: number;
sourceY: number;
targetX: number;
@@ -111,7 +111,7 @@ export interface WrapEdgeProps<T = any> {
targetPosition: Position;
elementsSelectable?: boolean;
hidden?: boolean;
onEdgeUpdate: OnEdgeUpdateFunc;
onEdgeUpdate?: OnEdgeUpdateFunc;
onContextMenu?: EdgeMouseHandler;
onMouseEnter?: EdgeMouseHandler;
onMouseMove?: EdgeMouseHandler;
@@ -162,7 +162,7 @@ export type ConnectionLineComponentProps = {
sourceHandle?: HandleElement;
};
export type ConnectionLineComponent = React.ComponentType<ConnectionLineComponentProps>;
export type ConnectionLineComponent = ComponentType<ConnectionLineComponentProps>;
export type OnEdgeUpdateFunc<T = any> = (oldEdge: Edge<T>, newConnection: Connection) => void;

12
src/types/general.ts
View File

@@ -1,16 +1,18 @@
import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
import { MouseEvent as ReactMouseEvent, ComponentType, MemoExoticComponent } from 'react';
import { Selection as D3Selection, ZoomBehavior } from 'd3';
import { XYPosition, Rect, Transform, CoordinateExtent } from './utils';
import { NodeChange, EdgeChange } from './changes';
import { Node, NodeInternals, NodeDimensionUpdate, NodeDiffUpdate } from './nodes';
import { Edge } from './edges';
import { Node, NodeInternals, NodeDimensionUpdate, NodeDiffUpdate, NodeProps, WrapNodeProps } from './nodes';
import { Edge, EdgeProps, WrapEdgeProps } from './edges';
import { HandleType, StartHandle } from './handles';
import { DefaultEdgeOptions } from '.';
import { ReactFlowInstance } from './instance';
export type NodeTypes = { [key: string]: ReactNode };
export type EdgeTypes = NodeTypes;
export type NodeTypes = { [key: string]: ComponentType<NodeProps> };
export type NodeTypesWrapped = { [key: string]: MemoExoticComponent<ComponentType<WrapNodeProps>> };
export type EdgeTypes = { [key: string]: ComponentType<EdgeProps> };
export type EdgeTypesWrapped = { [key: string]: MemoExoticComponent<ComponentType<WrapEdgeProps>> };
export type FitView = (fitViewOptions?: FitViewOptions) => void;