Skip to content

Commit 7941080

Browse files
authored
Merge pull request #1047 from Braun-IT-Solutions/react-19
Update for React 19
2 parents 999f490 + 18bc961 commit 7941080

File tree

31 files changed

+6260
-10126
lines changed

31 files changed

+6260
-10126
lines changed

.changeset/cold-drinks-unite.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
'@projectstorm/react-diagrams-defaults': patch
3+
'@projectstorm/react-diagrams-routing': patch
4+
'@projectstorm/react-diagrams-core': patch
5+
'@projectstorm/react-canvas-core': patch
6+
'@projectstorm/react-diagrams-gallery': patch
7+
'@projectstorm/react-diagrams-demo': patch
8+
'@projectstorm/geometry': patch
9+
---
10+
11+
Updated packages to support React v19
Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
module.exports = {
22
stories: ['../demos/*.stories.tsx'],
3-
addons: ['@storybook/addon-actions'],
4-
framework: {
5-
name: '@storybook/react-webpack5',
6-
options: {}
7-
}
3+
addons: ['@storybook/addon-actions', '@storybook/addon-webpack5-compiler-babel'],
4+
framework: '@storybook/react-webpack5'
85
};

diagrams-demo-gallery/.storybook/manager.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { addons } from '@storybook/addons';
1+
import { addons } from '@storybook/manager-api';
22

33
import diagramsTheme from './theme';
44

diagrams-demo-gallery/demos/demo-custom-link-label/EditableLabelFactory.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { DiagramEngine } from '@projectstorm/react-diagrams';
44

55
import { EditableLabelModel } from './EditableLabelModel';
66
import { EditableLabelWidget } from './EditableLabelWidget';
7+
import { JSX } from 'react';
78

