refactor(rollup): treeshakable

nocss/package.json

@@ -1,7 +1,7 @@
 {
   "internal": true,
   "type": "module",
-  "main": "../dist/nocss/ReactFlow-nocss.js",
+  "main": "../dist/nocss/index.js",
-  "module": "../dist/nocss/ReactFlow-nocss.js",
+  "module": "../dist/nocss/index.js",
   "types": "../dist/nocss/index.d.ts"
 }

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",

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",
+  "main": "dist/esm/index.js",
-  "module": "dist/ReactFlow.js",
+  "module": "dist/esm/index.js",
-  "types": "dist/index.d.ts",
+  "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",

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 } = {}) => ({
+export const baseConfig = ({ outputDir = 'dist/esm', injectCSS = true } = {}) => ({
-  input: 'src/index.ts',
+  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,
       }),
     ]

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<ControlProps> = ({
   const store = useStoreApi();
   const [isVisible, setIsVisible] = useState<boolean>(false);
   const isInteractive = useStore(isInteractiveSelector);
-  const { zoomIn, zoomOut, fitView } = useViewportHelper();
+  const { zoomIn, zoomOut, fitView } = useReactFlow();
 
   const mapClasses = cc(['react-flow__controls', className]);
 

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 css from '../../style.css';
-import '../../theme-default.css';
+import theme from '../../theme-default.css';
-import { useNodeOrEdgeTypes } from './utils';
+
+if (__INJECT_STYLES__) {
+  injectStyle(css as unknown as string);
+  injectStyle(theme as unknown as string);
+}
 
 const defaultNodeTypes = {
   input: InputNode,

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));
+}

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;

src/d3-color-alias.js

@@ -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;