Upgrade target to es2022 (matrix-org#12852)

* Upgrade target to es2021 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 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> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

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(),