89
export class EditableLabelFactory extends AbstractReactFactory<EditableLabelModel, DiagramEngine> {
910
constructor() {

diagrams-demo-gallery/demos/demo-custom-link2/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { LinkWidget, PointModel } from '@projectstorm/react-diagrams-core';
1010
import * as React from 'react';
1111
import { CanvasWidget } from '@projectstorm/react-canvas-core';
1212
import { DemoCanvasWidget } from '../helpers/DemoCanvasWidget';
13-
import { MouseEvent } from 'react';
13+
import { JSX, MouseEvent } from 'react';
1414
import { DefaultLinkPointWidget, DefaultLinkSegmentWidget } from '@projectstorm/react-diagrams-defaults/dist';
1515
import { DiagramEngine } from '@projectstorm/react-diagrams-core/dist';
1616

diagrams-demo-gallery/demos/demo-custom-node1/DiamondNodeFactory.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { DiamondNodeModel } from './DiamondNodeModel';
33
import * as React from 'react';
44
import { AbstractReactFactory } from '@projectstorm/react-canvas-core';
55
import { DiagramEngine } from '@projectstorm/react-diagrams-core';
6+
import { JSX } from 'react';
67

78
export class DiamondNodeFactory extends AbstractReactFactory<DiamondNodeModel, DiagramEngine> {
89
constructor() {

diagrams-demo-gallery/package.json

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -31,23 +31,24 @@
3131
"gsap": "^3.12.2",
3232
"json-beautify": "^1.1.1",
3333
"lodash": "^4.17.21",
34-
"react": "^18.2.0",
35-
"react-dom": "^18.2.0"
34+
"react": "^19.0.0",
35+
"react-dom": "^19.0.0"
3636
},
3737
"devDependencies": {
38-
"@babel/preset-env": "^7.22.20",
39-
"@babel/preset-react": "^7.22.15",
40-
"@babel/preset-typescript": "^7.22.15",
41-
"@storybook/addon-actions": "^7.4.4",
42-
"@storybook/addon-options": "^5.3.21",
43-
"@storybook/addons": "^7.4.4",
44-
"@storybook/react": "^7.4.4",
45-
"@storybook/react-webpack5": "^7.4.4",
38+
"@babel/preset-env": "^7.26.9",
39+
"@babel/preset-react": "^7.26.3",
40+
"@babel/preset-typescript": "^7.27.0",
41+
"@storybook/addon-actions": "^8.6.9",
42+
"@storybook/addon-webpack5-compiler-babel": "^3.0.5",
43+
"@storybook/manager-api": "^8.6.10",
44+
"@storybook/preview-api": "^8.6.10",
45+
"@storybook/react": "^8.6.9",
46+
"@storybook/react-webpack5": "^8.6.9",
4647
"@storybook/storybook-deployer": "^2.8.16",
47-
"@storybook/theming": "^7.4.4",
48+
"@storybook/theming": "^8.6.9",
4849
"@types/lodash": "^4.14.200",
49-
"@types/react": "^18.2.22",
50-
"@types/react-dom": "^18.2.7",
51-
"storybook": "^7.4.4"
50+
"@types/react": "^19.0.12",
51+
"@types/react-dom": "^19.0.4",
52+
"storybook": "^8.6.9"
5253
}
5354
}

diagrams-demo-gallery/tsconfig.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
{
22
"compileOnSave": false,
33
"compilerOptions": {
4-
"suppressExcessPropertyErrors": true,
54
"esModuleInterop": true,
65
"declaration": true,
76
"composite": true,

diagrams-demo-project/package.json

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -26,18 +26,18 @@
2626
"typings": "./dist/@types/index",
2727
"dependencies": {
2828
"@projectstorm/react-diagrams": "workspace:*",
29-
"react": "^18.2.0",
30-
"react-dom": "^18.2.0"
29+
"react": "^19.0.0",
30+
"react-dom": "^19.0.0"
3131
},
3232
"devDependencies": {
33-
"source-map-loader": "^4.0.1",
34-
"html-webpack-plugin": "^5.5.3",
35-
"@babel/core": "^7.22.20",
36-
"@babel/preset-react": "^7.22.15",
37-
"@types/react": "^18.2.22",
38-
"@types/react-dom": "^18.2.7",
33+
"@babel/core": "^7.26.10",
34+
"@babel/preset-react": "^7.26.3",
35+
"@types/react": "^19.0.12",
36+
"@types/react-dom": "^19.0.4",
3937
"babel-loader": "^9.1.3",
4038
"css-loader": "^6.8.1",
39+
"html-webpack-plugin": "^5.5.3",
40+
"source-map-loader": "^4.0.1",
4141
"style-loader": "^3.3.3",
4242
"webpack": "^5.88.2",
4343
"webpack-cli": "^5.1.4",

diagrams-demo-project/src/custom-node-ts/TSCustomNodeFactory.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { TSCustomNodeModel } from './TSCustomNodeModel';
33
import { TSCustomNodeWidget } from './TSCustomNodeWidget';
44
import { AbstractReactFactory } from '@projectstorm/react-diagrams';
55
import { DiagramEngine } from '@projectstorm/react-diagrams';
6+
import { JSX } from 'react';
67

78
export class TSCustomNodeFactory extends AbstractReactFactory<TSCustomNodeModel, DiagramEngine> {
89
constructor() {

package.json

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -18,23 +18,23 @@
1818
"nodes"
1919
],
2020
"scripts": {
21-
"ncu": "ncu -u && pnpm recursive exec -- ncu -u",
22-
"format": "prettier --write \"**/*.{ts,tsx,js,jsx}\"",
23-
"clean": "rm -rf packages/*/dist",
24-
"test": "pnpm run -r test",
25-
"build": "tsc --build && pnpm run -r build",
26-
"build:prod": "NODE_ENV=production pnpm build",
27-
"release": "pnpm build:prod && pnpm changeset publish",
28-
"release:storybook": "tsc --build && cd diagrams-demo-gallery && pnpm storybook:build && ./node_modules/.bin/storybook-to-ghpages --existing-output-dir .out"
21+
"ncu": "ncu -u && pnpm recursive exec -- ncu -u",
22+
"format": "prettier --write \"**/*.{ts,tsx,js,jsx}\"",
23+
"clean": "rm -rf packages/*/dist",
24+
"test": "pnpm run -r test",
25+
"build": "tsc --build && pnpm run -r build",
26+
"build:prod": "NODE_ENV=production pnpm build",
27+
"release": "pnpm build:prod && pnpm changeset publish",
28+
"release:storybook": "tsc --build && cd diagrams-demo-gallery && pnpm storybook:build && ./node_modules/.bin/storybook-to-ghpages --existing-output-dir .out"
2929
},
3030
"devDependencies": {
31-
"@changesets/cli": "^2.26.2",
31+
"@changesets/cli": "^2.26.2",
3232
"@types/jest": "^29.5.5",
3333
"@types/node": "^20.6.3",
3434
"jest": "^29.7.0",
3535
"jest-cli": "^29.7.0",
3636
"prettier": "^3.0.3",
37-
"rimraf": "^5.0.1",
37+
"rimraf": "^5.0.1",
3838
"source-map-loader": "^4.0.1",
3939
"terser-webpack-plugin": "^5.3.9",
4040
"ts-jest": "^29.1.1",
@@ -44,5 +44,10 @@
4444
"webpack-cli": "^5.1.4",
4545
"webpack-dev-server": "^4.15.1",
4646
"webpack-node-externals": "^3.0.0"
47+
},
48+
"pnpm": {
49+
"overrides": {
50+
"react": "^19.0.0"
51+
}
4752
}
4853
}

packages/react-canvas-core/package.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,14 @@
2929
"module": "./dist/index.js",
3030
"typings": "./dist/@types/index",
3131
"dependencies": {
32-
"@emotion/react": "^11.11.1",
32+
"@emotion/react": "^11.14.0",
3333
"@emotion/styled": "^11.11.0",
3434
"@projectstorm/geometry": "workspace:*",
35-
"react": "^18.2.0",
36-
"lodash": "^4.17.21"
35+
"lodash": "^4.17.21",
36+
"react": "^19.0.0"
3737
},
3838
"devDependencies": {
39-
"@types/react": "^18.2.22",
40-
"@types/lodash": "^4.14.200"
39+
"@types/lodash": "^4.14.200",
40+
"@types/react": "^19.0.12"
4141
}
4242
}

packages/react-canvas-core/src/core/AbstractReactFactory.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { BaseModel } from '../core-models/BaseModel';
22
import { AbstractModelFactory } from './AbstractModelFactory';
33
import { CanvasEngine } from '../CanvasEngine';
4+
import { JSX } from 'react';
45

56
export interface GenerateWidgetEvent<T extends BaseModel> {
67
model: T;

packages/react-canvas-core/src/entities/selection/SelectionBoxLayerFactory.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { AbstractReactFactory, GenerateWidgetEvent } from '../../core/AbstractRe
33
import { SelectionLayerModel } from './SelectionLayerModel';
44
import { GenerateModelEvent } from '../../core/AbstractModelFactory';
55
import { SelectionBoxWidget } from './SelectionBoxWidget';
6+
import { JSX } from 'react';
67

78
export class SelectionBoxLayerFactory extends AbstractReactFactory<SelectionLayerModel> {
89
constructor() {

packages/react-canvas-core/src/widgets/PeformanceWidget.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from 'react';
22
import _isEqual from 'lodash/isEqual';
33
import { BaseModel } from '../core-models/BaseModel';
4+
import { JSX } from 'react';
45

56
export interface PeformanceWidgetProps {
67
children: () => JSX.Element;

packages/react-diagrams-core/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,11 @@
3535
"@projectstorm/geometry": "workspace:*",
3636
"@projectstorm/react-canvas-core": "workspace:*",
3737
"lodash": "^4.17.21",
38-
"react": "^18.2.0",
38+
"react": "^19.0.0",
3939
"resize-observer-polyfill": "^1.5.1"
4040
},
4141
"devDependencies": {
42-
"@types/react": "^18.2.22",
43-
"@types/lodash": "^4.14.200"
42+
"@types/lodash": "^4.14.200",
43+
"@types/react": "^19.0.12"
4444
}
4545
}

packages/react-diagrams-core/src/DiagramEngine.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { PortModel } from './entities/port/PortModel';
33
import { LinkModel } from './entities/link/LinkModel';
44
import { LabelModel } from './entities/label/LabelModel';
55
import { boundingBoxFromPolygons, Point, Rectangle } from '@projectstorm/geometry';
6-
import { MouseEvent } from 'react';
6+
import { JSX, MouseEvent } from 'react';
77
import {
88
AbstractModelFactory,
99
AbstractReactFactory,
@@ -123,9 +123,9 @@ export class DiagramEngine extends CanvasEngine<CanvasEngineListener, DiagramMod
123123

124124
getFactoryForLabel<F extends AbstractReactFactory<LabelModel, DiagramEngine>>(label: LabelModel) {
125125
if (typeof label === 'string') {
126-
return this.labelFactories.getFactory(label);
126+
return this.labelFactories.getFactory<F>(label);
127127
}
128-
return this.labelFactories.getFactory(label.getType());
128+
return this.labelFactories.getFactory<F>(label.getType());
129129
}
130130

131131
getFactoryForPort<F extends AbstractModelFactory<PortModel, DiagramEngine>>(port: PortModel) {

packages/react-diagrams-core/src/entities/link-layer/LinkLayerFactory.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { AbstractReactFactory, GenerateModelEvent, GenerateWidgetEvent } from '@
33
import { DiagramEngine } from '../../DiagramEngine';
44
import { LinkLayerModel } from './LinkLayerModel';
55
import { LinkLayerWidget } from './LinkLayerWidget';
6+
import { JSX } from 'react';
67

78
export class LinkLayerFactory extends AbstractReactFactory<LinkLayerModel, DiagramEngine> {
89
constructor() {

packages/react-diagrams-core/src/entities/node-layer/NodeLayerFactory.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { AbstractReactFactory, GenerateModelEvent, GenerateWidgetEvent } from '@
33
import { DiagramEngine } from '../../DiagramEngine';
44
import { NodeLayerModel } from './NodeLayerModel';
55
import { NodeLayerWidget } from './NodeLayerWidget';
6+
import { JSX } from 'react';
67

78
export class NodeLayerFactory extends AbstractReactFactory<NodeLayerModel, DiagramEngine> {
89
constructor() {

packages/react-diagrams-defaults/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,16 +29,16 @@
2929
"module": "./dist/index.js",
3030
"typings": "./dist/@types/index",
3131
"dependencies": {
32-
"@emotion/react": "^11.11.1",
32+
"@emotion/react": "^11.14.0",
3333
"@emotion/styled": "^11.*",
3434
"@projectstorm/geometry": "workspace:*",
3535
"@projectstorm/react-canvas-core": "workspace:*",
3636
"@projectstorm/react-diagrams-core": "workspace:*",
3737
"lodash": "^4.17.21",
38-
"react": "^18.2.0"
38+
"react": "^19.0.0"
3939
},
4040
"devDependencies": {
4141
"@types/lodash": "^4.14.200",
42-
"@types/react": "^18.2.22"
42+
"@types/react": "^19.0.12"
4343
}
4444
}

packages/react-diagrams-defaults/src/label/DefaultLabelFactory.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { DefaultLabelModel } from './DefaultLabelModel';
33
import { DefaultLabelWidget } from './DefaultLabelWidget';
44
import { AbstractReactFactory } from '@projectstorm/react-canvas-core';
55
import { DiagramEngine } from '@projectstorm/react-diagrams-core';
6+
import { JSX } from 'react';
67

78
/**
89
* @author Dylan Vorster

packages/react-diagrams-defaults/src/link/DefaultLinkFactory.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import styled from '@emotion/styled';
55
import { AbstractReactFactory } from '@projectstorm/react-canvas-core';
66
import { DiagramEngine } from '@projectstorm/react-diagrams-core';
77
import { css, keyframes } from '@emotion/react';
8+
import { JSX } from 'react';
89

910
namespace S {
1011
export const Keyframes = keyframes`

packages/react-diagrams-defaults/src/link/DefaultLinkSegmentWidget.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export interface DefaultLinkSegmentWidgetProps {
77
path: string;
88
link: DefaultLinkModel;
99
selected: boolean;
10-
forwardRef: React.RefObject<SVGPathElement>;
10+
forwardRef: React.RefObject<SVGPathElement | null>;
1111
factory: DefaultLinkFactory;
1212
diagramEngine: DiagramEngine;
1313
onSelection: (selected: boolean) => any;

packages/react-diagrams-defaults/src/link/DefaultLinkWidget.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { DiagramEngine, LinkWidget, PointModel } from '@projectstorm/react-diagrams-core';
22
import * as React from 'react';
3-
import { MouseEvent, useEffect, useRef } from 'react';
3+
import { JSX, MouseEvent, useEffect, useRef } from 'react';
44
import { DefaultLinkModel } from './DefaultLinkModel';
55
import { DefaultLinkPointWidget } from './DefaultLinkPointWidget';
66
import { DefaultLinkSegmentWidget } from './DefaultLinkSegmentWidget';

packages/react-diagrams-defaults/src/node/DefaultNodeFactory.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { DefaultNodeModel } from './DefaultNodeModel';
33
import { DefaultNodeWidget } from './DefaultNodeWidget';
44
import { AbstractReactFactory } from '@projectstorm/react-canvas-core';
55
import { DiagramEngine } from '@projectstorm/react-diagrams-core';
6+
import { JSX } from 'react';
67

78
export class DefaultNodeFactory extends AbstractReactFactory<DefaultNodeModel, DiagramEngine> {
89
constructor() {

packages/react-diagrams-routing/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,11 +38,11 @@
3838
"lodash": "^4.17.21",
3939
"pathfinding": "^0.4.18",
4040
"paths-js": "^0.4.11",
41-
"react": "^18.2.0"
41+
"react": "^19.0.0"
4242
},
4343
"devDependencies": {
4444
"@types/dagre": "^0.7.50",
4545
"@types/lodash": "^4.14.200",
46-
"@types/react": "^18.2.22"
46+
"@types/react": "^19.0.12"
4747
}
4848
}

packages/react-diagrams-routing/src/link/PathFindingLinkFactory.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import {
2222
InputType,
2323
ListenerHandle
2424
} from '@projectstorm/react-canvas-core';
25+
import { JSX } from 'react';
2526

2627
export class PathFindingLinkFactory extends DefaultLinkFactory<PathFindingLinkModel> {
2728
ROUTING_SCALING_FACTOR: number = 5;

packages/react-diagrams-routing/src/link/PathFindingLinkWidget.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { PathFinding } from '../engine/PathFinding';
66
import { PathFindingLinkFactory } from './PathFindingLinkFactory';
77
import { PathFindingLinkModel } from './PathFindingLinkModel';
88
import { DefaultLinkSegmentWidget } from '@projectstorm/react-diagrams-defaults';
9+
import { JSX } from 'react';
910

1011
export interface PathFindingLinkWidgetProps {
1112
color?: string;

packages/react-diagrams-routing/src/link/RightAngleLinkFactory.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import * as React from 'react';
22
import { RightAngleLinkWidget } from './RightAngleLinkWidget';
33
import { DefaultLinkFactory } from '@projectstorm/react-diagrams-defaults';
44
import { RightAngleLinkModel } from './RightAngleLinkModel';
5+
import { JSX } from 'react';
56

67
/**
78
* @author Daniel Lazar

packages/react-diagrams-routing/src/link/RightAngleLinkWidget.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { DiagramEngine, LinkWidget, PointModel } from '@projectstorm/react-diagr
33
import { RightAngleLinkFactory } from './RightAngleLinkFactory';
44
import { DefaultLinkModel, DefaultLinkSegmentWidget } from '@projectstorm/react-diagrams-defaults';
55
import { Point } from '@projectstorm/geometry';
6-
import { MouseEvent } from 'react';
6+
import { JSX, MouseEvent } from 'react';
77
import { RightAngleLinkModel } from './RightAngleLinkModel';
88

99
export interface RightAngleLinkProps {

0 commit comments

Comments
 (0)