diff --git a/example/package-lock.json b/example/package-lock.json index 062b401a..965e73fd 100644 --- a/example/package-lock.json +++ b/example/package-lock.json @@ -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, diff --git a/example/package.json b/example/package.json index 31dd29f7..ac35ccfb 100644 --- a/example/package.json +++ b/example/package.json @@ -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" } } diff --git a/example/src/index.tsx b/example/src/index.tsx index 076499bf..5786e477 100644 --- a/example/src/index.tsx +++ b/example/src/index.tsx @@ -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(
@@ -195,6 +199,5 @@ ReactDOM.render( } /> ))} - , - document.getElementById('root') + ); diff --git a/package-lock.json b/package-lock.json index c0779022..b076b9d9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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": { diff --git a/package.json b/package.json index 86cd7f6a..93352323 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/additional-components/Controls/index.tsx b/src/additional-components/Controls/index.tsx index b7f4698c..9b711d23 100644 --- a/src/additional-components/Controls/index.tsx +++ b/src/additional-components/Controls/index.tsx @@ -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 = ({ children, className, ...rest }) => ( +export const ControlButton: FC> = ({ children, className, ...rest }) => ( @@ -20,7 +20,7 @@ export const ControlButton: FC = ({ children, className, ... const isInteractiveSelector = (s: ReactFlowState) => s.nodesDraggable && s.nodesConnectable && s.elementsSelectable; -const Controls: FC = ({ +const Controls: FC> = ({ style, showZoom = true, showFitView = true, diff --git a/src/additional-components/ReactFlowProvider/index.tsx b/src/additional-components/ReactFlowProvider/index.tsx index 122c83cd..3f765eed 100644 --- a/src/additional-components/ReactFlowProvider/index.tsx +++ b/src/additional-components/ReactFlowProvider/index.tsx @@ -2,7 +2,9 @@ import React, { FC, PropsWithChildren } from 'react'; import { Provider, createStore } from '../../store'; -const ReactFlowProvider: FC> = ({ children }) => {children}; +const ReactFlowProvider: FC> = ({ children }) => ( + {children} +); ReactFlowProvider.displayName = 'ReactFlowProvider'; diff --git a/src/components/Edges/EdgeText.tsx b/src/components/Edges/EdgeText.tsx index 32650b9d..27e61e69 100644 --- a/src/components/Edges/EdgeText.tsx +++ b/src/components/Edges/EdgeText.tsx @@ -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 = ({ +const EdgeText: FC> = ({ x, y, label, diff --git a/src/components/Edges/wrapEdge.tsx b/src/components/Edges/wrapEdge.tsx index f799eed8..c6ef326f 100644 --- a/src/components/Edges/wrapEdge.tsx +++ b/src/components/Edges/wrapEdge.tsx @@ -140,7 +140,7 @@ export default (EdgeComponent: ComponentType) => { const handleEdgeUpdater = useCallback( (event: React.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; diff --git a/src/components/Nodes/wrapNode.tsx b/src/components/Nodes/wrapNode.tsx index b3f9bb21..6b572522 100644 --- a/src/components/Nodes/wrapNode.tsx +++ b/src/components/Nodes/wrapNode.tsx @@ -232,6 +232,7 @@ export default (NodeComponent: ComponentType) => { ]); return ( + // @ts-ignore + {/* @ts-ignore */} 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), straight: wrapEdge((edgeTypes.bezier || StraightEdge) as ComponentType), step: wrapEdge((edgeTypes.step || StepEdge) as ComponentType), @@ -25,8 +26,8 @@ export function createEdgeTypes(edgeTypes: EdgeTypes): EdgeTypes { simplebezier: wrapEdge((edgeTypes.simplebezier || SimpleBezierEdge) as ComponentType), }; - 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); diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx index 8d3c2107..01580e77 100644 --- a/src/container/GraphView/index.tsx +++ b/src/container/GraphView/index.tsx @@ -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 { - nodeTypes: NodeTypes; - edgeTypes: EdgeTypes; +export interface GraphViewProps + extends Omit { + nodeTypes: NodeTypesWrapped; + edgeTypes: EdgeTypesWrapped; selectionKeyCode: KeyCode | null; deleteKeyCode: KeyCode | null; multiSelectionKeyCode: KeyCode | null; diff --git a/src/container/NodeRenderer/index.tsx b/src/container/NodeRenderer/index.tsx index 663458d3..5c36519d 100644 --- a/src/container/NodeRenderer/index.tsx +++ b/src/container/NodeRenderer/index.tsx @@ -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; diff --git a/src/container/NodeRenderer/utils.ts b/src/container/NodeRenderer/utils.ts index c656d74a..0683279a 100644 --- a/src/container/NodeRenderer/utils.ts +++ b/src/container/NodeRenderer/utils.ts @@ -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), default: wrapNode((nodeTypes.default || DefaultNode) as ComponentType), output: wrapNode((nodeTypes.output || OutputNode) as ComponentType), group: wrapNode((nodeTypes.group || GroupNode) as ComponentType), }; - 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); diff --git a/src/container/ReactFlow/Wrapper.tsx b/src/container/ReactFlow/Wrapper.tsx index 43aac450..23414ec4 100644 --- a/src/container/ReactFlow/Wrapper.tsx +++ b/src/container/ReactFlow/Wrapper.tsx @@ -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> = ({ children }) => { let isWrapped = true; try { diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx index 0a133393..866ca2e1 100644 --- a/src/container/ReactFlow/index.tsx +++ b/src/container/ReactFlow/index.tsx @@ -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( }, 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( onNodeDragStart={onNodeDragStart} onNodeDrag={onNodeDrag} onNodeDragStop={onNodeDragStop} - nodeTypes={nodeTypesParsed} - edgeTypes={edgeTypesParsed} + nodeTypes={nodeTypesWrapped} + edgeTypes={edgeTypesWrapped} connectionLineType={connectionLineType} connectionLineStyle={connectionLineStyle} connectionLineComponent={connectionLineComponent} diff --git a/src/container/ReactFlow/utils.ts b/src/container/ReactFlow/utils.ts index 42e8becb..d9ae5008 100644 --- a/src/container/ReactFlow/utils.ts +++ b/src/container/ReactFlow/utils.ts @@ -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(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]; diff --git a/src/types/edges.ts b/src/types/edges.ts index a5e32b9c..d8e6813a 100644 --- a/src/types/edges.ts +++ b/src/types/edges.ts @@ -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 { 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 { 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; +export type ConnectionLineComponent = ComponentType; export type OnEdgeUpdateFunc = (oldEdge: Edge, newConnection: Connection) => void; diff --git a/src/types/general.ts b/src/types/general.ts index 70bafaa9..a579ce33 100644 --- a/src/types/general.ts +++ b/src/types/general.ts @@ -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 }; +export type NodeTypesWrapped = { [key: string]: MemoExoticComponent> }; +export type EdgeTypes = { [key: string]: ComponentType }; +export type EdgeTypesWrapped = { [key: string]: MemoExoticComponent> }; export type FitView = (fitViewOptions?: FitViewOptions) => void;