diff --git a/nocss/package.json b/nocss/package.json index 1b4862c6..237eeb31 100644 --- a/nocss/package.json +++ b/nocss/package.json @@ -1,7 +1,7 @@ { "internal": true, "type": "module", - "main": "../dist/nocss/ReactFlow-nocss.js", - "module": "../dist/nocss/ReactFlow-nocss.js", + "main": "../dist/nocss/index.js", + "module": "../dist/nocss/index.js", "types": "../dist/nocss/index.d.ts" } diff --git a/package-lock.json b/package-lock.json index afaeb4f3..ac755c55 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "react-flow-renderer", - "version": "10.0.0-next.46", + "version": "10.0.0-next.48", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "react-flow-renderer", - "version": "10.0.0-next.46", + "version": "10.0.0-next.48", "license": "MIT", "dependencies": { "@babel/runtime": "^7.16.7", @@ -22,7 +22,6 @@ "@babel/preset-env": "^7.16.11", "@babel/preset-react": "^7.16.7", "@babel/preset-typescript": "^7.16.7", - "@rollup/plugin-alias": "^3.1.9", "@rollup/plugin-babel": "^5.3.0", "@rollup/plugin-commonjs": "^21.0.1", "@rollup/plugin-node-resolve": "^13.1.3", @@ -42,7 +41,6 @@ "react-dom": "^17.0.2", "release-it": "^14.12.4", "rollup": "^2.66.1", - "rollup-plugin-bundle-size": "^1.0.3", "rollup-plugin-livereload": "^2.0.5", "rollup-plugin-postcss": "^4.0.2", "rollup-plugin-serve": "^1.1.0", @@ -2097,21 +2095,6 @@ "@octokit/openapi-types": "^11.2.0" } }, - "node_modules/@rollup/plugin-alias": { - "version": "3.1.9", - "resolved": "https://registry.npmjs.org/@rollup/plugin-alias/-/plugin-alias-3.1.9.tgz", - "integrity": "sha512-QI5fsEvm9bDzt32k39wpOwZhVzRcL5ydcffUHMyLVaVaLeC70I8TJZ17F1z1eMoLu4E/UOcH9BWVkKpIKdrfiw==", - "dev": true, - "dependencies": { - "slash": "^3.0.0" - }, - "engines": { - "node": ">=8.0.0" - }, - "peerDependencies": { - "rollup": "^1.20.0||^2.0.0" - } - }, "node_modules/@rollup/plugin-babel": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.0.tgz", @@ -4990,19 +4973,6 @@ "pend": "~1.2.0" } }, - "node_modules/figures": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/figures/-/figures-1.7.0.tgz", - "integrity": "sha1-y+Hjr/zxzUS4DK3+0o3Hk6lwHS4=", - "dev": true, - "dependencies": { - "escape-string-regexp": "^1.0.5", - "object-assign": "^4.1.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/fill-range": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", @@ -5372,18 +5342,6 @@ "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==", "dev": true }, - "node_modules/gzip-size": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-3.0.0.tgz", - "integrity": "sha1-VGGI6b3DN/Zzdy+BZgRks4nc5SA=", - "dev": true, - "dependencies": { - "duplexer": "^0.1.1" - }, - "engines": { - "node": ">=0.12.0" - } - }, "node_modules/has": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", @@ -5396,27 +5354,6 @@ "node": ">= 0.4.0" } }, - "node_modules/has-ansi": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz", - "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=", - "dev": true, - "dependencies": { - "ansi-regex": "^2.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/has-ansi/node_modules/ansi-regex": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/has-flag": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", @@ -6574,88 +6511,6 @@ "integrity": "sha1-5WqpTEyAVaFkBKBnS3jyFffI4ZQ=", "dev": true }, - "node_modules/maxmin": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/maxmin/-/maxmin-2.1.0.tgz", - "integrity": "sha1-TTsiCQPZXu5+t6x/qGTnLcCaMWY=", - "dev": true, - "dependencies": { - "chalk": "^1.0.0", - "figures": "^1.0.1", - "gzip-size": "^3.0.0", - "pretty-bytes": "^3.0.0" - }, - "engines": { - "node": ">=0.12" - } - }, - "node_modules/maxmin/node_modules/ansi-regex": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/maxmin/node_modules/ansi-styles": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", - "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/maxmin/node_modules/chalk": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", - "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", - "dev": true, - "dependencies": { - "ansi-styles": "^2.2.1", - "escape-string-regexp": "^1.0.2", - "has-ansi": "^2.0.0", - "strip-ansi": "^3.0.0", - "supports-color": "^2.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/maxmin/node_modules/pretty-bytes": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-3.0.1.tgz", - "integrity": "sha1-J9AAjXeAY6C0gRuzXHnxvV1fvM8=", - "dev": true, - "dependencies": { - "number-is-nan": "^1.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/maxmin/node_modules/strip-ansi": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", - "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", - "dev": true, - "dependencies": { - "ansi-regex": "^2.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/maxmin/node_modules/supports-color": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", - "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", - "dev": true, - "engines": { - "node": ">=0.8.0" - } - }, "node_modules/mdn-data": { "version": "2.0.14", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", @@ -6884,15 +6739,6 @@ "url": "https://github.com/fb55/nth-check?sponsor=1" } }, - "node_modules/number-is-nan": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", - "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", @@ -9038,71 +8884,6 @@ "fsevents": "~2.3.2" } }, - "node_modules/rollup-plugin-bundle-size": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/rollup-plugin-bundle-size/-/rollup-plugin-bundle-size-1.0.3.tgz", - "integrity": "sha512-aWj0Pvzq90fqbI5vN1IvUrlf4utOqy+AERYxwWjegH1G8PzheMnrRIgQ5tkwKVtQMDP0bHZEACW/zLDF+XgfXQ==", - "dev": true, - "dependencies": { - "chalk": "^1.1.3", - "maxmin": "^2.1.0" - } - }, - "node_modules/rollup-plugin-bundle-size/node_modules/ansi-regex": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/rollup-plugin-bundle-size/node_modules/ansi-styles": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", - "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/rollup-plugin-bundle-size/node_modules/chalk": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", - "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", - "dev": true, - "dependencies": { - "ansi-styles": "^2.2.1", - "escape-string-regexp": "^1.0.2", - "has-ansi": "^2.0.0", - "strip-ansi": "^3.0.0", - "supports-color": "^2.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/rollup-plugin-bundle-size/node_modules/strip-ansi": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", - "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", - "dev": true, - "dependencies": { - "ansi-regex": "^2.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/rollup-plugin-bundle-size/node_modules/supports-color": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", - "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", - "dev": true, - "engines": { - "node": ">=0.8.0" - } - }, "node_modules/rollup-plugin-livereload": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/rollup-plugin-livereload/-/rollup-plugin-livereload-2.0.5.tgz", @@ -12088,15 +11869,6 @@ "@octokit/openapi-types": "^11.2.0" } }, - "@rollup/plugin-alias": { - "version": "3.1.9", - "resolved": "https://registry.npmjs.org/@rollup/plugin-alias/-/plugin-alias-3.1.9.tgz", - "integrity": "sha512-QI5fsEvm9bDzt32k39wpOwZhVzRcL5ydcffUHMyLVaVaLeC70I8TJZ17F1z1eMoLu4E/UOcH9BWVkKpIKdrfiw==", - "dev": true, - "requires": { - "slash": "^3.0.0" - } - }, "@rollup/plugin-babel": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.0.tgz", @@ -14286,16 +14058,6 @@ "pend": "~1.2.0" } }, - "figures": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/figures/-/figures-1.7.0.tgz", - "integrity": "sha1-y+Hjr/zxzUS4DK3+0o3Hk6lwHS4=", - "dev": true, - "requires": { - "escape-string-regexp": "^1.0.5", - "object-assign": "^4.1.0" - } - }, "fill-range": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", @@ -14559,15 +14321,6 @@ "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==", "dev": true }, - "gzip-size": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-3.0.0.tgz", - "integrity": "sha1-VGGI6b3DN/Zzdy+BZgRks4nc5SA=", - "dev": true, - "requires": { - "duplexer": "^0.1.1" - } - }, "has": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", @@ -14577,23 +14330,6 @@ "function-bind": "^1.1.1" } }, - "has-ansi": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz", - "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=", - "dev": true, - "requires": { - "ansi-regex": "^2.0.0" - }, - "dependencies": { - "ansi-regex": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true - } - } - }, "has-flag": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", @@ -15463,69 +15199,6 @@ "integrity": "sha1-5WqpTEyAVaFkBKBnS3jyFffI4ZQ=", "dev": true }, - "maxmin": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/maxmin/-/maxmin-2.1.0.tgz", - "integrity": "sha1-TTsiCQPZXu5+t6x/qGTnLcCaMWY=", - "dev": true, - "requires": { - "chalk": "^1.0.0", - "figures": "^1.0.1", - "gzip-size": "^3.0.0", - "pretty-bytes": "^3.0.0" - }, - "dependencies": { - "ansi-regex": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true - }, - "ansi-styles": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", - "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", - "dev": true - }, - "chalk": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", - "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", - "dev": true, - "requires": { - "ansi-styles": "^2.2.1", - "escape-string-regexp": "^1.0.2", - "has-ansi": "^2.0.0", - "strip-ansi": "^3.0.0", - "supports-color": "^2.0.0" - } - }, - "pretty-bytes": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-3.0.1.tgz", - "integrity": "sha1-J9AAjXeAY6C0gRuzXHnxvV1fvM8=", - "dev": true, - "requires": { - "number-is-nan": "^1.0.0" - } - }, - "strip-ansi": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", - "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", - "dev": true, - "requires": { - "ansi-regex": "^2.0.0" - } - }, - "supports-color": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", - "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", - "dev": true - } - } - }, "mdn-data": { "version": "2.0.14", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", @@ -15688,12 +15361,6 @@ "boolbase": "^1.0.0" } }, - "number-is-nan": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", - "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", - "dev": true - }, "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", @@ -17221,58 +16888,6 @@ "fsevents": "~2.3.2" } }, - "rollup-plugin-bundle-size": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/rollup-plugin-bundle-size/-/rollup-plugin-bundle-size-1.0.3.tgz", - "integrity": "sha512-aWj0Pvzq90fqbI5vN1IvUrlf4utOqy+AERYxwWjegH1G8PzheMnrRIgQ5tkwKVtQMDP0bHZEACW/zLDF+XgfXQ==", - "dev": true, - "requires": { - "chalk": "^1.1.3", - "maxmin": "^2.1.0" - }, - "dependencies": { - "ansi-regex": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true - }, - "ansi-styles": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", - "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", - "dev": true - }, - "chalk": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", - "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", - "dev": true, - "requires": { - "ansi-styles": "^2.2.1", - "escape-string-regexp": "^1.0.2", - "has-ansi": "^2.0.0", - "strip-ansi": "^3.0.0", - "supports-color": "^2.0.0" - } - }, - "strip-ansi": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", - "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", - "dev": true, - "requires": { - "ansi-regex": "^2.0.0" - } - }, - "supports-color": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", - "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", - "dev": true - } - } - }, "rollup-plugin-livereload": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/rollup-plugin-livereload/-/rollup-plugin-livereload-2.0.5.tgz", diff --git a/package.json b/package.json index 2d479312..79f09ec4 100644 --- a/package.json +++ b/package.json @@ -1,13 +1,13 @@ { "name": "react-flow-renderer", - "version": "10.0.0-next.46", + "version": "10.0.0-next.48", "engines": { "node": ">=12" }, "type": "module", - "main": "dist/ReactFlow.js", - "module": "dist/ReactFlow.js", - "types": "dist/index.d.ts", + "main": "dist/esm/index.js", + "module": "dist/esm/index.js", + "types": "dist/esm/index.d.ts", "license": "MIT", "repository": { "type": "git", @@ -45,7 +45,6 @@ "@babel/preset-env": "^7.16.11", "@babel/preset-react": "^7.16.7", "@babel/preset-typescript": "^7.16.7", - "@rollup/plugin-alias": "^3.1.9", "@rollup/plugin-babel": "^5.3.0", "@rollup/plugin-commonjs": "^21.0.1", "@rollup/plugin-node-resolve": "^13.1.3", @@ -65,7 +64,6 @@ "react-dom": "^17.0.2", "release-it": "^14.12.4", "rollup": "^2.66.1", - "rollup-plugin-bundle-size": "^1.0.3", "rollup-plugin-livereload": "^2.0.5", "rollup-plugin-postcss": "^4.0.2", "rollup-plugin-serve": "^1.1.0", diff --git a/rollup.config.js b/rollup.config.js index f77e8598..a1240555 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -2,9 +2,7 @@ import resolve from '@rollup/plugin-node-resolve'; import commonjs from '@rollup/plugin-commonjs'; import babel from '@rollup/plugin-babel'; import postcss from 'rollup-plugin-postcss'; -import bundleSize from 'rollup-plugin-bundle-size'; import replace from '@rollup/plugin-replace'; -import alias from '@rollup/plugin-alias'; import svgr from '@svgr/rollup'; import typescript from 'rollup-plugin-typescript2'; import { DEFAULT_EXTENSIONS as DEFAULT_BABEL_EXTENSIONS } from '@babel/core'; @@ -16,8 +14,18 @@ const isProd = process.env.NODE_ENV === 'production'; const isTesting = process.env.NODE_ENV === 'testing'; const processEnv = isProd || isTesting ? 'production' : 'development'; -export const baseConfig = ({ outputFile = pkg.module, injectCSS = true } = {}) => ({ - input: 'src/index.ts', +export const baseConfig = ({ outputDir = 'dist/esm', injectCSS = true } = {}) => ({ + input: [ + 'src/index.ts', + 'src/additional-components/Controls/index.tsx', + 'src/additional-components/Background/index.tsx', + 'src/additional-components/MiniMap/index.tsx', + 'src/hooks/useReactFlow.ts', + 'src/hooks/useNodes.ts', + 'src/hooks/useEdges.ts', + 'src/hooks/useViewport.ts', + 'src/hooks/useUpdateNodeInternals.ts', + ], external: [ 'react', 'react-dom', @@ -36,25 +44,21 @@ export const baseConfig = ({ outputFile = pkg.module, injectCSS = true } = {}) = } }, output: { - file: outputFile, + dir: outputDir, format: 'esm', sourcemap: true, - exports: 'named', }, plugins: [ - alias({ - entries: [{ find: 'd3-color', replacement: __dirname + '/src/d3-color-alias' }], - }), replace({ __ENV__: JSON.stringify(processEnv), __REACT_FLOW_VERSION__: JSON.stringify(pkg.version), + __INJECT_STYLES__: injectCSS, preventAssignment: true, }), - bundleSize(), postcss({ minimize: isProd, - inject: injectCSS, + inject: false, }), svgr(), resolve(), @@ -77,7 +81,7 @@ export default isProd && !isTesting ? [ baseConfig(), baseConfig({ - outputFile: 'dist/nocss/ReactFlow-nocss.js', + outputDir: 'dist/nocss', injectCSS: false, }), ] diff --git a/src/additional-components/Controls/index.tsx b/src/additional-components/Controls/index.tsx index bcf08c67..2e931582 100644 --- a/src/additional-components/Controls/index.tsx +++ b/src/additional-components/Controls/index.tsx @@ -2,7 +2,7 @@ import React, { memo, useCallback, FC, useEffect, useState } from 'react'; import cc from 'classcat'; import { useStore, useStoreApi } from '../../store'; -import useViewportHelper from '../../hooks/useViewportHelper'; +import useReactFlow from '../../hooks/useReactFlow'; import PlusIcon from '../../../assets/icons/plus.svg'; import MinusIcon from '../../../assets/icons/minus.svg'; @@ -36,7 +36,7 @@ const Controls: FC = ({ const store = useStoreApi(); const [isVisible, setIsVisible] = useState(false); const isInteractive = useStore(isInteractiveSelector); - const { zoomIn, zoomOut, fitView } = useViewportHelper(); + const { zoomIn, zoomOut, fitView } = useReactFlow(); const mapClasses = cc(['react-flow__controls', className]); diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx index 3514e16c..222075b9 100644 --- a/src/container/ReactFlow/index.tsx +++ b/src/container/ReactFlow/index.tsx @@ -12,6 +12,7 @@ import { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '../../compon import Attribution from '../../components/Attribution'; import { createEdgeTypes } from '../EdgeRenderer/utils'; import Wrapper from './Wrapper'; +import injectStyle, { useNodeOrEdgeTypes } from './utils'; import { ConnectionMode, @@ -23,9 +24,13 @@ import { EdgeTypes, } from '../../types'; -import '../../style.css'; -import '../../theme-default.css'; -import { useNodeOrEdgeTypes } from './utils'; +import css from '../../style.css'; +import theme from '../../theme-default.css'; + +if (__INJECT_STYLES__) { + injectStyle(css as unknown as string); + injectStyle(theme as unknown as string); +} const defaultNodeTypes = { input: InputNode, diff --git a/src/container/ReactFlow/utils.ts b/src/container/ReactFlow/utils.ts index ed088097..d431a60d 100644 --- a/src/container/ReactFlow/utils.ts +++ b/src/container/ReactFlow/utils.ts @@ -26,3 +26,14 @@ export function useNodeOrEdgeTypes(nodeOrEdgeTypes: any, createTypes: any): any return typesParsed; } + +export default function injectStyle(css: string): void { + if (!css || typeof document === 'undefined') return; + + const head = document.head || document.getElementsByTagName('head')[0]; + const style = document.createElement('style'); + + head.appendChild(style); + + style.appendChild(document.createTextNode(css)); +} diff --git a/src/custom.d.ts b/src/custom.d.ts index 764a78c6..41c48654 100644 --- a/src/custom.d.ts +++ b/src/custom.d.ts @@ -14,3 +14,4 @@ declare module '*.svg' { declare var __REACT_FLOW_VERSION__: string; declare var __ENV__: string; +declare var __INJECT_STYLES__: boolean; diff --git a/src/d3-color-alias.js b/src/d3-color-alias.js deleted file mode 100644 index 4a079d72..00000000 --- a/src/d3-color-alias.js +++ /dev/null @@ -1,10 +0,0 @@ -// this helps us to reduce bundle size by ~10kb. d3-color is not used but can't be treeshaked in this case. - -const obj = {}; -export const rgb = {}; -export const color = {}; -export const hsl = {}; -export const lab = {}; -export const hcl = {}; -export const cubehelix = {}; -export default obj;