refactor(repo): use turbo + rollup + vite

packages/core/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ['@reactflow/eslint-config'],
+};

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactflow/core",
-  "version": "11.0.0-next.3",
+  "version": "11.0.0-next.4",
   "description": "Core components and util functions of React Flow.",
   "keywords": [
     "react",
@@ -13,9 +13,10 @@
   "files": [
     "dist"
   ],
-  "main": "dist/reactflow-core.cjs.js",
-  "module": "dist/reactflow-core.esm.js",
-  "types": "dist/reactflow-core.cjs.d.ts",
+  "source": "src/index.ts",
+  "main": "dist/umd/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/esm/index.d.ts",
   "sideEffects": false,
   "license": "MIT",
   "publishConfig": {
@@ -27,10 +28,14 @@
     "directory": "packages/core"
   },
   "scripts": {
-    "build": "postcss src/styles/{base,style}.css --config ../../postcss.config.json --dir dist"
+    "dev": "concurrently \"rollup --config node:@reactflow/rollup-config --watch\" pnpm:css-watch",
+    "build": "rollup --config node:@reactflow/rollup-config --environment NODE_ENV:production && npm run css",
+    "css": "postcss src/styles/{base,style}.css --config ../../postcss-config/index.js --dir dist",
+    "css-watch": "pnpm css --watch",
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx src",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@babel/runtime": "^7.18.9",
     "@types/d3": "^7.4.0",
     "classcat": "^5.0.3",
     "d3-drag": "^3.0.0",
@@ -43,13 +48,25 @@
     "react-dom": ">=18"
   },
   "devDependencies": {
+    "@reactflow/eslint-config": "workspace:^0.0.0",
+    "@reactflow/rollup-config": "workspace:*",
+    "@reactflow/tsconfig": "workspace:*",
+    "@types/d3-drag": "^3.0.1",
+    "@types/d3-selection": "^3.0.3",
+    "@types/d3-zoom": "^3.0.1",
+    "@types/node": "^18.7.16",
     "@types/react": "^18.0.17",
-    "autoprefixer": "^10.4.8",
-    "postcss": "^8.4.14",
-    "postcss-cli": "^10.0.0",
-    "postcss-combine-duplicated-selectors": "^10.0.3",
-    "postcss-import": "^14.1.0",
-    "postcss-nested": "^5.0.6",
-    "tsconfig": "*"
+    "react": "^18.2.0",
+    "typescript": "^4.7.4"
+  },
+  "rollup": {
+    "globals": {
+      "classcat": "cc",
+      "d3-selection": "d3",
+      "d3-zoom": "d3",
+      "zustand": "zustand",
+      "zustand/shallow": "zustandShallow"
+    },
+    "name": "ReactFlowCore"
   }
 }

packages/core/src/container/EdgeRenderer/utils.ts

@@ -78,11 +78,11 @@ export function getHandle(bounds: HandleElement[], handleId: string | null): Han
 
   // there is no handleId when there are no multiple handles/ handles with ids
   // so we just pick the first one
-  let handle = null;
+  let handle: HandleElement | null = null;
   if (bounds.length === 1 || !handleId) {
     handle = bounds[0];
   } else if (handleId) {
-    handle = bounds.find((d) => d.id === handleId);
+    handle = bounds.find((d) => d.id === handleId)!;
   }
 
   return typeof handle === 'undefined' ? null : handle;

packages/core/src/hooks/useDrag/index.ts

@@ -131,7 +131,7 @@ function useDrag({
               }
             }
           })
-          .on('end', (event) => {
+          .on('end', (event: UseDragEvent) => {
             setDragging(false);
             if (dragItems.current) {
               const { updateNodePositions, nodeInternals, onNodeDragStop, onSelectionDragStop } = store.getState();

packages/core/src/styles/style.css

@@ -26,6 +26,7 @@
   border-width: 1px;
   border-style: solid;
   border-color: #1a192b;
+  background-color: white;
 
   &.selectable {
     &:hover {
@@ -42,8 +43,7 @@
 }
 
 .react-flow__node-group {
-  background: rgba(240, 240, 240, 0.25);
-  border-color: #1a192b;
+  background-color: rgba(240, 240, 240, 0.25);
 }
 
 .react-flow__nodesselection-rect,

packages/core/src/utils/graph.ts

@@ -171,13 +171,13 @@ export const getNodesInside = (
   const visibleNodes: Node[] = [];
 
   nodeInternals.forEach((node) => {
-    const { positionAbsolute, width, height, selectable = true } = node;
+    const { positionAbsolute = { x: 0, y: 0 }, width, height, selectable = true } = node;
 
     if (excludeNonSelectableNodes && !selectable) {
       return false;
     }
 
-    const nBox = rectToBox({ ...positionAbsolute!, width: width || 0, height: height || 0 });
+    const nBox = rectToBox({ ...positionAbsolute, width: width || 0, height: height || 0 });
     const xOverlap = Math.max(0, Math.min(rBox.x2, nBox.x2) - Math.max(rBox.x, nBox.x));
     const yOverlap = Math.max(0, Math.min(rBox.y2, nBox.y2) - Math.max(rBox.y, nBox.y));
     const overlappingArea = Math.ceil(xOverlap * yOverlap);

packages/core/tsconfig.json

@@ -1,9 +1,6 @@
 {
-  "extends": "tsconfig/react.json",
+  "extends": "@reactflow/tsconfig/react.json",
   "display": "@reactflow/core",
-  "compilerOptions": {
-    "composite": true
-  },
   "include": ["**/*.ts", "**/*.tsx"],
-  "exclude": ["**/node_modules", "dist/*"]
+  "exclude": ["node_modules", "dist"]
 }