Skip to content

Commit d8800ef

Browse files
t3chguyt3chguy
authored
Update to React 18 (#24763)
* Upgrade target to es2021 Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Upgrade target to es2021 Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Upgrade to es2022 Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Upgrade to es2022 Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix babel config Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix babel config Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix React contexts Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix types Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix React state Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update to React 18 Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update to React 18 Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Install @testing-library/dom Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update lockfile Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Yarn lock update * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
1 parent 7720197 commit d8800ef

File tree

81 files changed

+1057
-1404
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

81 files changed

+1057
-1404
lines changed

‎package.json‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -74,13 +74,9 @@
7474
"update:jitsi": "curl -s https://meet.element.io/libs/external_api.min.js > ./res/jitsi_external_api.min.js"
7575
},
7676
"resolutions": {
77-
"@types/react-dom": "17.0.25",
78-
"@types/react": "17.0.83",
7977
"@types/seedrandom": "3.0.8",
8078
"oidc-client-ts": "3.1.0",
8179
"jwt-decode": "4.0.0",
82-
"@floating-ui/react": "0.26.11",
83-
"@radix-ui/react-id": "1.1.0",
8480
"caniuse-lite": "1.0.30001668",
8581
"wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0",
8682
"wrap-ansi": "npm:wrap-ansi@^7.0.0"
@@ -94,7 +90,6 @@
9490
"@matrix-org/react-sdk-module-api": "^2.4.0",
9591
"@matrix-org/spec": "^1.7.0",
9692
"@sentry/browser": "^8.0.0",
97-
"@testing-library/react-hooks": "^8.0.1",
9893
"@vector-im/compound-design-tokens": "^1.8.0",
9994
"@vector-im/compound-web": "^7.1.0",
10095
"@zxcvbn-ts/core": "^3.0.4",
@@ -141,10 +136,10 @@
141136
"posthog-js": "1.157.2",
142137
"qrcode": "1.5.4",
143138
"re-resizable": "6.9.17",
144-
"react": "17.0.2",
139+
"react": "^18.3.1",
145140
"react-beautiful-dnd": "^13.1.0",
146141
"react-blurhash": "^0.3.0",
147-
"react-dom": "17.0.2",
142+
"react-dom": "^18.3.1",
148143
"react-focus-lock": "^2.5.1",
149144
"react-transition-group": "^4.4.1",
150145
"rfc4648": "^1.4.0",
@@ -186,10 +181,10 @@
186181
"@sentry/webpack-plugin": "^2.7.1",
187182
"@stylistic/eslint-plugin": "^2.9.0",
188183
"@svgr/webpack": "^8.0.0",
189-
"@testing-library/dom": "^9.0.0",
190-
"@testing-library/jest-dom": "^6.0.0",
191-
"@testing-library/react": "^12.1.5",
192-
"@testing-library/user-event": "^14.4.3",
184+
"@testing-library/dom": "^10.4.0",
185+
"@testing-library/jest-dom": "^6.4.8",
186+
"@testing-library/react": "^16.0.0",
187+
"@testing-library/user-event": "^14.5.2",
193188
"@types/commonmark": "^0.27.4",
194189
"@types/content-type": "^1.1.5",
195190
"@types/counterpart": "^0.18.1",
@@ -211,9 +206,9 @@
211206
"@types/node-fetch": "^2.6.2",
212207
"@types/pako": "^2.0.0",
213208
"@types/qrcode": "^1.3.5",
214-
"@types/react": "17.0.83",
209+
"@types/react": "18.3.3",
215210
"@types/react-beautiful-dnd": "^13.0.0",
216-
"@types/react-dom": "17.0.25",
211+
"@types/react-dom": "18.3.0",
217212
"@types/react-transition-group": "^4.4.0",
218213
"@types/sanitize-html": "2.13.0",
219214
"@types/sdp-transform": "^2.4.6",
@@ -260,7 +255,7 @@
260255
"husky": "^9.0.0",
261256
"jest": "^29.6.2",
262257
"jest-canvas-mock": "^2.5.2",
263-
"jest-environment-jsdom": "^29.6.2",
258+
"jest-environment-jsdom": "^29.7.0",
264259
"jest-mock": "^29.6.2",
265260
"jest-raw-loader": "^1.0.1",
266261
"jsqr": "^1.4.0",

‎playwright/element-web-test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -224,7 +224,7 @@ export const test = base.extend<{
224224
},
225225

226226
axe: async ({ page }, use) => {
227-
await use(new AxeBuilder({ page }).exclude("[id^='floating-ui-']"));
227+
await use(new AxeBuilder({ page }).exclude("[data-floating-ui-portal]"));
228228
},
229229
checkA11y: async ({ axe }, use, testInfo) =>
230230
use(async () => {

‎playwright/pages/ElementAppPage.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -188,6 +188,6 @@ export class ElementAppPage {
188188
"Element has no aria-labelledby or aria-describedy attributes! The tooltip should have added either one of these.",
189189
);
190190
}
191-
return this.page.locator(`#${labelledById ?? describedById}`);
191+
return this.page.locator(`id=${labelledById ?? describedById}`);
192192
}
193193
}

