chore: setup monorepo using preconstruct

.babelrc

@@ -1,13 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false
-      }
-    ],
-    "@babel/preset-typescript",
-    "@babel/preset-react"
-  ],
-  "plugins": ["@babel/plugin-transform-runtime"]
-}

.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-  "typescript.tsdk": "node_modules/typescript/lib"
-}

README.md

@@ -3,19 +3,20 @@
 
 <div align="center">
 
-  ![GitHub License MIT](https://img.shields.io/github/license/wbkd/react-flow?color=%23FF0072)
+![GitHub License MIT](https://img.shields.io/github/license/wbkd/react-flow?color=%23FF0072)
-  ![npm downloads](https://img.shields.io/npm/dt/react-flow-renderer?color=%23FF0072&label=downloads)
+![npm downloads](https://img.shields.io/npm/dt/react-flow-renderer?color=%23FF0072&label=downloads)
-  ![GitHub Repo stars](https://img.shields.io/github/stars/wbkd/react-flow?color=%23FF0072)
+![GitHub Repo stars](https://img.shields.io/github/stars/wbkd/react-flow?color=%23FF0072)
-  ![GitHub release (latest by date)](https://img.shields.io/github/v/release/wbkd/react-flow?color=%23FF0072)
+![GitHub release (latest by date)](https://img.shields.io/github/v/release/wbkd/react-flow?color=%23FF0072)
+
+### Wire Your Ideas With React Flow!
 
-### Wire Your Ideas With React Flow!  
 A highly customizable React component for building interactive graphs and node-based editors.
 
 [🚀 Getting Started](https://reactflow.dev/docs/getting-started/installation) | [📖 Documentation](https://reactflow.dev/docs/api/react-flow-props) | [📺 Examples](https://reactflow.dev/docs/examples/overview) | [☎️ Discord](https://discord.gg/RVmnytFmGW) | [💎 React Flow Pro](https://pro.reactflow.dev/pricing)
-  
+
 </div>
 
-----
+---
 
 ## Key Features
 
@@ -63,21 +64,11 @@ function Flow({ nodes, edges, onNodesChange, onEdgesChange, onConnect }) {
 }
 ```
 
-Before you start you need to build the project using `npm run build`.  Then install the React Flow dependencies via `npm install` and the ones of the examples `cd example && npm install`.
+## Development
 
-If you want to contribute or develop custom features the easiest way is to start the dev server:
+Before you can start developing please make sure that you have yarn classic installed (`npm i -g yarn`). Then install the dependencies using yarn: `yarn`.
 
-```sh
+For local development, you can use `yarn dev`. This will run preconstruct and build all the packages.
-npm start
-```
-
-and the example app via:
-
-```sh
-cd example && npm start 
-```
-
-The example app serves the content of the `example` folder and watches changes inside the `src` folder. The examples are using the source of the `src` folder.
 
 ## Testing
 
@@ -91,24 +82,24 @@ npm run test
 
 React Flow is developed and maintained by [webkid](https://webkid.io), a web development agency with focus on data driven applications from Berlin. If you need help or want to talk to us about a collaboration, feel free to contact us:
 
-* Moritz Klack • [Twitter](https://twitter.com/moklick) • [Github](https://github.com/moklick)
+- Moritz Klack • [Twitter](https://twitter.com/moklick) • [Github](https://github.com/moklick)
-* Christopher Möller • [Twitter](https://twitter.com/chrtze) • [Github](https://github.com/chrtze)
+- Christopher Möller • [Twitter](https://twitter.com/chrtze) • [Github](https://github.com/chrtze)
 
 You can also use our [contact form](https://pro.reactflow.dev/contact) or join the [React Flow Discord Server](https://discord.gg/Bqt6xrs).
 
 ## Community Packages
 
-* [useUndoable](https://github.com/Infinium8/useUndoable) - Hook for undo/redo functionality with an explicit React Flow example
+- [useUndoable](https://github.com/Infinium8/useUndoable) - Hook for undo/redo functionality with an explicit React Flow example
-* [react-flow-smart-edge](https://github.com/tisoap/react-flow-smart-edge) - Custom edge that doesn't intersect with nodes
+- [react-flow-smart-edge](https://github.com/tisoap/react-flow-smart-edge) - Custom edge that doesn't intersect with nodes
-* [Feliz.ReactFlow](https://github.com/tforkmann/Feliz.ReactFlow) - Feliz React Bindings for React Flow
+- [Feliz.ReactFlow](https://github.com/tforkmann/Feliz.ReactFlow) - Feliz React Bindings for React Flow
 
 ## Credits
 
 React Flow was initially developed for [datablocks](https://datablocks.pro), a graph-based editor for transforming, analyzing and visualizing data in your browser. Under the hood, React Flow depends on these great libraries:
 
-* [d3-zoom](https://github.com/d3/d3-zoom) - used for zoom, pan and drag interactions with the graph canvas
+- [d3-zoom](https://github.com/d3/d3-zoom) - used for zoom, pan and drag interactions with the graph canvas
-* [d3-drag](https://github.com/d3/d3-drag) - used for making the nodes draggable
+- [d3-drag](https://github.com/d3/d3-drag) - used for making the nodes draggable
-* [zustand](https://github.com/pmndrs/zustand) - internal state management
+- [zustand](https://github.com/pmndrs/zustand) - internal state management
 
 ## License
 

babel.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  presets: [
+    '@babel/preset-react',
+    '@babel/preset-typescript',
+    '@babel/preset-env',
+  ],
+};

package.json

@@ -1,103 +1,32 @@
 {
-  "name": "react-flow-renderer",
+  "name": "react-flow",
-  "version": "10.3.8",
+  "version": "1.0.0",
-  "engines": {
+  "description": "A highly customizable React library for building node-based editors and interactive flow charts",
-    "node": ">=14"
+  "repository": "git@github.com:wbkd/react-flow.git",
-  },
-  "main": "dist/umd/index.js",
-  "module": "dist/esm/index.js",
-  "jsdelivr": "dist/umd/index.js",
-  "unpkg": "dist/umd/index.js",
-  "exports": {
-    ".": {
-      "import": "./dist/esm/index.js",
-      "require": "./dist/umd/index.js"
-    },
-    "./nocss": {
-      "import": "./dist/nocss/esm/index.js",
-      "require": "./dist/nocss/umd/index.js"
-    },
-    "./package.json": "./package.json",
-    "./dist/style.css": "./dist/style.css",
-    "./dist/theme-default.css": "./dist/theme-default.css"
-  },
-  "sideEffects": false,
-  "types": "dist/esm/index.d.ts",
   "license": "MIT",
-  "repository": {
+  "workspaces": [
-    "type": "git",
+    "packages/*",
-    "url": "https://github.com/wbkd/react-flow.git"
+    "examples/*"
-  },
+  ],
+  "private": true,
   "scripts": {
-    "build": "rimraf dist && rollup -c --environment NODE_ENV:production && npm run css",
+    "dev": "preconstruct watch",
-    "build:test": "rimraf dist && rollup -c --environment NODE_ENV:test && npm run css",
+    "postinstall": "preconstruct dev",
-    "start": "rollup -w -c",
+    "build": "preconstruct build"
-    "start:examples": "cd example && npm start",
-    "build:examples": "cd example && npm run build",
-    "start:testserver": "npm run build:test && npm run start:examples",
-    "build:dev": "npm install && npm run build && cd example && npm install && npm run build",
-    "dev:wait": "start-server-and-test start:testserver http-get://localhost:3000",
-    "test": "cross-env BROWSER=none npm run dev:wait test:chrome",
-    "test:chrome": "cypress run --browser chrome --headless",
-    "test:firefox": "cypress run --browser firefox",
-    "test:all": "npm run test:chrome && npm run test:firefox",
-    "cypress": "npm run dev:wait cy:open",
-    "cy:open": "cypress open",
-    "release": "npm run test && release-it",
-    "release:notest": "release-it",
-    "release:next": "release-it --preRelease=next --no-git",
-    "css": "postcss src/*.css --dir dist"
   },
   "dependencies": {
-    "@babel/runtime": "^7.18.0",
+    "@babel/core": "^7.18.2",
-    "classcat": "^5.0.3",
+    "@babel/preset-env": "^7.18.2",
-    "d3-drag": "^3.0.0",
-    "d3-selection": "^3.0.0",
-    "d3-zoom": "^3.0.0",
-    "zustand": "^3.7.2"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.18.0",
-    "@babel/plugin-transform-runtime": "^7.18.0",
-    "@babel/preset-env": "^7.18.0",
     "@babel/preset-react": "^7.17.12",
     "@babel/preset-typescript": "^7.17.12",
-    "@rollup/plugin-babel": "^5.3.1",
+    "@preconstruct/cli": "^2.1.8",
-    "@rollup/plugin-commonjs": "^22.0.0",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@rollup/plugin-replace": "^4.0.0",
-    "@types/d3": "^7.4.0",
-    "@types/react": "^18.0.9",
-    "@types/react-dom": "^18.0.4",
-    "@types/resize-observer-browser": "^0.1.7",
-    "autoprefixer": "^10.4.7",
-    "babel-preset-react-app": "^10.0.1",
-    "cross-env": "^7.0.3",
-    "cypress": "^9.6.1",
-    "postcss": "^8.4.14",
-    "postcss-cli": "^9.1.0",
-    "postcss-nested": "^5.0.6",
-    "prettier": "^2.6.2",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
-    "release-it": "^15.0.0",
+    "typescript": "^4.7.4"
-    "rimraf": "^3.0.2",
-    "rollup": "^2.74.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.4"
   },
-  "peerDependencies": {
+  "preconstruct": {
-    "react": "16 || 17 || 18",
+    "packages": [
-    "react-dom": "16 || 17 || 18"
+      "packages/*"
-  },
+    ]
-  "files": [
+  }
-    "dist",
-    "nocss"
-  ]
 }

packages/core/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@react-flow/core",
+  "version": "11.0.0",
+  "engines": {
+    "node": ">=14"
+  },
+  "main": "dist/react-flow-core.cjs.js",
+  "module": "dist/react-flow-core.esm.js",
+  "sideEffects": false,
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wbkd/react-flow.git"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.18.0",
+    "classcat": "^5.0.3",
+    "d3-drag": "^3.0.0",
+    "d3-selection": "^3.0.0",
+    "d3-zoom": "^3.0.0",
+    "zustand": "^3.7.2"
+  },
+  "peerDependencies": {
+    "react": "16 || 17 || 18",
+    "react-dom": "16 || 17 || 18"
+  },
+  "files": [
+    "dist",
+    "nocss"
+  ],
+  "devDependencies": {
+    "@types/react": "^18.0.15"
+  }
+}