From 0636d3954e9f47aea853ef95655921e52ddf4407 Mon Sep 17 00:00:00 2001 From: moklick Date: Sun, 17 Apr 2022 14:04:45 +0200 Subject: [PATCH 1/8] fix(build): repair nocss build --- nocss/package.json | 7 +++---- package.json | 4 ++++ rollup.config.js | 40 ++++++++++++++++++++++++++++------------ 3 files changed, 35 insertions(+), 16 deletions(-) diff --git a/nocss/package.json b/nocss/package.json index 237eeb31..4dad90b4 100644 --- a/nocss/package.json +++ b/nocss/package.json @@ -1,7 +1,6 @@ { "internal": true, - "type": "module", - "main": "../dist/nocss/index.js", - "module": "../dist/nocss/index.js", - "types": "../dist/nocss/index.d.ts" + "main": "../dist/nocss/umd/index.js", + "module": "../dist/nocss/esm/index.js", + "types": "../dist/nocss/esm/index.d.ts" } diff --git a/package.json b/package.json index 5df9481f..9ca8a054 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,10 @@ "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" }, "types": "dist/esm/index.d.ts", diff --git a/rollup.config.js b/rollup.config.js index f03126eb..845adf62 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -20,6 +20,18 @@ const defaultOutputOptions = { sourcemap: true, }; +const globals = { + react: 'React', + 'react-dom': 'ReactDOM', + classcat: 'cc', + 'd3-selection': 'd3', + 'd3-zoom': 'd3', + 'react-draggable': 'ReactDraggable', + zustand: 'zustand', + 'zustand/shallow': 'zustandShallow', + 'zustand/context': 'zustandContext', +}; + export const baseConfig = ({ outputOptions = {}, injectCSS = true } = {}) => { const output = { ...defaultOutputOptions, @@ -96,29 +108,33 @@ export const baseConfig = ({ outputOptions = {}, injectCSS = true } = {}) => { export default isProd && !isTesting ? [ + // esm build baseConfig(), + // umd build baseConfig({ outputOptions: { dir: 'dist/umd', format: 'umd', exports: 'named', name: 'ReactFlow', - globals: { - react: 'React', - 'react-dom': 'ReactDOM', - classcat: 'cc', - 'd3-selection': 'd3', - 'd3-zoom': 'd3', - 'react-draggable': 'ReactDraggable', - zustand: 'zustand', - 'zustand/shallow': 'zustandShallow', - 'zustand/context': 'zustandContext', - }, + globals, }, }), + // nocsss esm build baseConfig({ outputOptions: { - dir: 'dist/nocss', + dir: 'dist/nocss/esm', + }, + injectCSS: false, + }), + // nocsss umd build + baseConfig({ + outputOptions: { + dir: 'dist/nocss/umd', + format: 'umd', + exports: 'named', + name: 'ReactFlow', + globals, }, injectCSS: false, From ea01536de72d911621d1095ff5954ce6e1b27220 Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 18 Apr 2022 11:04:15 +0200 Subject: [PATCH 2/8] chore(pkg): audit fix --- package-lock.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index c1dac9a4..29cd7de3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2817,9 +2817,9 @@ } }, "node_modules/async": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/async/-/async-3.2.0.tgz", - "integrity": "sha512-TR2mEZFVOj2pLStYxLht7TyfuRzaydfpxr3k9RpHIzMgw7A64dzsdqCxH1WJyQdoe8T10nDXd9wnEigmiuHIZw==", + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/async/-/async-3.2.3.tgz", + "integrity": "sha512-spZRyzKL5l5BZQrr/6m/SqFdBN0q3OCI0f9rjfBzCMBIP4p75P620rR3gTmaksNOhmzgdxcaxdNfMy6anrbM0g==", "dev": true }, "node_modules/async-retry": { @@ -12319,9 +12319,9 @@ "dev": true }, "async": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/async/-/async-3.2.0.tgz", - "integrity": "sha512-TR2mEZFVOj2pLStYxLht7TyfuRzaydfpxr3k9RpHIzMgw7A64dzsdqCxH1WJyQdoe8T10nDXd9wnEigmiuHIZw==", + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/async/-/async-3.2.3.tgz", + "integrity": "sha512-spZRyzKL5l5BZQrr/6m/SqFdBN0q3OCI0f9rjfBzCMBIP4p75P620rR3gTmaksNOhmzgdxcaxdNfMy6anrbM0g==", "dev": true }, "async-retry": { From f4b52a641911acf5c1e5d5dd5d064e17e18ce22c Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 18 Apr 2022 11:09:40 +0200 Subject: [PATCH 3/8] chore(examples): pkg --- example/package-lock.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/package-lock.json b/example/package-lock.json index 33beb88f..1f3bc60a 100644 --- a/example/package-lock.json +++ b/example/package-lock.json @@ -27,7 +27,7 @@ }, "..": { "name": "react-flow-renderer", - "version": "10.0.9-next.0", + "version": "10.1.0", "license": "MIT", "dependencies": { "@babel/runtime": "^7.17.8", From 9ad818f1745bff36608c8d618fb0570251b6d51f Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 18 Apr 2022 11:10:25 +0200 Subject: [PATCH 4/8] chore: release v10.1.1 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 29cd7de3..c0630875 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "react-flow-renderer", - "version": "10.1.0", + "version": "10.1.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "react-flow-renderer", - "version": "10.1.0", + "version": "10.1.1", "license": "MIT", "dependencies": { "@babel/runtime": "^7.17.8", diff --git a/package.json b/package.json index 9ca8a054..2aa2dfb5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-flow-renderer", - "version": "10.1.0", + "version": "10.1.1", "engines": { "node": ">=14" }, From 368b2f51156bb1dadb62d24faf49549b6cb85be8 Mon Sep 17 00:00:00 2001 From: Moritz Klack Date: Mon, 18 Apr 2022 11:36:19 +0200 Subject: [PATCH 5/8] docs(readme): update discord link --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 065acc94..89f11e05 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ ### 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/6ZcAMJmJ) | [💎 React Flow Pro](https://pro.reactflow.dev/pricing) +[🚀 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) From eff243076b1bbc13977d1c34f1ea799d9329d0df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christopher=20M=C3=B6ller?= Date: Tue, 19 Apr 2022 17:16:12 +0200 Subject: [PATCH 6/8] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 89f11e05..137ef9e3 100644 --- a/README.md +++ b/README.md @@ -29,7 +29,7 @@ A highly customizable React component for building interactive graphs and node-b ## Attribution React Flow includes a small attribution that links to the React Flow website. Per default the attribution is displayed in the bottom right corner. With the attribution we want to achieve that companies who are using React Flow in commercial applications finance the development of the library. -We expect users who are using React Flow commercially to subscribe to React Flow Pro if they want to remove the attribution. In non-commercial applications you may hide the attribution without subscribing but are welcome to [sponsor us on Github](https://github.com/sponsors/wbkd). +We expect users who are using React Flow commercially to subscribe to [React Flow Pro](https://pro.reactflow.dev/pricing) if they want to remove the attribution. In non-commercial applications you may hide the attribution without subscribing but are welcome to [sponsor us on Github](https://github.com/sponsors/wbkd). ## Installation From 84f1c8ca8823ba7e20758ca536dc2be8d8d275eb Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 21 Apr 2022 23:07:31 +0200 Subject: [PATCH 7/8] refactor(bg): dont use math random for pattern id generation closes #2086 --- .../Background/index.tsx | 40 ++++++++++++------- 1 file changed, 26 insertions(+), 14 deletions(-) diff --git a/src/additional-components/Background/index.tsx b/src/additional-components/Background/index.tsx index 89b87e46..b2d54400 100644 --- a/src/additional-components/Background/index.tsx +++ b/src/additional-components/Background/index.tsx @@ -1,4 +1,4 @@ -import React, { memo, useMemo, FC } from 'react'; +import React, { memo, FC, useEffect, useState, useRef } from 'react'; import cc from 'classcat'; import { useStore } from '../../store'; @@ -20,9 +20,16 @@ const Background: FC = ({ style, className, }) => { + const ref = useRef(null); + const [patternId, setPatternId] = useState(null); const [x, y, scale] = useStore(transformSelector); - // when there are multiple flows on a page we need to make sure that every background gets its own pattern. - const patternId = useMemo(() => `pattern-${Math.floor(Math.random() * 100000)}`, []); + + useEffect(() => { + // when there are multiple flows on a page we need to make sure that every background gets its own pattern. + const bgs = document.querySelectorAll('.react-flow__background'); + const index = Array.from(bgs).findIndex((bg) => bg === ref.current); + setPatternId(`pattern-${index}`); + }, []); const bgClasses = cc(['react-flow__background', 'react-flow__container', className]); const scaledGap = gap * scale; @@ -41,18 +48,23 @@ const Background: FC = ({ width: '100%', height: '100%', }} + ref={ref} > - - {path} - - + {patternId && ( + <> + + {path} + + + + )} ); }; From 3e91fc18e3b68f49863b23164db7c3d9df9c25a5 Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 21 Apr 2022 23:10:41 +0200 Subject: [PATCH 8/8] chore: release v10.1.2 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index c0630875..968cec87 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "react-flow-renderer", - "version": "10.1.1", + "version": "10.1.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "react-flow-renderer", - "version": "10.1.1", + "version": "10.1.2", "license": "MIT", "dependencies": { "@babel/runtime": "^7.17.8", diff --git a/package.json b/package.json index 2aa2dfb5..10aa08b1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-flow-renderer", - "version": "10.1.1", + "version": "10.1.2", "engines": { "node": ">=14" },