Upgrade target to es2022 (#12852)

* Upgrade target to es2021

Signed-off-by: Michael Telatynski <[email protected]>

* Upgrade to es2022

Signed-off-by: Michael Telatynski <[email protected]>

* Fix babel config

Signed-off-by: Michael Telatynski <[email protected]>

* Fix React contexts

Signed-off-by: Michael Telatynski <[email protected]>

* Fix types

Signed-off-by: Michael Telatynski <[email protected]>

* Fix React state

Signed-off-by: Michael Telatynski <[email protected]>

* Iterate

Signed-off-by: Michael Telatynski <[email protected]>

---------

Signed-off-by: Michael Telatynski <[email protected]>

Author: t3chguy

babel.config.js

@@ -10,15 +10,15 @@ module.exports = {
                     "last 2 Safari versions",
                     "last 2 Edge versions",
                 ],
+                include: ["@babel/plugin-transform-class-properties"],
             },
         ],
-        "@babel/preset-typescript",
+        ["@babel/preset-typescript", { allowDeclareFields: true }],
         "@babel/preset-react",
     ],
     plugins: [
         "@babel/plugin-proposal-export-default-from",
         "@babel/plugin-transform-numeric-separator",
-        "@babel/plugin-transform-class-properties",
         "@babel/plugin-transform-object-rest-spread",
         "@babel/plugin-syntax-dynamic-import",
         "@babel/plugin-transform-runtime",

playwright/plugins/homeserver/dendrite/index.ts

@@ -29,7 +29,6 @@ const dendriteConfigFile = "dendrite.yaml";
 
 // Surprisingly, Dendrite implements the same register user Admin API Synapse, so we can just extend it
 export class Dendrite extends Synapse implements Homeserver, HomeserverInstance {
-    public config: HomeserverConfig & { serverId: string };
     protected image = "matrixdotorg/dendrite-monolith:main";
     protected entrypoint = "/usr/bin/dendrite";
 

playwright/tsconfig.json

@@ -1,8 +1,8 @@
 {
     "compilerOptions": {
-        "target": "es2018",
+        "target": "es2022",
         "jsx": "react",
-        "lib": ["ESNext", "es2021", "dom", "dom.iterable"],
+        "lib": ["ESNext", "es2022", "dom", "dom.iterable"],
         "resolveJsonModule": true,
         "esModuleInterop": true,
         "moduleResolution": "node",

src/@types/global.d.ts

@@ -144,69 +144,14 @@ declare global {
         usageDetails?: { [key: string]: number };
     }
 
-    // https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas
-    interface OffscreenCanvas {
-        convertToBlob(opts?: { type?: string; quality?: number }): Promise<Blob>;
-    }
-
-    interface HTMLAudioElement {
-        type?: string;
-    }
-
-    interface HTMLVideoElement {
-        type?: string;
-    }
-
-    // Add Chrome-specific `instant` ScrollBehaviour
-    type _ScrollBehavior = ScrollBehavior | "instant";
-
-    interface _ScrollOptions {
-        behavior?: _ScrollBehavior;
-    }
-
-    interface _ScrollIntoViewOptions extends _ScrollOptions {
-        block?: ScrollLogicalPosition;
-        inline?: ScrollLogicalPosition;
-    }
-
     interface Element {
         // Safari & IE11 only have this prefixed: we used prefixed versions
         // previously so let's continue to support them for now
         webkitRequestFullScreen(options?: FullscreenOptions): Promise<void>;
         msRequestFullscreen(options?: FullscreenOptions): Promise<void>;
-        scrollIntoView(arg?: boolean | _ScrollIntoViewOptions): void;
-    }
-
-    interface Error {
-        // Standard
-        // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/cause
-        cause?: unknown;
-
-        // Non-standard
-        // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/fileName
-        fileName?: string;
-        // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/lineNumber
-        lineNumber?: number;
-        // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/columnNumber
-        columnNumber?: number;
-    }
-
-    // We can remove these pieces if we ever update to `target: "es2022"` in our
-    // TypeScript config which supports the new `cause` property, see
-    // https://github.com/vector-im/element-web/issues/24913
-    interface ErrorOptions {
-        // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/cause
-        cause?: unknown;
-    }
-
-    interface ErrorConstructor {
-        new (message?: string, options?: ErrorOptions): Error;
-        (message?: string, options?: ErrorOptions): Error;
+        // scrollIntoView(arg?: boolean | _ScrollIntoViewOptions): void;
     }
 
-    // eslint-disable-next-line no-var
-    var Error: ErrorConstructor;
-
     // https://github.com/microsoft/TypeScript/issues/28308#issuecomment-650802278
     interface AudioWorkletProcessor {
         readonly port: MessagePort;

src/components/structures/EmbeddedPage.tsx

@@ -45,7 +45,7 @@ interface IState {
 
 export default class EmbeddedPage extends React.PureComponent<IProps, IState> {
     public static contextType = MatrixClientContext;
-    public context!: React.ContextType<typeof MatrixClientContext>;
+    public declare context: React.ContextType<typeof MatrixClientContext>;
     private unmounted = false;
     private dispatcherRef: string | null = null;
 

src/components/structures/FilePanel.tsx

@@ -59,7 +59,7 @@ interface IState {
  */
 class FilePanel extends React.Component<IProps, IState> {
     public static contextType = RoomContext;
-    public context!: React.ContextType<typeof RoomContext>;
+    public declare context: React.ContextType<typeof RoomContext>;
 
     // This is used to track if a decrypted event was a live event and should be
     // added to the timeline.

src/components/structures/MessagePanel.tsx

@@ -205,7 +205,7 @@ interface IReadReceiptForUser {
  */
 export default class MessagePanel extends React.Component<IProps, IState> {
     public static contextType = RoomContext;
-    public context!: React.ContextType<typeof RoomContext>;
+    public declare context: React.ContextType<typeof RoomContext>;
 
     public static defaultProps = {
         disableGrouping: false,

src/components/structures/NotificationPanel.tsx

@@ -42,7 +42,7 @@ interface IState {
  */
 export default class NotificationPanel extends React.PureComponent<IProps, IState> {
     public static contextType = RoomContext;
-    public context!: React.ContextType<typeof RoomContext>;
+    public declare context: React.ContextType<typeof RoomContext>;
 
     private card = React.createRef<HTMLDivElement>();
 

src/components/structures/RightPanel.tsx

@@ -73,7 +73,7 @@ interface IState {
 
 export default class RightPanel extends React.Component<Props, IState> {
     public static contextType = MatrixClientContext;
-    public context!: React.ContextType<typeof MatrixClientContext>;
+    public declare context: React.ContextType<typeof MatrixClientContext>;
 
     public constructor(props: Props, context: React.ContextType<typeof MatrixClientContext>) {
         super(props, context);

src/components/structures/RoomStatusBar.tsx

@@ -97,11 +97,10 @@ interface IState {
 export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
     private unmounted = false;
     public static contextType = MatrixClientContext;
-    public context!: React.ContextType<typeof MatrixClientContext>;
+    public declare context: React.ContextType<typeof MatrixClientContext>;
 
     public constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
         super(props, context);
-        this.context = context; // XXX: workaround for lack of `declare` support on `public context!:` definition
 
         this.state = {
             syncState: this.context.getSyncState(),

src/components/structures/RoomView.tsx

@@ -417,7 +417,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
     private roomViewBody = createRef<HTMLDivElement>();
 
     public static contextType = SDKContext;
-    public context!: React.ContextType<typeof SDKContext>;
+    public declare context: React.ContextType<typeof SDKContext>;
 
     public constructor(props: IRoomProps, context: React.ContextType<typeof SDKContext>) {
         super(props, context);

src/components/structures/SpaceRoomView.tsx

@@ -605,7 +605,7 @@ const SpaceSetupPrivateInvite: React.FC<{
 
 export default class SpaceRoomView extends React.PureComponent<IProps, IState> {
     public static contextType = MatrixClientContext;
-    public context!: React.ContextType<typeof MatrixClientContext>;
+    public declare context: React.ContextType<typeof MatrixClientContext>;
 
     private readonly dispatcherRef: string;
 

src/components/structures/ThreadView.tsx

@@ -83,7 +83,7 @@ interface IState {
 
 export default class ThreadView extends React.Component<IProps, IState> {
     public static contextType = RoomContext;
-    public context!: React.ContextType<typeof RoomContext>;
+    public declare context: React.ContextType<typeof RoomContext>;
 
     private dispatcherRef: string | null = null;
     private readonly layoutWatcherRef: string;

src/components/structures/TimelinePanel.tsx

@@ -241,7 +241,7 @@ interface IEventIndexOpts {
  */
 class TimelinePanel extends React.Component<IProps, IState> {
     public static contextType = RoomContext;
-    public context!: React.ContextType<typeof RoomContext>;
+    public declare context: React.ContextType<typeof RoomContext>;
 
     // a map from room id to read marker event timestamp
     public static roomReadMarkerTsMap: Record<string, number> = {};
@@ -273,7 +273,6 @@ class TimelinePanel extends React.Component<IProps, IState> {
 
     public constructor(props: IProps, context: React.ContextType<typeof RoomContext>) {
         super(props, context);
-        this.context = context;
 
         debuglog("mounting");
 

src/components/structures/UserMenu.tsx

@@ -90,7 +90,7 @@ const below = (rect: PartialDOMRect): MenuProps => {
 
 export default class UserMenu extends React.Component<IProps, IState> {
     public static contextType = SDKContext;
-    public context!: React.ContextType<typeof SDKContext>;
+    public declare context: React.ContextType<typeof SDKContext>;
 
     private dispatcherRef?: string;
     private themeWatcherRef?: string;
@@ -100,7 +100,6 @@ export default class UserMenu extends React.Component<IProps, IState> {
     public constructor(props: IProps, context: React.ContextType<typeof SDKContext>) {
         super(props, context);
 
-        this.context = context;
         this.state = {
             contextMenuPosition: null,
             isDarkTheme: this.isUserOnDarkTheme(),

src/components/structures/UserView.tsx

@@ -41,7 +41,7 @@ interface IState {
 
 export default class UserView extends React.Component<IProps, IState> {
     public static contextType = MatrixClientContext;
-    public context!: React.ContextType<typeof MatrixClientContext>;
+    public declare context: React.ContextType<typeof MatrixClientContext>;
 
     public constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
         super(props, context);

src/components/structures/auth/SoftLogout.tsx

@@ -72,13 +72,11 @@ interface IState {
 
 export default class SoftLogout extends React.Component<IProps, IState> {
     public static contextType = SDKContext;
-    public context!: React.ContextType<typeof SDKContext>;
+    public declare context: React.ContextType<typeof SDKContext>;
 
     public constructor(props: IProps, context: React.ContextType<typeof SDKContext>) {
         super(props, context);
 
-        this.context = context;
-
         this.state = {
             loginView: LoginView.Loading,
             busy: false,

src/components/views/context_menus/MessageContextMenu.tsx

@@ -133,7 +133,7 @@ interface IState {
 
 export default class MessageContextMenu extends React.Component<IProps, IState> {
     public static contextType = RoomContext;
-    public context!: React.ContextType<typeof RoomContext>;
+    public declare context: React.ContextType<typeof RoomContext>;
 
     private reactButtonRef = createRef<any>(); // XXX Ref to a functional component
 

src/components/views/elements/AppTile.tsx

@@ -120,7 +120,7 @@ interface IState {
 
 export default class AppTile extends React.Component<IProps, IState> {
     public static contextType = MatrixClientContext;
-    public context!: ContextType<typeof MatrixClientContext>;
+    public declare context: ContextType<typeof MatrixClientContext>;
 
     public static defaultProps: Partial<IProps> = {
         waitForIframeLoad: true,
@@ -144,7 +144,6 @@ export default class AppTile extends React.Component<IProps, IState> {
 
     public constructor(props: IProps, context: ContextType<typeof MatrixClientContext>) {
         super(props, context);
-        this.context = context; // XXX: workaround for lack of `declare` support on `public context!:` definition
 
         // Tiles in miniMode are floating, and therefore not docked
         if (!this.props.miniMode) {

src/components/views/elements/EventListSummary.tsx

@@ -81,7 +81,7 @@ export default class EventListSummary extends React.Component<
     IProps & Required<Pick<IProps, "summaryLength" | "threshold" | "avatarsMaxLength" | "layout">>
 > {
     public static contextType = RoomContext;
-    public context!: React.ContextType<typeof RoomContext>;
+    public declare context: React.ContextType<typeof RoomContext>;
 
     public static defaultProps = {
         summaryLength: 1,

src/components/views/elements/PersistentApp.tsx

@@ -32,7 +32,7 @@ interface IProps {
 
 export default class PersistentApp extends React.Component<IProps> {
     public static contextType = MatrixClientContext;
-    public context!: ContextType<typeof MatrixClientContext>;
+    public declare context: ContextType<typeof MatrixClientContext>;
     private room: Room;
 
     public constructor(props: IProps, context: ContextType<typeof MatrixClientContext>) {

src/components/views/elements/ReplyChain.tsx

@@ -73,7 +73,7 @@ interface IState {
 // be low as each event being loaded (after the first) is triggered by an explicit user action.
 export default class ReplyChain extends React.Component<IProps, IState> {
     public static contextType = RoomContext;
-    public context!: React.ContextType<typeof RoomContext>;
+    public declare context: React.ContextType<typeof RoomContext>;
 
     private unmounted = false;
     private room: Room;

src/components/views/elements/RoomAliasField.tsx

@@ -41,7 +41,7 @@ interface IState {
 // Controlled form component wrapping Field for inputting a room alias scoped to a given domain
 export default class RoomAliasField extends React.PureComponent<IProps, IState> {
     public static contextType = MatrixClientContext;
-    public context!: React.ContextType<typeof MatrixClientContext>;
+    public declare context: React.ContextType<typeof MatrixClientContext>;
 
     private fieldRef = createRef<Field>();
 

src/components/views/emojipicker/ReactionPicker.tsx

@@ -37,7 +37,7 @@ interface IState {
 
 class ReactionPicker extends React.Component<IProps, IState> {
     public static contextType = RoomContext;
-    public context!: React.ContextType<typeof RoomContext>;
+    public declare context: React.ContextType<typeof RoomContext>;
 
     public constructor(props: IProps, context: React.ContextType<typeof RoomContext>) {
         super(props, context);

src/components/views/emojipicker/Search.tsx

@@ -31,7 +31,7 @@ interface IProps {
 
 class Search extends React.PureComponent<IProps> {
     public static contextType = RovingTabIndexContext;
-    public context!: React.ContextType<typeof RovingTabIndexContext>;
+    public declare context: React.ContextType<typeof RovingTabIndexContext>;
 
     private inputRef = React.createRef<HTMLInputElement>();
 

src/components/views/location/LocationPicker.tsx

@@ -50,7 +50,7 @@ const isSharingOwnLocation = (shareType: LocationShareType): boolean =>
 
 class LocationPicker extends React.Component<ILocationPickerProps, IState> {
     public static contextType = MatrixClientContext;
-    public context!: React.ContextType<typeof MatrixClientContext>;
+    public declare context: React.ContextType<typeof MatrixClientContext>;
     private map?: maplibregl.Map;
     private geolocate?: maplibregl.GeolocateControl;
     private marker?: maplibregl.Marker;

src/components/views/messages/EditHistoryMessage.tsx

@@ -52,15 +52,14 @@ interface IState {
 
 export default class EditHistoryMessage extends React.PureComponent<IProps, IState> {
     public static contextType = MatrixClientContext;
-    public context!: React.ContextType<typeof MatrixClientContext>;
+    public declare context: React.ContextType<typeof MatrixClientContext>;
 
     private content = createRef<HTMLDivElement>();
     private pills: Element[] = [];
     private tooltips: Element[] = [];
 
     public constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
         super(props, context);
-        this.context = context;
 
         const cli = this.context;
         const userId = cli.getSafeUserId();

src/components/views/messages/MAudioBody.tsx

@@ -38,7 +38,7 @@ interface IState {
 
 export default class MAudioBody extends React.PureComponent<IBodyProps, IState> {
     public static contextType = RoomContext;
-    public context!: React.ContextType<typeof RoomContext>;
+    public declare context: React.ContextType<typeof RoomContext>;
 
     public state: IState = {};
 

src/components/views/messages/MFileBody.tsx

@@ -106,7 +106,7 @@ interface IState {
 
 export default class MFileBody extends React.Component<IProps, IState> {
     public static contextType = RoomContext;
-    public context!: React.ContextType<typeof RoomContext>;
+    public declare context: React.ContextType<typeof RoomContext>;
 
     public state: IState = {};
 

src/components/views/messages/MImageBody.tsx

@@ -65,7 +65,7 @@ interface IState {
 
 export default class MImageBody extends React.Component<IBodyProps, IState> {
     public static contextType = RoomContext;
-    public context!: React.ContextType<typeof RoomContext>;
+    public declare context: React.ContextType<typeof RoomContext>;
 
     private unmounted = true;
     private image = createRef<HTMLImageElement>();

src/components/views/messages/MLocationBody.tsx

@@ -38,7 +38,7 @@ interface IState {
 
 export default class MLocationBody extends React.Component<IBodyProps, IState> {
     public static contextType = MatrixClientContext;
-    public context!: React.ContextType<typeof MatrixClientContext>;
+    public declare context: React.ContextType<typeof MatrixClientContext>;
 
     private unmounted = false;
     private mapId: string;