‎scripts/make-react-component.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export default %%ComponentName%%;
3232
`,
3333
TEST: `
3434
import React from "react";
35-
import { render } from "@testing-library/react";
35+
import { render } from "jest-matrix-react";
3636
3737
import %%ComponentName%% from '%%RelativeComponentPath%%';
3838

‎src/@types/react.d.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,7 @@ declare module "react" {
1313
function forwardRef<T, P = {}>(
1414
render: (props: PropsWithChildren<P>, ref: React.ForwardedRef<T>) => React.ReactElement | null,
1515
): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
16+
17+
// Fix lazy types - https://stackoverflow.com/a/71017028
18+
function lazy<T extends ComponentType<any>>(factory: () => Promise<{ default: T }>): T;
1619
}

‎src/NodeAnimator.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
66
Please see LICENSE files in the repository root for full details.
77
*/
88

9-
import React, { Key, MutableRefObject, ReactElement, ReactFragment, ReactInstance, ReactPortal } from "react";
9+
import React, { Key, MutableRefObject, ReactElement, ReactInstance } from "react";
1010
import ReactDom from "react-dom";
1111

1212
interface IChildProps {
@@ -24,7 +24,7 @@ interface IProps {
2424
innerRef?: MutableRefObject<any>;
2525
}
2626

27-
function isReactElement(c: ReactElement | ReactFragment | ReactPortal): c is ReactElement {
27+
function isReactElement(c: ReturnType<(typeof React.Children)["toArray"]>[number]): c is ReactElement {
2828
return typeof c === "object" && "type" in c;
2929
}
3030

@@ -99,7 +99,8 @@ export default class NodeAnimator extends React.Component<IProps> {
9999
}
100100

101101
private collectNode(k: Key, node: React.ReactInstance, restingStyle: React.CSSProperties): void {
102-
if (node && this.nodes[k] === undefined && this.props.startStyles.length > 0) {
102+
const key = typeof k === "bigint" ? Number(k) : k;
103+
if (node && this.nodes[key] === undefined && this.props.startStyles.length > 0) {
103104
const startStyles = this.props.startStyles;
104105
const domNode = ReactDom.findDOMNode(node);
105106
// start from startStyle 1: 0 is the one we gave it
@@ -113,7 +114,7 @@ export default class NodeAnimator extends React.Component<IProps> {
113114
this.applyStyles(domNode as HTMLElement, restingStyle);
114115
}, 0);
115116
}
116-
this.nodes[k] = node;
117+
this.nodes[key] = node;
117118

118119
if (this.props.innerRef) {
119120
this.props.innerRef.current = node;

‎src/async-components/structures/ErrorView.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ interface IProps {
2525
title: string;
2626
messages?: string[];
2727
footer?: ReactNode;
28+
children?: ReactNode;
2829
}
2930

3031
export const ErrorView: React.FC<IProps> = ({ title, messages, footer, children }) => {

‎src/components/views/auth/VectorAuthPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import * as React from "react";
1010
import SdkConfig from "../../../SdkConfig";
1111
import VectorAuthFooter from "./VectorAuthFooter";
1212

13-
export default class VectorAuthPage extends React.PureComponent {
13+
export default class VectorAuthPage extends React.PureComponent<React.PropsWithChildren> {
1414
private static welcomeBackgroundUrl?: string;
1515

1616
// cache the url as a static to prevent it changing without refreshing

‎src/components/views/dialogs/BaseDialog.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,6 @@ export default class BaseDialog extends React.Component<IProps> {
120120
onClick={this.onCancelClick}
121121
className="mx_Dialog_cancelButton"
122122
aria-label={_t("dialog_close_label")}
123-
title={_t("action|close")}
124123
placement="bottom"
125124
/>
126125
);

‎src/languageHandler.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -436,7 +436,7 @@ export function replaceByRegexes(text: string, mapping: IVariables | Tags): stri
436436
}
437437

438438
if (shouldWrapInSpan) {
439-
return React.createElement("span", null, ...output);
439+
return React.createElement("span", null, ...(output as Array<number | string | React.ReactNode>));
440440
} else {
441441
return output.join("");
442442
}

0 commit comments

Comments
 (0)