refactor(repo): use turbo + rollup + vite
This commit is contained in:
moklick
@@ -0,0 +1,4 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
extends: ['@reactflow/eslint-config'],
|
||||
};
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@reactflow/background",
|
||||
"version": "11.0.0-next.3",
|
||||
"version": "11.0.0-next.4",
|
||||
"description": "Background component with different variants for React Flow",
|
||||
"keywords": [
|
||||
"react",
|
||||
@@ -13,10 +13,18 @@
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"main": "dist/reactflow-background.cjs.js",
|
||||
"module": "dist/reactflow-background.esm.js",
|
||||
"types": "dist/reactflow-background.cjs.d.ts",
|
||||
"source": "src/index.tsx",
|
||||
"main": "dist/umd/index.js",
|
||||
"module": "dist/esm/index.js",
|
||||
"types": "dist/esm/index.d.ts",
|
||||
"sideEffects": false,
|
||||
"scripts": {
|
||||
"dev": "rollup --config node:@reactflow/rollup-config --watch",
|
||||
"build": "rollup --config node:@reactflow/rollup-config --environment NODE_ENV:production",
|
||||
"lint": "eslint --ext .js,.jsx,.ts,.tsx src",
|
||||
"typecheck": "tsc --noEmit",
|
||||
"clean": "rimraf dist .turbo"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
@@ -32,10 +40,17 @@
|
||||
"classcat": "^5.0.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"tsconfig": "*"
|
||||
"@reactflow/eslint-config": "workspace:^0.0.0",
|
||||
"@reactflow/rollup-config": "workspace:*",
|
||||
"@reactflow/tsconfig": "workspace:*",
|
||||
"@types/node": "^18.7.16",
|
||||
"@types/react": "^18.0.19"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18",
|
||||
"react-dom": ">=18"
|
||||
},
|
||||
"rollup": {
|
||||
"name": "ReactFlowBackground"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,6 @@
|
||||
{
|
||||
"extends": "tsconfig/react.json",
|
||||
"extends": "@reactflow/tsconfig/react.json",
|
||||
"display": "@reactflow/background",
|
||||
"compilerOptions": {
|
||||
"composite": true
|
||||
},
|
||||
"include": ["**/*.ts", "**/*.tsx"],
|
||||
"exclude": ["**/node_modules", "dist/*"],
|
||||
"references": [{ "path": "../core/tsconfig.json" }]
|
||||
"include": ["src"],
|
||||
"exclude": ["node_modules", "dist"]
|
||||
}
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
extends: ['@reactflow/eslint-config'],
|
||||
};
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@reactflow/controls",
|
||||
"version": "11.0.0-next.3",
|
||||
"version": "11.0.0-next.4",
|
||||
"description": "Component to control the viewport of a React Flow instance",
|
||||
"keywords": [
|
||||
"react",
|
||||
@@ -13,9 +13,10 @@
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"main": "dist/reactflow-controls.cjs.js",
|
||||
"module": "dist/reactflow-controls.esm.js",
|
||||
"types": "dist/reactflow-controls.cjs.d.ts",
|
||||
"source": "src/index.tsx",
|
||||
"main": "dist/umd/index.js",
|
||||
"module": "dist/esm/index.js",
|
||||
"types": "dist/esm/index.d.ts",
|
||||
"sideEffects": false,
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
@@ -24,7 +25,12 @@
|
||||
"directory": "packages/controls"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "postcss src/*.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/*.css --config ../../postcss-config/index.js --dir dist",
|
||||
"css-watch": "pnpm css --watch",
|
||||
"lint": "eslint --ext .js,.jsx,.ts,.tsx src",
|
||||
"typecheck": "tsc --noEmit"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
@@ -39,12 +45,16 @@
|
||||
"react-dom": ">=18"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^10.4.8",
|
||||
"postcss": "^8.4.16",
|
||||
"postcss-cli": "^10.0.0",
|
||||
"postcss-combine-duplicated-selectors": "^10.0.3",
|
||||
"postcss-import": "^14.1.0",
|
||||
"postcss-nested": "^5.0.6",
|
||||
"tsconfig": "*"
|
||||
"@reactflow/eslint-config": "workspace:^0.0.0",
|
||||
"@reactflow/rollup-config": "workspace:*",
|
||||
"@reactflow/tsconfig": "workspace:*",
|
||||
"@types/node": "^18.7.16",
|
||||
"@types/react": "^18.0.19"
|
||||
},
|
||||
"rollup": {
|
||||
"globals": {
|
||||
"classcat": "cc"
|
||||
},
|
||||
"name": "ReactFlowControls"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,6 @@
|
||||
{
|
||||
"extends": "tsconfig/react.json",
|
||||
"extends": "@reactflow/tsconfig/react.json",
|
||||
"display": "@reactflow/background",
|
||||
"compilerOptions": {
|
||||
"composite": true
|
||||
},
|
||||
"include": ["**/*.ts", "**/*.tsx"],
|
||||
"exclude": ["**/node_modules", "dist/*"],
|
||||
"references": [{ "path": "../core/tsconfig.json" }]
|
||||
"exclude": ["node_modules", "dist"]
|
||||
}
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
extends: ['@reactflow/eslint-config'],
|
||||
};
|
||||
+30
-13
@@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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"]
|
||||
}
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
extends: ['@reactflow/eslint-config'],
|
||||
};
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@reactflow/minimap",
|
||||
"version": "11.0.0-next.3",
|
||||
"version": "11.0.0-next.4",
|
||||
"description": "Minimap component for React Flow.",
|
||||
"keywords": [
|
||||
"react",
|
||||
@@ -13,9 +13,10 @@
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"main": "dist/reactflow-minimap.cjs.js",
|
||||
"module": "dist/reactflow-minimap.esm.js",
|
||||
"types": "dist/reactflow-minimap.cjs.d.ts",
|
||||
"source": "src/index.tsx",
|
||||
"main": "dist/umd/index.js",
|
||||
"module": "dist/esm/index.js",
|
||||
"types": "dist/esm/index.d.ts",
|
||||
"sideEffects": false,
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
@@ -27,7 +28,12 @@
|
||||
"directory": "packages/minimap"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "postcss src/*.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/*.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",
|
||||
@@ -40,12 +46,19 @@
|
||||
"react-dom": ">=18"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^10.4.8",
|
||||
"postcss": "^8.4.16",
|
||||
"postcss-cli": "^10.0.0",
|
||||
"postcss-combine-duplicated-selectors": "^10.0.3",
|
||||
"postcss-import": "^14.1.0",
|
||||
"postcss-nested": "^5.0.6",
|
||||
"tsconfig": "*"
|
||||
"@reactflow/eslint-config": "workspace:^0.0.0",
|
||||
"@reactflow/rollup-config": "workspace:*",
|
||||
"@reactflow/tsconfig": "workspace:*",
|
||||
"@types/node": "^18.7.16",
|
||||
"@types/react": "^18.0.19",
|
||||
"react": "^18.2.0"
|
||||
},
|
||||
"rollup": {
|
||||
"globals": {
|
||||
"zustand": "Zustand",
|
||||
"zustand/shallow": "zustandShallow",
|
||||
"classcat": "cc"
|
||||
},
|
||||
"name": "ReactFlowMinimap"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,6 @@
|
||||
{
|
||||
"extends": "tsconfig/react.json",
|
||||
"extends": "@reactflow/tsconfig/react.json",
|
||||
"display": "@reactflow/minimap",
|
||||
"compilerOptions": {
|
||||
"composite": true
|
||||
},
|
||||
"include": ["**/*.ts", "**/*.tsx"],
|
||||
"exclude": ["**/node_modules", "dist/*"],
|
||||
"references": [{ "path": "../core/tsconfig.json" }]
|
||||
"exclude": ["node_modules", "dist"]
|
||||
}
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
extends: ['@reactflow/eslint-config'],
|
||||
};
|
||||
@@ -32,7 +32,7 @@ You can find more information in our [React Flow Pro FAQs](https://pro.reactflow
|
||||
|
||||
## Installation
|
||||
|
||||
The easiest way to get the latest version of React Flow is to install it via npm:
|
||||
The easiest way to get the latest version of React Flow is to install it via npm, yarn or pnpm:
|
||||
|
||||
```bash
|
||||
npm install reactflow
|
||||
@@ -63,16 +63,16 @@ function Flow({ nodes, edges, onNodesChange, onEdgesChange, onConnect }) {
|
||||
|
||||
## Development
|
||||
|
||||
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`.
|
||||
Before you can start developing please make sure that you have [pnpm](https://pnpm.io/) installed (`npm i -g pnpm`). Then install the dependencies using pnpm: `pnpm install`.
|
||||
|
||||
For local development, you can use `yarn dev`. This will run preconstruct and build all the packages.
|
||||
For local development, you can use `pnpm dev`.
|
||||
|
||||
## Testing
|
||||
|
||||
Testing is done with cypress. You can find the tests in the [`integration/flow`](/cypress/integration/flow) folder. In order to run the tests do:
|
||||
Testing is done with cypress. You can find the tests in the [`examples/cypress`](/examples/cypress/) folder. In order to run the tests do:
|
||||
|
||||
```sh
|
||||
npm run test
|
||||
pnpm test
|
||||
```
|
||||
|
||||
## Maintainers
|
||||
@@ -92,7 +92,7 @@ You can also use our [contact form](https://pro.reactflow.dev/contact) or join t
|
||||
|
||||
## 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:
|
||||
React Flow was initially developed for [datablocks](https://datablocks.pro), a graph-based editor for transforming, analyzing and visualizing data in the 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-drag](https://github.com/d3/d3-drag) - used for making the nodes draggable
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "reactflow",
|
||||
"version": "11.0.0-next.9",
|
||||
"version": "11.0.0-next.10",
|
||||
"description": "A highly customizable React library for building node-based editors and interactive flow charts",
|
||||
"keywords": [
|
||||
"react",
|
||||
@@ -13,9 +13,10 @@
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"main": "dist/reactflow.cjs.js",
|
||||
"module": "dist/reactflow.esm.js",
|
||||
"types": "dist/reactflow.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",
|
||||
"repository": {
|
||||
@@ -24,10 +25,14 @@
|
||||
"directory": "packages/reactflow"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "postcss src/*.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/*.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",
|
||||
"@reactflow/background": "workspace:*",
|
||||
"@reactflow/controls": "workspace:*",
|
||||
"@reactflow/core": "workspace:*",
|
||||
@@ -38,12 +43,19 @@
|
||||
"react-dom": ">=18"
|
||||
},
|
||||
"devDependencies": {
|
||||
"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": "*"
|
||||
"@reactflow/eslint-config": "workspace:^0.0.0",
|
||||
"@reactflow/rollup-config": "workspace:*",
|
||||
"@reactflow/tsconfig": "workspace:*",
|
||||
"@types/node": "^18.7.16",
|
||||
"@types/react": "^18.0.19"
|
||||
},
|
||||
"rollup": {
|
||||
"globals": {
|
||||
"@reactflow/background": "ReactFlowBackground",
|
||||
"@reactflow/controls": "ReactFlowControls",
|
||||
"@reactflow/core": "ReactFlowCore",
|
||||
"@reactflow/minimap": "ReactFlowMinimap"
|
||||
},
|
||||
"name": "ReactFlow"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,12 +1,6 @@
|
||||
{
|
||||
"extends": "tsconfig/react.json",
|
||||
"extends": "@reactflow/tsconfig/react.json",
|
||||
"display": "reactflow",
|
||||
"include": ["**/*.ts", "**/*.tsx"],
|
||||
"exclude": ["**/node_modules", "dist/*"],
|
||||
"references": [
|
||||
{ "path": "../background/tsconfig.json" },
|
||||
{ "path": "../controls/tsconfig.json" },
|
||||
{ "path": "../core/tsconfig.json" },
|
||||
{ "path": "../minimap/tsconfig.json" }
|
||||
]
|
||||
"exclude": ["node_modules", "dist"]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user