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>
2024-10-21 14:50:06 +01:00
parent 772019711d
commit d8800ef987
81 changed files with 1056 additions and 1403 deletions
--- a/src/@types/react.d.ts
+++ b/src/@types/react.d.ts
@@ -13,4 +13,7 @@ declare module "react" {
    function forwardRef<T, P = {}>(
        render: (props: PropsWithChildren<P>, ref: React.ForwardedRef<T>) => React.ReactElement | null,
    ): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
+
+    // Fix lazy types - https://stackoverflow.com/a/71017028
+    function lazy<T extends ComponentType<any>>(factory: () => Promise<{ default: T }>): T;
 }
--- a/src/NodeAnimator.tsx
+++ b/src/NodeAnimator.tsx
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */

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

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

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

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

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

        if (this.props.innerRef) {
            this.props.innerRef.current = node;
--- a/src/async-components/structures/ErrorView.tsx
+++ b/src/async-components/structures/ErrorView.tsx
@@ -25,6 +25,7 @@ interface IProps {
    title: string;
    messages?: string[];
    footer?: ReactNode;
+    children?: ReactNode;
 }

 export const ErrorView: React.FC<IProps> = ({ title, messages, footer, children }) => {
--- a/src/components/views/auth/VectorAuthPage.tsx
+++ b/src/components/views/auth/VectorAuthPage.tsx
@@ -10,7 +10,7 @@ import * as React from "react";
 import SdkConfig from "../../../SdkConfig";
 import VectorAuthFooter from "./VectorAuthFooter";

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

    // cache the url as a static to prevent it changing without refreshing
--- a/src/components/views/dialogs/BaseDialog.tsx
+++ b/src/components/views/dialogs/BaseDialog.tsx
@@ -120,7 +120,6 @@ export default class BaseDialog extends React.Component<IProps> {
                    onClick={this.onCancelClick}
                    className="mx_Dialog_cancelButton"
                    aria-label={_t("dialog_close_label")}
-                    title={_t("action|close")}
                    placement="bottom"
                />
            );
--- a/src/languageHandler.tsx
+++ b/src/languageHandler.tsx
@@ -436,7 +436,7 @@ export function replaceByRegexes(text: string, mapping: IVariables | Tags): stri
    }

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