Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit dbed970

Browse files
Upgrade to react 19 (#610)
* upgrade to react 19.0 * enable modern JSX transform for React 19 this avoids this warning in console: [SERVER] Your app (or one of its dependencies) is using an outdated JSX transform. Update to the modern JSX transform for faster performance: https://react.dev/link/new-jsx-transform * upgrade to rescript 11 for compatibility with react 19 * refactor: migrate from string refs and findDOMNode to createRef() Updates component to use React.createRef() to handle React 19 breaking changes: - Replaces string refs with createRef - Removes ReactDOM.findDOMNode usage
1 parent a789648 commit dbed970

File tree

4 files changed

+70
-63
lines changed

4 files changed

+70
-63
lines changed

‎babel.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ module.exports = function (api) {
88
[
99
'@babel/preset-react',
1010
{
11+
runtime: 'automatic',
1112
development: !isProductionEnv,
1213
useBuiltIns: true,
1314
},

‎client/app/bundles/comments/components/CommentBox/CommentForm/CommentForm.jsx

Lines changed: 34 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
/* eslint-disable react/no-find-dom-node, react/no-string-refs */
22
import React from 'react';
33
import PropTypes from 'prop-types';
4-
import ReactDOM from 'react-dom';
54
import { CSSTransition, TransitionGroup } from 'react-transition-group';
65
import _ from 'lodash';
76
import { injectIntl } from 'react-intl';
@@ -27,6 +26,13 @@ class CommentForm extends BaseComponent {
2726
comment: emptyComment,
2827
};
2928

29+
this.horizontalAuthorRef = React.createRef();
30+
this.horizontalTextRef = React.createRef();
31+
this.stackedAuthorRef = React.createRef();
32+
this.stackedTextRef = React.createRef();
33+
this.inlineAuthorRef = React.createRef();
34+
this.inlineTextRef = React.createRef();
35+
3036
_.bindAll(this, ['handleSelect', 'handleChange', 'handleSubmit', 'resetAndFocus']);
3137
}
3238

@@ -40,22 +46,20 @@ class CommentForm extends BaseComponent {
4046
switch (this.state.formMode) {
4147
case 0:
4248
comment = {
43-
author: ReactDOM.findDOMNode(this.refs.horizontalAuthorNode).value,
44-
text: ReactDOM.findDOMNode(this.refs.horizontalTextNode).value,
49+
author: this.horizontalAuthorRef.current.value,
50+
text: this.horizontalTextRef.current.value,
4551
};
4652
break;
4753
case 1:
4854
comment = {
49-
author: ReactDOM.findDOMNode(this.refs.stackedAuthorNode).value,
50-
text: ReactDOM.findDOMNode(this.refs.stackedTextNode).value,
55+
author: this.stackedAuthorRef.current.value,
56+
text: this.stackedTextRef.current.value,
5157
};
5258
break;
5359
case 2:
5460
comment = {
55-
// This is different because the input is a native HTML element
56-
// rather than a React element.
57-
author: ReactDOM.findDOMNode(this.refs.inlineAuthorNode).value,
58-
text: ReactDOM.findDOMNode(this.refs.inlineTextNode).value,
61+
author: this.inlineAuthorRef.current.value,
62+
text: this.inlineTextRef.current.value,
5963
};
6064
break;
6165
default:
@@ -81,13 +85,13 @@ class CommentForm extends BaseComponent {
8185
let ref;
8286
switch (this.state.formMode) {
8387
case 0:
84-
ref = ReactDOM.findDOMNode(this.refs.horizontalTextNode);
88+
ref = this.horizontalTextRef.current;
8589
break;
8690
case 1:
87-
ref = ReactDOM.findDOMNode(this.refs.stackedTextNode);
91+
ref = this.stackedTextRef.current;
8892
break;
8993
case 2:
90-
ref = ReactDOM.findDOMNode(this.refs.inlineTextNode);
94+
ref = this.inlineTextRef.current;
9195
break;
9296
default:
9397
throw new Error(`Unexpected state.formMode ${this.state.formMode}`);
@@ -103,31 +107,31 @@ class CommentForm extends BaseComponent {
103107
<hr />
104108
<form className="form-horizontal flex flex-col gap-4" onSubmit={this.handleSubmit}>
105109
<div className="flex flex-col gap-0 items-center lg:gap-4 lg:flex-row">
106-
<label htmlFor="horizontalAuthorNode" className="w-full lg:w-2/12 lg:text-end shrink-0">
110+
<label htmlFor="horizontalAuthorRef" className="w-full lg:w-2/12 lg:text-end shrink-0">
107111
{formatMessage(defaultMessages.inputNameLabel)}
108112
</label>
109113
<input
110114
type="text"
111-
id="horizontalAuthorNode"
115+
id="horizontalAuthorRef"
112116
placeholder={formatMessage(defaultMessages.inputNamePlaceholder)}
113117
className="px-3 py-1 leading-4 border border-gray-300 rounded w-full"
114-
ref="horizontalAuthorNode"
118+
ref={this.horizontalAuthorRef}
115119
value={this.state.comment.author}
116120
onChange={this.handleChange}
117121
disabled={this.props.isSaving}
118122
/>
119123
</div>
120124

121125
<div className="flex flex-col gap-0 items-center lg:gap-4 lg:flex-row">
122-
<label htmlFor="horizontalTextNode" className="w-full lg:w-2/12 lg:text-end shrink-0">
126+
<label htmlFor="horizontalTextRef" className="w-full lg:w-2/12 lg:text-end shrink-0">
123127
{formatMessage(defaultMessages.inputTextLabel)}
124128
</label>
125129
<input
126130
type="textarea"
127-
id="horizontalTextNode"
131+
id="horizontalTextRef"
128132
placeholder={formatMessage(defaultMessages.inputTextPlaceholder)}
129133
className="px-3 py-1 leading-4 border border-gray-300 rounded w-full"
130-
ref="horizontalTextNode"
134+
ref={this.horizontalTextRef}
131135
value={this.state.comment.text}
132136
onChange={this.handleChange}
133137
disabled={this.props.isSaving}
@@ -158,31 +162,31 @@ class CommentForm extends BaseComponent {
158162
<hr />
159163
<form className="flex flex-col gap-4" onSubmit={this.handleSubmit}>
160164
<div className="flex flex-col gap-0">
161-
<label htmlFor="stackedAuthorNode" className="w-full">
165+
<label htmlFor="stackedAuthorRef" className="w-full">
162166
{formatMessage(defaultMessages.inputNameLabel)}
163167
</label>
164168
<input
165169
type="text"
166-
id="stackedAuthorNode"
170+
id="stackedAuthorRef"
167171
placeholder={formatMessage(defaultMessages.inputNamePlaceholder)}
168172
className="px-3 py-1 leading-4 border border-gray-300 rounded w-full"
169-
ref="stackedAuthorNode"
173+
ref={this.stackedAuthorRef}
170174
value={this.state.comment.author}
171175
onChange={this.handleChange}
172176
disabled={this.props.isSaving}
173177
/>
174178
</div>
175179

176180
<div className="flex flex-col gap-0">
177-
<label htmlFor="stackedTextNode" className="w-full">
181+
<label htmlFor="stackedTextRef" className="w-full">
178182
{formatMessage(defaultMessages.inputTextLabel)}
179183
</label>
180184
<input
181185
type="text"
182-
id="stackedTextNode"
186+
id="stackedTextRef"
183187
placeholder={formatMessage(defaultMessages.inputTextPlaceholder)}
184188
className="px-3 py-1 leading-4 border border-gray-300 rounded w-full"
185-
ref="stackedTextNode"
189+
ref={this.stackedTextRef}
186190
value={this.state.comment.text}
187191
onChange={this.handleChange}
188192
disabled={this.props.isSaving}
@@ -213,27 +217,27 @@ class CommentForm extends BaseComponent {
213217
<hr />
214218
<form className="form-inline flex flex-col lg:flex-row flex-wrap gap-4" onSubmit={this.handleSubmit}>
215219
<div className="flex gap-2 items-center">
216-
<label htmlFor="inlineAuthorNode">{formatMessage(defaultMessages.inputNameLabel)}</label>
220+
<label htmlFor="inlineAuthorRef">{formatMessage(defaultMessages.inputNameLabel)}</label>
217221
<input
218222
type="text"
219-
id="inlineAuthorNode"
223+
id="inlineAuthorRef"
220224
placeholder={formatMessage(defaultMessages.inputNamePlaceholder)}
221225
className="px-3 py-1 leading-4 border border-gray-300 rounded"
222-
ref="inlineAuthorNode"
226+
ref={this.inlineAuthorRef}
223227
value={this.state.comment.author}
224228
onChange={this.handleChange}
225229
disabled={this.props.isSaving}
226230
/>
227231
</div>
228232

229233
<div className="flex gap-2 items-center">
230-
<label htmlFor="inlineTextNode">{formatMessage(defaultMessages.inputTextLabel)}</label>
234+
<label htmlFor="inlineTextRef">{formatMessage(defaultMessages.inputTextLabel)}</label>
231235
<input
232236
type="textarea"
233-
id="inlineTextNode"
237+
id="inlineTextRef"
234238
placeholder={formatMessage(defaultMessages.inputTextPlaceholder)}
235239
className="px-3 py-1 leading-4 border border-gray-300 rounded"
236-
ref="inlineTextNode"
240+
ref={this.inlineTextRef}
237241
value={this.state.comment.text}
238242
onChange={this.handleChange}
239243
disabled={this.props.isSaving}

‎package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -75,8 +75,8 @@
7575
"postcss-loader": "7.3.3",
7676
"postcss-preset-env": "^8.5.0",
7777
"prop-types": "^15.8.1",
78-
"react": "^18.2.0",
79-
"react-dom": "^18.2.0",
78+
"react": "^19.0.0",
79+
"react-dom": "^19.0.0",
8080
"react-intl": "^6.4.4",
8181
"react-on-rails": "14.0.3",
8282
"react-redux": "^8.1.0",
@@ -86,7 +86,7 @@
8686
"react-transition-group": "4.4.5",
8787
"redux": "^4.2.1",
8888
"redux-thunk": "^2.2.0",
89-
"rescript": "^10.1.4",
89+
"rescript": "^11.1.4",
9090
"rescript-react-on-rails": "^1.0.1",
9191
"resolve-url-loader": "^2.2.0",
9292
"sanitize-html": "^2.11.0",

‎yarn.lock

Lines changed: 32 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1014,7 +1014,14 @@
10141014
core-js-pure "^3.30.2"
10151015
regenerator-runtime "^0.14.0"
10161016

1017-
"@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.17.9", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
1017+
"@babel/runtime@^7.12.1":
1018+
version "7.26.0"
1019+
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.26.0.tgz#8600c2f595f277c60815256418b85356a65173c1"
1020+
integrity sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==
1021+
dependencies:
1022+
regenerator-runtime "^0.14.0"
1023+
1024+
"@babel/runtime@^7.12.5", "@babel/runtime@^7.17.9", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
10181025
version "7.22.10"
10191026
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.10.tgz#ae3e9631fd947cb7e3610d3e9d8fef5f76696682"
10201027
integrity sha512-21t/fkKLMZI4pqP2wlmsQAWnYW1PDyKyyUV4vCi+B25ydmdaYTKXPwCj0BzSUnZf4seIiYvSA3jcZ3gdsMFkLQ==
@@ -5901,7 +5908,7 @@ loglevel@^1.4.1:
59015908
resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.8.1.tgz#5c621f83d5b48c54ae93b6156353f555963377b4"
59025909
integrity sha512-tCRIJM51SHjAayKwC+QAg8hT8vg6z7GSgLJKGvzuPb1Wc+hLzqtuVLxp6/HzSPOozuK+8ErAhy7U/sVzw8Dgfg==
59035910

5904-
loose-envify@^1.1.0, loose-envify@^1.4.0:
5911+
loose-envify@^1.4.0:
59055912
version "1.4.0"
59065913
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
59075914
integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -7236,13 +7243,12 @@ react-deep-force-update@^1.0.0:
72367243
resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-1.1.2.tgz#3d2ae45c2c9040cbb1772be52f8ea1ade6ca2ee1"
72377244
integrity sha512-WUSQJ4P/wWcusaH+zZmbECOk7H5N2pOIl0vzheeornkIMhu+qrNdGFm0bDZLCb0hSF0jf/kH1SgkNGfBdTc4wA==
72387245

7239-
react-dom@^18.2.0:
7240-
version "18.2.0"
7241-
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
7242-
integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
7246+
react-dom@^19.0.0:
7247+
version "19.0.0"
7248+
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.0.0.tgz#43446f1f01c65a4cd7f7588083e686a6726cfb57"
7249+
integrity sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==
72437250
dependencies:
7244-
loose-envify "^1.1.0"
7245-
scheduler "^0.23.0"
7251+
scheduler "^0.25.0"
72467252

72477253
react-intl@^6.4.4:
72487254
version "6.4.4"
@@ -7286,9 +7292,9 @@ react-proxy@^1.1.7:
72867292
react-deep-force-update "^1.0.0"
72877293

72887294
react-redux@^8.1.0:
7289-
version "8.1.2"
7290-
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.1.2.tgz#9076bbc6b60f746659ad6d51cb05de9c5e1e9188"
7291-
integrity sha512-xJKYI189VwfsFc4CJvHqHlDrzyFTY/3vZACbE+rr/zQ34Xx1wQfB4OTOSeOSNrF6BDVe8OOdxIrAnMGXA3ggfw==
7295+
version "8.1.3"
7296+
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.1.3.tgz#4fdc0462d0acb59af29a13c27ffef6f49ab4df46"
7297+
integrity sha512-n0ZrutD7DaX/j9VscF+uTALI3oUPa/pO4Z3soOBIjuRn/FzVu6aehhysxZCLi6y7duMf52WNZGMl7CtuK5EnRw==
72927298
dependencies:
72937299
"@babel/runtime" "^7.12.1"
72947300
"@types/hoist-non-react-statics" "^3.3.1"
@@ -7340,12 +7346,10 @@ react-transition-group@4.4.5:
73407346
loose-envify "^1.4.0"
73417347
prop-types "^15.6.2"
73427348

7343-
react@^18.2.0:
7344-
version "18.2.0"
7345-
resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
7346-
integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
7347-
dependencies:
7348-
loose-envify "^1.1.0"
7349+
react@^19.0.0:
7350+
version "19.0.0"
7351+
resolved "https://registry.yarnpkg.com/react/-/react-19.0.0.tgz#6e1969251b9f108870aa4bff37a0ce9ddfaaabdd"
7352+
integrity sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==
73497353

73507354
read-cache@^1.0.0:
73517355
version "1.0.0"
@@ -7510,10 +7514,10 @@ rescript-react-on-rails@^1.0.1:
75107514
resolved "https://registry.yarnpkg.com/rescript-react-on-rails/-/rescript-react-on-rails-1.0.1.tgz#541dffdae64ec5053a50a3792b9db8783c959d1b"
75117515
integrity sha512-sbkDNCoiEWM9rqIiu+4joAj6W92yhM64KtLZQYfvYYm578jMcG02d98xpDeBT7MxZoPZZggFIed0m6Dj8bbDYA==
75127516

7513-
rescript@^10.1.4:
7514-
version "10.1.4"
7515-
resolved "https://registry.yarnpkg.com/rescript/-/rescript-10.1.4.tgz#0f37710d371f32a704f17b4e804f66ce3c79a305"
7516-
integrity sha512-FFKlS9AG/XrLepWsyw7B+A9DtQBPWEPDPDKghV831Y2KGbie+eeFBOS0xtRHp0xbt7S0N2Dm6hhX+kTZQ/3Ybg==
7517+
rescript@^11.1.4:
7518+
version "11.1.4"
7519+
resolved "https://registry.yarnpkg.com/rescript/-/rescript-11.1.4.tgz#9a42ebc4fc5363707e39cef5b3188160b63bee42"
7520+
integrity sha512-0bGU0bocihjSC6MsE3TMjHjY0EUpchyrREquLS8VsZ3ohSMD+VHUEwimEfB3kpBI1vYkw3UFZ3WD8R28guz/Vw==
75177521

75187522
resolve-cwd@^3.0.0:
75197523
version "3.0.0"
@@ -7696,12 +7700,10 @@ sass@^1.58.3:
76967700
immutable "^4.0.0"
76977701
source-map-js ">=0.6.2 <2.0.0"
76987702

7699-
scheduler@^0.23.0:
7700-
version "0.23.0"
7701-
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
7702-
integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
7703-
dependencies:
7704-
loose-envify "^1.1.0"
7703+
scheduler@^0.25.0:
7704+
version "0.25.0"
7705+
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.25.0.tgz#336cd9768e8cceebf52d3c80e3dcf5de23e7e015"
7706+
integrity sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==
77057707

77067708
schema-utils@^3.0, schema-utils@^3.0.0, schema-utils@^3.1.1, schema-utils@^3.2.0:
77077709
version "3.3.0"
@@ -8494,9 +8496,9 @@ url-loader@^4.1.1:
84948496
schema-utils "^3.0.0"
84958497

84968498
use-sync-external-store@^1.0.0:
8497-
version "1.2.0"
8498-
resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
8499-
integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
8499+
version "1.4.0"
8500+
resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.4.0.tgz#adbc795d8eeb47029963016cefdf89dc799fcebc"
8501+
integrity sha512-9WXSPC5fMv61vaupRkCKCxsPxBocVnwakBEkMIHHpkTTg6icbJtg6jzgtLDm4bl3cSHAca52rYWih0k4K3PfHw==
85008502

85018503
util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
85028504
version "1.0.2"

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /