Skip to content

Commit cd1794d

Browse files
CamDavidsonPilonCamDavidsonPilon
committed
upgrade to react 19 and replace CRA
1 parent 94770dd commit cd1794d

13 files changed

Lines changed: 10759 additions & 14431 deletions

‎Makefile‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ install: venv ## Install *all* python dependencies
6868
@$(ACTIVATE) && pip install -r requirements/requirements_dev.txt -r requirements/requirements.txt -e core/ $(PIP_FLAGS)
6969

7070
$(NODE_DIR)/node_modules/.installed: $(NODE_DIR)/package.json ## Install Node deps
71-
@if [ -x "$(NODE_DIR)/node_modules/.bin/react-scripts" ]; then \
71+
@if [ -x "$(NODE_DIR)/node_modules/.bin/vite" ]; then \
7272
echo ">> Reusing existing frontend node_modules"; \
7373
elif [ -d "$(NODE_DIR)/node_modules" ]; then \
7474
echo ">> Repairing partial frontend node_modules"; \

‎frontend/babel.config.cjs‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
presets: [
3+
["@babel/preset-env", { targets: { node: "current" } }],
4+
["@babel/preset-react", { runtime: "automatic" }],
5+
],
6+
};

‎frontend/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#000000" />
8+
<meta name="description" content="Pioreactor" />
9+
<link rel="apple-touch-icon" href="/logo192.png" />
10+
<link rel="manifest" href="/manifest.json" />
11+
<title>Pioreactor</title>
12+
</head>
13+
<body>
14+
<div id="root"></div>
15+
<script type="module" src="/src/index.js"></script>
16+
</body>
17+
</html>

‎frontend/jest.config.cjs‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
module.exports = {
2+
testEnvironment: "jsdom",
3+
setupFilesAfterEnv: ["<rootDir>/src/setupTests.js"],
4+
moduleNameMapper: {
5+
"\\.(css|less|sass|scss)$": "<rootDir>/src/__mocks__/styleMock.js",
6+
"\\.(gif|jpg|jpeg|png|svg|ico)$": "<rootDir>/src/__mocks__/fileMock.js",
7+
},
8+
transform: {
9+
"^.+\\.[jt]sx?$": "babel-jest",
10+
},
11+
};

‎frontend/package-lock.json‎

Lines changed: 10601 additions & 14408 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json‎

Lines changed: 44 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -22,31 +22,54 @@
2222
"mqtt": "^5.15.1",
2323
"notistack": "^3.0.2",
2424
"prismjs": "^1.29.0",
25-
"react": "^18.3.1",
26-
"react-dom": "^18.3.1",
25+
"react": "^19.2.7",
26+
"react-dom": "^19.2.7",
2727
"react-pro-sidebar": "^1.1.0-alpha.1",
2828
"react-router": "^7.17.0",
29-
"react-scripts": "^5.0.1",
3029
"react-showdown": "^2.3.1",
3130
"react-simple-code-editor": "^0.13.1",
32-
"victory": "36.9.2"
31+
"victory": "^37.3.6"
3332
},
3433
"scripts": {
35-
"start": "react-scripts start",
36-
"dev": "react-scripts start",
34+
"start": "vite --host 127.0.0.1 --port 3000",
35+
"dev": "vite --host 127.0.0.1 --port 3000",
3736
"lint": "eslint src --ext .js,.jsx,.ts,.tsx",
3837
"lint:fix": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
39-
"build": "react-scripts build",
40-
"test": "react-scripts test",
41-
"eject": "react-scripts eject",
38+
"build": "vite build",
39+
"test": "jest",
4240
"postbuild": "rm -rf ../core/pioreactor/web/static/* && cp -R build/* ../core/pioreactor/web/static"
4341
},
4442
"eslintConfig": {
45-
"extends": "react-app",
43+
"env": {
44+
"browser": true,
45+
"es2021": true,
46+
"jest": true
47+
},
48+
"extends": [],
4649
"plugins": [
50+
"react",
51+
"react-hooks",
4752
"unused-imports"
4853
],
54+
"parserOptions": {
55+
"ecmaFeatures": {
56+
"jsx": true
57+
},
58+
"ecmaVersion": "latest",
59+
"sourceType": "module"
60+
},
61+
"settings": {
62+
"react": {
63+
"version": "detect"
64+
}
65+
},
4966
"rules": {
67+
"react/prop-types": "off",
68+
"react/jsx-uses-react": "error",
69+
"react/jsx-uses-vars": "error",
70+
"react/react-in-jsx-scope": "off",
71+
"react-hooks/rules-of-hooks": "error",
72+
"react-hooks/exhaustive-deps": "warn",
5073
"no-unused-vars": "off",
5174
"unused-imports/no-unused-imports": "warn",
5275
"unused-imports/no-unused-vars": [
@@ -78,11 +101,19 @@
78101
]
79102
},
80103
"devDependencies": {
81-
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
104+
"@babel/preset-env": "^7.28.5",
105+
"@babel/preset-react": "^7.28.5",
106+
"@vitejs/plugin-react": "^5.2.0",
107+
"babel-jest": "^30.4.1",
82108
"css-loader": "^5.0.1",
83-
"eslint-plugin-react": "^7.37.3",
109+
"eslint": "^8.57.1",
110+
"eslint-plugin-react": "^7.37.5",
111+
"eslint-plugin-react-hooks": "^7.1.1",
84112
"eslint-plugin-unused-imports": "^4.4.1",
113+
"jest": "^30.4.2",
114+
"jest-environment-jsdom": "^30.4.1",
85115
"prettier": "2.1.2",
86-
"style-loader": "^2.0.0"
116+
"style-loader": "^2.0.0",
117+
"vite": "^7.3.6"
87118
}
88119
}

‎frontend/src/__mocks__/fileMock.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = "test-file-stub";

‎frontend/src/__mocks__/styleMock.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = {};

‎frontend/src/components/Chart.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
VictoryGroup,
2121
VictoryLegend,
2222
VictoryTooltip,
23+
VictoryVoronoiContainer,
2324
createContainer
2425
} from "victory";
2526
import dayjs from 'dayjs';
@@ -102,7 +103,7 @@ function Chart(props) {
102103
const names = useMemo(() => Object.keys(seriesMap), [seriesMap]);
103104

104105
const ChartContainer = useMemo(
105-
() => (allowZoom ? createContainer("zoom", "voronoi") : createContainer("voronoi")),
106+
() => (allowZoom ? createContainer("zoom", "voronoi") : VictoryVoronoiContainer),
106107
[allowZoom]
107108
);
108109

@@ -831,6 +832,7 @@ function Chart(props) {
831832
<VictoryLegend
832833
x={70}
833834
y={chartHeight - legendBottomPadding + 40}
835+
titleComponent={<VictoryLabel />}
834836
symbolSpacer={6}
835837
itemsPerRow={legendItemsPerRow}
836838
name="legend"

‎frontend/src/components/ExperimentSummary.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,15 @@ class EditableDescription extends React.Component {
2020
super(props);
2121
this.contentEditable = React.createRef();
2222
this.state = {
23-
desc: this.props.experimentMetadata.description,
23+
desc: this.props.experimentMetadata.description ?? "",
2424
recentChange: false,
2525
savingLoopActive: false,
2626
};
2727
}
2828

2929
componentDidUpdate(prevProps) {
3030
if (this.props.experimentMetadata !== prevProps.experimentMetadata) {
31-
this.setState({ desc: this.props.experimentMetadata.description });
31+
this.setState({ desc: this.props.experimentMetadata.description ?? "" });
3232
}
3333
}
3434

0 commit comments

Comments
 (0)